@saadnvd1/agent-os 0.3.775 → 0.3.777

package/app/api/live-shares/[id]/route.ts

@@ -0,0 +1,72 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { fail, readJson, refuseDemo, toResponse } from "@/lib/share/route";
+import {
+  admit,
+  deny,
+  dismissSuggestion,
+  endLive,
+  kick,
+  sendSuggestion,
+  startLive,
+} from "@/lib/live/service";
+
+const Action = z.discriminatedUnion("action", [
+  z.object({ action: z.literal("admit"), guestId: z.string().min(1).max(64) }),
+  z.object({ action: z.literal("deny"), guestId: z.string().min(1).max(64) }),
+  z.object({ action: z.literal("kick"), guestId: z.string().min(1).max(64) }),
+  z.object({
+    action: z.literal("send"),
+    suggestionId: z.string().min(1).max(64),
+    text: z.string().max(8000).optional(),
+  }),
+  z.object({
+    action: z.literal("dismiss"),
+    suggestionId: z.string().min(1).max(64),
+  }),
+]);
+
+// POST /api/live-shares/:id - the host's decisions: let a guest in, turn one
+// away, remove one, send a suggestion to the agent or dismiss it.
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const refused = refuseDemo();
+  if (refused) return refused;
+  const { id } = await params;
+  const read = await readJson(request);
+  if ("refused" in read) return read.refused;
+  const body = Action.safeParse(read.body);
+  if (!body.success) return fail("Unknown action.", 400);
+  startLive();
+  try {
+    const a = body.data;
+    if (a.action === "admit") admit(id, a.guestId);
+    else if (a.action === "deny") deny(id, a.guestId);
+    else if (a.action === "kick") kick(id, a.guestId);
+    else if (a.action === "send")
+      await sendSuggestion(id, a.suggestionId, a.text);
+    else dismissSuggestion(id, a.suggestionId);
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    return toResponse(err);
+  }
+}
+
+// DELETE /api/live-shares/:id - end access for every guest.
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const refused = refuseDemo();
+  if (refused) return refused;
+  const { id } = await params;
+  startLive();
+  try {
+    await endLive(id);
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    return toResponse(err);
+  }
+}

package/app/api/live-shares/route.test.ts

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { demoAllows } from "@/lib/security/demo";
+import { POST } from "./route";
+import { POST as act, DELETE } from "./[id]/route";
+
+const req = (body: unknown, method = "POST") =>
+  new Request("http://localhost/api/live-shares", {
+    method,
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+const ctx = { params: Promise.resolve({ id: "abc" }) };
+
+describe("live-shares routes", () => {
+  afterEach(() => {
+    delete process.env.AGENTOS_DEMO;
+  });
+
+  it("are refused in demo mode, every one that changes state", async () => {
+    process.env.AGENTOS_DEMO = "1";
+    expect((await POST(req({ sessionId: "s" }))).status).toBe(403);
+    expect(
+      (await act(req({ action: "admit", guestId: "g" }), ctx)).status
+    ).toBe(403);
+    expect((await DELETE(req({}, "DELETE"), ctx)).status).toBe(403);
+  });
+
+  it("the demo gate lets none of them through", () => {
+    const home = "/srv/demo/home";
+    for (const [method, url] of [
+      ["POST", "/api/live-shares"],
+      ["GET", "/api/live-shares"],
+      ["POST", "/api/live-shares/abc"],
+      ["DELETE", "/api/live-shares/abc"],
+    ])
+      expect(demoAllows({ method, url }, home)).toBe(false);
+  });
+
+  it("reject a bad body or an unknown action", async () => {
+    expect((await POST(req({ nope: 1 }))).status).toBe(400);
+    expect((await act(req({ action: "run", text: "rm" }), ctx)).status).toBe(
+      400
+    );
+  });
+});

package/app/api/live-shares/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { linked, NOT_LINKED } from "@/lib/share/connect";
+import { fail, readJson, refuseDemo, toResponse } from "@/lib/share/route";
+import { createLive, listLive, startLive } from "@/lib/live/service";
+
+const Create = z.object({
+  sessionId: z.string().min(1).max(100),
+  expiresIn: z.enum(["1h", "session"]).default("1h"),
+});
+
+// POST /api/live-shares - mint a live link for one chat and start publishing.
+export async function POST(request: Request) {
+  const refused = refuseDemo();
+  if (refused) return refused;
+  const read = await readJson(request);
+  if ("refused" in read) return read.refused;
+  const body = Create.safeParse(read.body);
+  if (!body.success) return fail("sessionId is required.", 400);
+  if (!linked()) return fail(NOT_LINKED, 409);
+  try {
+    const view = await createLive(body.data.sessionId, body.data.expiresIn);
+    return NextResponse.json(view, { status: 201 });
+  } catch (err) {
+    if ((err as Error).message === "Session not found")
+      return fail("Session not found.", 404);
+    return toResponse(err);
+  }
+}
+
+// GET /api/live-shares?sessionId= - live links this machine holds, with who
+// is waiting, who is watching and the open suggestions.
+export async function GET(request: Request) {
+  const refused = refuseDemo();
+  if (refused) return refused;
+  startLive();
+  const sessionId =
+    new URL(request.url).searchParams.get("sessionId") ?? undefined;
+  return NextResponse.json({ linked: linked(), shares: listLive(sessionId) });
+}

package/app/page.tsx

@@ -134,6 +134,10 @@ const MoveDialog = dynamic(
   () => import("@/components/Tasks/MoveDialog").then((m) => m.MoveDialog),
   { ssr: false }
 );
+const InviteDialog = dynamic(
+  () => import("@/components/Live/InviteDialog").then((m) => m.InviteDialog),
+  { ssr: false }
+);
 const ShareDialog = dynamic(
   () => import("@/components/Share/ShareDialog").then((m) => m.ShareDialog),
   { ssr: false }
@@ -177,6 +181,7 @@ const AppDialogs = memo(function AppDialogs({
       <ClaimsSheet />
       <MoveDialog />
       <ShareDialog />
+      <InviteDialog />
       <ExportSheet />
       <StartAnalystSheet />
       <AwayReport />

package/components/Chat/ChatPanel.tsx

@@ -40,6 +40,7 @@ import { SubagentCard } from "./Subagent";
 import { UndoDialog, UndoneBlock } from "./Undo";
 import { Composer } from "./Composer";
 import { Queue } from "./Queue";
+import { LivePanel } from "@/components/Live/LivePanel";
 import { StaleChip } from "./StaleChip";
 import { LearningCardsHost } from "@/components/LearningCards/LearningCard";
 import { composerCompacts } from "@/lib/chat/stale";
@@ -834,6 +835,11 @@ export function ChatPanel({
           onAsIs={setAsIs}
         />
         <LearningCardsHost sessionId={sessionId} />
+        <LivePanel
+          sessionId={sessionId}
+          title={sessionName}
+          onEdit={(text) => setPrefill({ text, at: Date.now() })}
+        />
         <Composer
           draftKey={sessionId}
           attachScope={sessionId}

package/components/Chat/EventRow.tsx

@@ -7,6 +7,7 @@ import {
   Info,
   Smartphone,
   UserCheck,
+  Users,
   Zap,
   type LucideIcon,
 } from "lucide-react";
@@ -27,6 +28,7 @@ export const ICON: Record<ChatOriginKind, LucideIcon> = {
   system: Info,
   decision: UserCheck,
   device: Smartphone,
+  guest: Users,
 };
 
 // Longer than this (what fits beside a source on a phone), or more than one line,
@@ -177,6 +179,10 @@ export function EventRow({
           head={
             decision ? (
               <span className="truncate font-medium">Saad decided</span>
+            ) : origin.kind === "guest" ? (
+              <span className="truncate font-medium">
+                Suggested by {origin.label}
+              </span>
             ) : (
               <Source origin={origin} />
             )

package/components/Live/GuestPromptCard.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Pencil, Send, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { LiveView } from "@/data/live";
+
+type Suggestion = LiveView["suggestions"][number];
+
+// A guest's suggested prompt, as plain text. Nothing is sent until Send.
+export function GuestPromptCard({
+  suggestion,
+  busy,
+  onSend,
+  onEdit,
+  onDismiss,
+}: {
+  suggestion: Suggestion;
+  busy: boolean;
+  onSend: () => void;
+  onEdit: () => void;
+  onDismiss: () => void;
+}) {
+  return (
+    <div
+      role="group"
+      aria-label={`Suggestion from ${suggestion.guestName}`}
+      className="bg-muted/60 flex flex-col gap-2 rounded-xl p-3 shadow-sm"
+    >
+      <p className="text-muted-foreground text-xs">
+        Suggestion from{" "}
+        <span className="text-foreground font-medium">
+          {suggestion.guestName}
+        </span>
+      </p>
+      <p className="max-h-40 overflow-y-auto text-sm [overflow-wrap:anywhere] whitespace-pre-wrap">
+        {suggestion.text}
+      </p>
+      <div className="flex gap-2">
+        <Button className="min-h-11 flex-1" disabled={busy} onClick={onSend}>
+          <Send className="h-4 w-4" />
+          Send
+        </Button>
+        <Button
+          variant="outline"
+          className="min-h-11 flex-1"
+          disabled={busy}
+          onClick={onEdit}
+        >
+          <Pencil className="h-4 w-4" />
+          Edit
+        </Button>
+        <Button
+          variant="outline"
+          className="min-h-11 flex-1"
+          disabled={busy}
+          onClick={onDismiss}
+        >
+          <X className="h-4 w-4" />
+          Dismiss
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Live/InviteDialog.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSnapshot } from "valtio";
+import { Check, Copy, ExternalLink, Share, Users } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Notice } from "@/components/ui/notice";
+import { Segmented } from "@/components/ui/segmented";
+import { ShimmeringLoader as Skeleton } from "@/components/ui/skeleton";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
+import {
+  useCreateLive,
+  useEndLive,
+  useLiveShare,
+  type LiveExpiry,
+  type LiveView,
+} from "@/data/live";
+import { EXPIRY_LABEL } from "@/lib/live/types";
+import { liveUi, liveUiActions } from "@/stores/liveUi";
+
+// "Invite to watch live" on a chat: a link for one guest-facing page, with
+// the host deciding who comes in and what reaches the agent.
+export function InviteDialog() {
+  const { target } = useSnapshot(liveUi);
+  return (
+    <Dialog
+      open={!!target}
+      onOpenChange={(open) => !open && liveUiActions.close()}
+    >
+      {target && <InviteBody sessionId={target.sessionId} />}
+    </Dialog>
+  );
+}
+
+function InviteBody({ sessionId }: { sessionId: string }) {
+  const query = useLiveShare(sessionId);
+  const share = query.data?.share;
+  return (
+    <DialogContent className="flex max-h-[100dvh] w-screen max-w-none flex-col gap-4 overflow-y-auto rounded-none p-4 sm:max-w-md sm:rounded-lg">
+      <div>
+        <DialogTitle>Invite to watch live</DialogTitle>
+        <DialogDescription>
+          A guest opens the link, types a name and waits for you to let them in.
+          They see this chat as it happens, with secrets masked, and can suggest
+          a prompt. Nothing they type reaches the agent unless you tap Send.
+        </DialogDescription>
+      </div>
+      {query.isPending ? (
+        <Skeleton className="h-24 w-full" />
+      ) : !query.data?.linked ? (
+        <Notice tone="warning">
+          Link this machine in Settings → Devices &amp; access to invite people.
+        </Notice>
+      ) : share ? (
+        <Link share={share} />
+      ) : (
+        <Create sessionId={sessionId} />
+      )}
+    </DialogContent>
+  );
+}
+
+function Create({ sessionId }: { sessionId: string }) {
+  const [expiresIn, setExpiresIn] = useState<LiveExpiry>("1h");
+  const create = useCreateLive();
+  return (
+    <>
+      <div className="flex flex-col gap-1.5">
+        <span className="text-muted-foreground text-xs font-medium">
+          What guests can do
+        </span>
+        <Segmented
+          label="Access"
+          value="watch"
+          onChange={() => {}}
+          options={[
+            { value: "watch", label: "Watch + suggest" },
+            { value: "drive", label: "Drive (later)" },
+          ]}
+          disabled
+        />
+        <p className="text-muted-foreground text-xs">
+          Driving the agent from a guest link isn&apos;t available yet.
+        </p>
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <span className="text-muted-foreground text-xs font-medium">
+          The link works for
+        </span>
+        <Segmented
+          label="Expiry"
+          value={expiresIn}
+          onChange={setExpiresIn}
+          options={(["1h", "session"] as const).map((v) => ({
+            value: v,
+            label: EXPIRY_LABEL[v],
+          }))}
+        />
+      </div>
+      {create.error && (
+        <p className="text-destructive text-sm">{create.error.message}</p>
+      )}
+      <Button
+        className="min-h-11"
+        disabled={create.isPending}
+        onClick={() => create.mutate({ sessionId, expiresIn })}
+      >
+        <Users className="h-4 w-4" />
+        {create.isPending ? "Creating…" : "Create invite link"}
+      </Button>
+    </>
+  );
+}
+
+function Link({ share }: { share: LiveView }) {
+  const { copied, copy } = useCopyToClipboard();
+  const end = useEndLive(share.id);
+  const qr = useQr(share.url);
+  const canShare = typeof navigator !== "undefined" && "share" in navigator;
+  return (
+    <>
+      <div className="flex flex-col items-center gap-3">
+        {qr ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={qr}
+            alt="QR code for the invite link"
+            className="size-40 rounded-lg bg-white p-2"
+          />
+        ) : (
+          <Skeleton className="size-40" />
+        )}
+        <input
+          readOnly
+          value={share.url}
+          onFocus={(e) => e.currentTarget.select()}
+          aria-label="Invite link"
+          className="bg-muted min-h-11 w-full rounded-lg px-3 font-mono text-xs"
+        />
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          className="min-h-11 flex-1"
+          onClick={() => copy(share.url)}
+        >
+          {copied ? (
+            <Check className="h-4 w-4" />
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+          Copy
+        </Button>
+        {canShare && (
+          <Button
+            variant="outline"
+            className="min-h-11 flex-1"
+            onClick={() =>
+              navigator
+                .share({ title: share.title, url: share.url })
+                .catch(() => {})
+            }
+          >
+            <Share className="h-4 w-4" />
+            Share
+          </Button>
+        )}
+        <Button variant="outline" className="min-h-11 flex-1" asChild>
+          <a href={share.url} target="_blank" rel="noopener noreferrer">
+            <ExternalLink className="h-4 w-4" />
+            Open
+          </a>
+        </Button>
+      </div>
+      <p className="text-muted-foreground text-xs">
+        {share.endsWithSession
+          ? "Works until you end access or the session ends."
+          : share.expiresAt
+            ? `Works until ${new Date(share.expiresAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}.`
+            : ""}{" "}
+        Requests and suggestions show above the message box.
+      </p>
+      {end.error && (
+        <p className="text-destructive text-sm">{end.error.message}</p>
+      )}
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          className="text-destructive min-h-11 flex-1"
+          disabled={end.isPending}
+          onClick={() => end.mutate()}
+        >
+          End access
+        </Button>
+        <Button className="min-h-11 flex-1" onClick={liveUiActions.close}>
+          Done
+        </Button>
+      </div>
+    </>
+  );
+}
+
+// The code is drawn here, in the browser: the link goes to no outside service.
+function useQr(url: string): string | null {
+  const [src, setSrc] = useState<string | null>(null);
+  useEffect(() => {
+    let live = true;
+    import("qrcode")
+      .then((m) =>
+        m.toDataURL(url, { margin: 0, width: 256, errorCorrectionLevel: "M" })
+      )
+      .then((data) => live && setSrc(data))
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [url]);
+  return src;
+}

package/components/Live/LiveChip.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Radio, UserMinus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { StatusPill } from "@/components/ui/status-pill";
+import type { LiveView } from "@/data/live";
+import { cn } from "@/lib/utils";
+
+export function presenceText(guests: LiveView["guests"]): string {
+  const here = guests.filter((g) => g.status === "admitted" && g.online);
+  if (!here.length) return "No one watching yet";
+  if (here.length === 1) return `${here[0].name} is watching`;
+  return `${here[0].name} +${here.length - 1} watching`;
+}
+
+// The session's live state: who is watching, with Kick and End access.
+export function LiveChip({
+  share,
+  busy,
+  onKick,
+  onEnd,
+  onInvite,
+}: {
+  share: LiveView;
+  busy: boolean;
+  onKick: (guestId: string) => void;
+  onEnd: () => void;
+  onInvite: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const admitted = share.guests.filter((g) => g.status === "admitted");
+  return (
+    <div className="flex flex-col gap-1">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        className="hover:bg-muted/60 flex min-h-11 items-center gap-2 rounded-lg px-2 text-left text-xs"
+      >
+        <StatusPill tone={share.connected ? "green" : "amber"}>
+          <Radio className="h-3 w-3" aria-hidden />
+          {share.connected ? "Live" : "Reconnecting"}
+        </StatusPill>
+        <span className="min-w-0 flex-1 truncate">
+          {presenceText(share.guests)}
+        </span>
+        <ChevronDown
+          className={cn(
+            "h-3.5 w-3.5 transition-transform",
+            open && "rotate-180"
+          )}
+          aria-hidden
+        />
+      </button>
+      {open && (
+        <div className="bg-muted/60 flex flex-col gap-1 rounded-xl p-2 shadow-sm">
+          {share.notice && (
+            <p className="text-muted-foreground px-2 text-xs">{share.notice}</p>
+          )}
+          {admitted.length === 0 && (
+            <p className="text-muted-foreground px-2 py-1 text-xs">
+              No one has joined yet.
+            </p>
+          )}
+          {admitted.map((g) => (
+            <div key={g.id} className="flex min-h-11 items-center gap-2 px-2">
+              <span
+                className={cn(
+                  "size-2 shrink-0 rounded-full",
+                  g.online ? "bg-green-500" : "bg-muted-foreground/40"
+                )}
+                aria-hidden
+              />
+              <span className="min-w-0 flex-1 truncate text-sm">{g.name}</span>
+              <Button
+                variant="ghost"
+                className="min-h-11"
+                disabled={busy}
+                onClick={() => onKick(g.id)}
+                aria-label={`Kick ${g.name}`}
+              >
+                <UserMinus className="h-4 w-4" />
+                Kick
+              </Button>
+            </div>
+          ))}
+          <div className="flex gap-2 pt-1">
+            <Button
+              variant="outline"
+              className="min-h-11 flex-1"
+              onClick={onInvite}
+            >
+              Invite link
+            </Button>
+            <Button
+              variant="outline"
+              className="text-destructive min-h-11 flex-1"
+              disabled={busy}
+              onClick={onEnd}
+            >
+              End access
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}