@saadnvd1/agent-os 0.3.700 → 0.3.723

package/components/Models/ModelBadges.tsx

@@ -0,0 +1,48 @@
+import type { Availability } from "@/lib/models/availability";
+import type { Locality } from "@/lib/models/locality";
+import { cn } from "@/lib/utils";
+
+// Whether a model runs on this machine's own networks or in the cloud.
+export function LocalityBadge({ locality }: { locality: Locality }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px] font-medium",
+        locality === "local"
+          ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400"
+          : "bg-muted text-muted-foreground ring-border ring-1 ring-inset"
+      )}
+    >
+      {locality === "local" ? "Local" : "Cloud"}
+    </span>
+  );
+}
+
+const DOT = {
+  up: "bg-emerald-500",
+  down: "bg-destructive",
+  unknown: "bg-muted-foreground/50",
+} as const;
+
+const TITLE = {
+  up: "Answering",
+  down: "Not answering",
+  unknown: "Not checked",
+} as const;
+
+// The last availability check: green answering, red not, grey not checked.
+export function AvailabilityDot({
+  availability,
+}: {
+  availability: Pick<Availability, "state"> | undefined;
+}) {
+  const state = availability?.state ?? "unknown";
+  return (
+    <span
+      role="img"
+      aria-label={TITLE[state]}
+      title={TITLE[state]}
+      className={cn("inline-block h-2 w-2 shrink-0 rounded-full", DOT[state])}
+    />
+  );
+}

package/components/Models/ModelsSection.tsx

@@ -11,6 +11,7 @@ import {
   type ModelProvider,
 } from "@/lib/models/providers";
 import { SubagentModels } from "./SubagentModels";
+import { INTERNAL_MODEL_ROLES } from "@/lib/models/agent-roles";
 import { MODEL_ROLES, ROLE_LABELS } from "@/lib/models/roles";
 import { ModelSelect } from "./ModelSelect";
 import { ProviderCard } from "./ProviderCard";
@@ -58,11 +59,12 @@ export function ModelsSection() {
     <div className="space-y-6">
       <section className="space-y-2">
         <p className="text-muted-foreground text-sm">
-          Which model each kind of work runs on. A workspace can set its own
+          Which model each kind of work runs on. Developer, Analyst, Reviewer
+          and Supervisor are in Agent roles. A workspace can set its own
           (Settings › Workspaces), and a task its own when it starts or resumes.
         </p>
         <ul className="space-y-2">
-          {MODEL_ROLES.map((role) => (
+          {INTERNAL_MODEL_ROLES(MODEL_ROLES).map((role) => (
             <li
               key={role}
               className="bg-muted/40 space-y-1.5 rounded-lg px-3 py-2.5"

package/components/Models/RoleModelSelect.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useModelChoices } from "@/data/models";
+import type { ModelChoice } from "@/lib/models/catalog";
+import { AvailabilityDot, LocalityBadge } from "./ModelBadges";
+
+const INHERIT = "__inherit";
+
+function Row({ choice }: { choice: ModelChoice }) {
+  return (
+    <span className="flex min-w-0 flex-1 items-center gap-2">
+      <AvailabilityDot availability={choice.availability} />
+      <span className="truncate">{choice.label}</span>
+      <LocalityBadge locality={choice.locality} />
+    </span>
+  );
+}
+
+// A model picker over the server's list: grouped by provider, each model
+// labelled Local or Cloud with whether its server answers. `claudeOnly`
+// leaves out the models that run through Pi.
+export function RoleModelSelect({
+  id,
+  value,
+  inheritLabel,
+  claudeOnly,
+  gateOnly,
+  disabled,
+  onChange,
+}: {
+  id?: string;
+  value: string | null;
+  inheritLabel: string;
+  claudeOnly?: boolean;
+  // Only models that can serve a merge gate are selectable.
+  gateOnly?: boolean;
+  disabled?: boolean;
+  onChange: (ref: string | null) => void;
+}) {
+  const { data } = useModelChoices();
+  const choices = (data ?? []).filter((c) => !claudeOnly || c.agent !== "pi");
+  const groups = [...new Set(choices.map((c) => c.group))];
+  const current = value ? choices.find((c) => c.ref === value) : undefined;
+  return (
+    <Select
+      value={value ?? INHERIT}
+      onValueChange={(v) => onChange(v === INHERIT ? null : v)}
+      disabled={disabled}
+    >
+      <SelectTrigger id={id} className="h-11 md:h-9">
+        <SelectValue>
+          {current ? <Row choice={current} /> : (value ?? inheritLabel)}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
+        {value && !current && <SelectItem value={value}>{value}</SelectItem>}
+        {groups.map((g) => (
+          <SelectGroup key={g}>
+            <SelectLabel>{g}</SelectLabel>
+            {choices
+              .filter((c) => c.group === g)
+              .map((c) => (
+                <SelectItem
+                  key={c.ref}
+                  value={c.ref}
+                  disabled={gateOnly && !c.gateCapable}
+                  className="min-h-11 md:min-h-0"
+                >
+                  <Row choice={c} />
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/components/Pane/DesktopTabBar.tsx

@@ -15,6 +15,7 @@ import type { Session } from "@/lib/db";
 import { PaneViewToggle } from "./PaneViewToggle";
 import { PaneMenu } from "./PaneMenu";
 import { HostBadge } from "@/components/Hosts/HostBadge";
+import { RolePill } from "@/components/Sessions/RolePill";
 import { usePaneBarSlots } from "./PaneBarSlots";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
@@ -161,6 +162,7 @@ export function DesktopTabBar({
       </div>
 
       <div className="flex shrink-0 items-center gap-1.5">
+        <RolePill session={session} paneId={paneId} />
         <HostBadge hostId={session?.host_id} />
         <ContextMeter sessionId={session?.id} />
         <SessionPrStage sessionId={session?.id} />

package/components/Pane/MobileTabBar.tsx

@@ -24,6 +24,7 @@ import {
   Search,
   Star,
   Share2,
+  Download,
   TextSearch,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -31,8 +32,10 @@ import { useAwayQuery } from "@/data/away";
 import { awayUntil } from "@/components/Away/time";
 import type { Session, Project } from "@/lib/db";
 import { HostBadge } from "@/components/Hosts/HostBadge";
+import { RolePill } from "@/components/Sessions/RolePill";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
 import { shareUiActions } from "@/stores/shareUi";
+import { exportUiActions } from "@/stores/exportUi";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
@@ -219,6 +222,14 @@ export function MobileTabBar({
                   <Share2 className="h-4 w-4" />
                   Share…
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() =>
+                    exportUiActions.open(session.id, session.name)
+                  }
+                >
+                  <Download className="h-4 w-4" />
+                  Export for AI…
+                </DropdownMenuItem>
                 <DropdownMenuSeparator />
               </>
             )}
@@ -270,6 +281,7 @@ export function MobileTabBar({
         </button>
       </div>
 
+      <RolePill session={session} compact />
       {bookmarksSessionId && (
         <ChatBookmarksButton
           sessionId={bookmarksSessionId}

package/components/Pane/PaneMenu.tsx

@@ -8,6 +8,7 @@ import {
   Link,
   MoreHorizontal,
   Share2,
+  Download,
   SplitSquareHorizontal,
   SplitSquareVertical,
   Star,
@@ -27,6 +28,7 @@ import {
 import { copySessionLink, writeClipboard } from "@/hooks/useCopyToClipboard";
 import type { Session } from "@/lib/db";
 import { shareUiActions } from "@/stores/shareUi";
+import { exportUiActions } from "@/stores/exportUi";
 import { useSessionBookmarks } from "@/data/bookmarks";
 import { useDocsWorkspace } from "@/data/lumifyhub/docs";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
@@ -117,6 +119,14 @@ export function PaneMenu({
                 Share…
               </DropdownMenuItem>
             )}
+            {session.view === "chat" && (
+              <DropdownMenuItem
+                onSelect={() => exportUiActions.open(session.id, session.name)}
+              >
+                <Download className="h-4 w-4" />
+                Export for AI…
+              </DropdownMenuItem>
+            )}
             <DropdownMenuSeparator />
             <MoveMenuItems
               session={session}

package/components/SessionList/GroupShelves.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Folder, MoreHorizontal } from "lucide-react";
+import type { GroupShelf } from "@/lib/sidebar/shelves";
+import {
+  useDeleteGroup,
+  useReorderGroups,
+  useUpdateGroup,
+} from "@/data/session-groups";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { SessionRow } from "./SessionRow";
+
+function GroupHeader({
+  shelf,
+  siblings,
+  workspaceName,
+}: {
+  shelf: GroupShelf;
+  siblings: GroupShelf[];
+  workspaceName?: string;
+}) {
+  const { group, rows, rollup } = shelf;
+  const update = useUpdateGroup();
+  const reorder = useReorderGroups();
+  const remove = useDeleteGroup();
+  const [renaming, setRenaming] = useState(false);
+  const [name, setName] = useState(group.name);
+  const at = siblings.findIndex((s) => s.group.id === group.id);
+  const move = (by: -1 | 1) => {
+    const ids = siblings.map((s) => s.group.id);
+    ids.splice(at + by, 0, ids.splice(at, 1)[0]);
+    reorder.mutate({ workspaceId: group.workspace_id, ids });
+  };
+  const commit = () => {
+    const next = name.trim();
+    setRenaming(false);
+    if (next && next !== group.name)
+      update.mutate({ id: group.id, name: next });
+    else setName(group.name);
+  };
+
+  if (renaming)
+    return (
+      <div className="px-2.5 pt-3.5 pb-1.5">
+        <Input
+          autoFocus
+          value={name}
+          maxLength={60}
+          aria-label="Group name"
+          className="h-11 md:h-8"
+          onChange={(e) => setName(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") {
+              setName(group.name);
+              setRenaming(false);
+            }
+          }}
+        />
+      </div>
+    );
+
+  return (
+    <div className="text-muted-foreground/70 group/header flex items-center pr-1 pl-2.5">
+      <button
+        type="button"
+        onClick={() =>
+          update.mutate({ id: group.id, collapsed: !group.collapsed })
+        }
+        aria-expanded={!group.collapsed}
+        className="hover:text-foreground flex min-h-11 min-w-0 flex-1 items-center gap-1 pt-2 text-left text-[11px] font-medium tracking-[0.08em] uppercase md:min-h-8"
+      >
+        <Folder aria-hidden className="h-3 w-3 shrink-0" />
+        <span className="truncate">{group.name}</span>
+        <span className="shrink-0">· {rows.length}</span>
+        {rollup.needsYou > 0 && (
+          <span className="shrink-0 text-amber-600 normal-case dark:text-amber-400">
+            · {rollup.needsYou} needs you
+          </span>
+        )}
+        {workspaceName && (
+          <span className="bg-muted text-muted-foreground ml-1 truncate rounded px-1.5 py-0.5 text-[10px] normal-case">
+            {workspaceName}
+          </span>
+        )}
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "h-3 w-3 shrink-0 transition-transform",
+            group.collapsed && "-rotate-90"
+          )}
+        />
+      </button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label={`${group.name} options`}
+            className="hover:bg-muted flex h-11 w-11 shrink-0 items-center justify-center rounded-md md:h-8 md:w-8 md:opacity-0 md:group-hover/header:opacity-100 md:focus-visible:opacity-100 md:data-[state=open]:opacity-100 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11 [@media(hover:none)]:md:opacity-100"
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-44">
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            onSelect={() => setRenaming(true)}
+          >
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            disabled={at <= 0}
+            onSelect={() => move(-1)}
+          >
+            Move up
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            disabled={at < 0 || at >= siblings.length - 1}
+            onSelect={() => move(1)}
+          >
+            Move down
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            onSelect={() =>
+              update.mutate({ id: group.id, collapsed: !group.collapsed })
+            }
+          >
+            {group.collapsed ? "Unfold" : "Fold"}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            className="min-h-11 md:min-h-8"
+            onSelect={() => remove.mutate({ id: group.id, name: group.name })}
+          >
+            Delete group
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+// The user's groups, in order, between Pinned and the status shelves. A
+// folded group keeps its header and counts; an auto-settled member is muted.
+export function GroupShelves({
+  groups,
+  workspaceNames,
+}: {
+  groups: GroupShelf[];
+  // Set when more than one workspace's groups show, to tag each header.
+  workspaceNames?: Map<string, string>;
+}) {
+  return groups.map((shelf) => {
+    const { group } = shelf;
+    const siblings = groups.filter(
+      (g) => g.group.workspace_id === group.workspace_id
+    );
+    const empty = !group.collapsed && shelf.rows.length === 0;
+    return (
+      <section key={group.id} aria-label={group.name}>
+        <GroupHeader
+          shelf={shelf}
+          siblings={siblings}
+          workspaceName={
+            workspaceNames && group.workspace_id
+              ? workspaceNames.get(group.workspace_id)
+              : undefined
+          }
+        />
+        {empty && (
+          <p className="text-muted-foreground/70 px-2.5 pb-2 text-xs">
+            Nothing here yet · move a session in from its ⋯ menu
+          </p>
+        )}
+        {(group.collapsed ? [] : shelf.rows).map((r) => (
+          <SessionRow key={r.session.id} row={r} muted={r.settled === "auto"} />
+        ))}
+      </section>
+    );
+  });
+}

package/components/SessionList/MoveToGroupMenu.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Folder, Plus, X } from "lucide-react";
+import { useSessionsQuery } from "@/data/sessions";
+import { useAssignGroup, useCreateGroup } from "@/data/session-groups";
+import { Input } from "@/components/ui/input";
+import { Expander, MenuItem, icon, type MenuKind } from "./RowMenuParts";
+
+// "Move to group": the groups of the session's workspace with the current
+// one ticked, a way out, and an inline field that makes a new group and
+// files the session into it.
+export function MoveToGroupMenu({
+  kind,
+  sessionId,
+  groupId,
+  workspaceId,
+}: {
+  kind: MenuKind;
+  sessionId: string;
+  groupId: string | null | undefined;
+  workspaceId: string | null;
+}) {
+  const { data } = useSessionsQuery();
+  const assign = useAssignGroup();
+  const create = useCreateGroup();
+  const [naming, setNaming] = useState(false);
+  const [name, setName] = useState("");
+  const groups = (data?.sessionGroups ?? [])
+    .filter((g) => g.workspace_id === workspaceId)
+    .sort((a, b) => a.sort_order - b.sort_order);
+
+  const make = async () => {
+    const next = name.trim();
+    if (!next) return;
+    const { sessionGroup } = await create.mutateAsync({
+      name: next,
+      workspaceId,
+    });
+    assign.mutate({ ids: [sessionId], groupId: sessionGroup.id });
+    setNaming(false);
+    setName("");
+  };
+
+  return (
+    <Expander kind={kind} icon={Folder} label="Move to group">
+      {groups.map((g) => (
+        <MenuItem
+          key={g.id}
+          kind={kind}
+          onClick={() =>
+            assign.mutate({
+              ids: [sessionId],
+              groupId: g.id === groupId ? null : g.id,
+            })
+          }
+        >
+          <Check className={`${icon} ${g.id === groupId ? "" : "invisible"}`} />
+          <span className="truncate">{g.name}</span>
+        </MenuItem>
+      ))}
+      {groupId && (
+        <MenuItem
+          kind={kind}
+          onClick={() => assign.mutate({ ids: [sessionId], groupId: null })}
+        >
+          <X className={icon} />
+          Remove from group
+        </MenuItem>
+      )}
+      {naming ? (
+        <div className="px-1.5 py-1">
+          <Input
+            autoFocus
+            value={name}
+            maxLength={60}
+            placeholder="Group name"
+            aria-label="New group name"
+            className="h-11 md:h-8"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              // Keys here are typing, not the menu's typeahead.
+              e.stopPropagation();
+              if (e.key === "Enter") void make();
+            }}
+          />
+          <p className="text-muted-foreground/70 px-1 pt-1 text-[11px]">
+            ↵ create
+          </p>
+        </div>
+      ) : (
+        <MenuItem
+          kind={kind}
+          onSelect={(e) => {
+            e.preventDefault();
+            setNaming(true);
+          }}
+        >
+          <Plus className={icon} />
+          New group…
+        </MenuItem>
+      )}
+    </Expander>
+  );
+}

package/components/SessionList/RowSubtitle.tsx

@@ -9,6 +9,7 @@ import { headerParts } from "@/lib/orchestrator/header-line";
 import { cn } from "@/lib/utils";
 import { usageLabel, useSessionUsage } from "@/data/load";
 import { useRowContext } from "./RowContext";
+import { OverlapPill } from "@/components/Claims/OverlapPill";
 import { pauseSubtitle } from "@/lib/sidebar/paused";
 
 const ATTENTION = (part: string) => part === "paused" || /\basks?$/.test(part);
@@ -22,11 +23,14 @@ export function RowSubtitle({
   detail,
   live,
   hideHost = false,
+  groupName,
 }: {
   session: Session;
   detail?: string | null;
   live?: LiveInput;
   hideHost?: boolean;
+  // Set on a finished session that keeps its group: Done shows where it goes back to.
+  groupName?: string;
 }) {
   const ctx = useRowContext();
   // What its processes use, on a busy session: "3.1 cores · 4.2 GB".
@@ -63,6 +67,7 @@ export function RowSubtitle({
   return (
     <span className="flex min-w-0 items-center gap-1.5">
       <LiveLine {...live} />
+      {session.overlap && <OverlapPill overlap={session.overlap} />}
       {pause && (
         <span className="flex min-w-0 items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
           <Pause aria-hidden className="h-3 w-3 shrink-0" />
@@ -102,13 +107,14 @@ export function RowSubtitle({
           </span>
         </span>
       )}
-      {(project || detail || usage || session.placed_note) && (
+      {(project || detail || usage || session.placed_note || groupName) && (
         <span className="text-muted-foreground/70 min-w-0 truncate text-xs">
           {[
             usage && usageLabel(usage),
             detail?.slice(0, 200),
             session.placed_note,
             project,
+            groupName,
           ]
             .filter(Boolean)
             .join(" · ")}

package/components/SessionList/SelectionToolbar.tsx

@@ -3,7 +3,17 @@
 import { useEffect, useCallback, useState } from "react";
 import { useSnapshot } from "valtio";
 import { Button } from "@/components/ui/button";
-import { Trash2, X } from "lucide-react";
+import { Check, Folder, Trash2, X } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useSessionsQuery } from "@/data/sessions";
+import { useAssignGroup } from "@/data/session-groups";
+import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
 import { selectionStore, selectionActions } from "@/stores/sessionSelection";
 import {
   Dialog,
@@ -32,6 +42,19 @@ export function SelectionToolbar({
   const selectedCount = selectedIds.size;
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const { workspace } = useSelectedWorkspace();
+  const { data } = useSessionsQuery();
+  const assign = useAssignGroup();
+  const groups = (data?.sessionGroups ?? []).filter(
+    (g) => !workspace || g.workspace_id === workspace.id
+  );
+  const moveTo = (groupId: string | null) => {
+    const ids = selectionActions.getSelectedIds();
+    assign.mutate(
+      { ids, groupId },
+      { onSuccess: () => selectionActions.clear() }
+    );
+  };
 
   const handleSelectAll = useCallback(() => {
     selectionActions.selectAll(allSessionIds);
@@ -101,6 +124,34 @@ export function SelectionToolbar({
               Select all
             </Button>
           )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
+                <Folder className="h-3 w-3" />
+                Move to group
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-52">
+              {groups.map((g) => (
+                <DropdownMenuItem
+                  key={g.id}
+                  className="min-h-11 md:min-h-8"
+                  onSelect={() => moveTo(g.id)}
+                >
+                  <Check className="invisible mr-2 h-3.5 w-3.5" />
+                  <span className="truncate">{g.name}</span>
+                </DropdownMenuItem>
+              ))}
+              {groups.length > 0 && <DropdownMenuSeparator />}
+              <DropdownMenuItem
+                className="min-h-11 md:min-h-8"
+                onSelect={() => moveTo(null)}
+              >
+                <X className="mr-2 h-3.5 w-3.5" />
+                Remove from group
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <Tooltip>
             <TooltipTrigger asChild>
               <Button