@saadnvd1/agent-os 0.3.770 → 0.3.777

package/components/CommandPalette/PaletteRows.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { PaletteCommand } from "@/lib/palette/registry";
+import type { Section } from "@/lib/palette/sections";
+import { cn } from "@/lib/utils";
+
+// The sections' rows under their headings, numbered in order so the caller's
+// highlight and Enter agree with what's drawn.
+export function PaletteRows({
+  sections,
+  highlighted,
+  onHover,
+  onRun,
+}: {
+  sections: Section[];
+  highlighted: number;
+  onHover: (i: number) => void;
+  onRun: (c: PaletteCommand) => void;
+}) {
+  let index = 0;
+  return (
+    <>
+      {sections.map((s) => (
+        <div key={s.name || "results"} className="mb-1">
+          {s.name && (
+            <p className="text-muted-foreground px-2 pt-2 pb-1 text-[11px] font-medium">
+              {s.name}
+            </p>
+          )}
+          {s.items.map((c) => {
+            const i = index++;
+            const Icon = c.icon as LucideIcon | undefined;
+            return (
+              <button
+                key={c.id}
+                type="button"
+                role="option"
+                aria-selected={i === highlighted}
+                data-index={i}
+                onMouseMove={() => i !== highlighted && onHover(i)}
+                onClick={() => onRun(c)}
+                className={cn(
+                  "flex min-h-11 w-full items-center gap-2.5 rounded-lg px-2 text-left text-sm md:min-h-9",
+                  i === highlighted && "bg-primary/10",
+                  c.id.startsWith("see-all:") && "text-muted-foreground"
+                )}
+              >
+                {Icon && (
+                  <Icon className="text-muted-foreground h-4 w-4 shrink-0" />
+                )}
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{c.title}</span>
+                  {c.detail && (
+                    <span
+                      className={cn(
+                        "block truncate text-xs",
+                        c.status === "waiting"
+                          ? "text-amber-700 dark:text-amber-400"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {c.detail}
+                    </span>
+                  )}
+                </span>
+                {c.hint && (
+                  <kbd className="text-muted-foreground hidden shrink-0 font-mono text-[11px] sm:inline">
+                    {c.hint}
+                  </kbd>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}

package/components/CommandPalette/PaletteTabs.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { PALETTE_TABS, type PaletteTab } from "@/lib/palette/registry";
+import { cn } from "@/lib/utils";
+
+// The palette's tabs. Tab and Shift-Tab in the input move between them, so
+// these keep out of the focus order and never take focus from it.
+export function PaletteTabs({
+  tab,
+  onSelect,
+}: {
+  tab: PaletteTab;
+  onSelect: (tab: PaletteTab) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    ref.current
+      ?.querySelector('[aria-selected="true"]')
+      ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [tab]);
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      aria-label="Palette sections"
+      className="border-foreground/[0.06] flex shrink-0 scrollbar-none gap-1 overflow-x-auto border-b px-2 py-1.5"
+    >
+      {PALETTE_TABS.map((t) => (
+        <button
+          key={t.id}
+          type="button"
+          role="tab"
+          id={`palette-tab-${t.id}`}
+          aria-selected={t.id === tab}
+          tabIndex={-1}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => onSelect(t.id)}
+          className={cn(
+            "flex min-h-11 shrink-0 items-center rounded-lg px-3 text-sm whitespace-nowrap md:min-h-8 md:px-2.5 md:text-xs",
+            t.id === tab
+              ? "bg-primary/10 text-foreground font-medium"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          {t.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/components/CommandPalette/conversations/ConversationSearch.tsx

@@ -8,14 +8,16 @@ import { MIN_QUERY, useConversationSearch } from "@/data/search";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
 import { useViewport } from "@/hooks/useViewport";
+import { cycleTab } from "@/lib/palette/tabs";
 import { paletteActions, paletteUi } from "@/stores/palette";
+import { PaletteTabs } from "../PaletteTabs";
 import { NoResults, Recent, Skeleton } from "./EmptyState";
 import { Preview } from "./Preview";
 import { ResultList, flatten } from "./ResultList";
 import { loadRecent, saveRecent, withRecent } from "./recent";
 import { useOpenHit } from "./useOpenHit";
 
-// ⌘K's second mode: what was said in any chat, found as you type. Results on
+// ⌘K's Conversations tab: what was said in any chat, found as you type. Results on
 // the left, the selected message in its conversation on the right; a phone
 // shows the list, and a tap shows the message.
 export function ConversationSearch() {
@@ -97,7 +99,10 @@ export function ConversationSearch() {
                   openHit(highlighted);
                 } else if (e.key === "Tab") {
                   e.preventDefault();
-                  paletteActions.setMode("commands", text);
+                  paletteActions.setTab(
+                    cycleTab("conversations", e.shiftKey ? -1 : 1),
+                    text
+                  );
                 }
               }}
               placeholder="Search every conversation…"
@@ -111,8 +116,12 @@ export function ConversationSearch() {
               esc
             </kbd>
           </div>
+          <PaletteTabs
+            tab="conversations"
+            onSelect={(tab) => paletteActions.setTab(tab, text)}
+          />
           {workspace && (
-            <div className="flex items-center gap-2 px-3 pb-2">
+            <div className="flex items-center gap-2 px-3 py-2">
               <div className="flex overflow-hidden rounded-md border text-xs">
                 {(
                   [
@@ -222,19 +231,12 @@ export function ConversationSearch() {
             <kbd className="font-mono">↵</kbd> open
           </span>
           <span>
-            <kbd className="font-mono">tab</kbd> commands
+            <kbd className="font-mono">tab</kbd> next tab
           </span>
           <span>
             <kbd className="font-mono">esc</kbd> close
           </span>
         </span>
-        <button
-          type="button"
-          onClick={() => paletteActions.setMode("commands", text)}
-          className="h-8 sm:hidden"
-        >
-          Commands
-        </button>
         <span className="ml-auto font-mono">
           {searching && data
             ? `${groups.length} ${groups.length === 1 ? "chat" : "chats"} · ${data.tookMs} ms`

package/components/CommandPalette/useAppCommands.ts

@@ -23,6 +23,7 @@ import {
   Scale,
 } from "lucide-react";
 import type { Session } from "@/lib/db";
+import type { SessionStatus } from "@/components/views/types";
 import type { PaletteCommand } from "@/lib/palette/registry";
 import { useWorkspacesQuery } from "@/data/workspaces";
 import { useRecipesQuery } from "@/data/recipes";
@@ -57,13 +58,25 @@ function switchMode(current: string | undefined, to: "light" | "dark"): string {
   }
 }
 
+const STATE: Record<string, { status: "running" | "waiting"; detail: string }> =
+  {
+    waiting: { status: "waiting", detail: "Waiting on you" },
+    running: { status: "running", detail: "Working" },
+  };
+
+function sessionState(s: SessionStatus | undefined) {
+  return s?.need || (s?.asks ?? 0) > 0 ? STATE.waiting : STATE[s?.status ?? ""];
+}
+
 // The palette's app-wide commands and its session search.
 export function useAppCommands({
   sessions,
+  statuses,
   onSelectSession,
   onSearchCode,
 }: {
   sessions: Session[];
+  statuses: Record<string, SessionStatus>;
   onSelectSession: (session: Session) => void;
   onSearchCode: () => void;
 }) {
@@ -260,6 +273,7 @@ export function useAppCommands({
         group: "Sessions",
         keywords: [s.working_directory, s.branch_name ?? ""].filter(Boolean),
         icon: MessageSquare,
+        ...sessionState(statuses[s.id]),
         run: () => onSelectSession(s),
       }))
   );

package/components/CommandPalette/useConversationRows.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { useMemo } from "react";
+import { MessagesSquare, Search } from "lucide-react";
+import type { PaletteCommand } from "@/lib/palette/registry";
+import { MIN_QUERY, useConversationSearch } from "@/data/search";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
+import { paletteActions } from "@/stores/palette";
+import { plain } from "./conversations/format";
+import { useOpenHit } from "./conversations/useOpenHit";
+
+// Conversation matches offered last in All.
+const CONVERSATIONS = 3;
+
+// The few conversations a query finds, then a way into the full search.
+export function useConversationRows(
+  query: string,
+  enabled: boolean
+): PaletteCommand[] {
+  const { workspace } = useSelectedWorkspace();
+  const debounced = useDebouncedValue(query.trim(), 150);
+  const openHit = useOpenHit();
+  const { data: found } = useConversationSearch(
+    debounced,
+    workspace?.id ?? "all",
+    { limit: CONVERSATIONS, enabled }
+  );
+  return useMemo(() => {
+    const q = query.trim();
+    if (!enabled || q.length < MIN_QUERY || q !== debounced) return [];
+    const hits = (found?.groups ?? []).flatMap((group) =>
+      group.hits.slice(0, 1).map((hit) => ({
+        id: `conversation:${group.sessionId}:${hit.itemId}`,
+        title: group.name,
+        detail: plain(hit.snippet),
+        group: "Conversations",
+        icon: MessagesSquare,
+        run: () => openHit(group, hit),
+        keepOpen: true,
+      }))
+    );
+    return [
+      ...hits,
+      {
+        id: "conversation:all",
+        title: `Search all conversations for “${q}”`,
+        group: "Conversations",
+        icon: Search,
+        keepOpen: true,
+        run: () => paletteActions.setTab("conversations", q),
+      },
+    ];
+  }, [found, query, debounced, enabled, openHit]);
+}

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>
+  );
+}