@alexanderolsen/create-deepagent 0.1.0

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

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

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+
+export type ToolCallStatus = "running" | "complete" | "error";
+
+export type ToolCallView = {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  output?: string;
+  status: ToolCallStatus;
+};
+
+function stringifyArgs(args: Record<string, unknown>) {
+  try {
+    return JSON.stringify(args, null, 2);
+  } catch {
+    return String(args);
+  }
+}
+
+function statusLabel(status: ToolCallStatus) {
+  if (status === "running") return "Running";
+  if (status === "error") return "Error";
+  return "Done";
+}
+
+function ToolIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.6"
+      viewBox="0 0 24 24"
+    >
+      <path d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 1 5.4-5.4l-2.7 2.7-1.4-1.4 2.7-2.7a4 4 0 0 0-1.6.4z" />
+    </svg>
+  );
+}
+
+/**
+ * A subtle, collapsible representation of a single tool call: an icon, the
+ * tool name, and its status. Expanding reveals the stringified input (args)
+ * and output (the tool result).
+ */
+export function ToolCall({ call }: { call: ToolCallView }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={`toolcall status-${call.status}`}>
+      <button
+        aria-expanded={open}
+        className="toolcall-head"
+        onClick={() => setOpen((value) => !value)}
+        type="button"
+      >
+        <span className="toolcall-icon">
+          <ToolIcon />
+        </span>
+        <span className="toolcall-name">{call.name}</span>
+        <span className={`subagent-status status-${call.status}`}>
+          {statusLabel(call.status)}
+        </span>
+        <span aria-hidden className="toolcall-chevron">
+          {open ? "▾" : "▸"}
+        </span>
+      </button>
+
+      {open ? (
+        <div className="toolcall-body">
+          <div className="toolcall-section">
+            <span>Input</span>
+            <pre>{stringifyArgs(call.args)}</pre>
+          </div>
+          {call.output != null && call.output !== "" ? (
+            <div className="toolcall-section">
+              <span>Output</span>
+              <pre>{call.output}</pre>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/registry/frameworks/hono/src/lib/agent/types.ts

@@ -0,0 +1,4 @@
+import type { ReactAgent } from "langchain";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Agent = ReactAgent<any>;

package/registry/frameworks/hono/src/lib/chat/threads-client.ts

@@ -0,0 +1,57 @@
+/**
+ * Browser-side thread helpers.
+ *
+ * The server (the agent's in-memory checkpointer) is the single source of truth
+ * for threads. There is no client-side cache: the sidebar is always fetched
+ * from the API, and restarting the server clears every thread.
+ */
+
+import { Client } from "@langchain/langgraph-sdk/client";
+
+/** LangGraph SDK base URL. Route handlers live under `/api/threads/...`. */
+export function getApiUrl(): string {
+  return `${window.location.origin}/api`;
+}
+
+/** Summary of a thread for the history sidebar (mirrors the server type). */
+export type ThreadSummary = {
+  id: string;
+  title: string;
+  updatedAt: string | null;
+};
+
+/** Fetch every thread from the server, newest first. */
+export async function fetchThreads(): Promise<ThreadSummary[]> {
+  const response = await fetch(`${getApiUrl()}/threads`, { cache: "no-store" });
+  if (!response.ok) return [];
+  return (await response.json()) as ThreadSummary[];
+}
+
+/**
+ * Create the thread row server-side so hydration does not 404.
+ *
+ * Calls `GET /threads/:id/state` and, on 404, bootstraps with
+ * `POST /threads/:id/state` and empty `messages`.
+ */
+async function ensureThreadExists(threadId: string) {
+  const client = new Client({ apiUrl: getApiUrl() });
+  try {
+    await client.threads.getState(threadId);
+  } catch (error) {
+    const status = (error as { status?: number })?.status;
+    if (status !== 404) throw error;
+    await client.threads.updateState(threadId, { values: { messages: [] } });
+  }
+}
+
+/** Mint a new thread and bootstrap its checkpoint on the server. */
+export async function createThread(): Promise<string> {
+  const id = crypto.randomUUID();
+  await ensureThreadExists(id);
+  return id;
+}
+
+/** Delete a thread (session + checkpointed state) on the server. */
+export async function deleteThread(threadId: string): Promise<void> {
+  await fetch(`${getApiUrl()}/threads/${threadId}`, { method: "DELETE" });
+}

package/registry/frameworks/hono/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { ChatApp } from "@/components/ChatApp";
+import "@/styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ChatApp />
+  </StrictMode>,
+);