feat: right-click menus everywhere, workspace/session cost, long-term DB safety

Right-click menus: one portal shell (components/ContextMenu.tsx) for every
item with actions - sidebar/Recents/archived session rows (SessionMenu),
console tabs, pane headers, the Changes panel's files/tree/commits, the
workspace home, sessions outside a workspace (SessionRowMenu: Sessions
table, Dashboard, Activity, Workflow runs), prompt images, every Settings
list and every Claude Code/Codex config list (FileItemMenu). Buttons stay;
a delete keeps its button's confirm; the shell stops portal clicks from
reaching the card that opened it.

Status bar: Workspace $ and Session $ on the Workspace page, from
?lane= on GET /api/pricing/cost and the focused/replayed session's cost.

Database, no data dropped: synchronous=NORMAL, journal_size_limit 64 MB,
hourly PASSIVE checkpoint + PRAGMA optimize, idx_events_session_created
(replacing the redundant idx_events_session), watchdog reads
sessions.transcript_path, transcript parsed before the hook's write
transaction, GET /api/sessions/:id?events=0 for the web page (reloads only
on its own session, debounced), streamed export, transactional clear-data
and chunked cleanup, subagent import reads tool_use_ids once, runtime logs
rotated past 5 MB.

client/src/components/settings/AiToolsSettings.tsx

@@ -8,6 +8,8 @@
  * the catalog knows how. Install/Update/Update all confirm the exact command
  * first, run as ONE server job at a time and show its log under the row
  * (polled from GET /api/ai-tools/job; a finished job folds to one line).
+ * A right-click on an installed row opens its Update / Set default /
+ * Enable-Disable (plus Copy path) as a menu; the buttons stay.
  * Refresh re-reads the login shell's PATH and re-detects. Icons come from
  * `AiToolIcon`. A disabled tool is hidden from Add lane; existing lanes keep
  * working.
@@ -21,6 +23,7 @@ import { ChevronDown, Download, ExternalLink, RefreshCw } from "lucide-react";
 import { useAiTools } from "../../hooks/useAiTools";
 import { ConfirmModal } from "../ConfirmModal";
 import { AiToolIcon } from "../AiToolIcon";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { api, type AiTool, type AiToolJob } from "../../lib/api";
 
 type Confirm = { kind: "install" | "update"; tool: AiTool } | { kind: "update-all" };
@@ -120,6 +123,16 @@ export function AiToolsSettings() {
   const [job, setJob] = useState<AiToolJob | null>(null);
   const [confirm, setConfirm] = useState<Confirm | null>(null);
   const [showAvailable, setShowAvailable] = useState(false);
+  const ctx = useContextMenu<AiTool>();
+  // A menu item: close the menu, then act on the tool it was opened on.
+  const pick = (fn: (tool: AiTool) => unknown) => () => {
+    const tool = ctx.menu?.item;
+    ctx.close();
+    if (tool) fn(tool);
+  };
+  const setDefault = (tool: AiTool) => void run(tool.id, () => update(tool.id, { default: true }));
+  const toggle = (tool: AiTool) =>
+    void run(tool.id, () => update(tool.id, { enabled: !tool.enabled }));
 
   // A modal opened mid-job picks it up. Deferred like useAiTools' load: an
   // unreachable server (or a mocked api without it) means "no job".
@@ -236,7 +249,12 @@ export function AiToolsSettings() {
           {installed.map((tool) => {
             const isDefault = tool.id === defaultId;
             return (
-              <li key={tool.id} data-testid={`ai-tool-${tool.id}`} className="px-3 py-2.5">
+              <li
+                key={tool.id}
+                data-testid={`ai-tool-${tool.id}`}
+                onContextMenu={(e) => ctx.open(e, tool)}
+                className="px-3 py-2.5"
+              >
                 <div className="flex items-center gap-3">
                   <div
                     className={`flex min-w-0 flex-1 items-center gap-3 ${tool.enabled ? "" : "opacity-50"}`}
@@ -278,26 +296,53 @@ export function AiToolsSettings() {
                       <button
                         type="button"
                         disabled={!tool.enabled || busy !== null}
-                        onClick={() => void run(tool.id, () => update(tool.id, { default: true }))}
+                        onClick={() => setDefault(tool)}
                         className={GHOST_BTN}
                       >
                         {t("aiTools.setDefault")}
                       </button>
                     )}
                   </div>
-                  <ToolSwitch
-                    tool={tool}
-                    disabled={busy !== null}
-                    onToggle={() =>
-                      void run(tool.id, () => update(tool.id, { enabled: !tool.enabled }))
-                    }
-                  />
+                  <ToolSwitch tool={tool} disabled={busy !== null} onToggle={() => toggle(tool)} />
                 </div>
                 {logFor(tool.id)}
               </li>
             );
           })}
         </ul>
+        {ctx.menu && (
+          <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="ai-tool-menu">
+            {ctx.menu.item.update && (
+              <MenuItem
+                disabled={jobBusy}
+                onSelect={pick((tool) => setConfirm({ kind: "update", tool }))}
+              >
+                {t("aiTools.update")}
+              </MenuItem>
+            )}
+            {ctx.menu.item.id !== defaultId && (
+              <MenuItem
+                disabled={!ctx.menu.item.enabled || busy !== null}
+                onSelect={pick(setDefault)}
+              >
+                {t("aiTools.setDefault")}
+              </MenuItem>
+            )}
+            <MenuItem disabled={busy !== null} onSelect={pick(toggle)}>
+              {ctx.menu.item.enabled ? t("rowMenu.disable") : t("rowMenu.enable")}
+            </MenuItem>
+            {ctx.menu.item.path && (
+              <>
+                <MenuSeparator />
+                <MenuItem
+                  onSelect={pick((tool) => void navigator.clipboard.writeText(tool.path ?? ""))}
+                >
+                  {t("rowMenu.copyPath")}
+                </MenuItem>
+              </>
+            )}
+          </ContextMenu>
+        )}
       </div>
 
       {available.length > 0 && (

client/src/components/settings/PricingSettings.tsx

@@ -8,7 +8,8 @@
  * **Show all models** switch lists every row, and a row added outside the
  * filter turns it on rather than vanishing. Reset Defaults reseeds Claude's
  * rates, so only the Claude tab offers it; the server re-fetches any row the
- * automatic sync owns (OpenAI's, Gemini's) straight after.
+ * automatic sync owns (OpenAI's, Gemini's) straight after. A right-click on a
+ * rule row opens its Edit / Delete (plus Copy model pattern) as a menu.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -21,6 +22,7 @@ import { eventBus } from "../../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../../lib/remoteDataEvents";
 import { getCurrentLocale } from "../../lib/format";
 import { Skeleton } from "../Skeleton";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import type { ModelPricing, WSMessage } from "../../lib/types";
 
 interface EditRow {
@@ -215,6 +217,13 @@ export function PricingSettings({ vendor, allowReset = false, id = "pricing", he
   const [showAll, setShowAll] = useState(false);
   const [resetting, setResetting] = useState(false);
   const [confirmReset, setConfirmReset] = useState(false);
+  const ctx = useContextMenu<ModelPricing>();
+  // A menu item: close the menu, then act on the rule it was opened on.
+  const pick = (fn: (rule: ModelPricing) => unknown) => () => {
+    const rule = ctx.menu?.item;
+    ctx.close();
+    if (rule) fn(rule);
+  };
   const [actionResult, setActionResult] = useState<{
     key: string;
     message: string;
@@ -663,6 +672,7 @@ export function PricingSettings({ vendor, allowReset = false, id = "pricing", he
                 ) : (
                   <tr
                     key={rule.model_pattern}
+                    onContextMenu={(e) => ctx.open(e, rule)}
                     className="hover:bg-surface-4 transition-colors group"
                   >
                     <td className="whitespace-nowrap px-3 py-3 text-sm font-mono text-fg-secondary">
@@ -767,6 +777,26 @@ export function PricingSettings({ vendor, allowReset = false, id = "pricing", he
           </table>
         </div>
       )}
+      {ctx.menu && (
+        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="pricing-menu">
+          <MenuItem disabled={isEditing} onSelect={pick(startEdit)}>
+            {t("common:edit")}
+          </MenuItem>
+          <MenuItem
+            onSelect={pick((rule) => void navigator.clipboard.writeText(rule.model_pattern))}
+          >
+            {t("rowMenu.copyPattern")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            danger
+            disabled={isEditing}
+            onSelect={pick((rule) => void deleteRule(rule.model_pattern))}
+          >
+            {t("common:delete")}
+          </MenuItem>
+        </ContextMenu>
+      )}
 
       {lastUpdated && (
         <p className="text-xs text-fg-muted mt-3">

client/src/components/settings/__tests__/AiToolsSettings.test.tsx

@@ -4,7 +4,8 @@
  * enable switch and Set default, available rows fold behind a disclosure with
  * a homepage link, Refresh re-detects, every updater gets Update without a version
  * lookup, and Install/Update confirm the exact command, then show the polled
- * job log, folded once it is done.
+ * job log, folded once it is done. An installed row's right-click menu runs
+ * the same Set default / enable switch as its controls.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -125,6 +126,21 @@ describe("AiToolsSettings", () => {
     await user.click(screen.getByRole("button", { name: "Refresh" }));
     expect(api.aiTools.refresh).toHaveBeenCalledOnce();
   });
+
+  it("sets the default and disables a tool from its right-click menu", async () => {
+    const user = userEvent.setup();
+    render(<AiToolsSettings />);
+    const gemini = await screen.findByTestId("ai-tool-gemini");
+    await user.pointer({ keys: "[MouseRight]", target: gemini });
+    await user.click(screen.getByRole("menuitem", { name: "Set default" }));
+    expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { default: true });
+    await user.pointer({ keys: "[MouseRight]", target: gemini });
+    await user.click(screen.getByRole("menuitem", { name: "Disable" }));
+    expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { enabled: false });
+    // A disabled tool cannot become the default from the menu either.
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("ai-tool-grok") });
+    expect(screen.getByRole("menuitem", { name: "Set default" })).toBeDisabled();
+  });
 });
 
 describe("AiToolsSettings — install and update", () => {

client/src/components/settings/__tests__/PricingSettings.test.tsx

@@ -3,7 +3,8 @@
  * @description The shared Model Pricing table: each tool's tab shows its own
  * vendor's rows, **Show all models** lists the rest, a row added outside the
  * filter turns that switch on instead of vanishing, and Reset Defaults is
- * offered only where asked for (the Claude tab).
+ * offered only where asked for (the Claude tab). A row's right-click menu
+ * runs the same Edit / Delete as its buttons.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -107,4 +108,21 @@ describe("PricingSettings", () => {
     expect(api.settings.resetPricing).toHaveBeenCalledTimes(1);
     expect(api.settings.resetPricing).toHaveBeenCalledWith("claude");
   });
+
+  it("edits and deletes a rule from its right-click menu", async () => {
+    vi.mocked(api.pricing.delete)
+      .mockReset()
+      .mockResolvedValue({} as never);
+    const user = userEvent.setup();
+    render(<PricingSettings vendor="openai" />);
+    const row = (await screen.findByText("gpt-5.6-sol%")).closest("tr")!;
+
+    await user.pointer({ keys: "[MouseRight]", target: row });
+    await user.click(screen.getByRole("menuitem", { name: "Delete" }));
+    expect(api.pricing.delete).toHaveBeenCalledWith("gpt-5.6-sol%");
+
+    await user.pointer({ keys: "[MouseRight]", target: row });
+    await user.click(screen.getByRole("menuitem", { name: "Edit" }));
+    expect(screen.getByDisplayValue("GPT-5.6 Sol")).toBeInTheDocument();
+  });
 });