@saadnvd1/agent-os 0.3.700 → 0.3.723

package/components/Chat/Messages.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { memo } from "react";
+import { useSnapshot } from "valtio";
 import {
   Check,
   ChevronRight,
+  Download,
   Circle,
   CircleDot,
   Quote,
@@ -24,6 +26,8 @@ import { Markdown } from "./Markdown";
 import { openSessionLink } from "./session-link";
 import { UndoButton } from "./Undo";
 import { useRowState } from "./rowState";
+import { useBookmarkChat } from "@/components/Bookmarks/context";
+import { exportUi, exportUiActions, pickedRange } from "@/stores/exportUi";
 import {
   BookmarkButton,
   TurnBookmark,
@@ -153,6 +157,71 @@ function SendStatus({ pending }: { pending: PendingStatus }) {
   );
 }
 
+// The turn this message begins, while turns are being picked for an export.
+function useExportTurn(itemId: string): number | null {
+  const ui = useSnapshot(exportUi);
+  if (!ui.selecting) return null;
+  return ui.turns.find((t) => t.id === itemId)?.n ?? null;
+}
+
+// A tick in the gutter and a tinted row: tap anywhere on it to pick the turn.
+function TurnTick({
+  turn,
+  children,
+}: {
+  turn: number;
+  children: React.ReactNode;
+}) {
+  const { pick } = useSnapshot(exportUi);
+  const range = pickedRange(pick);
+  const on = !!range && turn >= range.from && turn <= range.to;
+  return (
+    <div
+      className={cn(
+        "-mx-2 flex items-start gap-2 rounded-xl px-2",
+        on && "bg-primary/10"
+      )}
+    >
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={on}
+        aria-label={`Turn ${turn}`}
+        onClick={() => exportUiActions.tap(turn)}
+        className={cn(
+          "mt-1 flex h-11 min-w-11 shrink-0 flex-col items-center justify-center rounded-md border text-[11px]",
+          on
+            ? "border-primary bg-primary text-primary-foreground"
+            : "text-muted-foreground"
+        )}
+      >
+        {on ? <Check className="h-4 w-4" /> : turn}
+      </button>
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+// Export this message's turn and everything after it.
+function ExportFromHere({ itemId }: { itemId: string }) {
+  const chat = useBookmarkChat();
+  if (!chat) return null;
+  return (
+    <button
+      type="button"
+      aria-label="Export from here"
+      title="Export from here"
+      onClick={(e) => {
+        e.stopPropagation();
+        exportUiActions.open(chat.sessionId, "", itemId);
+      }}
+      className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] flex h-11 w-11 shrink-0 items-center justify-center rounded-md opacity-40 group-hover:opacity-100 focus-visible:opacity-100 md:h-7 md:w-7 md:opacity-0"
+    >
+      <Download className="h-3.5 w-3.5" />
+    </button>
+  );
+}
+
 export function UserMessage({
   item,
   onUndo,
@@ -162,6 +231,7 @@ export function UserMessage({
   onUndo?: () => void;
   pending?: PendingStatus;
 }) {
+  const turn = useExportTurn(item.id);
   const message = (
     <div className="group flex flex-col items-end gap-1">
       {item.from && (
@@ -204,6 +274,7 @@ export function UserMessage({
       ) : (
         <div className="-mr-1.5 flex items-center">
           {onUndo && <UndoButton onClick={onUndo} />}
+          <ExportFromHere itemId={item.id} />
           <BookmarkButton itemId={item.id} />
         </div>
       )}
@@ -211,7 +282,8 @@ export function UserMessage({
   );
   // Not in the chat yet: nothing to star.
   if (pending) return message;
-  return <BookmarkPress itemId={item.id}>{message}</BookmarkPress>;
+  const row = <BookmarkPress itemId={item.id}>{message}</BookmarkPress>;
+  return turn ? <TurnTick turn={turn}>{row}</TurnTick> : row;
 }
 
 export function AssistantMessage({
@@ -221,6 +293,8 @@ export function AssistantMessage({
   item: Of<"assistant">;
   onQuote?: (text: string) => void;
 }) {
+  // A reply whose only content was a tool call AgentOS ran for it.
+  if (!item.streaming && !item.text.trim()) return null;
   return (
     <BookmarkPress itemId={item.id}>
       <div className="group">
@@ -300,18 +374,38 @@ export function Todos({ item }: { item: Of<"todos"> }) {
 
 export function TurnEnd({ item }: { item: Of<"turn_end"> }) {
   const secs = item.durationMs ? Math.round(item.durationMs / 1000) : null;
+  const early = !item.interrupted && item.ended;
   const label = item.interrupted
     ? "Stopped"
-    : secs !== null
-      ? `Done in ${secs}s`
-      : "Done";
+    : early
+      ? secs !== null
+        ? `Ended early in ${secs}s`
+        : "Ended early"
+      : secs !== null
+        ? `Done in ${secs}s`
+        : "Done";
   return (
-    <div className="group text-muted-foreground/60 flex items-center gap-3 font-mono text-[11px]">
-      <span className="bg-foreground/[0.06] h-px flex-1" />
-      {label}
-      <TurnBookmark turnEndId={item.id} />
-      <span className="bg-foreground/[0.06] h-px flex-1" />
-    </div>
+    <>
+      {early && (
+        <div
+          role="status"
+          className="rounded-xl bg-amber-500/10 px-3.5 py-2.5 text-sm text-amber-700 dark:text-amber-300"
+        >
+          {early.notice}
+          {item.finishReason && (
+            <span className="mt-1 block font-mono text-[11px] opacity-80">
+              finish reason: {item.finishReason}
+            </span>
+          )}
+        </div>
+      )}
+      <div className="group text-muted-foreground/60 flex items-center gap-3 font-mono text-[11px]">
+        <span className="bg-foreground/[0.06] h-px flex-1" />
+        {label}
+        <TurnBookmark turnEndId={item.id} />
+        <span className="bg-foreground/[0.06] h-px flex-1" />
+      </div>
+    </>
   );
 }
 

package/components/Claims/ClaimFiles.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+// The paths a claim touches, the ones another claim also touches marked.
+export function ClaimFiles({
+  files,
+  more,
+  shared,
+}: {
+  files: string[];
+  more: number;
+  shared: ReadonlySet<string>;
+}) {
+  return (
+    <ul className="bg-muted/40 mt-1 max-h-48 overflow-y-auto rounded-lg p-2 font-mono text-[11px] leading-5">
+      {files.map((f) => (
+        <li
+          key={f}
+          className={cn(
+            "break-all",
+            shared.has(f)
+              ? "text-amber-700 dark:text-amber-400"
+              : "text-muted-foreground"
+          )}
+        >
+          {f}
+        </li>
+      ))}
+      {more > 0 && (
+        <li className="text-muted-foreground pt-1">and {more} more</li>
+      )}
+      {files.length === 0 && more === 0 && (
+        <li className="text-muted-foreground">No changed files yet</li>
+      )}
+    </ul>
+  );
+}

package/components/Claims/ClaimRow.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronRight, ExternalLink, GitBranch } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Claim } from "@/lib/claims/types";
+import { ClaimFiles } from "./ClaimFiles";
+import { startedText } from "./format";
+
+// One piece of claimed work: what, where, since when; its files fold open.
+export function ClaimRow({
+  claim,
+  here,
+  now,
+  shared,
+}: {
+  claim: Claim;
+  here: boolean;
+  now: number;
+  shared: ReadonlySet<string>;
+}) {
+  const [open, setOpen] = useState(false);
+  const count = claim.files.length + claim.filesMore;
+  return (
+    <li className="bg-muted/40 rounded-xl" data-claim={claim.id}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="flex min-h-11 w-full items-start gap-2 rounded-xl p-3 text-left"
+      >
+        <ChevronRight
+          aria-hidden
+          className={cn(
+            "text-muted-foreground mt-0.5 h-4 w-4 shrink-0 transition-transform",
+            open && "rotate-90"
+          )}
+        />
+        <span className="min-w-0 flex-1">
+          <span className="block text-sm font-medium break-words">
+            {claim.goal}
+          </span>
+          <span className="text-muted-foreground mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs">
+            <span>
+              {here ? `${claim.originName} (here)` : claim.originName}
+            </span>
+            {claim.branch && (
+              <span className="flex min-w-0 items-center gap-1">
+                <GitBranch aria-hidden className="h-3 w-3 shrink-0" />
+                <span className="truncate">{claim.branch}</span>
+              </span>
+            )}
+            <span>{startedText(claim, now)}</span>
+            <span>
+              {count} file{count === 1 ? "" : "s"}
+            </span>
+          </span>
+        </span>
+      </button>
+      {claim.prUrl && (
+        <a
+          href={claim.prUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="text-primary flex min-h-11 items-center gap-1 px-3 pb-2 pl-9 text-xs hover:underline"
+        >
+          <ExternalLink aria-hidden className="h-3 w-3" />
+          Pull request
+        </a>
+      )}
+      {open && (
+        <div className="px-3 pb-3 pl-9">
+          <ClaimFiles
+            files={claim.files}
+            more={claim.filesMore}
+            shared={shared}
+          />
+        </div>
+      )}
+    </li>
+  );
+}

package/components/Claims/ClaimsSheet.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { useMemo } from "react";
+import { useSnapshot } from "valtio";
+import { GitCompareArrows } from "lucide-react";
+import { StatusPill } from "@/components/ui/status-pill";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useNow } from "@/components/Chat/useNow";
+import { useClaims } from "@/data/claims";
+import { claimsUi, claimsUiActions } from "@/stores/claimsUi";
+import { cn } from "@/lib/utils";
+import { ClaimRow } from "./ClaimRow";
+import { QUIET_MS, focusView, groupByRepo, lastHeardText } from "./format";
+
+const Skeleton = () => (
+  <div className="space-y-2" aria-label="Loading claims">
+    {[0, 1, 2].map((i) => (
+      <div key={i} className="bg-muted/40 h-16 animate-pulse rounded-xl" />
+    ))}
+  </div>
+);
+
+// Work across machines: what each linked machine's sessions are on, the
+// overlaps first, and when each machine was last heard from.
+export function ClaimsSheet() {
+  const snap = useSnapshot(claimsUi);
+  const { data, isPending, isError, dataUpdatedAt } = useClaims({
+    enabled: snap.open,
+  });
+  const tick = useNow(snap.open);
+  const now = tick + (data ? data.now - dataUpdatedAt : 0);
+  const view = useMemo(
+    () => (data ? focusView(data, snap.focus ? [...snap.focus] : null) : null),
+    [data, snap.focus]
+  );
+  const byId = useMemo(
+    () => new Map((view?.claims ?? []).map((c) => [c.id, c])),
+    [view]
+  );
+  const sharedOf = (id: string) =>
+    new Set(
+      (view?.overlaps ?? [])
+        .filter((o) => o.a === id || o.b === id)
+        .flatMap((o) => o.shared)
+    );
+  const here = data?.machine.id;
+
+  return (
+    <Dialog open={snap.open} onOpenChange={claimsUiActions.setOpen}>
+      <DialogContent className="max-h-[90vh] max-w-xl overflow-y-auto [&>*]:min-w-0">
+        <DialogHeader>
+          <DialogTitle>Work across machines</DialogTitle>
+          <DialogDescription className="sr-only">
+            What sessions on this and linked machines are working on, and where
+            the work overlaps.
+          </DialogDescription>
+        </DialogHeader>
+        {isPending && <Skeleton />}
+        {isError && (
+          <p className="text-destructive text-sm">Couldn’t load claims.</p>
+        )}
+        {data && view && (
+          <div className="space-y-4">
+            <ul className="flex flex-wrap gap-2" aria-label="Machines">
+              {data.machines.map((m) => {
+                const quiet =
+                  !m.self &&
+                  (m.lastHeardAt === null || now - m.lastHeardAt > QUIET_MS);
+                return (
+                  <li
+                    key={m.id}
+                    className="bg-muted/40 flex items-center gap-2 rounded-lg px-3 py-2 text-xs"
+                  >
+                    <span className="font-medium">{m.name}</span>
+                    <span
+                      className={cn(
+                        "text-muted-foreground",
+                        quiet && "text-amber-700 dark:text-amber-400"
+                      )}
+                    >
+                      {lastHeardText(m.lastHeardAt, now)}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+            {snap.focus && (
+              <button
+                type="button"
+                onClick={claimsUiActions.showAll}
+                className="text-primary min-h-11 text-sm"
+              >
+                Showing one pair. Show all work
+              </button>
+            )}
+            {view.overlaps.length > 0 && (
+              <section className="space-y-2" aria-label="Overlaps">
+                <h3 className="text-muted-foreground text-xs font-semibold tracking-wide uppercase">
+                  Overlaps
+                </h3>
+                <ul className="space-y-2">
+                  {view.overlaps.map((o) => {
+                    const a = byId.get(o.a);
+                    const b = byId.get(o.b);
+                    if (!a || !b) return null;
+                    return (
+                      <li
+                        key={`${o.a}|${o.b}`}
+                        className="bg-muted/40 flex items-start gap-2 rounded-xl p-3 text-sm"
+                      >
+                        <StatusPill
+                          tone={o.strength === "strong" ? "amber" : "muted"}
+                        >
+                          <GitCompareArrows
+                            aria-hidden
+                            className="h-2.5 w-2.5"
+                          />
+                          {o.strength}
+                        </StatusPill>
+                        <span className="min-w-0 flex-1 break-words">
+                          {a.goal} on {a.originName} and {b.goal} on{" "}
+                          {b.originName}
+                          <span className="text-muted-foreground block text-xs">
+                            {[
+                              o.kinds.join(" + "),
+                              o.shared.length
+                                ? `${o.shared.length} shared file${o.shared.length === 1 ? "" : "s"}`
+                                : null,
+                            ]
+                              .filter(Boolean)
+                              .join(" · ")}
+                          </span>
+                        </span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </section>
+            )}
+            {view.claims.length === 0 ? (
+              <p className="text-muted-foreground py-6 text-center text-sm">
+                Nothing is claimed right now. Work shows up here while a session
+                has changes in a repository.
+              </p>
+            ) : (
+              groupByRepo(view.claims).map((g) => (
+                <section key={g.repo} className="space-y-2" aria-label={g.repo}>
+                  <h3 className="text-muted-foreground truncate text-xs font-semibold">
+                    {g.repo}
+                  </h3>
+                  <ul className="space-y-2">
+                    {g.claims.map((c) => (
+                      <ClaimRow
+                        key={c.id}
+                        claim={c}
+                        here={c.origin === here}
+                        now={now}
+                        shared={sharedOf(c.id)}
+                      />
+                    ))}
+                  </ul>
+                </section>
+              ))
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Claims/OverlapPill.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { GitCompareArrows } from "lucide-react";
+import { StatusPill } from "@/components/ui/status-pill";
+import type { Session } from "@/lib/db";
+import { claimsUiActions } from "@/stores/claimsUi";
+
+// "Overlaps: box" on a session row: amber when the overlap is strong, muted
+// when weak. Tapping opens the claims sheet on that pair.
+export function OverlapPill({
+  overlap,
+}: {
+  overlap: NonNullable<Session["overlap"]>;
+}) {
+  const strong = overlap.strength === "strong";
+  const files = overlap.shared
+    ? ` · ${overlap.shared} shared file${overlap.shared === 1 ? "" : "s"}`
+    : "";
+  return (
+    <StatusPill
+      tone={strong ? "amber" : "muted"}
+      data-tip={`${strong ? "Strong" : "Weak"} overlap with "${overlap.goal}" on ${overlap.machine}${files}. Tap to see both.`}
+      aria-label={`Overlaps with ${overlap.machine}`}
+      data-overlap={overlap.strength}
+      onClick={() => claimsUiActions.open([overlap.mineId, overlap.claimId])}
+    >
+      <GitCompareArrows aria-hidden className="h-2.5 w-2.5 shrink-0" />
+      <span className="truncate">Overlaps: {overlap.machine}</span>
+    </StatusPill>
+  );
+}

package/components/Claims/StartClaimsNotice.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
+import type { StartWarning } from "@/lib/claims/startWarning";
+
+// Above the composer when a person's task start overlaps claimed work. They
+// choose: start anyway, queue it behind that work, or go back and edit.
+export function StartClaimsNotice({
+  warnings,
+  busy,
+  onStart,
+  onDismiss,
+}: {
+  warnings: StartWarning[];
+  busy: boolean;
+  onStart: (after?: string) => void;
+  onDismiss: () => void;
+}) {
+  const top = warnings[0];
+  if (!top) return null;
+  const files = top.shared.slice(0, 3).join(", ");
+  return (
+    <Notice
+      tone="warning"
+      action={
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            className="min-h-11 md:min-h-8"
+            disabled={busy}
+            onClick={() => onStart()}
+          >
+            Start anyway
+          </Button>
+          <Button
+            size="sm"
+            className="min-h-11 md:min-h-8"
+            disabled={busy}
+            onClick={() => onStart(`claim:${top.claim.id}`)}
+          >
+            Start after it
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="min-h-11 md:min-h-8"
+            disabled={busy}
+            onClick={onDismiss}
+          >
+            Edit
+          </Button>
+        </div>
+      }
+    >
+      <p className="font-medium">
+        {top.strength === "strong"
+          ? "Someone is already on this"
+          : "This may overlap"}
+        {warnings.length > 1 ? ` (${warnings.length} claims)` : ""}
+      </p>
+      <p className="text-muted-foreground text-xs break-words">
+        “{top.claim.goal}” on {top.claim.machine}
+        {top.claim.branch ? ` (${top.claim.branch})` : ""}
+        {files ? ` touches ${files}` : ""}
+      </p>
+    </Notice>
+  );
+}