feat(lanes,run,pricing): Changes sidebar editor, staged groups, image drop, auto pricing

- Changes panel at full screen: the whole Files view (finder, expand-all,
  tree) becomes a left sidebar and the Files tab is dropped; a working-copy
  file opens straight into the editor (Save/Cancel live once the text
  differs, Cancel restores it, Whole file toggles back to the diff), and the
  page is height-locked so the editor no longer collapses with no live run.
- Overview splits into Staged Changes / Changes groups in the work range.
- A changed file's whole tree row takes its status tint.
- Drag an image onto the lane terminal: POST /api/run/drop-image saves it
  (png/jpeg/gif/webp, random name, 0600, pruned after a day) and the path
  is pasted into the pane, which is how claude attaches it.
- Claude Opus 5.5 gets its own pricing row (4/20/0.2/5/8, fast 8/40);
  claude-opus-5% had been pricing it as Opus 5.
- server/lib/pricing-sync.js: a model family used in token_usage with no
  row of its own is inserted from LiteLLM's public price list, never
  updated; off with AGENTHUB_PRICING_SYNC=0. repo-links allows exactly
  that one third-party GitHub raw URL.

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

@@ -11,7 +11,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor, act } from "@testing-library/react";
+import { render, screen, waitFor, act, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { LaneChangesPanel } from "../LaneChangesPanel";
 import { api } from "../../../lib/api";
@@ -80,6 +80,13 @@ function changes(over: Partial<Extract<LaneChanges, { available: true }>> = {}):
   };
 }
 
+/** The overview row's discard button for one path. */
+function discardOf(path: string) {
+  return within(screen.getByText(path).closest("li")!).getByRole("button", {
+    name: "Discard this file's changes",
+  });
+}
+
 beforeEach(() => {
   vi.mocked(api.lanes.git).mockReset().mockResolvedValue({ available: false });
   vi.mocked(api.lanes.changes).mockReset();
@@ -301,13 +308,82 @@ describe("LaneChangesPanel", () => {
     });
   });
 
+  it("lists staged files apart from the changes the next commit leaves behind", async () => {
+    render(<LaneChangesPanel laneId={7} />);
+    const list = await screen.findByTestId("lane-changes-overview");
+    const staged = list.querySelector('[data-group="staged"]') as HTMLElement;
+    const unstaged = list.querySelector('[data-group="unstaged"]') as HTMLElement;
+    expect(within(staged).getByText("docs/API.md")).toBeInTheDocument();
+    expect(within(staged).queryByText("notes.txt")).toBeNull();
+    expect(within(unstaged).getByText("server/lib/git-ops.js")).toBeInTheDocument();
+    expect(within(unstaged).getByText("notes.txt")).toBeInTheDocument();
+    expect(within(unstaged).queryByText("docs/API.md")).toBeNull();
+    expect(screen.getByText("Staged Changes")).toBeInTheDocument();
+  });
+
+  it("at full width shows the tree as a sidebar and opens a file straight into the editor", async () => {
+    vi.mocked(api.lanes.gitTree).mockResolvedValue({
+      available: true,
+      path: "",
+      entries: [{ name: "main.ts", path: "src/main.ts", dir: false, status: " M" }],
+      truncated: false,
+    });
+    vi.mocked(api.lanes.gitFile).mockResolvedValue({
+      available: true,
+      path: "src/main.ts",
+      rev: "work",
+      binary: false,
+      truncated: false,
+      lines: ["const whole = 1;"],
+      sha: "b".repeat(40),
+    });
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} full />);
+    const sidebar = await screen.findByTestId("lane-changes-sidebar");
+    // The sidebar IS the Files view: its finder lives there, and the tab is gone.
+    expect(within(sidebar).getByLabelText("Find a file by path…")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Files" })).toBeNull();
+    expect(screen.getAllByTestId("lane-changes-browse")).toHaveLength(1);
+    await user.click(await within(sidebar).findByText("main.ts"));
+
+    // No Edit click: the editor is simply there, Save/Cancel idle until typed.
+    const editor = await screen.findByTestId("lane-file-editor");
+    expect(editor).toHaveValue("const whole = 1;");
+    expect(screen.queryByTestId("lane-file-edit")).toBeNull();
+    expect(screen.getByTestId("lane-file-save")).toBeDisabled();
+    await user.type(editor, "x");
+    expect(screen.getByTestId("lane-file-save")).toBeEnabled();
+    // Cancel reverts to the saved text and stays in the editor.
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(await screen.findByTestId("lane-file-editor")).toHaveValue("const whole = 1;");
+  });
+
+  it("at full width opens a changed file from the overview straight into the editor", async () => {
+    vi.mocked(api.lanes.gitFile).mockResolvedValue({
+      available: true,
+      path: "server/lib/git-ops.js",
+      rev: "work",
+      binary: false,
+      truncated: false,
+      lines: ["a"],
+      sha: "b".repeat(40),
+    });
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} full />);
+    const list = await screen.findByTestId("lane-changes-overview");
+    await user.click(within(list).getByText("server/lib/git-ops.js"));
+    expect(await screen.findByTestId("lane-file-editor")).toHaveValue("a");
+    expect(screen.queryByTestId("lane-file-edit")).toBeNull();
+    expect(screen.getByTestId("lane-file-save")).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled();
+  });
+
   it("needs two clicks to discard, and only the second one reaches the server", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
     await screen.findByTestId("lane-changes-overview");
 
-    const [discard] = screen.getAllByRole("button", { name: "Discard this file's changes" });
-    await user.click(discard!);
+    await user.click(discardOf("server/lib/git-ops.js"));
     expect(api.lanes.gitAction).not.toHaveBeenCalled();
 
     await user.click(
@@ -341,8 +417,7 @@ describe("LaneChangesPanel", () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
     await screen.findByTestId("lane-changes-overview");
-    const [discard] = screen.getAllByRole("button", { name: "Discard this file's changes" });
-    await user.click(discard!);
+    await user.click(discardOf("server/lib/git-ops.js"));
 
     // The file was committed/reverted elsewhere; a later reappearance must not be pre-armed.
     const base = changes();

client/src/components/run/TerminalView.tsx

@@ -11,15 +11,23 @@
  * still LOOKS live, but no keystroke or mouse report reaches tmux again.
  * Always painted dark, in the palette of the user's chosen DARK theme
  * (`lib/terminalTheme.ts`), recoloured live without re-attaching.
+ * An image dropped on it is saved on the server (`POST /api/run/drop-image`)
+ * and its PATH pasted into the pane — what a local terminal does on a drop,
+ * and how `claude` attaches an image.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
+import { useTranslation } from "react-i18next";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { CanvasAddon } from "@xterm/addon-canvas";
 import "@xterm/xterm/css/xterm.css";
 import { useTheme } from "../../hooks/useTheme";
 import { terminalThemeFor } from "../../lib/terminalTheme";
+import { api } from "../../lib/api";
+
+type DropState = "hint" | "uploading" | "failed" | "imagesOnly";
+const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files");
 
 interface TerminalViewProps {
   runId: string;
@@ -45,6 +53,42 @@ export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
   const paletteRef = useRef(palette);
   paletteRef.current = palette;
   const termRef = useRef<Terminal | null>(null);
+  const { t } = useTranslation("run");
+  const [drop, setDrop] = useState<DropState | null>(null);
+  // dragenter/dragleave fire for every child crossed, so count them: the hint
+  // only goes away when the pointer leaves the terminal itself.
+  const dragDepth = useRef(0);
+  const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const flash = (state: DropState) => {
+    setDrop(state);
+    if (flashTimer.current) clearTimeout(flashTimer.current);
+    flashTimer.current = setTimeout(() => setDrop(null), 2500);
+  };
+  useEffect(
+    () => () => {
+      if (flashTimer.current) clearTimeout(flashTimer.current);
+    },
+    []
+  );
+
+  const onDrop = async (e: DragEvent) => {
+    if (!hasFiles(e)) return; // dragged text keeps xterm's own handling
+    e.preventDefault();
+    dragDepth.current = 0;
+    const images = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    if (images.length === 0) return flash("imagesOnly");
+    setDrop("uploading");
+    try {
+      const saved = await Promise.all(images.map((f) => api.run.dropImage(f)));
+      // paste(), not a raw send: it honours bracketed-paste mode, so claude
+      // sees one pasted path rather than typed keystrokes.
+      termRef.current?.paste(saved.map((r) => r.path).join(" ") + " ");
+      termRef.current?.focus();
+      setDrop(null);
+    } catch {
+      flash("failed");
+    }
+  };
 
   useEffect(() => {
     // An explicit fontFamily pins every glyph to one bundled webfont. Left
@@ -249,10 +293,44 @@ export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
 
   return (
     <div
-      ref={containerRef}
-      className="h-full w-full"
-      style={{ backgroundColor: palette.background }}
-      data-testid="terminal-view"
-    />
+      className="relative h-full w-full"
+      onDragEnter={(e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault();
+        dragDepth.current += 1;
+        setDrop("hint");
+      }}
+      onDragOver={(e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault(); // without it the browser refuses the drop
+        e.dataTransfer.dropEffect = "copy";
+      }}
+      onDragLeave={(e) => {
+        if (!hasFiles(e)) return;
+        dragDepth.current = Math.max(0, dragDepth.current - 1);
+        if (dragDepth.current === 0) setDrop((d) => (d === "hint" ? null : d));
+      }}
+      onDrop={(e) => void onDrop(e)}
+    >
+      <div
+        ref={containerRef}
+        className="h-full w-full"
+        style={{ backgroundColor: palette.background }}
+        data-testid="terminal-view"
+      />
+      {drop && (
+        // pointer-events-none: the drop must land on the terminal, not on this.
+        <div
+          data-testid="terminal-drop"
+          className={`pointer-events-none absolute inset-2 flex items-center justify-center rounded-lg border-2 border-dashed bg-black/50 text-sm font-medium ${
+            drop === "failed" || drop === "imagesOnly"
+              ? "border-red-400 text-red-300"
+              : "border-sky-400 text-sky-200"
+          }`}
+        >
+          {t(`drop.${drop}`)}
+        </div>
+      )}
+    </div>
   );
 }

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

@@ -8,7 +8,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, cleanup, act } from "@testing-library/react";
+import { render, cleanup, act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { TerminalView } from "../TerminalView";
 
 const writeMock = vi.fn();
@@ -18,6 +18,11 @@ const disposeMock = vi.fn();
 const wheelHandlerMock = vi.fn();
 const keyHandlerMock = vi.fn();
 const focusMock = vi.fn();
+const pasteMock = vi.fn();
+const dropImageMock = vi.fn();
+vi.mock("../../../lib/api", () => ({
+  api: { run: { dropImage: (f: Blob) => dropImageMock(f) } },
+}));
 const loadAddonMock = vi.fn();
 // Mutable stand-ins for the two live terminal facts the wheel handler reads.
 const termState = {
@@ -61,6 +66,7 @@ vi.mock("@xterm/xterm", () => ({
     attachCustomWheelEventHandler: wheelHandlerMock,
     attachCustomKeyEventHandler: keyHandlerMock,
     focus: focusMock,
+    paste: pasteMock,
   })),
 }));
 // jsdom loads no stylesheet, so stand in for the CSS-variable probe.
@@ -314,4 +320,31 @@ describe("TerminalView", () => {
     expect(MockWebSocket.instances).toHaveLength(1);
     vi.useRealTimers();
   });
+
+  it("pastes the server-side path of a dropped image into the pane", async () => {
+    dropImageMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab.png" });
+    pasteMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
+    const img = new File([new Uint8Array([137, 80])], "shot.png", { type: "image/png" });
+    const target = screen.getByTestId("terminal-view");
+    fireEvent.dragEnter(target, { dataTransfer: { types: ["Files"], files: [img] } });
+    expect(screen.getByTestId("terminal-drop")).toHaveTextContent("Drop image to attach");
+    fireEvent.drop(target, { dataTransfer: { types: ["Files"], files: [img] } });
+    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith("/tmp/agenthub-drops-1/ab.png "));
+    expect(dropImageMock).toHaveBeenCalledWith(img);
+    await waitFor(() => expect(screen.queryByTestId("terminal-drop")).toBeNull());
+  });
+
+  it("uploads nothing for a dropped non-image and says why", async () => {
+    dropImageMock.mockReset();
+    pasteMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
+    const txt = new File(["hi"], "a.txt", { type: "text/plain" });
+    fireEvent.drop(screen.getByTestId("terminal-view"), {
+      dataTransfer: { types: ["Files"], files: [txt] },
+    });
+    expect(await screen.findByText("Only images can be dropped here")).toBeInTheDocument();
+    expect(dropImageMock).not.toHaveBeenCalled();
+    expect(pasteMock).not.toHaveBeenCalled();
+  });
 });

client/src/i18n/locales/en/lanes.json

@@ -112,6 +112,9 @@
   "changes.size.full": "Full screen",
   "changes.stageAll": "Stage all ({{count}})",
   "changes.unstageAll": "Unstage all ({{count}})",
+  "changes.dropEdits": "Discard your unsaved edits to this file?",
+  "changes.stagedGroup": "Staged Changes",
+  "changes.unstagedGroup": "Changes",
   "changes.stage": "Stage this file",
   "changes.title": "Changes",
   "changes.truncated": "Some changes were left out to keep this panel responsive.",

client/src/i18n/locales/en/run.json

@@ -164,5 +164,11 @@
     "input": "Input",
     "label": "Context",
     "output": "Output"
+  },
+  "drop": {
+    "hint": "Drop image to attach",
+    "uploading": "Uploading image…",
+    "failed": "Could not attach the image",
+    "imagesOnly": "Only images can be dropped here"
   }
 }

client/src/i18n/locales/vi/lanes.json

@@ -112,6 +112,9 @@
   "changes.size.full": "Toàn màn hình",
   "changes.stageAll": "Stage tất cả ({{count}})",
   "changes.unstageAll": "Bỏ stage tất cả ({{count}})",
+  "changes.dropEdits": "Bỏ các chỉnh sửa chưa lưu của file này?",
+  "changes.stagedGroup": "Đã stage",
+  "changes.unstagedGroup": "Thay đổi",
   "changes.stage": "Đưa file này vào index",
   "changes.title": "Thay đổi",
   "changes.truncated": "Một phần thay đổi đã bị lược bớt để bảng này còn mượt.",

client/src/i18n/locales/vi/run.json

@@ -163,5 +163,11 @@
     "input": "Input",
     "label": "Context",
     "output": "Output"
+  },
+  "drop": {
+    "hint": "Thả ảnh để đính kèm",
+    "uploading": "Đang tải ảnh lên…",
+    "failed": "Không đính kèm được ảnh",
+    "imagesOnly": "Chỉ thả được ảnh vào đây"
   }
 }

client/src/lib/api.ts

@@ -1982,6 +1982,14 @@ export const api = {
       if (q) qs.set("q", q);
       return request<{ items: string[] }>(`/run/files?${qs.toString()}`);
     },
+    /** POST /api/run/drop-image - save an image dropped on the terminal on the
+     *  server's machine; the returned path is what gets pasted into the pane. */
+    dropImage: (file: Blob) =>
+      request<{ path: string }>("/run/drop-image", {
+        method: "POST",
+        body: file,
+        headers: { "Content-Type": file.type },
+      }),
     /** POST /api/run - start (or adopt, if already live) a lane's terminal run. */
     start: (args: RunStartArgs) =>
       request<RunHandle>("/run", { method: "POST", body: JSON.stringify(args) }),

client/src/pages/Workspace.tsx

@@ -583,8 +583,11 @@ export function Workspace() {
 
   // Viewport locked only when a live run is showing (TerminalView needs locked
   // viewport for chat scrolling). The config-card screen needs normal page flow
-  // so the form is fully reachable on short windows.
-  const viewportLocked = paneHasActiveRun;
+  // so the form is fully reachable on short windows. A full-width Changes panel
+  // hides that form anyway, and without a locked height it shrinks to its
+  // content — the editor inside it collapsed to a few lines (no live run).
+  const viewportLocked =
+    paneHasActiveRun || (!!currentLane && changesOpen && changesSize === "full");
 
   const handleLaneAction = async (id: number, action: string, body?: Record<string, unknown>) => {
     setLaneActionError(null);
@@ -1032,6 +1035,7 @@ export function Workspace() {
                 </div>
                 <LaneChangesPanel
                   laneId={currentLane.id}
+                  full={changesSize === "full"}
                   // A sibling worktree forks from the lane's SOURCE repo when
                   // it has one (this lane is itself a worktree of it); an
                   // adopted lane is its own repo.

client/src/pages/__tests__/Workspace.changesPanel.test.tsx

@@ -75,6 +75,7 @@ vi.mock("../../lib/api", async (importOriginal) => {
         }),
         pipelines: r({ pipelines: [] }),
         git: r({ available: false }),
+        gitTree: r({ entries: [] }),
         runtime: r({ up: false, ports: {}, lastError: null }),
         features: { list: r({ features: [] }), show: r({ feature: null }) },
         proof: { list: r({ features: [] }), imageUrl: () => "" },