arcie 0.1.5 → 0.1.6

package/dist/cli/index.js

@@ -149,9 +149,20 @@ function createCliProgram(logger) {
   });
   return program;
 }
+var KNOWN_COMMANDS = /* @__PURE__ */ new Set(["channels", "init", "build", "dev", "help"]);
+function resolveArgv(argv) {
+  if (argv.length === 0) return ["dev"];
+  const first = argv[0];
+  if (first === "-h" || first === "--help" || first === "-V" || first === "--version") {
+    return [...argv];
+  }
+  if (first.startsWith("-")) return [...argv];
+  if (KNOWN_COMMANDS.has(first)) return [...argv];
+  return ["init", ...argv];
+}
 async function runCli(argv = process.argv.slice(2), logger = console) {
   const program = createCliProgram(logger);
-  const input = argv.length === 0 ? ["dev"] : argv;
+  const input = resolveArgv(argv);
   try {
     await program.parseAsync(input, { from: "user" });
   } catch (error) {

package/dist/cli/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/cli/index.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { resolve as resolvePath } from \"node:path\";\nimport { Command, CommanderError, InvalidArgumentError } from \"commander\";\nimport { arcieCliBanner, version } from \"./banner\";\nimport { createCliTheme, renderCliTaggedLine } from \"./ui/output\";\n\ninterface CliLogger {\n  error(message: string): void;\n  log(message: string): void;\n}\n\nconst DISPLAY_MODES = new Set([\"full\", \"collapsed\", \"auto-collapsed\", \"hidden\"]);\nconst STATS_MODES = new Set([\"tokens\", \"tokensPerSecond\"]);\nconst LOG_MODES = new Set([\"all\", \"stderr\", \"none\"]);\n\ntype TerminalPartDisplayMode = \"full\" | \"collapsed\" | \"auto-collapsed\" | \"hidden\";\ntype AssistantResponseStatsMode = \"tokens\" | \"tokensPerSecond\";\ntype LogDisplayMode = \"all\" | \"stderr\" | \"none\";\n\nfunction parsePortOption(value: string): number {\n  if (!/^-?\\d+$/.test(value)) {\n    throw new InvalidArgumentError(`Expected a numeric port, received \"${value}\".`);\n  }\n  const port = Number(value);\n  if (port < 0 || port > 65_535) {\n    throw new InvalidArgumentError(`Expected a port between 0 and 65535, received \"${value}\".`);\n  }\n  return port;\n}\n\nfunction parseDisplayMode(value: string): TerminalPartDisplayMode {\n  if (!DISPLAY_MODES.has(value)) {\n    throw new InvalidArgumentError(\n      `Expected one of ${[...DISPLAY_MODES].join(\", \")}, received \"${value}\".`,\n    );\n  }\n  return value as TerminalPartDisplayMode;\n}\n\nfunction parseStatsMode(value: string): AssistantResponseStatsMode {\n  if (!STATS_MODES.has(value)) {\n    throw new InvalidArgumentError(\n      `Expected one of ${[...STATS_MODES].join(\", \")}, received \"${value}\".`,\n    );\n  }\n  return value as AssistantResponseStatsMode;\n}\n\nfunction parseLogsMode(value: string): LogDisplayMode {\n  if (!LOG_MODES.has(value)) {\n    throw new InvalidArgumentError(\n      `Expected one of ${[...LOG_MODES].join(\", \")}, received \"${value}\".`,\n    );\n  }\n  return value as LogDisplayMode;\n}\n\nfunction parseContextSizeOption(value: string): number {\n  const size = Number(value);\n  if (!Number.isFinite(size) || size <= 0) {\n    throw new InvalidArgumentError(`Expected a positive number, received \"${value}\".`);\n  }\n  return size;\n}\n\nfunction shouldPrintCliBootBanner(actionCommand: Command): boolean {\n  const name = actionCommand.name();\n  return name === \"info\" || name === \"dev\" || name === \"init\";\n}\n\nfunction createCliProgram(logger: CliLogger): Command {\n  const program = new Command();\n  const theme = createCliTheme();\n\n  program\n    .name(\"arcie\")\n    .description(\"arcie — the electronic line, build agents at the speed of light\")\n    .version(version())\n    .showHelpAfterError()\n    .exitOverride()\n    .hook(\"preAction\", (_program, actionCommand) => {\n      if (shouldPrintCliBootBanner(actionCommand)) {\n        logger.log(arcieCliBanner());\n      }\n    })\n    .configureOutput({\n      writeErr: (message) => logger.error(message.trimEnd()),\n      writeOut: (message) => logger.log(message.trimEnd()),\n    });\n\n  const channels = program\n    .command(\"channels\")\n    .description(\"Manage channels for the current agent (web UI, HTTP, etc.).\");\n\n  channels\n    .command(\"add <kind>\")\n    .description(\"Scaffold a channel (currently supports: web).\")\n    .option(\"--agent-dir <path>\", \"Path to agent directory\", \".\")\n    .action(async (kind: string, options: { agentDir: string }) => {\n      if (kind !== \"web\") {\n        logger.error(`unknown channel kind: ${kind}. supported: web`);\n        process.exit(1);\n      }\n      const agentDir = resolvePath(process.cwd(), options.agentDir);\n      const { scaffoldWebChat } = await import(\"./scaffold-web-chat\");\n      try {\n        const result = scaffoldWebChat(agentDir);\n        if (result.alreadyExisted) {\n          logger.error(`channels/web already exists at ${result.targetPath}`);\n          process.exit(1);\n        }\n        logger.log(\n          renderCliTaggedLine(theme, {\n            message: `scaffolded ${result.targetPath}`,\n            tag: \"channels\",\n            tone: \"success\",\n          }),\n        );\n        logger.log(\n          renderCliTaggedLine(theme, {\n            message: \"cd into it, then: npm install && cp .env.local.example .env.local && npm run dev\",\n            tag: \"next\",\n            tone: \"info\",\n          }),\n        );\n      } catch (err) {\n        logger.error(err instanceof Error ? err.message : String(err));\n        process.exit(1);\n      }\n    });\n\n  program\n    .command(\"init [target]\")\n    .description(\"Create a new arcie agent, or add one to an existing project directory.\")\n    .option(\"--template <name>\", \"Template to use (default, agent-only)\", \"default\")\n    .option(\"-y, --yes\", \"Accepted for compatibility; has no effect\")\n    .action(async (target: string | undefined, options: { template: string; yes?: boolean }) => {\n      if (options.yes) logger.error(\"warning: --yes has no effect for arcie init.\");\n      const { initCommand } = await import(\"./init\");\n      await initCommand(target, { template: options.template });\n    });\n\n  program\n    .command(\"build\")\n    .description(\"Compile the agent for production.\")\n    .option(\"--agent-dir <path>\", \"Path to agent directory\", \"agent\")\n    .option(\"--out-dir <path>\", \"Output directory\", \".arcie\")\n    .action(async (options: { agentDir: string; outDir: string }) => {\n      const { buildCommand } = await import(\"./build\");\n      await buildCommand(options);\n      logger.log(\n        renderCliTaggedLine(theme, {\n          message: `output at ${options.outDir}`,\n          tag: \"build\",\n          tone: \"success\",\n        }),\n      );\n    });\n\n  program\n    .command(\"dev\")\n    .description(\"Start the arcie development server or attach an interactive UI.\")\n    .option(\"-p, --port <port>\", \"Port to listen on\", parsePortOption, 3000)\n    .option(\"--host <host>\", \"Host interface to bind\")\n    .option(\"--agent-dir <path>\", \"Path to agent directory\", \"agent\")\n    .option(\"--input <text>\", \"Pre-fill the prompt input, or start onboarding with /model\")\n    .option(\"--no-ui\", \"Start the server without an interactive UI\")\n    .option(\"--name <name>\", \"Title shown in the terminal UI (defaults to the app folder name)\")\n    .option(\n      \"--tools <mode>\",\n      \"How tool calls render: full | collapsed | auto-collapsed | hidden\",\n      parseDisplayMode,\n    )\n    .option(\n      \"--reasoning <mode>\",\n      \"How reasoning renders: full | collapsed | auto-collapsed | hidden\",\n      parseDisplayMode,\n    )\n    .option(\n      \"--subagents <mode>\",\n      \"How subagent sections render: full | collapsed | auto-collapsed | hidden\",\n      parseDisplayMode,\n    )\n    .option(\n      \"--assistant-response-stats <mode>\",\n      \"Assistant header statistic: tokens | tokensPerSecond\",\n      parseStatsMode,\n    )\n    .option(\n      \"--context-size <tokens>\",\n      \"Model context window size, shown as a usage percentage\",\n      parseContextSizeOption,\n    )\n    .option(\"--logs <mode>\", \"Which logs to show: all | stderr | none\", parseLogsMode)\n    .action(async (options) => {\n      const { devCommand } = await import(\"./dev\");\n      await devCommand({\n        port: String(options.port ?? 3000),\n        agentDir: options.agentDir,\n        input: options.ui === false ? false : Boolean(options.input) || options.ui !== false,\n      });\n    });\n\n  return program;\n}\n\nexport async function runCli(\n  argv: string[] = process.argv.slice(2),\n  logger: CliLogger = console,\n): Promise<void> {\n  const program = createCliProgram(logger);\n  const input = argv.length === 0 ? [\"dev\"] : argv;\n\n  try {\n    await program.parseAsync(input, { from: \"user\" });\n  } catch (error) {\n    if (error instanceof CommanderError) {\n      if (error.exitCode === 0) return;\n      throw new Error(error.message);\n    }\n    throw error;\n  }\n}\n\nrunCli().catch((error) => {\n  const message = error instanceof Error ? error.message : String(error);\n  console.error(message);\n  process.exit(1);\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/cli/index.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { resolve as resolvePath } from \"node:path\";\nimport { Command, CommanderError, InvalidArgumentError } from \"commander\";\nimport { arcieCliBanner, version } from \"./banner\";\nimport { createCliTheme, renderCliTaggedLine } from \"./ui/output\";\n\ninterface CliLogger {\n  error(message: string): void;\n  log(message: string): void;\n}\n\nconst DISPLAY_MODES = new Set([\"full\", \"collapsed\", \"auto-collapsed\", \"hidden\"]);\nconst STATS_MODES = new Set([\"tokens\", \"tokensPerSecond\"]);\nconst LOG_MODES = new Set([\"all\", \"stderr\", \"none\"]);\n\ntype TerminalPartDisplayMode = \"full\" | \"collapsed\" | \"auto-collapsed\" | \"hidden\";\ntype AssistantResponseStatsMode = \"tokens\" | \"tokensPerSecond\";\ntype LogDisplayMode = \"all\" | \"stderr\" | \"none\";\n\nfunction parsePortOption(value: string): number {\n  if (!/^-?\\d+$/.test(value)) {\n    throw new InvalidArgumentError(`Expected a numeric port, received \"${value}\".`);\n  }\n  const port = Number(value);\n  if (port < 0 || port > 65_535) {\n    throw new InvalidArgumentError(`Expected a port between 0 and 65535, received \"${value}\".`);\n  }\n  return port;\n}\n\nfunction parseDisplayMode(value: string): TerminalPartDisplayMode {\n  if (!DISPLAY_MODES.has(value)) {\n    throw new InvalidArgumentError(\n      `Expected one of ${[...DISPLAY_MODES].join(\", \")}, received \"${value}\".`,\n    );\n  }\n  return value as TerminalPartDisplayMode;\n}\n\nfunction parseStatsMode(value: string): AssistantResponseStatsMode {\n  if (!STATS_MODES.has(value)) {\n    throw new InvalidArgumentError(\n      `Expected one of ${[...STATS_MODES].join(\", \")}, received \"${value}\".`,\n    );\n  }\n  return value as AssistantResponseStatsMode;\n}\n\nfunction parseLogsMode(value: string): LogDisplayMode {\n  if (!LOG_MODES.has(value)) {\n    throw new InvalidArgumentError(\n      `Expected one of ${[...LOG_MODES].join(\", \")}, received \"${value}\".`,\n    );\n  }\n  return value as LogDisplayMode;\n}\n\nfunction parseContextSizeOption(value: string): number {\n  const size = Number(value);\n  if (!Number.isFinite(size) || size <= 0) {\n    throw new InvalidArgumentError(`Expected a positive number, received \"${value}\".`);\n  }\n  return size;\n}\n\nfunction shouldPrintCliBootBanner(actionCommand: Command): boolean {\n  const name = actionCommand.name();\n  return name === \"info\" || name === \"dev\" || name === \"init\";\n}\n\nfunction createCliProgram(logger: CliLogger): Command {\n  const program = new Command();\n  const theme = createCliTheme();\n\n  program\n    .name(\"arcie\")\n    .description(\"arcie — the electronic line, build agents at the speed of light\")\n    .version(version())\n    .showHelpAfterError()\n    .exitOverride()\n    .hook(\"preAction\", (_program, actionCommand) => {\n      if (shouldPrintCliBootBanner(actionCommand)) {\n        logger.log(arcieCliBanner());\n      }\n    })\n    .configureOutput({\n      writeErr: (message) => logger.error(message.trimEnd()),\n      writeOut: (message) => logger.log(message.trimEnd()),\n    });\n\n  const channels = program\n    .command(\"channels\")\n    .description(\"Manage channels for the current agent (web UI, HTTP, etc.).\");\n\n  channels\n    .command(\"add <kind>\")\n    .description(\"Scaffold a channel (currently supports: web).\")\n    .option(\"--agent-dir <path>\", \"Path to agent directory\", \".\")\n    .action(async (kind: string, options: { agentDir: string }) => {\n      if (kind !== \"web\") {\n        logger.error(`unknown channel kind: ${kind}. supported: web`);\n        process.exit(1);\n      }\n      const agentDir = resolvePath(process.cwd(), options.agentDir);\n      const { scaffoldWebChat } = await import(\"./scaffold-web-chat\");\n      try {\n        const result = scaffoldWebChat(agentDir);\n        if (result.alreadyExisted) {\n          logger.error(`channels/web already exists at ${result.targetPath}`);\n          process.exit(1);\n        }\n        logger.log(\n          renderCliTaggedLine(theme, {\n            message: `scaffolded ${result.targetPath}`,\n            tag: \"channels\",\n            tone: \"success\",\n          }),\n        );\n        logger.log(\n          renderCliTaggedLine(theme, {\n            message: \"cd into it, then: npm install && cp .env.local.example .env.local && npm run dev\",\n            tag: \"next\",\n            tone: \"info\",\n          }),\n        );\n      } catch (err) {\n        logger.error(err instanceof Error ? err.message : String(err));\n        process.exit(1);\n      }\n    });\n\n  program\n    .command(\"init [target]\")\n    .description(\"Create a new arcie agent, or add one to an existing project directory.\")\n    .option(\"--template <name>\", \"Template to use (default, agent-only)\", \"default\")\n    .option(\"-y, --yes\", \"Accepted for compatibility; has no effect\")\n    .action(async (target: string | undefined, options: { template: string; yes?: boolean }) => {\n      if (options.yes) logger.error(\"warning: --yes has no effect for arcie init.\");\n      const { initCommand } = await import(\"./init\");\n      await initCommand(target, { template: options.template });\n    });\n\n  program\n    .command(\"build\")\n    .description(\"Compile the agent for production.\")\n    .option(\"--agent-dir <path>\", \"Path to agent directory\", \"agent\")\n    .option(\"--out-dir <path>\", \"Output directory\", \".arcie\")\n    .action(async (options: { agentDir: string; outDir: string }) => {\n      const { buildCommand } = await import(\"./build\");\n      await buildCommand(options);\n      logger.log(\n        renderCliTaggedLine(theme, {\n          message: `output at ${options.outDir}`,\n          tag: \"build\",\n          tone: \"success\",\n        }),\n      );\n    });\n\n  program\n    .command(\"dev\")\n    .description(\"Start the arcie development server or attach an interactive UI.\")\n    .option(\"-p, --port <port>\", \"Port to listen on\", parsePortOption, 3000)\n    .option(\"--host <host>\", \"Host interface to bind\")\n    .option(\"--agent-dir <path>\", \"Path to agent directory\", \"agent\")\n    .option(\"--input <text>\", \"Pre-fill the prompt input, or start onboarding with /model\")\n    .option(\"--no-ui\", \"Start the server without an interactive UI\")\n    .option(\"--name <name>\", \"Title shown in the terminal UI (defaults to the app folder name)\")\n    .option(\n      \"--tools <mode>\",\n      \"How tool calls render: full | collapsed | auto-collapsed | hidden\",\n      parseDisplayMode,\n    )\n    .option(\n      \"--reasoning <mode>\",\n      \"How reasoning renders: full | collapsed | auto-collapsed | hidden\",\n      parseDisplayMode,\n    )\n    .option(\n      \"--subagents <mode>\",\n      \"How subagent sections render: full | collapsed | auto-collapsed | hidden\",\n      parseDisplayMode,\n    )\n    .option(\n      \"--assistant-response-stats <mode>\",\n      \"Assistant header statistic: tokens | tokensPerSecond\",\n      parseStatsMode,\n    )\n    .option(\n      \"--context-size <tokens>\",\n      \"Model context window size, shown as a usage percentage\",\n      parseContextSizeOption,\n    )\n    .option(\"--logs <mode>\", \"Which logs to show: all | stderr | none\", parseLogsMode)\n    .action(async (options) => {\n      const { devCommand } = await import(\"./dev\");\n      await devCommand({\n        port: String(options.port ?? 3000),\n        agentDir: options.agentDir,\n        input: options.ui === false ? false : Boolean(options.input) || options.ui !== false,\n      });\n    });\n\n  return program;\n}\n\nconst KNOWN_COMMANDS = new Set([\"channels\", \"init\", \"build\", \"dev\", \"help\"]);\n\nfunction resolveArgv(argv: readonly string[]): string[] {\n  if (argv.length === 0) return [\"dev\"];\n  const first = argv[0]!;\n  if (first === \"-h\" || first === \"--help\" || first === \"-V\" || first === \"--version\") {\n    return [...argv];\n  }\n  if (first.startsWith(\"-\")) return [...argv];\n  if (KNOWN_COMMANDS.has(first)) return [...argv];\n  // Bare positional like `arcie my-agent` — treat as `arcie init my-agent`.\n  return [\"init\", ...argv];\n}\n\nexport async function runCli(\n  argv: string[] = process.argv.slice(2),\n  logger: CliLogger = console,\n): Promise<void> {\n  const program = createCliProgram(logger);\n  const input = resolveArgv(argv);\n\n  try {\n    await program.parseAsync(input, { from: \"user\" });\n  } catch (error) {\n    if (error instanceof CommanderError) {\n      if (error.exitCode === 0) return;\n      throw new Error(error.message);\n    }\n    throw error;\n  }\n}\n\nrunCli().catch((error) => {\n  const message = error instanceof Error ? error.message : String(error);\n  console.error(message);\n  process.exit(1);\n});\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arcie",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "The electronic line — build agents at the speed of light.",
   "bin": {
     "arcie": "dist/cli/index.js"

package/templates/web-chat/app/globals.css

@@ -49,7 +49,17 @@
   * {
     @apply border-border;
   }
+  html,
   body {
     @apply bg-background text-foreground antialiased;
+    min-height: 100%;
+  }
+  /* Hide Next.js dev-mode injected UI (SegmentExplorer, portals, toasts). */
+  nextjs-portal,
+  [data-nextjs-toast-wrapper],
+  [data-nextjs-dialog-overlay],
+  [data-nextjs-scroll-focus-boundary],
+  [data-nextjs-devtools-panel] {
+    display: none !important;
   }
 }

package/templates/web-chat/app/layout.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className="h-full">
+    <html lang="en" className="h-full dark" suppressHydrationWarning>
       <body className="h-full">{children}</body>
     </html>
   );

package/templates/web-chat/app/page.tsx

@@ -2,7 +2,7 @@ import { Chat } from "@/components/chat";
 
 export default function Page() {
   return (
-    <main className="flex h-full flex-col">
+    <main className="h-full">
       <Chat />
     </main>
   );

package/templates/web-chat/components/chat.tsx

@@ -1,12 +1,10 @@
 "use client";
 
 import * as React from "react";
-import { Zap } from "lucide-react";
 import { InputBar } from "@/components/input-bar";
 import { Message } from "@/components/message";
 import { readArcieStream } from "@/lib/stream";
 import type { UiMessage, UiToolCall } from "@/lib/types";
-import { cn } from "@/lib/utils";
 
 function newId(prefix: string): string {
   return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
@@ -16,10 +14,12 @@ export function Chat() {
   const [messages, setMessages] = React.useState<UiMessage[]>([]);
   const [streaming, setStreaming] = React.useState(false);
   const abortRef = React.useRef<AbortController | undefined>(undefined);
-  const bottomRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    const el = containerRef.current;
+    if (el === null) return;
+    el.scrollTop = el.scrollHeight;
   }, [messages]);
 
   const stop = () => {
@@ -27,170 +27,193 @@ export function Chat() {
     setStreaming(false);
   };
 
-  const send = async (text: string) => {
-    const userMessage: UiMessage = { id: newId("u"), role: "user", content: text };
-    const assistantId = newId("a");
-    const assistantMessage: UiMessage = {
-      id: assistantId,
-      role: "assistant",
-      content: "",
-      streaming: true,
-      toolCalls: [],
-    };
-    setMessages((prev) => [...prev, userMessage, assistantMessage]);
-    setStreaming(true);
-
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    const updateAssistant = (patch: (prev: UiMessage) => UiMessage) => {
-      setMessages((prev) =>
-        prev.map((message) => (message.id === assistantId ? patch(message) : message)),
-      );
-    };
-
-    try {
-      const response = await fetch("/api/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: text }),
-        signal: controller.signal,
-      });
-      if (!response.ok) {
-        const errorBody = await response.text();
-        updateAssistant((m) => ({
-          ...m,
-          content: errorBody || `Server error (${response.status})`,
-          streaming: false,
-          errored: true,
-        }));
-        return;
-      }
+  const clearAll = () => {
+    if (streaming) stop();
+    setMessages([]);
+  };
 
-      const toolIndex = new Map<string, number>();
+  const copy = (text: string) => {
+    void navigator.clipboard.writeText(text);
+  };
 
-      for await (const event of readArcieStream(response)) {
-        switch (event.type) {
-          case "message.appended": {
-            const delta = (event.data as { delta?: string }).delta ?? "";
-            updateAssistant((m) => ({ ...m, content: `${m.content}${delta}` }));
-            break;
-          }
-          case "message.completed": {
-            const text = (event.data as { text?: string | null }).text;
-            updateAssistant((m) => ({
-              ...m,
-              content: typeof text === "string" && text.length > 0 ? text : m.content,
-            }));
-            break;
-          }
-          case "reasoning.appended": {
-            const delta = (event.data as { delta?: string }).delta ?? "";
-            updateAssistant((m) => ({ ...m, reasoning: `${m.reasoning ?? ""}${delta}` }));
-            break;
-          }
-          case "tool.started": {
-            const data = event.data as { name: string; callId: string; input: unknown };
-            const call: UiToolCall = {
-              callId: data.callId,
-              name: data.name,
-              input: data.input,
-              status: "running",
-            };
-            updateAssistant((m) => {
-              const toolCalls = m.toolCalls ?? [];
-              toolIndex.set(data.callId, toolCalls.length);
-              return { ...m, toolCalls: [...toolCalls, call] };
-            });
-            break;
-          }
-          case "tool.completed": {
-            const data = event.data as {
-              callId: string;
-              output: unknown;
-              status: string;
-              error?: { code: string; message: string };
-            };
-            updateAssistant((m) => {
-              const toolCalls = [...(m.toolCalls ?? [])];
-              const idx = toolIndex.get(data.callId);
-              if (idx === undefined || toolCalls[idx] === undefined) return m;
-              const previous = toolCalls[idx];
-              const isApproval =
-                data.status === "pending" && data.error?.code === "needs_approval";
-              toolCalls[idx] = {
-                ...previous,
-                status: isApproval
-                  ? "approval"
-                  : data.status === "completed"
-                    ? "done"
-                    : "error",
-                output: data.output,
-                errorMessage: data.error?.message,
+  const send = React.useCallback(
+    async (text: string, historyOverride?: UiMessage[]) => {
+      const base = historyOverride ?? messages;
+      const userMessage: UiMessage = { id: newId("u"), role: "user", content: text };
+      const assistantId = newId("a");
+      const assistantMessage: UiMessage = {
+        id: assistantId,
+        role: "assistant",
+        content: "",
+        streaming: true,
+        toolCalls: [],
+      };
+      const isRegeneration = historyOverride !== undefined;
+      setMessages((prev) => (isRegeneration ? [...base, assistantMessage] : [...prev, userMessage, assistantMessage]));
+      setStreaming(true);
+
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const startedAt = Date.now();
+
+      const patchAssistant = (patch: (prev: UiMessage) => UiMessage) => {
+        setMessages((prev) =>
+          prev.map((message) => (message.id === assistantId ? patch(message) : message)),
+        );
+      };
+
+      try {
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: text }),
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          const body = await response.text();
+          patchAssistant((m) => ({
+            ...m,
+            content: body || `Server error (${response.status})`,
+            streaming: false,
+            errored: true,
+          }));
+          return;
+        }
+
+        const toolIndex = new Map<string, number>();
+
+        for await (const event of readArcieStream(response)) {
+          switch (event.type) {
+            case "message.appended": {
+              const delta = (event.data as { delta?: string }).delta ?? "";
+              patchAssistant((m) => ({ ...m, content: `${m.content}${delta}` }));
+              break;
+            }
+            case "message.completed": {
+              const finished = (event.data as { text?: string | null }).text;
+              patchAssistant((m) => ({
+                ...m,
+                content: typeof finished === "string" && finished.length > 0 ? finished : m.content,
+              }));
+              break;
+            }
+            case "reasoning.appended": {
+              const delta = (event.data as { delta?: string }).delta ?? "";
+              patchAssistant((m) => ({ ...m, reasoning: `${m.reasoning ?? ""}${delta}` }));
+              break;
+            }
+            case "tool.started": {
+              const data = event.data as { name: string; callId: string; input: unknown };
+              const call: UiToolCall = {
+                callId: data.callId,
+                name: data.name,
+                input: data.input,
+                status: "running",
               };
-              return { ...m, toolCalls };
-            });
-            break;
-          }
-          case "step.failed":
-          case "turn.failed":
-          case "session.failed": {
-            const data = event.data as { code?: string; message?: string };
-            updateAssistant((m) => ({
-              ...m,
-              content: data.message ?? "Something went wrong.",
-              streaming: false,
-              errored: true,
-            }));
-            break;
+              patchAssistant((m) => {
+                const toolCalls = m.toolCalls ?? [];
+                toolIndex.set(data.callId, toolCalls.length);
+                return { ...m, toolCalls: [...toolCalls, call] };
+              });
+              break;
+            }
+            case "tool.completed": {
+              const data = event.data as {
+                callId: string;
+                output: unknown;
+                status: string;
+                error?: { code: string; message: string };
+              };
+              patchAssistant((m) => {
+                const toolCalls = [...(m.toolCalls ?? [])];
+                const idx = toolIndex.get(data.callId);
+                if (idx === undefined || toolCalls[idx] === undefined) return m;
+                const previous = toolCalls[idx];
+                const isApproval =
+                  data.status === "pending" && data.error?.code === "needs_approval";
+                toolCalls[idx] = {
+                  ...previous,
+                  status: isApproval
+                    ? "approval"
+                    : data.status === "completed"
+                      ? "done"
+                      : "error",
+                  output: data.output,
+                  errorMessage: data.error?.message,
+                };
+                return { ...m, toolCalls };
+              });
+              break;
+            }
+            case "step.failed":
+            case "turn.failed":
+            case "session.failed": {
+              const data = event.data as { code?: string; message?: string };
+              patchAssistant((m) => ({
+                ...m,
+                content: data.message ?? "Something went wrong.",
+                streaming: false,
+                errored: true,
+              }));
+              break;
+            }
           }
         }
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          patchAssistant((m) => ({
+            ...m,
+            content: error instanceof Error ? error.message : String(error),
+            streaming: false,
+            errored: true,
+          }));
+        }
+      } finally {
+        const latencyMs = Date.now() - startedAt;
+        patchAssistant((m) => ({ ...m, streaming: false, latencyMs }));
+        setStreaming(false);
+        abortRef.current = undefined;
       }
-    } catch (error) {
-      if (controller.signal.aborted) {
-        updateAssistant((m) => ({ ...m, streaming: false }));
-      } else {
-        updateAssistant((m) => ({
-          ...m,
-          content: error instanceof Error ? error.message : String(error),
-          streaming: false,
-          errored: true,
-        }));
-      }
-    } finally {
-      updateAssistant((m) => ({ ...m, streaming: false }));
-      setStreaming(false);
-      abortRef.current = undefined;
-    }
+    },
+    [messages],
+  );
+
+  const regenerate = () => {
+    const lastUserIndex = messages.map((m) => m.role).lastIndexOf("user");
+    if (lastUserIndex === -1) return;
+    const historyBefore = messages.slice(0, lastUserIndex);
+    const lastUser = messages[lastUserIndex]!;
+    setMessages([...historyBefore, lastUser]);
+    void send(lastUser.content, [...historyBefore, lastUser]);
   };
 
   return (
-    <div className="flex h-full flex-col">
-      <header className="flex items-center gap-2 border-b border-border px-4 py-3">
-        <Zap className="h-5 w-5 text-amber-500" />
-        <span className="font-semibold">arcie</span>
-        <span className="text-xs text-muted-foreground">web chat</span>
-      </header>
-      <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto flex max-w-3xl flex-col gap-3 px-4 py-6">
-          {messages.length === 0 && <EmptyState />}
-          {messages.map((message) => (
-            <Message key={message.id} message={message} />
-          ))}
-          <div ref={bottomRef} />
+    <div className="fixed inset-0 flex flex-col overflow-hidden bg-background text-foreground">
+      <div ref={containerRef} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-start gap-6 pt-8 pb-4">
+          {messages.map((message, index) => {
+            const isLast =
+              message.role === "assistant" && index === messages.length - 1 && !streaming;
+            return (
+              <Message
+                key={message.id}
+                message={message}
+                isLast={isLast}
+                onCopy={copy}
+                onRegenerate={regenerate}
+              />
+            );
+          })}
         </div>
       </div>
-      <InputBar onSend={send} onStop={stop} streaming={streaming} />
-    </div>
-  );
-}
 
-function EmptyState() {
-  return (
-    <div className={cn("mt-24 flex flex-col items-center gap-2 text-center text-muted-foreground")}>
-      <Zap className="h-8 w-8 text-amber-500" />
-      <div className="text-lg font-medium text-foreground">Start a conversation</div>
-      <div className="text-sm">Ask your arcie agent anything.</div>
+      <InputBar
+        onSend={(text) => void send(text)}
+        onStop={stop}
+        onClear={clearAll}
+        streaming={streaming}
+        hasMessages={messages.length > 0}
+      />
     </div>
   );
 }

package/templates/web-chat/components/input-bar.tsx

@@ -1,26 +1,39 @@
 "use client";
 
 import * as React from "react";
-import { Send, StopCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { ArrowUp, Paperclip, StopCircle, Trash2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 interface InputBarProps {
-  onSend(message: string): void;
+  onSend(message: string, files?: File[]): void;
   onStop(): void;
+  onClear?(): void;
   streaming: boolean;
   disabled?: boolean;
+  hasMessages?: boolean;
 }
 
-export function InputBar({ onSend, onStop, streaming, disabled }: InputBarProps) {
+export function InputBar({
+  onSend,
+  onStop,
+  onClear,
+  streaming,
+  disabled,
+  hasMessages,
+}: InputBarProps) {
   const [value, setValue] = React.useState("");
+  const [files, setFiles] = React.useState<File[]>([]);
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
 
   const submit = () => {
     const trimmed = value.trim();
-    if (trimmed.length === 0 || streaming || disabled) return;
-    onSend(trimmed);
+    if ((trimmed.length === 0 && files.length === 0) || streaming || disabled) return;
+    onSend(trimmed, files.length > 0 ? files : undefined);
     setValue("");
+    setFiles([]);
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    if (fileInputRef.current) fileInputRef.current.value = "";
   };
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -30,44 +43,138 @@ export function InputBar({ onSend, onStop, streaming, disabled }: InputBarProps)
     }
   };
 
-  React.useEffect(() => {
-    const el = textareaRef.current;
-    if (el === null) return;
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    const el = event.target;
     el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
-  }, [value]);
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.files;
+    if (next === null) return;
+    setFiles((prev) => [...prev, ...Array.from(next)]);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const openFilePicker = () => {
+    fileInputRef.current?.click();
+  };
 
   return (
-    <div className="border-t border-border bg-background px-4 py-3">
-      <div className="mx-auto flex max-w-3xl items-end gap-2">
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onKeyDown={onKeyDown}
-          rows={1}
-          placeholder={streaming ? "…" : "Send a message"}
-          disabled={disabled}
+    <div className="shrink-0 bg-transparent px-4 pt-4 pb-6">
+      <div className="mx-auto w-full max-w-3xl">
+        <div
           className={cn(
-            "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
+            "relative flex flex-col rounded-2xl border border-border/40 bg-muted/10 backdrop-blur-md p-3 transition-all",
+            "hover:border-border/60 hover:bg-muted/20",
+            "focus-within:border-primary/45 focus-within:ring-1 focus-within:ring-primary/20",
+          )}
+        >
+          {files.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-2">
+              {files.map((file, index) => (
+                <div
+                  key={`${file.name}-${index}`}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-card/60 text-[11px] font-medium text-foreground border border-border/30"
+                >
+                  <Paperclip className="h-3 w-3 text-muted-foreground/70" />
+                  <span className="max-w-[160px] truncate">{file.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(index)}
+                    className="text-muted-foreground/50 hover:text-foreground transition-colors"
+                    title="Remove attachment"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
           )}
-        />
-        {streaming ? (
-          <Button size="icon" variant="outline" onClick={onStop} aria-label="Stop">
-            <StopCircle className="h-4 w-4" />
-          </Button>
-        ) : (
-          <Button
-            size="icon"
-            onClick={submit}
-            disabled={value.trim().length === 0 || disabled}
-            aria-label="Send"
-          >
-            <Send className="h-4 w-4" />
-          </Button>
-        )}
+
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            rows={2}
+            placeholder={streaming ? "…" : "Ask a question..."}
+            disabled={disabled}
+            className={cn(
+              "max-h-40 min-h-[48px] w-full resize-none bg-transparent py-1.5 text-xs",
+              "placeholder:text-muted-foreground/50 focus:outline-none leading-relaxed",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+            )}
+          />
+
+          <div className="flex items-center justify-between pt-2.5 mt-2 select-none">
+            <div className="flex items-center gap-1.5">
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                onChange={onFileChange}
+                className="hidden"
+              />
+              <button
+                type="button"
+                onClick={openFilePicker}
+                disabled={streaming}
+                className={cn(
+                  "h-8 w-8 flex items-center justify-center rounded-full text-muted-foreground/60 transition-colors",
+                  "hover:bg-muted/30 hover:text-foreground",
+                  "disabled:cursor-not-allowed disabled:opacity-40",
+                )}
+                aria-label="Attach files"
+                title="Attach files"
+              >
+                <Paperclip className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              {hasMessages && onClear && (
+                <button
+                  type="button"
+                  onClick={onClear}
+                  className="h-8 w-8 flex items-center justify-center rounded-full text-muted-foreground/60 hover:bg-muted/30 hover:text-foreground transition-colors"
+                  aria-label="New chat"
+                  title="New chat"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              )}
+              {streaming ? (
+                <button
+                  type="button"
+                  onClick={onStop}
+                  className="h-8 w-8 flex items-center justify-center rounded-full bg-foreground text-background hover:bg-foreground/90 transition-colors"
+                  aria-label="Stop generation"
+                >
+                  <StopCircle className="h-3.5 w-3.5 fill-current" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={submit}
+                  disabled={(value.trim().length === 0 && files.length === 0) || disabled}
+                  className={cn(
+                    "h-8 w-8 flex items-center justify-center rounded-full bg-foreground text-background transition-colors",
+                    "hover:bg-foreground/90",
+                    "disabled:cursor-not-allowed disabled:opacity-40",
+                  )}
+                  aria-label="Send message"
+                >
+                  <ArrowUp className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

package/templates/web-chat/components/message.tsx

@@ -3,58 +3,118 @@
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, Copy, RotateCcw } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { UiMessage } from "@/lib/types";
 import { ToolCall } from "@/components/tool-call";
 
-export function Message({ message }: { message: UiMessage }) {
+interface MessageProps {
+  message: UiMessage;
+  isLast?: boolean;
+  onCopy?(text: string): void;
+  onRegenerate?(): void;
+}
+
+export function Message({ message, isLast, onCopy, onRegenerate }: MessageProps) {
   const isUser = message.role === "user";
+
+  if (isUser) {
+    return (
+      <div className="flex flex-col px-4 items-end">
+        <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-primary px-3.5 py-2 text-primary-foreground shadow-sm">
+          <p className="text-xs font-medium leading-relaxed whitespace-pre-wrap">
+            {message.content}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}>
-      <div
-        className={cn(
-          "max-w-[85%] rounded-lg px-4 py-2.5 text-sm animate-fade-in",
-          isUser
-            ? "bg-primary text-primary-foreground"
-            : "bg-muted text-foreground",
-          message.errored && "border border-destructive/40",
-        )}
-      >
+    <div className="flex flex-col px-4 items-start">
+      <div className="w-full space-y-2">
         {message.errored && (
           <div className="mb-2 flex items-center gap-2 text-xs text-destructive">
             <AlertTriangle className="h-3 w-3" />
             <span>Error</span>
           </div>
         )}
+
         {message.reasoning && (
-          <details className="mb-2 text-xs text-muted-foreground">
-            <summary className="cursor-pointer select-none">thinking</summary>
-            <div className="mt-1 whitespace-pre-wrap italic">{message.reasoning}</div>
+          <details className="text-[11px] text-muted-foreground/70 border border-border/20 rounded-lg px-2.5 py-1.5 bg-muted/10">
+            <summary className="cursor-pointer select-none font-medium">thinking</summary>
+            <div className="mt-1.5 whitespace-pre-wrap italic leading-relaxed">
+              {message.reasoning}
+            </div>
           </details>
         )}
-        {message.content.length > 0 &&
-          (isUser ? (
-            <div className="whitespace-pre-wrap">{message.content}</div>
-          ) : (
-            <div className="prose prose-sm prose-zinc max-w-none dark:prose-invert">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {message.content}
-              </ReactMarkdown>
+
+        {message.streaming && message.content.length === 0 && !message.toolCalls?.length ? (
+          <span className="inline-flex items-center gap-[3px]">
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 animate-bounce"
+              style={{ animationDelay: "0ms" }}
+            />
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 animate-bounce"
+              style={{ animationDelay: "150ms" }}
+            />
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 animate-bounce"
+              style={{ animationDelay: "300ms" }}
+            />
+          </span>
+        ) : (
+          message.content.length > 0 && (
+            <div
+              className={cn(
+                "prose prose-sm prose-zinc max-w-none dark:prose-invert",
+                "prose-p:my-2 prose-p:leading-relaxed prose-p:text-xs",
+                "prose-pre:my-2 prose-pre:text-xs",
+                "prose-code:text-xs prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none",
+                message.errored && "text-destructive",
+              )}
+            >
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
             </div>
-          ))}
+          )
+        )}
+
         {message.toolCalls && message.toolCalls.length > 0 && (
-          <div className="mt-2 flex flex-col gap-1.5">
+          <div className="flex flex-col gap-1.5">
             {message.toolCalls.map((call) => (
               <ToolCall key={call.callId} call={call} />
             ))}
           </div>
         )}
-        {message.streaming && message.content.length === 0 && !message.toolCalls?.length && (
-          <div className="flex gap-1">
-            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
-            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground [animation-delay:150ms]" />
-            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground [animation-delay:300ms]" />
+
+        {!message.streaming && message.content.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 pt-1">
+            {message.latencyMs !== undefined && (
+              <span className="h-5 rounded border border-border/30 bg-muted/5 px-1.5 font-mono text-[9px] text-muted-foreground/70">
+                {message.latencyMs}ms
+              </span>
+            )}
+            {onCopy && (
+              <button
+                type="button"
+                onClick={() => onCopy(message.content)}
+                className="h-6 w-6 flex items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-muted/30 transition-colors"
+                title="Copy to clipboard"
+              >
+                <Copy className="h-3 w-3" />
+              </button>
+            )}
+            {isLast && onRegenerate && (
+              <button
+                type="button"
+                onClick={onRegenerate}
+                className="h-6 w-6 flex items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-muted/30 transition-colors"
+                title="Regenerate response"
+              >
+                <RotateCcw className="h-3 w-3" />
+              </button>
+            )}
           </div>
         )}
       </div>

package/templates/web-chat/components/tool-call.tsx

@@ -44,18 +44,18 @@ export function ToolCall({ call }: { call: UiToolCall }) {
   return (
     <div
       className={cn(
-        "flex flex-col gap-1 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm",
+        "flex flex-col gap-1 rounded-lg border border-border/30 bg-muted/10 px-3 py-2 text-xs",
       )}
     >
       <div className="flex items-center gap-2">
         <StatusGlyph status={call.status} />
-        <span className="font-mono font-medium">{call.name}</span>
+        <span className="font-mono font-medium text-[11px]">{call.name}</span>
         {args.length > 0 && (
-          <span className="truncate font-mono text-xs text-muted-foreground">{args}</span>
+          <span className="truncate font-mono text-[10px] text-muted-foreground/70">{args}</span>
         )}
       </div>
       {result !== undefined && (
-        <div className="ml-6 truncate text-xs text-muted-foreground">
+        <div className="ml-6 truncate text-[10px] text-muted-foreground/70">
           → <span className="font-mono">{result}</span>
         </div>
       )}
@@ -66,13 +66,13 @@ export function ToolCall({ call }: { call: UiToolCall }) {
 function StatusGlyph({ status }: { status: UiToolCall["status"] }) {
   switch (status) {
     case "running":
-      return <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />;
+      return <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />;
     case "done":
-      return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
+      return <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />;
     case "error":
-      return <XCircle className="h-4 w-4 text-destructive" />;
+      return <XCircle className="h-3.5 w-3.5 text-destructive" />;
     case "approval":
-      return <HelpCircle className="h-4 w-4 text-amber-500" />;
+      return <HelpCircle className="h-3.5 w-3.5 text-amber-500" />;
     default:
       return null;
   }

package/templates/web-chat/lib/types.ts

@@ -8,6 +8,7 @@ export interface UiMessage {
   reasoning?: string;
   streaming?: boolean;
   errored?: boolean;
+  latencyMs?: number;
 }
 
 export interface UiToolCall {

package/templates/web-chat/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  devIndicators: false,
+};
 
 export default nextConfig;

package/templates/web-chat/package.json

@@ -21,6 +21,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.10.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/templates/web-chat/tailwind.config.ts

@@ -1,4 +1,6 @@
 import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
+import tailwindcssTypography from "@tailwindcss/typography";
 
 const config: Config = {
   darkMode: ["class"],
@@ -53,7 +55,7 @@ const config: Config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindcssAnimate, tailwindcssTypography],
 };
 
 export default config;