dopus 0.2.6 → 0.2.7

package/README.md

@@ -83,6 +83,27 @@ dopus init [--provider openai|anthropic|google] [--model <id>]
 
 `--yes` runs without prompts. It needs `--provider` and skips the API key prompt, so add the key to `.env.local` yourself afterwards.
 
+### Updating
+
+`init` copies files into your project, so a new dopus version does not change them by itself. After upgrading the
+package, bring them up to date:
+
+```bash
+pnpm add dopus@latest
+pnpm dopus update            # --dry-run to only see what would change
+```
+
+`update` handles the files `init` copied: the chat UI (`agent-chat.tsx`, `agent-chat.css`), the route and the preset
+prompt. It never touches `agent.config.ts`, `agent/prompts/app.ts` or `.env.local`.
+
+- A file you never edited (it matches a template some dopus version shipped) is replaced.
+- A file you edited is never replaced silently. You choose: see the diff, keep yours and get the new template next to
+  it as `<file>.new` to merge by hand, replace it, or skip. `--yes` always takes the `.new` route; `--force` replaces.
+- Packages the new chat UI needs are installed (`--no-install` prints the command instead).
+
+Commit first, so `git diff` shows exactly what changed. The [changelog](CHANGELOG.md) says what each version changed
+and anything to do in `agent.config.ts`.
+
 ## Tools
 
 ```ts
@@ -206,7 +227,9 @@ Anthropic gets an explicit cache breakpoint after layer 3. OpenAI and Gemini cac
 Both accept `api`, `suggestions`, `labels` (every UI string, for translation), `className`, and `channel` /
 `maxJobFollowUps` for [background jobs](#background-jobs).
 
-The UI shows each tool call as it runs. 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.
+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.
 
 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.
 
@@ -490,8 +513,6 @@ dopus is pre-1.0, so expect breaking changes before 1.0. It is tested on Next.js
 
 Planned next, within the lightweight scope above:
 
-- a command that updates your copies of the chat UI and route when the templates change (it also brings background
-  job support into projects created before it);
 - tool input schemas inferred from TypeScript types.
 
 ## Development
@@ -501,7 +522,8 @@ pnpm install
 pnpm build && pnpm lint && pnpm typecheck && pnpm test
 pnpm example:build && pnpm example:e2e   # next start + scripted model
 pnpm example:live                        # real model from examples/next-app/.env.local (costs cents)
-pnpm smoke                               # packed tarball → fresh app → dopus init → next build
+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`
 pnpm aws:emu                             # OpenNext build → local Lambda streaming invoke
 pnpm cf:e2e                              # dopus infra cloudflare → wrangler dev (workerd) → e2e
 pnpm gcp:e2e                             # dopus infra gcp → docker build/run (Cloud Run style) → e2e

package/dist/cli.js

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
-import { n as PROVIDERS, t as VERSION } from "./version-Dm8IBEUF.js";
+import { n as PROVIDERS, t as VERSION } from "./version-DqzDElrt.js";
 import { execFileSync, spawn } from "node:child_process";
 import { parseArgs } from "node:util";
 import * as p from "@clack/prompts";
 import { appendFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, relative, resolve } from "node:path";
-import { randomBytes } from "node:crypto";
+import { createHash, randomBytes } from "node:crypto";
 import { fileURLToPath } from "node:url";
 // src/init/detect.ts
 var InitError = class extends Error {
@@ -808,11 +808,249 @@ async function runInfraGcp(options, io) {
 	].join("\n"), "Cloud Run notes");
 	return result;
 }
+// src/update/diff.ts
+/** Line diff (LCS) in unified style with 3 lines of context. Small and dependency-free; templates are short. */
+function unifiedDiff(before, after, context = 3) {
+	const a = before.replace(/\r\n/g, "\n").split("\n");
+	const b = after.replace(/\r\n/g, "\n").split("\n");
+	const n = a.length;
+	const m = b.length;
+	if (n * m > 4e6) return "(files too large to diff here)";
+	const table = new Uint32Array((n + 1) * (m + 1));
+	const lcs = (i, j) => table[i * (m + 1) + j] ?? 0;
+	for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) table[i * (m + 1) + j] = a[i] === b[j] ? lcs(i + 1, j + 1) + 1 : Math.max(lcs(i + 1, j), lcs(i, j + 1));
+	const lines = [];
+	let i = 0;
+	let j = 0;
+	while (i < n || j < m) if (i < n && j < m && a[i] === b[j]) {
+		lines.push({
+			op: " ",
+			text: a[i] ?? ""
+		});
+		i++;
+		j++;
+	} else if (i < n && (j >= m || lcs(i + 1, j) >= lcs(i, j + 1))) {
+		lines.push({
+			op: "-",
+			text: a[i] ?? ""
+		});
+		i++;
+	} else {
+		lines.push({
+			op: "+",
+			text: b[j] ?? ""
+		});
+		j++;
+	}
+	const changed = [];
+	lines.forEach((line, index) => {
+		if (line.op !== " ") changed.push(index);
+	});
+	const out = [];
+	let start = 0;
+	while (start < changed.length) {
+		let end = start;
+		while (end + 1 < changed.length && (changed[end + 1] ?? 0) - (changed[end] ?? 0) <= context * 2) end++;
+		const from = Math.max(0, (changed[start] ?? 0) - context);
+		const to = Math.min(lines.length - 1, (changed[end] ?? 0) + context);
+		out.push("@@");
+		for (const line of lines.slice(from, to + 1)) out.push(`${line.op}${line.text}`);
+		start = end + 1;
+	}
+	return out.join("\n");
+}
+// src/update/history.ts
+/** The generated route imports the agent config by a path that differs per project. */
+const CONFIG_IMPORT = /^import agent from ['"]([^'"]+)['"]/m;
+/** Must match normalize() in scripts/template-history.mjs. */
+function normalize(text) {
+	return text.replace(/\r\n/g, "\n").replace(CONFIG_IMPORT, "import agent from '<config>'");
+}
+function templateHash(text) {
+	return createHash("sha256").update(normalize(text)).digest("hex").slice(0, 16);
+}
+let cached;
+function templateHistory() {
+	cached ??= JSON.parse(readTemplate("history.json"));
+	return cached;
+}
+/** The dopus version whose untouched template this is, or undefined if the user changed it. */
+function shippedIn(key, text) {
+	return templateHistory()[key]?.[templateHash(text)];
+}
+// src/update/run.ts
+/** Packages the chat UI imports (the rest were added by `init` and are needed by the route too). */
+const UI_DEPENDENCIES = [
+	["@ai-sdk/react", "@ai-sdk/react@^4"],
+	["react-markdown", "react-markdown@^10"],
+	["remark-gfm", "remark-gfm@^4"]
+];
+/** Which preset an existing preset.ts came from: by its hash, else the one it shares most lines with. */
+function presetKey(text) {
+	const keys = PRESETS.map((preset) => `prompts/presets/${preset.id}.ts`);
+	const exact = keys.find((key) => shippedIn(key, text));
+	if (exact) return exact;
+	const lines = new Set(text.split("\n").map((line) => line.trim()));
+	const shared = (key) => readTemplate(key).split("\n").filter((line) => line.trim() && lines.has(line.trim())).length;
+	return keys.reduce((best, key) => shared(key) > shared(best) ? key : best);
+}
+/**
+* Brings the files `dopus init` copied (chat UI, route, preset prompt) up to this version's templates.
+* Untouched copies of an older version are replaced; copies the user edited are never replaced without
+* asking. agent.config.ts, app.ts and .env.local are the user's and are never touched.
+*/
+async function runUpdate(options, io) {
+	const project = detectProject(options.cwd);
+	const { root } = project;
+	const at = (path) => join(project.configDir, path);
+	const read = (file) => readFileSync(join(root, file), "utf8");
+	const exists = (file) => existsSync(join(root, file));
+	const result = {
+		files: [],
+		installed: [],
+		missingDependencies: []
+	};
+	const chatFile = at("components/agent/agent-chat.tsx");
+	const routeFile = join(project.appDir, "api", "agent", "route.ts");
+	const presetFile = at("agent/prompts/preset.ts");
+	const targets = [{
+		file: chatFile,
+		key: "ui/agent-chat.tsx",
+		latest: readTemplate("ui/agent-chat.tsx")
+	}, {
+		file: at("components/agent/agent-chat.css"),
+		key: "ui/agent-chat.css",
+		latest: readTemplate("ui/agent-chat.css"),
+		create: exists(chatFile)
+	}];
+	if (exists(routeFile)) {
+		const configImport = read(routeFile).match(CONFIG_IMPORT)?.[1] ?? toImportPath(routeFile, at("agent.config"));
+		targets.push({
+			file: routeFile,
+			key: "route",
+			latest: routeTemplate(configImport)
+		});
+	} else result.files.push({
+		file: routeFile,
+		status: "missing"
+	});
+	if (exists(presetFile)) {
+		const key = presetKey(read(presetFile));
+		targets.push({
+			file: presetFile,
+			key,
+			latest: readTemplate(key)
+		});
+	} else result.files.push({
+		file: presetFile,
+		status: "missing"
+	});
+	const write = (file, content) => {
+		if (!options.dryRun) writeFileSync(join(root, file), content);
+	};
+	for (const target of targets) {
+		const { file, latest } = target;
+		if (!exists(file)) {
+			if (target.create) {
+				write(file, latest);
+				result.files.push({
+					file,
+					status: "created"
+				});
+			} else result.files.push({
+				file,
+				status: "missing"
+			});
+			continue;
+		}
+		const current = read(file);
+		if (normalize(current) === normalize(latest)) {
+			result.files.push({
+				file,
+				status: "up-to-date"
+			});
+			continue;
+		}
+		const from = shippedIn(target.key, current);
+		if (from) {
+			write(file, latest);
+			result.files.push({
+				file,
+				status: "updated",
+				from
+			});
+			continue;
+		}
+		let choice;
+		if (options.dryRun) {
+			result.files.push({
+				file,
+				status: "modified"
+			});
+			continue;
+		} else if (options.force) choice = "overwrite";
+		else if (options.yes) choice = "new";
+		else do {
+			choice = await io.choose(`${file} has your changes. Replace it with the new template?`, [
+				{
+					value: "diff",
+					label: "Show the diff (yours → new)"
+				},
+				{
+					value: "new",
+					label: `Keep yours, save the new one as ${file}.new`
+				},
+				{
+					value: "overwrite",
+					label: "Replace (your changes are lost)"
+				},
+				{
+					value: "skip",
+					label: "Keep yours, skip"
+				}
+			]);
+			if (choice === "diff") io.diff(unifiedDiff(current, latest));
+		} while (choice === "diff");
+		if (choice === "overwrite") {
+			write(file, latest);
+			result.files.push({
+				file,
+				status: "overwritten"
+			});
+		} else if (choice === "new") {
+			write(`${file}.new`, latest);
+			result.files.push({
+				file,
+				status: "saved-new"
+			});
+		} else result.files.push({
+			file,
+			status: "kept"
+		});
+	}
+	const chatReplaced = result.files.some((f) => f.file === chatFile && (f.status === "updated" || f.status === "overwritten"));
+	const oldModule = at("components/agent/agent-chat.module.css");
+	if (chatReplaced && exists(oldModule)) io.warn(`${oldModule} is no longer used by the chat UI (it now imports agent-chat.css). Delete it.`);
+	if (exists(chatFile)) {
+		const missing = UI_DEPENDENCIES.filter(([name]) => !project.dependencies[name]).map(([, spec]) => spec);
+		if (missing.length > 0) {
+			if (!options.dryRun && options.install !== false && (options.yes || options.force || await io.confirm(`Install ${missing.join(", ")}?`, true))) {
+				await io.install(project.packageManager, missing, root);
+				result.installed = missing;
+			} else {
+				result.missingDependencies = missing;
+				io.warn(`The chat UI needs: ${project.packageManager} ${installArgs(project.packageManager, missing).join(" ")}`);
+			}
+		}
+	}
+	return result;
+}
 // src/cli.ts
 const HELP = `dopus ${VERSION}
 
 Usage:
   dopus init [options]        Add an AI agent to this Next.js app
+  dopus update [options]      Update the chat UI, route and preset prompt that init copied
   dopus infra aws [options]   Prepare the agent route for AWS Lambda (OpenNext streaming + SST snippet)
   dopus infra cloudflare      Prepare the app for Cloudflare Workers (@opennextjs/cloudflare)
   dopus infra gcp             Prepare the app for Cloud Run (standalone build + Dockerfile)
@@ -826,6 +1064,13 @@ Options for init:
   --force                Overwrite generated files that already exist
   --cwd <dir>            Project root (default: current directory)
 
+Options for update (first install the new version: pnpm add dopus@latest):
+  --dry-run              Show what would change; write nothing
+  -y, --yes              Do not ask: files you edited get the new template next to them as <file>.new
+  --force                Replace files you edited too
+  --no-install           Do not install dependencies
+  --cwd <dir>            Project root
+
 Options for infra:
   -y, --yes              Do not ask before installing @opennextjs/aws
   --no-install           Print the install command instead
@@ -928,6 +1173,62 @@ async function init(args) {
 	p.note(steps.map((s, i) => `${i + 1}. ${s}`).join("\n"), "Next steps");
 	p.outro("Done.");
 }
+const STATUS = {
+	"up-to-date": "up to date",
+	updated: "updated",
+	created: "created",
+	modified: "has your changes: would ask (run without --dry-run)",
+	overwritten: "replaced (your changes are gone)",
+	kept: "kept your version",
+	"saved-new": "kept your version; new template saved as .new next to it",
+	missing: "not found (not created by dopus init?)"
+};
+function colorDiff(text) {
+	if (!process.stdout.isTTY) return text;
+	return text.split("\n").map((line) => line.startsWith("+") ? `\x1b[32m${line}\x1b[0m` : line.startsWith("-") ? `\x1b[31m${line}\x1b[0m` : line.startsWith("@@") ? `\x1b[36m${line}\x1b[0m` : line).join("\n");
+}
+async function update(args) {
+	const { values } = parseArgs({
+		args,
+		options: {
+			"dry-run": { type: "boolean" },
+			yes: {
+				type: "boolean",
+				short: "y"
+			},
+			force: { type: "boolean" },
+			install: {
+				type: "boolean",
+				default: true
+			},
+			"no-install": { type: "boolean" },
+			cwd: { type: "string" }
+		},
+		allowNegative: true
+	});
+	p.intro(`dopus ${VERSION} · update${values["dry-run"] ? " (dry run)" : ""}`);
+	p.log.info(`Templates come from the installed dopus (${VERSION}). For the newest, run \`pnpm add dopus@latest\` first.`);
+	const updateIO = {
+		...io,
+		async choose(message, options) {
+			return cancelled(await p.select({
+				message,
+				options
+			}));
+		},
+		diff: (text) => console.log(colorDiff(text || "(no differences)"))
+	};
+	const result = await runUpdate({
+		cwd: values.cwd ?? process.cwd(),
+		dryRun: values["dry-run"],
+		yes: values.yes,
+		force: values.force,
+		install: values["no-install"] ? false : values.install
+	}, updateIO);
+	p.note(result.files.map(({ file, status, from }) => `${file}: ${STATUS[status]}${from ? ` (was ${from})` : ""}`).join("\n"), "Files");
+	if (result.files.some((f) => f.status === "saved-new")) p.log.info("Merge each .new file into yours, then delete it.");
+	p.outro("What changed: https://github.com/akodm/dopus/blob/main/CHANGELOG.md");
+}
 async function infra(args) {
 	const [target, ...rest] = args;
 	const runners = {
@@ -970,6 +1271,7 @@ async function main() {
 	if (rest.includes("--help") || rest.includes("-h")) return console.log(HELP);
 	if (command === "init") return init(rest);
 	if (command === "infra") return infra(rest);
+	if (command === "update") return update(rest);
 	console.log(HELP);
 	if (command && command !== "--help" && command !== "-h") process.exitCode = 1;
 }

package/dist/index.d.ts

@@ -216,5 +216,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.6";
+export declare const VERSION = "0.2.7";
 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-Dm8IBEUF.js";
+import { n as PROVIDERS, t as VERSION } from "./version-DqzDElrt.js";
 import { convertToModelMessages, createUIMessageStreamResponse, getToolName, isStepCount, isToolUIPart, safeValidateUIMessages, streamText, toUIMessageStream, tool } from "ai";
 // src/job.ts
 /**

package/dist/{version-Dm8IBEUF.js → version-DqzDElrt.js}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dopus",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "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

@@ -0,0 +1,35 @@
+{
+  "ui/agent-chat.tsx": {
+    "ff662fe56e84cfd0": "0.1.0",
+    "89475c1e29eb011b": "0.2.2",
+    "af6a34c9f15d4bef": "0.2.5",
+    "e0ff5f54b6823dba": "0.2.6",
+    "a3542945427a3dfa": "0.2.7"
+  },
+  "ui/agent-chat.module.css": {
+    "8ecfa2904dee75e9": "0.1.0"
+  },
+  "prompts/presets/general.ts": {
+    "10068289d8dfbf09": "0.1.0",
+    "fc75d0ecdeb38b7f": "0.2.2"
+  },
+  "prompts/presets/customer-support.ts": {
+    "2fdd5a26b25c23ae": "0.1.0",
+    "95bd1451466fb32b": "0.2.2"
+  },
+  "prompts/presets/internal-ops.ts": {
+    "2b150cc147d78e44": "0.1.0",
+    "c4b308fa69493fb8": "0.2.2",
+    "d5e08199cf6b45c2": "0.2.3"
+  },
+  "route": {
+    "17498e892a470ee4": "0.1.0",
+    "c44baa5927649535": "0.2.4"
+  },
+  "ui/agent-chat.css": {
+    "72f30cfb90fe5255": "0.2.2",
+    "65d193ef3df15ecc": "0.2.5",
+    "a33f338eb017ad66": "0.2.6",
+    "155c72a570d1ee5e": "0.2.7"
+  }
+}

package/templates/ui/agent-chat.css

@@ -257,6 +257,7 @@
 }
 
 .dopus-launcher {
+  position: relative;
   width: 52px;
   height: 52px;
   border-radius: 50%;
@@ -268,6 +269,20 @@
   box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
 }
 
+/* A reply arrived while the panel was closed (e.g. a background job's follow-up). */
+.dopus-launcher[data-unread]::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  /* The launcher sits outside .dopus-chat, where the --dopus-* variables live, so its colors are fixed too. */
+  background: #dc2626;
+  border: 2px solid #ffffff;
+}
+
 /* Assistant replies (Markdown). Compact spacing for a chat bubble. */
 .dopus-markdown {
   white-space: normal;

package/templates/ui/agent-chat.tsx

@@ -49,6 +49,7 @@ const DEFAULT_LABELS = {
   jobRunning: 'Working in the background',
   jobDone: 'Background task finished',
   open: 'Open assistant',
+  unread: 'New reply',
   close: 'Close assistant',
 }
 
@@ -70,6 +71,8 @@ export interface AgentChatProps {
   channel?: AgentChannel
   /** Follow-up turns the agent may take in a row on finished jobs before waiting for the user. Default 3. */
   maxJobFollowUps?: number
+  /** Called when the agent finishes a reply. `AgentWidget` uses it to mark the closed launcher as unread. */
+  onReply?: () => void
 }
 
 export interface AgentChannel {
@@ -278,9 +281,15 @@ export function AgentChat({
   className,
   channel,
   maxJobFollowUps = 3,
+  onReply,
 }: AgentChatProps) {
   const labels = { ...DEFAULT_LABELS, ...labelOverrides }
   const router = useRouter()
+  // useChat keeps the callbacks it was created with; read the latest onReply through a ref.
+  const onReplyRef = useRef(onReply)
+  useEffect(() => {
+    onReplyRef.current = onReply
+  })
   const [transport] = useState(
     () =>
       new DefaultChatTransport({
@@ -308,6 +317,7 @@ export function AgentChat({
       if (message.parts.some((part) => isToolUIPart(part) && part.state === 'output-available')) {
         router.refresh()
       }
+      onReplyRef.current?.()
     },
   })
   const [input, setInput] = useState('')
@@ -478,19 +488,34 @@ export function AgentChat({
 /** Floating button that opens the chat in a panel. Put it once in your root layout. */
 export function AgentWidget(props: AgentChatProps) {
   const [open, setOpen] = useState(false)
+  // A reply finished while the panel was closed, e.g. the agent continuing after a background job.
+  const [unread, setUnread] = useState(false)
   const labels = { ...DEFAULT_LABELS, ...props.labels }
   return (
     <div className="dopus-widget">
       {/* Hidden rather than unmounted, so closing the panel keeps the conversation. */}
       <div hidden={!open}>
-        <AgentChat {...props} className="dopus-panel" />
+        <AgentChat
+          {...props}
+          className="dopus-panel"
+          onReply={() => {
+            if (!open) setUnread(true)
+            props.onReply?.()
+          }}
+        />
       </div>
       <button
         type="button"
         className="dopus-launcher"
         aria-expanded={open}
-        aria-label={open ? labels.close : labels.open}
-        onClick={() => setOpen((value) => !value)}
+        aria-label={
+          open ? labels.close : unread ? `${labels.open} (${labels.unread})` : labels.open
+        }
+        data-unread={!open && unread ? '' : undefined}
+        onClick={() => {
+          setOpen((value) => !value)
+          setUnread(false)
+        }}
       >
         {open ? '×' : '✦'}
       </button>