chore: v2.8.23 — workspace groups, inner repos in Changes (opt-in), sub-agent tokens counted

Workspace groups: named, foldable, ordered sidebar sections kept per account (agenthub.workspace.groups); a workspace joins one from its menu, a drop on the header, a drag under a row, or Alt+Up/Down past a group's edge; headers drag to reorder; a folded header shows its most urgent state; New workspace in this group; fold/unfold all. Inner repos: GET /api/lanes/:id/repos + ?repo= on git/fs routes; the Changes panel shows a parent folder's repos only when Settings -> Git -> Changes panel turns it on (agenthub.changes.innerRepos, off by default). Cost: the hook writer adds a session's sub-agent transcripts to its tokens and hours (server/lib/subagent-usage.js) — a sub-agent on the session's own model was never counted live (~8% of a week here); an imported session is re-raised on every pass, so a claude -p run first seen with an empty transcript no longer stays at $0 (~10%). A one-time raise-only catch-up (user_version 5) re-reads ~/.claude/projects. Also: omp install script may redirect to its exact install.redirect URL (#85, repo-links test exempts it), native paste in the terminal.
2026-10-23 16:41:45 +07:00
parent 65a001dad4
commit c8bc4a95a9
54 changed files with 2521 additions and 112 deletions
@@ -15,6 +15,16 @@
 * first, no owner last, groups foldable — `collapsedOwners`); one this user
 * may not change (`canEditLane`) is read only — no menu, no new session, and a
 * session opens its analysis page (`/sessions/<id>`), never a pane.
+ * The user's own GROUPS (`lib/workspaceGroups.ts`, kept per account on the
+ * server like the other preferences) arrange the list under foldable headers —
+ * each group in its order, then "Ungrouped" — inside each owner group when
+ * there are owner groups. A workspace joins a group from its menu, by a drop
+ * on the group's header, by a drag that lands it below a row of that
+ * group, or by Alt+↑/↓ past the group's edge; a header is dragged onto
+ * another to reorder the groups, and its menu renames, moves, folds every
+ * group, adds a new workspace straight into it or deletes it (its
+ * workspaces stay, ungrouped). A folded header still shows the worst state
+ * of its workspaces (needs you, error, running) and marks the selected one.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

@@ -30,7 +40,7 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
-import { ChevronDown, ChevronRight, Plus, Search } from "lucide-react";
+import { ChevronDown, ChevronRight, FolderPlus, MoreHorizontal, Plus, Search } from "lucide-react";
 import { api, type CwdSuggestion, type RunHandle } from "../lib/api";
 import type { Lane } from "../lib/types";
 import { useLanes } from "../hooks/useLanes";
@@ -46,7 +56,31 @@ import {
  writeLaneOrder,
 } from "../lib/laneOrderStorage";
 import { useProjectTreePrefs, writeProjectTreePrefs } from "../lib/projectTreePrefs";
-import { LANE_DRAG_TYPE, WorkspaceRow, isLaneDrag, workspaceName } from "./lanes/WorkspaceRow";
+import {
+  arrangeByGroup,
+  assignGroup,
+  createGroup,
+  deleteGroup,
+  groupOf,
+  moveGroup,
+  moveGroupBefore,
+  pruneWorkspaceGroups,
+  renameGroup,
+  setAllFolded,
+  setGroupFolded,
+  useWorkspaceGroups,
+  type WorkspaceGroup,
+} from "../lib/workspaceGroups";
+import { confirmDialog } from "../lib/confirm";
+import { ContextMenu, MenuItem, MenuSeparator } from "./ContextMenu";
+import {
+  LANE_DRAG_TYPE,
+  WorkspaceRow,
+  isLaneDrag,
+  workspaceDot,
+  workspaceDotLabel,
+  workspaceName,
+} from "./lanes/WorkspaceRow";
 import { WorkspaceSessionList } from "./lanes/WorkspaceSessionList";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./lanes/WorkspaceRowMenu";
 import { UserAvatar } from "./users/UserAvatar";
@@ -98,8 +132,23 @@ export function WorkspaceTree() {
  );
  const [addOpen, setAddOpen] = useState(false);
  const [addPrefill, setAddPrefill] = useState<{ sourceRepo?: string } | null>(null);
+  // "New workspace in this group": the group the added workspace joins.
+  const [addToGroup, setAddToGroup] = useState<string | null>(null);
  const [cwdSuggestions, setCwdSuggestions] = useState<CwdSuggestion[]>([]);
  const [orderTick, setOrderTick] = useState(0);
+  const groups = useWorkspaceGroups();
+  const hasGroups = groups.groups.length > 0;
+  const [renamingGroup, setRenamingGroup] = useState<string | null>(null);
+  const [groupMenu, setGroupMenu] = useState<{
+    group: WorkspaceGroup;
+    x: number;
+    y: number;
+  } | null>(null);
+  // A removed workspace leaves the stored groups (they hold ids only).
+  const laneIdsKey = lanes.map((l) => l.id).join(",");
+  useEffect(() => {
+    if (laneIdsKey) pruneWorkspaceGroups(laneIdsKey.split(",").map(Number));
+  }, [laneIdsKey]);

  // A slot-0 pane starts, ends or learns its session id exactly when a lane's
  // status or session moves, so that is when the live-pane list is re-read;
@@ -126,8 +175,9 @@ export function WorkspaceTree() {
    return () => window.removeEventListener(LIVE_RUNS_EVENT, take);
  }, []);

-  const openAdd = (sourceRepo?: string) => {
+  const openAdd = (sourceRepo?: string, groupId: string | null = null) => {
    setAddPrefill(sourceRepo ? { sourceRepo } : null);
+    setAddToGroup(groupId);
    setAddOpen(true);
    api.run
      .cwds()
@@ -148,8 +198,9 @@ export function WorkspaceTree() {
  const toolFilter =
    tools.length > 1 && prefs.tool && tools.includes(prefs.tool) ? prefs.tool : null;
  const sorted = useMemo(() => {
-    const list = sortByStoredOrder(lanes, order).filter(
-      (l) => !toolFilter || l.tool === toolFilter
+    const list = arrangeByGroup(
+      sortByStoredOrder(lanes, order).filter((l) => !toolFilter || l.tool === toolFilter),
+      groups
    );
    if (!grouped) return list;
    // Stable: each owner's workspaces keep the stored order inside the group.
@@ -157,7 +208,7 @@ export function WorkspaceTree() {
    return [...list].sort(
      (a, b) => rank(a) - rank(b) || ownerShown(a).localeCompare(ownerShown(b))
    );
-  }, [lanes, order, toolFilter, grouped, meId]);
+  }, [lanes, order, toolFilter, grouped, meId, groups]);
  const q = query.trim().toLowerCase();
  const nameHit = (l: Lane) =>
    workspaceName(l).toLowerCase().includes(q) || l.cwd.toLowerCase().includes(q);
@@ -190,6 +241,26 @@ export function WorkspaceTree() {
    setOrderTick((n) => n + 1);
  };

+  // Alt+↑/↓. Past the edge of its group the workspace stays where it is on
+  // screen and joins the next group instead (the arrangement would otherwise
+  // put it straight back): last of the group above, first of the one below —
+  // opened if folded, so the focused row stays shown. The shown order is
+  // written as it stands, so the store agrees. Never across an owner's section.
+  const nudge = (from: number, to: number) => {
+    const lane = sorted[from];
+    const next = sorted[to];
+    if (lane && next && hasGroups && ownerKey(lane) === ownerKey(next)) {
+      const target = groupOf(groups, next.id);
+      if ((target?.id ?? null) !== (groupOf(groups, lane.id)?.id ?? null)) {
+        assignGroup(lane.id, target?.id ?? null);
+        if (target?.folded) setGroupFolded(target.id, false);
+        reorder((ids) => [...ids]);
+        return;
+      }
+    }
+    reorder((ids) => moveLane(ids, from, to));
+  };
+
  // A row only starts a drag; the whole section takes the drop, so a gap — a
  // workspace's session list, the space above or below a row — lands too.
  // `dropAt` is the insertion point in `sorted`, drawn as a line.
@@ -223,11 +294,74 @@ export function WorkspaceTree() {
      const raw = e.dataTransfer.getData(LANE_DRAG_TYPE);
      // Number("") is 0: an empty payload must not move the first row.
      const from = raw === "" ? NaN : Number(raw);
+      if (!Number.isInteger(from)) return;
+      const lane = sorted[from];
+      // Dropped on a group's header: into that group, at its top.
+      const header = (e.target as HTMLElement).closest<HTMLElement>("[data-group-drop]");
+      if (header && lane) {
+        const gid = header.dataset.groupDrop || null;
+        assignGroup(lane.id, gid);
+        const first = sorted.findIndex(
+          (l) => (groups.of[l.id] ?? null) === gid && l.id !== lane.id
+        );
+        if (first >= 0) reorder((ids) => moveBefore(ids, from, first));
+        return;
+      }
      const before = dropIndexAt(e.clientY);
-      if (Number.isInteger(from)) reorder((ids) => moveBefore(ids, from, before));
+      // Elsewhere it joins the group of the row it now sits under (the line
+      // drawn above a header closes the section before it).
+      if (lane && hasGroups) {
+        const rest = sorted.filter((l) => l.id !== lane.id);
+        const at = sorted.slice(0, before).filter((l) => l.id !== lane.id).length;
+        const neighbour = rest[at - 1] ?? rest[0];
+        if (neighbour) assignGroup(lane.id, groups.of[neighbour.id] ?? null);
+      }
+      reorder((ids) => moveBefore(ids, from, before));
    },
  };

+  // A group no workspace is in yet still shows (to be renamed, or dropped on),
+  // just above the ungrouped ones; a search hides it.
+  const emptyGroups = q
+    ? []
+    : groups.groups.filter((g) => !sorted.some((l) => groups.of[l.id] === g.id));
+  const firstUngrouped = hasGroups ? sorted.findIndex((l) => !groupOf(groups, l.id)) : -1;
+  const groupHeader = (g: WorkspaceGroup | null, members: Lane[], first: boolean) => (
+    <GroupHeader
+      key={g?.id ?? "none"}
+      group={g}
+      count={members.length}
+      // What a folded group hides: the most urgent of its workspaces, and
+      // whether the open one is among them.
+      worst={worstOf(members)}
+      holdsSelected={members.some((l) => l.id === selected.lane)}
+      onGroupDrop={(dragged) => moveGroupBefore(dragged, g?.id ?? null)}
+      folded={!!g?.folded && !q}
+      renaming={!!g && renamingGroup === g.id}
+      first={first}
+      onToggle={() => g && setGroupFolded(g.id, !g.folded)}
+      onMenu={(x, y) => g && setGroupMenu({ group: g, x, y })}
+      onRenameEnd={(name) => {
+        setRenamingGroup(null);
+        if (g && name !== null) renameGroup(g.id, name);
+      }}
+    />
+  );
+
+  const newGroup = (laneIds: number[] = []) => {
+    const id = createGroup(t("tree.groupDefaultName"), laneIds);
+    setRenamingGroup(id);
+  };
+  const removeGroup = async (g: WorkspaceGroup) => {
+    const ok = await confirmDialog({
+      title: t("tree.groupDelete"),
+      message: t("tree.groupDeleteConfirm", { name: g.name }),
+      confirmLabel: t("tree.groupDelete"),
+    });
+    if (!ok) return;
+    deleteGroup(g.id);
+  };
+
  const rename = async (lane: Lane, title: string | null) => {
    setRenamingId(null);
    if (title === null || title === (lane.title || "")) return;
@@ -304,6 +438,16 @@ export function WorkspaceTree() {
        >
          <Search className="h-3.5 w-3.5" />
        </button>
+        <button
+          type="button"
+          data-testid="workspace-tree-new-group"
+          onClick={() => newGroup()}
+          aria-label={t("tree.newGroup")}
+          title={t("tree.newGroup")}
+          className={headBtn}
+        >
+          <FolderPlus className="h-3.5 w-3.5" />
+        </button>
        <button
          type="button"
          data-testid="workspace-tree-add"
@@ -347,6 +491,16 @@ export function WorkspaceTree() {
                : ownerShown(lane) || `#${lane.owner_id}`;
          const groupStart = grouped && (i === 0 || ownerKey(sorted[i - 1] ?? lane) !== owner);
          const groupShown = sorted.some((l) => ownerKey(l) === owner && visible(l));
+          // The user's own group, inside the owner's.
+          const ug = groupOf(groups, lane.id);
+          const ugKey = ug?.id ?? "";
+          const sameSection = (l: Lane) =>
+            ownerKey(l) === owner && (groupOf(groups, l.id)?.id ?? "") === ugKey;
+          const prev = sorted[i - 1];
+          const sectionStart = hasGroups && (groupStart || !prev || !sameSection(prev));
+          const sectionShown = sorted.some((l) => sameSection(l) && visible(l));
+          const sectionFolded = !!ug?.folded && !q;
+          const hiddenRow = folded || sectionFolded;
          return (
            <div key={lane.id} className="relative">
              {groupStart && groupShown && (
@@ -381,8 +535,13 @@ export function WorkspaceTree() {
                  </span>
                </button>
              )}
+              {i === firstUngrouped && emptyGroups.map((g) => groupHeader(g, [], false))}
+              {sectionStart &&
+                sectionShown &&
+                !folded &&
+                groupHeader(ug, sorted.filter(sameSection), i === 0 || !!groupStart)}
              {dropAt === i && <DropLine />}
-              {visible(lane) && !folded && (
+              {visible(lane) && !hiddenRow && (
                <WorkspaceRow
                  lane={lane}
                  index={i}
@@ -398,13 +557,13 @@ export function WorkspaceTree() {
                  }}
                  onToggle={() => setExpanded(lane.id, !expanded(lane.id))}
                  onNewSession={() => select(lane.id)}
-                  onReorder={(from, to) => reorder((ids) => moveLane(ids, from, to))}
+                  onReorder={nudge}
                  onMenu={(x, y) => setMenu({ lane, x, y })}
                  onRenameStart={() => setRenamingId(lane.id)}
                  onRenameEnd={(title) => void rename(lane, title)}
                />
              )}
-              {expanded(lane.id) && !folded && (
+              {expanded(lane.id) && !hiddenRow && (
                <WorkspaceSessionList
                  lane={lane}
                  liveRuns={liveRuns}
@@ -420,6 +579,8 @@ export function WorkspaceTree() {
            </div>
          );
        })}
+        {firstUngrouped === -1 &&
+          emptyGroups.map((g, k) => groupHeader(g, [], k === 0 && sorted.length === 0))}
        {dropAt === sorted.length && (
          <div className="relative">
            <DropLine />
@@ -440,8 +601,92 @@ export function WorkspaceTree() {
          y={menu.y}
          onClose={() => setMenu(null)}
          onAction={(a) => onMenuAction(menu.lane, a)}
+          groups={groups.groups}
+          groupId={groups.of[menu.lane.id] ?? null}
+          onGroup={(target) => {
+            const id = menu.lane.id;
+            setMenu(null);
+            if (target === "new") newGroup([id]);
+            else assignGroup(id, target);
+          }}
        />
      )}
+      {groupMenu && (
+        <ContextMenu
+          x={groupMenu.x}
+          y={groupMenu.y}
+          onClose={() => setGroupMenu(null)}
+          testId={`workspace-group-menu-${groupMenu.group.id}`}
+        >
+          <MenuItem
+            onSelect={() => {
+              setRenamingGroup(groupMenu.group.id);
+              setGroupMenu(null);
+            }}
+          >
+            {t("tree.groupRename")}
+          </MenuItem>
+          <MenuItem
+            disabled={groups.groups[0]?.id === groupMenu.group.id}
+            onSelect={() => {
+              moveGroup(groupMenu.group.id, -1);
+              setGroupMenu(null);
+            }}
+          >
+            {t("tree.groupMoveUp")}
+          </MenuItem>
+          <MenuItem
+            disabled={groups.groups[groups.groups.length - 1]?.id === groupMenu.group.id}
+            onSelect={() => {
+              moveGroup(groupMenu.group.id, 1);
+              setGroupMenu(null);
+            }}
+          >
+            {t("tree.groupMoveDown")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            testId="workspace-group-add"
+            onSelect={() => {
+              const g = groupMenu.group;
+              setGroupMenu(null);
+              openAdd(undefined, g.id);
+            }}
+          >
+            {t("tree.groupAddWorkspace")}
+          </MenuItem>
+          <MenuItem
+            testId="workspace-group-fold-all"
+            onSelect={() => {
+              setGroupMenu(null);
+              setAllFolded(true);
+            }}
+          >
+            {t("tree.groupFoldAll")}
+          </MenuItem>
+          <MenuItem
+            testId="workspace-group-unfold-all"
+            onSelect={() => {
+              setGroupMenu(null);
+              setAllFolded(false);
+            }}
+          >
+            {t("tree.groupUnfoldAll")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            danger
+            testId="workspace-group-delete"
+            onSelect={() => {
+              const g = groupMenu.group;
+              setGroupMenu(null);
+              void removeGroup(g);
+            }}
+          >
+            {t("tree.groupDelete")}
+          </MenuItem>
+        </ContextMenu>
+      )}
      <Suspense fallback={null}>
        {destructive && (
          <DestructiveLaneModal
@@ -460,8 +705,10 @@ export function WorkspaceTree() {
            onClose={() => {
              setAddOpen(false);
              setAddPrefill(null);
+              setAddToGroup(null);
            }}
            onAdded={(lane) => {
+              if (addToGroup) assignGroup(lane.id, addToGroup);
              void refreshLanes();
              select(lane.id);
            }}
@@ -472,9 +719,167 @@ export function WorkspaceTree() {
  );
 }

+/** What a group header's drag carries: the group's id. */
+const GROUP_DRAG_TYPE = "application/x-agenthub-workspace-group";
+const isGroupDrag = (e: { dataTransfer: DataTransfer | null }) =>
+  !!e.dataTransfer?.types?.includes(GROUP_DRAG_TYPE);
+
+// needsYou outranks an error, an error a running agent; idle/active say nothing.
+const URGENCY: Record<string, number> = { needsYou: 3, error: 2, running: 1 };
+/** The most urgent of `lanes` by its dot, or null when all are at rest. */
+function worstOf(lanes: Lane[]): Lane | null {
+  let best: Lane | null = null;
+  let top = 0;
+  for (const l of lanes) {
+    const u = URGENCY[workspaceDotLabel(l)] ?? 0;
+    if (u > top) [best, top] = [l, u];
+  }
+  return best;
+}
+
 /** A workspace's owner group: its user id, or "none". */
 const ownerKey = (l: Lane) => (l.owner_id == null ? "none" : String(l.owner_id));

+/**
+ * A section's header: a user group (foldable, menu, inline rename) or, with
+ * `group` null, "Ungrouped". Both take a dropped workspace (`data-group-drop`).
+ */
+function GroupHeader({
+  group,
+  count,
+  worst,
+  holdsSelected,
+  folded,
+  renaming,
+  first,
+  onToggle,
+  onMenu,
+  onRenameEnd,
+  onGroupDrop,
+}: {
+  group: WorkspaceGroup | null;
+  count: number;
+  /** The most urgent workspace inside, drawn as its dot while folded. */
+  worst: Lane | null;
+  /** The open workspace is in this group (marked while folded). */
+  holdsSelected: boolean;
+  folded: boolean;
+  renaming: boolean;
+  first: boolean;
+  onToggle: () => void;
+  onMenu: (x: number, y: number) => void;
+  /** The typed name, or null when the edit was cancelled. */
+  onRenameEnd: (name: string | null) => void;
+  /** A group header (by id) dropped here: it goes before this group, or last on "Ungrouped". */
+  onGroupDrop: (draggedId: string) => void;
+}) {
+  const { t } = useTranslation("lanes");
+  const [draft, setDraft] = useState(group?.name ?? "");
+  const [dropOver, setDropOver] = useState(false);
+  useEffect(() => {
+    if (renaming) setDraft(group?.name ?? "");
+  }, [renaming, group?.name]);
+  const label = group ? group.name : t("tree.ungrouped");
+  return (
+    <div
+      data-group-drop={group?.id ?? ""}
+      data-testid={`workspace-group-${group?.id ?? "none"}`}
+      onContextMenu={(e) => {
+        if (!group) return;
+        e.preventDefault();
+        onMenu(e.clientX, e.clientY);
+      }}
+      // A group (never "Ungrouped") is dragged by its header to reorder.
+      draggable={!!group && !renaming}
+      onDragStart={(e) => {
+        if (!group) return;
+        e.dataTransfer.setData(GROUP_DRAG_TYPE, group.id);
+        e.dataTransfer.effectAllowed = "move";
+      }}
+      onDragOver={(e) => {
+        if (!isGroupDrag(e)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setDropOver(true);
+      }}
+      onDragLeave={() => setDropOver(false)}
+      onDrop={(e) => {
+        setDropOver(false);
+        if (!isGroupDrag(e)) return;
+        e.preventDefault();
+        const id = e.dataTransfer.getData(GROUP_DRAG_TYPE);
+        if (id) onGroupDrop(id);
+      }}
+      className={`group/gh flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-semibold text-fg-muted ${first ? "" : "mt-1.5"} ${dropOver ? "shadow-[inset_0_2px_0_rgb(var(--accent))]" : ""}`}
+    >
+      {renaming && group ? (
+        <input
+          autoFocus
+          value={draft}
+          maxLength={60}
+          aria-label={t("tree.groupNameLabel")}
+          onChange={(e) => setDraft(e.target.value)}
+          onFocus={(e) => e.currentTarget.select()}
+          onBlur={() => onRenameEnd(draft)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onRenameEnd(draft);
+            else if (e.key === "Escape") onRenameEnd(null);
+          }}
+          className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-1 py-0.5 text-[11px] font-normal text-fg-primary"
+        />
+      ) : (
+        <button
+          type="button"
+          aria-expanded={group ? !folded : undefined}
+          disabled={!group}
+          title={group ? t("tree.groupToggle", { name: label }) : undefined}
+          onClick={onToggle}
+          className="flex min-w-0 flex-1 items-center gap-1 text-left hover:text-fg-primary disabled:hover:text-fg-muted"
+        >
+          {group ? (
+            folded ? (
+              <ChevronRight className="h-3 w-3 shrink-0" />
+            ) : (
+              <ChevronDown className="h-3 w-3 shrink-0" />
+            )
+          ) : (
+            <span className="w-3 shrink-0" />
+          )}
+          <span
+            className={`truncate uppercase tracking-wide ${folded && holdsSelected ? "text-accent" : ""}`}
+          >
+            {label}
+          </span>
+          <span className="ml-1 shrink-0 font-normal tabular-nums">{count}</span>
+          {folded && worst && (
+            <span
+              data-testid={`workspace-group-state-${group?.id ?? "none"}`}
+              className="ml-1 flex shrink-0 items-center"
+            >
+              <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${workspaceDot(worst)}`} />
+              <span className="sr-only">{t(`row.state.${workspaceDotLabel(worst)}`)}</span>
+            </span>
+          )}
+        </button>
+      )}
+      {group && !renaming && (
+        <button
+          type="button"
+          aria-label={t("tree.groupMenu")}
+          title={t("tree.groupMenu")}
+          onClick={(e) => {
+            const r = e.currentTarget.getBoundingClientRect();
+            onMenu(r.left, r.bottom);
+          }}
+          className="rounded p-0.5 opacity-0 hover:bg-surface-4 hover:text-fg-primary focus:opacity-100 group-hover/gh:opacity-100"
+        >
+          <MoreHorizontal className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
 /** Where a dragged workspace would land: a line on its parent's top edge. */
 function DropLine() {
  return (
@@ -6,7 +6,9 @@
 * workspace's OWN sessions only, a session's state dot, rename and archive,
 * selection
 * by URL, Alt+arrow reordering kept in localStorage, double-click rename, the
- * search, the row menu's items by kind and tool, and the status dot.
+ * search, the row menu's items by kind and tool, the status dot, and the
+ * user's own groups (menu, Alt+arrow past a group's edge, a folded group's
+ * state dot, dragging a header to reorder, fold all).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

@@ -91,6 +93,20 @@ vi.mock("../../lib/api", async (importOriginal) => {
  };
 });

+// The Add modal reports the workspace it made (id 2 here); the tree does the rest.
+vi.mock("../lanes/AddLaneModal", () => ({
+  AddLaneModal: ({ onAdded, onClose }: { onAdded: (l: Lane) => void; onClose: () => void }) => (
+    <button
+      type="button"
+      data-testid="stub-add-lane"
+      onClick={() => {
+        onAdded(lane(2, "/r/sub"));
+        onClose();
+      }}
+    />
+  ),
+}));
+
 import { api } from "../../lib/api";
 import { WorkspaceTree } from "../WorkspaceTree";
 import { workspaceDot } from "../lanes/WorkspaceRow";
@@ -576,6 +592,185 @@ describe("WorkspaceTree", () => {
    menu = screen.getByTestId("workspace-row-menu-3");
    expect(within(menu).getByText("Reset worktree…")).toBeInTheDocument();
  });
+
+  it("groups workspaces under named, foldable headers, ungrouped last", async () => {
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    // No group yet: no headers at all.
+    expect(screen.queryByTestId("workspace-group-none")).toBeNull();
+
+    // A new group from the row menu holds that workspace and asks for a name.
+    await user.click(screen.getByTestId("workspace-menu-3"));
+    await user.click(screen.getByTestId("workspace-move-group-new"));
+    const name = await screen.findByRole("textbox", { name: "Group name" });
+    await user.clear(name);
+    await user.type(name, "Backend{Enter}");
+    const stored = JSON.parse(localStorage.getItem("agenthub.workspace.groups")!);
+    expect(stored.groups).toEqual([expect.objectContaining({ name: "Backend" })]);
+    const gid = stored.groups[0].id as string;
+    expect(stored.of).toEqual({ 3: gid });
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-1", "workspace-row-2"])
+    );
+    expect(screen.getByTestId(`workspace-group-${gid}`)).toHaveTextContent("Backend1");
+    expect(screen.getByTestId("workspace-group-none")).toHaveTextContent("Ungrouped2");
+
+    // Another workspace joins it from its menu.
+    await user.click(screen.getByTestId("workspace-menu-2"));
+    await user.click(screen.getByTestId(`workspace-move-group-${gid}`));
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-3", "workspace-row-1"])
+    );
+
+    // Folding hides its rows; the ungrouped one stays.
+    await user.click(
+      within(screen.getByTestId(`workspace-group-${gid}`)).getByRole("button", {
+        expanded: true,
+      })
+    );
+    expect(rowIds()).toEqual(["workspace-row-1"]);
+
+    // Deleting the group only ungroups: every workspace is still listed.
+    fireEvent.contextMenu(screen.getByTestId(`workspace-group-${gid}`));
+    await user.click(screen.getByTestId("workspace-group-delete"));
+    await waitFor(() => expect(rowIds()).toHaveLength(3));
+    expect(screen.queryByTestId("workspace-group-none")).toBeNull();
+    expect(api.lanes.update).not.toHaveBeenCalled();
+  });
+
+  it("shows a new, empty group to be named, above the ungrouped workspaces", async () => {
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    await user.click(screen.getByTestId("workspace-tree-new-group"));
+    const name = await screen.findByRole("textbox", { name: "Group name" });
+    await user.clear(name);
+    await user.type(name, "Later{Enter}");
+    const gid = JSON.parse(localStorage.getItem("agenthub.workspace.groups")!).groups[0].id;
+    const header = screen.getByTestId(`workspace-group-${gid}`);
+    expect(header).toHaveTextContent("Later0");
+    expect(
+      header.compareDocumentPosition(screen.getByTestId("workspace-group-none")) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+    expect(rowIds()).toHaveLength(3);
+  });
+});
+
+describe("WorkspaceTree groups", () => {
+  // Groups A = [1], B = [3]; 2 ungrouped. Stored order 1, 2, 3.
+  const seed = (extra: { folded?: boolean } = {}) =>
+    localStorage.setItem(
+      "agenthub.workspace.groups",
+      JSON.stringify({
+        groups: [
+          { id: "ga", name: "Alpha", ...extra },
+          { id: "gb", name: "Beta" },
+        ],
+        of: { 1: "ga", 3: "gb" },
+      })
+    );
+  const stored = () => JSON.parse(localStorage.getItem("agenthub.workspace.groups")!);
+
+  it("moves a workspace into the next group with Alt+arrow past its edge", async () => {
+    seed();
+    const user = userEvent.setup();
+    renderTree();
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-3", "workspace-row-2"])
+    );
+    // The last of Alpha, Alt+↓: the first of Beta.
+    screen.getByTestId("workspace-open-1").focus();
+    await user.keyboard("{Alt>}{ArrowDown}{/Alt}");
+    expect(stored().of).toEqual({ 1: "gb", 3: "gb" });
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-3", "workspace-row-2"])
+    );
+    expect(screen.getByTestId("workspace-group-gb")).toHaveTextContent("Beta2");
+    // The last of Beta, Alt+↓: out into the ungrouped ones.
+    screen.getByTestId("workspace-open-3").focus();
+    await user.keyboard("{Alt>}{ArrowDown}{/Alt}");
+    expect(stored().of).toEqual({ 1: "gb" });
+    expect(api.lanes.update).not.toHaveBeenCalled();
+  });
+
+  it("shows a folded group's most urgent state and marks the open workspace", async () => {
+    lanes[0] = lane(1, "/r", { title: "Repo", status: "running" });
+    seed({ folded: true });
+    renderTree("/workspace?lane=1");
+    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-2"]));
+    const state = screen.getByTestId("workspace-group-state-ga");
+    expect(state).toHaveTextContent("running");
+    expect(within(screen.getByTestId("workspace-group-ga")).getByText("Alpha")).toHaveClass(
+      "text-accent"
+    );
+    // An open group shows its rows instead.
+    expect(screen.queryByTestId("workspace-group-state-gb")).toBeNull();
+  });
+
+  it("reorders groups by dragging a header onto another, last onto Ungrouped", async () => {
+    seed();
+    renderTree();
+    await screen.findByTestId("workspace-group-gb");
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      get types() {
+        return [...data.keys()];
+      },
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      dropEffect: "move",
+      effectAllowed: "move",
+    };
+    fireEvent.dragStart(screen.getByTestId("workspace-group-gb"), { dataTransfer });
+    fireEvent.dragOver(screen.getByTestId("workspace-group-ga"), { dataTransfer });
+    fireEvent.drop(screen.getByTestId("workspace-group-ga"), { dataTransfer });
+    expect(stored().groups.map((g: { id: string }) => g.id)).toEqual(["gb", "ga"]);
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-1", "workspace-row-2"])
+    );
+    data.clear();
+    fireEvent.dragStart(screen.getByTestId("workspace-group-gb"), { dataTransfer });
+    fireEvent.drop(screen.getByTestId("workspace-group-none"), { dataTransfer });
+    expect(stored().groups.map((g: { id: string }) => g.id)).toEqual(["ga", "gb"]);
+    // A header drag never moves a workspace.
+    expect(stored().of).toEqual({ 1: "ga", 3: "gb" });
+  });
+
+  it("puts a workspace added from a group's menu into that group", async () => {
+    seed();
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-group-gb");
+    fireEvent.contextMenu(screen.getByTestId("workspace-group-gb"));
+    await user.click(screen.getByTestId("workspace-group-add"));
+    await user.click(await screen.findByTestId("stub-add-lane"));
+    expect(stored().of).toEqual({ 1: "ga", 2: "gb", 3: "gb" });
+    // The header's own Add belongs to no group: what it adds stays where it is.
+    act(() =>
+      localStorage.setItem(
+        "agenthub.workspace.groups",
+        JSON.stringify({ ...stored(), of: { 1: "ga" } })
+      )
+    );
+    await user.click(screen.getByTestId("workspace-tree-add"));
+    await user.click(await screen.findByTestId("stub-add-lane"));
+    expect(stored().of).toEqual({ 1: "ga" });
+  });
+
+  it("folds and unfolds every group from a header's menu", async () => {
+    seed();
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-group-ga");
+    fireEvent.contextMenu(screen.getByTestId("workspace-group-ga"));
+    await user.click(screen.getByTestId("workspace-group-fold-all"));
+    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"]));
+    fireEvent.contextMenu(screen.getByTestId("workspace-group-gb"));
+    await user.click(screen.getByTestId("workspace-group-unfold-all"));
+    await waitFor(() => expect(rowIds()).toHaveLength(3));
+  });
 });

 describe("workspaceDot", () => {
@@ -85,6 +85,7 @@ import {
  type FsTrashItem,
  type FsHome,
  type FsPlace,
+  type GitSource,
  isHomePlace,
 } from "../../lib/api";
 import type { Lane } from "../../lib/types";
@@ -283,7 +284,7 @@ export function FileBrowser({
  /** A home to open on (`me`, or another user's for an admin). */
  initialHome?: string | null;
  session?: string | null;
-  source?: number | null;
+  source?: GitSource | null;
  initialPath?: string;
  /** Called after anything changed files, so a tree elsewhere can re-read. */
  onChanged?: () => void;
@@ -1882,7 +1883,7 @@ export function FileExplorer({
  onClose: () => void;
  laneId: number;
  session?: string | null;
-  source?: number | null;
+  source?: GitSource | null;
  initialPath?: string;
  onChanged?: () => void;
 }) {
@@ -103,7 +103,7 @@ import {
  Trash2,
  UnfoldVertical,
 } from "lucide-react";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, type GitSource } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
 import { pasteToLane } from "../../lib/panePaste";
 import { readMarkdownPreview } from "../../lib/markdownView";
@@ -827,7 +827,7 @@ export function LaneChangesPanel({
  session?: string;
  /** Show and act on that extra folder's repo instead (`lane_sources` id);
   *  wins over `session`, and is keyed on like it. */
-  source?: number;
+  source?: GitSource;
  /** Open the Add-lane flow for a sibling worktree; see `LaneGitBar`. */
  onNewLane?: (branch?: string) => void;
  /** The panel has the whole width: the file tree becomes a sidebar and a
@@ -15,7 +15,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, type GitSource } from "../../lib/api";
 import {
  applyChoices,
  parseConflicts,
@@ -47,7 +47,7 @@ export function LaneConflictView({
  /** Work in that session's own worktree (see `gitTarget`). */
  session?: string;
  /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
-  source?: number;
+  source?: GitSource;
  path: string;
  /** The file left the conflict (resolved, or a whole side taken). */
  onResolved: () => void;
@@ -38,7 +38,7 @@ import {
  Trash2,
  Upload,
 } from "lucide-react";
-import { api, gitTarget, type GitAuthNeeded } from "../../lib/api";
+import { api, gitTarget, type GitSource, type GitAuthNeeded } from "../../lib/api";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
@@ -98,7 +98,7 @@ export function LaneGitBar({
  /** Work in that session's own worktree (see `gitTarget`). */
  session?: string;
  /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
-  source?: number;
+  source?: GitSource;
  git: LaneGitFacts;
  /** Rendered at the start of the action row: the header's branch line, so
   *  the facts and the buttons that act on them read as one row. */
@@ -19,7 +19,7 @@ import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { GitBranch } from "lucide-react";
 import { LaneGitBar } from "./LaneGitBar";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, type GitSource } from "../../lib/api";
 import { keepIfSame } from "../../lib/keepIfSame";
 import type { LaneGitFacts, LaneGitFile } from "../../lib/types";

@@ -37,8 +37,8 @@ export function useLaneGitFacts(
  laneId: number,
  /** Read that session's own worktree instead (`?session=`). */
  session?: string,
-  /** Read that extra folder's repo instead (`?source=`). */
-  source?: number
+  /** Read that extra folder's repo (`?source=`, a number) or that inner repo (`?repo=`, a string) instead. */
+  source?: GitSource
 ): [LaneGitFacts | null, () => void] {
  const [facts, setFacts] = useState<LaneGitFacts | null>(null);
  // Bumped by the git action bar: a commit or a pull changes every fact on
@@ -329,7 +329,7 @@ export function LaneGitRailCounts({
 }: {
  laneId: number;
  session?: string;
-  source?: number;
+  source?: GitSource;
  /** Opens the Changes panel from the file list's "… more files". */
  onShowAll?: () => void;
 }) {
@@ -349,7 +349,7 @@ export function LaneGitHeader({
  /** Work in that session's own worktree (see `gitTarget`). */
  session?: string;
  /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
-  source?: number;
+  source?: GitSource;
  git: LaneGitFacts | null;
  /** Called after a git bar action: the facts AND the panel's diff moved. */
  onChanged: () => void;
@@ -3,7 +3,9 @@
 * the pointer (right-click) or under the row's `⋯` button. Every item is an
 * existing call: Rename (the row's inline field), 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
+ * managed lane — plus Move to group (the sidebar's own groups,
+ * `lib/workspaceGroups.ts`: one of them, a new one, or out of its group). The
+ * server's guards are the real ones; the menu only hides
 * what the lane's kind or tool makes meaningless. The shell (position,
 * Escape / outside-click close) is `ContextMenu`.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -11,7 +13,9 @@

 import { useTranslation } from "react-i18next";
 import type { Lane } from "../../lib/types";
+import { Check } from "lucide-react";
 import { ContextMenu, MenuItem, MenuSeparator } from "../ContextMenu";
+import type { WorkspaceGroup } from "../../lib/workspaceGroups";
 import { copyText } from "../../lib/clipboard";

 export type WorkspaceMenuAction = "rename" | "new-here" | "reset" | "remove";
@@ -22,6 +26,9 @@ export function WorkspaceRowMenu({
  y,
  onClose,
  onAction,
+  groups = [],
+  groupId = null,
+  onGroup,
 }: {
  lane: Lane;
  x: number;
@@ -29,6 +36,11 @@ export function WorkspaceRowMenu({
  onClose: () => void;
  /** Items the tree itself carries out (rename field, modals). */
  onAction: (action: WorkspaceMenuAction) => void;
+  /** The sidebar's groups and the one this workspace is in. */
+  groups?: WorkspaceGroup[];
+  groupId?: string | null;
+  /** Move it: to a group's id, out of its group (null), or into a new group ("new"). */
+  onGroup?: (target: string | null | "new") => void;
 }) {
  const { t } = useTranslation("lanes");
  return (
@@ -43,6 +55,35 @@ export function WorkspaceRowMenu({
      >
        {t("menu.copyPath")}
      </MenuItem>
+      {onGroup && (
+        <>
+          <MenuSeparator />
+          <div className="px-2 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-wide text-fg-muted">
+            {t("menu.moveToGroup")}
+          </div>
+          {groups.map((g) => (
+            <MenuItem
+              key={g.id}
+              testId={`workspace-move-group-${g.id}`}
+              disabled={g.id === groupId}
+              onSelect={() => onGroup(g.id)}
+            >
+              <Check className={`h-3 w-3 shrink-0 ${g.id === groupId ? "" : "invisible"}`} />
+              <span className="truncate">{g.name}</span>
+            </MenuItem>
+          ))}
+          <MenuItem testId="workspace-move-group-new" onSelect={() => onGroup("new")}>
+            <span className="w-3 shrink-0" />
+            {t("menu.newGroupWith")}
+          </MenuItem>
+          {groupId && (
+            <MenuItem testId="workspace-move-group-none" onSelect={() => onGroup(null)}>
+              <span className="w-3 shrink-0" />
+              {t("menu.removeFromGroup")}
+            </MenuItem>
+          )}
+        </>
+      )}
      <MenuSeparator />
      {lane.kind === "managed" && (
        <MenuItem danger onSelect={() => onAction("reset")}>
@@ -18,7 +18,10 @@
 * (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
 * local terminal does on a drop — as `@` mentions in a `claude` pane, which
 * reads them when the prompt is sent — an image as its bare path, which claude
- * shows as `[Image #n]` like a native drop; a browser on the dashboard's own
+ * shows as `[Image #n]` like a native drop — except a PASTED image in a
+ * `claude` pane of a local-mode dashboard opened on its own machine, which is
+ * sent as ^V so `claude` reads the desktop clipboard itself, uploading nothing
+ * (`lib/nativePaste.ts`, a Settings switch); a browser on the dashboard's own
 * machine pastes a file manager's files (dropped, or copied: `file://` text)
 * by their own paths instead, uploading nothing. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
 * `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
@@ -75,6 +78,8 @@ import {
  sameFilesHere,
 } from "../../lib/promptAttach";
 import { attachImeInput } from "../../lib/imeInput";
+import { readNativePaste } from "../../lib/nativePaste";
+import { usePermissions } from "../AuthGate";
 import { TERMINAL_FONTS, readTerminalFont } from "../../lib/terminalFont";
 import { FONT_SIZE_EVENT, readTerminalFontSize } from "../../lib/fontSize";

@@ -239,6 +244,7 @@ export const TerminalView = memo(function TerminalView({

  // Ctrl+V was pressed and its paste has not arrived yet (see the key handler).
  const ctrlVRef = useRef(false);
+  const { local: localMode } = usePermissions();

  const onDrop = (e: DragEvent) => {
    if (hasText(e)) {
@@ -279,6 +285,20 @@ export const TerminalView = memo(function TerminalView({
    if (files.length === 0 && (!ctrlV || e.clipboardData?.getData("text/plain"))) return;
    e.preventDefault();
    e.stopPropagation();
+    // On the dashboard's own machine the browser's clipboard IS the pane's:
+    // `claude` reads a pasted image itself on ^V, as in a native terminal —
+    // nothing uploaded (lib/nativePaste.ts; off for an SSH tunnel's browser).
+    const nativeImage =
+      tool === "claude" &&
+      localMode &&
+      isLocalBrowser() &&
+      readNativePaste() &&
+      files.length > 0 &&
+      files.every((f) => f.type.startsWith("image/"));
+    if (nativeImage) {
+      termRef.current?.input("\x16", true);
+      return;
+    }
    if (files.length > 0) void attachFiles(files, localCandidates(e.clipboardData, files));
    else termRef.current?.input("\x16", true);
  };
@@ -590,6 +590,37 @@ describe("TerminalView", () => {
    expect(dropFileMock).toHaveBeenCalledWith(img, "r1");
  });

+  it("hands a local claude pane's pasted image to claude as ^V, uploading nothing", () => {
+    dropFileMock.mockReset();
+    inputMock.mockClear();
+    pasteMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    const img = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+    fireEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [img], getData: () => "" },
+    });
+    expect(inputMock).toHaveBeenCalledWith("\x16", true);
+    expect(dropFileMock).not.toHaveBeenCalled();
+    expect(pasteMock).not.toHaveBeenCalled();
+  });
+
+  it("uploads a claude pane's pasted image once native paste is turned off", async () => {
+    localStorage.setItem("agenthub.terminal.nativePaste", "off");
+    dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-image.png" });
+    inputMock.mockClear();
+    try {
+      render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+      const img = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+      fireEvent.paste(screen.getByTestId("terminal-view"), {
+        clipboardData: { files: [img], getData: () => "" },
+      });
+      await waitFor(() => expect(dropFileMock).toHaveBeenCalledWith(img, "r1"));
+      expect(inputMock).not.toHaveBeenCalledWith("\x16", true);
+    } finally {
+      localStorage.removeItem("agenthub.terminal.nativePaste");
+    }
+  });
+
  // Ctrl+V is how claude pastes an image; xterm would send ^V, and claude then
  // reads the SERVER's clipboard, not the browser's. Text on the clipboard is
  // pasted like any browser paste: sending ^V for it pasted nothing.
@@ -4,7 +4,9 @@
 * one card holds one subject: **Text & fonts** (`#fonts`) — the interface
 * language (`#language`), the text size (`lib/fontSize.ts`, `#text-size`,
 * issue #79), the terminal font and its size (`lib/terminalFont.ts`,
- * `#terminal-font`, with a preview line); **Sessions** (`#sessions-view`) —
+ * `#terminal-font`, with a preview line), and — local mode only — whether a
+ * pasted image reaches a `claude` pane natively (`lib/nativePaste.ts`,
+ * `#native-paste`, this browser only); **Sessions** (`#sessions-view`) —
 * the per-user Chat UI default (`ChatUiSettings`, `#chat-ui`) and whether the
 * session view's tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
 * `#workspace-tabs`), and whether a Markdown file opens as Preview (the
@@ -39,6 +41,8 @@ import {
 } from "../../lib/terminalFont";
 import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
 import { readMarkdownPreview, writeMarkdownPreview } from "../../lib/markdownView";
+import { readNativePaste, writeNativePaste } from "../../lib/nativePaste";
+import { usePermissions } from "../AuthGate";
 import {
  TERMINAL_FONT_SIZES,
  UI_FONT_SIZES,
@@ -100,6 +104,8 @@ export function AppearanceSettings() {
  const [uiSize, setUiSize] = useState(readUiFontSize);
  const [allTabs, setAllTabs] = useState(readAllTabs);
  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
+  const [nativePaste, setNativePaste] = useState(readNativePaste);
+  const { local } = usePermissions();
  const pickTermFont = (font: TerminalFont) => {
    writeTerminalFont(font);
    setTermFont(font);
@@ -209,6 +215,18 @@ export function AppearanceSettings() {
        >
          ❯ Tiếng Việt: ấ ế ố ồ ủ ữ — const x = {"{ ok: true }"}; 0O il1|
        </p>
+        {local && (
+          <SettingsSwitchRow
+            id="native-paste"
+            label={t("nativePaste.label")}
+            description={t("nativePaste.description")}
+            checked={nativePaste}
+            onChange={(on) => {
+              writeNativePaste(on);
+              setNativePaste(on);
+            }}
+          />
+        )}
      </SettingsSection>

      <SettingsSection
@@ -0,0 +1,26 @@
+/**
+ * @file ChangesPanelSettings — Settings → Git → Changes panel: whether a
+ * workspace folder that holds several git repositories shows each of them as
+ * its own section in the Changes panel (off by default: only the folder's own
+ * git). Writes the account preference in `lib/innerReposPref.ts`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+import { useInnerReposMode, writeInnerReposMode } from "../../lib/innerReposPref";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function ChangesPanelSettings() {
+  const { t } = useTranslation("settings");
+  const mode = useInnerReposMode();
+  return (
+    <SettingsSection title={t("changesPanel.title")} description={t("changesPanel.description")}>
+      <SettingsSwitchRow
+        label={t("changesPanel.innerRepos")}
+        description={t("changesPanel.innerReposDesc")}
+        checked={mode === "all"}
+        onChange={(on) => writeInnerReposMode(on ? "all" : "own")}
+      />
+    </SettingsSection>
+  );
+}
@@ -0,0 +1,33 @@
+/**
+ * @file ChangesPanelSettings.test.tsx
+ * @description Settings → Git → Changes panel: the inner-repositories switch
+ * starts off, turning it on stores `all` in the synced account preference,
+ * and turning it off again removes the key (back to the default).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ChangesPanelSettings } from "../ChangesPanelSettings";
+import { INNER_REPOS_KEY, readInnerReposMode } from "../../../lib/innerReposPref";
+
+describe("ChangesPanelSettings", () => {
+  beforeEach(() => localStorage.clear());
+
+  it("is off by default and toggles the account preference", () => {
+    render(<ChangesPanelSettings />);
+    const sw = screen.getByRole("switch", {
+      name: /Show the repositories inside the workspace folder/,
+    });
+    expect(sw).toHaveAttribute("aria-checked", "false");
+    expect(readInnerReposMode()).toBe("own");
+
+    fireEvent.click(sw);
+    expect(localStorage.getItem(INNER_REPOS_KEY)).toBe("all");
+    expect(sw).toHaveAttribute("aria-checked", "true");
+
+    fireEvent.click(sw);
+    expect(localStorage.getItem(INNER_REPOS_KEY)).toBeNull();
+    expect(readInnerReposMode()).toBe("own");
+  });
+});