@saadnvd1/agent-os 0.3.600 → 0.3.601

package/components/SessionList/LiveLine.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Loader2 } from "lucide-react";
+import { ClipboardList, Loader2, Pencil } from "lucide-react";
 import { liveParts, liveText, type LiveTone } from "@/lib/sidebar/live-status";
+import type { StatusBadge } from "@/lib/sidebar/row-badge";
 import type { PrStage } from "@/lib/tasks/pr-stage";
 import { prStageText } from "@/lib/tasks/pr-stage";
 import { cn } from "@/lib/utils";
@@ -9,22 +10,35 @@ import { cn } from "@/lib/utils";
 export interface LiveInput {
   compacting?: boolean;
   prStage?: PrStage;
+  badge?: StatusBadge | null;
 }
 
+// A status badge's pill; the failed need is red text alone.
+const PILL: Record<LiveTone, string> = {
+  blue: "bg-blue-500/15",
+  amber: "bg-amber-500/15",
+  red: "bg-red-500/15",
+  green: "bg-green-500/15",
+  purple: "bg-purple-500/15",
+  primary: "bg-primary/15",
+  muted: "bg-muted",
+};
+
 const TONE: Record<LiveTone, string> = {
   blue: "text-blue-700 dark:text-blue-400",
   amber: "text-amber-700 dark:text-amber-400",
   red: "text-red-700 dark:text-red-400",
   green: "text-green-700 dark:text-green-400",
   purple: "text-purple-700 dark:text-purple-400",
+  primary: "text-primary",
   muted: "text-muted-foreground",
 };
 
 // The row's live status in small coloured words under the name: "Compacting
-// · PR CI". The PR word links to the PR; its number, full wording and sha are
+// · Plan ready · PR CI". The PR word links to the PR; its number, full wording and sha are
 // in the tooltip. Renders nothing when there is nothing to say.
-export function LiveLine({ compacting, prStage }: LiveInput) {
-  const parts = liveParts({ compacting, prStage });
+export function LiveLine({ compacting, prStage, badge }: LiveInput) {
+  const parts = liveParts({ compacting, prStage, badge });
   if (parts.length === 0) return null;
   const pr = prStage
     ? `${prStageText(prStage)}${prStage.sha ? ` · ${prStage.sha}` : ""}`
@@ -35,12 +49,15 @@ export function LiveLine({ compacting, prStage }: LiveInput) {
       className="flex shrink-0 items-center gap-1 text-xs font-medium whitespace-nowrap"
     >
       {parts.map((p, i) => {
-        const isPr = p.text.startsWith("PR");
+        const isPr = !p.badge && p.text.startsWith("PR");
+        const PlanIcon = p.badge === "planning" ? Pencil : ClipboardList;
+        const isPlan = p.badge === "planning" || p.badge === "plan-ready";
         const body = (
           <>
             {p.busy && (
               <Loader2 className="h-2.5 w-2.5 animate-spin" aria-hidden />
             )}
+            {isPlan && <PlanIcon className="h-2.5 w-2.5" aria-hidden />}
             {p.text}
           </>
         );
@@ -63,7 +80,17 @@ export function LiveLine({ compacting, prStage }: LiveInput) {
                 {body}
               </a>
             ) : (
-              <span className={cn("flex items-center gap-1", TONE[p.tone])}>
+              <span
+                data-tip={p.tip}
+                data-status-badge={p.badge}
+                className={cn(
+                  "flex items-center gap-1",
+                  TONE[p.tone],
+                  p.badge &&
+                    "rounded-md px-1.5 py-0.5 text-[11px] font-semibold",
+                  p.badge && PILL[p.tone]
+                )}
+              >
                 {body}
               </span>
             )}

package/components/SessionList/QueuedRow.tsx

@@ -16,6 +16,8 @@ import { sessionLink } from "@/lib/session-url";
 import { cn } from "@/lib/utils";
 import { useRowContext } from "./RowContext";
 import { RowShell, type RowMenuKind } from "./RowShell";
+import { LiveLine } from "./LiveLine";
+import type { StatusBadge } from "@/lib/sidebar/row-badge";
 
 const ITEM = { dropdown: DM.DropdownMenuItem, context: CM.ContextMenuItem };
 const SEPARATOR = {
@@ -142,19 +144,6 @@ export function QueuedRow({ row }: { row: Row }) {
           )}
         />
       }
-      trailing={
-        // Under the Queued heading a waiting one needs no badge.
-        item.status !== "queued" && (
-          <span
-            className={cn(
-              "rounded-md px-1.5 py-0.5 text-[11px] font-semibold",
-              failed ? "text-destructive" : "bg-muted text-muted-foreground"
-            )}
-          >
-            {failed ? "Failed" : "Starting"}
-          </span>
-        )
-      }
       menu={menu}
       menuLabel="Queued task actions"
       onClick={open}
@@ -169,43 +158,53 @@ export function QueuedRow({ row }: { row: Row }) {
 function QueuedSubtitle({ row }: { row: Row }) {
   const ctx = useRowContext();
   const { item } = row;
+  // Under the Queued heading a waiting one needs no badge.
+  const badge: StatusBadge | null =
+    item.status === "failed"
+      ? { kind: "failed", label: "Failed" }
+      : item.status === "queued"
+        ? null
+        : { kind: "starting", label: "Starting" };
   const { lead, after } = queuedSubtitle(item);
   const target = row.afterSessionId;
   return (
-    <span
-      className={cn(
-        "text-muted-foreground/70 text-xs",
-        // A failed start's reason is read in full, phones included.
-        item.status === "failed" ? "line-clamp-3 break-words" : "truncate"
-      )}
-    >
-      <span className={cn(item.status === "failed" && "text-destructive")}>
-        {lead}
+    <span className="flex items-start gap-1.5 md:pr-6">
+      <LiveLine badge={badge} />
+      <span
+        className={cn(
+          "text-muted-foreground/70 min-w-0 text-xs",
+          // A failed start's reason is read in full, phones included.
+          item.status === "failed" ? "line-clamp-3 break-words" : "truncate"
+        )}
+      >
+        <span className={cn(item.status === "failed" && "text-destructive")}>
+          {lead}
+        </span>
+        {after &&
+          (target ? (
+            <>
+              {" "}
+              <a
+                href={sessionLink("", target)}
+                onClick={(e) => {
+                  // The row opens it too; the link alone handles its click.
+                  e.stopPropagation();
+                  // A plain click opens it here; a modified one, a new tab.
+                  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
+                    return;
+                  e.preventDefault();
+                  ctx.onSelect(target);
+                }}
+                className="hover:text-foreground underline decoration-dotted underline-offset-2"
+              >
+                {after}
+              </a>
+            </>
+          ) : (
+            ` ${after}`
+          ))}
+        {item.projectName && ` · ${item.projectName}`}
       </span>
-      {after &&
-        (target ? (
-          <>
-            {" "}
-            <a
-              href={sessionLink("", target)}
-              onClick={(e) => {
-                // The row opens it too; the link alone handles its click.
-                e.stopPropagation();
-                // A plain click opens it here; a modified one, a new tab.
-                if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
-                  return;
-                e.preventDefault();
-                ctx.onSelect(target);
-              }}
-              className="hover:text-foreground underline decoration-dotted underline-offset-2"
-            >
-              {after}
-            </a>
-          </>
-        ) : (
-          ` ${after}`
-        ))}
-      {item.projectName && ` · ${item.projectName}`}
     </span>
   );
 }

package/components/SessionList/RowParts.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { ClipboardList, Pencil } from "lucide-react";
-import { NEED_LABEL, type SidebarRow } from "@/lib/sidebar/shelves";
-import { rowKindBadge, type RowKindBadge } from "@/lib/sidebar/row-badge";
+import type { SidebarRow } from "@/lib/sidebar/shelves";
 import { cn } from "@/lib/utils";
 
 // Amber when it needs you, red when it failed, green while it works, and a
@@ -28,57 +26,6 @@ export function RowDot({ row }: { row: SidebarRow }) {
   );
 }
 
-// What it needs from you, stalled, its plan step, or a purple dot when it
-// changed since you looked.
-export function RowBadge({ row }: { row: SidebarRow }) {
-  if (row.need) {
-    const asks = row.status?.asks ?? 0;
-    return (
-      <span
-        className={cn(
-          "rounded-md px-1.5 py-0.5 text-[11px] font-semibold",
-          row.need === "failed"
-            ? "text-red-600 dark:text-red-400"
-            : "bg-amber-500/15 text-amber-700 dark:text-amber-400"
-        )}
-      >
-        {NEED_LABEL[row.need]}
-        {asks > 1 && ` ${asks}`}
-      </span>
-    );
-  }
-  if (row.status?.stalled)
-    return (
-      <span className="rounded-md bg-amber-500/15 px-1.5 py-0.5 text-[11px] font-semibold text-amber-700 dark:text-amber-400">
-        Stalled
-      </span>
-    );
-  const kind = rowKindBadge(row);
-  if (kind) return <KindBadge badge={kind} />;
-  if (row.unread) return <UnreadDot />;
-  return null;
-}
-
-// Planning in blue, a plan waiting for approval in the primary colour:
-// an icon and a word, never colour alone.
-function KindBadge({ badge }: { badge: RowKindBadge }) {
-  const Icon = badge.kind === "planning" ? Pencil : ClipboardList;
-  return (
-    <span
-      data-tip={badge.tip}
-      className={cn(
-        "flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-semibold whitespace-nowrap",
-        badge.kind === "planning"
-          ? "bg-blue-500/15 text-blue-700 dark:text-blue-400"
-          : "bg-primary/15 text-primary"
-      )}
-    >
-      <Icon aria-hidden className="h-3 w-3" />
-      {badge.label}
-    </span>
-  );
-}
-
 // What belongs to the row above it (a conductor's workers, an
 // orchestrator's quick changes), behind a thin rule.
 export function NestRail({ children }: { children: ReactNode }) {

package/components/SessionList/RowShell.tsx

@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
 export type RowMenuKind = "dropdown" | "context";
 
 // Every sidebar row's frame: a leading mark, title over subtitle, what's on
-// the right (hidden under the ⋯ on hover), and the same menu on ⋯ and on
+// the right (hidden under the ⋯ on hover: only the time goes there), and the same menu on ⋯ and on
 // right-click. Session rows and queued tasks both draw through it. The
 // title is its hover tip (lib/hover-tip), or tipKey's when one resolves.
 export function RowShell({
@@ -22,7 +22,7 @@ export function RowShell({
   leading,
   children,
   aside,
-  trailing,
+  hoverHidden,
   menu,
   menuLabel,
   menuButton = true,
@@ -35,9 +35,11 @@ export function RowShell({
   onActivate?: () => void;
   leading: ReactNode;
   children: ReactNode;
-  // Stays on hover, unlike trailing.
+  // Stays on hover, unlike hoverHidden.
   aside?: ReactNode;
-  trailing?: ReactNode;
+  // Hidden on hover, focus and while the menu is open so the ⋯ can sit on
+  // it. Only for what may vanish, the timestamp. Status goes on the second line.
+  hoverHidden?: ReactNode;
   // Null hides the ⋯ (and the right-click menu).
   menu: ((kind: RowMenuKind) => ReactNode) | null;
   menuLabel: string;
@@ -73,8 +75,13 @@ export function RowShell({
         {children}
       </span>
       {aside}
-      <span className="flex shrink-0 items-center gap-2 md:group-hover:invisible md:group-has-[:focus-visible]:invisible md:group-has-[[data-state=open]]:invisible">
-        {trailing}
+      {/* Invisible on hover so the ⋯ shows over it: never put status here, it
+          belongs on the second line (liveParts). */}
+      <span
+        data-hover-hidden
+        className="flex shrink-0 items-center gap-2 md:group-hover:invisible md:group-has-[:focus-visible]:invisible md:group-has-[[data-state=open]]:invisible"
+      >
+        {hoverHidden}
       </span>
       {menu && menuButton && (
         <DM.DropdownMenu>

package/components/SessionList/RowStatusPlacement.test.ts

@@ -0,0 +1,114 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Session } from "@/lib/db/types";
+import type { SidebarRow } from "@/lib/sidebar/shelves";
+import { RowProvider, type RowContextValue } from "./RowContext";
+import { SessionRow } from "./SessionRow";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let host: HTMLElement;
+let root: Root;
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  host.remove();
+});
+
+const ctx: RowContextValue = {
+  summarizingSessionId: null,
+  projects: [],
+  projectNames: new Map(),
+  workspaceNames: new Map(),
+  orchestrators: [],
+  runningByWorkspace: new Map(),
+  queuedByWorkspace: new Map(),
+  rollups: new Map(),
+  orchestratorNames: new Map(),
+  orderedIds: () => [],
+  cardUrl: () => null,
+  onSelect: vi.fn(),
+  onRename: vi.fn(),
+  onFork: vi.fn(),
+  onSummarize: vi.fn(),
+  onDelete: vi.fn(),
+  onMoveToProject: vi.fn(),
+  onPin: vi.fn(),
+  onFresh: vi.fn(),
+};
+
+async function render(
+  session: Partial<Session>,
+  over: Partial<SidebarRow> = {}
+) {
+  const row: SidebarRow = {
+    session: {
+      id: "s1",
+      name: "Fix typo",
+      task_status: "running",
+      chat_plan: 0,
+      ...session,
+    } as Session,
+    status: undefined,
+    need: null,
+    unread: false,
+    working: true,
+    activeAt: Date.now() - 60_000,
+    workers: [],
+    ...over,
+  };
+  await act(async () =>
+    root.render(
+      createElement(
+        QueryClientProvider,
+        { client: new QueryClient() },
+        createElement(
+          RowProvider,
+          { value: ctx },
+          createElement(SessionRow, { row })
+        )
+      )
+    )
+  );
+}
+
+// The slot that goes invisible on hover so the ⋯ can sit on it.
+const hoverHidden = () => host.querySelector("[data-hover-hidden]")!;
+const badges = () => [...host.querySelectorAll("[data-status-badge]")];
+
+describe("status on a session row", () => {
+  it.each([
+    ["Plan ready", { plan_phase: "awaiting" as const }, {}],
+    ["Planning", { plan_phase: "planning" as const }, {}],
+    ["Approve", {}, { need: "approve" as const }],
+    ["Stalled", {}, { status: { stalled: true } as SidebarRow["status"] }],
+  ])("keeps %s out of the hover-hidden slot", async (label, session, over) => {
+    await render(session, over);
+    const badge = badges().find((b) => b.textContent?.includes(label));
+    expect(badge, label).toBeTruthy();
+    expect(hoverHidden().contains(badge!)).toBe(false);
+    expect(hoverHidden().textContent).not.toContain(label);
+  });
+
+  it("keeps the badge when the session is paused", async () => {
+    await render({
+      plan_phase: "awaiting" as const,
+      pause_state: "snoozed" as never,
+    });
+    expect(badges().map((b) => b.textContent)).toContain("Plan ready");
+  });
+
+  it("puts the time, and only the time, in the hover-hidden slot", async () => {
+    await render({ plan_phase: "awaiting" as const });
+    expect(hoverHidden().textContent).toMatch(/\d+m|now|\d+h/);
+  });
+});

package/components/SessionList/RowSubtitle.tsx

@@ -62,7 +62,8 @@ export function RowSubtitle({
   const pause = session.pause_state;
   return (
     <span className="flex min-w-0 items-center gap-1.5">
-      {pause ? (
+      <LiveLine {...live} />
+      {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" />
           <span className="truncate">
@@ -75,8 +76,6 @@ export function RowSubtitle({
             })}
           </span>
         </span>
-      ) : (
-        <LiveLine {...live} />
       )}
       {group && (
         <span

package/components/SessionList/SessionRow.tsx

@@ -13,7 +13,7 @@ import {
 import { compactTimeAgo } from "@/lib/session-meta";
 import { wakeLabel } from "@/lib/sidebar/snooze";
 import { sameRow, type SidebarRow } from "@/lib/sidebar/shelves";
-import { rowKindBadge } from "@/lib/sidebar/row-badge";
+import { rowStatusBadge } from "@/lib/sidebar/row-badge";
 import { useMinuteTick } from "@/hooks/useMinuteTick";
 import { selectionStore, selectionActions } from "@/stores/sessionSelection";
 import { cn } from "@/lib/utils";
@@ -21,7 +21,7 @@ import { QuickChangeRow } from "./QuickChangeRow";
 import { useRowContext } from "./RowContext";
 import { SessionRowMenu } from "./SessionRowMenu";
 import { RowShell, type RowMenuKind } from "./RowShell";
-import { NestRail, RowBadge, RowDot, RowRename } from "./RowParts";
+import { NestRail, RowDot, RowRename, UnreadDot } from "./RowParts";
 import { RowSubtitle } from "./RowSubtitle";
 import { OrchestratorAsks } from "./OrchestratorAsks";
 
@@ -62,6 +62,8 @@ export const SessionRow = memo(function SessionRow({
     ctx.onSelect(session.id);
   };
 
+  const badge = rowStatusBadge(row);
+
   const menu = (kind: RowMenuKind) => (
     <SessionRowMenu
       session={session}
@@ -100,17 +102,13 @@ export const SessionRow = memo(function SessionRow({
                 />
               </span>
             )}
+            {row.unread && !badge && <UnreadDot />}
             {isFork(session) && (
               <GitFork className="text-muted-foreground/60 h-3 w-3 shrink-0" />
             )}
           </>
         }
-        trailing={
-          <>
-            <RowBadge row={row} />
-            {!row.need && !rowKindBadge(row) && <RowTime row={row} />}
-          </>
-        }
+        hoverHidden={!row.need && <RowTime row={row} />}
         menu={menu}
         menuLabel="Session actions"
         menuButton={!selecting}
@@ -140,8 +138,12 @@ export const SessionRow = memo(function SessionRow({
           detail={row.status?.detail}
           live={
             row.need
-              ? undefined
-              : { compacting: row.compacting, prStage: row.status?.prStage }
+              ? { badge }
+              : {
+                  compacting: row.compacting,
+                  prStage: row.status?.prStage,
+                  badge,
+                }
           }
         />
       </RowShell>

package/lib/sidebar/live-status.ts

@@ -4,16 +4,37 @@ import {
   type PrStage,
   type PrStageName,
 } from "../tasks/pr-stage";
+import type { StatusBadge } from "./row-badge";
 
-export type LiveTone = "blue" | "amber" | "red" | "green" | "purple" | "muted";
+export type LiveTone =
+  | "blue"
+  | "amber"
+  | "red"
+  | "green"
+  | "purple"
+  | "primary"
+  | "muted";
 
 export interface LivePart {
   text: string;
   tone: LiveTone;
   // Still moving on its own: the UI shows a spinner.
   busy?: boolean;
+  // A status badge (need, stalled, plan step): drawn as a pill, with an icon
+  // for the plan kinds.
+  badge?: StatusBadge["kind"];
+  tip?: string;
 }
 
+export const BADGE_TONE: Record<StatusBadge["kind"], LiveTone> = {
+  need: "amber",
+  failed: "red",
+  stalled: "amber",
+  starting: "muted",
+  planning: "blue",
+  "plan-ready": "primary",
+};
+
 export const PR_STAGE_TONE: Record<PrStageName, LiveTone> = {
   merged: "purple",
   conflicts: "amber",
@@ -28,14 +49,24 @@ export const PR_STAGE_TONE: Record<PrStageName, LiveTone> = {
 };
 
 // What the row's second line says about the session right now, in order:
-// "Compacting", then "PR CI". Empty when there is nothing to say.
+// "Compacting", then a status badge (Needs you, Stalled, Planning, Plan
+// ready), then "PR CI". Empty when there is nothing to say.
 export function liveParts(input: {
   compacting?: boolean;
   prStage?: PrStage;
+  badge?: StatusBadge | null;
 }): LivePart[] {
   const parts: LivePart[] = [];
   if (input.compacting)
     parts.push({ text: "Compacting", tone: "blue", busy: true });
+  const b = input.badge;
+  if (b)
+    parts.push({
+      text: b.label,
+      tone: BADGE_TONE[b.kind],
+      badge: b.kind,
+      tip: b.tip,
+    });
   const s = input.prStage;
   if (s) {
     const word = PR_STAGE_SHORT[s.stage];

package/lib/sidebar/row-badge.ts

@@ -1,7 +1,7 @@
-// The plan badge a row shows on its right: writing its plan, or a plan
+// The plan badge a row shows: writing its plan, or a plan
 // waiting for approval. A need or a stall says more and wins; finished,
 // snoozed and quick-change rows show none. Client-safe.
-import type { SidebarRow } from "./shelves";
+import { NEED_LABEL, type SidebarRow } from "./shelves";
 
 export type RowKindBadge = {
   kind: "planning" | "plan-ready";
@@ -38,3 +38,27 @@ export function rowKindBadge(
     };
   return null;
 }
+
+// The one status badge a row's second line carries: what it needs from you,
+// stalled, or its plan step. They are mutually exclusive by precedence. The
+// queued rows' Failed/Starting use the same shape.
+export type StatusBadge = {
+  kind: "need" | "failed" | "stalled" | "starting" | RowKindBadge["kind"];
+  label: string;
+  tip?: string;
+};
+
+export function rowStatusBadge(
+  row: Parameters<typeof rowKindBadge>[0] &
+    Pick<SidebarRow, "need"> & { status?: SidebarRow["status"] }
+): StatusBadge | null {
+  if (row.need) {
+    const asks = row.status?.asks ?? 0;
+    return {
+      kind: row.need === "failed" ? "failed" : "need",
+      label: `${NEED_LABEL[row.need]}${asks > 1 ? ` ${asks}` : ""}`,
+    };
+  }
+  if (row.status?.stalled) return { kind: "stalled", label: "Stalled" };
+  return rowKindBadge(row);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.600",
+  "version": "0.3.601",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"