@alexanderolsen/create-deepagent 0.1.0

package/registry/frameworks/deno/client/src/components/Conversation.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useMemo } from "react";
+
+import type { SubagentDiscoverySnapshot } from "@langchain/langgraph-sdk/stream";
+import { useStreamContext } from "@langchain/react";
+
+import type { Agent } from "@/lib/agent-type";
+import { MessageThread } from "./MessageThread";
+import {
+  shouldShowTypingIndicator,
+  StreamingIndicator,
+} from "./StreamingIndicator";
+import { SubagentList, type SubagentCard } from "./Subagents";
+
+/**
+ * The root conversation, rendered in message order.
+ *
+ * Subagent `task` delegations are rendered as cards (not raw tool rows) at the
+ * position they occur, and all other tool calls are folded into collapsible
+ * tool-call chips by {@link MessageThread}.
+ */
+export function Conversation({
+  onOpenSubagent,
+}: {
+  onOpenSubagent: (id: string) => void;
+}) {
+  const stream = useStreamContext<Agent>();
+
+  const messages = useMemo(
+    () => stream.messages.filter((message) => message != null),
+    [stream.messages],
+  );
+
+  const subagentsById = useMemo(() => {
+    const map = new Map<string, SubagentDiscoverySnapshot>();
+    for (const snapshot of stream.subagents.values()) {
+      map.set(snapshot.id, snapshot);
+    }
+    return map;
+  }, [stream.subagents]);
+
+  const showTypingIndicator = shouldShowTypingIndicator(
+    messages,
+    stream.isLoading,
+  );
+
+  return (
+    <>
+      {messages.length === 0 && !stream.error ? (
+        <div className="empty-state">
+          Ask a question below. The coordinator will delegate to its subagents
+          and stream tokens, tool calls, and results.
+        </div>
+      ) : null}
+
+      <MessageThread
+        isLoading={stream.isLoading}
+        messages={messages}
+        taskRenderer={(tasks) => {
+          const cards: SubagentCard[] = tasks.map((call, index) => {
+            const snapshot = call.id ? subagentsById.get(call.id) : undefined;
+            const args = (call.args ?? {}) as Record<string, unknown>;
+            return {
+              id: call.id ?? `task-${index}`,
+              name: snapshot?.name ?? String(args.subagent_type ?? "subagent"),
+              task:
+                snapshot?.taskInput ??
+                (typeof args.description === "string"
+                  ? args.description
+                  : undefined),
+              status: snapshot?.status ?? "running",
+              openable: snapshot != null,
+            };
+          });
+          return <SubagentList cards={cards} onOpen={onOpenSubagent} />;
+        }}
+      />
+
+      {showTypingIndicator ? <StreamingIndicator /> : null}
+
+      {messages.length === 0 && !stream.isLoading && stream.error ? (
+        <div className="error">
+          Could not reach the agent API. Make sure the Deno server is running
+          and
+          <code>OPENAI_API_KEY</code> is set, then try again.
+        </div>
+      ) : null}
+    </>
+  );
+}

package/registry/frameworks/deno/client/src/components/MessageBubbles.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+
+type ToolCallLike = {
+  name: string;
+  args?: Record<string, unknown>;
+  id?: string;
+};
+
+function messageLabel(message: { type: string; name?: string }) {
+  if (message.type === "human") return "You";
+  if (message.type === "tool") return `Tool · ${message.name ?? "result"}`;
+  if (message.type === "ai") return "Assistant";
+  return message.type;
+}
+
+function formatToolArgs(args: Record<string, unknown>) {
+  const entries = Object.entries(args);
+  if (entries.length === 0) return "";
+  if (entries.length === 1) return String(entries[0]?.[1] ?? "");
+  return JSON.stringify(args);
+}
+
+/**
+ * Extract reasoning-summary text from a message.
+ *
+ * Reasoning models surface their summaries as `{ type: "reasoning" }` standard
+ * content blocks (see `@langchain/openai`'s Responses API converter). Only AI
+ * messages carry reasoning; everything else returns an empty string.
+ */
+export function getReasoningText(message: BaseMessage): string {
+  if (!AIMessage.isInstance(message)) return "";
+  try {
+    return message.contentBlocks
+      .filter(
+        (block): block is { type: "reasoning"; reasoning: string } =>
+          (block as { type?: string })?.type === "reasoning",
+      )
+      .map((block) => block.reasoning)
+      .join("")
+      .trim();
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Renders a single message as a chat bubble with its tool-call rows.
+ *
+ * `toolCalls` can be passed to override which tool calls are shown (e.g. to
+ * hide the `task` calls that are rendered as subagent cards instead).
+ */
+export function MessageBubble({
+  message,
+  toolCalls,
+}: {
+  message: BaseMessage;
+  toolCalls?: ToolCallLike[];
+}) {
+  const calls =
+    toolCalls ??
+    (AIMessage.isInstance(message) ? (message.tool_calls ?? []) : []);
+
+  return (
+    <div
+      className={`message ${message.type === "human" ? "user" : ""} ${
+        message.type === "tool" ? "tool" : ""
+      }`}
+    >
+      <span>{messageLabel(message)}</span>
+      {calls.length > 0 ? (
+        <ul className="tool-call-list">
+          {calls.map((toolCall, toolIndex) => {
+            const args = formatToolArgs(toolCall.args ?? {});
+            return (
+              <li key={toolCall.id ?? toolIndex}>
+                <strong>{toolCall.name}</strong>
+                {args ? `(${args})` : ""}
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+      {message.text ? <p>{message.text}</p> : null}
+    </div>
+  );
+}

package/registry/frameworks/deno/client/src/components/MessageReasoning.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { TypingDots } from "./StreamingIndicator";
+
+function BrainIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.6"
+      viewBox="0 0 24 24"
+    >
+      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+      <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+      <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+      <path d="M6 18a4 4 0 0 1-1.967-.516" />
+      <path d="M19.967 17.484A4 4 0 0 1 18 18" />
+    </svg>
+  );
+}
+
+/**
+ * Minimalistic reasoning block: a `Thinking` toggle with a brain icon and a
+ * caret, rendered inline in the conversation (not inside a message bubble).
+ *
+ * While reasoning tokens stream (`active`), the block auto-expands so you can
+ * watch the model think; once the turn finishes it auto-collapses. The caret
+ * stays clickable so a finished block can be re-opened.
+ */
+export function MessageReasoning({
+  reasoning,
+  active,
+}: {
+  reasoning: string;
+  active: boolean;
+}) {
+  const [open, setOpen] = useState(active);
+
+  // Follow the streaming state: expand on start, collapse on finish. The effect
+  // only runs when `active` flips, so a manual toggle in between is preserved.
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setOpen(active);
+  }, [active]);
+
+  return (
+    <div className={`reasoning ${open ? "open" : ""}`}>
+      <button
+        aria-expanded={open}
+        className="reasoning-toggle"
+        onClick={() => setOpen((value) => !value)}
+        type="button"
+      >
+        <span aria-hidden className="reasoning-caret">
+          ▸
+        </span>
+        <span aria-hidden className="reasoning-icon">
+          <BrainIcon />
+        </span>
+        <span className="reasoning-label">Thinking</span>
+        {active ? <TypingDots className="inline-dots reasoning-dots" /> : null}
+      </button>
+      {open ? <p className="reasoning-text">{reasoning}</p> : null}
+    </div>
+  );
+}

package/registry/frameworks/deno/client/src/components/MessageThread.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { Fragment, type ReactNode, useMemo } from "react";
+
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+
+import { getReasoningText, MessageBubble } from "./MessageBubbles";
+import { MessageReasoning } from "./MessageReasoning";
+import { ToolCall, type ToolCallView } from "./ToolCall";
+
+type ToolCallLike = {
+  name: string;
+  args?: Record<string, unknown>;
+  id?: string;
+};
+
+/** Deep agents delegate to subagents through the built-in `task` tool. */
+const TASK_TOOL = "task";
+
+/**
+ * Renders a list of messages as a chat thread.
+ *
+ * Tool calls are not shown as raw rows. Each tool call is folded together with
+ * its result message (matched by `tool_call_id`) into a single collapsible
+ * {@link ToolCall} chip, and the standalone tool result messages are hidden.
+ *
+ * `taskRenderer`, when provided, receives the `task` tool calls of an assistant
+ * message and returns a node to render in their place (e.g. subagent cards);
+ * those calls are then excluded from the chip rendering.
+ */
+export function MessageThread({
+  messages,
+  isLoading,
+  taskRenderer,
+}: {
+  messages: BaseMessage[];
+  isLoading: boolean;
+  taskRenderer?: (
+    tasks: ToolCallLike[],
+    message: AIMessage,
+    index: number,
+  ) => ReactNode | null;
+}) {
+  const resultsByCallId = useMemo(() => {
+    const map = new Map<string, BaseMessage>();
+    for (const message of messages) {
+      if (message.type !== "tool") continue;
+      const id = (message as { tool_call_id?: unknown }).tool_call_id;
+      if (typeof id === "string") map.set(id, message);
+    }
+    return map;
+  }, [messages]);
+
+  const items: { key: string; node: ReactNode }[] = [];
+
+  messages.forEach((message, index) => {
+    // Tool results are folded into their tool-call chip.
+    if (message.type === "tool") return;
+
+    if (AIMessage.isInstance(message)) {
+      // Reasoning renders standalone (not inside the assistant bubble), before
+      // the answer. Reasoning summaries stream first, then the model produces
+      // either text or tool calls — so reasoning is only "active" (streaming)
+      // while the run is loading, this is the last message, and it has not yet
+      // produced any text or tool calls.
+      const reasoning = getReasoningText(message);
+      if (reasoning) {
+        const hasToolCalls = (message.tool_calls?.length ?? 0) > 0;
+        const reasoningActive =
+          isLoading &&
+          index === messages.length - 1 &&
+          !message.text?.trim() &&
+          !hasToolCalls;
+        items.push({
+          key: `reason-${message.id ?? index}`,
+          node: (
+            <MessageReasoning active={reasoningActive} reasoning={reasoning} />
+          ),
+        });
+      }
+
+      if (message.text?.trim()) {
+        items.push({
+          key: message.id ?? `m-${index}`,
+          node: <MessageBubble message={message} toolCalls={[]} />,
+        });
+      }
+
+      const calls = (message.tool_calls ?? []) as ToolCallLike[];
+      const tasks = calls.filter((call) => call.name === TASK_TOOL);
+      const chipCalls = taskRenderer
+        ? calls.filter((call) => call.name !== TASK_TOOL)
+        : calls;
+
+      if (taskRenderer && tasks.length > 0) {
+        const node = taskRenderer(tasks, message, index);
+        if (node) items.push({ key: `task-${message.id ?? index}`, node });
+      }
+
+      chipCalls.forEach((call, callIndex) => {
+        const result = call.id ? resultsByCallId.get(call.id) : undefined;
+        const errored =
+          (result as { status?: string } | undefined)?.status === "error";
+        const view: ToolCallView = {
+          id: call.id ?? `${index}-${callIndex}`,
+          name: call.name,
+          args: call.args ?? {},
+          output: result?.text,
+          status: result
+            ? errored
+              ? "error"
+              : "complete"
+            : isLoading
+              ? "running"
+              : "complete",
+        };
+        items.push({ key: `tc-${view.id}`, node: <ToolCall call={view} /> });
+      });
+      return;
+    }
+
+    items.push({
+      key: message.id ?? `m-${index}`,
+      node: <MessageBubble message={message} />,
+    });
+  });
+
+  return (
+    <>
+      {items.map((item) => (
+        <Fragment key={item.key}>{item.node}</Fragment>
+      ))}
+    </>
+  );
+}

package/registry/frameworks/deno/client/src/components/StreamingIndicator.tsx

@@ -0,0 +1,36 @@
+import type { BaseMessage } from "@langchain/core/messages";
+
+export function shouldShowTypingIndicator(
+  messages: BaseMessage[],
+  isLoading: boolean,
+) {
+  if (!isLoading) return false;
+
+  const last = messages.at(-1);
+  if (!last) return true;
+  if (last.type === "human" || last.type === "tool") return true;
+  if (last.type === "ai" && !last.text?.trim()) return true;
+  return false;
+}
+
+export function TypingDots({ className }: { className?: string }) {
+  return (
+    <span aria-hidden className={className ?? "typing-dots"}>
+      <span />
+      <span />
+      <span />
+    </span>
+  );
+}
+
+export function StreamingIndicator() {
+  return (
+    <div
+      aria-label="Loading response"
+      className="streaming-indicator"
+      role="status"
+    >
+      <TypingDots />
+    </div>
+  );
+}

package/registry/frameworks/deno/client/src/components/Subagents.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useMemo } from "react";
+
+import type { BaseMessage } from "@langchain/core/messages";
+import type { SubagentDiscoverySnapshot } from "@langchain/langgraph-sdk/stream";
+import { useMessages, useStreamContext } from "@langchain/react";
+
+import type { Agent } from "@/lib/agent-type";
+import { MessageThread } from "./MessageThread";
+import { StreamingIndicator } from "./StreamingIndicator";
+
+export type SubagentStatus = SubagentDiscoverySnapshot["status"];
+
+/** Lightweight model for a subagent card, derived from a `task` tool call. */
+export type SubagentCard = {
+  /** The `task` tool-call id — also the subagent discovery key. */
+  id: string;
+  name: string;
+  task?: string;
+  status: SubagentStatus;
+  /** Whether a discovery snapshot exists yet (i.e. the card can be opened). */
+  openable: boolean;
+};
+
+function statusLabel(status: SubagentStatus) {
+  if (status === "running") return "Running";
+  if (status === "complete") return "Complete";
+  return "Error";
+}
+
+/** The task prompt is shown separately; skip the matching human message. */
+function omitTaskHumanMessage(
+  messages: BaseMessage[],
+  taskInput?: string,
+): BaseMessage[] {
+  const task = taskInput?.trim();
+  if (!task) return messages;
+  return messages.filter(
+    (message) => message.type !== "human" || message.text?.trim() !== task,
+  );
+}
+
+/**
+ * Compact, clickable subagent cards showing only the name and task prompt.
+ * Rendered inline where the coordinator spawned the subagents. Selecting one
+ * drills into its dedicated chat view.
+ */
+export function SubagentList({
+  cards,
+  onOpen,
+}: {
+  cards: SubagentCard[];
+  onOpen: (id: string) => void;
+}) {
+  if (cards.length === 0) return null;
+
+  return (
+    <div aria-label="Subagents" className="subagent-list">
+      {cards.map((card) => (
+        <button
+          className="subagent-chip"
+          disabled={!card.openable}
+          key={card.id}
+          onClick={() => card.openable && onOpen(card.id)}
+          type="button"
+        >
+          <span className="subagent-chip-head">
+            <span className="subagent-chip-name">{card.name}</span>
+            <span className={`subagent-status status-${card.status}`}>
+              {statusLabel(card.status)}
+            </span>
+          </span>
+          {card.task ? (
+            <span className="subagent-chip-task">{card.task}</span>
+          ) : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The chat interface for a single subagent.
+ *
+ * `useMessages` is scoped to the subagent's namespace, so its tokens, tool
+ * calls, and results stream independently from the root conversation.
+ */
+export function SubagentDetail({
+  snapshot,
+}: {
+  snapshot: SubagentDiscoverySnapshot;
+}) {
+  const stream = useStreamContext<Agent>();
+  const messages = useMessages(stream, snapshot);
+  const visibleMessages = useMemo(
+    () => omitTaskHumanMessage(messages, snapshot.taskInput),
+    [messages, snapshot.taskInput],
+  );
+
+  return (
+    <>
+      {snapshot.taskInput ? (
+        <div className="subagent-prompt">
+          <span>Task</span>
+          <p>{snapshot.taskInput}</p>
+        </div>
+      ) : null}
+
+      <MessageThread
+        isLoading={snapshot.status === "running"}
+        messages={visibleMessages}
+      />
+
+      {snapshot.status === "running" && visibleMessages.length === 0 ? (
+        <StreamingIndicator />
+      ) : null}
+    </>
+  );
+}

package/registry/frameworks/deno/client/src/components/ThemeIcons.tsx

@@ -0,0 +1,31 @@
+export function SunIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}

package/registry/frameworks/deno/client/src/components/ThreadHistory.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { ThreadSummary } from "@/lib/chat/threads-client";
+
+function formatTime(updatedAt: string | null) {
+  if (!updatedAt) return "";
+  const date = new Date(updatedAt);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function ThreadHistory({
+  threads,
+  activeThreadId,
+  onSelect,
+  onCreate,
+  onDelete,
+}: {
+  threads: ThreadSummary[];
+  activeThreadId: string;
+  onSelect: (threadId: string) => void;
+  onCreate: () => void;
+  onDelete: (threadId: string) => void;
+}) {
+  return (
+    <aside aria-label="Thread history" className="sidebar">
+      <div className="sidebar-head">
+        <span className="eyebrow">History</span>
+        <button className="new-thread" onClick={onCreate} type="button">
+          + New
+        </button>
+      </div>
+
+      <ul className="thread-list">
+        {threads.length === 0 ? (
+          <li className="thread-empty">No conversations yet.</li>
+        ) : null}
+        {threads.map((thread) => (
+          <li
+            className={`thread-item ${
+              thread.id === activeThreadId ? "active" : ""
+            }`}
+            key={thread.id}
+          >
+            <button
+              className="thread-open"
+              onClick={() => onSelect(thread.id)}
+              type="button"
+            >
+              <span className="thread-title">{thread.title}</span>
+              <span className="thread-time">
+                {formatTime(thread.updatedAt)}
+              </span>
+            </button>
+            <button
+              aria-label="Delete conversation"
+              className="thread-delete"
+              onClick={() => onDelete(thread.id)}
+              type="button"
+            >
+              ×
+            </button>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  );
+}