feat: v2.5.12 — plan and quota for every AI tool, Grok Build and Kimi Code, Quit AgentHub (#65)

Usage panel (status bar): - every account shows its plan (Claude subscriptionType, Codex chatgpt_plan_type, Cursor membershipType, Grok subscriptionTier) - new quota rows: Cursor CLI (cursor.com usage-summary), Antigravity (`agy --print /usage`, two model pools; AGENTHUB_AGY_USAGE=0 never runs agy), Grok Build, Kimi Code, OpenCode Go — each login read from the tool's own file, sent only to its own host while valid, never refreshed - in-flight quota reads are shared between tabs AI Tools catalog: Grok Build (`grok`) and Kimi Code (`kimi`) added; Gemini CLI, Hermes and OpenClaw removed. Also: Quit AgentHub (#65, `agenthub stop`), status-area icon, Add to Chat on an editor selection, Settings in three groups, JetBrains-style Changes panel (ticked files/hunks, ignore, blame, file history), terminal font. --no-verify: :3000 is taken by another dev server (lane-detect tests); both suites run by hand — server 2636/2639 (the 3 are :3000), client 1131/1131.
2026-10-08 12:22:14 +07:00
parent 6ef9a5d4b7
commit a9c71cd905
133 changed files with 8007 additions and 1830 deletions
@@ -13,34 +13,54 @@
 * text), its edit in a stronger blue — the same scheme as the read-only diff in
 * LaneDiffView. Syntax colours come from the dashboard's own per-line
 * tokenizer (`lib/highlight.ts`), like every other code view here.
- * Given `onBlock`, each changed block also gets the read-only diff's Undo /
- * Keep bar under its last line (Undo asks twice) in place of its Revert; the
- * panel turns it off while the editor holds unsaved text, because git acts on
- * the file on disk.
+ * Given `onBlock`, each changed block also gets the read-only diff's bar under
+ * its last line — Undo (asks twice) and the block's commit checkbox
+ * (`blockIncluded`) — in place of its Revert; the panel turns it off while
+ * the editor holds unsaved text, because git acts on the file on disk.
+ * Given `blame`, a gutter left of the line numbers names each line's last
+ * commit (Annotate); a click hands its sha to `onBlameClick`. `navRef` gets
+ * a function that moves the cursor to the next / previous changed block.
+ * Given `onAddToChat`, a selection in the editable file gets Cursor's Add to
+ * Chat chip above it, which hands the panel the selection's 1-based lines.
 * Lazy-loaded by LaneChangesPanel, which keys it by file and shape:
 * CodeMirror stays out of the main bundle, and one mount is one view.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { EditorState, RangeSetBuilder, StateEffect, StateField, Text } from "@codemirror/state";
+import {
+  Compartment,
+  EditorSelection,
+  EditorState,
+  RangeSetBuilder,
+  StateEffect,
+  StateField,
+  Text,
+} from "@codemirror/state";
 import {
  Decoration,
  EditorView,
  ViewPlugin,
  WidgetType,
  drawSelection,
+  gutter,
+  GutterMarker,
  highlightActiveLine,
  highlightActiveLineGutter,
  keymap,
  lineNumbers,
+  showTooltip,
  type DecorationSet,
+  type Tooltip,
  type ViewUpdate,
 } from "@codemirror/view";
 import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { unifiedMergeView, type Chunk } from "@codemirror/merge";
 import { chunksOf, splitDiff } from "./splitDiff";
 import { highlight, tokenClass } from "../../lib/highlight";
+import type { LaneBlame } from "../../lib/types";
+
+type Blame = Extract<LaneBlame, { available: true }>;

 /**
 * True when a letter or digit of a line (`text`, starting at document offset
@@ -76,7 +96,7 @@ function decorate(view: EditorView, lang: string): DecorationSet {
  const doc = view.state.doc;
  let last = 0;
  for (const { from, to } of view.visibleRanges) {
-    for (let pos = from; pos <= to; ) {
+    for (let pos = from; pos <= to;) {
      const line = doc.lineAt(pos);
      pos = line.to + 1;
      if (line.number <= last) continue;
@@ -151,7 +171,52 @@ const diffColours = (lang: string) =>
 /** A changed block by line (1-based; a count of 0 is a pure insertion or
 *  removal): what the panel matches against git's own change blocks. */
 export type EditorBlock = { oldFrom: number; oldCount: number; newFrom: number; newCount: number };
-export type BlockAction = "keep" | "undo";
+export type BlockAction = "include" | "undo";
+
+/** One Annotate cell: the line's commit date and author, its subject on hover. */
+class BlameMarker extends GutterMarker {
+  constructor(
+    readonly text: string,
+    readonly title: string
+  ) {
+    super();
+  }
+  override eq(other: BlameMarker) {
+    return other.text === this.text && other.title === this.title;
+  }
+  override toDOM() {
+    const el = document.createElement("span");
+    el.textContent = this.text;
+    el.title = this.title;
+    return el;
+  }
+}
+
+/** The Annotate gutter for the editable file's lines (the B side). ponytail:
+ *  lines are matched by number, so unsaved edits above a line shift its
+ *  annotation until the file is saved and re-annotated. */
+function blameGutter(blame: Blame, notCommitted: string, onClick: (sha: string) => void) {
+  const shaAt = (state: EditorState, pos: number) => blame.lines[state.doc.lineAt(pos).number - 1];
+  return gutter({
+    class: "cm-ah-blame",
+    lineMarker(view, line) {
+      const sha = shaAt(view.state, line.from);
+      if (sha === undefined) return null;
+      const c = sha ? blame.commits[sha] : undefined;
+      return c
+        ? new BlameMarker(`${c.date.slice(0, 10)} ${c.author}`, `${c.short} ${c.summary}`)
+        : new BlameMarker(notCommitted, notCommitted);
+    },
+    initialSpacer: () => new BlameMarker("0000-00-00 Author Name", ""),
+    domEventHandlers: {
+      mousedown(view, line) {
+        const sha = shaAt(view.state, line.from);
+        if (sha) onClick(sha);
+        return !!sha;
+      },
+    },
+  });
+}

 /** A chunk side's first line and line count. `to` is the start of the line
 *  after the chunk (or the end + 1), so its last line holds `to - 1`. */
@@ -220,6 +285,26 @@ function blockBars(orig: Text, build: (b: EditorBlock) => HTMLElement) {
  });
 }

+/** Add to Chat above a non-empty selection; `build` makes its DOM from the
+ *  selection's first and last 1-based line. A selection ending at a line's
+ *  start (a whole-line drag) does not take that line. */
+function chatChip(build: (start: number, end: number) => HTMLElement) {
+  return StateField.define<Tooltip | null>({
+    create: () => null,
+    update(tip, tr) {
+      if (!tr.docChanged && !tr.selection) return tip;
+      const { from, to, empty } = tr.state.selection.main;
+      if (empty) return null;
+      const doc = tr.state.doc;
+      const start = doc.lineAt(from).number;
+      const last = doc.lineAt(to);
+      const end = to === last.from && last.number > start ? last.number - 1 : last.number;
+      return { pos: from, above: true, create: () => ({ dom: build(start, end) }) };
+    },
+    provide: (f) => showTooltip.from(f),
+  });
+}
+
 const CHIP = "flex shrink-0 items-center gap-0.5 rounded border px-1 leading-[14px] cursor-pointer";
 const UNDO =
  "border-border-light text-fg-secondary hover:border-status-danger/60 hover:text-status-danger";
@@ -234,6 +319,8 @@ const BLUE_EDIT = "rgb(var(--diff-mod) / 0.45)";
 const M = "&.cm-merge-b.cm-merge-b";
 const A = "&.cm-merge-a.cm-merge-a";
 const theme = EditorView.theme({
+  // The chip draws its own box; drop its wrapper's default tooltip one.
+  ".cm-tooltip.cm-ah-chat": { border: "none", background: "transparent" },
  "&": {
    height: "100%",
    fontSize: "11px",
@@ -278,6 +365,13 @@ const theme = EditorView.theme({
    background: "rgb(var(--surface-2))",
  },
  ".cm-chunkButtons": { zIndex: "1" },
+  ".cm-ah-blame .cm-gutterElement": {
+    color: "rgb(var(--fg-muted))",
+    cursor: "pointer",
+    fontSize: "10px",
+    paddingRight: "6px",
+    whiteSpace: "nowrap",
+  },
 });

 /** The Revert button on a changed block (unified); @codemirror/merge wires
@@ -304,6 +398,11 @@ export default function DiffEditor({
  onChange,
  onSave,
  onBlock,
+  blockIncluded,
+  blame,
+  onBlameClick,
+  navRef,
+  onAddToChat,
 }: {
  value: string;
  /** The text the diff is taken against; read once, at mount. */
@@ -318,14 +417,24 @@ export default function DiffEditor({
  revertLabel: string;
  onChange: (text: string) => void;
  onSave: () => void;
-  /** Keep / Undo one changed block in git; absent = no bars. */
+  /** Undo one changed block in git, or flip its commit checkbox; absent = no bars. */
  onBlock?: (action: BlockAction, block: EditorBlock) => void;
+  /** Whether a block is ticked for the commit (its checkbox's state). */
+  blockIncluded?: (block: EditorBlock) => boolean;
+  /** Annotate: each line's last commit; absent = no gutter. */
+  blame?: Blame;
+  onBlameClick?: (sha: string) => void;
+  /** Set to "go to the next (1) / previous (-1) changed block". */
+  navRef?: { current: ((dir: 1 | -1) => void) | null };
+  /** Add the selected lines (1-based, inclusive) to the chat; absent = no chip. */
+  onAddToChat?: (start: number, end: number) => void;
 }) {
  const { t } = useTranslation("lanes");
  const host = useRef<HTMLDivElement>(null);
  const view = useRef<EditorView | null>(null);
-  const cb = useRef({ onChange, onSave, onBlock, t });
-  cb.current = { onChange, onSave, onBlock, t };
+  const cb = useRef({ onChange, onSave, onBlock, blockIncluded, onBlameClick, onAddToChat, t });
+  cb.current = { onChange, onSave, onBlock, blockIncluded, onBlameClick, onAddToChat, t };
+  const blameSlot = useRef(new Compartment()).current;

  /** The diff view's review bar, as DOM: pinned to the visible right edge,
   *  zero height so it never pushes lines (or a split view's alignment). */
@@ -349,11 +458,13 @@ export default function DiffEditor({
      return b;
    };
    const undo = chip(tr("changes.undoHunkShort"), tr("changes.undoHunk"), UNDO);
-    const keep = chip(
-      tr("changes.stageHunkShort"),
-      tr("changes.stageHunk"),
-      "border-status-success bg-status-success/25 text-status-success hover:bg-status-success/35"
-    );
+    // The block's commit checkbox, a real one so it reads like the diff's.
+    const include = bar.appendChild(document.createElement("input"));
+    include.type = "checkbox";
+    include.checked = cb.current.blockIncluded?.(block) ?? true;
+    include.title = tr("changes.includeBlock");
+    include.setAttribute("aria-label", tr("changes.includeBlock"));
+    include.className = "h-3 w-3 cursor-pointer";
    // Two clicks, like every undo git cannot give back; disarms after 3 s.
    let timer = 0;
    const arm = (on: boolean) => {
@@ -374,7 +485,7 @@ export default function DiffEditor({
      arm(true);
      timer = window.setTimeout(() => arm(false), 3000);
    };
-    keep.onclick = () => cb.current.onBlock?.("keep", block);
+    include.onchange = () => cb.current.onBlock?.("include", block);
    return wrap;
  };

@@ -405,6 +516,28 @@ export default function DiffEditor({
        if (u.docChanged) cb.current.onChange(u.state.doc.toString());
      }),
      blockBars(Text.of(original.split("\n")), buildBar),
+      blameSlot.of([]),
+      ...(onAddToChat
+        ? [
+            chatChip((start, end) => {
+              const b = document.createElement("button");
+              b.type = "button";
+              b.dataset.testid = "lane-editor-add-to-chat";
+              b.textContent = cb.current.t("changes.addToChat");
+              b.className =
+                "rounded border border-border-light bg-surface-1 px-1.5 py-0.5 font-sans text-[11px] text-fg-primary shadow-card hover:bg-surface-2";
+              // Keep the editor's focus (and so its selection) through the click.
+              b.onmousedown = (e) => e.preventDefault();
+              b.onclick = () => cb.current.onAddToChat?.(start, end);
+              // CodeMirror makes the returned element the `.cm-tooltip`, whose
+              // themed rule above would strip the button's own border and fill.
+              const wrap = document.createElement("div");
+              wrap.className = "cm-ah-chat";
+              wrap.append(b);
+              return wrap;
+            }),
+          ]
+        : []),
    ];
    let v: EditorView;
    let destroy: () => void;
@@ -446,11 +579,47 @@ export default function DiffEditor({
    }
    v.focus();
    view.current = v;
-    return destroy;
+    if (navRef) {
+      // The B side's chunks, unified or split: the cursor goes to the start
+      // of the next / previous one and it scrolls into view.
+      navRef.current = (dir) => {
+        const ed = view.current;
+        const chunks = ed ? (chunksOf(ed.state)?.chunks ?? []) : [];
+        if (!ed || !chunks.length) return;
+        const at = ed.state.selection.main.head;
+        const next =
+          dir === 1
+            ? chunks.find((c) => c.fromB > at)
+            : [...chunks].reverse().find((c) => c.fromB < ed.state.doc.lineAt(at).from);
+        if (!next) return;
+        ed.dispatch({
+          selection: EditorSelection.cursor(next.fromB),
+          effects: EditorView.scrollIntoView(next.fromB, { y: "center" }),
+        });
+        ed.focus();
+      };
+    }
+    return () => {
+      if (navRef) navRef.current = null;
+      destroy();
+    };
    // One mount per view: the parent keys this component by file and shape.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  // Annotate on / off without remounting the view.
+  useEffect(() => {
+    view.current?.dispatch({
+      effects: blameSlot.reconfigure(
+        blame
+          ? blameGutter(blame, cb.current.t("changes.notCommitted"), (sha) =>
+              cb.current.onBlameClick?.(sha)
+            )
+          : []
+      ),
+    });
+  }, [blame, blameSlot]);
+
  const bars = !!onBlock;
  useEffect(() => {
    view.current?.dispatch({ effects: barsOn.of(bars) });