feat(ui): sidebar project tree, status bar and a tabbed workbench for workspaces

The Workspace page's lane strip moves into the sidebar as a project tree: workspaces grouped by git repository (new GET /api/projects, cached in memory, POST /api/projects/refresh), untracked worktrees with Adopt, inline rename, drag/Alt+arrow ordering and a right-click row menu. The selected workspace is the URL's ?lane=, one shared lane list feeds the tree, the new bottom status bar and the page. The Changes panel gains an activity bar (Files / Changes / Sessions, with resume), and split panes get a header.
2026-10-01 16:33:25 +07:00
parent 5b3884b309
commit ba2c4e1914
39 changed files with 2431 additions and 1439 deletions
@@ -0,0 +1,156 @@
+/**
+ * @file WorkspaceRowMenu — the sidebar workspace row's context menu, opened at
+ * the pointer (right-click) or under the row's `⋯` button. Every item is an
+ * existing call: Start/Stop (`POST /api/lanes/:id/start` slot 0 / `stop`),
+ * Rename (the row's inline field), the AI Router select (`LaneRouterRow`,
+ * router-capable tools only), Create/update readme (claude only, the same run
+ * the lane Tools menu starts), New workspace here (the Add modal prefilled),
+ * Copy path, and Reset/Remove through `DestructiveLaneModal` — Reset only on a
+ * managed lane. The server's guards are the real ones; the menu only hides
+ * what the lane's kind or tool makes meaningless. Closes on Escape, an outside
+ * click or after an item runs.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { LaneRouterRow } from "./LaneCard";
+
+export type WorkspaceMenuAction = "rename" | "new-here" | "reset" | "remove" | "started";
+
+export function WorkspaceRowMenu({
+  lane,
+  x,
+  y,
+  onClose,
+  onAction,
+}: {
+  lane: Lane;
+  x: number;
+  y: number;
+  onClose: () => void;
+  /** Items the tree itself carries out (rename field, modals, selection). */
+  onAction: (action: WorkspaceMenuAction) => void;
+}) {
+  const { t } = useTranslation("lanes");
+  const ref = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [onClose]);
+
+  const run = async (fn: () => Promise<unknown>, then?: WorkspaceMenuAction) => {
+    setError(null);
+    try {
+      await fn();
+      if (then) onAction(then);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+  const live = !!lane.run_id || lane.status === "running";
+  const item =
+    "block w-full rounded px-2 py-1 text-left text-xs text-fg-secondary hover:bg-surface-4 hover:text-fg-primary";
+
+  return (
+    <div
+      ref={ref}
+      role="menu"
+      data-testid={`workspace-row-menu-${lane.id}`}
+      style={{
+        left: Math.min(x, window.innerWidth - 232),
+        top: Math.min(y, window.innerHeight - 320),
+      }}
+      className="fixed z-50 w-56 rounded-lg border border-border bg-surface-2 p-1 shadow-lg"
+    >
+      <button
+        type="button"
+        role="menuitem"
+        className={item}
+        onClick={() =>
+          live
+            ? void run(() => api.lanes.action(lane.id, "stop"))
+            : void run(() => api.lanes.action(lane.id, "start", { slot: 0, prompt: "" }), "started")
+        }
+      >
+        {live ? t("menu.stop") : t("menu.start")}
+      </button>
+      <button type="button" role="menuitem" className={item} onClick={() => onAction("rename")}>
+        {t("menu.rename")}
+      </button>
+      <div className="px-2 py-1">
+        <LaneRouterRow lane={lane} />
+      </div>
+      {lane.tool === "claude" && (
+        <button
+          type="button"
+          role="menuitem"
+          className={item}
+          onClick={() =>
+            void run(
+              () =>
+                api.run.start({
+                  laneId: lane.id,
+                  cwd: lane.cwd,
+                  initialPrompt: "/sg-all:sg-md-writing",
+                }),
+              "started"
+            )
+          }
+        >
+          {t("actions.writeDocs")}
+        </button>
+      )}
+      <button type="button" role="menuitem" className={item} onClick={() => onAction("new-here")}>
+        {t("menu.newHere")}
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        className={item}
+        onClick={() => void run(() => navigator.clipboard.writeText(lane.cwd))}
+      >
+        {t("menu.copyPath")}
+      </button>
+      <div className="my-1 border-t border-border" />
+      {lane.kind === "managed" && (
+        <button
+          type="button"
+          role="menuitem"
+          className={`${item} !text-status-danger`}
+          onClick={() => onAction("reset")}
+        >
+          {t("menu.reset")}
+        </button>
+      )}
+      <button
+        type="button"
+        role="menuitem"
+        className={`${item} !text-status-danger`}
+        onClick={() => onAction("remove")}
+      >
+        {t("menu.remove")}
+      </button>
+      {error && (
+        <p role="alert" className="px-2 py-1 text-[11px] text-status-danger">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}