@saadnvd1/agent-os 0.3.778 → 0.3.780

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

@@ -3,18 +3,33 @@ import { z } from "zod";
 import { fail, readJson, refuseDemo, toResponse } from "@/lib/share/route";
 import {
   admit,
+  changeLevel,
   deny,
   dismissSuggestion,
   endLive,
+  giveWheel,
   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("admit"),
+    guestId: z.string().min(1).max(64),
+    drive: z.boolean().optional(),
+  }),
   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("level"),
+    level: z.enum(["watch", "suggest", "drive"]),
+  }),
+  // Gives the wheel to an admitted guest of a Drive share; null takes it back.
+  z.object({
+    action: z.literal("wheel"),
+    guestId: z.string().min(1).max(64).nullable(),
+  }),
   z.object({
     action: z.literal("send"),
     suggestionId: z.string().min(1).max(64),
@@ -27,7 +42,8 @@ const Action = z.discriminatedUnion("action", [
 ]);
 
 // 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.
+// away, remove one, send a suggestion to the agent or dismiss it, change the
+// level, give or take back the wheel.
 export async function POST(
   request: Request,
   { params }: { params: Promise<{ id: string }> }
@@ -42,9 +58,11 @@ export async function POST(
   startLive();
   try {
     const a = body.data;
-    if (a.action === "admit") admit(id, a.guestId);
+    if (a.action === "admit") admit(id, a.guestId, { drive: a.drive });
     else if (a.action === "deny") deny(id, a.guestId);
     else if (a.action === "kick") kick(id, a.guestId);
+    else if (a.action === "level") changeLevel(id, a.level);
+    else if (a.action === "wheel") giveWheel(id, a.guestId);
     else if (a.action === "send")
       await sendSuggestion(id, a.suggestionId, a.text);
     else dismissSuggestion(id, a.suggestionId);

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

@@ -42,4 +42,40 @@ describe("live-shares routes", () => {
       400
     );
   });
+
+  it("accept watch, suggest and drive, and history as a boolean", async () => {
+    // Past validation: not linked to Connect here, so 409, never 400.
+    expect((await POST(req({ sessionId: "s", level: "drive" }))).status).toBe(
+      409
+    );
+    expect((await POST(req({ sessionId: "s", level: "root" }))).status).toBe(
+      400
+    );
+    expect((await POST(req({ sessionId: "s", history: "yes" }))).status).toBe(
+      400
+    );
+    // A level for a share this machine doesn't hold: 404, so it validated.
+    expect(
+      (await act(req({ action: "level", level: "drive" }), ctx)).status
+    ).toBe(404);
+    expect(
+      (await act(req({ action: "level", level: "admin" }), ctx)).status
+    ).toBe(400);
+  });
+
+  it("validate the wheel and admit-to-drive actions", async () => {
+    for (const body of [
+      { action: "wheel" },
+      { action: "wheel", guestId: 7 },
+      { action: "wheel", guestId: "" },
+      { action: "admit", guestId: "g", drive: "yes" },
+    ])
+      expect((await act(req(body), ctx)).status).toBe(400);
+    for (const body of [
+      { action: "wheel", guestId: "g1" },
+      { action: "wheel", guestId: null },
+      { action: "admit", guestId: "g", drive: true },
+    ])
+      expect((await act(req(body), ctx)).status).toBe(404);
+  });
 });

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

@@ -2,11 +2,13 @@ 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";
+import { createLive, inviteFor, listLive, startLive } from "@/lib/live/service";
 
 const Create = z.object({
   sessionId: z.string().min(1).max(100),
   expiresIn: z.enum(["1h", "session"]).default("1h"),
+  level: z.enum(["watch", "suggest", "drive"]).default("suggest"),
+  history: z.boolean().default(true),
 });
 
 // POST /api/live-shares - mint a live link for one chat and start publishing.
@@ -19,7 +21,12 @@ export async function POST(request: Request) {
   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);
+    const view = await createLive(
+      body.data.sessionId,
+      body.data.expiresIn,
+      body.data.level,
+      body.data.history
+    );
     return NextResponse.json(view, { status: 201 });
   } catch (err) {
     if ((err as Error).message === "Session not found")
@@ -36,5 +43,9 @@ export async function GET(request: Request) {
   startLive();
   const sessionId =
     new URL(request.url).searchParams.get("sessionId") ?? undefined;
-  return NextResponse.json({ linked: linked(), shares: listLive(sessionId) });
+  return NextResponse.json({
+    linked: linked(),
+    shares: listLive(sessionId),
+    ...(sessionId ? { invite: inviteFor(sessionId) } : {}),
+  });
 }

package/components/Chat/Approval.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { MessageCircleQuestion, ShieldQuestion } from "lucide-react";
+import { MessageCircleQuestion, ShieldQuestion, Users } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import type { ApprovalDecision, ChatItem } from "@/lib/chat/events";
 import { cn } from "@/lib/utils";
@@ -20,6 +20,17 @@ function AccessCard({
 }) {
   return (
     <div className="bg-primary/[0.06] space-y-3 rounded-xl p-3">
+      {item.guest && (
+        <p className="text-muted-foreground flex items-center gap-1.5 text-xs">
+          <Users className="h-3.5 w-3.5 shrink-0" aria-hidden />
+          <span className="min-w-0 truncate">
+            <span className="text-foreground font-medium">
+              {item.guest.name}&apos;s turn
+            </span>{" "}
+            · a live guest asked for this
+          </span>
+        </p>
+      )}
       <div className="flex items-start gap-2 text-sm">
         <ShieldQuestion className="text-primary mt-0.5 h-4 w-4 shrink-0" />
         <span className="min-w-0 break-words">{item.title}</span>
@@ -33,7 +44,7 @@ function AccessCard({
         >
           Deny
         </Button>
-        {item.canAlways && (
+        {item.canAlways && !item.guest && (
           <Button
             variant="secondary"
             className="h-11 md:h-9"

package/components/Chat/EventRow.tsx

@@ -29,6 +29,7 @@ export const ICON: Record<ChatOriginKind, LucideIcon> = {
   decision: UserCheck,
   device: Smartphone,
   guest: Users,
+  "guest-drive": Users,
 };
 
 // Longer than this (what fits beside a source on a phone), or more than one line,
@@ -183,6 +184,10 @@ export function EventRow({
               <span className="truncate font-medium">
                 Suggested by {origin.label}
               </span>
+            ) : origin.kind === "guest-drive" ? (
+              <span className="truncate font-medium">
+                Prompted by {origin.label}
+              </span>
             ) : (
               <Source origin={origin} />
             )

package/components/Chat/Queue.tsx

@@ -53,7 +53,15 @@ export function Queue({
             <span className="text-muted-foreground w-5 shrink-0 pt-3 text-center text-xs tabular-nums">
               {i + 1}
             </span>
-            {editing?.id === m.id ? (
+            {m.guest ? (
+              // A driving guest's prompt: theirs to word, the host's to remove.
+              <div className="min-h-11 min-w-0 flex-1 px-2 py-2.5 text-sm break-words whitespace-pre-wrap">
+                <span className="text-muted-foreground block text-xs">
+                  {m.guest.name} (guest)
+                </span>
+                <span className="line-clamp-3">{m.guest.body}</span>
+              </div>
+            ) : editing?.id === m.id ? (
               <textarea
                 autoFocus
                 value={editing.text}
@@ -99,20 +107,24 @@ export function Queue({
               </button>
             )}
             <div className="flex shrink-0 items-center">
-              <IconButton
-                label="Send now"
-                onClick={() => onSendNow(m.id)}
-                className="text-foreground"
-              >
-                <SendHorizontal className="h-4 w-4" />
-              </IconButton>
-              <IconButton
-                label="Edit"
-                onClick={() => setEditing({ id: m.id, text: m.text })}
-                className="max-md:hidden"
-              >
-                <Pencil className="h-3.5 w-3.5" />
-              </IconButton>
+              {!m.guest && (
+                <>
+                  <IconButton
+                    label="Send now"
+                    onClick={() => onSendNow(m.id)}
+                    className="text-foreground"
+                  >
+                    <SendHorizontal className="h-4 w-4" />
+                  </IconButton>
+                  <IconButton
+                    label="Edit"
+                    onClick={() => setEditing({ id: m.id, text: m.text })}
+                    className="max-md:hidden"
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </IconButton>
+                </>
+              )}
               <IconButton
                 label="Move up"
                 disabled={i === 0}

package/components/Live/DriveBanner.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Hand, Users } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { LiveView } from "@/data/live";
+
+// A guest holds the wheel: what they're doing, and the host's way back.
+export function DriveBanner({
+  banner,
+  busy,
+  onTakeBack,
+}: {
+  banner: NonNullable<LiveView["banner"]>;
+  busy: boolean;
+  onTakeBack: () => void;
+}) {
+  return (
+    <div
+      role="status"
+      className="bg-primary/[0.06] flex items-center gap-2 rounded-xl py-1 pr-1 pl-3 shadow-sm"
+    >
+      <Users className="text-primary h-4 w-4 shrink-0" aria-hidden />
+      <div className="min-w-0 flex-1 text-sm">
+        <p className="leading-snug font-medium">{banner.text}</p>
+        <p className="text-muted-foreground truncate text-xs max-sm:hidden">
+          Every edit, command and outside read asks you first.
+        </p>
+      </div>
+      {banner.action && (
+        <Button
+          variant="outline"
+          className="min-h-11 shrink-0"
+          disabled={busy}
+          onClick={onTakeBack}
+        >
+          <Hand className="h-4 w-4" aria-hidden />
+          {banner.action.label}
+        </Button>
+      )}
+    </div>
+  );
+}

package/components/Live/InviteDialog.tsx

@@ -19,6 +19,8 @@ import {
   useEndLive,
   useLiveShare,
   type LiveExpiry,
+  type LiveInvite,
+  type LiveLevel,
   type LiveView,
 } from "@/data/live";
 import { EXPIRY_LABEL } from "@/lib/live/types";
@@ -47,8 +49,8 @@ function InviteBody({ sessionId }: { sessionId: string }) {
         <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.
+          They see this chat as it happens, with secrets masked. You choose what
+          else they can do.
         </DialogDescription>
       </div>
       {query.isPending ? (
@@ -60,15 +62,26 @@ function InviteBody({ sessionId }: { sessionId: string }) {
       ) : share ? (
         <Link share={share} />
       ) : (
-        <Create sessionId={sessionId} />
+        <Create sessionId={sessionId} invite={query.data.invite} />
       )}
     </DialogContent>
   );
 }
 
-function Create({ sessionId }: { sessionId: string }) {
+function Create({
+  sessionId,
+  invite,
+}: {
+  sessionId: string;
+  invite?: LiveInvite;
+}) {
   const [expiresIn, setExpiresIn] = useState<LiveExpiry>("1h");
+  const [level, setLevel] = useState<LiveLevel>("suggest");
+  const [history, setHistory] = useState<boolean | null>(null);
   const create = useCreateLive();
+  const options = invite?.levels ?? [];
+  const chosen = options.find((o) => o.value === level);
+  const withHistory = history ?? invite?.history.default ?? true;
   return (
     <>
       <div className="flex flex-col gap-1.5">
@@ -77,18 +90,34 @@ function Create({ sessionId }: { sessionId: string }) {
         </span>
         <Segmented
           label="Access"
-          value="watch"
-          onChange={() => {}}
-          options={[
-            { value: "watch", label: "Watch + suggest" },
-            { value: "drive", label: "Drive (later)" },
-          ]}
-          disabled
+          value={level}
+          onChange={setLevel}
+          options={options.map((o) => ({
+            value: o.value,
+            label: o.label,
+            hint: o.reason ?? o.hint,
+            disabled: !o.enabled,
+          }))}
         />
         <p className="text-muted-foreground text-xs">
-          Driving the agent from a guest link isn&apos;t available yet.
+          {chosen?.hint}
+          {options
+            .filter((o) => !o.enabled && o.reason)
+            .map((o) => ` ${o.label}: ${o.reason}.`)
+            .join("")}
         </p>
       </div>
+      {invite && (
+        <label className="flex min-h-11 items-center gap-3 text-sm">
+          <input
+            type="checkbox"
+            className="size-5"
+            checked={withHistory}
+            onChange={(e) => setHistory(e.target.checked)}
+          />
+          {invite.history.label}
+        </label>
+      )}
       <div className="flex flex-col gap-1.5">
         <span className="text-muted-foreground text-xs font-medium">
           The link works for
@@ -109,7 +138,9 @@ function Create({ sessionId }: { sessionId: string }) {
       <Button
         className="min-h-11"
         disabled={create.isPending}
-        onClick={() => create.mutate({ sessionId, expiresIn })}
+        onClick={() =>
+          create.mutate({ sessionId, expiresIn, level, history: withHistory })
+        }
       >
         <Users className="h-4 w-4" />
         {create.isPending ? "Creating…" : "Create invite link"}

package/components/Live/LiveChip.tsx

@@ -3,8 +3,9 @@
 import { useState } from "react";
 import { ChevronDown, Radio, UserMinus } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Segmented } from "@/components/ui/segmented";
 import { StatusPill } from "@/components/ui/status-pill";
-import type { LiveView } from "@/data/live";
+import type { LiveLevel, LiveView } from "@/data/live";
 import { cn } from "@/lib/utils";
 
 export function presenceText(guests: LiveView["guests"]): string {
@@ -18,13 +19,15 @@ export function presenceText(guests: LiveView["guests"]): string {
 export function LiveChip({
   share,
   busy,
-  onKick,
+  onAction,
+  onLevel,
   onEnd,
   onInvite,
 }: {
   share: LiveView;
   busy: boolean;
-  onKick: (guestId: string) => void;
+  onAction: (guestId: string, kind: string) => void;
+  onLevel: (level: LiveLevel) => void;
   onEnd: () => void;
   onInvite: () => void;
 }) {
@@ -58,6 +61,21 @@ export function LiveChip({
           {share.notice && (
             <p className="text-muted-foreground px-2 text-xs">{share.notice}</p>
           )}
+          <Segmented
+            label="Access"
+            value={share.level}
+            onChange={onLevel}
+            disabled={busy}
+            options={share.levels.map((o) => ({
+              value: o.value,
+              label: o.label,
+              hint: o.reason ?? o.hint,
+              disabled: !o.enabled,
+            }))}
+          />
+          <p className="text-muted-foreground px-2 text-xs">
+            {share.levels.find((o) => o.value === share.level)?.hint}
+          </p>
           {admitted.length === 0 && (
             <p className="text-muted-foreground px-2 py-1 text-xs">
               No one has joined yet.
@@ -73,16 +91,19 @@ export function LiveChip({
                 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>
+              {g.actions.map((a) => (
+                <Button
+                  key={a.kind}
+                  variant="ghost"
+                  className="min-h-11"
+                  disabled={busy}
+                  onClick={() => onAction(g.id, a.kind)}
+                  aria-label={`${a.label} ${g.name}`}
+                >
+                  {a.kind === "kick" && <UserMinus className="h-4 w-4" />}
+                  {a.label}
+                </Button>
+              ))}
             </div>
           ))}
           <div className="flex gap-2 pt-1">

package/components/Live/LivePanel.tsx

@@ -3,12 +3,14 @@
 import { toast } from "sonner";
 import { useEndLive, useLiveAction, useLiveShare } from "@/data/live";
 import { liveUiActions } from "@/stores/liveUi";
+import { DriveBanner } from "./DriveBanner";
 import { GuestPromptCard } from "./GuestPromptCard";
 import { LiveChip } from "./LiveChip";
 import { LobbyCard } from "./LobbyCard";
 
 // Above the composer while a session has a live link: the Live chip, who is
-// waiting to come in, and the suggestions to send, edit or dismiss.
+// driving, who is waiting to come in, and the suggestions to send, edit or
+// dismiss.
 export function LivePanel({
   sessionId,
   title,
@@ -25,29 +27,44 @@ export function LivePanel({
   if (!share) return null;
   const busy = act.isPending || end.isPending;
   const fail = (e: Error) => toast.error(e.message);
+  const doAction = (guestId: string, kind: string) => {
+    if (kind === "admit" || kind === "deny" || kind === "kick")
+      act.mutate({ action: kind, guestId }, { onError: fail });
+    else if (kind === "admit_drive")
+      act.mutate({ action: "admit", guestId, drive: true }, { onError: fail });
+    else if (kind === "give_wheel")
+      act.mutate({ action: "wheel", guestId }, { onError: fail });
+    else if (kind === "take_back")
+      act.mutate({ action: "wheel", guestId: null }, { onError: fail });
+  };
   const lobby = share.guests.filter((g) => g.status === "pending");
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col gap-2 px-3 pb-2">
       <LiveChip
         share={share}
         busy={busy}
-        onKick={(guestId) =>
-          act.mutate({ action: "kick", guestId }, { onError: fail })
+        onAction={doAction}
+        onLevel={(level) =>
+          act.mutate({ action: "level", level }, { onError: fail })
         }
         onEnd={() => end.mutate(undefined, { onError: fail })}
         onInvite={() => liveUiActions.open(sessionId, title)}
       />
+      {share.banner && share.driver && (
+        <DriveBanner
+          banner={share.banner}
+          busy={busy}
+          onTakeBack={() =>
+            act.mutate({ action: "wheel", guestId: null }, { onError: fail })
+          }
+        />
+      )}
       {lobby.map((g) => (
         <LobbyCard
           key={g.id}
           guest={g}
           busy={busy}
-          onAdmit={() =>
-            act.mutate({ action: "admit", guestId: g.id }, { onError: fail })
-          }
-          onDeny={() =>
-            act.mutate({ action: "deny", guestId: g.id }, { onError: fail })
-          }
+          onAction={(kind) => doAction(g.id, kind)}
         />
       ))}
       {share.suggestions.map((s) => (

package/components/Live/LobbyCard.tsx

@@ -10,13 +10,11 @@ type Guest = LiveView["guests"][number];
 export function LobbyCard({
   guest,
   busy,
-  onAdmit,
-  onDeny,
+  onAction,
 }: {
   guest: Guest;
   busy: boolean;
-  onAdmit: () => void;
-  onDeny: () => void;
+  onAction: (kind: string) => void;
 }) {
   return (
     <div
@@ -41,23 +39,22 @@ export function LobbyCard({
         </div>
       </div>
       <div className="flex gap-2">
-        <Button
-          className="min-h-11 flex-1 sm:flex-none"
-          disabled={busy}
-          onClick={onAdmit}
-        >
-          <Check className="h-4 w-4" />
-          Admit
-        </Button>
-        <Button
-          variant="outline"
-          className="min-h-11 flex-1 sm:flex-none"
-          disabled={busy}
-          onClick={onDeny}
-        >
-          <X className="h-4 w-4" />
-          Deny
-        </Button>
+        {guest.actions.map((a, i) => (
+          <Button
+            key={a.kind}
+            variant={i === 0 ? "default" : "outline"}
+            className="min-h-11 flex-1 sm:flex-none"
+            disabled={busy}
+            onClick={() => onAction(a.kind)}
+          >
+            {a.kind === "admit" ? (
+              <Check className="h-4 w-4" />
+            ) : a.kind === "deny" ? (
+              <X className="h-4 w-4" />
+            ) : null}
+            {a.label}
+          </Button>
+        ))}
       </div>
     </div>
   );

package/components/ui/segmented.tsx

@@ -6,6 +6,7 @@ export interface SegmentedOption<T extends string> {
   value: T;
   label: string;
   hint?: string;
+  disabled?: boolean;
 }
 
 /** One choice out of a few, side by side. Radio semantics, 44px targets. */
@@ -37,7 +38,7 @@ export function Segmented<T extends string>({
             role="radio"
             aria-checked={on}
             title={o.hint}
-            disabled={disabled}
+            disabled={disabled || o.disabled}
             onClick={() => !on && onChange(o.value)}
             className={cn(
               "min-h-11 rounded-md px-2 text-sm font-medium transition-colors disabled:opacity-50",