a2a-ui 0.8.3

package/app/dashboard/conversations/page.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import type { Part } from "@a2a-js/sdk";
+import { partsToPlainText } from "@/lib/a2a/parts";
+import {
+  ArchiveIcon,
+  ArchiveRestoreIcon,
+  CopyIcon,
+  DownloadIcon,
+  GitCompareArrowsIcon,
+  PencilIcon,
+  PinIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { PageTitle, Muted, Caption, Small } from "@/components/typography";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks";
+import {
+  removeChat,
+  renameChat,
+  setChatArchived,
+  setChatPinned,
+  cloneChat,
+  type AgentMessageItem,
+  type ArtifactItem,
+  type Chat,
+} from "@/lib/features/chats/chatsSlice";
+import { buildChatTraceJson, buildChatTraceMarkdown } from "@/lib/utils/chatExport";
+
+type ArchiveFilter = "active" | "archived" | "all";
+type SortMode = "recent" | "title" | "agent";
+
+function downloadFile(name: string, content: string, type: string) {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function textOf(item: ArtifactItem | AgentMessageItem) {
+  return item.parts
+    .filter((part): part is Extract<Part, { kind: "text" }> => part.kind === "text")
+    .map((part) => part.text)
+    .join("");
+}
+
+function chatSearchText(chat: Chat) {
+  return [
+    chat.title,
+    chat.agentName,
+    chat.agentUrl,
+    chat.lastMessage,
+    ...chat.items.flatMap((item) => {
+      if (item.kind === "user-message") return [partsToPlainText(item.parts)];
+      if (item.kind === "artifact" || item.kind === "agent-message") return [textOf(item)];
+      if (item.kind === "tool-call") return [item.toolName, item.query];
+      if (item.kind === "task-status") return [item.state];
+      return [];
+    }),
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+}
+
+function exportMarkdownTrace(chats: Chat[]) {
+  const generatedAt = new Date().toISOString();
+  const content = chats
+    .map((chat) => buildChatTraceMarkdown({ chat, generatedAt }))
+    .join("\n\n---\n\n");
+  downloadFile("a2a-conversations-trace.md", content, "text/markdown");
+}
+
+function exportForensicJson(chats: Chat[]) {
+  const generatedAt = new Date().toISOString();
+  downloadFile(
+    "a2a-conversations-trace.json",
+    JSON.stringify(
+      {
+        version: 1,
+        generatedAt,
+        chats: chats.map((chat) => buildChatTraceJson({ chat, generatedAt })),
+      },
+      null,
+      2,
+    ),
+    "application/json",
+  );
+}
+
+export default function ConversationsPage() {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const [query, setQuery] = useState("");
+  const [archiveFilter, setArchiveFilter] = useState<ArchiveFilter>("active");
+  const [sort, setSort] = useState<SortMode>("recent");
+  const [selected, setSelected] = useState<string[]>([]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState("");
+
+  const filteredChats = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    return chats
+      .filter((chat) => {
+        if (archiveFilter === "active" && chat.archived) return false;
+        if (archiveFilter === "archived" && !chat.archived) return false;
+        if (normalizedQuery && !chatSearchText(chat).includes(normalizedQuery)) return false;
+        return true;
+      })
+      .sort((a, b) => {
+        if (Boolean(a.pinned) !== Boolean(b.pinned)) return a.pinned ? -1 : 1;
+        if (sort === "title") return a.title.localeCompare(b.title);
+        if (sort === "agent") return a.agentName.localeCompare(b.agentName);
+        return b.timestamp - a.timestamp;
+      });
+  }, [archiveFilter, chats, query, sort]);
+
+  const selectedChats = chats.filter((chat) => selected.includes(chat.id));
+  const compareDisabledReason =
+    selectedChats.length === 2
+      ? null
+      : selectedChats.length === 0
+        ? "Select exactly two runs to compare."
+        : `Select ${selectedChats.length > 2 ? "only" : "one more"} run to compare.`;
+  const toggleSelected = (chatId: string) => {
+    setSelected((prev) =>
+      prev.includes(chatId) ? prev.filter((id) => id !== chatId) : [...prev, chatId]
+    );
+  };
+
+  const startRename = (chat: Chat) => {
+    setEditingId(chat.id);
+    setEditingTitle(chat.title);
+  };
+
+  const saveRename = () => {
+    if (editingId) {
+      dispatch(renameChat({ chatId: editingId, title: editingTitle }));
+    }
+    setEditingId(null);
+    setEditingTitle("");
+  };
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-6 overflow-y-auto p-4 sm:p-6 md:p-8">
+      <div className="flex flex-col items-start justify-between gap-4 lg:flex-row lg:items-center">
+        <div>
+          <PageTitle>Conversations</PageTitle>
+          <Muted>Search, rename, archive, delete, and export saved chats.</Muted>
+        </div>
+        <div className="grid w-full grid-cols-1 gap-2 sm:w-auto sm:grid-cols-2 lg:flex lg:flex-wrap lg:items-center">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={selectedChats.length !== 2}
+            title={compareDisabledReason ?? "Compare selected runs"}
+            onClick={() =>
+              router.push(
+                `/dashboard/compare?left=${selectedChats[0].id}&right=${selectedChats[1].id}`,
+              )
+            }
+          >
+            <GitCompareArrowsIcon className="size-4" />
+            Compare Runs
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={selectedChats.length === 0}
+            onClick={() =>
+              downloadFile(
+                "a2a-conversations.json",
+                JSON.stringify(selectedChats, null, 2),
+                "application/json"
+              )
+            }
+          >
+            <DownloadIcon className="size-4" />
+            Export Raw JSON
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={selectedChats.length === 0}
+            onClick={() => exportForensicJson(selectedChats)}
+          >
+            <DownloadIcon className="size-4" />
+            Export Forensic JSON
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={selectedChats.length === 0}
+            onClick={() => exportMarkdownTrace(selectedChats)}
+          >
+            <DownloadIcon className="size-4" />
+            Export Markdown Trace
+          </Button>
+        </div>
+        {compareDisabledReason && (
+          <Caption className="lg:w-full lg:text-right">{compareDisabledReason}</Caption>
+        )}
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-[1fr_180px_160px]">
+        <Input placeholder="Search titles, agents, messages, or tool calls" value={query} onChange={(e) => setQuery(e.target.value)} />
+        <Select value={archiveFilter} onValueChange={(value) => setArchiveFilter(value as ArchiveFilter)}>
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="archived">Archived</SelectItem>
+            <SelectItem value="all">All chats</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={sort} onValueChange={(value) => setSort(value as SortMode)}>
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="recent">Sort recent</SelectItem>
+            <SelectItem value="title">Sort title</SelectItem>
+            <SelectItem value="agent">Sort agent</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {filteredChats.length === 0 ? (
+        <div className="rounded-md border border-dashed p-8 text-center">
+          <Muted>No conversations match the current filters.</Muted>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {filteredChats.map((chat) => (
+            <div key={chat.id} className="min-w-0 rounded-md border p-4">
+              <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                <div className="flex min-w-0 flex-1 items-start gap-3">
+                  <input
+                    className="mt-1"
+                    type="checkbox"
+                    checked={selected.includes(chat.id)}
+                    onChange={() => toggleSelected(chat.id)}
+                    aria-label={`Select ${chat.title}`}
+                  />
+                  <div className="min-w-0 flex-1">
+                    {editingId === chat.id ? (
+                      <div className="flex flex-col gap-2 sm:flex-row">
+                        <Input value={editingTitle} onChange={(e) => setEditingTitle(e.target.value)} />
+                        <Button size="sm" onClick={saveRename}>Save</Button>
+                      </div>
+                    ) : (
+                      <Small className="truncate">{chat.title}</Small>
+                    )}
+                    <Caption className="mt-1 block truncate">
+                      {chat.agentName} · {new Date(chat.timestamp).toLocaleString()}
+                    </Caption>
+                    {chat.lastMessage && <Muted className="mt-2 line-clamp-2">{chat.lastMessage}</Muted>}
+                    <div className="mt-2 flex flex-wrap gap-1.5">
+                      <Badge variant={chat.archived ? "secondary" : "default"}>
+                        {chat.archived ? "Archived" : "Active"}
+                      </Badge>
+                      {chat.pinned && <Badge variant="outline">Pinned</Badge>}
+                      <Badge variant="outline">{chat.items.length} item{chat.items.length === 1 ? "" : "s"}</Badge>
+                    </div>
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
+                  <Button className="justify-center" size="sm" variant="outline" asChild>
+                    <Link href={`/dashboard/chat/${chat.id}`}>Open</Link>
+                  </Button>
+                  <Button className="justify-center" size="sm" variant="outline" onClick={() => startRename(chat)}>
+                    <PencilIcon className="size-4" />
+                    Rename
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() =>
+                      dispatch(setChatPinned({ chatId: chat.id, pinned: !chat.pinned }))
+                    }
+                  >
+                    <PinIcon className="size-4" />
+                    {chat.pinned ? "Unpin" : "Pin"}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      const nextChatId = crypto.randomUUID();
+                      dispatch(cloneChat({ chatId: chat.id, newChatId: nextChatId, mode: "prompt" }));
+                      router.push(`/dashboard/chat/${nextChatId}`);
+                    }}
+                    title={
+                      chat.items.some((item) => item.kind === "user-message")
+                        ? "Clone prompts into a fresh run"
+                        : "Start a new run from this chat context"
+                    }
+                  >
+                    <CopyIcon className="size-4" />
+                    <span className="truncate">
+                      {chat.items.some((item) => item.kind === "user-message") ? "Clone Prompt" : "New Run"}
+                    </span>
+                  </Button>
+                  <Button
+                    className="justify-center"
+                    size="sm"
+                    variant="outline"
+                    onClick={() => dispatch(setChatArchived({ chatId: chat.id, archived: !chat.archived }))}
+                  >
+                    {chat.archived ? <ArchiveRestoreIcon className="size-4" /> : <ArchiveIcon className="size-4" />}
+                    {chat.archived ? "Restore" : "Archive"}
+                  </Button>
+                  <Button
+                    className="justify-center"
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => {
+                      if (!window.confirm(`Delete "${chat.title}"? This cannot be undone.`)) return;
+                      dispatch(removeChat(chat.id));
+                      setSelected((prev) => prev.filter((id) => id !== chat.id));
+                    }}
+                  >
+                    <Trash2Icon className="size-4" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/dashboard/embed/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { A2AAgentCard } from "@/components/chat/A2AAgentCard";
+import { A2AChat } from "@/components/chat/A2AChat";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Caption, PageTitle, Muted, P } from "@/components/typography";
+import { useA2AConnection } from "@/hooks/use-a2a-connection";
+
+const DEMO_AGENT_URL =
+  process.env.NEXT_PUBLIC_DEMO_AGENT_URL ?? "http://localhost:3001";
+
+export default function EmbedDemoPage() {
+  const [copied, setCopied] = useState(false);
+  const cardConnection = useA2AConnection({
+    agentUrl: DEMO_AGENT_URL,
+    autoConnect: true,
+    autoLoadCard: true,
+  });
+  const snippet = useMemo(
+    () => `import { A2AChat } from "@/components/chat/A2AChat";
+
+export function SupportAgentWidget() {
+  return (
+    <A2AChat
+      agentUrl="${DEMO_AGENT_URL}"
+      persistenceMode="memory"
+      context={{
+        initialMetadata: { surface: "support-widget" },
+      }}
+      title="Support Agent"
+    />
+  );
+}`,
+    [],
+  );
+
+  const copySnippet = async () => {
+    await navigator.clipboard.writeText(snippet);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-6 overflow-y-auto p-4 sm:p-6 md:p-8">
+      <div className="flex max-w-3xl flex-col gap-2">
+        <Caption>Phase 1 Demo</Caption>
+        <PageTitle>Embeddable A2A Chat</PageTitle>
+        <P className="text-sm text-muted-foreground">
+          This route uses the new headless hooks and embeddable components directly, without the
+          dashboard chat route owning session orchestration.
+        </P>
+        <Muted className="text-sm">
+          Agent URL: <span className="font-mono">{DEMO_AGENT_URL}</span>
+        </Muted>
+      </div>
+
+      <div className="grid min-h-0 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
+        <A2AChat
+          agentUrl={DEMO_AGENT_URL}
+          initialCard={cardConnection.card ?? undefined}
+          persistenceMode="memory"
+          context={{
+            initialMetadata: {
+              surface: "embed-demo",
+              source: "a2a-ui",
+            },
+            hiddenSystemContext:
+              "You are running inside the embeddable A2A UI demo. Prefer concise answers that help developers inspect behavior quickly.",
+            messageContextEnrichers: [
+              ({ text }) => ({
+                metadata: {
+                  promptLength: String(text.length),
+                },
+              }),
+            ],
+          }}
+          title="Embeddable Widget"
+        />
+
+        <div className="flex min-w-0 flex-col gap-4">
+          <A2AAgentCard
+            card={cardConnection.card}
+            loading={cardConnection.status === "connecting"}
+            error={cardConnection.error}
+            onRefresh={cardConnection.refreshAgentCard}
+          />
+
+          <div className="rounded-md border p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <Caption>Configurator</Caption>
+                <P className="text-sm font-medium">React snippet</P>
+              </div>
+              <Button size="sm" variant="outline" onClick={copySnippet}>
+                {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
+                {copied ? "Copied" : "Copy"}
+              </Button>
+            </div>
+            <Textarea
+              readOnly
+              value={snippet}
+              className="mt-3 min-h-72 resize-y font-mono text-xs"
+              aria-label="Generated A2AChat React snippet"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/dashboard/error.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangleIcon, RefreshCwIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Muted, PageTitle } from "@/components/typography";
+
+interface DashboardErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function DashboardError({ error, reset }: DashboardErrorProps) {
+  useEffect(() => {
+    console.error("Dashboard route failed", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-[calc(100svh-3.5rem)] flex-col items-center justify-center gap-4 p-6 text-center">
+      <div className="bg-muted flex size-12 items-center justify-center rounded-lg border">
+        <AlertTriangleIcon className="text-destructive size-6" />
+      </div>
+      <div className="space-y-2">
+        <PageTitle>Something went wrong</PageTitle>
+        <Muted>
+          The workbench hit an unexpected error. Your saved agents and chats are still stored
+          locally.
+        </Muted>
+      </div>
+      <Button onClick={reset} className="gap-2">
+        <RefreshCwIcon className="size-4" />
+        Try again
+      </Button>
+    </div>
+  );
+}

package/app/dashboard/layout.tsx

@@ -0,0 +1,27 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { DashboardBreadcrumb } from "@/components/dashboard-breadcrumb";
+
+export default function DashboardLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset className="h-dvh overflow-hidden">
+        <header className="bg-background sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
+          <SidebarTrigger className="-ms-1" />
+          <Separator
+            orientation="vertical"
+            className="me-1 data-vertical:h-4 data-vertical:self-auto sm:me-2"
+          />
+          <DashboardBreadcrumb />
+        </header>
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/app/dashboard/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import Link from "next/link";
+import type { LucideIcon } from "lucide-react";
+import { BotIcon, MessageSquareIcon, StarIcon, ListTodoIcon } from "lucide-react";
+import { AddAgent } from "@/components/add-agent";
+import { WorkspaceActions } from "@/components/workspace-actions";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Muted, P, PageTitle } from "@/components/typography";
+import { useAppSelector } from "@/lib/hooks";
+
+type MetricCardProps = {
+  title: string;
+  value: number;
+  description: string;
+  href?: string;
+  icon: LucideIcon;
+};
+
+function MetricCard({ title, value, description, href, icon: Icon }: MetricCardProps) {
+  const content = (
+    <Card size="sm" className="h-full transition-colors hover:bg-muted/40">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardAction>
+          <Icon />
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-semibold tabular-nums">{value}</div>
+        <CardDescription className="mt-2">{description}</CardDescription>
+      </CardContent>
+    </Card>
+  );
+
+  if (!href) return content;
+
+  return (
+    <Link href={href} className="block h-full">
+      {content}
+    </Link>
+  );
+}
+
+export default function DashboardPage() {
+  const agents = useAppSelector((state) => state.agents.agents);
+  const chats = useAppSelector((state) => state.chats.chats);
+  const activeChats = chats.filter((chat) => !chat.archived);
+  const favoriteAgents = agents.filter((agent) => agent.favorite);
+  const taskCount = chats.reduce(
+    (count, chat) => count + chat.items.filter((item) => item.kind === "task-status").length,
+    0,
+  );
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-6 overflow-y-auto p-4 sm:gap-8 sm:p-6 md:p-8">
+      <div className="flex flex-col items-start justify-between gap-4 lg:flex-row lg:items-center">
+        <div>
+          <PageTitle>A2A Workbench</PageTitle>
+          <P className="mt-1 text-sm text-muted-foreground">
+            Connect agents, inspect protocol behavior, and manage saved conversations.
+          </P>
+        </div>
+        <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
+          <WorkspaceActions />
+          <AddAgent variant="default" className="max-sm:flex-1" />
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <MetricCard
+          href="/dashboard/agents"
+          icon={BotIcon}
+          title="Agents"
+          value={agents.length}
+          description="Search, filter, tag, and favorite local agents."
+        />
+        <MetricCard
+          href="/dashboard/conversations"
+          icon={MessageSquareIcon}
+          title="Conversations"
+          value={activeChats.length}
+          description="Rename, archive, delete, and export chats."
+        />
+        <MetricCard
+          href="/dashboard/tasks"
+          icon={ListTodoIcon}
+          title="Tasks"
+          value={taskCount}
+          description="Review task states, artifacts, and correlated warnings."
+        />
+        <MetricCard
+          icon={StarIcon}
+          title="Favorites"
+          value={favoriteAgents.length}
+          description="Pinned agents appear first in the library."
+        />
+      </div>
+
+      {agents.length === 0 ? (
+        <div className="flex min-h-75 flex-col items-center justify-center rounded-md border border-dashed bg-muted/10 p-6 text-center">
+          <Muted>No agents connected yet.</Muted>
+          <P className="mt-2 max-w-xl text-sm text-muted-foreground">
+            Connect an A2A-compatible agent or import a workspace to start testing.
+          </P>
+          <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+            <WorkspaceActions />
+            <AddAgent variant="default" />
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          <Button className="max-sm:flex-1" asChild>
+            <Link href="/dashboard/agents">Open Agent Library</Link>
+          </Button>
+          <Button variant="outline" className="max-sm:flex-1" asChild>
+            <Link href="/dashboard/conversations">Open Conversations</Link>
+          </Button>
+          <Button variant="outline" className="max-sm:flex-1" asChild>
+            <Link href="/dashboard/tasks">Open Tasks</Link>
+          </Button>
+          <Button variant="outline" className="max-sm:flex-1" asChild>
+            <Link href="/dashboard/embed">Open Embed Demo</Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}