@alexanderolsen/create-deepagent 0.1.0

package/registry/frameworks/hono/src/components/Chat.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { HumanMessage } from "@langchain/core/messages";
+import { useStreamContext } from "@langchain/react";
+
+import type { Agent } from "@/lib/agent/types";
+import { Conversation } from "./Conversation";
+import { SubagentDetail } from "./Subagents";
+
+const EXAMPLE_PROMPT =
+  "Research LangGraph streaming, and separately calculate 42 * 17.";
+
+export function Chat({
+  onRunSettled,
+}: {
+  threadId: string;
+  /** Called when a run settles, so the sidebar can refresh titles/order. */
+  onRunSettled: () => void;
+}) {
+  const stream = useStreamContext<Agent>();
+  const [content, setContent] = useState(EXAMPLE_PROMPT);
+  const [openSubagentId, setOpenSubagentId] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Refresh the sidebar whenever a run finishes (titles derive from the first
+  // message; order from the latest checkpoint, both owned by the server).
+  useEffect(() => {
+    if (!stream.isLoading) onRunSettled();
+  }, [stream.isLoading, onRunSettled]);
+
+  function autoGrow() {
+    const node = textareaRef.current;
+    if (!node) return;
+    node.style.height = "auto";
+    node.style.height = `${Math.min(node.scrollHeight, 200)}px`;
+  }
+
+  const subagents = [...stream.subagents.values()];
+  const openSubagent = openSubagentId
+    ? subagents.find((snapshot) => snapshot.id === openSubagentId)
+    : undefined;
+
+  function handleSubmit() {
+    const nextContent = content.trim();
+    if (nextContent.length === 0 || stream.isLoading) return;
+
+    setContent("");
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    void stream.submit({
+      messages: [new HumanMessage(nextContent)],
+    });
+  }
+
+  // Subagent detail view: breadcrumb + that subagent's chat (no composer).
+  if (openSubagent) {
+    return (
+      <main className="chat-main">
+        <nav aria-label="Breadcrumb" className="breadcrumb">
+          <button
+            className="crumb-link"
+            onClick={() => setOpenSubagentId(null)}
+            type="button"
+          >
+            Main chat
+          </button>
+          <span className="crumb-sep">/</span>
+          <span className="crumb-current">{openSubagent.name}</span>
+        </nav>
+        <div className="conversation">
+          <div className="conversation-inner">
+            <SubagentDetail snapshot={openSubagent} />
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  // Main view: messages + subagent chips, with the composer pinned at the bottom.
+  return (
+    <main className="chat-main">
+      <div className="conversation">
+        <div className="conversation-inner">
+          <Conversation onOpenSubagent={setOpenSubagentId} />
+        </div>
+      </div>
+
+      <div className="composer-bar">
+        <form
+          className="composer"
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <textarea
+            aria-label="Message"
+            onChange={(event) => {
+              setContent(event.target.value);
+              autoGrow();
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                handleSubmit();
+              }
+            }}
+            placeholder="Ask for research, a calculation, or both..."
+            ref={textareaRef}
+            rows={1}
+            value={content}
+          />
+          <button
+            disabled={content.trim() === "" || stream.isLoading}
+            type="submit"
+          >
+            Send
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}

package/registry/frameworks/hono/src/components/ChatApp.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { HttpAgentServerAdapter, StreamProvider } from "@langchain/react";
+
+import {
+  type ThreadSummary,
+  createThread,
+  deleteThread,
+  fetchThreads,
+  getApiUrl,
+} from "@/lib/chat/threads-client";
+import { Chat } from "./Chat";
+import { ThreadHistory } from "./ThreadHistory";
+import { MoonIcon, SunIcon } from "./ThemeIcons";
+
+export function ChatApp() {
+  const [mounted, setMounted] = useState(false);
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  const [threads, setThreads] = useState<ThreadSummary[]>([]);
+  const [threadId, setThreadId] = useState<string>("");
+  // Guards the one-time init against React Strict Mode's double-invoke in dev,
+  // which would otherwise create two threads when none exist yet.
+  const initStarted = useRef(false);
+
+  const refreshThreads = useCallback(async () => {
+    setThreads(await fetchThreads());
+  }, []);
+
+  // On mount, load threads from the server (single source of truth). If none
+  // exist yet, create one. All setState happens in an async callback, so the
+  // effect body never calls setState synchronously.
+  useEffect(() => {
+    if (initStarted.current) return;
+    initStarted.current = true;
+    void (async () => {
+      const list = await fetchThreads();
+      if (list.length > 0) {
+        setThreads(list);
+        setThreadId(list[0].id);
+      } else {
+        const id = await createThread();
+        setThreads(await fetchThreads());
+        setThreadId(id);
+      }
+      setMounted(true);
+    })();
+  }, []);
+
+  const transport = useMemo(() => {
+    if (!threadId) return null;
+    return new HttpAgentServerAdapter({
+      apiUrl: getApiUrl(),
+      threadId,
+      paths: {
+        commands: `/threads/${threadId}/commands`,
+        stream: `/threads/${threadId}/stream`,
+      },
+    });
+  }, [threadId]);
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (id !== threadId) setThreadId(id);
+    },
+    [threadId],
+  );
+
+  const handleCreate = useCallback(async () => {
+    const id = await createThread();
+    await refreshThreads();
+    setThreadId(id);
+  }, [refreshThreads]);
+
+  const handleDelete = useCallback(
+    async (id: string) => {
+      await deleteThread(id);
+      const list = await fetchThreads();
+      setThreads(list);
+      if (id !== threadId) return;
+      if (list.length > 0) {
+        setThreadId(list[0].id);
+      } else {
+        const freshId = await createThread();
+        setThreads(await fetchThreads());
+        setThreadId(freshId);
+      }
+    },
+    [threadId],
+  );
+
+  const shellClassName = `app-shell ${theme === "light" ? "light" : ""}`;
+
+  if (!mounted || !threadId || !transport) {
+    return (
+      <div className={shellClassName}>
+        <div className="empty-state center">Preparing chat…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={shellClassName}>
+      <button
+        aria-label={
+          theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+        }
+        className="theme-toggle"
+        onClick={() => setTheme((cur) => (cur === "dark" ? "light" : "dark"))}
+        type="button"
+      >
+        {theme === "dark" ? <SunIcon /> : <MoonIcon />}
+      </button>
+
+      <ThreadHistory
+        activeThreadId={threadId}
+        onCreate={handleCreate}
+        onDelete={handleDelete}
+        onSelect={handleSelect}
+        threads={threads}
+      />
+
+      <StreamProvider key={threadId} threadId={threadId} transport={transport}>
+        <Chat onRunSettled={refreshThreads} threadId={threadId} />
+      </StreamProvider>
+    </div>
+  );
+}

package/registry/frameworks/hono/src/components/Conversation.tsx

@@ -0,0 +1,90 @@
+"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/types";
+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 dev server is running and
+          <code>OPENAI_API_KEY</code> is set, then try again.
+        </div>
+      ) : null}
+    </>
+  );
+}

package/registry/frameworks/hono/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/hono/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/hono/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/hono/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>
+  );
+}