@saadnvd1/agent-os 0.3.532 → 0.3.534

package/components/Tasks/PlanReview.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Markdown } from "@/components/Chat/Markdown";
+import { useApprovePlan, useDropTask, usePlanEdits } from "@/data/tasks";
+import type { PlanPieceView } from "@/lib/tasks/loop-types";
+import type { TaskView } from "@/lib/tasks";
+import { cn } from "@/lib/utils";
+
+const CIRCLED = ["①", "②", "③", "④", "⑤", "⑥"];
+const REASON: Record<string, string> = {
+  a: "spans repositories",
+  b: "must be live before the other can merge",
+  c: "needs you mid-way",
+  d: "must be revertible on its own",
+};
+
+function Piece({
+  p,
+  edits,
+  busy,
+  onEdit,
+}: {
+  p: PlanPieceView;
+  edits: { merge: number[]; drop: number[] };
+  busy: boolean;
+  onEdit: (merge: number[], drop: number[]) => void;
+}) {
+  const mark = CIRCLED[p.position - 1];
+  const off = p.edit !== null;
+  const without = (list: number[]) => list.filter((n) => n !== p.position);
+  return (
+    <li className={cn("space-y-1 px-3 py-2.5", off && "opacity-60")}>
+      <div className="flex items-baseline gap-2">
+        <span className="min-w-0 flex-1 truncate text-sm font-medium">
+          {mark} {p.name}
+        </span>
+        <span className="text-muted-foreground shrink-0 text-xs">
+          {p.project}
+        </span>
+      </div>
+      <p className="text-muted-foreground text-xs">{p.slice.split("\n")[0]}</p>
+      {p.afterPosition && (
+        <p className="text-xs">
+          after {CIRCLED[p.afterPosition - 1]} is {p.afterKind}
+        </p>
+      )}
+      {p.reasons.length > 0 && (
+        <p className="text-xs">
+          {p.reasons.map((r) => `(${r}) ${REASON[r]}`).join("; ")}
+        </p>
+      )}
+      {p.owns.length > 0 && (
+        <p className="text-muted-foreground text-xs">
+          owns: {p.owns.join(", ")}
+        </p>
+      )}
+      {p.position > 1 && (
+        <div className="flex flex-wrap items-center gap-2 pt-1">
+          {off ? (
+            <>
+              <span className="bg-foreground/10 rounded-full px-2 py-0.5 text-[11px]">
+                {p.edit === "merge"
+                  ? `Merged into ${CIRCLED[p.position - 2]}`
+                  : "Dropped"}
+              </span>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-11 md:h-8"
+                disabled={busy}
+                onClick={() =>
+                  onEdit(without(edits.merge), without(edits.drop))
+                }
+              >
+                Undo
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-11 md:h-8"
+                disabled={busy || p.forced}
+                title={
+                  p.forced ? "Split because it spans repositories" : undefined
+                }
+                onClick={() => onEdit([...edits.merge, p.position], edits.drop)}
+              >
+                Merge into {CIRCLED[p.position - 2]}
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-11 md:h-8"
+                disabled={busy}
+                onClick={() => onEdit(edits.merge, [...edits.drop, p.position])}
+              >
+                Drop
+              </Button>
+            </>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}
+
+// A plan waiting for a decision: how it splits, the plan itself, and
+// Reject, Approve with a note, Approve.
+export function PlanReview({ task }: { task: TaskView }) {
+  const approve = useApprovePlan();
+  const drop = useDropTask();
+  const planEdits = usePlanEdits();
+  const [showPlan, setShowPlan] = useState(false);
+  const [noting, setNoting] = useState(false);
+  const [note, setNote] = useState("");
+  const [rejecting, setRejecting] = useState(false);
+  const pieces = task.plan?.pieces;
+  const edits = {
+    merge:
+      pieces?.pieces.filter((p) => p.edit === "merge").map((p) => p.position) ??
+      [],
+    drop:
+      pieces?.pieces.filter((p) => p.edit === "drop").map((p) => p.position) ??
+      [],
+  };
+  const error =
+    approve.error?.message || drop.error?.message || planEdits.error?.message;
+  return (
+    <div className="space-y-3">
+      {pieces && pieces.pieces.length > 1 ? (
+        <div className="space-y-1">
+          <p className="label-mono text-muted-foreground">
+            Pieces ({pieces.pieces.length})
+          </p>
+          <ul className="divide-border/60 border-border/60 divide-y rounded-lg border">
+            {pieces.pieces.map((p) => (
+              <Piece
+                key={p.position}
+                p={p}
+                edits={edits}
+                busy={planEdits.isPending}
+                onEdit={(merge, dropped) =>
+                  planEdits.mutate({ id: task.id, merge, drop: dropped })
+                }
+              />
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <p className="text-muted-foreground text-xs">1 piece</p>
+      )}
+      {pieces?.folded.map((f) => (
+        <p key={f.name} className="text-xs text-amber-700 dark:text-amber-300">
+          &quot;{f.name}&quot; folded into {CIRCLED[f.into - 1]}: {f.why}
+        </p>
+      ))}
+      {pieces?.warnings.map((w) => (
+        <p key={w} className="text-xs text-amber-700 dark:text-amber-300">
+          {w}
+        </p>
+      ))}
+      <button
+        type="button"
+        aria-expanded={showPlan}
+        className="text-primary min-h-11 text-xs font-medium md:min-h-8"
+        onClick={() => setShowPlan((v) => !v)}
+      >
+        {showPlan ? "Hide the plan" : "Show the plan"}
+      </button>
+      {showPlan && (
+        <div className="bg-foreground/[0.04] max-h-80 overflow-y-auto rounded-lg p-3 text-sm">
+          {task.plan?.text ? (
+            <Markdown text={task.plan.text} />
+          ) : (
+            <p className="text-muted-foreground text-xs">
+              No plan file was written.
+            </p>
+          )}
+          {task.plan?.truncated && (
+            <p className="text-muted-foreground mt-2 font-mono text-[11px]">
+              Shortened; the whole plan is {task.plan.path} in the worktree.
+            </p>
+          )}
+        </div>
+      )}
+      {noting && (
+        <div className="space-y-2">
+          <Textarea
+            rows={3}
+            value={note}
+            placeholder="A change to the plan (recorded as a scope change)"
+            onChange={(e) => setNote(e.target.value)}
+          />
+          <Button
+            size="sm"
+            className="h-11 md:h-8"
+            disabled={approve.isPending || !note.trim()}
+            onClick={() =>
+              approve.mutate({ id: task.id, message: note.trim() })
+            }
+          >
+            Approve with this note
+          </Button>
+        </div>
+      )}
+      <div className="flex flex-wrap gap-2">
+        {rejecting ? (
+          <Button
+            size="sm"
+            variant="destructive"
+            className="h-11 md:h-8"
+            disabled={drop.isPending}
+            onClick={() => drop.mutate(task.id)}
+          >
+            Drop this plan
+          </Button>
+        ) : (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-11 md:h-8"
+            onClick={() => setRejecting(true)}
+          >
+            Reject
+          </Button>
+        )}
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-11 md:h-8"
+          aria-expanded={noting}
+          onClick={() => setNoting((v) => !v)}
+        >
+          Approve with note…
+        </Button>
+        <Button
+          size="sm"
+          className="h-11 md:h-8"
+          disabled={approve.isPending}
+          onClick={() => approve.mutate({ id: task.id })}
+        >
+          {approve.isPending ? "Approving..." : "Approve"}
+        </Button>
+      </div>
+      {error && <p className="text-destructive text-xs">{error}</p>}
+    </div>
+  );
+}

package/components/Tasks/TaskRow.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import {
+  ChefHat,
   ExternalLink,
   GitMerge,
   KanbanSquare,
@@ -10,17 +11,13 @@ import {
 import { Button } from "@/components/ui/button";
 import type { TaskView } from "@/lib/tasks";
 import { isFinished } from "@/lib/tasks/state";
-import {
-  useApprovePlan,
-  useArmTask,
-  useDropTask,
-  useSignOffTask,
-} from "@/data/tasks";
-import { Markdown } from "@/components/Chat/Markdown";
+import { useArmTask, useDropTask, useSignOffTask } from "@/data/tasks";
 import { tmuxAttachActions } from "@/stores/tmuxAttach";
 import { tasksUiActions } from "@/stores/tasksUi";
+import { recipesUiActions } from "@/stores/recipesUi";
 import { cn } from "@/lib/utils";
 import { SimulatorIndicator } from "@/components/Simulator";
+import { PlanReview } from "./PlanReview";
 import { MoveTaskButton } from "./MoveTaskButton";
 import { ResumeOnModel } from "./ResumeOnModel";
 import { TASK_STATE as STATE } from "./task-state-labels";
@@ -30,8 +27,6 @@ export function TaskRow({ task }: { task: TaskView }) {
   const signOff = useSignOffTask();
   const drop = useDropTask();
   const arm = useArmTask();
-  const approve = useApprovePlan();
-  const [showPlan, setShowPlan] = useState(false);
   const [confirmDrop, setConfirmDrop] = useState(false);
   const [moveError, setMoveError] = useState<string | null>(null);
   const live = !isFinished(task.state);
@@ -39,7 +34,6 @@ export function TaskRow({ task }: { task: TaskView }) {
     signOff.error?.message ||
     drop.error?.message ||
     arm.error?.message ||
-    approve.error?.message ||
     moveError ||
     task.hostError;
   const settingUp = live && task.setup?.status === "running";
@@ -159,26 +153,6 @@ export function TaskRow({ task }: { task: TaskView }) {
               {task.armed ? "Armed" : "Arm merge"}
             </Button>
           )}
-          {task.state === "plan-ready" && (
-            <>
-              <Button
-                size="sm"
-                variant="outline"
-                aria-expanded={showPlan}
-                onClick={() => setShowPlan((v) => !v)}
-              >
-                {showPlan ? "Hide plan" : "View plan"}
-              </Button>
-              <Button
-                size="sm"
-                className="h-11 md:h-8"
-                disabled={approve.isPending}
-                onClick={() => approve.mutate({ id: task.id })}
-              >
-                {approve.isPending ? "Approving..." : "Approve"}
-              </Button>
-            </>
-          )}
           {task.state === "review" && (
             <Button
               size="sm"
@@ -190,20 +164,21 @@ export function TaskRow({ task }: { task: TaskView }) {
           )}
         </div>
       )}
-      {live && task.state === "plan-ready" && showPlan && (
-        <div className="bg-foreground/[0.04] max-h-80 overflow-y-auto rounded-lg p-3 text-sm">
-          {task.plan?.text ? (
-            <Markdown text={task.plan.text} />
-          ) : (
-            <p className="text-muted-foreground text-xs">
-              No plan file was written.
-            </p>
-          )}
-          {task.plan?.truncated && (
-            <p className="text-muted-foreground mt-2 font-mono text-[11px]">
-              Shortened; the whole plan is {task.plan.path} in the worktree.
-            </p>
-          )}
+      {live && task.state === "plan-ready" && <PlanReview task={task} />}
+      {!live && !task.hostId && (
+        <div>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground h-11 md:h-8"
+            onClick={() => {
+              recipesUiActions.saveSessionAs(task.id);
+              tasksUiActions.setPanelOpen(false);
+            }}
+          >
+            <ChefHat className="h-3.5 w-3.5" />
+            Save as recipe
+          </Button>
         </div>
       )}
       {error && <p className="text-destructive text-xs">{error}</p>}

package/components/Tasks/TasksDialog.tsx

@@ -16,6 +16,7 @@ import { newDraft } from "@/stores/drafts";
 import { TaskRow } from "./TaskRow";
 import { BoardTodoSection } from "@/components/LumifyHub";
 import { StacksSection } from "@/components/Stacks";
+import { FeaturesSection } from "@/components/Features";
 
 export function TasksDialog() {
   const { panelOpen } = useSnapshot(tasksUi);
@@ -57,6 +58,7 @@ export function TasksDialog() {
             <TaskRow key={t.id} task={t} />
           ))}
         </div>
+        <FeaturesSection />
         <StacksSection />
         <BoardTodoSection />
         {done.length > 0 && (

package/components/Welcome/Block.tsx

@@ -0,0 +1,26 @@
+import type { Bell } from "lucide-react";
+
+export 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>
+  );
+}

package/components/Welcome/ConnectBlock.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ExternalLink, Globe } from "lucide-react";
+import { CopyButton } from "@/components/Chat/CopyButton";
+import { canManageDevices } from "@/components/Devices/DevicesPanel";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  useDevicesQuery,
+  useLinkConnect,
+  useNetworkQuery,
+  useUpdateNetwork,
+} from "@/data/devices";
+import { CONNECT_SITE, CONNECT_STATE, connectView } from "@/lib/connect/view";
+import { Block } from "./Block";
+
+const COMMAND = "agent-os connect";
+
+function Command() {
+  return (
+    <div className="text-muted-foreground flex items-center gap-1 text-xs">
+      <span>Or run</span>
+      <code className="text-foreground font-mono">{COMMAND}</code>
+      <span>in a terminal.</span>
+      <CopyButton text={COMMAND} label="Copy command" />
+    </div>
+  );
+}
+
+function LinkForm() {
+  const [code, setCode] = useState("");
+  const link = useLinkConnect();
+  const submit = () => {
+    if (code.trim() && !link.isPending) link.mutate(code.trim());
+  };
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <p className="text-muted-foreground text-xs">
+        Get a code at{" "}
+        <a
+          href={CONNECT_SITE}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-foreground inline-flex items-center gap-1 underline underline-offset-2"
+        >
+          runagentos.com
+          <ExternalLink className="size-3" />
+        </a>{" "}
+        (Connect a machine), then paste it here.
+      </p>
+      <form
+        className="flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <Input
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          aria-label="Link code"
+          placeholder="Link code"
+          autoComplete="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          className="min-h-11 flex-1 font-mono sm:min-h-9"
+        />
+        <Button
+          type="submit"
+          variant="outline"
+          className="min-h-11 sm:min-h-9"
+          disabled={!code.trim() || link.isPending}
+        >
+          {link.isPending ? "Linking…" : "Link"}
+        </Button>
+      </form>
+      {link.error && (
+        <p className="text-destructive text-xs">{link.error.message}</p>
+      )}
+      <Command />
+    </div>
+  );
+}
+
+/** This machine's Connect: link it, then turn it on or off. */
+export function ConnectBlock() {
+  // The running server follows a change within a couple of seconds.
+  const [wanted, setWanted] = useState<boolean | null>(null);
+  const network = useNetworkQuery(true, wanted === null ? false : 2000);
+  const devices = useDevicesQuery(true);
+  const update = useUpdateNetwork();
+  const canManage = canManageDevices(devices.data?.current.via);
+  const view = network.data ? connectView(network.data.connect) : null;
+
+  useEffect(() => {
+    if (wanted === null) return;
+    const t = setTimeout(() => setWanted(null), 6000);
+    return () => clearTimeout(t);
+  }, [wanted]);
+
+  return (
+    <Block
+      icon={Globe}
+      title="Use it away from home"
+      detail="Connect gives this machine a private address at runagentos.com, so your phone reaches it from anywhere. Nothing to open on your router."
+    >
+      {network.isPending ? (
+        <div className="bg-muted/40 h-12 animate-pulse rounded-lg" />
+      ) : network.isError || !view ? (
+        <p className="text-destructive text-xs">
+          {network.error?.message ?? "Couldn't read Connect."}
+        </p>
+      ) : !view.linked ? (
+        canManage ? (
+          <LinkForm />
+        ) : (
+          <div className="flex flex-col gap-2">
+            <p className="text-muted-foreground text-xs">
+              Link it on the machine running AgentOS.
+            </p>
+            <Command />
+          </div>
+        )
+      ) : (
+        <div className="flex items-start gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium">
+              Linked{" "}
+              <span className="text-muted-foreground font-normal">
+                · {CONNECT_STATE[network.data.connect.state]}
+              </span>
+            </p>
+            <p className="text-muted-foreground text-xs break-all">
+              {view.hostname ? (
+                <>
+                  Reachable at{" "}
+                  <span className="text-foreground font-mono">
+                    https://{view.hostname}
+                  </span>
+                </>
+              ) : (
+                "The address appears once the tunnel starts."
+              )}
+              {network.data.connect.reason &&
+              network.data.connect.state !== "off"
+                ? ` ${network.data.connect.reason.replace(/\.$/, "")}.`
+                : ""}
+            </p>
+            {update.error && (
+              <p className="text-destructive text-xs">{update.error.message}</p>
+            )}
+          </div>
+          <Switch
+            checked={wanted ?? view.on}
+            disabled={!view.canToggle || !canManage}
+            onCheckedChange={(connect) => {
+              setWanted(connect);
+              update.mutate({ connect });
+            }}
+            className="mt-0.5"
+            aria-label="Connect"
+          />
+        </div>
+      )}
+    </Block>
+  );
+}

package/components/Welcome/DevicesStep.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from "react";
 import { Bell, Laptop, Smartphone } from "lucide-react";
+import { Block } from "./Block";
+import { ConnectBlock } from "./ConnectBlock";
 import { AddDevicePanel } from "@/components/Devices/AddDevicePanel";
 import {
   NotificationsSection,
@@ -9,31 +11,6 @@ import {
 } 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.
@@ -51,7 +28,7 @@ export function DevicesStep({
       <Block
         icon={Smartphone}
         title="Pair your phone"
-        detail="Scan a code to use AgentOS from your phone."
+        detail="Scan a code to use AgentOS from your phone on this network."
       >
         {pairing ? (
           <AddDevicePanel onDone={() => setPairing(false)} />
@@ -65,6 +42,7 @@ export function DevicesStep({
           </Button>
         )}
       </Block>
+      <ConnectBlock />
       <Block
         icon={Laptop}
         title="Link another machine"

package/data/devices/queries.ts

@@ -26,12 +26,32 @@ export function useDevicesQuery(enabled = true) {
   });
 }
 
-export function useNetworkQuery(enabled = true) {
+export function useNetworkQuery(
+  enabled = true,
+  refetchMs: number | false = false
+) {
   return useQuery({
     queryKey: deviceKeys.network(),
     queryFn: async () =>
       json<NetworkState>(await fetch("/api/devices/network")),
     enabled,
+    refetchInterval: refetchMs,
+  });
+}
+
+/** Links this machine to Connect with a code from runagentos.com. */
+export function useLinkConnect() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (code: string) =>
+      json<NetworkState>(
+        await fetch("/api/devices/connect", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ code }),
+        })
+      ),
+    onSuccess: (data) => queryClient.setQueryData(deviceKeys.network(), data),
   });
 }