@saadnvd1/agent-os 0.3.520 → 0.3.523

package/components/Chat/background.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { Check, ChevronRight, Layers, Loader2, X } from "lucide-react";
+import type { ChatItem } from "@/lib/chat/events";
+import type { ToolItem } from "@/lib/chat/group";
+import { backgroundable } from "@/lib/chat/background";
+import { formatElapsed } from "@/lib/chat/elapsed";
+import { cn } from "@/lib/utils";
+import { useNow } from "./useNow";
+
+type Task = Extract<ChatItem, { kind: "task" }>;
+
+export interface BackgroundValue {
+  // The agent can move a call to the background.
+  supported: boolean;
+  // The task a tool call started, by the call's id.
+  taskOfTool: (toolUseId: string) => Task | undefined;
+  taskById: (taskId: string) => Task | undefined;
+  // Calls asked to move and not yet answered ("all" for the shortcut).
+  moving: ReadonlySet<string>;
+  send: (toolUseId?: string) => void;
+  // Opens the tray on that task.
+  reveal: (taskId: string) => void;
+}
+
+const none: BackgroundValue = {
+  supported: false,
+  taskOfTool: () => undefined,
+  taskById: () => undefined,
+  moving: new Set(),
+  send: () => {},
+  reveal: () => {},
+};
+
+export const Background = createContext<BackgroundValue>(none);
+export const useBackground = () => useContext(Background);
+
+// Moves the call it sits on to the background. Only there while that can
+// work: after a few seconds of running, so quick commands never show it.
+export function BackgroundButton({ tool }: { tool: ToolItem }) {
+  const bg = useBackground();
+  const running = tool.status === "running";
+  const now = useNow(running && bg.supported);
+  if (!backgroundable(bg.supported, tool, bg.taskOfTool(tool.id), now))
+    return null;
+  const moving = bg.moving.has(tool.id) || bg.moving.has("all");
+  return (
+    <button
+      type="button"
+      disabled={moving}
+      onClick={(e) => {
+        e.stopPropagation();
+        bg.send(tool.id);
+      }}
+      title="Run in background (Ctrl+B)"
+      aria-label="Run in background"
+      className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] animate-in fade-in flex h-11 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-xs duration-150 disabled:opacity-70 md:h-7 md:px-2"
+    >
+      {moving ? (
+        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+      ) : (
+        <Layers className="h-3.5 w-3.5" />
+      )}
+      <span className="hidden sm:inline">
+        {moving ? "Moving…" : "Background"}
+      </span>
+    </button>
+  );
+}
+
+// Where a call that went to the background stands: running there (opens
+// the tray on it), or how it ended.
+export function BackgroundState({ tool }: { tool: ToolItem }) {
+  const bg = useBackground();
+  const task = tool.backgroundTaskId
+    ? bg.taskById(tool.backgroundTaskId)
+    : undefined;
+  const running = task?.status === "running";
+  const now = useNow(running);
+  if (!tool.backgroundTaskId) return null;
+  if (!task || running)
+    return (
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          bg.reveal(tool.backgroundTaskId!);
+        }}
+        className="text-muted-foreground hover:text-foreground flex shrink-0 items-center gap-1 text-[11px]"
+      >
+        in background
+        <ChevronRight className="h-3 w-3" />
+      </button>
+    );
+  const failed = task.status === "failed";
+  const took = formatElapsed((task.endedAt ?? now) - task.createdAt);
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex shrink-0 items-center gap-1 text-[11px]",
+        failed && "text-destructive"
+      )}
+    >
+      {failed ? <X className="h-3 w-3" /> : <Check className="h-3 w-3" />}
+      {task.status === "stopped"
+        ? "stopped in background"
+        : failed
+          ? "failed in background"
+          : "ran in background"}
+      <span className="font-mono tabular-nums">· {took}</span>
+    </span>
+  );
+}

package/components/Projects/AddProject/AddProjectDialog.tsx

@@ -29,8 +29,8 @@ export function AddProjectDialog() {
   const { open } = useSnapshot(addProjectUi);
   const hostNames = useHostNames();
   const done = (projectId: string) => {
-    addProjectActions.close();
-    newDraft({ kind: "project", projectId });
+    if (!addProjectActions.finish(projectId))
+      newDraft({ kind: "project", projectId });
   };
 
   return (

package/components/Settings/SettingsDialog.tsx

@@ -11,6 +11,7 @@ import {
   Cpu,
   GitMerge,
   LayoutGrid,
+  ListChecks,
   Smartphone,
   X,
   type LucideIcon,
@@ -34,6 +35,7 @@ import { SETTINGS_SECTIONS, type SettingsSection } from "@/lib/settings-url";
 import { cn } from "@/lib/utils";
 import { schedulesUiActions } from "@/stores/schedulesUi";
 import { settingsUi, settingsUiActions } from "@/stores/settingsUi";
+import { SetupSection } from "./SetupSection";
 import {
   NotificationsSection,
   type BrowserNotifications,
@@ -78,6 +80,11 @@ export const SECTION_INFO: Record<
     hint: "Where sessions spent tokens and repeated work",
     icon: ClipboardList,
   },
+  setup: {
+    label: "Setup",
+    hint: "Agents on this machine, first-run setup",
+    icon: ListChecks,
+  },
 };
 
 function SectionBody({
@@ -102,6 +109,8 @@ function SectionBody({
       return <SchedulesPanel />;
     case "audits":
       return <AuditsPanel />;
+    case "setup":
+      return <SetupSection />;
   }
 }
 

package/components/Settings/SetupSection.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+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.
+export function SetupSection() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="bg-muted/40 flex items-center gap-3 rounded-lg px-3 py-2.5">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium">First-run setup</p>
+          <p className="text-muted-foreground text-xs">
+            Agents, your first project, and a first session.
+          </p>
+        </div>
+        <Button
+          size="sm"
+          variant="outline"
+          className="min-h-11 sm:min-h-8"
+          onClick={() => {
+            settingsUiActions.close();
+            welcomeUiActions.open("agents");
+          }}
+        >
+          Run setup again
+        </Button>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-sm font-medium">Agents on this machine</h3>
+        <AgentList />
+      </div>
+    </div>
+  );
+}

package/components/Welcome/AgentList.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAgentStatusQuery, useRecheckAgents } from "@/data/agents";
+import { FEATURED_AGENTS } from "@/lib/agents/setup-commands";
+import { getAllProviderDefinitions } from "@/lib/providers/registry";
+import { AgentRow, type AgentRun } from "./AgentRow";
+import { SetupTerminal } from "./SetupTerminal";
+
+/**
+ * Every agent CLI on this machine with what it needs, and an embedded
+ * terminal to install or sign one in. Checks again when it opens and when a
+ * terminal is closed, never on a timer.
+ */
+export function AgentList() {
+  const { data: agents } = useAgentStatusQuery();
+  const recheck = useRecheckAgents();
+  const [run, setRun] = useState<(AgentRun & { key: number }) | null>(null);
+  const [all, setAll] = useState(false);
+  const { mutate } = recheck;
+
+  useEffect(() => mutate(), [mutate]);
+
+  const providers = getAllProviderDefinitions().filter((p) => p.cli);
+  const shown = providers.filter((p) => all || FEATURED_AGENTS.includes(p.id));
+  const hidden = providers.length - shown.length;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <ul className="flex flex-col gap-2">
+        {shown.map((p) => (
+          <AgentRow
+            key={p.id}
+            provider={p}
+            probe={agents?.[p.id]}
+            onRun={(r) => setRun({ ...r, key: Date.now() })}
+          />
+        ))}
+      </ul>
+      {run && (
+        <SetupTerminal
+          key={run.key}
+          title={run.title}
+          command={run.command}
+          onDone={() => {
+            setRun(null);
+            mutate();
+          }}
+        />
+      )}
+      <div className="flex items-center justify-between gap-2">
+        {hidden > 0 ? (
+          <Button size="sm" variant="ghost" onClick={() => setAll(true)}>
+            Show {hidden} more
+          </Button>
+        ) : (
+          <span />
+        )}
+        <Button
+          size="sm"
+          variant="ghost"
+          disabled={recheck.isPending}
+          onClick={() => mutate()}
+        >
+          <RefreshCw className={recheck.isPending ? "animate-spin" : ""} />
+          Check again
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Welcome/AgentRow.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { Check, Download, LogIn } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { AgentProbe } from "@/lib/agents/probe";
+import { agentState, SETUP_COMMANDS } from "@/lib/agents/setup-commands";
+import type { ProviderDefinition } from "@/lib/providers/registry";
+
+const LABEL = {
+  missing: "Not installed",
+  "needs-login": "Needs sign-in",
+  ready: "Ready",
+  installed: "Installed",
+} as const;
+
+export type AgentRun = { title: string; command: string };
+
+/** One agent CLI: its state, and the install or sign-in it needs. */
+export function AgentRow({
+  provider,
+  probe,
+  onRun,
+}: {
+  provider: ProviderDefinition;
+  probe: AgentProbe | undefined;
+  onRun: (run: AgentRun) => void;
+}) {
+  const state = probe ? agentState(probe) : null;
+  const commands = SETUP_COMMANDS[provider.id];
+  return (
+    <li className="bg-muted/40 flex min-h-11 items-center gap-3 rounded-lg px-3 py-2">
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">{provider.name}</p>
+        <p className="text-muted-foreground truncate text-xs">
+          {probe?.version
+            ? `v${probe.version}`
+            : (probe?.hint ?? provider.description)}
+        </p>
+      </div>
+      {!state && <Badge variant="outline">Checking</Badge>}
+      {state === "ready" && (
+        <Badge variant="success">
+          <Check className="mr-1 size-3" />
+          {LABEL.ready}
+        </Badge>
+      )}
+      {state === "installed" && <Badge variant="outline">{LABEL[state]}</Badge>}
+      {state === "needs-login" && (
+        <>
+          <Badge variant="secondary">{LABEL[state]}</Badge>
+          {commands?.signIn && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="min-h-11 sm:min-h-8"
+              onClick={() =>
+                onRun({
+                  title: `Sign in to ${provider.name}`,
+                  command: commands.signIn!,
+                })
+              }
+            >
+              <LogIn />
+              Sign in
+            </Button>
+          )}
+        </>
+      )}
+      {state === "missing" &&
+        (commands?.install ? (
+          <Button
+            size="sm"
+            variant="outline"
+            className="min-h-11 sm:min-h-8"
+            onClick={() =>
+              onRun({
+                title: `Install ${provider.name}`,
+                command: commands.install!,
+              })
+            }
+          >
+            <Download />
+            Install
+          </Button>
+        ) : commands?.docs ? (
+          <Button
+            size="sm"
+            variant="outline"
+            className="min-h-11 sm:min-h-8"
+            asChild
+          >
+            <a href={commands.docs} target="_blank" rel="noreferrer">
+              How to install
+            </a>
+          </Button>
+        ) : (
+          <Badge variant="outline">{LABEL.missing}</Badge>
+        ))}
+    </li>
+  );
+}

package/components/Welcome/ProjectStep.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { FolderGit2, FolderOpen, FolderPlus, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useProjectsQuery } from "@/data/projects/queries";
+import { cn } from "@/lib/utils";
+import { addProjectActions, type AddProjectKind } from "@/stores/addProject";
+import { welcomeUi, welcomeUiActions } from "@/stores/welcomeUi";
+import { useSnapshot } from "valtio";
+
+const WAYS: {
+  kind: AddProjectKind;
+  title: string;
+  hint: string;
+  icon: typeof FolderOpen;
+}[] = [
+  {
+    kind: "folder",
+    title: "Open a folder",
+    hint: "A project already on this machine",
+    icon: FolderOpen,
+  },
+  {
+    kind: "clone",
+    title: "Clone a repo",
+    hint: "From a Git URL",
+    icon: FolderGit2,
+  },
+  {
+    kind: "name",
+    title: "Start an empty project",
+    hint: "A new folder with a name",
+    icon: FolderPlus,
+  },
+];
+
+/** Add the project the first session will open in, or pick one already there. */
+export function ProjectStep() {
+  const { projectId } = useSnapshot(welcomeUi);
+  const { data: projects = [] } = useProjectsQuery();
+  const own = projects.filter((p) => !p.is_uncategorized);
+
+  const add = (kind: AddProjectKind) =>
+    addProjectActions.show(kind, "local", (id) => {
+      welcomeUiActions.setProject(id);
+      welcomeUiActions.go("finish");
+    });
+
+  return (
+    <div className="flex flex-col gap-3">
+      {own.length > 0 && (
+        <ul className="flex flex-col gap-2">
+          {own.map((p) => (
+            <li key={p.id}>
+              <button
+                type="button"
+                onClick={() => {
+                  welcomeUiActions.setProject(p.id);
+                  welcomeUiActions.go("finish");
+                }}
+                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"
+                )}
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">
+                    {p.name}
+                  </span>
+                  <span className="text-muted-foreground block truncate text-xs">
+                    {p.working_directory}
+                  </span>
+                </span>
+                {projectId === p.id && <Check className="size-4" />}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="flex flex-col gap-2">
+        {WAYS.map((w) => (
+          <Button
+            key={w.kind}
+            variant="outline"
+            className="h-auto min-h-11 justify-start gap-3 px-3 py-2.5 text-left"
+            onClick={() => add(w.kind)}
+          >
+            <w.icon />
+            <span className="min-w-0">
+              <span className="block text-sm font-medium">{w.title}</span>
+              <span className="text-muted-foreground block text-xs font-normal">
+                {w.hint}
+              </span>
+            </span>
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/Welcome/SetupTerminal.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import dynamic from "next/dynamic";
+import { Button } from "@/components/ui/button";
+import type { TerminalHandle } from "@/components/Terminal";
+
+const Terminal = dynamic(
+  () => import("@/components/Terminal").then((m) => m.Terminal),
+  { ssr: false }
+);
+
+/**
+ * A terminal on this machine with one setup command typed at the prompt, for
+ * the user to read and run with Enter. It goes into their own shell over the
+ * existing terminal socket; the server runs nothing.
+ */
+export function SetupTerminal({
+  title,
+  command,
+  onDone,
+}: {
+  title: string;
+  command: string;
+  onDone: () => void;
+}) {
+  const ref = useRef<TerminalHandle | null>(null);
+  const typed = useRef(false);
+  const box = useRef<HTMLDivElement>(null);
+
+  // On a phone it opens below the list, out of sight.
+  useEffect(() => {
+    box.current?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
+  }, []);
+
+  const connected = useCallback(() => {
+    if (typed.current) return;
+    typed.current = true;
+    setTimeout(() => {
+      ref.current?.sendInput("\x15");
+      // Typed, not run: the user reads it and presses Enter.
+      setTimeout(() => ref.current?.sendInput(command), 50);
+    }, 100);
+  }, [command]);
+
+  return (
+    <div
+      ref={box}
+      className="bg-muted/30 hairline flex flex-col overflow-hidden rounded-lg"
+    >
+      <div className="flex items-center justify-between gap-2 px-3 py-1.5">
+        <span className="text-muted-foreground truncate text-xs">
+          {title}. Press Enter to run it.
+        </span>
+        <Button size="sm" onClick={onDone}>
+          Done, check again
+        </Button>
+      </div>
+      <div className="h-64 min-h-0">
+        <Terminal ref={ref} onConnected={connected} />
+      </div>
+    </div>
+  );
+}

package/components/Welcome/WelcomeDialog.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { memo } from "react";
+import { useSnapshot } from "valtio";
+import { Check } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useProjectsQuery } from "@/data/projects/queries";
+import { useEndWelcome, useWelcomeUrl } from "@/hooks/useWelcome";
+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 { ProjectStep } from "./ProjectStep";
+
+const STEPS: Record<
+  WelcomeStep,
+  { label: string; title: string; hint: string }
+> = {
+  agents: {
+    label: "Agents",
+    title: "Connect your agents",
+    hint: "Install and sign in the coding agents you want to use. You need one.",
+  },
+  project: {
+    label: "Project",
+    title: "Add your first project",
+    hint: "A folder or repo for the first session to work in.",
+  },
+  finish: {
+    label: "Start",
+    title: "You're set",
+    hint: "Open a session in your project and give it a task.",
+  },
+};
+
+function FinishStep() {
+  const { projectId } = useSnapshot(welcomeUi);
+  const { data: projects = [] } = useProjectsQuery();
+  const project = projects.find((p) => p.id === projectId);
+  return (
+    <p className="text-muted-foreground bg-muted/40 rounded-lg px-3 py-3 text-sm">
+      {project ? (
+        <>
+          First session opens in{" "}
+          <span className="text-foreground font-medium">{project.name}</span>.
+        </>
+      ) : (
+        "No project yet. Add one from the sidebar whenever you are ready."
+      )}
+    </p>
+  );
+}
+
+/**
+ * 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() {
+  useWelcomeUrl();
+  const { open, step, projectId } = useSnapshot(welcomeUi);
+  const end = useEndWelcome();
+  const at = WELCOME_STEPS.indexOf(step);
+  const info = STEPS[step];
+  const last = at === WELCOME_STEPS.length - 1;
+
+  return (
+    <Dialog open={open}>
+      <DialogContent
+        showCloseButton={false}
+        onInteractOutside={(e) => e.preventDefault()}
+        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">
+          {WELCOME_STEPS.map((s, i) => (
+            <button
+              key={s}
+              type="button"
+              disabled={i === at}
+              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",
+                i === at
+                  ? "bg-foreground/[0.08] text-foreground"
+                  : "text-muted-foreground hover:bg-foreground/[0.06]"
+              )}
+            >
+              {i < at && <Check className="size-3" />}
+              {STEPS[s].label}
+            </button>
+          ))}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="min-h-11 sm:min-h-8"
+            onClick={() => end()}
+          >
+            Skip setup
+          </Button>
+        </nav>
+        <div className="flex flex-col gap-1">
+          <DialogTitle>{info.title}</DialogTitle>
+          <DialogDescription>{info.hint}</DialogDescription>
+        </div>
+        {step === "agents" && <AgentList />}
+        {step === "project" && <ProjectStep />}
+        {step === "finish" && <FinishStep />}
+        <div className="flex items-center justify-between gap-2">
+          <Button
+            variant="ghost"
+            className="min-h-11 sm:min-h-9"
+            disabled={at === 0}
+            onClick={() => welcomeUiActions.go(WELCOME_STEPS[at - 1])}
+          >
+            Back
+          </Button>
+          <div className="flex items-center gap-2">
+            {step === "project" && (
+              <Button
+                variant="ghost"
+                className="min-h-11 sm:min-h-9"
+                onClick={() => welcomeUiActions.go("finish")}
+              >
+                Skip
+              </Button>
+            )}
+            <Button
+              className="min-h-11 sm:min-h-9"
+              onClick={() =>
+                last ? end(true) : welcomeUiActions.go(WELCOME_STEPS[at + 1])
+              }
+            >
+              {last
+                ? projectId
+                  ? "Start your first session"
+                  : "Go to AgentOS"
+                : step === "agents"
+                  ? "Continue"
+                  : "Next"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+});