(function Page
className={cn("relative flex h-10 shrink-0 items-center gap-3 border-b px-3 py-1", className)}
>
{leading}
- {variant === "root" ? (
-
- {backLabel}
-
- ) : (
-
- )}
+
{leftActions && (
{leftActions}
diff --git a/apps/web/components/settings/keyboard-shortcuts-card.tsx b/apps/web/components/settings/keyboard-shortcuts-card.tsx
index adb484e27c..01b821bb1e 100644
--- a/apps/web/components/settings/keyboard-shortcuts-card.tsx
+++ b/apps/web/components/settings/keyboard-shortcuts-card.tsx
@@ -1,7 +1,7 @@
"use client";
import { useCallback, useEffect, useState } from "react";
-import { IconRotate } from "@tabler/icons-react";
+import { IconRotate, IconX } from "@tabler/icons-react";
import { Button } from "@kandev/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
import { Kbd } from "@kandev/ui/kbd";
@@ -9,6 +9,8 @@ import type { Key, KeyboardShortcut } from "@/lib/keyboard/constants";
import { formatShortcut } from "@/lib/keyboard/utils";
import {
CONFIGURABLE_SHORTCUTS,
+ UNBOUND_SHORTCUT,
+ isUnboundShortcut,
resolveAllShortcuts,
type ConfigurableShortcutId,
type StoredShortcutOverrides,
@@ -17,20 +19,28 @@ import { useAppStore } from "@/components/state-provider";
import { useToast } from "@/components/toast-provider";
import { updateUserSettings } from "@/lib/api/domains/settings-api";
+type ShortcutRecorderProps = {
+ shortcutId: ConfigurableShortcutId;
+ current: KeyboardShortcut;
+ onChange: (id: ConfigurableShortcutId, shortcut: KeyboardShortcut) => void;
+ onReset: (id: ConfigurableShortcutId) => void;
+ // Optional: callers that don't support an explicit "unbind" (e.g. the voice
+ // settings recorder) omit this, and the Clear button is hidden for them.
+ onClear?: (id: ConfigurableShortcutId) => void;
+};
+
export function ShortcutRecorder({
shortcutId,
current,
onChange,
onReset,
-}: {
- shortcutId: ConfigurableShortcutId;
- current: KeyboardShortcut;
- onChange: (id: ConfigurableShortcutId, shortcut: KeyboardShortcut) => void;
- onReset: (id: ConfigurableShortcutId) => void;
-}) {
+ onClear,
+}: ShortcutRecorderProps) {
const [recording, setRecording] = useState(false);
- const isDefault =
- JSON.stringify(current) === JSON.stringify(CONFIGURABLE_SHORTCUTS[shortcutId].default);
+ const defaultShortcut = CONFIGURABLE_SHORTCUTS[shortcutId].default;
+ const isDefault = JSON.stringify(current) === JSON.stringify(defaultShortcut);
+ const isUnbound = isUnboundShortcut(current);
+ const defaultIsUnbound = isUnboundShortcut(defaultShortcut);
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
@@ -85,19 +95,28 @@ export function ShortcutRecorder({
: "border-border bg-background hover:bg-accent"
}`}
>
- {recording ? (
- Press a key combo...
- ) : (
- {formatShortcut(current)}
- )}
+ {renderRecorderLabel({ recording, current, isUnbound })}
+ {onClear && !isUnbound && !defaultIsUnbound && (
+
+ )}
{!isDefault && (
@@ -107,6 +126,20 @@ export function ShortcutRecorder({
);
}
+function renderRecorderLabel({
+ recording,
+ current,
+ isUnbound,
+}: {
+ recording: boolean;
+ current: KeyboardShortcut;
+ isUnbound: boolean;
+}) {
+ if (recording) return Press a key combo...;
+ if (isUnbound) return Unbound;
+ return {formatShortcut(current)};
+}
+
export function KeyboardShortcutsCard() {
const storeOverrides = useAppStore((s) => s.userSettings.keyboardShortcuts);
const setUserSettings = useAppStore((s) => s.setUserSettings);
@@ -143,6 +176,14 @@ export function KeyboardShortcutsCard() {
[storeOverrides, persistOverrides],
);
+ const handleClear = useCallback(
+ (id: ConfigurableShortcutId) => {
+ const next = { ...storeOverrides, [id]: UNBOUND_SHORTCUT };
+ persistOverrides(next);
+ },
+ [storeOverrides, persistOverrides],
+ );
+
const ids = Object.keys(CONFIGURABLE_SHORTCUTS) as ConfigurableShortcutId[];
return (
@@ -159,6 +200,7 @@ export function KeyboardShortcutsCard() {
current={shortcuts[id]}
onChange={handleChange}
onReset={handleReset}
+ onClear={handleClear}
/>
))}
diff --git a/apps/web/components/settings/settings-app-sidebar.tsx b/apps/web/components/settings/settings-app-sidebar.tsx
deleted file mode 100644
index e58ecd4ed4..0000000000
--- a/apps/web/components/settings/settings-app-sidebar.tsx
+++ /dev/null
@@ -1,453 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import {
- IconSettings,
- IconFolder,
- IconRobot,
- IconBell,
- IconCode,
- IconCpu,
- IconKey,
- IconMicrophone,
- IconMessageCircle,
- IconBrandGithub,
- IconBrandGitlab,
- IconBrandSentry,
- IconBrandSlack,
- IconHexagon,
- IconWand,
- IconGitBranch,
- IconArrowsShuffle,
- IconTicket,
- IconPlugConnected,
- IconBolt,
- IconActivity,
- IconDatabase,
- IconArchive,
- IconFileText,
- IconRefresh,
- IconScale,
- IconInfoCircle,
- IconServerCog,
-} from "@tabler/icons-react";
-import {
- Sidebar,
- SidebarContent,
- SidebarGroup,
- SidebarGroupLabel,
- SidebarGroupContent,
- SidebarMenu,
- SidebarMenuItem,
- SidebarMenuButton,
- SidebarMenuSub,
- SidebarMenuSubItem,
- SidebarMenuSubButton,
- SidebarHeader,
- useSidebar,
-} from "@kandev/ui/sidebar";
-import { ScrollArea } from "@kandev/ui/scroll-area";
-import { ScrollOnOverflow } from "@kandev/ui/scroll-on-overflow";
-import { useAppStore } from "@/components/state-provider";
-import { useAvailableAgents } from "@/hooks/domains/settings/use-available-agents";
-
-import { AgentLogo } from "@/components/agent-logo";
-import { getExecutorIcon } from "@/lib/executor-icons";
-import { getCapabilityWarning } from "@/lib/capability-warning";
-import type { Agent, AgentProfile, Executor } from "@/lib/types/http";
-import type { WorkspaceState } from "@/lib/state/slices";
-
-type WorkspaceItem = WorkspaceState["items"][number];
-
-type GeneralSidebarSectionProps = {
- pathname: string;
-};
-
-function GeneralSidebarSection({ pathname }: GeneralSidebarSectionProps) {
- return (
-
-
-
-
- General
-
-
-
-
-
-
-
- Notifications
-
-
-
-
-
-
-
- Editors
-
-
-
-
-
- );
-}
-
-type WorkspacesSidebarSectionProps = {
- pathname: string;
- workspaces: WorkspaceItem[];
-};
-
-function WorkspacesSidebarSection({ pathname, workspaces }: WorkspacesSidebarSectionProps) {
- return (
-
-
-
-
- Workspaces
-
-
- {workspaces.length > 0 && (
-
- {workspaces.map((workspace) => {
- const workspacePath = `/settings/workspace/${workspace.id}`;
- const workflowsPath = `${workspacePath}/workflows`;
- const repositoriesPath = `${workspacePath}/repositories`;
-
- return (
-
-
-
- {workspace.name}
-
-
-
-
-
-
-
- Repositories
-
-
-
-
-
-
-
- Workflows
-
-
-
-
-
- );
- })}
-
- )}
-
- );
-}
-
-function SystemSidebarSection({ pathname }: { pathname: string }) {
- const items: Array<{ href: string; label: string; Icon: typeof IconBrandGithub }> = [
- { href: "/settings/system/status", label: "Status", Icon: IconActivity },
- { href: "/settings/system/database", label: "Database", Icon: IconDatabase },
- { href: "/settings/system/backups", label: "Backups", Icon: IconArchive },
- { href: "/settings/system/logs", label: "Logs", Icon: IconFileText },
- { href: "/settings/system/updates", label: "Updates", Icon: IconRefresh },
- { href: "/settings/system/about", label: "About", Icon: IconInfoCircle },
- { href: "/settings/system/licenses", label: "Licenses", Icon: IconScale },
- ];
- const isSystem = pathname.startsWith("/settings/system");
- return (
-
-
-
-
- System
-
-
-
- {items.map(({ href, label, Icon }) => (
-
-
-
-
- {label}
-
-
-
- ))}
-
-
- );
-}
-
-function IntegrationsSidebarSection({ pathname }: { pathname: string }) {
- const items: Array<{ href: string; label: string; Icon: typeof IconBrandGithub }> = [
- { href: "/settings/integrations/github", label: "GitHub", Icon: IconBrandGithub },
- { href: "/settings/integrations/gitlab", label: "GitLab", Icon: IconBrandGitlab },
- { href: "/settings/integrations/jira", label: "Jira", Icon: IconTicket },
- { href: "/settings/integrations/linear", label: "Linear", Icon: IconHexagon },
- { href: "/settings/integrations/sentry", label: "Sentry", Icon: IconBrandSentry },
- { href: "/settings/integrations/slack", label: "Slack", Icon: IconBrandSlack },
- ];
- return (
-
-
-
-
- Integrations
-
-
-
- {items.map(({ href, label, Icon }) => (
-
-
-
-
- {label}
-
-
-
- ))}
-
-
- );
-}
-
-type AgentsSidebarSectionProps = {
- pathname: string;
- agents: Agent[];
-};
-
-function AgentsSidebarSection({ pathname, agents }: AgentsSidebarSectionProps) {
- return (
-
-
-
-
- Agents
-
-
- {agents.length > 0 && (
-
- {agents.flatMap((agent: Agent) =>
- agent.profiles.map((profile: AgentProfile) => {
- const encodedAgent = encodeURIComponent(agent.name);
- const profilePath = `/settings/agents/${encodedAgent}/profiles/${profile.id}`;
- const agentLabel = profile.agentDisplayName || agent.name;
- const warning = getCapabilityWarning(agent.capability_status, agent.capability_error);
- return (
-
-
-
-
-
- {agentLabel} • {profile.name}
-
- {warning && }
-
-
-
- );
- }),
- )}
-
- )}
-
- );
-}
-
-type ExecutorsSidebarSectionProps = {
- pathname: string;
- executors: Executor[];
-};
-
-function ExecutorsSidebarSection({ pathname, executors }: ExecutorsSidebarSectionProps) {
- const allProfiles = executors.flatMap((e) =>
- (e.profiles ?? []).map((p) => ({ ...p, executorType: e.type })),
- );
-
- return (
-
-
-
-
- Executors
-
-
- {allProfiles.length > 0 && (
-
- {allProfiles.map((profile) => {
- const Icon = getExecutorIcon(profile.executorType);
- const profilePath = `/settings/executors/${profile.id}`;
- return (
-
-
-
-
- {profile.name}
-
-
-
- );
- })}
-
- )}
-
- );
-}
-
-type SimpleSidebarEntry = {
- href: string;
- label: string;
- Icon: typeof IconBrandGithub;
-};
-
-/**
- * A short row of single-link sidebar entries (Automations, Prompts, Voice
- * Mode, Utility Agents, External MCP) — extracted from `SettingsAppSidebar`
- * so the parent function stays under the 100-line lint limit.
- */
-function SimpleSidebarRows({
- pathname,
- entries,
-}: {
- pathname: string;
- entries: SimpleSidebarEntry[];
-}) {
- return (
- <>
- {entries.map(({ href, label, Icon }) => (
-
-
-
-
- {label}
-
-
-
- ))}
-
- );
-}
-
-function SecretsSidebarSection({ pathname }: { pathname: string }) {
- return (
-
-
-
-
- Secrets
-
-
-
- );
-}
-
-export function SettingsAppSidebar() {
- const pathname = usePathname();
- const { setOpenMobile, isMobile } = useSidebar();
- const workspaces = useAppStore((state) => state.workspaces.items);
- const executors = useAppStore((state) => state.executors.items);
- const agents = useAppStore((state) => state.settingsAgents.items);
- useAvailableAgents();
-
- // Close mobile sidebar when navigating to a new page
- useEffect(() => {
- if (isMobile) {
- setOpenMobile(false);
- }
- }, [pathname, isMobile, setOpenMobile]);
-
- return (
-
-
-
-
-
-
- Kandev
-
-
-
-
-
-
-
-
- Settings
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* System */}
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/web/components/settings/settings-layout-client.tsx b/apps/web/components/settings/settings-layout-client.tsx
index f4e98be1c2..e57c20a6d0 100644
--- a/apps/web/components/settings/settings-layout-client.tsx
+++ b/apps/web/components/settings/settings-layout-client.tsx
@@ -1,10 +1,8 @@
"use client";
import { usePathname } from "next/navigation";
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@kandev/ui/sidebar";
import { TooltipProvider } from "@kandev/ui/tooltip";
import { PageTopbar } from "@/components/page-topbar";
-import { SettingsAppSidebar } from "@/components/settings/settings-app-sidebar";
// Brand/initialism overrides so the derived label matches how the rest of the
// app spells these (e.g. "github" → "GitHub", not "Github"). Anything not
@@ -108,20 +106,20 @@ function SettingsShell({
}) {
return (
-
-
-
- }
- />
- {children}
-
-
+
+
+ {/* Scroll the content, not the topbar: min-h-0 lets this flex child
+ shrink below its content height so overflow-y-auto can take effect. */}
+
+ {children}
+
+
);
}
diff --git a/apps/web/components/task/dockview-desktop-layout.tsx b/apps/web/components/task/dockview-desktop-layout.tsx
index 5f8a92656d..3a447bcf30 100644
--- a/apps/web/components/task/dockview-desktop-layout.tsx
+++ b/apps/web/components/task/dockview-desktop-layout.tsx
@@ -28,7 +28,6 @@ import { useEnvironmentSessionId } from "@/hooks/use-environment-session-id";
import { useActiveTaskHasRepos } from "@/hooks/domains/kanban/use-active-task-has-repos";
// Panel components (rendered via portals, not directly by dockview)
-import { TaskSessionSidebar } from "./task-session-sidebar";
import { LeftHeaderActions, RightHeaderActions } from "./dockview-header-actions";
import { DockviewWatermark } from "./dockview-watermark";
import { TaskChatPanel } from "./task-chat-panel";
@@ -141,7 +140,6 @@ function PortalSlot(props: IDockviewPanelProps) {
// All panel types use the same PortalSlot wrapper — dockview only manages
// layout positioning. Actual rendering happens in PanelPortalHost below.
const components: Record> = {
- sidebar: PortalSlot,
chat: PortalSlot,
"diff-viewer": PortalSlot,
"file-editor": PortalSlot,
@@ -180,7 +178,13 @@ function useSyncUserDefaultLayout() {
const state = defaultLayout?.layout as unknown as
| import("@/lib/state/layout-manager").LayoutState
| undefined;
- setUserDefaultLayout(state?.columns ? state : null);
+ // Drop the obsolete "sidebar" column: the dockview-embedded sidebar pane was
+ // retired for the unified AppSidebar, but a default layout saved before that
+ // change still carries it. The default-build path applies this layout
+ // without the restore-time sanitize layer, so an orphaned sidebar column
+ // (its panel component is no longer registered) renders a broken grid.
+ const columns = state?.columns?.filter((c) => c.id !== "sidebar");
+ setUserDefaultLayout(columns && columns.length > 0 ? { ...state, columns } : null);
}, [savedLayouts, setUserDefaultLayout]);
}
@@ -203,22 +207,6 @@ const tabComponents: Record state.workspaces.activeId);
- // Read kanban.workflowId (task snapshot), not workflows.activeId (homepage filter), to preserve "All Workflows" across task navigation.
- const workflowId = useAppStore((state) => state.kanban.workflowId);
- const workspaceName = useAppStore((state) => {
- const ws = state.workspaces.items.find((w: { id: string }) => w.id === workspaceId);
- return ws?.name ?? "Workspace";
- });
-
- useEffect(() => {
- setPanelTitle(panelId, workspaceName);
- }, [panelId, workspaceName]);
-
- return ;
-}
-
export const CHAT_PANEL_FALLBACK_LABEL = "Agent";
export function resolveChatPanelTitle(agentLabel: string | null | undefined): string {
@@ -442,7 +430,7 @@ function renderPanel(
switch (resolved) {
case "sidebar":
- return ;
+ return null;
case "chat":
return ;
case "diff-viewer":
diff --git a/apps/web/components/task/dockview-layout-setup.ts b/apps/web/components/task/dockview-layout-setup.ts
index 236ba622ce..7bfc4731e7 100644
--- a/apps/web/components/task/dockview-layout-setup.ts
+++ b/apps/web/components/task/dockview-layout-setup.ts
@@ -4,62 +4,89 @@ import type { AppState } from "@/lib/state/store";
import { useDockviewStore } from "@/lib/state/dockview-store";
import { getRootSplitview } from "@/lib/state/dockview-layout-builders";
import {
- computeSidebarMaxPx,
computeRightMaxPx,
LAYOUT_PINNED_MIN_PX,
RIGHT_TOP_GROUP,
RIGHT_BOTTOM_GROUP,
setPinnedTarget,
+ getPinnedTarget,
} from "@/lib/state/layout-manager";
-import { setEnvLayout, setGlobalSidebarWidth } from "@/lib/local-storage";
+import { setEnvLayout } from "@/lib/local-storage";
import { panelPortalManager } from "@/lib/layout/panel-portal-manager";
import { stopVscode } from "@/lib/api/domains/vscode-api";
-import { stopUserShell } from "@/lib/api/domains/user-shell-api";
-import { createDebugLogger, isDebug } from "@/lib/debug/log";
-import { snapshotColumnWidths, formatWidthsSnapshot } from "@/lib/state/dockview-widths-debug";
-import { enforcePinnedTargets, setSashDragging } from "@/lib/state/dockview-pinned-enforce";
+import { parkUserShell, stopUserShell } from "@/lib/api/domains/user-shell-api";
-const debugWidths = createDebugLogger("dockview:widths");
-
-// v2: bumped alongside DOCKVIEW_ENV_LAYOUT_PREFIX so the no-env fallback
-// also invalidates layouts saved under the previous caps.
-const LAYOUT_STORAGE_KEY = "dockview-layout-v2";
+// v3: bumped alongside DOCKVIEW_ENV_LAYOUT_PREFIX so the no-env fallback
+// also discards layouts captured with the now-removed dockview sidebar column.
+const LAYOUT_STORAGE_KEY = "dockview-layout-v3";
const terminalTerminateClosePanelIds = new Set();
export function markTerminalPanelTerminateClose(panelId: string): void {
terminalTerminateClosePanelIds.add(panelId);
}
-// Pinned-column target enforcement and the `sashDragging` flag live in
-// `lib/state/dockview-pinned-enforce.ts` so the store can call enforcement
-// without importing this component-layer module. The sash mousedown/mouseup
-// handlers below toggle the flag via `setSashDragging`.
+/**
+ * Pinned-column target enforcement.
+ *
+ * Dockview's splitview rebalances proportionally on any `api.layout` call,
+ * which would otherwise grow pinned columns past their initial defaults on
+ * container expansion and shrink them on container contraction. We treat
+ * sidebar/right as having a *target width* (stored in `pinned-targets.ts`)
+ * that is updated only by explicit user actions (drag, initial layout,
+ * restore from saved); after every layout-change event we force the live
+ * columns back to their targets via `sv.resizeView`.
+ */
-/** Set the loose runtime cap so the user can drag the column past its target.
- * Uses `api.width` (dockview's measured grid width) for the cap computation
- * instead of `window.innerWidth`, which can briefly read stale during route
- * transitions and devtools toggles - a vw=601 read yields cap=301 (=
- * vw - VIEWPORT_RESERVE_PX) and squeezes the pinned column down to 301. */
+/** Enforcement-in-progress guard to prevent infinite loops when our own
+ * `sv.resizeView` triggers `onDidLayoutChange`. */
+let enforcing = false;
+
+/** True while the user is actively dragging a `.dv-sash`. We pause target
+ * enforcement during the drag so the in-progress resize doesn't get
+ * reverted to the previous target on every intermediate layout change. */
+let sashDragging = false;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function restoreColumnToTarget(sv: any, idx: number, target: number | undefined): void {
+ if (target === undefined) return;
+ const cur = sv.getViewSize(idx);
+ if (Math.abs(cur - target) <= 1) return;
+ try {
+ sv.resizeView(idx, target);
+ } catch {
+ /* dockview rejects unreachable sizes — ignore */
+ }
+}
+
+function enforcePinnedTargets(api: DockviewReadyEvent["api"]): void {
+ if (enforcing || sashDragging) return;
+ const store = useDockviewStore.getState();
+ if (store.isRestoringLayout) return;
+ if (api.hasMaximizedGroup() || store.preMaximizeLayout !== null) return;
+ const sv = getRootSplitview(api);
+ if (!sv || sv.length < 2) return;
+ enforcing = true;
+ try {
+ if (store.rightPanelsVisible) {
+ restoreColumnToTarget(sv, sv.length - 1, getPinnedTarget("right"));
+ }
+ } finally {
+ enforcing = false;
+ }
+}
+
+/** Set the loose runtime cap so the user can drag the column past its target. */
function setLooseConstraints(api: DockviewReadyEvent["api"]): void {
const store = useDockviewStore.getState();
if (store.isRestoringLayout) return;
if (api.hasMaximizedGroup() || store.preMaximizeLayout !== null) return;
- const vw = api.width > 0 ? api.width : undefined;
- const sb = api.getPanel("sidebar");
- if (sb && store.sidebarVisible) {
- sb.group.api.setConstraints({
- maximumWidth: computeSidebarMaxPx(vw),
- minimumWidth: LAYOUT_PINNED_MIN_PX,
- });
- }
-
if (store.rightPanelsVisible) {
for (const gid of [RIGHT_TOP_GROUP, RIGHT_BOTTOM_GROUP]) {
const group = api.groups.find((g) => g.id === gid);
if (group) {
group.api.setConstraints({
- maximumWidth: computeRightMaxPx(vw),
+ maximumWidth: computeRightMaxPx(),
minimumWidth: LAYOUT_PINNED_MIN_PX,
});
}
@@ -80,62 +107,28 @@ export function setupSashDragCapToggle(api: DockviewReadyEvent["api"]): () => vo
// enforced post-hoc via `enforcePinnedTargets`.
setLooseConstraints(api);
- const layoutSub = api.onDidLayoutChange(() => {
- // Skip the reactive enforcement during a programmatic restore - the
- // restore path itself calls `enforcePinnedTargets` synchronously inside
- // its rAF so the user never sees a transient post-rebalance flicker.
- // Without this gate, the in-flight restore (which fires its own
- // layout-change events) would be re-entered before its rAF settled.
- const s = useDockviewStore.getState();
- if (s.isRestoringLayout) return;
- enforcePinnedTargets(api, {
- sidebarVisible: s.sidebarVisible,
- rightPanelsVisible: s.rightPanelsVisible,
- maximized: s.preMaximizeLayout !== null,
- });
- });
+ const layoutSub = api.onDidLayoutChange(() => enforcePinnedTargets(api));
if (typeof document === "undefined") {
return () => layoutSub.dispose();
}
- // Local mirror of the enforcement-module flag so the mouseup handler can
- // short-circuit when no drag was in progress without round-tripping through
- // a getter. Both this local and the module flag (via setSashDragging) must
- // stay in lockstep.
- let dragging = false;
const onMouseDown = (e: MouseEvent): void => {
// Only track primary-button drags. A right/middle mousedown that didn't
- // start a drag must not leave the flag permanently set (cubic P2).
+ // start a drag must not leave `sashDragging` permanently set (cubic P2).
if (e.button !== 0) return;
const t = e.target as HTMLElement | null;
- if (t?.closest(".dv-sash")) {
- dragging = true;
- setSashDragging(true);
- }
+ if (t?.closest(".dv-sash")) sashDragging = true;
};
const onMouseUp = (e: MouseEvent): void => {
- if (e.button !== 0 || !dragging) return;
- dragging = false;
- setSashDragging(false);
+ if (e.button !== 0 || !sashDragging) return;
+ sashDragging = false;
// Capture the post-drag width as the new target.
requestAnimationFrame(() => {
const sv = getRootSplitview(api);
if (!sv) return;
const store = useDockviewStore.getState();
- if (store.sidebarVisible) {
- // A genuine drag is the ONLY writer of the global sidebar width pref.
- // Persist it globally and mirror into the store's pinnedWidths so the
- // override path (resolvePresetPinnedWidths / classifyColumns) agrees.
- const sidebarW = sv.getViewSize(0);
- setPinnedTarget("sidebar", sidebarW);
- setGlobalSidebarWidth(sidebarW);
- store.setPinnedWidth("sidebar", sidebarW);
- }
if (store.rightPanelsVisible) setPinnedTarget("right", sv.getViewSize(sv.length - 1));
- if (isDebug()) {
- debugWidths(`sash-drag-end ${formatWidthsSnapshot(snapshotColumnWidths(api))}`);
- }
});
};
document.addEventListener("mousedown", onMouseDown, true);
@@ -145,14 +138,37 @@ export function setupSashDragCapToggle(api: DockviewReadyEvent["api"]): () => vo
layoutSub.dispose();
document.removeEventListener("mousedown", onMouseDown, true);
document.removeEventListener("mouseup", onMouseUp, true);
- // Reset both flags so an unmount mid-drag (e.g. user navigates away while
- // holding a sash) doesn't leave enforcement permanently paused for the
- // next mount.
- dragging = false;
- setSashDragging(false);
+ // Reset the module-scope flag so an unmount mid-drag (e.g. user navigates
+ // away while holding a sash) doesn't leave enforcement permanently paused
+ // for the next mount (claude).
+ sashDragging = false;
};
}
+function trackPinnedWidths(api: DockviewReadyEvent["api"]): void {
+ const store = useDockviewStore.getState();
+ if (store.isRestoringLayout) return;
+ if (api.hasMaximizedGroup() || store.preMaximizeLayout !== null) return;
+ const sv = getRootSplitview(api);
+ if (!sv || sv.length < 2) return;
+ try {
+ // Right column is the last grid index when present. Skip when there is
+ // no right column (compact preset, rightPanelsVisible=false).
+ if (store.rightPanelsVisible) {
+ const rightIdx = sv.length - 1;
+ const rightW = sv.getViewSize(rightIdx);
+ if (rightW > 50) {
+ const current = store.pinnedWidths.get("right");
+ if (current !== rightW) {
+ store.setPinnedWidth("right", rightW);
+ }
+ }
+ }
+ } catch {
+ /* noop */
+ }
+}
+
/**
* Keep dockview's internal grid width in sync with the live DOM container.
*
@@ -175,12 +191,6 @@ export function setupContainerResizeSync(api: DockviewReadyEvent["api"]): () =>
const h = parent.clientHeight;
if (w <= 0 || h <= 0) return;
if (w === api.width && h === api.height) return;
- if (isDebug()) {
- debugWidths(
- `container-resize prev=${api.width}x${api.height} next=${w}x${h} ` +
- `pre=${formatWidthsSnapshot(snapshotColumnWidths(api))}`,
- );
- }
api.layout(w, h);
// `enforcePinnedTargets` (wired in `setupSashDragCapToggle`) restores
// sidebar/right to their target widths via `onDidLayoutChange`, so we
@@ -195,8 +205,11 @@ export function setupGroupTracking(api: DockviewReadyEvent["api"]): () => void {
useDockviewStore.setState({ activeGroupId: group?.id ?? null });
});
useDockviewStore.setState({ activeGroupId: api.activeGroup?.id ?? null });
+ const d2 = api.onDidLayoutChange(() => trackPinnedWidths(api));
+ trackPinnedWidths(api);
return () => {
d1.dispose();
+ d2.dispose();
};
}
@@ -211,11 +224,6 @@ export function setupLayoutPersistence(
try {
const json = api.toJSON();
const envId = envIdRef.current;
- // Global snapshot of the last layout. NOTE: restore is per-env (see
- // tryRestoreLayout) — this key is no longer read on load, since
- // restoring a cross-env layout flashed the previous task's proportions
- // while a fresh task prepared. Kept as a debounced-save checkpoint that
- // e2e polls to know a layout change has flushed before reloading.
localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(json));
if (envId) {
setEnvLayout(envId, json);
@@ -314,8 +322,8 @@ function resolveSessionForEntry(
return match?.[0] ?? active;
}
-/** Tab close → destroy the shell (PTY stopped, DB row removed). When the tab
- * component already destroyed the shell it marks the panel id so we skip. */
+/** Tab close → ordinary terminals park (PTY + DB row survive, reappear in
+ * the "+" menu); scripts/bottom-panel/legacy passthrough still destroy. */
function handleTerminalPanelClosed(
appStore: StoreApi,
panelId: string,
@@ -331,9 +339,19 @@ function handleTerminalPanelClosed(
const fallbackEnv = active ? (state.environmentIdBySessionId[active] ?? null) : null;
const envForTerminal = stampedEnv || fallbackEnv;
if (!envForTerminal) return;
- stopUserShell(envForTerminal, terminalId, stampedTaskID)
- .then(() => state.removeUserShell(envForTerminal, terminalId))
- .catch((err: unknown) => console.warn("stop terminal on tab close:", err));
+ const shell = state.userShells.byEnvironmentId[envForTerminal]?.find(
+ (s) => s.terminalId === terminalId,
+ );
+ if (shell?.kind === "ordinary") {
+ parkUserShell(terminalId, stampedTaskID).then(
+ () => state.updateUserShell(envForTerminal, terminalId, { state: "parked" }),
+ (err: unknown) => console.error("park terminal on tab close:", err),
+ );
+ } else {
+ stopUserShell(envForTerminal, terminalId, stampedTaskID).catch((err: unknown) =>
+ console.warn("stop terminal on tab close:", err),
+ );
+ }
}
export function setupPortalCleanup(
@@ -342,10 +360,8 @@ export function setupPortalCleanup(
): void {
api.onDidRemovePanel((panel) => {
if (useDockviewStore.getState().isRestoringLayout) return;
- const nonSidebarRemaining = api.panels.filter(
- (p) => p.id !== panel.id && p.api.component !== "sidebar",
- ).length;
- handleMaximizeExitOnLastClose(api, panel.id, nonSidebarRemaining);
+ const remainingPanelCount = api.panels.filter((p) => p.id !== panel.id).length;
+ handleMaximizeExitOnLastClose(api, panel.id, remainingPanelCount);
const entry = panelPortalManager.get(panel.id);
const sessionForApi = resolveSessionForEntry(appStore, entry?.envId);
if (entry?.component === "vscode" && sessionForApi) stopVscode(sessionForApi);
diff --git a/apps/web/components/task/dockview-session-tabs.ts b/apps/web/components/task/dockview-session-tabs.ts
index da127963ed..47d0f93ec3 100644
--- a/apps/web/components/task/dockview-session-tabs.ts
+++ b/apps/web/components/task/dockview-session-tabs.ts
@@ -129,10 +129,7 @@ export function setupChatPanelSafetyNet(
const hasChatPanel = api.panels.some((p) => p.id === "chat" || p.id.startsWith("session:"));
if (hasChatPanel) return;
const activeSessionId = appStore.getState().tasks.activeSessionId;
- const sb = api.getPanel("sidebar");
- const position = sb
- ? { direction: "right" as const, referencePanel: "sidebar" }
- : undefined;
+ const position = undefined;
// Only recreate a panel if there's still an active session.
// If all sessions were deleted, leave the layout empty — the user
// can create a new session via the "+" menu.
@@ -160,7 +157,7 @@ export function setupChatPanelSafetyNet(
debug("setupChatPanelSafetyNet: recreating session panel", {
activeSessionId,
activeTaskId,
- anchor: sb ? "rightOfSidebar" : "auto",
+ anchor: "auto",
});
}
api.addPanel({
@@ -308,6 +305,13 @@ export function findSessionAnchorGroupId(api: DockviewApi): string | null {
}
function resolveInitialPosition(api: DockviewApi): AddPanelOptions["position"] {
+ // Prefer the live "chat" placeholder's group. The session panel must be added
+ // INTO that group (so it's a tab beside chat) BEFORE chat is removed —
+ // otherwise removing chat empties and destroys the center group, the stored
+ // centerGroupId goes stale, and the session panel gets appended as a new row,
+ // collapsing the horizontal default layout into a vertical stack.
+ const chatGroupId = api.getPanel("chat")?.group?.id;
+ if (chatGroupId) return { referenceGroup: chatGroupId };
const { centerGroupId } = useDockviewStore.getState();
const centerGroupExists = centerGroupId && api.groups.some((g) => g.id === centerGroupId);
if (centerGroupExists) return { referenceGroup: centerGroupId };
@@ -319,8 +323,6 @@ function resolveInitialPosition(api: DockviewApi): AddPanelOptions["position"] {
// to the right of pr-detail, which contradicts the default placement
// every other code path produces. Pick the consistent default.
if (anchorGroupId) return { referenceGroup: anchorGroupId, index: 0 };
- const sb = api.getPanel("sidebar");
- if (sb) return { direction: "right" as const, referencePanel: "sidebar" };
return undefined;
}
@@ -402,20 +404,25 @@ export function reconcileRemovedSessionPanels(
const EMPTY_SESSION_IDS_KEY = "";
/**
- * Drop the generic "chat" placeholder once a real session is active.
- * Skips removal in maximized state to preserve the saved maximize layout.
- * Returns true when callers should continue ensuring session panels;
- * false when the maximized state intentionally suppresses them.
+ * Whether the layout is maximized — session panels are intentionally absent
+ * then (restored on exit-maximize). Returns true when callers should continue
+ * ensuring panels, false to skip.
*/
-function prepareLayoutForSessionPanels(api: DockviewApi): boolean {
- const preMaximizeLayout = useDockviewStore.getState().preMaximizeLayout;
+function shouldEnsureSessionPanels(): boolean {
+ return useDockviewStore.getState().preMaximizeLayout === null;
+}
+
+/**
+ * Drop the generic "chat" placeholder once a real session panel exists.
+ *
+ * MUST run AFTER the session panel has been added to chat's group — removing
+ * chat while it's the only panel in the center group destroys that group and
+ * collapses the horizontal default layout into a vertical stack.
+ */
+function removeChatPlaceholder(api: DockviewApi): void {
+ if (useDockviewStore.getState().preMaximizeLayout) return;
const chatPanel = api.getPanel("chat");
- if (chatPanel && !preMaximizeLayout) {
- api.removePanel(chatPanel);
- }
- // In maximized state, session panels are intentionally absent from the
- // layout — they'll be restored when the user exits maximize.
- return preMaximizeLayout === null;
+ if (chatPanel) api.removePanel(chatPanel);
}
/**
@@ -548,7 +555,7 @@ function shouldSkipPanelEnsure(
}
return true;
}
- if (!prepareLayoutForSessionPanels(api)) {
+ if (!shouldEnsureSessionPanels()) {
if (isDebug())
debug("useAutoSessionTab: skip body (maximized - panels suppressed)", { effectiveSessionId });
createdSet.add(effectiveSessionId);
@@ -625,6 +632,11 @@ function runAutoSessionTabEffect(
refs.sessionTabCreatedRef.current,
);
+ // Now that the session panel occupies the center group, drop the generic
+ // "chat" placeholder. Order matters: removing chat first would empty and
+ // destroy the center group, collapsing the horizontal layout.
+ removeChatPlaceholder(api);
+
const activePanel = activateSessionPanel(
api,
effectiveSessionId,
diff --git a/apps/web/components/task/dockview-shared.tsx b/apps/web/components/task/dockview-shared.tsx
index 4311adcf99..c54c5edb51 100644
--- a/apps/web/components/task/dockview-shared.tsx
+++ b/apps/web/components/task/dockview-shared.tsx
@@ -14,7 +14,6 @@ import { useSessionCommits } from "@/hooks/domains/session/use-session-commits";
import { useEnvironmentSessionId } from "@/hooks/use-environment-session-id";
// Panel components (rendered via portals, not directly by dockview)
-import { TaskSessionSidebar } from "./task-session-sidebar";
import { TaskChatPanel } from "./task-chat-panel";
import { TaskChangesPanel } from "./task-changes-panel";
import { ChangesPanel } from "./changes-panel";
@@ -101,7 +100,6 @@ function PortalSlot(props: IDockviewPanelProps) {
// All panel types use the same PortalSlot wrapper — dockview only manages
// layout positioning. Actual rendering happens in PanelPortalHost below.
export const dockviewComponents: Record> = {
- sidebar: PortalSlot,
chat: PortalSlot,
"diff-viewer": PortalSlot,
"file-editor": PortalSlot,
@@ -147,21 +145,6 @@ export { ContextMenuTab };
// Each content component renders the real panel UI. They live permanently
// in the PanelPortalHost and survive dockview layout switches.
-function SidebarContent({ panelId }: { panelId: string }) {
- const workspaceId = useAppStore((state) => state.workspaces.activeId);
- const workflowId = useAppStore((state) => state.workflows.activeId);
- const workspaceName = useAppStore((state) => {
- const ws = state.workspaces.items.find((w: { id: string }) => w.id === workspaceId);
- return ws?.name ?? "Workspace";
- });
-
- useEffect(() => {
- setPanelTitle(panelId, workspaceName);
- }, [panelId, workspaceName]);
-
- return ;
-}
-
function useChatSessionTitle(panelId: string, sessionId: string | null, isSessionTab: boolean) {
const agentLabel = useAppStore((state) => {
if (!sessionId) return null;
@@ -371,7 +354,7 @@ export function renderPanel(
switch (resolved) {
case "sidebar":
- return ;
+ return null;
case "chat":
return ;
case "diff-viewer":
diff --git a/apps/web/components/task/task-item.tsx b/apps/web/components/task/task-item.tsx
index 36f15f381e..a37ba561e4 100644
--- a/apps/web/components/task/task-item.tsx
+++ b/apps/web/components/task/task-item.tsx
@@ -342,6 +342,8 @@ export const TaskItem = memo(function TaskItem({
role="button"
tabIndex={0}
data-testid="sidebar-task-item"
+ data-active={isSelected ? "true" : "false"}
+ aria-current={isSelected ? "true" : undefined}
onClick={onClick}
onKeyDown={(e) => handleTaskItemKeyDown(e, onClick)}
style={indent.depth > 0 ? { paddingLeft: indent.paddingLeftPx } : undefined}
@@ -353,14 +355,7 @@ export const TaskItem = memo(function TaskItem({
)}
>
- {indent.depth > 0 && (
-
- ↳
-
- )}
+
+ ↳
+
+ );
+}
+
function SelectionBar({ isSelected, color }: { isSelected: boolean; color: TaskColor | null }) {
if (color) {
return (
diff --git a/apps/web/components/task/task-session-sidebar.tsx b/apps/web/components/task/task-session-sidebar.tsx
index fe5416f510..52f8dd572a 100644
--- a/apps/web/components/task/task-session-sidebar.tsx
+++ b/apps/web/components/task/task-session-sidebar.tsx
@@ -1,6 +1,8 @@
"use client";
import { useCallback, useEffect, useMemo, useState, memo } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { linkToTask } from "@/lib/links";
import type {
Message,
TaskState,
@@ -177,6 +179,8 @@ function toSidebarItem(
type TaskSessionSidebarProps = {
workspaceId: string | null;
workflowId: string | null;
+ /** Hide the embedded filter bar when the host surface (e.g. AppSidebar) renders its own. */
+ hideFilterBar?: boolean;
};
type SidebarItem = Omit, "workflowId"> & { workflowId?: string };
@@ -456,6 +460,8 @@ function useSidebarActions(store: StoreApi) {
const setActiveSession = useAppStore((state) => state.setActiveSession);
const [preparingTaskId, setPreparingTaskId] = useState(null);
const { renameTaskById } = useTaskActions();
+ const router = useRouter();
+ const pathname = usePathname();
const { removeTaskFromBoard, loadTaskSessionsForTask } = useTaskRemoval({
store,
useLayoutSwitch: true,
@@ -468,6 +474,18 @@ function useSidebarActions(store: StoreApi) {
const handleSelectTask = useCallback(
(taskId: string) => {
+ // The AppSidebar is mounted globally. On a non-task route the dockview
+ // isn't mounted, so the in-place layout switch (which only rewrites the
+ // URL via history.replaceState) would change the address bar without
+ // ever showing the task. Navigate to the task page in that case; the
+ // in-place fast-switch is only correct once the dockview is on screen.
+ const onTaskRoute =
+ !!pathname && (pathname.startsWith("/t/") || pathname.startsWith("/office/tasks/"));
+ if (!onTaskRoute) {
+ setActiveTask(taskId);
+ router.push(linkToTask(taskId));
+ return;
+ }
const state = store.getState();
const task = findTaskInSnapshots(taskId, state.kanbanMulti.snapshots, state.kanban.tasks);
selectTaskWithLayout({
@@ -480,7 +498,7 @@ function useSidebarActions(store: StoreApi) {
setPreparingTaskId,
});
},
- [loadTaskSessionsForTask, switchToSession, setActiveTask, store],
+ [loadTaskSessionsForTask, switchToSession, setActiveTask, store, router, pathname],
);
const archiveActions = useArchiveActions(store);
@@ -554,10 +572,12 @@ function useGroupedSidebarView(displayTasks: TaskSwitcherItem[]) {
export const TaskSessionSidebar = memo(function TaskSessionSidebar({
workspaceId,
+ hideFilterBar,
}: TaskSessionSidebarProps) {
const store = useAppStoreApi();
useRepositories(workspaceId);
useWorkspacePRs(workspaceId);
+ const pathname = usePathname();
const {
activeTaskId,
@@ -569,6 +589,14 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({
primarySessionIds,
} = useSidebarData(workspaceId);
+ // The sidebar is global, so `activeTaskId` lingers after navigating Home.
+ // Only highlight a task while actually viewing a task route — otherwise the
+ // last-opened task stays visually "selected" on Home and elsewhere.
+ const onTaskRoute =
+ !!pathname && (pathname.startsWith("/t/") || pathname.startsWith("/office/tasks/"));
+ const highlightedTaskId = onTaskRoute ? activeTaskId : null;
+ const highlightedSelectedTaskId = onTaskRoute ? selectedTaskId : null;
+
useBulkGitStatusSubscription(primarySessionIds);
const sidebarActions = useSidebarActions(store);
@@ -598,14 +626,14 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({
const { pinnedTaskIds, togglePinnedTask, handleReorderGroup, handleReorderSubtasks } = prefs;
return (
-
+ {!hideFilterBar && }
toggleSidebarGroupCollapsed(effectiveView.id, groupKey)}
collapsedSubtaskParentIds={collapsedSubtaskParents}
diff --git a/apps/web/components/task/task-top-bar.test.tsx b/apps/web/components/task/task-top-bar.test.tsx
index 9643627410..f79e9e8a27 100644
--- a/apps/web/components/task/task-top-bar.test.tsx
+++ b/apps/web/components/task/task-top-bar.test.tsx
@@ -80,16 +80,6 @@ vi.mock("@/components/task/quick-chat-button", () => ({
QuickChatButton: () => null,
}));
-vi.mock("@/components/task/topbar-action-overflow", () => ({
- TopbarActionOverflow: ({ items }: { items: Array<{ id: string; content: React.ReactNode }> }) => (
-
- {items.map((item) => (
-
{item.content}
- ))}
-
+ {officeTaskHref && (
- ),
- });
- }
-
- if (!isArchived && workspaceId) {
- items.push({
- id: "quick-chat",
- label: "Quick chat",
- priority: 20,
- content: (
-
-
-
- ),
- });
- }
-
- items.push({
- id: "attention",
- label: "Task status and attention",
- priority: 80,
- content: (
+ )}
- ),
- });
-
- items.push({
- id: "tools",
- label: "Task tools",
- priority: 10,
- content: (
- ),
- });
-
- return (
-
+
- {items.map((item) => (
-
- {item.content}
-
- ))}
-
- {items.map((item) =>
- hiddenIds.has(item.id) ? null : (
-
- {item.content}
-
- ),
- )}
-
-