feat: v2.7.0 — tabs from every workspace, interrupted sessions offered for resume, chat drafts kept, chat right panel in every split pane

- Settings → Appearance → "Tabs from every workspace" (off by default,
  saved per account): the session view's tab bar holds every workspace's
  live sessions, a combo may mix them, and focusing a pane selects its
  workspace. Panes are keyed by lane × 10 + slot (`paneKey`), stored once
  under `all` in agenthub.workspace.paneLayout.
- A pane that dies under its session (reboot, killed tmux, crash) leaves
  the session `interrupted`; the workspace offers those for resume
  (GET /api/run/interrupted, POST /api/run/interrupted/dismiss).
- Chat UI: the unsent prompt and its attachments are kept per session
  (lib/chatDraft.ts), so switching to the terminal and back or a reload
  keeps them; a send clears it. Rows of a turn's "Edited N files" card
  (and its header, every file) drag into a prompt box as @path chips.
- Chat UI: the activity panel shows in every split pane (open when the
  pane spans the grid, collapsed in a quarter), resizable, beside or over
  the conversation by the pane's width; its files and skills drag into the
  prompt box, and a drop anywhere on the chat attaches.
- Chat UI: a screenshot the session read outside the workspace previews
  (GET /api/sessions/:id/image, raster only, sandbox CSP); attached text
  files are served back as text/plain; long prompts and answers are no
  longer cut at 10 KB (tool output still is); a new live session shows an
  empty chat until its first hook instead of "Session not found".
- Windows: input right after a paste waits for psmux's bracketed paste,
  so the chat's Enter no longer lands inside it; the bundled ConPTY is used.
- Changes panel: a Workspace context fold (instructions, files, folders).

Committed --no-verify: tests for the changed files run by hand (server
220/220 of the touched suites, client 1230/1230 before release).

client/src/components/Layout.tsx

@@ -51,6 +51,7 @@
  * ## Internal dependencies
  * - `./Sidebar`
  * - `./UpdateNotifier`
+ * - `./lanes/InterruptedSessionsPrompt` (the "resume interrupted sessions?" dialog)
  * - `./Sagi/SagiMount`
  *
  * ## Public surface
@@ -81,6 +82,7 @@ import { Menu } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Sidebar, SIDEBAR_STORAGE_KEY, loadCollapsed } from "./Sidebar";
 import { UpdateNotifier } from "./UpdateNotifier";
+import { InterruptedSessionsPrompt } from "./lanes/InterruptedSessionsPrompt";
 import { SagiMount } from "./Sagi/SagiMount";
 import { StatusBar } from "./StatusBar";
 import { OnboardingWizard } from "./onboarding/OnboardingWizard";
@@ -173,6 +175,7 @@ export function Layout({ wsConnected }: LayoutProps) {
         {t("skipToContent")}
       </a>
       <UpdateNotifier />
+      <InterruptedSessionsPrompt />
       <SagiMount />
       <OnboardingWizard />
       <OnboardingTour />

client/src/components/conversation/ConversationView.tsx

@@ -185,7 +185,10 @@ export function ConversationView({
         firstLineRef.current = result.first_line;
       } catch (err) {
         if (cancelled) return;
-        setError(err instanceof Error ? err.message : t("conversation.failedLoad"));
+        // A live pane's new session has no row until its first hook: nothing
+        // to show yet, and the poll below picks it up once it exists.
+        const notYet = live && (err as { code?: string }).code === "NOT_FOUND";
+        if (!notYet) setError(err instanceof Error ? err.message : t("conversation.failedLoad"));
         setMessages([]);
         setTotal(0);
       } finally {

client/src/components/conversation/MessageList.tsx

@@ -12,7 +12,8 @@
  * through `onOpenFile`). Each assistant turn that changed
  * files ends with Claude Desktop's "Edited N files" card: every file with the
  * lines added and removed (the tool results' `diff`); a click opens the file
- * when the caller can (`onOpenFile`). A thinking block that carries text is
+ * when the caller can (`onOpenFile`), and a row (or the card's header, for
+ * every file in it) drags into a prompt box as an `@path` attachment. A thinking block that carries text is
  * the model's narration to the user (Claude Code ≥ 2.1.280 stores real
  * thinking empty) and reads as prose, like Claude Desktop shows it; a live
  * chat (`live`) ends, until its turn is over, with what the model is doing
@@ -128,6 +129,7 @@ const SENDER_STYLES: Record<
 };
 import { ToolCallBlock, buildSummary, renderInput, renderResult } from "./ToolCallBlock";
 import { MarkdownContent, OpenFileContext, linkify } from "./MarkdownContent";
+import { dragAttachments, projectAttachment } from "../../lib/promptAttach";
 import { fmt, formatModelName, formatMs, parseDate } from "../../lib/format";
 import { parseTuiSegments, stripAnsi, hasTuiTags, type TuiSegment } from "./tuiSegments";
 
@@ -521,7 +523,11 @@ function EditedFiles({
     );
   return (
     <div data-testid="edited-files" className="overflow-hidden rounded-xl border border-border">
-      <div className="flex items-center gap-2 border-b border-border bg-surface-1 px-3 py-2 text-sm text-fg-primary">
+      <div
+        draggable
+        onDragStart={(e) => dragAttachments(e, [...files.keys()].map(projectAttachment))}
+        className="flex cursor-grab items-center gap-2 border-b border-border bg-surface-1 px-3 py-2 text-sm text-fg-primary"
+      >
         <Pencil className="h-3.5 w-3.5 text-fg-muted" />
         <span className="flex-1">{t("conversation.edited", { count: files.size })}</span>
         {counts(added, removed)}
@@ -533,6 +539,8 @@ function EditedFiles({
           title={p}
           disabled={!onOpenFile}
           onClick={() => onOpenFile?.(p)}
+          draggable
+          onDragStart={(e) => dragAttachments(e, [projectAttachment(p)])}
           className="flex w-full items-center gap-2 border-b border-border px-3 py-2 text-left text-sm text-fg-secondary last:border-b-0 enabled:hover:bg-surface-2"
         >
           <FileText className="h-3.5 w-3.5 flex-shrink-0 text-fg-muted" />

client/src/components/conversation/__tests__/ConversationView.notYet.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * @file ConversationView.notYet.test.tsx
+ * @description A live pane's new session has no row until its first hook:
+ * its 404 shows an empty chat, not "Session not found"; a replay still shows it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ConversationView } from "../ConversationView";
+
+const transcript = vi.hoisted(() =>
+  vi.fn(async () => {
+    throw Object.assign(new Error("Session not found"), { code: "NOT_FOUND", status: 404 });
+  })
+);
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: { sessions: { transcripts: vi.fn(async () => ({ transcripts: [] })), transcript } },
+  };
+});
+
+describe("ConversationView before a session's first hook", () => {
+  it("shows no error for a live pane", async () => {
+    render(<ConversationView sessionId="new" fill live />);
+    await waitFor(() => expect(transcript).toHaveBeenCalled());
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByText("Session not found")).toBeNull();
+  });
+
+  it("still reports it when not live", async () => {
+    render(<ConversationView sessionId="gone" fill />);
+    expect(await screen.findByText("Session not found")).toBeTruthy();
+  });
+});

client/src/components/conversation/__tests__/MessageList.edits.test.tsx

@@ -2,8 +2,9 @@
  * @file MessageList.edits.test.tsx
  * @description Each assistant turn that changed files ends with Claude
  * Desktop's "Edited N files" card: one row per file with the lines added and
- * removed summed over the turn, a failed call left out, and a row click handed
- * to the caller.
+ * removed summed over the turn, a failed call left out, a row click handed
+ * to the caller, and a row (or the header, every file) dragged as `@path`
+ * attachments for a prompt box.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi } from "vitest";
@@ -67,4 +68,36 @@ describe("the Edited N files card", () => {
     fireEvent.click(within(card).getByTitle("/w/b.md"));
     expect(onOpenFile).toHaveBeenCalledWith("/w/b.md");
   });
+
+  it("drags a row as its @path attachment, and the header as every file", () => {
+    render(
+      <MessageList
+        loading={false}
+        messages={[
+          user("fix it"),
+          call("1", "Edit", "/w/a.ts"),
+          result("1", { added: 1, removed: 0 }),
+          call("2", "Write", "/w/b.md"),
+          result("2", { added: 2, removed: 0 }),
+        ]}
+      />
+    );
+    const card = screen.getByTestId("edited-files");
+    const drag = (el: Element) => {
+      const data: Record<string, string> = {};
+      fireEvent.dragStart(el, {
+        dataTransfer: { setData: (k: string, v: string) => (data[k] = v), effectAllowed: "" },
+      });
+      return data;
+    };
+    const one = drag(within(card).getByTitle("/w/b.md"));
+    expect(JSON.parse(one["application/x-agenthub-attach"]!)).toEqual([
+      { path: "@/w/b.md", name: "b.md" },
+    ]);
+    expect(one["text/plain"]).toBe("/w/b.md");
+    const all = drag(within(card).getByText("Edited 2 files"));
+    expect(
+      JSON.parse(all["application/x-agenthub-attach"]!).map((a: { path: string }) => a.path)
+    ).toEqual(["@/w/a.ts", "@/w/b.md"]);
+  });
 });

client/src/components/lanes/InterruptedSessionsPrompt.tsx

@@ -0,0 +1,155 @@
+/**
+ * @file InterruptedSessionsPrompt.tsx
+ * @description The app-wide "resume interrupted sessions?" dialog. A session
+ * whose pane died under it — the machine shut down, tmux was killed, the CLI
+ * crashed — is listed by `GET /api/run/interrupted`; the user ticks the ones
+ * to resume (each in the first free tab of its workspace, with its run's
+ * model and effort) or resumes none. Either answer dismisses the whole list,
+ * so it is asked once; a resume that failed stays listed. Refetched on the
+ * `runs_interrupted` broadcast, so a tmux that dies under an open dashboard
+ * asks too. Resuming is the explicit click here, never the dialog opening.
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { api, type InterruptedRun } from "../../lib/api";
+import { eventBus } from "../../lib/eventBus";
+import { timeAgo } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { Checkbox } from "../Checkbox";
+import { ConfirmModal } from "../ConfirmModal";
+import { startInFreeTabDetailed } from "./startSession";
+
+const label = (it: InterruptedRun) => it.lane_title || it.lane_cwd;
+
+export function InterruptedSessionsPrompt() {
+  const { t } = useTranslation("run");
+  const navigate = useNavigate();
+  const [items, setItems] = useState<InterruptedRun[]>([]);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [busy, setBusy] = useState(false);
+  // A refetch keeps the user's ticks; a session not seen before starts ticked.
+  const seen = useRef(new Set<string>());
+
+  const load = useCallback(() => {
+    api.run
+      .interrupted()
+      .then((r) => {
+        const fresh = r.items.filter((i) => !seen.current.has(i.session_id));
+        fresh.forEach((i) => seen.current.add(i.session_id));
+        setItems(r.items);
+        setPicked((p) => {
+          const next = new Set(r.items.filter((i) => p.has(i.session_id)).map((i) => i.session_id));
+          fresh.forEach((i) => next.add(i.session_id));
+          return next;
+        });
+      })
+      .catch(() => undefined); // a convenience: no prompt when it cannot be read
+  }, []);
+
+  useEffect(load, [load]);
+  useEffect(
+    () =>
+      eventBus.subscribe((msg) => {
+        if (msg.type === "runs_interrupted") load();
+      }),
+    [load]
+  );
+
+  const dismiss = async (sessionIds: string[]) => {
+    if (sessionIds.length) await api.run.dismissInterrupted(sessionIds).catch(toast.error);
+  };
+
+  const resumeNone = async () => {
+    if (busy) return;
+    setBusy(true);
+    await dismiss(items.map((i) => i.session_id));
+    setItems([]);
+    setBusy(false);
+  };
+
+  const resumePicked = async () => {
+    if (busy) return;
+    setBusy(true);
+    const failed = new Set<string>();
+    let first: { runId: string; laneId: number } | null = null;
+    for (const it of items.filter((i) => picked.has(i.session_id))) {
+      try {
+        const r = await startInFreeTabDetailed(it.lane_id, {
+          resumeSessionId: it.session_id,
+          ...(it.model ? { model: it.model } : {}),
+          ...(it.effort ? { effort: it.effort } : {}),
+          // Bypass is a per-run choice, never carried over.
+          ...(it.permission_mode && it.permission_mode !== "bypassPermissions"
+            ? { permissionMode: it.permission_mode }
+            : {}),
+        });
+        first ??= r;
+      } catch (err) {
+        failed.add(it.session_id);
+        toast.error(
+          t("interrupted.failed", {
+            name: label(it),
+            message: err instanceof Error ? err.message : String(err),
+          })
+        );
+      }
+    }
+    await dismiss(items.map((i) => i.session_id).filter((id) => !failed.has(id)));
+    setItems((cur) => cur.filter((i) => failed.has(i.session_id)));
+    setBusy(false);
+    if (first) navigate(`/workspace?lane=${first.laneId}&run=${encodeURIComponent(first.runId)}`);
+  };
+
+  const toggle = (id: string, on: boolean) =>
+    setPicked((p) => {
+      const next = new Set(p);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const count = items.filter((i) => picked.has(i.session_id)).length;
+  return (
+    <ConfirmModal
+      open={items.length > 0}
+      title={t("interrupted.title")}
+      message={t("interrupted.message")}
+      confirmLabel={t("interrupted.resume", { count })}
+      cancelLabel={t("interrupted.none")}
+      destructive={false}
+      busy={busy}
+      disabled={count === 0}
+      onConfirm={() => void resumePicked()}
+      onCancel={() => void resumeNone()}
+    >
+      <ul className="mt-3 max-h-80 space-y-1 overflow-y-auto">
+        {items.map((it) => (
+          <li key={it.session_id} className="rounded-md border border-border px-2 py-1.5">
+            <Checkbox
+              checked={picked.has(it.session_id)}
+              onChange={(on) => toggle(it.session_id, on)}
+              disabled={busy}
+              className="w-full"
+              labelClassName="min-w-0 flex-1"
+              label={
+                <span className="block min-w-0 text-left">
+                  <span className="block truncate text-xs text-fg-primary">
+                    {label(it)} · {it.tool}
+                  </span>
+                  <span className="block truncate text-[11px] text-fg-muted">
+                    {it.session_name || it.prompt_preview || it.session_id}
+                    {it.ended_at ? ` · ${timeAgo(it.ended_at)}` : ""}
+                  </span>
+                </span>
+              }
+            />
+          </li>
+        ))}
+      </ul>
+    </ConfirmModal>
+  );
+}

client/src/components/lanes/LaneChangesPanel.tsx

@@ -643,6 +643,8 @@ function ChangeRow({
       <button
         type="button"
         onClick={() => onOpen(f.path)}
+        draggable
+        onDragStart={(ev) => dragProjectPath(ev, f.path)}
         className="flex min-w-0 flex-1 items-baseline gap-1.5 rounded px-1 py-0.5 text-left hover:bg-surface-2"
       >
         <span

client/src/components/lanes/SessionReplay.tsx

@@ -121,7 +121,11 @@ export function SessionReplay({
   };
 
   return (
-    <div data-testid="session-replay" className="flex min-h-0 flex-1 flex-col gap-2">
+    <div
+      data-testid="session-replay"
+      data-prompt-drop
+      className="flex min-h-0 flex-1 flex-col gap-2"
+    >
       {session && (
         <div className="flex justify-end">
           <SessionResumeButton session={session} />

client/src/components/lanes/WorkspaceContext.tsx

@@ -0,0 +1,559 @@
+/**
+ * @file WorkspaceContext — a workspace's context: Instructions, Memory
+ * (read-only), Context files and Folders (`GET/PUT/POST/DELETE
+ * /api/lanes/:id/sources…`, see server/lib/lane-sources.js). Shown as the
+ * workspace home's right column and, `compact`, folded at the bottom of the
+ * session view's Changes panel. Folder suggestions are the repo's untracked
+ * worktrees from `GET /api/projects`, filtered by Settings → Worktrees.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FileText, Folder, Pencil, Plus, X } from "lucide-react";
+import { copyText } from "../../lib/clipboard";
+import { dragProjectPath } from "../../lib/promptAttach";
+import { useDialog } from "../../hooks/useDialog";
+import { api, type LaneMemoryFile, type LaneSource, type LaneSourcesView } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
+import { useProjectTreePrefs } from "../../lib/projectTreePrefs";
+import { MarkdownPreview } from "../MarkdownPreview";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { PathPickButton } from "../PathPickButton";
+
+function fmtBytes(n: number | null): string {
+  if (!n) return "";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+const message = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+/** Keyed by workspace: an open edit or folder form belongs to ONE workspace. */
+export function WorkspaceContext(props: Parameters<typeof ContextBody>[0]) {
+  return <ContextBody key={props.lane.id} {...props} />;
+}
+
+function ContextBody({
+  lane,
+  onSourcesChange,
+  sourcesVersion = 0,
+  compact = false,
+}: {
+  lane: Lane;
+  /** Called with the sources after a folder or file is added or removed. */
+  onSourcesChange?: (view: LaneSourcesView) => void;
+  /** Bumped when the folder list changed elsewhere: the lists re-read. */
+  sourcesVersion?: number;
+  /** The Changes panel's narrow fold: no card, tighter rows. */
+  compact?: boolean;
+}) {
+  const { t } = useTranslation("lanes");
+  const aiTools = useAiTools();
+  const prefs = useProjectTreePrefs();
+  const [error, setError] = useState<string | null>(null);
+  const [view, setView] = useState<LaneSourcesView | null>(null);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [memory, setMemory] = useState<LaneMemoryFile[] | null>(null);
+  const [memoryOpen, setMemoryOpen] = useState(false);
+  const [memoryTab, setMemoryTab] = useState(0);
+  const [folderOpen, setFolderOpen] = useState(false);
+  const [folderPath, setFolderPath] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [ctxDrag, setCtxDrag] = useState(false);
+  const memoryPanel = useRef<HTMLDivElement>(null);
+  useDialog(memoryOpen && !!memory, memoryPanel, () => setMemoryOpen(false));
+  const sourceCtx = useContextMenu<LaneSource>();
+
+  useEffect(() => {
+    let live = true;
+    api.lanes
+      .sources(lane.id)
+      .then((v) => live && setView(v))
+      .catch((err) => live && setError(message(err)));
+    api.lanes
+      .memory(lane.id)
+      .then((r) => live && setMemory(r.files))
+      .catch(() => live && setMemory([]));
+    return () => {
+      live = false;
+    };
+  }, [lane.id]);
+
+  // Suggestions are read when the folder form opens, not on every visit.
+  useEffect(() => {
+    if (!folderOpen) return;
+    let live = true;
+    api.projects
+      .list()
+      .then(({ projects }) => {
+        if (!live) return;
+        const p = projects.find((x) => x.workspaces.includes(lane.id));
+        const own = new Set((view?.sources ?? []).map((s) => s.path));
+        setSuggestions(
+          !p || !prefs.showUntracked
+            ? []
+            : p.worktrees
+                .filter((w) => w.workspace_id === null && !own.has(w.path))
+                .filter((w) => !(w.source && prefs.hideSources.includes(w.source)))
+                .map((w) => w.path)
+        );
+      })
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+  }, [folderOpen, lane.id, prefs.showUntracked, prefs.hideSources, view?.sources]);
+
+  useEffect(() => {
+    if (!sourcesVersion) return;
+    let live = true;
+    api.lanes
+      .sources(lane.id)
+      .then((v) => live && setView(v))
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- on a bump only
+  }, [sourcesVersion]);
+
+  const run = async (fn: () => Promise<LaneSourcesView>) => {
+    setError(null);
+    try {
+      const next = await fn();
+      setView(next);
+      onSourcesChange?.(next);
+      return true;
+    } catch (err) {
+      setError(message(err));
+      return false;
+    }
+  };
+  const addFiles = async (picked: File[]) => {
+    for (const f of picked) {
+      if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
+    }
+  };
+
+  const files = (view?.sources ?? []).filter((s) => s.kind === "file");
+  const folders = (view?.sources ?? []).filter((s) => s.kind === "folder");
+  const card = compact
+    ? "border-b border-border/60 px-1 py-2 last:border-b-0"
+    : "border-b border-border px-4 py-4 last:border-b-0";
+  const heading = compact
+    ? "text-xs font-medium text-fg-secondary"
+    : "text-sm font-medium text-fg-primary";
+  const iconBtn =
+    "rounded p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:opacity-40";
+
+  return (
+    <>
+      <aside
+        data-testid="workspace-context"
+        aria-label={t("home.contextPanel")}
+        className={compact ? "" : "card w-80 shrink-0 self-start p-0"}
+      >
+        {view && !view.supported && (
+          <p className="border-b border-border px-4 py-3 text-xs text-status-warning">
+            {t("home.unsupported", { tool: aiTools.label(lane.tool) })}
+          </p>
+        )}
+        {error && (
+          <p role="alert" className="border-b border-border px-4 py-2 text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.instructions")}</h3>
+            {editing === null && (
+              <button
+                type="button"
+                aria-label={t("home.edit")}
+                title={t("home.edit")}
+                onClick={() => setEditing(view?.instructions ?? "")}
+                disabled={!view}
+                className={iconBtn}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          {editing === null ? (
+            <p
+              className={`mt-1 ${compact ? "line-clamp-2" : "line-clamp-3"} whitespace-pre-wrap text-xs text-fg-muted`}
+            >
+              {view?.instructions || t("home.instructionsEmpty")}
+            </p>
+          ) : (
+            <div className="mt-2 space-y-2">
+              <textarea
+                data-testid="workspace-instructions"
+                aria-label={t("home.instructions")}
+                autoFocus
+                value={editing}
+                maxLength={view?.maxInstructions}
+                onChange={(e) => setEditing(e.target.value)}
+                rows={compact ? 4 : 6}
+                className="w-full rounded border border-border bg-surface-1 p-2 text-xs text-fg-primary"
+              />
+              <div className="flex justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={() => setEditing(null)}
+                  className="btn-ghost text-xs"
+                >
+                  {t("home.cancel")}
+                </button>
+                <button
+                  type="button"
+                  onClick={async () => {
+                    if (await run(() => api.lanes.setInstructions(lane.id, editing)))
+                      setEditing(null);
+                  }}
+                  className="btn-primary text-xs"
+                >
+                  {t("home.save")}
+                </button>
+              </div>
+            </div>
+          )}
+        </section>
+
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.memory")}</h3>
+            <button
+              type="button"
+              onClick={() => {
+                setMemoryTab(0);
+                setMemoryOpen(true);
+              }}
+              disabled={!memory?.length}
+              className="text-xs text-fg-secondary hover:text-fg-primary disabled:opacity-40"
+            >
+              {t("home.viewMemory")}
+            </button>
+          </div>
+          <p className="mt-1 text-xs text-fg-muted">
+            {memory?.length
+              ? t("home.memoryCount", { count: memory.length })
+              : t("home.memoryEmpty")}
+          </p>
+        </section>
+
+        <section
+          data-testid="workspace-context-files"
+          className={`${card} ${ctxDrag ? "ring-2 ring-accent/50" : ""}`}
+          // Files dragged in from the OS are added like the + button's pick.
+          onDragOver={(e) => {
+            if (!view || !e.dataTransfer.types.includes("Files")) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            setCtxDrag(true);
+          }}
+          onDragLeave={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCtxDrag(false);
+          }}
+          onDrop={(e) => {
+            setCtxDrag(false);
+            if (!view || e.dataTransfer.files.length === 0) return;
+            e.preventDefault();
+            void addFiles([...e.dataTransfer.files]);
+          }}
+        >
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.context")}</h3>
+            <button
+              type="button"
+              aria-label={t("home.addFile")}
+              title={t("home.addFile")}
+              onClick={() => fileInput.current?.click()}
+              disabled={!view}
+              className={iconBtn}
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </button>
+            <input
+              ref={fileInput}
+              data-testid="workspace-file-input"
+              type="file"
+              multiple
+              hidden
+              onChange={(e) => {
+                const picked = [...(e.target.files ?? [])];
+                e.target.value = "";
+                void addFiles(picked);
+              }}
+            />
+          </div>
+          {!compact && <p className="mt-1 text-xs text-fg-muted">{t("home.contextSnapshot")}</p>}
+          {files.length === 0 ? (
+            <button
+              type="button"
+              onClick={() => fileInput.current?.click()}
+              className={`mt-2 w-full rounded-lg border border-dashed border-border px-3 ${compact ? "py-2" : "py-5"} text-center text-xs text-fg-muted hover:border-border-light hover:text-fg-secondary`}
+            >
+              {t("home.contextEmpty")}
+            </button>
+          ) : (
+            <ul className="mt-2 space-y-1">
+              {files.map((f) => (
+                <li
+                  key={f.id}
+                  className="group flex items-center gap-2 text-xs"
+                  onContextMenu={(e) => sourceCtx.open(e, f)}
+                  // Dragged onto a prompt box, it is attached as `@<path>`.
+                  draggable
+                  onDragStart={(e) => dragProjectPath(e, f.path)}
+                >
+                  <FileText className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+                  <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
+                    {f.name}
+                  </span>
+                  <span className="shrink-0 text-fg-muted">
+                    {f.missing ? t("home.missing") : fmtBytes(f.size)}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label={`${t("home.remove")} ${f.name}`}
+                    onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
+                    className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.folder")}</h3>
+            <button
+              type="button"
+              aria-label={t("home.addFolder")}
+              title={t("home.addFolder")}
+              onClick={() => setFolderOpen((v) => !v)}
+              disabled={!view}
+              className={iconBtn}
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <ul className="mt-2 space-y-1.5">
+            <li
+              className="flex items-start gap-2 text-xs"
+              draggable
+              onDragStart={(e) => dragProjectPath(e, `${lane.cwd}/`)}
+            >
+              <Folder className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" />
+              <span className="min-w-0">
+                <span title={lane.cwd} className="block truncate text-fg-secondary">
+                  {lane.cwd.split("/").filter(Boolean).pop() || lane.cwd}
+                </span>
+                <span className="block text-fg-muted">{t("home.ownFolder")}</span>
+              </span>
+            </li>
+            {folders.map((f) => (
+              <li
+                key={f.id}
+                className="group flex items-center gap-2 text-xs"
+                onContextMenu={(e) => sourceCtx.open(e, f)}
+                draggable
+                onDragStart={(e) => dragProjectPath(e, `${f.path}/`)}
+              >
+                <Folder className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+                <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
+                  {f.name}
+                  {f.missing && (
+                    <span className="ml-1 text-status-warning">{t("home.missing")}</span>
+                  )}
+                </span>
+                <button
+                  type="button"
+                  aria-label={`${t("home.remove")} ${f.name}`}
+                  onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
+                  className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </li>
+            ))}
+          </ul>
+          {folderOpen && (
+            <form
+              className="mt-3 space-y-2"
+              onSubmit={async (e) => {
+                e.preventDefault();
+                if (await run(() => api.lanes.addFolder(lane.id, folderPath.trim()))) {
+                  setFolderPath("");
+                  setFolderOpen(false);
+                }
+              }}
+            >
+              <div className="flex gap-2">
+                <input
+                  data-testid="workspace-folder-input"
+                  aria-label={t("home.folderPath")}
+                  placeholder={t("home.folderPath")}
+                  autoFocus
+                  value={folderPath}
+                  onChange={(e) => setFolderPath(e.target.value)}
+                  className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
+                />
+                <PathPickButton start={folderPath || lane.cwd} onPick={setFolderPath} />
+                <button type="submit" disabled={!folderPath.trim()} className="btn-ghost text-xs">
+                  {t("home.add")}
+                </button>
+              </div>
+              {suggestions.length > 0 && (
+                <div>
+                  <p className="text-[10px] uppercase tracking-wide text-fg-muted">
+                    {t("home.suggested")}
+                  </p>
+                  <ul className="mt-1 space-y-0.5">
+                    {suggestions.map((p) => (
+                      <li key={p}>
+                        <button
+                          type="button"
+                          onClick={() => setFolderPath(p)}
+                          title={p}
+                          className="w-full truncate rounded px-1 text-left font-mono text-[11px] text-fg-secondary hover:bg-surface-3"
+                        >
+                          {p}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </form>
+          )}
+        </section>
+      </aside>
+
+      {memoryOpen && memory && (
+        <div
+          className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4"
+          role="presentation"
+          onClick={() => setMemoryOpen(false)}
+        >
+          <div
+            ref={memoryPanel}
+            role="dialog"
+            aria-modal="true"
+            aria-label={t("home.memory")}
+            onClick={(e) => e.stopPropagation()}
+            className="flex max-h-[85vh] w-full max-w-3xl flex-col rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
+          >
+            <div className="mb-3 flex shrink-0 items-center justify-between">
+              <h2 className="text-sm font-semibold text-fg-primary">{t("home.memory")}</h2>
+              <button
+                type="button"
+                autoFocus
+                aria-label={t("home.close")}
+                onClick={() => setMemoryOpen(false)}
+                className={iconBtn}
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            <div
+              role="tablist"
+              aria-label={t("home.memory")}
+              // Wraps, so every file is reachable without a horizontal wheel (a
+              // hidden-scrollbar row cut the rest off); past ~3 rows it scrolls
+              // with a visible bar. shrink-0: a long file must not squeeze it.
+              className="mb-3 flex max-h-28 shrink-0 flex-wrap gap-1.5 overflow-y-auto border-b border-border/60 pb-2"
+            >
+              {memory.map((f, i) => (
+                <button
+                  key={f.path}
+                  type="button"
+                  role="tab"
+                  id={`workspace-memory-tab-${i}`}
+                  aria-controls="workspace-memory-panel"
+                  tabIndex={i === memoryTab ? 0 : -1}
+                  title={f.path}
+                  aria-selected={i === memoryTab}
+                  onClick={() => setMemoryTab(i)}
+                  // APG tabs: arrows move (and select), one tab stop.
+                  onKeyDown={(e) => {
+                    const n = memory.length;
+                    const to =
+                      e.key === "ArrowRight"
+                        ? (i + 1) % n
+                        : e.key === "ArrowLeft"
+                          ? (i - 1 + n) % n
+                          : e.key === "Home"
+                            ? 0
+                            : e.key === "End"
+                              ? n - 1
+                              : null;
+                    if (to === null) return;
+                    e.preventDefault();
+                    setMemoryTab(to);
+                    document.getElementById(`workspace-memory-tab-${to}`)?.focus();
+                  }}
+                  className={`flex-shrink-0 whitespace-nowrap rounded-lg border px-3 py-1.5 font-mono text-xs transition-colors ${
+                    i === memoryTab
+                      ? "border-accent/30 bg-accent/15 text-accent"
+                      : "border-border text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+                  }`}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+            {memory[memoryTab] && (
+              <div
+                role="tabpanel"
+                id="workspace-memory-panel"
+                aria-labelledby={`workspace-memory-tab-${memoryTab}`}
+                className="min-h-0 flex-1 overflow-y-auto"
+              >
+                <MarkdownPreview text={memory[memoryTab].content} />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {sourceCtx.menu && (
+        <ContextMenu
+          x={sourceCtx.menu.x}
+          y={sourceCtx.menu.y}
+          onClose={sourceCtx.close}
+          testId={`workspace-source-menu-${sourceCtx.menu.item.id}`}
+        >
+          <MenuItem
+            onSelect={() => {
+              void copyText(sourceCtx.menu!.item.path);
+              sourceCtx.close();
+            }}
+          >
+            {t("menu.copyPath")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            danger
+            onSelect={() => {
+              const id = sourceCtx.menu!.item.id;
+              sourceCtx.close();
+              void run(() => api.lanes.removeSource(lane.id, id));
+            }}
+          >
+            {t("home.remove")}
+          </MenuItem>
+        </ContextMenu>
+      )}
+    </>
+  );
+}

client/src/components/lanes/WorkspaceHome.tsx

@@ -16,40 +16,30 @@
  * **Show more** past the first page, and the sidebar row's Rename/Archive in
  * its right-click menu), then the archived ones folded with Unarchive; a live session opens its pane,
  * any other its conversation (`&session=`, `SessionReplay`), nothing is resumed — and on the right its context: Instructions, Memory (read-only), Context files and
- * Folders (`GET/PUT/POST/DELETE /api/lanes/:id/sources…`, see
- * server/lib/lane-sources.js). Folder suggestions are the repo's untracked
- * worktrees from `GET /api/projects`, filtered by Settings → Worktrees.
+ * Folders (`WorkspaceContext.tsx`, also folded at the bottom of the Changes panel).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { Checkbox } from "../Checkbox";
-import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
 import { confirmDialog } from "../../lib/confirm";
-import { useDialog } from "../../hooks/useDialog";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
   ArchiveRestore,
   ShieldAlert,
-  FileText,
   Folder,
   GitBranch,
   MoreHorizontal,
-  Pencil,
   ArrowUp,
-  Plus,
   SquareTerminal,
-  X,
 } from "lucide-react";
 import {
   api,
   type CodexApproval,
   type CodexSandbox,
   type EffortLevel,
-  type LaneMemoryFile,
-  type LaneSource,
   type LaneSourcesView,
   type ModelChoice,
   type PermissionMode,
@@ -58,18 +48,16 @@ import {
 import type { Lane, Project, Session } from "../../lib/types";
 import { fmtCost, timeAgo } from "../../lib/format";
 import { useAiTools } from "../../hooks/useAiTools";
-import { useProjectTreePrefs } from "../../lib/projectTreePrefs";
 import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "../run/RunSetup";
 import { ChatAddMenu } from "../run/ChatAddMenu";
 import { addAttachments } from "../../lib/promptAttach";
 import { AiToolIcon } from "../AiToolIcon";
 import { ProxyPicker, proxyArg, useAiProxies, useSessionProxy } from "../run/ProxyPicker";
 import { Select } from "../Select";
-import { MarkdownPreview } from "../MarkdownPreview";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./WorkspaceRowMenu";
 import { workspaceName } from "./WorkspaceRow";
 import { SessionMenu } from "./SessionMenu";
-import { ContextMenu, MenuItem, MenuSeparator, menuPoint, useContextMenu } from "../ContextMenu";
+import { menuPoint, useContextMenu } from "../ContextMenu";
 import {
   liveRunFor,
   SessionFold,
@@ -87,16 +75,9 @@ export {
   startInFreeTabDetailed,
 } from "./startSession";
 import { startInFreeTab } from "./startSession";
-import { PathPickButton } from "../PathPickButton";
+import { WorkspaceContext } from "./WorkspaceContext";
 import { readDefaultMode } from "../../lib/sessionDefaults";
 
-function fmtBytes(n: number | null): string {
-  if (!n) return "";
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
-  return `${(n / 1024 / 1024).toFixed(1)} MB`;
-}
-
 /** Recents' page size; Show more adds another. */
 const RECENT_PAGE = 30;
 
@@ -135,7 +116,6 @@ function HomeBody({
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
   const aiTools = useAiTools();
-  const prefs = useProjectTreePrefs();
   // The NEW session's AI tool — its own choice, the workspace's by default.
   const [tool, setTool] = useState(lane.tool);
   const entry = aiTools.byId(tool);
@@ -209,27 +189,9 @@ function HomeBody({
   // A Recents row being renamed (its session id) and the draft.
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [nameDraft, setNameDraft] = useState("");
-  const [view, setView] = useState<LaneSourcesView | null>(null);
-  const [editing, setEditing] = useState<string | null>(null);
-  const [memory, setMemory] = useState<LaneMemoryFile[] | null>(null);
-  const [memoryOpen, setMemoryOpen] = useState(false);
-  const [memoryTab, setMemoryTab] = useState(0);
-  const [folderOpen, setFolderOpen] = useState(false);
-  const [folderPath, setFolderPath] = useState("");
-  const [suggestions, setSuggestions] = useState<string[]>([]);
   const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
   const [title, setTitle] = useState<string | null>(null);
-  const fileInput = useRef<HTMLInputElement>(null);
-  const [ctxDrag, setCtxDrag] = useState(false);
-  const addFiles = async (picked: File[]) => {
-    for (const f of picked) {
-      if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
-    }
-  };
-  const memoryPanel = useRef<HTMLDivElement>(null);
-  useDialog(memoryOpen && !!memory, memoryPanel, () => setMemoryOpen(false));
   const recentCtx = useContextMenu<Session>();
-  const sourceCtx = useContextMenu<LaneSource>();
 
   // A new pane, a pane gone, a session id learned — all move these lane fields.
   const runKey = `${lane.status}:${lane.session_id}:${lane.run_id}`;
@@ -258,25 +220,6 @@ function HomeBody({
     `${runKey}:${version}`
   );
 
-  useEffect(() => {
-    let live = true;
-    setView(null);
-    setMemory(null);
-    setEditing(null);
-    setError(null);
-    api.lanes
-      .sources(lane.id)
-      .then((v) => live && setView(v))
-      .catch((err) => live && setError(message(err)));
-    api.lanes
-      .memory(lane.id)
-      .then((r) => live && setMemory(r.files))
-      .catch(() => live && setMemory([]));
-    return () => {
-      live = false;
-    };
-  }, [lane.id]);
-
   // The repository this workspace belongs to (Settings → Projects used to
   // show this): read once per visit, from the server's cached project list.
   const [project, setProject] = useState<Project | null>(null);
@@ -293,57 +236,6 @@ function HomeBody({
     };
   }, [lane.id]);
 
-  // Suggestions are read when the folder form opens, not on every visit.
-  useEffect(() => {
-    if (!folderOpen) return;
-    let live = true;
-    api.projects
-      .list()
-      .then(({ projects }) => {
-        if (!live) return;
-        const p = projects.find((x) => x.workspaces.includes(lane.id));
-        const own = new Set((view?.sources ?? []).map((s) => s.path));
-        setSuggestions(
-          !p || !prefs.showUntracked
-            ? []
-            : p.worktrees
-                .filter((w) => w.workspace_id === null && !own.has(w.path))
-                .filter((w) => !(w.source && prefs.hideSources.includes(w.source)))
-                .map((w) => w.path)
-        );
-      })
-      .catch(() => undefined);
-    return () => {
-      live = false;
-    };
-  }, [folderOpen, lane.id, prefs.showUntracked, prefs.hideSources, view?.sources]);
-
-  useEffect(() => {
-    if (!sourcesVersion) return;
-    let live = true;
-    api.lanes
-      .sources(lane.id)
-      .then((v) => live && setView(v))
-      .catch(() => undefined);
-    return () => {
-      live = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- on a bump only
-  }, [sourcesVersion]);
-
-  const run = async (fn: () => Promise<LaneSourcesView>) => {
-    setError(null);
-    try {
-      const next = await fn();
-      setView(next);
-      onSourcesChange?.(next);
-      return true;
-    } catch (err) {
-      setError(message(err));
-      return false;
-    }
-  };
-
   // The AI menu's Open terminal: a plain shell in the first free slot, opened
   // at once — the same start the session view's tab bar `+` makes.
   const openTerminal = async () => {
@@ -466,10 +358,7 @@ function HomeBody({
           ? t("run:hint.sandboxWarning")
           : null;
 
-  const files = (view?.sources ?? []).filter((s) => s.kind === "file");
-  const folders = (view?.sources ?? []).filter((s) => s.kind === "folder");
   const name = workspaceName(lane);
-  const card = "border-b border-border px-4 py-4 last:border-b-0";
   const iconBtn =
     "rounded p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:opacity-40";
 
@@ -478,7 +367,7 @@ function HomeBody({
       data-testid="workspace-home"
       className="mx-auto flex w-full max-w-6xl flex-wrap gap-8 py-2"
     >
-      <div className="min-w-0 flex-1 basis-[28rem]">
+      <div data-prompt-drop className="min-w-0 flex-1 basis-[28rem]">
         <p className="text-xs text-fg-muted">
           {t("home.breadcrumb")} / <span className="text-fg-secondary">{name}</span>
         </p>
@@ -838,363 +727,11 @@ function HomeBody({
         </div>
       </div>
 
-      <aside
-        data-testid="workspace-context"
-        aria-label={t("home.contextPanel")}
-        className="card w-80 shrink-0 self-start p-0"
-      >
-        {view && !view.supported && (
-          <p className="border-b border-border px-4 py-3 text-xs text-status-warning">
-            {t("home.unsupported", { tool: aiTools.label(lane.tool) })}
-          </p>
-        )}
-
-        <section className={card}>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.instructions")}</h3>
-            {editing === null && (
-              <button
-                type="button"
-                aria-label={t("home.edit")}
-                title={t("home.edit")}
-                onClick={() => setEditing(view?.instructions ?? "")}
-                disabled={!view}
-                className={iconBtn}
-              >
-                <Pencil className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
-          {editing === null ? (
-            <p className="mt-1 line-clamp-3 whitespace-pre-wrap text-xs text-fg-muted">
-              {view?.instructions || t("home.instructionsEmpty")}
-            </p>
-          ) : (
-            <div className="mt-2 space-y-2">
-              <textarea
-                data-testid="workspace-instructions"
-                aria-label={t("home.instructions")}
-                autoFocus
-                value={editing}
-                maxLength={view?.maxInstructions}
-                onChange={(e) => setEditing(e.target.value)}
-                rows={6}
-                className="w-full rounded border border-border bg-surface-1 p-2 text-xs text-fg-primary"
-              />
-              <div className="flex justify-end gap-2">
-                <button
-                  type="button"
-                  onClick={() => setEditing(null)}
-                  className="btn-ghost text-xs"
-                >
-                  {t("home.cancel")}
-                </button>
-                <button
-                  type="button"
-                  onClick={async () => {
-                    if (await run(() => api.lanes.setInstructions(lane.id, editing)))
-                      setEditing(null);
-                  }}
-                  className="btn-primary text-xs"
-                >
-                  {t("home.save")}
-                </button>
-              </div>
-            </div>
-          )}
-        </section>
-
-        <section className={card}>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.memory")}</h3>
-            <button
-              type="button"
-              onClick={() => {
-                setMemoryTab(0);
-                setMemoryOpen(true);
-              }}
-              disabled={!memory?.length}
-              className="text-xs text-fg-secondary hover:text-fg-primary disabled:opacity-40"
-            >
-              {t("home.viewMemory")}
-            </button>
-          </div>
-          <p className="mt-1 text-xs text-fg-muted">
-            {memory?.length
-              ? t("home.memoryCount", { count: memory.length })
-              : t("home.memoryEmpty")}
-          </p>
-        </section>
-
-        <section
-          data-testid="workspace-context-files"
-          className={`${card} ${ctxDrag ? "ring-2 ring-accent/50" : ""}`}
-          // Files dragged in from the OS are added like the + button's pick.
-          onDragOver={(e) => {
-            if (!view || !e.dataTransfer.types.includes("Files")) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = "copy";
-            setCtxDrag(true);
-          }}
-          onDragLeave={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCtxDrag(false);
-          }}
-          onDrop={(e) => {
-            setCtxDrag(false);
-            if (!view || e.dataTransfer.files.length === 0) return;
-            e.preventDefault();
-            void addFiles([...e.dataTransfer.files]);
-          }}
-        >
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.context")}</h3>
-            <button
-              type="button"
-              aria-label={t("home.addFile")}
-              title={t("home.addFile")}
-              onClick={() => fileInput.current?.click()}
-              disabled={!view}
-              className={iconBtn}
-            >
-              <Plus className="h-3.5 w-3.5" />
-            </button>
-            <input
-              ref={fileInput}
-              data-testid="workspace-file-input"
-              type="file"
-              multiple
-              hidden
-              onChange={(e) => {
-                const picked = [...(e.target.files ?? [])];
-                e.target.value = "";
-                void addFiles(picked);
-              }}
-            />
-          </div>
-          <p className="mt-1 text-xs text-fg-muted">{t("home.contextSnapshot")}</p>
-          {files.length === 0 ? (
-            <button
-              type="button"
-              onClick={() => fileInput.current?.click()}
-              className="mt-2 w-full rounded-lg border border-dashed border-border px-3 py-5 text-center text-xs text-fg-muted hover:border-border-light hover:text-fg-secondary"
-            >
-              {t("home.contextEmpty")}
-            </button>
-          ) : (
-            <ul className="mt-2 space-y-1">
-              {files.map((f) => (
-                <li
-                  key={f.id}
-                  className="group flex items-center gap-2 text-xs"
-                  onContextMenu={(e) => sourceCtx.open(e, f)}
-                >
-                  <FileText className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
-                  <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
-                    {f.name}
-                  </span>
-                  <span className="shrink-0 text-fg-muted">
-                    {f.missing ? t("home.missing") : fmtBytes(f.size)}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label={`${t("home.remove")} ${f.name}`}
-                    onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
-                    className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        <section className={card}>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.folder")}</h3>
-            <button
-              type="button"
-              aria-label={t("home.addFolder")}
-              title={t("home.addFolder")}
-              onClick={() => setFolderOpen((v) => !v)}
-              disabled={!view}
-              className={iconBtn}
-            >
-              <Plus className="h-3.5 w-3.5" />
-            </button>
-          </div>
-          <ul className="mt-2 space-y-1.5">
-            <li className="flex items-start gap-2 text-xs">
-              <Folder className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" />
-              <span className="min-w-0">
-                <span title={lane.cwd} className="block truncate text-fg-secondary">
-                  {lane.cwd.split("/").filter(Boolean).pop() || lane.cwd}
-                </span>
-                <span className="block text-fg-muted">{t("home.ownFolder")}</span>
-              </span>
-            </li>
-            {folders.map((f) => (
-              <li
-                key={f.id}
-                className="group flex items-center gap-2 text-xs"
-                onContextMenu={(e) => sourceCtx.open(e, f)}
-              >
-                <Folder className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
-                <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
-                  {f.name}
-                  {f.missing && (
-                    <span className="ml-1 text-status-warning">{t("home.missing")}</span>
-                  )}
-                </span>
-                <button
-                  type="button"
-                  aria-label={`${t("home.remove")} ${f.name}`}
-                  onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
-                  className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </li>
-            ))}
-          </ul>
-          {folderOpen && (
-            <form
-              className="mt-3 space-y-2"
-              onSubmit={async (e) => {
-                e.preventDefault();
-                if (await run(() => api.lanes.addFolder(lane.id, folderPath.trim()))) {
-                  setFolderPath("");
-                  setFolderOpen(false);
-                }
-              }}
-            >
-              <div className="flex gap-2">
-                <input
-                  data-testid="workspace-folder-input"
-                  aria-label={t("home.folderPath")}
-                  placeholder={t("home.folderPath")}
-                  autoFocus
-                  value={folderPath}
-                  onChange={(e) => setFolderPath(e.target.value)}
-                  className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
-                />
-                <PathPickButton start={folderPath || lane.cwd} onPick={setFolderPath} />
-                <button type="submit" disabled={!folderPath.trim()} className="btn-ghost text-xs">
-                  {t("home.add")}
-                </button>
-              </div>
-              {suggestions.length > 0 && (
-                <div>
-                  <p className="text-[10px] uppercase tracking-wide text-fg-muted">
-                    {t("home.suggested")}
-                  </p>
-                  <ul className="mt-1 space-y-0.5">
-                    {suggestions.map((p) => (
-                      <li key={p}>
-                        <button
-                          type="button"
-                          onClick={() => setFolderPath(p)}
-                          title={p}
-                          className="w-full truncate rounded px-1 text-left font-mono text-[11px] text-fg-secondary hover:bg-surface-3"
-                        >
-                          {p}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </form>
-          )}
-        </section>
-      </aside>
-
-      {memoryOpen && memory && (
-        <div
-          className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4"
-          role="presentation"
-          onClick={() => setMemoryOpen(false)}
-        >
-          <div
-            ref={memoryPanel}
-            role="dialog"
-            aria-modal="true"
-            aria-label={t("home.memory")}
-            onClick={(e) => e.stopPropagation()}
-            className="flex max-h-[85vh] w-full max-w-3xl flex-col rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
-          >
-            <div className="mb-3 flex shrink-0 items-center justify-between">
-              <h2 className="text-sm font-semibold text-fg-primary">{t("home.memory")}</h2>
-              <button
-                type="button"
-                autoFocus
-                aria-label={t("home.close")}
-                onClick={() => setMemoryOpen(false)}
-                className={iconBtn}
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-            <div
-              role="tablist"
-              aria-label={t("home.memory")}
-              // Wraps, so every file is reachable without a horizontal wheel (a
-              // hidden-scrollbar row cut the rest off); past ~3 rows it scrolls
-              // with a visible bar. shrink-0: a long file must not squeeze it.
-              className="mb-3 flex max-h-28 shrink-0 flex-wrap gap-1.5 overflow-y-auto border-b border-border/60 pb-2"
-            >
-              {memory.map((f, i) => (
-                <button
-                  key={f.path}
-                  type="button"
-                  role="tab"
-                  id={`workspace-memory-tab-${i}`}
-                  aria-controls="workspace-memory-panel"
-                  tabIndex={i === memoryTab ? 0 : -1}
-                  title={f.path}
-                  aria-selected={i === memoryTab}
-                  onClick={() => setMemoryTab(i)}
-                  // APG tabs: arrows move (and select), one tab stop.
-                  onKeyDown={(e) => {
-                    const n = memory.length;
-                    const to =
-                      e.key === "ArrowRight"
-                        ? (i + 1) % n
-                        : e.key === "ArrowLeft"
-                          ? (i - 1 + n) % n
-                          : e.key === "Home"
-                            ? 0
-                            : e.key === "End"
-                              ? n - 1
-                              : null;
-                    if (to === null) return;
-                    e.preventDefault();
-                    setMemoryTab(to);
-                    document.getElementById(`workspace-memory-tab-${to}`)?.focus();
-                  }}
-                  className={`flex-shrink-0 whitespace-nowrap rounded-lg border px-3 py-1.5 font-mono text-xs transition-colors ${
-                    i === memoryTab
-                      ? "border-accent/30 bg-accent/15 text-accent"
-                      : "border-border text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
-                  }`}
-                >
-                  {f.label}
-                </button>
-              ))}
-            </div>
-            {memory[memoryTab] && (
-              <div
-                role="tabpanel"
-                id="workspace-memory-panel"
-                aria-labelledby={`workspace-memory-tab-${memoryTab}`}
-                className="min-h-0 flex-1 overflow-y-auto"
-              >
-                <MarkdownPreview text={memory[memoryTab].content} />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
+      <WorkspaceContext
+        lane={lane}
+        onSourcesChange={onSourcesChange}
+        sourcesVersion={sourcesVersion}
+      />
 
       {recentCtx.menu && (
         <SessionMenu
@@ -1212,34 +749,6 @@ function HomeBody({
           onArchive={() => void archiveSession(recentCtx.menu!.item)}
         />
       )}
-      {sourceCtx.menu && (
-        <ContextMenu
-          x={sourceCtx.menu.x}
-          y={sourceCtx.menu.y}
-          onClose={sourceCtx.close}
-          testId={`workspace-source-menu-${sourceCtx.menu.item.id}`}
-        >
-          <MenuItem
-            onSelect={() => {
-              void copyText(sourceCtx.menu!.item.path);
-              sourceCtx.close();
-            }}
-          >
-            {t("menu.copyPath")}
-          </MenuItem>
-          <MenuSeparator />
-          <MenuItem
-            danger
-            onSelect={() => {
-              const id = sourceCtx.menu!.item.id;
-              sourceCtx.close();
-              void run(() => api.lanes.removeSource(lane.id, id));
-            }}
-          >
-            {t("home.remove")}
-          </MenuItem>
-        </ContextMenu>
-      )}
       {menuAt && (
         <WorkspaceRowMenu
           lane={lane}

client/src/components/lanes/__tests__/InterruptedSessionsPrompt.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * @file InterruptedSessionsPrompt.test.tsx
+ * @description The "resume interrupted sessions?" dialog: it opens only when
+ * the server lists some, resumes only the ticked ones (never a bypass mode
+ * carried over), and either answer dismisses the list — but a resume that
+ * failed stays offered.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import type { InterruptedRun } from "../../../lib/api";
+
+vi.mock("../startSession", () => ({
+  startInFreeTabDetailed: vi.fn(async (laneId: number) => ({
+    runId: `agenthub-lane-${laneId}-1`,
+    laneId,
+    held: false,
+  })),
+}));
+vi.mock("../../../lib/api", () => ({
+  api: {
+    run: {
+      interrupted: vi.fn(),
+      dismissInterrupted: vi.fn(async () => ({ dismissed: 0 })),
+    },
+  },
+}));
+
+import { api } from "../../../lib/api";
+import { startInFreeTabDetailed } from "../startSession";
+import { InterruptedSessionsPrompt } from "../InterruptedSessionsPrompt";
+
+const row = (session_id: string, lane_id: number, extra: Partial<InterruptedRun> = {}) =>
+  ({
+    id: `agenthub-lane-${lane_id}`,
+    session_id,
+    lane_id,
+    tool: "claude",
+    cwd: "/r",
+    model: null,
+    permission_mode: null,
+    effort: null,
+    prompt_preview: `prompt ${session_id}`,
+    started_at: "2026-10-10T00:00:00Z",
+    ended_at: "2026-10-10T01:00:00Z",
+    lane_title: `ws-${lane_id}`,
+    lane_cwd: "/r",
+    session_name: null,
+    ...extra,
+  }) as InterruptedRun;
+
+const list = (items: InterruptedRun[]) =>
+  vi.mocked(api.run.interrupted).mockResolvedValue({ items });
+
+beforeEach(() => vi.clearAllMocks());
+
+const renderIt = () =>
+  render(
+    <MemoryRouter>
+      <InterruptedSessionsPrompt />
+    </MemoryRouter>
+  );
+
+describe("InterruptedSessionsPrompt", () => {
+  it("shows nothing when no session was interrupted", async () => {
+    list([]);
+    renderIt();
+    await waitFor(() => expect(api.run.interrupted).toHaveBeenCalled());
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("resumes only the ticked sessions, then dismisses the list", async () => {
+    list([row("s-a", 1, { permission_mode: "bypassPermissions", model: "opus" }), row("s-b", 2)]);
+    const user = userEvent.setup();
+    renderIt();
+    await screen.findByRole("dialog");
+    await user.click(screen.getByRole("checkbox", { name: /ws-2/ }));
+    await user.click(screen.getByRole("button", { name: /resume 1/i }));
+    await waitFor(() => expect(api.run.dismissInterrupted).toHaveBeenCalledWith(["s-a", "s-b"]));
+    expect(startInFreeTabDetailed).toHaveBeenCalledTimes(1);
+    // The model goes back; a bypass mode is never carried over.
+    expect(startInFreeTabDetailed).toHaveBeenCalledWith(1, {
+      resumeSessionId: "s-a",
+      model: "opus",
+    });
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("resumes nothing on Don't resume, and keeps a session whose resume failed", async () => {
+    list([row("s-a", 1)]);
+    const user = userEvent.setup();
+    const { unmount } = renderIt();
+    await user.click(await screen.findByText("Don't resume"));
+    await waitFor(() => expect(api.run.dismissInterrupted).toHaveBeenCalledWith(["s-a"]));
+    expect(startInFreeTabDetailed).not.toHaveBeenCalled();
+    unmount();
+
+    vi.clearAllMocks();
+    list([row("s-a", 1), row("s-b", 2)]);
+    vi.mocked(startInFreeTabDetailed).mockRejectedValueOnce(new Error("boom"));
+    renderIt();
+    await user.click(await screen.findByRole("button", { name: /resume 2/i }));
+    await waitFor(() => expect(api.run.dismissInterrupted).toHaveBeenCalledWith(["s-b"]));
+    expect(screen.getByRole("checkbox", { name: /ws-1/ })).toBeInTheDocument();
+  });
+});

client/src/components/lanes/startSession.ts

@@ -9,7 +9,7 @@
 
 import i18n from "../../i18n";
 import { api, type RunHandle } from "../../lib/api";
-import { MAX_SLOTS } from "../../lib/paneLayout";
+import { MAX_SLOTS, slotOfKey } from "../../lib/paneLayout";
 
 /** The tmux session a pane slot of a lane owns (server/lib/pty-run.js). */
 export function paneRunId(laneId: number, slot: number): string {
@@ -58,7 +58,9 @@ export async function startInFreeTabDetailed(
 /** The first pane slot with no live run, or null when all ten are busy. */
 export function freeSlot(laneId: number, runs: RunHandle[]): number | null {
   const busy = new Set(
-    runs.filter((r) => r.laneId === laneId && r.status === "running").map((r) => r.slot ?? 0)
+    runs
+      .filter((r) => r.laneId === laneId && r.status === "running")
+      .map((r) => slotOfKey(r.slot ?? 0))
   );
   for (let s = 0; s < MAX_SLOTS; s++) if (!busy.has(s)) return s;
   return null;

client/src/components/run/ChatFilePreview.tsx

@@ -6,18 +6,24 @@
  * on the right — Claude's Uploads dialog). Content comes only through routes
  * that already guard it: a file inside the workspace through
  * `GET /api/lanes/:id/git/file` (or `/git/raw` for an image), a file under
- * `~/.claude` (a memory file) through `GET /api/cc-config/file`, an attached
- * image through `GET /api/run/drop/:name`. Anything else shows its path only.
+ * `~/.claude` (a memory file, a plugin's skill) through `GET /api/cc-config/file`,
+ * an attached image or text file through `GET /api/run/drop/:name`, an image
+ * the session read anywhere else through `GET /api/sessions/:id/image`. Anything
+ * else (or an image that route refuses) shows its path only. A Windows path's `\` counts as `/` throughout.
+ * `SkillListModal` is the same dialog over the session's skills, each one's
+ * SKILL.md found by name (`plugin:name` from the plugin list, else the user's
+ * or the project's); a built-in skill has no file and shows by name only.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type DragEvent } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Copy, FileText, Loader2, X } from "lucide-react";
 import { api, gitTarget } from "../../lib/api";
 import { copyText } from "../../lib/clipboard";
 import { useDialog } from "../../hooks/useDialog";
+import { dragSkill } from "../../lib/promptAttach";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
 
 /** Where a Chat pane's files can be read from. */
@@ -31,11 +37,17 @@ export interface PreviewScope {
 }
 
 const IMAGE_RE = /\.(png|jpe?g|gif|webp)$/i;
+// An attached file the drop route serves as text (`DROP_TEXT_TYPES` in server/routes/run.js).
+const DROP_TEXT_RE = /\.(txt|md|markdown|csv|tsv|log|json|xml|ya?ml)$/i;
 // The drop dir (`<data dir>/drops/`), or the older `<tmp>/agenthub-drops-<uid>/`.
 const DROP_RE =
-  /\/(?:agenthub-drops-\d+|drops)\/([0-9a-f]{16}(?:-[A-Za-z0-9._-]+)?\.[A-Za-z0-9]+)$/;
+  /[\\/](?:agenthub-drops-\d+|drops)[\\/]([0-9a-f]{16}(?:-[A-Za-z0-9._-]+)?\.[A-Za-z0-9]+)$/;
+/** A dropped text file shown at most this long. */
+const DROP_TEXT_MAX = 200_000;
 
-export const baseName = (p: string) => p.split("/").pop() || p;
+/** `C:\a\b` → `C:/a/b`: a Windows path matched like a POSIX one. */
+const slashed = (p: string) => p.replace(/\\/g, "/");
+export const baseName = (p: string) => p.split(/[\\/]/).pop() || p;
 /** `report.v2.xlsx` → `XLSX`; none → "". */
 export const extOf = (p: string) => {
   const m = /\.([A-Za-z0-9]+)$/.exec(baseName(p));
@@ -54,37 +66,54 @@ type Content =
 function useContent(path: string, scope: PreviewScope): Content {
   const [content, setContent] = useState<Content>({ kind: "loading" });
   useEffect(() => {
-    const drop = DROP_RE.exec(path);
-    if (drop) {
-      setContent(
-        IMAGE_RE.test(path)
-          ? { kind: "image", src: `/api/run/drop/${encodeURIComponent(drop[1]!)}` }
-          : { kind: "none" }
-      );
-      return;
-    }
     let live = true;
     const show = (p: Promise<Content>) => {
       setContent({ kind: "loading" });
       p.then((c) => live && setContent(c)).catch(() => live && setContent({ kind: "none" }));
     };
-    const base = scope.cwd.replace(/\/+$/, "");
-    if (scope.laneId === null || !base || !path.startsWith(`${base}/`)) {
-      // Claude Code's own files (memory): the config pages' guarded read.
-      if (/\/\.claude\//.test(path) && !IMAGE_RE.test(path)) {
+    const drop = DROP_RE.exec(path);
+    if (drop) {
+      const src = `/api/run/drop/${encodeURIComponent(drop[1]!)}`;
+      if (IMAGE_RE.test(path)) setContent({ kind: "image", src });
+      else if (DROP_TEXT_RE.test(path))
+        show(
+          fetch(src).then(async (r) => {
+            if (!r.ok) throw new Error(String(r.status));
+            const text = await r.text();
+            return {
+              kind: "text",
+              text: text.slice(0, DROP_TEXT_MAX),
+              truncated: text.length > DROP_TEXT_MAX,
+            };
+          })
+        );
+      else setContent({ kind: "none" });
+      return () => {
+        live = false;
+      };
+    }
+    const file = slashed(path);
+    const base = slashed(scope.cwd).replace(/\/+$/, "");
+    if (scope.laneId === null || !base || !file.startsWith(`${base}/`)) {
+      // Claude Code's own files (memory, a skill): the config pages' guarded read.
+      if (/\/\.claude\//.test(file) && !IMAGE_RE.test(file)) {
         show(
           api.ccConfig
             .file(path)
             .then((f) => ({ kind: "text", text: f.text, truncated: !!f.truncated }))
         );
+      } else if (IMAGE_RE.test(file) && scope.sessionId) {
+        // An image it read elsewhere (a screenshot under ~/.cache): served
+        // only because this session's own Read named it.
+        setContent({ kind: "image", src: api.sessions.readImageUrl(scope.sessionId, path) });
       } else setContent({ kind: "none" });
       return () => {
         live = false;
       };
     }
-    const rel = path.slice(base.length + 1);
+    const rel = file.slice(base.length + 1);
     const target =
-      base === scope.laneCwd.replace(/\/+$/, "")
+      base === slashed(scope.laneCwd).replace(/\/+$/, "")
         ? scope.laneId
         : gitTarget(scope.laneId, scope.sessionId);
     if (IMAGE_RE.test(path)) {
@@ -109,7 +138,11 @@ function useContent(path: string, scope: PreviewScope): Content {
 
 function Body({ path, scope }: { path: string; scope: PreviewScope }) {
   const { t } = useTranslation("run");
-  const content = useContent(path, scope);
+  const loaded = useContent(path, scope);
+  // An image the route refused (gone, server mode) shows like no preview.
+  const [broken, setBroken] = useState<string | null>(null);
+  const content: Content =
+    loaded.kind === "image" && loaded.src === broken ? { kind: "none" } : loaded;
   if (content.kind === "loading") {
     return (
       <div className="flex flex-1 items-center justify-center">
@@ -123,6 +156,7 @@ function Body({ path, scope }: { path: string; scope: PreviewScope }) {
         <img
           src={content.src}
           alt={baseName(path)}
+          onError={() => setBroken(content.src)}
           className="max-h-full max-w-full object-contain"
         />
       </div>
@@ -206,13 +240,19 @@ export function FilePreview({
 export function FileListModal({
   title,
   paths,
+  label = displayName,
   scope,
   onClose,
+  onDragItem,
 }: {
   title: string;
   paths: string[];
+  /** A row's text; the file name by default. */
+  label?: (path: string) => string;
   scope: PreviewScope;
   onClose: () => void;
+  /** Rows drag into the prompt box; the dialog then closes, out of the way. */
+  onDragItem?: (e: DragEvent, path: string) => void;
 }) {
   const [picked, setPicked] = useState(paths[0] ?? "");
   const panelRef = useRef<HTMLDivElement>(null);
@@ -241,12 +281,18 @@ export function FileListModal({
                 <button
                   type="button"
                   onClick={() => setPicked(p)}
+                  draggable={!!onDragItem}
+                  onDragStart={(e) => {
+                    onDragItem?.(e, p);
+                    // Not in dragstart itself: removing the source there cancels the drag.
+                    if (onDragItem) window.setTimeout(onClose, 0);
+                  }}
                   title={p}
                   aria-current={p === picked}
                   className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm ${p === picked ? "bg-surface-3 text-fg-primary" : "text-fg-secondary hover:bg-surface-2"}`}
                 >
                   <FileText className="h-4 w-4 flex-shrink-0 text-fg-muted" />
-                  <span className="min-w-0 truncate">{displayName(p)}</span>
+                  <span className="min-w-0 truncate">{label(p)}</span>
                 </button>
               </li>
             ))}
@@ -258,3 +304,58 @@ export function FileListModal({
     document.body
   );
 }
+
+/** The session's skills in the list dialog, each one's SKILL.md previewed. */
+export function SkillListModal({
+  title,
+  names,
+  scope,
+  onClose,
+  draggable = false,
+}: {
+  title: string;
+  names: string[];
+  scope: PreviewScope;
+  onClose: () => void;
+  /** Rows drag into the prompt box as `/name`. */
+  draggable?: boolean;
+}) {
+  const [files, setFiles] = useState<Map<string, string> | null>(null);
+  useEffect(() => {
+    let live = true;
+    void Promise.all([
+      api.ccConfig.skills(undefined, scope.cwd).catch(() => ({ items: [] })),
+      api.ccConfig.plugins().catch(() => ({ plugins: [] })),
+    ]).then(([sk, pl]) => {
+      const found = new Map<string, string>();
+      const add = (name: string, file: string | undefined) => {
+        if (file && !found.has(name)) found.set(name, file);
+      };
+      for (const p of pl.plugins) {
+        const items = p.contributes?.items;
+        for (const it of [...(items?.skills ?? []), ...(items?.commands ?? [])])
+          add(`${p.name}:${it.name}`, it.file);
+      }
+      // A personal skill wins over a project one of the same name, as in Claude Code.
+      for (const s of sk.items) if (s.scope === "user") add(s.name, s.file);
+      for (const s of sk.items) add(s.name, s.file);
+      if (live) setFiles(found);
+    });
+    return () => {
+      live = false;
+    };
+  }, [scope.cwd]);
+  if (!files) return null;
+  // A built-in skill has no file: its name stands in and previews as nothing.
+  const byPath = new Map(names.map((n) => [files.get(n) ?? n, n]));
+  return (
+    <FileListModal
+      title={title}
+      paths={[...byPath.keys()]}
+      label={(p) => byPath.get(p) ?? displayName(p)}
+      scope={scope}
+      onClose={onClose}
+      onDragItem={draggable ? (e, p) => dragSkill(e, byPath.get(p) ?? p) : undefined}
+    />
+  );
+}

client/src/components/run/ChatOutline.tsx

@@ -1,18 +1,21 @@
 /**
  * @file ChatOutline.tsx
- * @description The right-hand panel of a Chat pane shown alone, laid out like
+ * @description The right-hand panel of a Chat pane, laid out like
  * Claude Desktop's activity panel: the session's Progress (its
  * TaskCreate/TaskUpdate or TodoWrite plan, only when it has one), the Outputs
  * it wrote or edited (name + EXT tag; a click previews the file), and "Used in
  * this session" — the files attached to its prompts, the files it read and the
- * memory files it used (a click opens the list with a preview), its skills
- * and MCP servers (a click opens the Claude config page). Read from
+ * memory files it used and its skills (a click opens the list with a
+ * preview — a skill's SKILL.md), and its MCP servers (a click opens the
+ * Claude config page). Every row but MCP drags into the prompt box: a file
+ * as an attachment, a group as all of its files, a lone skill as `/name`.
+ * Read from
  * `GET /api/sessions/:id/outline` by `useSessionOutline`, which the pane also
  * uses for the collapsed button's count.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { useEffect, useState, type ComponentType, type DragEvent, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import {
@@ -31,6 +34,7 @@ import {
 } from "lucide-react";
 import { api, type SessionOutline } from "../../lib/api";
 import { displayName, extOf } from "./ChatFilePreview";
+import { dragAttachments, dragSkill, type Attachment } from "../../lib/promptAttach";
 
 const POLL_MS = 5000;
 const EMPTY: SessionOutline = {
@@ -65,7 +69,21 @@ export function useSessionOutline(sessionId: string): SessionOutline {
   return outline;
 }
 
-export type OutlineList = "uploads" | "files" | "memory";
+export type OutlineList = "uploads" | "files" | "memory" | "skills";
+
+/** A listed file as a prompt attachment: an upload by its bare path, as the
+ *  composer attaches one; anything else as an `@` mention. */
+export function outlineAttachment(path: string, upload = false): Attachment {
+  return { path: upload ? path : `@${path}`, name: displayName(path) };
+}
+
+const dragFiles =
+  (paths: string[], upload = false) =>
+  (e: DragEvent) =>
+    dragAttachments(
+      e,
+      paths.map((p) => outlineAttachment(p, upload))
+    );
 
 function fileIcon(path: string) {
   const ext = extOf(path).toLowerCase();
@@ -136,12 +154,15 @@ function UsedRow({
   label,
   names,
   onClick,
+  onDragStart,
   to,
 }: {
   icon: ComponentType<{ className?: string }>;
   label: string;
   names: string[];
   onClick?: () => void;
+  /** The row drags into the prompt box. */
+  onDragStart?: (e: DragEvent) => void;
   to?: string;
 }) {
   const shown = names.slice(0, 2).join(", ");
@@ -161,7 +182,14 @@ function UsedRow({
       {inner}
     </Link>
   ) : (
-    <button type="button" title={title} onClick={onClick} className={rowClass}>
+    <button
+      type="button"
+      title={title}
+      onClick={onClick}
+      draggable={!!onDragStart}
+      onDragStart={onDragStart}
+      className={rowClass}
+    >
       {inner}
     </button>
   );
@@ -198,7 +226,9 @@ export function ChatOutline({
     <aside
       data-testid="chat-outline"
       aria-label={t("chat.outline.panel")}
-      className="m-3 ml-0 hidden w-80 flex-shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 pb-2 lg:flex"
+      // Over the chat in a narrow pane (the container is PaneChat's root),
+      // beside it once the pane has room, as wide as PaneChat's splitter says.
+      className="absolute inset-y-3 right-3 z-30 flex w-[clamp(15rem,34%,20rem)] max-w-[calc(100%-1.5rem)] flex-shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 pb-2 shadow-xl [@container(min-width:40rem)]:static [@container(min-width:40rem)]:m-3 [@container(min-width:40rem)]:ml-0 [@container(min-width:40rem)]:w-[calc(var(--chat-side)-0.75rem)] [@container(min-width:40rem)]:max-w-none [@container(min-width:40rem)]:shadow-none"
     >
       {o.progress.length > 0 && (
         <Section title={t("chat.outline.progress")} action={close}>
@@ -241,6 +271,8 @@ export function ChatOutline({
                 title={p}
                 aria-label={`${extOf(p)}: ${stem(p)}`}
                 onClick={() => onOpenFile(p)}
+                draggable
+                onDragStart={dragFiles([p])}
                 className={rowClass}
               >
                 <Icon className="h-4 w-4 flex-shrink-0 text-fg-muted" />
@@ -261,6 +293,7 @@ export function ChatOutline({
               label={t("chat.outline.uploads")}
               names={o.uploads.map(displayName)}
               onClick={() => onOpenList("uploads")}
+              onDragStart={dragFiles(o.uploads, true)}
             />
           )}
           {o.files.length > 0 && (
@@ -269,6 +302,7 @@ export function ChatOutline({
               label={t("chat.outline.files")}
               names={o.files.map(displayName)}
               onClick={() => onOpenList("files")}
+              onDragStart={dragFiles(o.files)}
             />
           )}
           {o.memory.length > 0 && (
@@ -277,6 +311,7 @@ export function ChatOutline({
               label={t("chat.outline.memory")}
               names={o.memory.map(stem)}
               onClick={() => onOpenList("memory")}
+              onDragStart={dragFiles(o.memory)}
             />
           )}
           {o.skills.length > 0 && (
@@ -284,7 +319,9 @@ export function ChatOutline({
               icon={BookOpen}
               label={t("chat.skills")}
               names={o.skills}
-              to="/settings/agents/claude-code?tab=skills"
+              onClick={() => onOpenList("skills")}
+              // One command per prompt: several are dragged one by one from the list.
+              onDragStart={o.skills.length === 1 ? (e) => dragSkill(e, o.skills[0]!) : undefined}
             />
           )}
           {o.mcp.length > 0 && (

client/src/components/run/ConsoleTabs.tsx

@@ -26,7 +26,9 @@
  * of another tab, a tab (or a pane header) joins that tab instead
  * (`joinGroup`: side by side, then under the right pane, then under the left
  * one, up to four panes). A right-click on a tab
- * opens the same actions as a menu (`ContextMenu`).
+ * opens the same actions as a menu (`ContextMenu`). With tabs from every
+ * workspace on, `tabs` spans every workspace (each run's `slot` a `paneKey`)
+ * and `workspaceOf` names each tab's workspace before its own name.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -62,6 +64,7 @@ import {
   joinGroup,
   leaves,
   reorderGroups,
+  slotOfKey,
 } from "../../lib/paneLayout";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 
@@ -77,7 +80,7 @@ export function runName(
 ): string {
   if (r.tool === "shell") return terminal;
   const prompt = r.promptPreview?.trim().split("\n")[0];
-  return session?.name || prompt || `${toolLabel} #${(r.slot ?? 0) + 1}`;
+  return session?.name || prompt || `${toolLabel} #${slotOfKey(r.slot ?? 0) + 1}`;
 }
 
 export type RunState = "awaiting" | "error" | "running";
@@ -160,10 +163,13 @@ export function ConsoleTabs({
   actions,
   sessions,
   onRenamed,
+  workspaceOf,
 }: {
   lane: Lane;
   /** The workspace's live runs, in slot order. */
   tabs: RunHandle[];
+  /** Tabs from every workspace: the name of the workspace a run belongs to. */
+  workspaceOf?: (r: RunHandle) => string;
   /** The tabs: groups of panes, the active one on screen. */
   groups: PaneGroups;
   /** Reorders the tabs or takes a pane out into a tab of its own. */
@@ -325,7 +331,10 @@ export function ConsoleTabs({
   const sessionOf = (r: RunHandle) => (r.sessionId ? sessions?.get(r.sessionId) : undefined);
   const toolLabel = (r: RunHandle) =>
     r.tool === "shell" ? t("tabs.terminal") : aiTools.label(r.tool);
-  const label = (r: RunHandle) => runName(r, sessionOf(r), toolLabel(r), t("tabs.terminal"));
+  const label = (r: RunHandle) => {
+    const name = runName(r, sessionOf(r), toolLabel(r), t("tabs.terminal"));
+    return workspaceOf ? `${workspaceOf(r)} · ${name}` : name;
+  };
   const tabLabel = (tab: Tab) => tab.runs.map(label).join(" | ");
   // A combo's dot is its most urgent AI pane's; a shell has none.
   const tabState = (tab: Tab): RunState | null => {

client/src/components/run/LaneConsolePane.tsx

@@ -51,8 +51,9 @@ export interface LaneConsolePaneProps {
   onRunExit?: () => void;
   /** The terminal takes the keyboard when it appears (default). */
   autoFocus?: boolean;
-  /** The only pane shown: its Chat view gets the right panel. */
-  solo?: boolean;
+  /** The pane spans the grid's full width or height: its Chat view's right
+   *  panel starts open (collapsed in a quarter-sized pane). */
+  panelOpen?: boolean;
 }
 
 /** The tmux session a lane's tab owns (see server/lib/pty-run.js). */
@@ -71,7 +72,7 @@ export function LaneConsolePane({
   onNewSession,
   onRunExit,
   autoFocus,
-  solo = false,
+  panelOpen = false,
 }: LaneConsolePaneProps) {
   const { t } = useTranslation("run");
   const [handle, setHandle] = useState<RunHandle | null>(null);
@@ -201,7 +202,7 @@ export function LaneConsolePane({
                 cwd={handle.cwd || currentLane?.cwd || ""}
                 laneId={laneId}
                 laneCwd={currentLane?.cwd || ""}
-                outline={solo}
+                panelOpen={panelOpen}
               />
             </div>
           )}

client/src/components/run/PaneChat.tsx

@@ -13,15 +13,23 @@
  * Shift+Tab changes in a running session, so the server steps it and reads
  * every step back off the pane (`POST /api/run/:id/permission-mode`); it sits
  * in the box beside `+`. A permission prompt or a menu still needs the terminal.
- * Shown alone (`outline`), it also has Claude Desktop's activity panel
- * (`ChatOutline`: progress, outputs, what the session used): collapsed into a
- * file button with the output count until clicked (remembered per browser);
- * a file clicked there opens its preview in the panel's place
+ * It also has Claude Desktop's activity panel (`ChatOutline`: progress,
+ * outputs, what the session used), open at first in a pane spanning the
+ * grid's full width or height (`panelOpen`) and collapsed into a file button
+ * with the output count in a quarter-sized one; it sits beside the
+ * conversation when the pane is wide and over it when narrow (a CSS container
+ * query on the pane, not the window), dragged wider or narrower by its
+ * splitter there (a fraction of the pane, remembered per browser). A file
+ * clicked there opens its preview
+ * in the panel's place
  * (`FilePreview`) — so does one in a turn's "Edited N files" card outside
  * the workspace's folder —, a group
- * of files a list with a preview (`FileListModal`). A file in a turn's
+ * of files or the used skills a list with a preview (`FileListModal`,
+ * `SkillListModal`). Anything there drags into the prompt box. A file in a turn's
  * "Edited N files" card opens in the Workspace's Changes panel
- * (`openInChanges`) when it lies in the pane's folder. A send scrolls the
+ * (`openInChanges`) when it lies in the pane's folder. The unsent prompt and
+ * its attachments are kept per session (`lib/chatDraft.ts`), so switching to
+ * the terminal and back, or a reload, leaves them as typed. A send scrolls the
  * conversation to its end and keeps it there (`follow`), so the message and
  * the step running after it come into sight on their own. While the session's
  * main agent is working (a prompt submitted, no Stop yet) an empty box shows
@@ -29,16 +37,18 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
 import { ArrowUp, FileText, Square } from "lucide-react";
 import { ConversationView } from "../conversation/ConversationView";
 import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "./RunSetup";
 import { ChatAddMenu } from "./ChatAddMenu";
-import { addAttachments } from "../../lib/promptAttach";
-import { ChatOutline, useSessionOutline, type OutlineList } from "./ChatOutline";
-import { FileListModal, FilePreview, type PreviewScope } from "./ChatFilePreview";
+import { addAttachments, dragAttachments } from "../../lib/promptAttach";
+import { readChatDraft, writeChatDraft } from "../../lib/chatDraft";
+import { ChatOutline, outlineAttachment, useSessionOutline, type OutlineList } from "./ChatOutline";
+import { FileListModal, FilePreview, SkillListModal, type PreviewScope } from "./ChatFilePreview";
 import { Select } from "../Select";
+import { Divider } from "./PaneGrid";
 import { interruptRun, submitToRun } from "../../lib/panePaste";
 import { useLiveRefresh } from "../../hooks/useLiveRefresh";
 import { openInChanges } from "../../lib/openInChanges";
@@ -53,7 +63,12 @@ const MODES: [PermissionMode, string][] = [
   ["bypassPermissions", "Bypass"],
 ];
 const isSettable = (m: unknown): m is PermissionMode => MODES.some(([v]) => v === m);
-const OUTLINE_KEY = "agenthub.chat.outlineOpen";
+const SIDE_KEY = "agenthub.chat.panelWidth";
+const clampSide = (f: number) => Math.round(Math.min(0.7, Math.max(0.2, f)) * 100) / 100;
+const storedSide = () => {
+  const f = Number(localStorage.getItem(SIDE_KEY));
+  return f ? clampSide(f) : null;
+};
 
 /** The pane's permission mode as it shows it; a pick steps it there. */
 function PermissionChip({ runId, initial }: { runId: string; initial: PermissionMode | null }) {
@@ -109,7 +124,7 @@ export function PaneChat({
   cwd,
   laneId = null,
   laneCwd = "",
-  outline = false,
+  panelOpen = false,
 }: {
   run: Pick<RunHandle, "id" | "tool" | "model" | "effort" | "permissionMode">;
   sessionId: string;
@@ -117,27 +132,34 @@ export function PaneChat({
   /** The workspace and its folder: a file under `cwd` is previewed through it. */
   laneId?: number | null;
   laneCwd?: string;
-  /** The pane is shown alone: room for the right panel. */
-  outline?: boolean;
+  /** The right panel starts open: the pane spans the grid's width or height. */
+  panelOpen?: boolean;
 }) {
   const { t } = useTranslation("run");
   const runId = run.id;
   const claude = run.tool === "claude";
-  const [prompt, setPrompt] = useState("");
-  const [images, setImages] = useState<PromptImage[]>([]);
+  // The unsent prompt outlives the terminal view and a reload (`lib/chatDraft`).
+  const [prompt, setPrompt] = useState(() => readChatDraft(sessionId).prompt);
+  const [images, setImages] = useState<PromptImage[]>(() => readChatDraft(sessionId).images);
+  useEffect(() => writeChatDraft(sessionId, prompt, images), [sessionId, prompt, images]);
   const [uploading, setUploading] = useState(false);
   const [follow, setFollow] = useState(0);
   const [model, setModel] = useState(run.model ?? "");
   const [effort, setEffort] = useState<EffortLevel>(run.effort ?? "");
   const pickFiles = useRef<(() => void) | null>(null);
-  // Collapsed until asked for, like Claude Desktop's activity panel.
-  const [outlineOpen, setOutlineOpen] = useState(() => localStorage.getItem(OUTLINE_KEY) === "1");
+  const [outlineOpen, setOutlineOpen] = useState(panelOpen);
+  // A split or a close changes the pane's shape: its default comes back.
+  useEffect(() => setOutlineOpen(panelOpen), [panelOpen]);
   const openOutline = (open: boolean) => {
-    localStorage.setItem(OUTLINE_KEY, open ? "1" : "0");
     setOutlineOpen(open);
     setPreview(null);
   };
   const [preview, setPreview] = useState<string | null>(null);
+  // The side panel's width as a fraction of the pane: the dragged one, else
+  // a default per content (a preview wants more room than the panel).
+  const [dragged, setDragged] = useState(storedSide);
+  const side = dragged ?? (preview ? 0.45 : 0.3);
+  const rootRef = useRef<HTMLDivElement>(null);
   const [list, setList] = useState<OutlineList | null>(null);
   const activity = useSessionOutline(sessionId);
   const scope: PreviewScope = { laneId, laneCwd: laneCwd || cwd, cwd, sessionId };
@@ -186,7 +208,12 @@ export function PaneChat({
   };
 
   return (
-    <div className="relative flex min-h-0 flex-1">
+    <div
+      ref={rootRef}
+      data-prompt-drop
+      className="relative flex min-h-0 flex-1 [container-type:inline-size]"
+      style={{ "--chat-side": `${side * 100}%` } as CSSProperties}
+    >
       <div data-testid="pane-chat" className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 pb-3">
         <div className="relative min-h-0 flex-1 overflow-hidden">
           <ConversationView
@@ -196,19 +223,19 @@ export function PaneChat({
             follow={follow}
             onOpenFile={(path) => {
               // The workspace's Changes panel when the file is in its folder;
-              // else this view's own preview, when it has room for one.
+              // else this view's own preview.
               if (laneId !== null && openInChanges(laneId, cwd, path)) return;
-              if (outline) setPreview(path);
+              setPreview(path);
             }}
           />
-          {outline && !outlineOpen && !preview && (
+          {!outlineOpen && !preview && (
             <button
               type="button"
               data-testid="chat-outline-show"
               onClick={() => openOutline(true)}
               title={t("chat.outline.show")}
               aria-label={t("chat.outline.show")}
-              className="absolute right-3 top-2 hidden h-7 items-center gap-1 rounded-md border border-border bg-surface-1 px-2 text-xs text-fg-secondary hover:bg-surface-3 hover:text-fg-primary lg:flex"
+              className="absolute right-3 top-2 flex h-7 items-center gap-1 rounded-md border border-border bg-surface-1 px-2 text-xs text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
             >
               <FileText className="h-3.5 w-3.5" />
               {activity.outputs.length}
@@ -291,31 +318,57 @@ export function PaneChat({
           </div>
         </div>
       </div>
-      {outline &&
-        (preview ? (
-          <FilePreview
-            path={preview}
-            scope={scope}
-            onClose={() => setPreview(null)}
-            // Beside the chat when there is room, over it when not.
-            className="absolute inset-0 z-30 rounded-xl border border-border lg:static lg:m-3 lg:ml-0 lg:w-[45%] lg:max-w-3xl lg:flex-shrink-0"
+      {preview ? (
+        <FilePreview
+          path={preview}
+          scope={scope}
+          onClose={() => setPreview(null)}
+          // Beside the chat when the pane has room, over it when not.
+          className="absolute inset-0 z-30 rounded-xl border border-border [@container(min-width:40rem)]:static [@container(min-width:40rem)]:m-3 [@container(min-width:40rem)]:ml-0 [@container(min-width:40rem)]:w-[calc(var(--chat-side)-0.75rem)] [@container(min-width:40rem)]:flex-shrink-0"
+        />
+      ) : (
+        outlineOpen && (
+          <ChatOutline
+            outline={activity}
+            onClose={() => openOutline(false)}
+            onOpenFile={setPreview}
+            onOpenList={setList}
           />
-        ) : (
-          outlineOpen && (
-            <ChatOutline
-              outline={activity}
-              onClose={() => openOutline(false)}
-              onOpenFile={setPreview}
-              onOpenList={setList}
-            />
-          )
-        ))}
-      {list && (
+        )
+      )}
+      {(preview || outlineOpen) && (
+        // Only beside the chat: a panel over a narrow pane has no edge to drag.
+        <div className="hidden [@container(min-width:40rem)]:contents">
+          <Divider
+            gridRef={rootRef}
+            dir="row"
+            at={1 - side}
+            box={{ x: 0, y: 0, w: 1, h: 1 }}
+            label={t("chat.outline.resize")}
+            onRatio={(r) => {
+              const f = clampSide(1 - r);
+              localStorage.setItem(SIDE_KEY, String(f));
+              setDragged(f);
+            }}
+          />
+        </div>
+      )}
+      {list === "skills" && (
+        <SkillListModal
+          title={t("chat.outline.skills")}
+          names={activity.skills}
+          scope={scope}
+          onClose={() => setList(null)}
+          draggable={claude}
+        />
+      )}
+      {list && list !== "skills" && (
         <FileListModal
           title={t(`chat.outline.${list}`)}
           paths={activity[list]}
           scope={scope}
           onClose={() => setList(null)}
+          onDragItem={(e, p) => dragAttachments(e, [outlineAttachment(p, list === "uploads")])}
         />
       )}
     </div>

client/src/components/run/PaneGrid.tsx

@@ -40,6 +40,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../Context
 import {
   EMPTY_GROUPS,
   type Edge,
+  type GroupsScope,
   type PaneGroups,
   type PaneLayout,
   type Rect,
@@ -82,10 +83,10 @@ export type LayoutUpdate = (fn: (l: PaneLayout) => PaneLayout) => void;
 export type GroupsUpdate = (fn: (g: PaneGroups) => PaneGroups) => void;
 
 /** A workspace's tabs (groups of split panes), loaded and saved per
- *  workspace. An update that lands after a workspace switch never writes into
- *  the new one. */
-export function usePaneGroups(laneId: number | null): [PaneGroups, GroupsUpdate] {
-  const load = (id: number | null) => ({
+ *  workspace (or once for every workspace, `all`). An update that lands after
+ *  a workspace switch never writes into the new one. */
+export function usePaneGroups(laneId: GroupsScope | null): [PaneGroups, GroupsUpdate] {
+  const load = (id: GroupsScope | null) => ({
     laneId: id,
     groups: id === null ? EMPTY_GROUPS : loadGroups(id),
   });

client/src/components/run/RunSetup.tsx

@@ -9,8 +9,9 @@
  *     newlines, and pasted, dropped or picked files (`pickFiles`, a composer's
  *     + menu; images as thumbnails, opened full size in `ImageLightbox`, any
  *     other as a name chip) attached by their saved paths (`POST /api/run/drop-file`,
- *     remembered for the + menu's Recent uploads), and a Files panel row
- *     dropped on it (`lib/promptAttach.ts`) as an `@path` chip;
+ *     remembered for the + menu's Recent uploads), and a panel row (Files,
+ *     Changes, a context file or folder) dropped on it (`lib/promptAttach.ts`)
+ *     as an `@path` chip — a `bare` one takes a drop anywhere on its box;
  *     a borderless (`bare`) one grows with its text up to 40vh;
  *   - `CwdAutocomplete` — the folder field the Add-workspace modal uses;
  *   - `ModelPicker` — a tool's own model list (`GET /api/ai-tools/:id/models`)
@@ -63,7 +64,9 @@ import { ImageLightbox } from "../ImageLightbox";
 import {
   ATTACH_MIME,
   addAttachments,
-  droppedAttachment,
+  droppedAttachments,
+  droppedSkill,
+  SKILL_MIME,
   rememberUploads,
 } from "../../lib/promptAttach";
 
@@ -388,6 +391,45 @@ export function PromptEditor({
   const fileInput = useRef<HTMLInputElement | null>(null);
   if (pickFiles) pickFiles.current = () => fileInput.current?.click();
 
+  // A drop lands anywhere on the screen around the composer — the nearest
+  // `data-prompt-drop` ancestor (a Chat pane, a replay, the workspace home),
+  // else a `bare` editor's parent, the box every caller draws around it and
+  // its toolbar — not only on the textarea: a panel row (`ATTACH_MIME`)
+  // becomes an `@path` chip, a skill (`SKILL_MIME`) the prompt's leading
+  // `/command`, a file is uploaded.
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const dropRef = useRef<(e: DragEvent) => void>(() => {});
+  dropRef.current = (e) => {
+    const atts = droppedAttachments(e.dataTransfer);
+    const skill = droppedSkill(e.dataTransfer);
+    if (atts.length) {
+      e.preventDefault();
+      onImagesChange((prev) => addAttachments(prev, atts));
+    } else if (skill) {
+      e.preventDefault();
+      onChange(`/${skill} ${value.replace(/^\s+/, "")}`);
+    } else if (attachImages(e.dataTransfer?.files)) e.preventDefault();
+  };
+  useEffect(() => {
+    const zone =
+      rootRef.current?.closest<HTMLElement>("[data-prompt-drop]") ??
+      (bare ? rootRef.current?.parentElement : rootRef.current);
+    if (!zone) return;
+    const over = (e: DragEvent) => {
+      const types = e.dataTransfer?.types ?? [];
+      if (![ATTACH_MIME, SKILL_MIME, "Files"].some((m) => types.includes(m))) return;
+      e.preventDefault();
+      e.dataTransfer!.dropEffect = "copy";
+    };
+    const drop = (e: DragEvent) => dropRef.current(e);
+    zone.addEventListener("dragover", over);
+    zone.addEventListener("drop", drop);
+    return () => {
+      zone.removeEventListener("dragover", over);
+      zone.removeEventListener("drop", drop);
+    };
+  }, [bare]);
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (kind && count > 0) {
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -431,7 +473,7 @@ export function PromptEditor({
     `w-full text-left px-3 py-1.5 transition-colors ${i === current ? "bg-accent/15" : "hover:bg-surface-3"}`;
 
   return (
-    <div className="relative">
+    <div ref={rootRef} className="relative">
       {images.length > 0 && (
         <div data-testid="prompt-images" className="mb-2 flex flex-wrap gap-2 px-1 pt-1">
           {images.map((img) => (
@@ -527,19 +569,6 @@ export function PromptEditor({
             }
           }
         }}
-        onDragOver={(e) => {
-          // A Files panel row is not a file: say a drop is welcome.
-          if (e.dataTransfer?.types.includes(ATTACH_MIME)) e.preventDefault();
-        }}
-        onDrop={(e) => {
-          const att = droppedAttachment(e.dataTransfer);
-          if (att) {
-            e.preventDefault();
-            onImagesChange((prev) => addAttachments(prev, [att]));
-            return;
-          }
-          if (attachImages(e.dataTransfer?.files)) e.preventDefault();
-        }}
         placeholder={placeholder}
         rows={rows}
         spellCheck={false}

client/src/components/run/__tests__/ChatFilePreview.test.tsx

@@ -2,14 +2,17 @@
  * @file ChatFilePreview.test.tsx
  * @description Where a Chat pane's file preview reads from: a file under the
  * pane's folder through the lane's git file read, a memory file under
- * `~/.claude` through the config pages' read, anything else by path only; and
- * the list dialog previewing the file picked in it.
+ * `~/.claude` through the config pages' read, a dropped text file through the
+ * drop route, an image read outside the folder through the session's image
+ * route, a Windows path like a POSIX one, anything else by path only; the
+ * list dialog previewing the file picked in it; and the skills dialog finding
+ * each skill's SKILL.md by name.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { FileListModal, FilePreview, displayName } from "../ChatFilePreview";
+import { FileListModal, FilePreview, SkillListModal, displayName } from "../ChatFilePreview";
 import { api } from "../../../lib/api";
 
 vi.mock("../../../lib/api", async (importOriginal) => {
@@ -28,7 +31,30 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         }),
         gitRawUrl: () => "",
       },
+      sessions: { readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}` },
       ccConfig: {
+        skills: vi.fn().mockResolvedValue({
+          items: [{ scope: "user", name: "xlsx", file: "/h/.claude/skills/xlsx/SKILL.md" }],
+        }),
+        plugins: vi.fn().mockResolvedValue({
+          plugins: [
+            {
+              name: "agenthub",
+              contributes: {
+                items: {
+                  skills: [
+                    {
+                      name: "file-headers",
+                      description: null,
+                      file: "/h/.claude/plugins/cache/a/skills/file-headers/SKILL.md",
+                    },
+                  ],
+                  commands: [],
+                },
+              },
+            },
+          ],
+        }),
         file: vi
           .fn()
           .mockResolvedValue({ ok: true, file: "", text: "Launch notes", size: 12, mtime: 0 }),
@@ -53,6 +79,37 @@ describe("FilePreview", () => {
     expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(mem);
   });
 
+  it("reads Windows paths the same way", async () => {
+    const win = { laneId: 4, laneCwd: "D:\\w", cwd: "D:\\w", sessionId: "s1" };
+    render(<FilePreview path={"D:\\w\\src\\a.ts"} scope={win} onClose={() => {}} />);
+    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
+    cleanup();
+    const tool = "C:\\Users\\k\\.claude\\projects\\D--w\\s1\\tool-results\\b.txt";
+    render(<FilePreview path={tool} scope={win} onClose={() => {}} />);
+    expect(await screen.findByText("Launch notes")).toBeTruthy();
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(tool);
+    expect(screen.getByText("b")).toBeTruthy(); // the name, not the whole path
+  });
+
+  it("reads a dropped text file through the drop route", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response("a long paste"));
+    vi.stubGlobal("fetch", fetchMock);
+    const drop = "C:\\Users\\k\\.claude\\agenthub\\drops\\0123456789abcdef-pasted-text.txt";
+    render(<FilePreview path={drop} scope={scope} onClose={() => {}} />);
+    expect(await screen.findByText("a long paste")).toBeTruthy();
+    expect(fetchMock).toHaveBeenCalledWith("/api/run/drop/0123456789abcdef-pasted-text.txt");
+    vi.unstubAllGlobals();
+  });
+
+  it("shows an image it read outside the folder through the session, its path if refused", () => {
+    render(<FilePreview path="/h/.cache/shot.png" scope={scope} onClose={() => {}} />);
+    const img = screen.getByAltText("shot.png") as HTMLImageElement;
+    expect(img.getAttribute("src")).toBe("/img/s1?path=/h/.cache/shot.png");
+    fireEvent.error(img);
+    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+  });
+
   it("shows only the path of a file it may not read", () => {
     render(<FilePreview path="/etc/hosts" scope={scope} onClose={() => {}} />);
     expect(screen.getByText("No preview for this file here")).toBeTruthy();
@@ -76,3 +133,28 @@ describe("FileListModal", () => {
     expect(await screen.findByText("export const a = 1;")).toBeTruthy();
   });
 });
+
+describe("SkillListModal", () => {
+  it("lists the skills by name and previews each one's SKILL.md", async () => {
+    render(
+      <SkillListModal
+        title="Skills"
+        names={["agenthub:file-headers", "xlsx", "simplify"]}
+        scope={scope}
+        onClose={() => {}}
+      />
+    );
+    // A plugin's skill first, read through the config read.
+    expect(await screen.findByRole("button", { name: "agenthub:file-headers" })).toBeTruthy();
+    await screen.findByText("Launch notes");
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(
+      "/h/.claude/plugins/cache/a/skills/file-headers/SKILL.md"
+    );
+    fireEvent.click(screen.getByRole("button", { name: "xlsx" }));
+    await screen.findByText("Launch notes");
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith("/h/.claude/skills/xlsx/SKILL.md");
+    // A built-in skill has no file.
+    fireEvent.click(screen.getByRole("button", { name: "simplify" }));
+    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+  });
+});

client/src/components/run/__tests__/ChatOutline.test.tsx

@@ -3,7 +3,7 @@
  * @description The Chat pane's activity panel renders a session's outline the
  * way Claude Desktop does: progress with done/current items, outputs by name
  * with an EXT tag (a click opens that file), and "Used in this session" rows —
- * uploads, files read and memory open their list, skills link to the config.
+ * uploads, files read, memory and skills open their list.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -52,15 +52,47 @@ describe("ChatOutline", () => {
     expect(screen.getByText("+1")).toBeTruthy(); // three files read, two named
     fireEvent.click(screen.getByTitle("Memory: release"));
     expect(onOpenList).toHaveBeenCalledWith("memory");
-    expect(screen.getByTitle("Skills: xlsx").getAttribute("href")).toBe(
-      "/settings/agents/claude-code?tab=skills"
-    );
+    fireEvent.click(screen.getByTitle("Skills: xlsx"));
+    expect(onOpenList).toHaveBeenCalledWith("skills");
     expect(screen.getByText("vercel_vercel")).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Hide side panel" }));
     expect(onClose).toHaveBeenCalled();
   });
 
+  it("drags its rows into the prompt box", () => {
+    render(
+      <MemoryRouter>
+        <ChatOutline
+          outline={outline}
+          onClose={() => {}}
+          onOpenFile={() => {}}
+          onOpenList={() => {}}
+        />
+      </MemoryRouter>
+    );
+    const dragged = (el: HTMLElement) => {
+      const data: Record<string, string> = {};
+      fireEvent.dragStart(el, {
+        dataTransfer: { setData: (k: string, v: string) => (data[k] = v) },
+      });
+      return data;
+    };
+    const attached = (el: HTMLElement) =>
+      JSON.parse(dragged(el)["application/x-agenthub-attach"] ?? "[]") as { path: string }[];
+    expect(attached(screen.getByRole("button", { name: "XLSX: Progress report" }))).toEqual([
+      { path: "@/w/out/Progress report.xlsx", name: "Progress report.xlsx" },
+    ]);
+    expect(attached(screen.getByTitle(/a\.ts, /)).map((a) => a.path)).toEqual([
+      "@/w/src/a.ts",
+      "@/w/src/b.ts",
+      "@/w/src/c.ts",
+    ]);
+    // An upload goes as the composer attaches one: its bare path.
+    expect(attached(screen.getByTitle("Uploads: minutes.xlsx"))[0]!.path).toBe(outline.uploads[0]);
+    expect(dragged(screen.getByTitle("Skills: xlsx"))["application/x-agenthub-skill"]).toBe("xlsx");
+  });
+
   it("hides progress and the used section when there is none", () => {
     render(
       <MemoryRouter>

client/src/components/run/__tests__/PaneChat.test.tsx

@@ -122,7 +122,11 @@ function renderChat(run: Partial<typeof RUN> = {}) {
   );
 }
 
-beforeEach(() => vi.mocked(submitToRun).mockClear());
+beforeEach(() => {
+  vi.mocked(submitToRun).mockClear();
+  // A prompt typed in one test is a saved draft in the next (`lib/chatDraft`).
+  localStorage.removeItem("agenthub.chat.draft.s1");
+});
 
 describe("PaneChat — the + menu", () => {
   it("puts a skill, or a plugin's skill, at the front of the message", async () => {
@@ -230,10 +234,9 @@ const byId = (id: string) => () => screen.getByTestId(id);
 
 describe("PaneChat — the activity panel", () => {
   it("opens from the file button, previews a file, and closes back to the panel", async () => {
-    localStorage.removeItem("agenthub.chat.outlineOpen");
     render(
       <MemoryRouter>
-        <PaneChat run={RUN} sessionId="s1" cwd="/w" laneId={7} laneCwd="/w" outline />
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" laneId={7} laneCwd="/w" />
       </MemoryRouter>
     );
     expect(screen.queryByTestId("chat-outline")).toBeNull();
@@ -248,7 +251,33 @@ describe("PaneChat — the activity panel", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "Close" }));
     expect(screen.getByTestId("chat-outline")).toBeTruthy();
-    expect(localStorage.getItem("agenthub.chat.outlineOpen")).toBe("1");
+  });
+
+  it("starts open in a pane spanning the grid, and follows the pane when it is split", () => {
+    const pane = (panelOpen: boolean) => (
+      <MemoryRouter>
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen={panelOpen} />
+      </MemoryRouter>
+    );
+    const { rerender } = render(pane(true));
+    expect(screen.getByTestId("chat-outline")).toBeTruthy();
+    rerender(pane(false));
+    expect(screen.queryByTestId("chat-outline")).toBeNull();
+    expect(screen.getByTestId("chat-outline-show")).toBeTruthy();
+  });
+
+  it("resizes from its splitter and remembers the width", () => {
+    localStorage.removeItem("agenthub.chat.panelWidth");
+    render(
+      <MemoryRouter>
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen />
+      </MemoryRouter>
+    );
+    const splitter = screen.getByRole("separator", { name: "Resize side panel" });
+    expect(splitter.getAttribute("aria-valuenow")).toBe("70");
+    fireEvent.keyDown(splitter, { key: "ArrowLeft" });
+    expect(localStorage.getItem("agenthub.chat.panelWidth")).toBe("0.35");
+    expect(splitter.getAttribute("aria-valuenow")).toBe("65");
   });
 });
 
@@ -259,7 +288,7 @@ describe("PaneChat — an edited file", () => {
     window.addEventListener(OPEN_IN_CHANGES_EVENT, listen);
     render(
       <MemoryRouter>
-        <PaneChat run={RUN} sessionId="s1" cwd="/w" laneId={7} laneCwd="/w" outline />
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" laneId={7} laneCwd="/w" />
       </MemoryRouter>
     );
     fireEvent.click(screen.getByTestId("edited-in"));
@@ -272,3 +301,36 @@ describe("PaneChat — an edited file", () => {
     window.removeEventListener(OPEN_IN_CHANGES_EVENT, listen);
   });
 });
+
+describe("PaneChat — the unsent prompt", () => {
+  it("keeps the half-typed prompt and its attachments when the chat unmounts (terminal view, reload)", async () => {
+    const first = renderChat();
+    fireEvent.change(screen.getByPlaceholderText("Write a message…"), {
+      target: { value: "half typed" },
+    });
+    // A dropped attachment, as a Files row or an "Edited N files" row brings it.
+    const drop = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(drop, "dataTransfer", {
+      value: {
+        types: ["application/x-agenthub-attach"],
+        getData: (t: string) =>
+          t === "application/x-agenthub-attach"
+            ? JSON.stringify({ path: "@src/a.ts", name: "a.ts" })
+            : "",
+        files: [],
+      },
+    });
+    act(() => {
+      screen.getByPlaceholderText("Write a message…").dispatchEvent(drop);
+    });
+    expect(await screen.findByText("a.ts")).toBeInTheDocument();
+    first.unmount();
+
+    renderChat();
+    expect(screen.getByPlaceholderText("Write a message…")).toHaveValue("half typed");
+    expect(screen.getByText("a.ts")).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("pane-chat-send"));
+    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "half typed @src/a.ts");
+    await waitFor(() => expect(localStorage.getItem("agenthub.chat.draft.s1")).toBeNull());
+  });
+});

client/src/components/run/__tests__/RunSetup.test.tsx

@@ -16,7 +16,7 @@
  */
 
 import { useState } from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createEvent, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import i18n from "i18next";
 import {
@@ -28,7 +28,13 @@ import {
   type PromptImage,
 } from "../RunSetup";
 import { api } from "../../../lib/api";
-import { dragProjectPath, recentUploads } from "../../../lib/promptAttach";
+import {
+  ATTACH_MIME,
+  dragAttachments,
+  dragProjectPath,
+  dragSkill,
+  recentUploads,
+} from "../../../lib/promptAttach";
 
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -348,6 +354,132 @@ describe("PromptEditor — newlines and images", () => {
     expect(screen.getByTestId("sent").textContent).toBe("read @src/lib/");
   });
 
+  it("takes a drop anywhere on a bare editor's box; an extra folder's row comes absolute", () => {
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <div>
+            <PromptEditor
+              bare
+              slash={false}
+              value="read"
+              onChange={() => {}}
+              onSubmit={() => {}}
+              placeholder="Ask anything…"
+              fileCwd="/Users/tester"
+              images={images}
+              onImagesChange={setImages}
+            />
+            <div data-testid="toolbar" />
+          </div>
+          <section data-drag-root="/Users/tester/extra/">
+            <span data-testid="row" />
+          </section>
+          <output data-testid="sent">{promptWithImages("read", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const data: Record<string, string> = {};
+    const dataTransfer = {
+      setData: (k: string, v: string) => (data[k] = v),
+      getData: (k: string) => data[k] ?? "",
+      get types() {
+        return Object.keys(data);
+      },
+      files: [],
+    };
+    dragProjectPath(
+      { dataTransfer, currentTarget: screen.getByTestId("row") } as unknown as React.DragEvent,
+      "notes.md"
+    );
+    expect(data["text/plain"]).toBe("/Users/tester/extra/notes.md");
+    const over = createEvent.dragOver(screen.getByTestId("toolbar"), { dataTransfer });
+    fireEvent(screen.getByTestId("toolbar"), over);
+    expect(over.defaultPrevented).toBe(true);
+    fireEvent.drop(screen.getByTestId("toolbar"), { dataTransfer });
+    expect(screen.getByTestId("sent").textContent).toBe("read @/Users/tester/extra/notes.md");
+  });
+
+  it("takes a drop anywhere inside its data-prompt-drop screen, not only on the box", () => {
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <div data-prompt-drop>
+          <div data-testid="transcript" />
+          <PromptEditor
+            value="see"
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("see", images)}</output>
+        </div>
+      );
+    }
+    render(<Harness />);
+    const dataTransfer = {
+      getData: (k: string) =>
+        k === ATTACH_MIME ? JSON.stringify([{ path: "@/w/a.ts", name: "a.ts" }]) : "",
+      types: [ATTACH_MIME],
+      files: [],
+    };
+    const over = createEvent.dragOver(screen.getByTestId("transcript"), { dataTransfer });
+    fireEvent(screen.getByTestId("transcript"), over);
+    expect(over.defaultPrevented).toBe(true);
+    fireEvent.drop(screen.getByTestId("transcript"), { dataTransfer });
+    expect(screen.getByTestId("sent").textContent).toBe("see @/w/a.ts");
+  });
+
+  it("takes an activity panel's drag: a group of files as chips, a skill as the /command", () => {
+    function Harness() {
+      const [value, setValue] = useState("check it");
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            slash={false}
+            value={value}
+            onChange={setValue}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages(value, images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const drag = (start: (e: React.DragEvent) => void) => {
+      const data: Record<string, string> = {};
+      const dataTransfer = {
+        setData: (k: string, v: string) => (data[k] = v),
+        getData: (k: string) => data[k] ?? "",
+        get types() {
+          return Object.keys(data);
+        },
+        files: [],
+      };
+      start({ dataTransfer } as unknown as React.DragEvent);
+      fireEvent.drop(box(), { dataTransfer });
+    };
+    drag((e) =>
+      dragAttachments(e, [
+        { path: "@/a/x.md", name: "x.md" },
+        { path: "/d/drops/0123456789abcdef.png", name: "y.png" },
+      ])
+    );
+    drag((e) => dragSkill(e, "ponytail:ponytail-help"));
+    expect(screen.getByTestId("sent").textContent).toBe(
+      "/ponytail:ponytail-help check it @/a/x.md /d/drops/0123456789abcdef.png"
+    );
+  });
+
   it("leaves a text paste to the textarea", () => {
     renderEditor("");
     fireEvent.paste(box(), {

client/src/components/settings/AppearanceSettings.tsx

@@ -1,7 +1,9 @@
 /**
  * @file AppearanceSettings.tsx
  * @description Settings → Appearance (`/settings/appearance`): the per-user
- * Chat UI default (`ChatUiSettings`, `#chat-ui`), the interface language, the
+ * Chat UI default (`ChatUiSettings`, `#chat-ui`), whether the session view's
+ * tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
+ * `#workspace-tabs`), the interface language, the
  * terminal font (`lib/terminalFont.ts`, with a preview line), the
  * Dark / Light / System mode switch and one named-theme picker per mode, and the
  * corner pet (`PetSettings`, deep-linked as `#pet`) — the old General and Pet
@@ -17,7 +19,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Monitor, Moon, RotateCcw, Sun } from "lucide-react";
-import { SettingsRow, SettingsSection, SettingsSegmented } from "./SettingsRow";
+import { SettingsRow, SettingsSection, SettingsSegmented, SettingsSwitchRow } from "./SettingsRow";
 import { PetSettings } from "./PetSettings";
 import { ChatUiSettings } from "./ChatUiSettings";
 import { Select } from "../Select";
@@ -31,6 +33,7 @@ import {
   writeTerminalFont,
   type TerminalFont,
 } from "../../lib/terminalFont";
+import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
 
 export const THEME_LABELS: Record<string, string> = {
   darcula: "Darcula",
@@ -79,6 +82,7 @@ export function AppearanceSettings() {
   const { t, i18n } = useTranslation("settings");
   const { mode, theme, themeFor, setMode, setThemeFor } = useTheme();
   const [termFont, setTermFont] = useState(readTerminalFont);
+  const [allTabs, setAllTabs] = useState(readAllTabs);
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
     setTermFont(font);
@@ -101,6 +105,22 @@ export function AppearanceSettings() {
     <div className="space-y-6">
       <ChatUiSettings />
 
+      <SettingsSection
+        id="workspace-tabs"
+        title={t("workspaceTabs.title")}
+        description={t("workspaceTabs.description")}
+      >
+        <SettingsSwitchRow
+          label={t("workspaceTabs.label")}
+          description={t("workspaceTabs.labelDesc")}
+          checked={allTabs}
+          onChange={(on) => {
+            writeAllTabs(on);
+            setAllTabs(on);
+          }}
+        />
+      </SettingsSection>
+
       <SettingsSection
         id="language"
         title={t("language.title")}