a2a-ui 0.8.3

package/app/dashboard/tasks/page.tsx

@@ -0,0 +1,376 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import type { TaskState } from "@a2a-js/sdk";
+import { ArrowRightIcon, BookmarkPlusIcon, Trash2Icon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TaskTimeline } from "@/components/task-timeline";
+import { PageTitle, Muted, Caption, Small } from "@/components/typography";
+import { getTransportSummary } from "@/lib/a2a/execution-events";
+import { partsToPlainText } from "@/lib/a2a/parts";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks";
+import {
+  buildTaskSummaries,
+  type TaskSummary,
+} from "@/lib/features/chats/taskIndex";
+import type { ArtifactItem, TaskStatusItem } from "@/lib/features/chats/chatsSlice";
+import {
+  removeTaskFilterPreset,
+  saveTaskFilterPreset,
+} from "@/lib/features/workbench/workbenchSlice";
+
+type TaskFilter = "all" | TaskState;
+
+function stateBadgeVariant(state: TaskState): "default" | "secondary" | "outline" | "destructive" {
+  if (state === "completed") return "default";
+  if (state === "failed" || state === "rejected") return "destructive";
+  if (state === "working" || state === "submitted") return "secondary";
+  return "outline";
+}
+
+function taskSearchText(task: TaskSummary) {
+  return [
+    task.taskId,
+    task.contextId,
+    task.chatTitle,
+    task.agentName,
+    task.agentUrl,
+    task.state,
+    task.latestStatusText,
+    ...task.artifactNames,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+}
+
+function taskKey(task: TaskSummary) {
+  return `${task.chatId}:${task.taskId}`;
+}
+
+export default function TasksPage() {
+  const dispatch = useAppDispatch();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const presets = useAppSelector((state) => state.workbench.taskFilterPresets);
+  const [query, setQuery] = useState("");
+  const [stateFilter, setStateFilter] = useState<TaskFilter>("all");
+  const [selectedTaskKey, setSelectedTaskKey] = useState<string | null>(null);
+
+  const tasks = useMemo(() => buildTaskSummaries(chats), [chats]);
+  const filteredTasks = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    return tasks.filter((task) => {
+      if (stateFilter !== "all" && task.state !== stateFilter) return false;
+      if (normalizedQuery && !taskSearchText(task).includes(normalizedQuery)) return false;
+      return true;
+    });
+  }, [query, stateFilter, tasks]);
+  const selectedTask = filteredTasks.find((task) => taskKey(task) === selectedTaskKey) ?? null;
+  const selectedChat = selectedTask
+    ? chats.find((chat) => chat.id === selectedTask.chatId) ?? null
+    : null;
+  const selectedStatusHistory = selectedChat && selectedTask
+    ? selectedChat.items.filter(
+        (item): item is TaskStatusItem =>
+          item.kind === "task-status" && item.taskId === selectedTask.taskId,
+      )
+    : [];
+  const selectedArtifacts = selectedChat && selectedTask
+    ? selectedChat.items.filter(
+        (item): item is ArtifactItem =>
+          item.kind === "artifact" && item.taskId === selectedTask.taskId,
+      )
+    : [];
+  const selectedEvents = selectedChat && selectedTask
+    ? selectedChat.executionEvents.filter((event) => event.taskId === selectedTask.taskId)
+    : [];
+  const selectedWarnings = selectedEvents.filter((event) => event.level !== "info");
+  const selectedTiming = selectedChat ? getTransportSummary(selectedChat.executionEvents) : null;
+
+  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>
+        <PageTitle>Tasks</PageTitle>
+        <Muted>
+          Explore task-centric runs across chats, including state, artifacts, and correlated
+          warnings.
+        </Muted>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-[1fr_220px]">
+        <Input
+          placeholder="Search by task, context, chat, agent, or artifact"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <Select value={stateFilter} onValueChange={(value) => setStateFilter(value as TaskFilter)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All states</SelectItem>
+            <SelectItem value="submitted">Submitted</SelectItem>
+            <SelectItem value="working">Working</SelectItem>
+            <SelectItem value="input-required">Input required</SelectItem>
+            <SelectItem value="completed">Completed</SelectItem>
+            <SelectItem value="canceled">Canceled</SelectItem>
+            <SelectItem value="failed">Failed</SelectItem>
+            <SelectItem value="rejected">Rejected</SelectItem>
+            <SelectItem value="auth-required">Auth required</SelectItem>
+            <SelectItem value="unknown">Unknown</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            dispatch(
+              saveTaskFilterPreset({
+                query,
+                state: stateFilter,
+              }),
+            )
+          }
+        >
+          <BookmarkPlusIcon data-icon="inline-start" />
+          Save current filter
+        </Button>
+        {presets.map((preset) => (
+          <div key={preset.id} className="flex items-center gap-1 rounded-full border bg-muted/30 px-2 py-1">
+            <button
+              onClick={() => {
+                setQuery(preset.query);
+                setStateFilter(preset.state);
+              }}
+              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {preset.label}
+            </button>
+            <button
+              onClick={() => dispatch(removeTaskFilterPreset(preset.id))}
+              className="text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={`Remove ${preset.label}`}
+            >
+              <Trash2Icon className="size-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {filteredTasks.length === 0 ? (
+        <div className="rounded-md border border-dashed p-8 text-center">
+          <Muted>No tasks match the current filters.</Muted>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filteredTasks.map((task) => (
+            <div key={`${task.chatId}:${task.taskId}`} 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="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Small className="truncate">{task.taskId}</Small>
+                    <Badge variant={stateBadgeVariant(task.state)}>{task.state}</Badge>
+                    {task.validationWarningCount > 0 && (
+                      <Badge variant="outline">
+                        {task.validationWarningCount} warning
+                        {task.validationWarningCount === 1 ? "" : "s"}
+                      </Badge>
+                    )}
+                    <Badge variant="outline">
+                      {task.artifactCount} artifact{task.artifactCount === 1 ? "" : "s"}
+                    </Badge>
+                  </div>
+                  <Caption className="mt-1 block truncate">
+                    {task.agentName} · Context {task.contextId}
+                  </Caption>
+                  <Muted className="mt-2 line-clamp-2">
+                    {task.latestStatusText || "No status detail recorded for this task yet."}
+                  </Muted>
+                  <TaskTimeline stages={task.timelineStages} className="mt-3" />
+                  {task.artifactNames.length > 0 && (
+                    <Caption className="mt-3 block break-words">
+                      Artifacts: {task.artifactNames.join(", ")}
+                    </Caption>
+                  )}
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setSelectedTaskKey(taskKey(task))}
+                  >
+                    Details
+                  </Button>
+                  <Link
+                    href={`/dashboard/chat/${task.chatId}`}
+                    className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    Open chat
+                    <ArrowRightIcon className="size-4" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Sheet
+        open={selectedTask != null}
+        onOpenChange={(open) => {
+          if (!open) setSelectedTaskKey(null);
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>Task details</SheetTitle>
+            <SheetDescription>
+              {selectedTask?.taskId ?? "No task selected"}
+            </SheetDescription>
+          </SheetHeader>
+
+          {selectedTask && (
+            <div className="flex flex-col gap-5 px-4 pb-4">
+              <div className="rounded-md border p-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Badge variant={stateBadgeVariant(selectedTask.state)}>{selectedTask.state}</Badge>
+                  <Badge variant="outline">
+                    {selectedArtifacts.length} artifact{selectedArtifacts.length === 1 ? "" : "s"}
+                  </Badge>
+                  <Badge variant="outline">
+                    {selectedWarnings.length} warning{selectedWarnings.length === 1 ? "" : "s"}
+                  </Badge>
+                </div>
+                <Caption className="mt-2 block">
+                  {selectedTask.agentName} · Context {selectedTask.contextId}
+                </Caption>
+                <TaskTimeline stages={selectedTask.timelineStages} className="mt-3" />
+              </div>
+
+              <section className="space-y-2">
+                <Small>State history</Small>
+                {selectedStatusHistory.length === 0 ? (
+                  <Muted>No status history recorded.</Muted>
+                ) : (
+                  <div className="space-y-2">
+                    {selectedStatusHistory.map((item) => (
+                      <div key={`${item.id}:${item.timestamp}`} className="rounded-md bg-muted/30 p-3">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Badge variant={stateBadgeVariant(item.state)}>{item.state}</Badge>
+                          <Caption>{new Date(item.timestamp).toLocaleString()}</Caption>
+                        </div>
+                        {item.statusMessage && (
+                          <Muted className="mt-2 line-clamp-3">
+                            {partsToPlainText(item.statusMessage.parts) || "Empty status message."}
+                          </Muted>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </section>
+
+              <section className="space-y-2">
+                <Small>Artifacts</Small>
+                {selectedArtifacts.length === 0 ? (
+                  <Muted>No artifacts recorded.</Muted>
+                ) : (
+                  <div className="space-y-2">
+                    {selectedArtifacts.map((artifact) => (
+                      <div key={artifact.id} className="rounded-md bg-muted/30 p-3">
+                        <Caption className="block">
+                          {artifact.name || artifact.id}
+                          {artifact.isStreaming ? " · streaming" : ""}
+                        </Caption>
+                        {artifact.description && <Muted className="mt-1">{artifact.description}</Muted>}
+                        <Muted className="mt-2 line-clamp-3">
+                          {partsToPlainText(artifact.parts) || "No preview available."}
+                        </Muted>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </section>
+
+              <section className="space-y-2">
+                <Small>Request timing</Small>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  <div className="rounded-md bg-muted/30 p-3">
+                    <Caption className="block">Requests</Caption>
+                    <Small>{selectedTiming?.total ?? 0}</Small>
+                  </div>
+                  <div className="rounded-md bg-muted/30 p-3">
+                    <Caption className="block">Errors</Caption>
+                    <Small>{selectedTiming?.errors ?? 0}</Small>
+                  </div>
+                  <div className="rounded-md bg-muted/30 p-3">
+                    <Caption className="block">Average</Caption>
+                    <Small>
+                      {selectedTiming?.avgDurationMs != null
+                        ? `${selectedTiming.avgDurationMs} ms`
+                        : "n/a"}
+                    </Small>
+                  </div>
+                </div>
+              </section>
+
+              <section className="space-y-2">
+                <Small>Warnings</Small>
+                {selectedWarnings.length === 0 ? (
+                  <Muted>No warnings or errors recorded for this task.</Muted>
+                ) : (
+                  <div className="space-y-2">
+                    {selectedWarnings.map((event) => (
+                      <div key={event.id} className="rounded-md bg-muted/30 p-3">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Badge variant={event.level === "error" ? "destructive" : "outline"}>
+                            {event.level}
+                          </Badge>
+                          <Caption>{event.kind}</Caption>
+                        </div>
+                        <Muted className="mt-2">{event.summary}</Muted>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </section>
+            </div>
+          )}
+
+          {selectedTask && (
+            <SheetFooter>
+              <Button asChild>
+                <Link href={`/dashboard/chat/${selectedTask.chatId}`}>
+                  Open source chat
+                  <ArrowRightIcon className="size-4" />
+                </Link>
+              </Button>
+            </SheetFooter>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

package/app/globals.css

@@ -0,0 +1,152 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  /* --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono); */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+/* highlight.js dark mode overrides */
+.dark .hljs {
+  background: transparent;
+  color: #adbac7;
+}
+.dark .hljs-comment,
+.dark .hljs-quote { color: #768390; }
+.dark .hljs-keyword,
+.dark .hljs-selector-tag,
+.dark .hljs-addition { color: #f47067; }
+.dark .hljs-string,
+.dark .hljs-attr,
+.dark .hljs-attribute { color: #96d0ff; }
+.dark .hljs-number,
+.dark .hljs-literal,
+.dark .hljs-type { color: #6cb6ff; }
+.dark .hljs-built_in,
+.dark .hljs-builtin-name { color: #e3b341; }
+.dark .hljs-function,
+.dark .hljs-title { color: #dcbdfb; }
+.dark .hljs-variable,
+.dark .hljs-template-variable { color: #f69d50; }

package/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import "highlight.js/styles/github.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import StoreProvider from "./StoreProvider";
+import { ToastProvider } from "@/lib/toast";
+
+export const metadata: Metadata = {
+  title: "A2A UI",
+  description: "",
+  icons: {
+    icon: "/a2a-ui.svg",
+    shortcut: "/a2a-ui.svg",
+    apple: "/a2a-ui.svg",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-dvh overflow-x-hidden antialiased">
+        <StoreProvider>
+          <ThemeProvider defaultTheme="system" enableSystem>
+            <TooltipProvider>
+              <ToastProvider>{children}</ToastProvider>
+            </TooltipProvider>
+          </ThemeProvider>
+        </StoreProvider>
+      </body>
+    </html>
+  );
+}

package/app/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { useAppSelector } from "@/lib/hooks";
+import { AddAgent } from "@/components/add-agent";
+import { H1, H2, Lead, Muted } from "@/components/typography";
+
+export default function HomePage() {
+  const agents = useAppSelector((state) => state.agents.agents);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (agents.length > 0) {
+      router.push("/dashboard");
+    }
+  }, [agents, router]);
+
+  if (agents.length > 0) {
+    return null;
+  }
+
+  return (
+    <main className="relative flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-background p-4 sm:p-6">
+      <div className="absolute inset-0 z-0 bg-linear-to-br from-indigo-500/5 via-background to-cyan-500/5" />
+      
+      <div className="z-10 flex max-h-[calc(100dvh-2rem)] w-full max-w-3xl flex-col items-center overflow-y-auto rounded-3xl border bg-card/50 p-5 text-center shadow-2xl backdrop-blur-xl sm:p-10">
+        <div className="flex justify-center">
+          <div className="rounded-3xl border bg-white p-4 shadow-lg sm:p-6">
+            <Image
+              src="/a2a-ui.svg"
+              alt="A2A UI logo"
+              width={220}
+              height={60}
+              priority
+              className="h-auto w-auto max-w-full object-contain"
+            />
+          </div>
+        </div>
+        
+        <div className="mt-8 flex flex-col gap-6 md:mt-12">
+          <H1>Agent to Agent Network</H1>
+          <Lead>
+            A powerful platform to visualize, discover, and interact with specialized AI agents compliant with the A2A standard.
+          </Lead>
+        </div>
+
+        <div className="mt-8 flex w-full max-w-lg flex-col items-center gap-6 rounded-2xl border bg-black/5 p-5 shadow-inner dark:bg-white/5 sm:p-8 md:mt-12">
+          <div className="flex flex-col gap-2 text-center">
+             <H2>Connect an Agent</H2>
+             <Muted>
+               Provide the URL of an A2A-compliant agent server. We will auto-discover its capabilities using its agent card.
+             </Muted>
+          </div>
+          <div className="w-full flex justify-center pb-2">
+            <AddAgent />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}