@saadnvd1/agent-os 0.3.524 → 0.3.527

package/components/Orchestrator/NeedsYouStrip.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { memo, useState } from "react";
+import {
+  AlertCircle,
+  ChevronDown,
+  CornerDownLeft,
+  GitMerge,
+  MessageCircleQuestion,
+  UserRound,
+  X,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useDismissNeedsYou } from "@/data/orchestrators";
+import { useNeedsYou } from "@/hooks/useNeedsYou";
+import type { NeedsYouItem } from "@/lib/orchestrator/needs-you-items";
+import { cn } from "@/lib/utils";
+
+const ICON = {
+  ask: AlertCircle,
+  question: MessageCircleQuestion,
+  chat: MessageCircleQuestion,
+  task: UserRound,
+} as const;
+
+const STORE = "agentos:needs-you-open";
+
+export interface NeedsYouActions {
+  // Show the item where it is: the ask's card, the message, the session.
+  onGo: (item: NeedsYouItem) => void;
+  // Answer a question in the composer.
+  onReply: (item: Extract<NeedsYouItem, { kind: "question" }>) => void;
+}
+
+// Pinned above the composer: everything waiting on Saad, one line each, until
+// it is resolved. Dismissing an item only hides it; an ask stays open.
+export const NeedsYouStrip = memo(function NeedsYouStrip({
+  workspaceId,
+  chatWaiting,
+  onGo,
+  onReply,
+}: NeedsYouActions & { workspaceId: string; chatWaiting: boolean }) {
+  const items = useNeedsYou(workspaceId, chatWaiting);
+  const dismiss = useDismissNeedsYou(workspaceId);
+  // Open on a wide screen, closed on a phone, then as he left it. It renders
+  // nothing until the orchestrator's data has loaded, so never on the server.
+  const [open, setOpen] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const saved = localStorage.getItem(STORE);
+    return saved ? saved === "1" : window.innerWidth >= 768;
+  });
+  if (!items.length) return null;
+  const toggle = () => {
+    localStorage.setItem(STORE, open ? "0" : "1");
+    setOpen(!open);
+  };
+  const hide = (item: NeedsYouItem) =>
+    dismiss.mutate(
+      { key: item.key },
+      {
+        onSuccess: () =>
+          toast("Hidden from Needs you", {
+            action: {
+              label: "Undo",
+              onClick: () => dismiss.mutate({ key: item.key, undo: true }),
+            },
+          }),
+        onError: (e) => toast.error(e.message),
+      }
+    );
+  const newest = items[0];
+
+  return (
+    <section
+      aria-label="Needs you"
+      data-needs-you
+      className="mb-2 overflow-hidden rounded-xl border border-amber-500/30 bg-amber-500/[0.06]"
+    >
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={open}
+        className="flex min-h-11 w-full items-center gap-2 px-3 text-left text-xs"
+      >
+        <span className="rounded-full bg-amber-500/20 px-1.5 py-0.5 font-mono text-[10px] font-medium text-amber-700 dark:text-amber-300">
+          {items.length}
+        </span>
+        <span className="font-medium text-amber-700 dark:text-amber-300">
+          Needs you
+        </span>
+        {!open && (
+          <span className="text-muted-foreground min-w-0 flex-1 truncate">
+            {newest.title}
+          </span>
+        )}
+        <ChevronDown
+          className={cn(
+            "text-muted-foreground ml-auto h-3.5 w-3.5 shrink-0 transition-transform",
+            !open && "-rotate-90"
+          )}
+        />
+      </button>
+      {open && (
+        <ul className="max-h-48 divide-y divide-amber-500/15 overflow-y-auto border-t border-amber-500/15">
+          {items.map((item) => {
+            const Icon =
+              item.kind === "ask" && item.ask.kind === "gate"
+                ? GitMerge
+                : ICON[item.kind];
+            return (
+              <li key={item.key} className="flex items-center">
+                <button
+                  type="button"
+                  onClick={() => onGo(item)}
+                  className="hover:bg-foreground/[0.04] flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3 text-left text-xs"
+                >
+                  <Icon className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+                  <span className="min-w-0 flex-1 truncate">{item.title}</span>
+                  <span className="text-muted-foreground/70 hidden max-w-[30%] shrink-0 truncate sm:block">
+                    {item.sub}
+                  </span>
+                </button>
+                {item.kind === "question" && (
+                  <button
+                    type="button"
+                    onClick={() => onReply(item)}
+                    aria-label="Reply"
+                    className="text-muted-foreground hover:text-foreground flex size-11 shrink-0 items-center justify-center"
+                  >
+                    <CornerDownLeft className="h-3.5 w-3.5" />
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={() => hide(item)}
+                  aria-label="Dismiss"
+                  className="text-muted-foreground hover:text-foreground flex size-11 shrink-0 items-center justify-center"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+});

package/components/Orchestrator/OrchestratorBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { memo, useState, useSyncExternalStore } from "react";
+import { memo, useEffect, useState, useSyncExternalStore } from "react";
+import { useSnapshot } from "valtio";
 import { ChevronDown, Pause, Play } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -10,6 +11,7 @@ import { headerParts } from "@/lib/orchestrator/header-line";
 import { cn } from "@/lib/utils";
 import { useSchedulesGlance } from "@/components/SessionList/useSchedulesGlance";
 import { schedulesUiActions } from "@/stores/schedulesUi";
+import { needsYouFocus } from "@/stores/needsYouFocus";
 import { NO_PASSKEYS_HERE, passkeysHere } from "@/data/presence";
 import { AsksList } from "./AsksList";
 
@@ -24,7 +26,30 @@ export const OrchestratorBar = memo(function OrchestratorBar({
   const { overview, counts } = useOrchestratorHeader(workspaceId);
   const pause = usePauseOrchestrator(workspaceId);
   const { upcomingText } = useSchedulesGlance(workspaceId);
-  const [open, setOpen] = useState(true);
+  // Closed: the Needs-you strip above the composer lists them.
+  const [open, setOpen] = useState(false);
+  const { ask: focus } = useSnapshot(needsYouFocus);
+  useEffect(() => {
+    if (!focus) return;
+    // Open the list, then find the card once it is there.
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      setOpen(true);
+      second = requestAnimationFrame(() => {
+        const card = document.getElementById(`ask-${focus.id}`);
+        card?.scrollIntoView({ block: "center", behavior: "smooth" });
+        card?.classList.add("ring-2", "ring-amber-500/60");
+        setTimeout(
+          () => card?.classList.remove("ring-2", "ring-amber-500/60"),
+          1600
+        );
+      });
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [focus]);
   const canProve = useSyncExternalStore(
     () => () => {},
     passkeysHere,

package/components/Settings/SettingsDialog.tsx

@@ -81,8 +81,8 @@ export const SECTION_INFO: Record<
     icon: ClipboardList,
   },
   setup: {
-    label: "Setup",
-    hint: "Agents on this machine, first-run setup",
+    label: "Setup & health",
+    hint: "What this machine has, agents, first-run setup",
     icon: ListChecks,
   },
 };

package/components/Settings/SetupSection.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { HealthList } from "@/components/Welcome/HealthList";
 import { AgentList } from "@/components/Welcome/AgentList";
 import { settingsUiActions } from "@/stores/settingsUi";
 import { welcomeUiActions } from "@/stores/welcomeUi";
 
-// What this machine has for running agents, and the first-run setup again.
+// What this machine has for running AgentOS and agents, and the first-run setup again.
 export function SetupSection() {
   return (
     <div className="flex flex-col gap-4">
@@ -28,6 +29,10 @@ export function SetupSection() {
           Run setup again
         </Button>
       </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-sm font-medium">Health</h3>
+        <HealthList />
+      </div>
       <div className="flex flex-col gap-2">
         <h3 className="text-sm font-medium">Agents on this machine</h3>
         <AgentList />

package/components/Simulator/ScreenshotStrip.test.ts

@@ -0,0 +1,91 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { SimulatorStatus } from "@/data/simulator";
+
+for (const key of [
+  "Event",
+  "CustomEvent",
+  "FocusEvent",
+  "PopStateEvent",
+  "NodeFilter",
+  "HTMLButtonElement",
+])
+  Object.defineProperty(globalThis, key, {
+    value: (window as unknown as Record<string, unknown>)[key],
+    configurable: true,
+    writable: true,
+  });
+
+let status: Partial<SimulatorStatus> | undefined;
+vi.mock("@/data/simulator", () => ({
+  useSimulatorStatus: () => ({ data: status }),
+}));
+
+import { ScreenshotStrip, SimulatorIndicator } from "./ScreenshotStrip";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+let host: HTMLElement | null = null;
+async function mount(el: ReturnType<typeof createElement>) {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () => root!.render(el));
+}
+afterEach(async () => {
+  await act(async () => root?.unmount());
+  host?.remove();
+  document.body.innerHTML = "";
+});
+
+const indicator = () => createElement(SimulatorIndicator, { sessionId: "s1" });
+const button = () => document.querySelector("button[aria-label^='Simulator']");
+
+describe("SimulatorIndicator", () => {
+  it("renders nothing without a lease, while starting, or once shut down", async () => {
+    for (const state of [undefined, "none", "starting", "shutdown", "failed"]) {
+      status = state ? ({ state, shots: [] } as never) : undefined;
+      await mount(indicator());
+      expect(button()).toBeNull();
+      await act(async () => root!.unmount());
+      host!.remove();
+    }
+  });
+
+  it("shows the phone with no count when booted and no shots yet", async () => {
+    status = { state: "ready", shots: [] };
+    await mount(indicator());
+    expect(button()?.getAttribute("aria-label")).toBe(
+      "Simulator booted, 0 screenshots"
+    );
+    expect(button()?.textContent).toBe("");
+  });
+
+  it("shows the screenshot count and opens the strip, then a shot full size", async () => {
+    status = { state: "ready", shots: ["/t/a b.png", "/t/c.png"] };
+    await mount(indicator());
+    expect(button()?.textContent).toBe("2");
+    await act(async () => (button() as HTMLElement).click());
+    const thumbs = document.querySelectorAll("img");
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0].getAttribute("src")).toBe(
+      "/api/files/image?path=%2Ft%2Fa%20b.png"
+    );
+    await act(async () => (thumbs[1].closest("button") as HTMLElement).click());
+    const full = document.querySelectorAll("img");
+    expect(full).toHaveLength(1);
+    expect(full[0].getAttribute("src")).toContain("c.png");
+  });
+});
+
+describe("ScreenshotStrip", () => {
+  it("says so when there are none", async () => {
+    await mount(createElement(ScreenshotStrip, { shots: [] }));
+    expect(document.body.textContent).toContain("No screenshots yet");
+  });
+});

package/components/Simulator/ScreenshotStrip.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft, Smartphone } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useSimulatorStatus } from "@/data/simulator";
+import { cn } from "@/lib/utils";
+
+export const shotUrl = (file: string) =>
+  `/api/files/image?path=${encodeURIComponent(file)}`;
+
+// The phone icon on a task whose simulator is up; tapping it opens the
+// latest screenshots.
+export function SimulatorIndicator({ sessionId }: { sessionId: string }) {
+  const { data } = useSimulatorStatus(sessionId);
+  const [open, setOpen] = useState(false);
+  if (data?.state !== "ready") return null;
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-11 md:h-8"
+          aria-label={`Simulator booted, ${data.shots.length} screenshots`}
+        >
+          <Smartphone className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
+          {data.shots.length > 0 && (
+            <span className="font-mono text-[11px]">{data.shots.length}</span>
+          )}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-h-[90dvh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Simulator</DialogTitle>
+          <DialogDescription>
+            Latest screenshots, newest last.
+          </DialogDescription>
+        </DialogHeader>
+        <ScreenshotStrip shots={data.shots} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function ScreenshotStrip({ shots }: { shots: string[] }) {
+  const [selected, setSelected] = useState<string | null>(null);
+  if (shots.length === 0)
+    return <p className="text-muted-foreground text-sm">No screenshots yet.</p>;
+  if (selected)
+    return (
+      <div className="space-y-3">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 md:h-8"
+          onClick={() => setSelected(null)}
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          All screenshots
+        </Button>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={shotUrl(selected)}
+          alt="Simulator screenshot"
+          className="mx-auto max-h-[70dvh] w-auto rounded-lg border"
+        />
+      </div>
+    );
+  return (
+    <ul className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-2">
+      {shots.map((file, i) => (
+        <li key={file} className="shrink-0">
+          <button
+            type="button"
+            onClick={() => setSelected(file)}
+            aria-label={`Screenshot ${i + 1} of ${shots.length}`}
+            className={cn(
+              "bg-foreground/[0.04] focus-visible:ring-ring block min-h-11 min-w-11 overflow-hidden rounded-lg border focus-visible:ring-2 focus-visible:outline-none"
+            )}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={shotUrl(file)}
+              alt=""
+              loading="lazy"
+              className="h-40 w-auto"
+            />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/components/Simulator/index.ts

@@ -0,0 +1 @@
+export { SimulatorIndicator, ScreenshotStrip } from "./ScreenshotStrip";

package/components/Tasks/TaskRow.tsx

@@ -20,6 +20,7 @@ import { Markdown } from "@/components/Chat/Markdown";
 import { tmuxAttachActions } from "@/stores/tmuxAttach";
 import { tasksUiActions } from "@/stores/tasksUi";
 import { cn } from "@/lib/utils";
+import { SimulatorIndicator } from "@/components/Simulator";
 import { MoveTaskButton } from "./MoveTaskButton";
 import { ResumeOnModel } from "./ResumeOnModel";
 import { TASK_STATE as STATE } from "./task-state-labels";
@@ -118,6 +119,7 @@ export function TaskRow({ task }: { task: TaskView }) {
               </a>
             </Button>
           )}
+          {!task.hostId && <SimulatorIndicator sessionId={task.id} />}
           <MoveTaskButton task={task} onError={setMoveError} />
           {!task.hostId && <ResumeOnModel task={task} />}
           <span className="flex-1" />

package/components/Welcome/DevicesStep.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { Bell, Laptop, Smartphone } from "lucide-react";
+import { AddDevicePanel } from "@/components/Devices/AddDevicePanel";
+import {
+  NotificationsSection,
+  type BrowserNotifications,
+} from "@/components/Settings/NotificationsSection";
+import { Button } from "@/components/ui/button";
+
+function Block({
+  icon: Icon,
+  title,
+  detail,
+  children,
+}: {
+  icon: typeof Bell;
+  title: string;
+  detail: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="bg-muted/40 flex min-w-0 flex-col gap-3 rounded-lg px-3 py-3">
+      <div className="flex items-start gap-3">
+        <Icon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-medium">{title}</h3>
+          <p className="text-muted-foreground text-xs">{detail}</p>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/**
+ * Pair a phone, link another machine, set up notifications. Every part is
+ * optional and lives in Settings too.
+ */
+export function DevicesStep({
+  notifications,
+  onLinkMachine,
+}: {
+  notifications: BrowserNotifications;
+  onLinkMachine: () => void;
+}) {
+  const [pairing, setPairing] = useState(false);
+  return (
+    <div className="flex min-w-0 flex-col gap-3">
+      <Block
+        icon={Smartphone}
+        title="Pair your phone"
+        detail="Scan a code to use AgentOS from your phone."
+      >
+        {pairing ? (
+          <AddDevicePanel onDone={() => setPairing(false)} />
+        ) : (
+          <Button
+            variant="outline"
+            className="min-h-11 sm:min-h-9"
+            onClick={() => setPairing(true)}
+          >
+            Show pairing code
+          </Button>
+        )}
+      </Block>
+      <Block
+        icon={Laptop}
+        title="Link another machine"
+        detail="Run sessions on a server or second computer over ssh."
+      >
+        <Button
+          variant="outline"
+          className="min-h-11 sm:min-h-9"
+          onClick={onLinkMachine}
+        >
+          Add a machine
+        </Button>
+      </Block>
+      <Block
+        icon={Bell}
+        title="Notifications"
+        detail="Hear when a session needs you."
+      >
+        <NotificationsSection browser={notifications} />
+      </Block>
+    </div>
+  );
+}

package/components/Welcome/HealthList.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { AlertTriangle, Check, RefreshCw, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useDoctorQuery, useRecheckDoctor } from "@/data/doctor";
+import type { CheckStatus } from "@/lib/doctor/checks";
+import { cn } from "@/lib/utils";
+
+const ICON = { ok: Check, warn: AlertTriangle, fail: X } as const;
+const TONE: Record<CheckStatus, string> = {
+  ok: "text-primary",
+  warn: "text-muted-foreground",
+  fail: "text-destructive",
+};
+
+/** What this machine needs to run AgentOS, one line per tool. */
+export function HealthList() {
+  const { data: checks, isPending, isError } = useDoctorQuery();
+  const recheck = useRecheckDoctor();
+  return (
+    <div className="flex flex-col gap-2">
+      {isPending && (
+        <div className="bg-muted/40 h-24 animate-pulse rounded-lg" />
+      )}
+      {isError && (
+        <p className="text-destructive text-sm">
+          Couldn&apos;t run the health checks.
+        </p>
+      )}
+      <ul className="flex flex-col gap-2">
+        {checks?.map((c) => {
+          const Icon = ICON[c.status];
+          return (
+            <li
+              key={c.id}
+              className="bg-muted/40 flex min-h-11 items-start gap-3 rounded-lg px-3 py-2"
+            >
+              <Icon
+                aria-label={c.status}
+                className={cn("mt-0.5 size-4 shrink-0", TONE[c.status])}
+              />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">{c.label}</p>
+                <p className="text-muted-foreground text-xs break-words">
+                  {c.detail}
+                </p>
+                {c.fix && c.status !== "ok" && (
+                  <code className="bg-background mt-1 block rounded px-2 py-1 text-xs break-all">
+                    {c.fix}
+                  </code>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      <Button
+        size="sm"
+        variant="ghost"
+        className="self-end"
+        disabled={recheck.isPending}
+        onClick={() => recheck.mutate()}
+      >
+        <RefreshCw className={recheck.isPending ? "animate-spin" : ""} />
+        Check again
+      </Button>
+    </div>
+  );
+}

package/components/Welcome/ProjectStep.tsx

@@ -41,10 +41,7 @@ export function ProjectStep() {
   const own = projects.filter((p) => !p.is_uncategorized);
 
   const add = (kind: AddProjectKind) =>
-    addProjectActions.show(kind, "local", (id) => {
-      welcomeUiActions.setProject(id);
-      welcomeUiActions.go("finish");
-    });
+    addProjectActions.show(kind, "local", welcomeUiActions.chooseProject);
 
   return (
     <div className="flex flex-col gap-3">
@@ -54,10 +51,7 @@ export function ProjectStep() {
             <li key={p.id}>
               <button
                 type="button"
-                onClick={() => {
-                  welcomeUiActions.setProject(p.id);
-                  welcomeUiActions.go("finish");
-                }}
+                onClick={() => welcomeUiActions.chooseProject(p.id)}
                 className={cn(
                   "bg-muted/40 hover:bg-accent flex min-h-11 w-full items-center gap-3 rounded-lg px-3 py-2 text-left",
                   projectId === p.id && "ring-primary/40 ring-2"