Hooks

import { useThreads, useApprovals, useVendoThread } from "@vendoai/vendo/ui";

import { useApprovalModal } from "@vendoai/vendo/ui/chrome";

{
  threads: ThreadSummary[];      // seeded, never undefined: [] before the first read lands
  error: Error | undefined;      // last fetch error, or undefined when the read succeeded
  isLoading: boolean;            // true only on the first load; refresh does not flip it
  refresh: () => Promise<void>;  // re-fetch on demand; resolves after the read settles
}

"use client";

import { useApprovals } from "@vendoai/vendo/ui";

export function ApprovalBadge() {
  const { pending, error, isLoading, refresh } = useApprovals({ pollMs: 5_000 });

  if (isLoading) return <span aria-hidden />;
  if (error) return <button onClick={refresh}>Retry</button>;

  return pending.length > 0 ? <span>{pending.length} to review</span> : null;
}

"use client";

import { useThreads } from "@vendoai/vendo/ui";

export function ThreadList({ onSelect }: { onSelect: (id: string) => void }) {
  const { threads, error, isLoading, refresh } = useThreads();

  if (isLoading) return <p>Loading…</p>;
  if (error) return <button onClick={refresh}>Retry</button>;
  if (threads.length === 0) return <p>No conversations yet.</p>;

  return (
    <ul>
      {threads.map((thread) => (
        <li key={thread.id}>
          <button onClick={() => onSelect(thread.id)}>{thread.title}</button>
        </li>
      ))}
    </ul>
  );
}

const {
  threadId,      // the effective id: yours, or the one the server minted on the first turn
  messages,      // UIMessage[]
  beats,         // the turn's status beats
  sendMessage,   // send a turn; the name is not `send`
  steer,         // land a mid-turn correction on the running turn
  status,        // "ready" | "submitted" | "streaming" | "error"
  error,
  approvals,     // the turn's pending approval parts, ready to render
  addToolApprovalResponse,
  stop,
  resumeStream,
  setMessages,
  regenerate,
  clearError,
} = useVendoThread(selectedThreadId);

"use client";

import { useVendoThread } from "@vendoai/vendo/ui";

export function EditLastButton() {
  const { messages, setMessages } = useVendoThread();

  function editLast() {
    const lastUser = [...messages].reverse().find((m) => m.role === "user");
    if (!lastUser) return;
    setMessages(messages.slice(0, messages.indexOf(lastUser)));
    // refill your own composer input from lastUser
  }

  return <button onClick={editLast}>Edit last</button>;
}

const {
  threadId,       // the id the server minted, also handed to onThreadId
  messages,
  sendMessage,
  status,
  error,
  interruptions,  // Interruption[] — what this turn is waiting on a person for
  resume,         // answer them, keyed by Interruption.id
  stop,
} = useVendoChat({ api: "/api/agent" });

"use client";

import { useApps } from "@vendoai/vendo/ui";

export function AppsDrawer() {
  const { apps, error, isLoading, refresh, exportApp, importApp } = useApps();

  async function onExport(id: string) {
    const bytes = await exportApp(id);
    // save to disk, share, or hand to another user
  }

  async function onImport(file: File) {
    await importApp(new Uint8Array(await file.arrayBuffer()));
    // importApp already refreshed the list
  }
}

export interface VendoOverlayController {
  isOpen: boolean;
  open(): void;
  close(): void;
  toggle(): void;
  newConversation(): void;
  overlayProps: { open: boolean; onOpenChange(open: boolean): void; conversationKey: number };
}

export function useApprovalModal(): {
  onParked(parked: ParkedPress): void;  // hand this to the tree's onParked prop
  modal: ReactNode;                     // render this somewhere in your tree
};

export interface ParkedPress {
  nodeId: string;
  approvalId: ApprovalId;
}

import { refusalCopy } from "@vendoai/vendo/ui/chrome";

try {
  await approvals.decide([id], "approve");
} catch (reason) {
  setError(refusalCopy(reason));  // e.g. "This request was already answered."
}