@alexanderolsen/create-deepagent 0.1.0

package/registry/frameworks/deno/client/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/deno/client/src/lib/agent-type.ts

@@ -0,0 +1,4 @@
+import type { CompiledGraphType } from "@langchain/langgraph";
+
+/** Type shim for `useStreamContext` — mirrors the server deep agent graph. */
+export type Agent = CompiledGraphType;

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

@@ -0,0 +1,51 @@
+/**
+ * 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[];
+}
+
+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/deno/client/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>,
+);