dopus 0.2.8 → 0.2.9

package/README.md

@@ -224,13 +224,68 @@ Anthropic gets an explicit cache breakpoint after layer 3. OpenAI and Gemini cac
 - `<AgentChat />`: the panel;
 - `<AgentWidget />`: a floating launcher that opens the panel.
 
-Both accept `api`, `suggestions`, `labels` (every UI string, for translation), `className`, and `channel` /
-`maxJobFollowUps` for [background jobs](#background-jobs).
+Both accept `api`, `suggestions`, `labels` (every UI string, for translation), `className`, `channel` /
+`maxJobFollowUps` for [background jobs](#background-jobs), and `history` to [keep the chat](#chat-history).
 
 The UI shows each tool call as it runs. When a reply finishes while the widget is closed (for example the agent
 continuing after a [background job](#background-jobs)), the launcher shows a dot until it is opened (`labels.unread`
 for screen readers; `onReply` if you want your own signal). It renders an approve/decline card for confirmed tools and continues automatically once the user answers. When a tool has run, it calls `router.refresh()` so server components show the changed data. Closing the widget keeps the conversation, and a "New chat" button clears it. Assistant replies render as Markdown (tables, lists, code) through `react-markdown` with `remark-gfm`, which `init` installs. Raw HTML is never rendered, images show only their alt text, and links keep only http(s), mailto and relative URLs. If a request is over the size limit (413), the UI says so and offers a new chat instead of a useless retry. It also has stop and retry buttons, and it does not send on Enter while an IME (Korean, Japanese, Chinese) is still composing.
 
+### Chat history
+
+By default the conversation lives in memory: a reload starts a new chat. To keep it, pass `history` with `load`
+(called once on mount) and `save` (called when the chat settles, and with `[]` on "New chat"). Where it goes is up to
+you. Both hold functions, so set them up in a client component.
+
+In this tab only (sessionStorage), keyed by user so that after a sign-out the next user in the tab does not see it:
+
+```tsx
+// components/agent/agent.tsx
+'use client'
+import { useMemo } from 'react'
+import { type AgentChatHistory, type AgentChatProps, AgentWidget } from './agent-chat'
+
+const sessionHistory = (key: string): AgentChatHistory => ({
+  load: () => JSON.parse(sessionStorage.getItem(key) ?? '[]'),
+  save: (messages) => sessionStorage.setItem(key, JSON.stringify(messages)),
+})
+
+export function Agent({ userId, ...props }: AgentChatProps & { userId: string }) {
+  const history = useMemo(() => sessionHistory(`dopus-chat:${userId}`), [userId])
+  return <AgentWidget {...props} history={history} />
+}
+```
+
+In your database: save on the server, where you know the user, and load from the client.
+
+```ts
+// agent.config.ts
+onFinish: async ({ user, messages }) => {
+  if (user) await db.chat.upsert({ userId: user.id, messages })   // needs `identify`
+},
+```
+
+```tsx
+// components/agent/agent.tsx: loadChat is your server action returning the saved messages
+;<AgentWidget
+  history={{
+    load: () => loadChat(),
+    save: (m) => {
+      if (m.length === 0) clearChat()
+    },
+  }}
+/>
+```
+
+Things to know:
+
+- **Tool results are stored too.** Whatever your tools returned (orders, names) is in the saved conversation. Keep it
+  per user, and clear it on sign-out if the device may be shared.
+- **It is still one conversation.** The browser sends the whole history with each message, so a long chat reaches the
+  size limit (413) and the UI offers a new chat. There is no list of past chats.
+- **Background jobs across a reload.** A job that finishes while the page is reloading is not announced again, so its
+  "working in the background" line stays. The user can ask, and the agent reads the result with your status tool.
+
 Styling is one plain CSS file (`agent-chat.css`) whose classes all start with `dopus-`, themed through `--dopus-*` variables, with dark mode included. It is deliberately not a CSS Module: create-next-app's Tailwind setup routes every `*.css` file, modules included, through its own Turbopack loader, which left module classes unstyled. It needs no Tailwind and no component library. The file is yours, so restyle it or swap in your own components.
 
 ## Configuration
@@ -285,6 +340,7 @@ defineAgent({
   },
 
   // Once per request, when the reply is done: tokens summed over all steps.
+  // also gets `messages`: the whole conversation after this reply (see "Chat history")
   onFinish: async ({ user, model, usage, steps, finishReason, durationMs }) => {
     await db.usage.insert({ userId: user?.id, model: model.modelId, ...usage })
   },
@@ -521,6 +577,7 @@ Planned next, within the lightweight scope above:
 pnpm install
 pnpm build && pnpm lint && pnpm typecheck && pnpm test
 pnpm example:build && pnpm example:e2e   # next start + scripted model
+pnpm example:ui                          # the chat UI in Chromium (Playwright): approvals, jobs, limits
 pnpm example:live                        # real model from examples/next-app/.env.local (costs cents)
 pnpm smoke                               # packed tarball → fresh app → init (older release) → update → next build
 pnpm templates:history                   # after changing a template: record its hash for `dopus update`

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { n as PROVIDERS, t as VERSION } from "./version-Bs8LB7Ph.js";
+import { n as PROVIDERS, t as VERSION } from "./version-NYbd20Zw.js";
 import { execFileSync, spawn } from "node:child_process";
 import { parseArgs } from "node:util";
 import * as p from "@clack/prompts";

package/dist/index.d.ts

@@ -111,7 +111,10 @@ interface AgentConfig<TOOLS extends DopusToolSet = DopusToolSet> {
   }) => Response | undefined | Promise<Response | undefined>;
   /** Called once per tool call: ran (`success` / `error`) or declined by the user (`denied`). For audit logs. */
   onToolCall?: (event: ToolCallEvent) => void | Promise<void>;
-  /** Called once per request when the reply is finished: tokens, steps, model. For usage tracking. */
+  /**
+   * Called once per request when the reply is finished: tokens, steps, model (usage tracking), and the whole
+   * conversation including the reply (to save chat history in your database).
+   */
   onFinish?: (event: FinishEvent) => void | Promise<void>;
   /** Maximum model steps (tool round trips) per request. Default 10. */
   maxSteps?: number;
@@ -169,6 +172,11 @@ interface FinishEvent {
   steps: number;
   finishReason: string;
   durationMs: number;
+  /**
+   * The conversation after this reply, as the chat UI holds it (`UIMessage[]`). Save it to restore the chat later
+   * (the chat UI's `history.load`). It came from the browser, so treat it as the user's own data, not as trusted.
+   */
+  messages: UIMessage[];
 }
 /** Identity function that gives `agent.config.ts` type checking. */
 export declare function defineAgent<TOOLS extends DopusToolSet>(config: AgentConfig<TOOLS>): AgentConfig<TOOLS>;
@@ -216,5 +224,5 @@ interface ProviderInfo {
 }
 /** Verified against @ai-sdk/openai@4.0.111, @ai-sdk/anthropic@4.0.99, @ai-sdk/google@4.0.114. */
 export declare const PROVIDERS: Record<ProviderId, ProviderInfo>;
-export declare const VERSION = "0.2.8";
+export declare const VERSION = "0.2.9";
 export type { AgentConfig, AgentUser, ClientContext, ConfirmOption, DopusTool, DopusToolSet, FinishEvent, HandlerOptions, PromptLayers, ProviderId, ProviderInfo, RuntimeContext, ToolCallEvent, ToolContext, ToolOptions };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as PROVIDERS, t as VERSION } from "./version-Bs8LB7Ph.js";
+import { n as PROVIDERS, t as VERSION } from "./version-NYbd20Zw.js";
 import { convertToModelMessages, createUIMessageStreamResponse, getToolName, isStepCount, isToolUIPart, safeValidateUIMessages, streamText, toUIMessageStream, tool } from "ai";
 // src/job.ts
 /**
@@ -378,6 +378,14 @@ function createAgentHandler(config, options = {}) {
 			})
 		};
 		const approvalSecret = config.approvalSecret ?? process.env.DOPUS_APPROVAL_SECRET;
+		const finish = { async emit() {
+			if (this.done || !this.usage || !this.messages) return;
+			this.done = true;
+			await runHook(config.onFinish, {
+				...this.usage,
+				messages: this.messages
+			}, report);
+		} };
 		const result = streamText({
 			...config.callOptions,
 			model: config.model,
@@ -410,7 +418,7 @@ function createAgentHandler(config, options = {}) {
 			onError: ({ error }) => report(error),
 			onEnd: async (event) => {
 				await config.callOptions?.onEnd?.(event);
-				await runHook(config.onFinish, {
+				finish.usage = {
 					user,
 					model: {
 						provider: event.model.provider,
@@ -425,13 +433,19 @@ function createAgentHandler(config, options = {}) {
 					steps: event.stepNumber + 1,
 					finishReason: event.finishReason,
 					durationMs: Date.now() - started
-				}, report);
+				};
+				await finish.emit();
 			}
 		});
 		const response = createUIMessageStreamResponse({ stream: toUIMessageStream({
 			stream: result.stream,
 			tools,
 			originalMessages: messages,
+			onEnd: async ({ messages: final, isAborted }) => {
+				if (isAborted) return;
+				finish.messages = final;
+				await finish.emit();
+			},
 			onError: (error) => {
 				if (error instanceof ToolError) return error.message;
 				report(error);

package/dist/{version-Bs8LB7Ph.js → version-NYbd20Zw.js}

@@ -27,5 +27,5 @@ const PROVIDERS = {
 	}
 };
 // src/version.ts
-const VERSION = "0.2.8";
+const VERSION = "0.2.9";
 export { PROVIDERS as n, VERSION as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dopus",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "A lightweight agent for Next.js: your existing server functions become its tools, run with the signed-in user's permissions.",
   "license": "MIT",
   "author": "akodm",

package/templates/history.json

@@ -5,7 +5,8 @@
     "af6a34c9f15d4bef": "0.2.5",
     "e0ff5f54b6823dba": "0.2.6",
     "a3542945427a3dfa": "0.2.7",
-    "46c4c3eca89693fe": "0.2.8"
+    "46c4c3eca89693fe": "0.2.8",
+    "291cb0b17e9d8613": "0.2.9"
   },
   "ui/agent-chat.module.css": {
     "8ecfa2904dee75e9": "0.1.0"

package/templates/ui/agent-chat.tsx

@@ -5,6 +5,7 @@
  * Talks to POST /api/agent with the AI SDK `useChat` protocol.
  * Styles: ./agent-chat.css — plain global CSS with `dopus-` class names (works with or without Tailwind).
  * Background jobs: pass a `channel` and the agent continues by itself when a job it started finishes.
+ * Chat history: pass `history` to keep the conversation across reloads (sessionStorage, your API...).
  */
 import { useChat } from '@ai-sdk/react'
 import {
@@ -76,6 +77,16 @@ export interface AgentChatProps {
   maxJobFollowUps?: number
   /** Called when the agent finishes a reply. `AgentWidget` uses it to mark the closed launcher as unread. */
   onReply?: () => void
+  /** Keep the conversation across reloads. Off by default (the chat lives in memory). */
+  history?: AgentChatHistory
+}
+
+/** Where the conversation is kept. Both are optional; neither may throw away the user's data silently. */
+export interface AgentChatHistory {
+  /** Called once when the chat mounts; return the conversation to restore. */
+  load?: () => UIMessage[] | null | undefined | Promise<UIMessage[] | null | undefined>
+  /** Called when the chat settles after a change, and with `[]` on "New chat". */
+  save?: (messages: UIMessage[]) => void | Promise<void>
 }
 
 export interface AgentChannel {
@@ -298,6 +309,7 @@ export function AgentChat({
   channel,
   maxJobFollowUps = 3,
   onReply,
+  history,
 }: AgentChatProps) {
   const labels = { ...DEFAULT_LABELS, ...labelOverrides }
   const router = useRouter()
@@ -340,6 +352,39 @@ export function AgentChat({
   const listRef = useRef<HTMLDivElement>(null)
   const busy = status === 'submitted' || status === 'streaming'
 
+  // Chat history: restore once on mount (after hydration), then save whenever the chat settles.
+  const historyRef = useRef(history)
+  useEffect(() => {
+    historyRef.current = history
+  })
+  const [restored, setRestored] = useState(!history?.load)
+  useEffect(() => {
+    const load = historyRef.current?.load
+    if (!load) return
+    let cancelled = false
+    Promise.resolve()
+      .then(load)
+      .then((saved) => {
+        // Keep anything the user already typed while it was loading.
+        if (!cancelled && saved?.length)
+          setMessages((current) => (current.length ? current : saved))
+      })
+      .catch((error) => console.error('[dopus] history.load failed', error))
+      .finally(() => {
+        if (!cancelled) setRestored(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [setMessages])
+  useEffect(() => {
+    // Empty is saved only by "New chat", so a slow or failed load never overwrites what was stored.
+    if (!restored || status !== 'ready' || messages.length === 0) return
+    Promise.resolve(historyRef.current?.save?.(messages)).catch((error) =>
+      console.error('[dopus] history.save failed', error),
+    )
+  }, [restored, status, messages])
+
   // Jobs the channel reported finished. Kept even before this chat shows the job (a job can finish before
   // its tool output has streamed in); only IDs this chat started are acted on.
   const [finishedJobs, setFinishedJobs] = useState<Set<string>>(() => new Set())
@@ -428,6 +473,9 @@ export function AgentChat({
     clearError()
     setMessages([])
     setInput('')
+    Promise.resolve(historyRef.current?.save?.([])).catch((error) =>
+      console.error('[dopus] history.save failed', error),
+    )
   }
 
   // The route answers 413 when the history is over its size limit; retrying cannot help then.