@saadnvd1/agent-os 0.3.523 → 0.3.527

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"

package/components/Welcome/WelcomeDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo } from "react";
+import { memo, useState } from "react";
 import { useSnapshot } from "valtio";
 import { Check } from "lucide-react";
 import {
@@ -16,6 +16,9 @@ import { cn } from "@/lib/utils";
 import { WELCOME_STEPS, type WelcomeStep } from "@/lib/welcome-url";
 import { welcomeUi, welcomeUiActions } from "@/stores/welcomeUi";
 import { AgentList } from "./AgentList";
+import type { BrowserNotifications } from "@/components/Settings/NotificationsSection";
+import { HostsDialog } from "@/components/Hosts";
+import { DevicesStep } from "./DevicesStep";
 import { ProjectStep } from "./ProjectStep";
 
 const STEPS: Record<
@@ -32,6 +35,11 @@ const STEPS: Record<
     title: "Add your first project",
     hint: "A folder or repo for the first session to work in.",
   },
+  devices: {
+    label: "Devices",
+    title: "Use it from your phone",
+    hint: "All optional. Each can be done later from Settings.",
+  },
   finish: {
     label: "Start",
     title: "You're set",
@@ -61,8 +69,14 @@ function FinishStep() {
  * First-run setup: agents, then a first project, then a session. It stays
  * open until finished or skipped, and every step after the first can be skipped.
  */
-export const WelcomeDialog = memo(function WelcomeDialog() {
+export const WelcomeDialog = memo(function WelcomeDialog({
+  notifications,
+}: {
+  notifications: BrowserNotifications;
+}) {
   useWelcomeUrl();
+  // Held here so the machines dialog outlives a step change.
+  const [hostsOpen, setHostsOpen] = useState(false);
   const { open, step, projectId } = useSnapshot(welcomeUi);
   const end = useEndWelcome();
   const at = WELCOME_STEPS.indexOf(step);
@@ -77,7 +91,10 @@ export const WelcomeDialog = memo(function WelcomeDialog() {
         onEscapeKeyDown={(e) => e.preventDefault()}
         className="max-h-[100dvh] overflow-y-auto max-sm:h-[100dvh] max-sm:max-w-full max-sm:rounded-none sm:max-h-[90dvh] sm:max-w-xl"
       >
-        <nav aria-label="Setup steps" className="flex items-center gap-1">
+        <nav
+          aria-label="Setup steps"
+          className="flex min-w-0 items-center gap-1"
+        >
           {WELCOME_STEPS.map((s, i) => (
             <button
               key={s}
@@ -86,7 +103,7 @@ export const WelcomeDialog = memo(function WelcomeDialog() {
               onClick={() => welcomeUiActions.go(s)}
               aria-current={i === at ? "step" : undefined}
               className={cn(
-                "flex min-h-11 flex-1 items-center justify-center gap-1.5 rounded-lg px-2 text-xs font-medium sm:min-h-8",
+                "flex min-h-11 min-w-0 flex-1 items-center justify-center gap-1 rounded-lg px-1 text-xs font-medium sm:min-h-8 sm:gap-1.5 sm:px-2",
                 i === at
                   ? "bg-foreground/[0.08] text-foreground"
                   : "text-muted-foreground hover:bg-foreground/[0.06]"
@@ -99,7 +116,7 @@ export const WelcomeDialog = memo(function WelcomeDialog() {
           <Button
             variant="ghost"
             size="sm"
-            className="min-h-11 sm:min-h-8"
+            className="min-h-11 shrink-0 px-2 sm:min-h-8"
             onClick={() => end()}
           >
             Skip setup
@@ -111,6 +128,12 @@ export const WelcomeDialog = memo(function WelcomeDialog() {
         </div>
         {step === "agents" && <AgentList />}
         {step === "project" && <ProjectStep />}
+        {step === "devices" && (
+          <DevicesStep
+            notifications={notifications}
+            onLinkMachine={() => setHostsOpen(true)}
+          />
+        )}
         {step === "finish" && <FinishStep />}
         <div className="flex items-center justify-between gap-2">
           <Button
@@ -122,11 +145,11 @@ export const WelcomeDialog = memo(function WelcomeDialog() {
             Back
           </Button>
           <div className="flex items-center gap-2">
-            {step === "project" && (
+            {(step === "project" || step === "devices") && (
               <Button
                 variant="ghost"
                 className="min-h-11 sm:min-h-9"
-                onClick={() => welcomeUiActions.go("finish")}
+                onClick={() => welcomeUiActions.go(WELCOME_STEPS[at + 1])}
               >
                 Skip
               </Button>
@@ -148,6 +171,7 @@ export const WelcomeDialog = memo(function WelcomeDialog() {
           </div>
         </div>
       </DialogContent>
+      <HostsDialog open={hostsOpen} onClose={() => setHostsOpen(false)} />
     </Dialog>
   );
 });

package/data/doctor/index.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { DoctorCheck } from "@/lib/doctor/checks";
+
+export const doctorKeys = {
+  all: ["doctor"] as const,
+};
+
+async function fetchChecks(fresh: boolean) {
+  const res = await fetch(fresh ? "/api/doctor?fresh" : "/api/doctor");
+  if (!res.ok) throw new Error("Couldn't run the health checks");
+  return ((await res.json()) as { checks: DoctorCheck[] }).checks;
+}
+
+export function useDoctorQuery() {
+  return useQuery({
+    queryKey: doctorKeys.all,
+    queryFn: () => fetchChecks(false),
+    staleTime: 30_000,
+    refetchOnMount: "always",
+  });
+}
+
+export function useRecheckDoctor() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: () => fetchChecks(true),
+    onSuccess: (checks) => client.setQueryData(doctorKeys.all, checks),
+  });
+}

package/data/orchestrators/index.ts

@@ -162,3 +162,62 @@ export function usePauseOrchestrator(workspaceId: string) {
       queryClient.invalidateQueries({ queryKey: orchestratorKeys.all }),
   });
 }
+
+function patchOverview(
+  queryClient: ReturnType<typeof useQueryClient>,
+  workspaceId: string,
+  change: (o: OrchestratorOverview) => OrchestratorOverview
+) {
+  queryClient.setQueryData<OrchestratorOverview[]>(
+    orchestratorKeys.all,
+    (prev) => prev?.map((o) => (o.workspaceId === workspaceId ? change(o) : o))
+  );
+}
+
+// Hiding an item from the Needs-you strip (and showing it again). It never
+// answers an ask or a question; it is shared by his devices.
+export function useDismissNeedsYou(workspaceId: string) {
+  const queryClient = useQueryClient();
+  const url = `/api/workspaces/${workspaceId}/orchestrator/needs-you/dismiss`;
+  return useMutation({
+    mutationFn: async ({ key, undo }: { key: string; undo?: boolean }) => {
+      if (!undo) return post(url, { key });
+      return json(
+        await fetch(url, {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ key }),
+        })
+      );
+    },
+    onMutate: async ({ key, undo }) => {
+      await queryClient.cancelQueries({ queryKey: orchestratorKeys.all });
+      patchOverview(queryClient, workspaceId, (o) => ({
+        ...o,
+        dismissed: undo
+          ? o.dismissed.filter((k) => k !== key)
+          : [...o.dismissed, key],
+      }));
+    },
+    onSettled: () =>
+      queryClient.invalidateQueries({ queryKey: orchestratorKeys.all }),
+  });
+}
+
+// Saad answered a question the orchestrator put to him.
+export function useResolveQuestion(workspaceId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      post(`/api/workspaces/${workspaceId}/orchestrator/questions/${id}`, {}),
+    onMutate: async (id) => {
+      await queryClient.cancelQueries({ queryKey: orchestratorKeys.all });
+      patchOverview(queryClient, workspaceId, (o) => ({
+        ...o,
+        questions: o.questions.filter((q) => q.id !== id),
+      }));
+    },
+    onSettled: () =>
+      queryClient.invalidateQueries({ queryKey: orchestratorKeys.all }),
+  });
+}

package/data/push/topics.ts

@@ -55,6 +55,8 @@ function keysFor(topic: string): QueryKey[] {
     case "schedule_runs":
       return [scheduleKeys.all];
     case "orchestrator_asks":
+    case "orchestrator_questions":
+    case "needs_you_dismissed":
       return [orchestratorKeys.all];
     case "orchestrator_rules":
       return [ruleKeys.all];

package/data/simulator/index.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { simulatorPollInterval } from "./index";
+
+describe("simulatorPollInterval", () => {
+  it("polls while a lease is coming up or booted", () => {
+    for (const s of ["creating", "starting", "ready"] as const)
+      expect(simulatorPollInterval(s)).toBeGreaterThan(0);
+  });
+
+  it("does not poll with no lease, an idle-shutdown one, a failed one, or before the first read", () => {
+    for (const s of ["none", "shutdown", "failed", undefined] as const)
+      expect(simulatorPollInterval(s)).toBe(false);
+  });
+});

package/data/simulator/index.ts

@@ -0,0 +1,33 @@
+import { useQuery } from "@tanstack/react-query";
+import type { SimulatorStatus } from "@/lib/simulator";
+import { simulatorKeys } from "./keys";
+
+export { simulatorKeys };
+export type { SimulatorStatus };
+
+const POLL_MS = 10_000;
+
+// A lease being brought up or booted changes under us (idle shutdown, a new
+// screenshot); anything else only changes when the agent opens one, which the
+// next mount picks up.
+export function simulatorPollInterval(
+  state: SimulatorStatus["state"] | undefined
+): number | false {
+  return state === "creating" || state === "starting" || state === "ready"
+    ? POLL_MS
+    : false;
+}
+
+export function useSimulatorStatus(sessionId: string, enabled = true) {
+  return useQuery({
+    queryKey: simulatorKeys.status(sessionId),
+    queryFn: async (): Promise<SimulatorStatus> => {
+      const res = await fetch(`/api/sessions/${sessionId}/simulator`);
+      if (!res.ok) throw new Error("Could not read the simulator");
+      return res.json();
+    },
+    enabled,
+    staleTime: 30_000,
+    refetchInterval: (query) => simulatorPollInterval(query.state.data?.state),
+  });
+}

package/data/simulator/keys.ts

@@ -0,0 +1,5 @@
+export const simulatorKeys = {
+  all: ["simulator"] as const,
+  status: (sessionId: string) =>
+    [...simulatorKeys.all, "status", sessionId] as const,
+};

package/hooks/useNeedsYou.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useSessionsQuery } from "@/data/sessions/queries";
+import { useProjectsQuery } from "@/data/projects/queries";
+import { fetchStatuses } from "@/data/statuses/queries";
+import { statusKeys } from "@/data/sessions/keys";
+import { useOrchestratorOverview } from "@/data/orchestrators";
+import {
+  needsYouItems,
+  type NeedsYouItem,
+  type TaskNeed,
+} from "@/lib/orchestrator/needs-you-items";
+
+// Everything waiting on Saad in a workspace: its open asks and questions, the
+// tasks the sidebar marks as needing him, and its chat waiting on an answer.
+export function useNeedsYou(
+  workspaceId: string,
+  chatWaiting: boolean
+): NeedsYouItem[] {
+  const overview = useOrchestratorOverview(workspaceId);
+  const { data: sessions } = useSessionsQuery();
+  const { data: projects = [] } = useProjectsQuery();
+  const { data: statuses } = useQuery({
+    queryKey: statusKeys.all,
+    queryFn: fetchStatuses,
+    staleTime: 2000,
+  });
+  const tasks = useMemo(() => {
+    const members = new Set(
+      projects.filter((p) => p.workspace_id === workspaceId).map((p) => p.id)
+    );
+    return (sessions?.sessions ?? []).flatMap((s): TaskNeed[] => {
+      const need = statuses?.statuses[s.id]?.need;
+      return !s.role && s.project_id && members.has(s.project_id) && need
+        ? [{ sessionId: s.id, name: s.name, need }]
+        : [];
+    });
+  }, [sessions, projects, statuses, workspaceId]);
+  return useMemo(
+    () =>
+      needsYouItems({
+        asks: overview?.asks ?? [],
+        questions: overview?.questions ?? [],
+        dismissed: overview?.dismissed ?? [],
+        tasks,
+        chatWaiting,
+        chatKey: `approval:${workspaceId}`,
+      }),
+    [overview, tasks, chatWaiting, workspaceId]
+  );
+}

package/lib/chat/events.ts

@@ -81,6 +81,8 @@ export interface ChatOrigin {
   body?: string;
   // Lines of an event batch that are the reader's answers to asks.
   decided?: string[];
+  // The tasks it is about, by name, set where the event is delivered.
+  subjects?: { id: string; name: string }[];
   // Only Away mode's own lines: the turn it starts isn't anyone's activity
   // (lib/away/activity).
   away?: true;

package/lib/chat/find.ts

@@ -7,7 +7,12 @@
 
 import type { ChatItem } from "./events";
 import { lineDiff } from "./diff";
-import { groupTimeline, STANDALONE_TOOLS, type ToolItem } from "./group";
+import {
+  groupTimeline,
+  STANDALONE_TOOLS,
+  type GroupOptions,
+  type ToolItem,
+} from "./group";
 import { eventParts, originOf } from "./origin";
 
 export const MIN_QUERY = 2;
@@ -170,7 +175,11 @@ function rowKeys(item: ChatItem): string[] {
  * so it's on screen: a step inside its folded run, a message inside an undo.
  * Null when it isn't loaded (or the timeline never shows it).
  */
-export function locate(items: ChatItem[], id: string): Located | null {
+export function locate(
+  items: ChatItem[],
+  id: string,
+  opts: GroupOptions = {}
+): Located | null {
   const at = items.findIndex((i) => i.id === id);
   if (at === -1) return null;
   const inside = (
@@ -182,16 +191,28 @@ export function locate(items: ChatItem[], id: string): Located | null {
         return { open: [...open, ...rowKeys(b.item)] };
       if (b.type === "tools" && b.tools.some((t) => t.id === id))
         return { open: [...open, `steps:${b.id}`, `tool:${id}`] };
+      if (b.type === "events") {
+        const turn = b.turns.find(
+          (t) => t.id === id || t.replies.some((i) => i.id === id)
+        );
+        if (!turn) continue;
+        const opened = [...open, `events:${b.id}`, `eventturn:${turn.id}`];
+        if (turn.id === id) return { open: [...opened, ...rowKeys(turn.user)] };
+        return inside(groupTimeline(turn.replies), opened) ?? { open: opened };
+      }
       if (b.type === "undone" && b.items.some((i) => i.id === id))
         return (
-          inside(groupTimeline(b.items), [...open, `undone:${b.undo.id}`]) ?? {
+          inside(groupTimeline(b.items, opts), [
+            ...open,
+            `undone:${b.undo.id}`,
+          ]) ?? {
             open: [...open, `undone:${b.undo.id}`],
           }
         );
     }
     return null;
   };
-  const blocks = groupTimeline(items);
+  const blocks = groupTimeline(items, opts);
   const blockOf = (b: (typeof blocks)[number]) =>
     b.type === "item" ? b.item.id : b.id;
   for (const b of blocks) {

package/lib/chat/group.ts

@@ -1,4 +1,5 @@
 import type { ChatItem } from "./events";
+import { eventTurnAt, type EventTurn } from "./turns";
 
 export type ToolItem = Extract<ChatItem, { kind: "tool" }>;
 export type UndoItem = Extract<ChatItem, { kind: "undo" }>;
@@ -6,7 +7,14 @@ export type UndoItem = Extract<ChatItem, { kind: "undo" }>;
 export type TimelineBlock =
   | { type: "item"; item: ChatItem }
   | { type: "tools"; id: string; tools: ToolItem[] }
-  | { type: "undone"; id: string; undo: UndoItem; items: ChatItem[] };
+  | { type: "undone"; id: string; undo: UndoItem; items: ChatItem[] }
+  // Consecutive turns an event started, with the reply to each.
+  | { type: "events"; id: string; turns: EventTurn[] };
+
+export interface GroupOptions {
+  // Fold events and the replies to them (the orchestrator's chat).
+  foldEvents?: boolean;
+}
 
 // Tools worth seeing on their own rather than as one step among many.
 export const STANDALONE_TOOLS = new Set(["Skill", "Task", "Agent"]);
@@ -14,17 +22,45 @@ export const STANDALONE_TOOLS = new Set(["Skill", "Task", "Agent"]);
 // Consecutive tool calls (and the reasoning between them) fold into one
 // collapsible block, so a long turn reads as what was said, not every step.
 // Undone messages fold into one block behind the undo that took them back.
-export function groupTimeline(items: ChatItem[]): TimelineBlock[] {
+export function groupTimeline(
+  items: ChatItem[],
+  opts: GroupOptions = {}
+): TimelineBlock[] {
   const blocks: TimelineBlock[] = [];
   let tools: ToolItem[] = [];
   const flush = () => {
     if (tools.length) blocks.push({ type: "tools", id: tools[0].id, tools });
     tools = [];
   };
+  let turns: EventTurn[] = [];
+  const flushTurns = () => {
+    if (turns.length)
+      blocks.push({ type: "events", id: `ev-${turns[0].id}`, turns });
+    turns = [];
+  };
   const ends = undoneRanges(items);
+  // Where the next undone range starts: a turn stops short of it.
+  const starts = [...ends.keys()].sort((a, b) => a - b);
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const end = ends.get(i);
+    if (opts.foldEvents && end === undefined && item.kind === "user") {
+      const limit = starts.find((s) => s > i) ?? items.length;
+      const found = eventTurnAt(items, i, limit);
+      if (found) {
+        flush();
+        turns.push(found.turn);
+        i = found.end - 1;
+        continue;
+      }
+    }
+    // What the timeline never shows doesn't break a run of events.
+    const hidden =
+      item.kind === "task" ||
+      (item.kind === "approval" &&
+        item.status !== "pending" &&
+        !(item.status === "answered" && item.questions));
+    if (!hidden) flushTurns();
     if (end !== undefined) {
       flush();
       blocks.push({
@@ -57,6 +93,7 @@ export function groupTimeline(items: ChatItem[]): TimelineBlock[] {
     }
   }
   flush();
+  flushTurns();
   return blocks;
 }
 
@@ -89,6 +126,17 @@ export function sameBlock(a: TimelineBlock, b: TimelineBlock): boolean {
     return sameItems(a.tools, b.tools);
   if (a.type === "undone" && b.type === "undone")
     return a.undo === b.undo && sameItems(a.items, b.items);
+  if (a.type === "events" && b.type === "events")
+    return (
+      a.id === b.id &&
+      a.turns.length === b.turns.length &&
+      a.turns.every(
+        (t, i) =>
+          t.user === b.turns[i].user &&
+          t.live === b.turns[i].live &&
+          sameItems(t.replies, b.turns[i].replies)
+      )
+    );
   return false;
 }