weifuwu 0.18.8 → 0.18.10

package/dist/index.js

@@ -5130,7 +5130,7 @@ function ensureCertificates(config) {
 import { createOpenAI as createOpenAI3 } from "@ai-sdk/openai";
 
 // opencode/rest.ts
-import { join as join4 } from "node:path";
+import { join as join5 } from "node:path";
 
 // ssr.ts
 import { createElement } from "react";
@@ -5489,9 +5489,112 @@ function layout(path2) {
   };
 }
 
+// tailwind.ts
+import { existsSync as existsSync3, mkdirSync as mkdirSync2, readFileSync as readFileSync3, writeFileSync } from "node:fs";
+import { join as join3, relative, resolve as resolve5 } from "node:path";
+
+// live.ts
+import chokidar from "chokidar";
+var clients = /* @__PURE__ */ new Set();
+function broadcastReload() {
+  for (const ws of clients) {
+    try {
+      ws.send("reload");
+    } catch {
+      clients.delete(ws);
+    }
+  }
+}
+function liveReload(opts) {
+  const r = new Router();
+  r.ws("/__weifuwu/livereload", {
+    open(ws) {
+      clients.add(ws);
+      ws.on("close", () => clients.delete(ws));
+      ws.on("error", () => clients.delete(ws));
+    }
+  });
+  const watcher = chokidar.watch(opts.dirs, {
+    ignored: /(^|[/\\])\.|node_modules|[/\\]\.weifuwu[/\\]/,
+    ignoreInitial: true
+  });
+  watcher.on("change", (path2) => {
+    if (!/\.tsx?$/.test(path2)) return;
+    clearCompileCache();
+    setTimeout(broadcastReload, 50);
+  });
+  r.close = () => {
+    watcher.close();
+    clients.clear();
+  };
+  return r;
+}
+
+// tailwind.ts
+var isDev2 = process.env.NODE_ENV !== "production";
+var extraSources = /* @__PURE__ */ new Set();
+function addTailwindSource(dir) {
+  extraSources.add(resolve5(dir));
+}
+function tailwind(dir) {
+  const cssDir = resolve5(dir);
+  const cssPath = join3(cssDir, "app.css");
+  let compiledCss = "";
+  let twWatcher = null;
+  return async (req, ctx, next) => {
+    const url = new URL(req.url);
+    if (!compiledCss) compiledCss = await compile(cssPath, cssDir);
+    const stylePath = (ctx.mountPath || "") + "/__wfw/style.css";
+    if (url.pathname === stylePath) {
+      return new Response(compiledCss || "", {
+        headers: { "content-type": "text/css; charset=utf-8" }
+      });
+    }
+    ctx.compiledTailwindCss = compiledCss;
+    if (isDev2 && !twWatcher) {
+      twWatcher = watchFile(cssPath, () => {
+        compiledCss = "";
+        broadcastReload();
+      });
+    }
+    return next(req, ctx);
+  };
+}
+async function compile(cssPath, cssDir) {
+  try {
+    if (!existsSync3(cssPath)) {
+      mkdirSync2(cssDir, { recursive: true });
+      writeFileSync(cssPath, '@import "tailwindcss"\n', "utf-8");
+    }
+    const { default: tailwindPlugin } = await import("@tailwindcss/postcss");
+    const { default: postcss } = await import("postcss");
+    let src = readFileSync3(cssPath, "utf-8");
+    src = `@source "./";
+${src}`;
+    for (const srcDir of extraSources) {
+      const rel = relative(cssDir, srcDir) || ".";
+      src = `@source "${rel.startsWith(".") ? rel : "./" + rel}";
+${src}`;
+    }
+    const result = await postcss([tailwindPlugin()]).process(src, { from: cssPath });
+    return result.css;
+  } catch (err) {
+    console.warn("Tailwind CSS processing failed:", err.message);
+    return "";
+  }
+}
+function watchFile(path2, onChange) {
+  let watcher = null;
+  import("chokidar").then((chokidar2) => {
+    watcher = chokidar2.default.watch(resolve5(path2), { persistent: false });
+    watcher.on("change", onChange);
+  });
+  return watcher;
+}
+
 // opencode/session.ts
 import { randomUUID as randomUUID2 } from "node:crypto";
-import { join as join3 } from "node:path";
+import { join as join4 } from "node:path";
 import { mkdir as mkdir2 } from "node:fs/promises";
 var sessions = pgTable("_opencode_sessions", {
   id: uuid("id"),
@@ -5528,7 +5631,7 @@ async function createSession(sql2, opts, cwd, mountPath) {
 }
 function computeSessionWorkspace(cwd, mountPath, sessionId) {
   const name = !mountPath || mountPath === "/" ? "default" : mountPath.replace(/^\//, "");
-  return join3(cwd, ".sessions", name, sessionId);
+  return join4(cwd, ".sessions", name, sessionId);
 }
 async function getSession(sql2, id3) {
   const { data: rows } = await sessions.readMany(sql2, { id: id3, active: true });
@@ -5744,8 +5847,8 @@ function createBashTool(ctx) {
 // opencode/tools/read.ts
 import { tool as tool4 } from "ai";
 import { z as z6 } from "zod";
-import { readFileSync as readFileSync3 } from "node:fs";
-import { resolve as resolve5 } from "node:path";
+import { readFileSync as readFileSync4 } from "node:fs";
+import { resolve as resolve6 } from "node:path";
 function createReadTool(ctx) {
   return tool4({
     description: "Read file contents. Supports offset and limit for reading specific line ranges.",
@@ -5755,11 +5858,11 @@ function createReadTool(ctx) {
       limit: z6.number().optional().describe("Number of lines to read")
     }),
     execute: async ({ path: path2, offset, limit }) => {
-      const resolved = resolve5(ctx.workspace, path2);
+      const resolved = resolve6(ctx.workspace, path2);
       if (!isPathAllowed(resolved, ctx.workspace, ctx.permissions)) {
         return { error: "Path not allowed", content: null, totalLines: 0 };
       }
-      const content = readFileSync3(resolved, "utf-8");
+      const content = readFileSync4(resolved, "utf-8");
       const lines = content.split("\n");
       const totalLines = lines.length;
       if (offset !== void 0) {
@@ -5786,8 +5889,8 @@ function createReadTool(ctx) {
 // opencode/tools/write.ts
 import { tool as tool5 } from "ai";
 import { z as z7 } from "zod";
-import { writeFileSync, mkdirSync as mkdirSync2 } from "node:fs";
-import { resolve as resolve6, dirname as dirname3 } from "node:path";
+import { writeFileSync as writeFileSync2, mkdirSync as mkdirSync3 } from "node:fs";
+import { resolve as resolve7, dirname as dirname3 } from "node:path";
 function createWriteTool(ctx) {
   return tool5({
     description: "Create or overwrite a file. Parent directories are created automatically.",
@@ -5796,12 +5899,12 @@ function createWriteTool(ctx) {
       content: z7.string().describe("File content")
     }),
     execute: async ({ path: path2, content }) => {
-      const resolved = resolve6(ctx.workspace, path2);
+      const resolved = resolve7(ctx.workspace, path2);
       if (!isPathAllowed(resolved, ctx.workspace, ctx.permissions)) {
         return { error: "Path not allowed" };
       }
-      mkdirSync2(dirname3(resolved), { recursive: true });
-      writeFileSync(resolved, content, "utf-8");
+      mkdirSync3(dirname3(resolved), { recursive: true });
+      writeFileSync2(resolved, content, "utf-8");
       return { path: path2, size: content.length };
     }
   });
@@ -5810,8 +5913,8 @@ function createWriteTool(ctx) {
 // opencode/tools/edit.ts
 import { tool as tool6 } from "ai";
 import { z as z8 } from "zod";
-import { readFileSync as readFileSync4, writeFileSync as writeFileSync2 } from "node:fs";
-import { resolve as resolve7 } from "node:path";
+import { readFileSync as readFileSync5, writeFileSync as writeFileSync3 } from "node:fs";
+import { resolve as resolve8 } from "node:path";
 function createEditTool(ctx) {
   return tool6({
     description: "Perform exact string replacements in a file. If oldString appears multiple times, provide more surrounding context.",
@@ -5822,18 +5925,18 @@ function createEditTool(ctx) {
       replaceAll: z8.boolean().default(false).describe("Replace all occurrences")
     }),
     execute: async ({ path: path2, oldString, newString, replaceAll }) => {
-      const resolved = resolve7(ctx.workspace, path2);
+      const resolved = resolve8(ctx.workspace, path2);
       if (!isPathAllowed(resolved, ctx.workspace, ctx.permissions)) {
         return { error: "Path not allowed" };
       }
-      const content = readFileSync4(resolved, "utf-8");
+      const content = readFileSync5(resolved, "utf-8");
       if (replaceAll) {
         if (!content.includes(oldString)) {
           return { error: "oldString not found in file", replaced: 0 };
         }
         const count = content.split(oldString).length - 1;
         const result2 = content.replaceAll(oldString, newString);
-        writeFileSync2(resolved, result2, "utf-8");
+        writeFileSync3(resolved, result2, "utf-8");
         return { path: path2, replaced: count };
       }
       const firstIdx = content.indexOf(oldString);
@@ -5845,7 +5948,7 @@ function createEditTool(ctx) {
         return { error: "Found multiple matches. Provide more surrounding context in oldString.", replaced: 0 };
       }
       const result = content.replace(oldString, newString);
-      writeFileSync2(resolved, result, "utf-8");
+      writeFileSync3(resolved, result, "utf-8");
       return { path: path2, replaced: 1 };
     }
   });
@@ -5855,8 +5958,8 @@ function createEditTool(ctx) {
 import { tool as tool7 } from "ai";
 import { z as z9 } from "zod";
 import { execFileSync } from "node:child_process";
-import { resolve as resolve8 } from "node:path";
-import { existsSync as existsSync3 } from "node:fs";
+import { resolve as resolve9 } from "node:path";
+import { existsSync as existsSync4 } from "node:fs";
 function createGrepTool(ctx) {
   return tool7({
     description: "Search file contents using regex. Supports file type filtering and context lines.",
@@ -5867,10 +5970,10 @@ function createGrepTool(ctx) {
       context: z9.number().default(0).describe("Number of context lines before and after each match")
     }),
     execute: async ({ pattern, include, path: path2, context }) => {
-      const searchDir = path2 ? resolve8(ctx.workspace, path2) : ctx.workspace;
+      const searchDir = path2 ? resolve9(ctx.workspace, path2) : ctx.workspace;
       try {
         let stdout;
-        if (existsSync3("/usr/bin/rg") || existsSync3("/usr/local/bin/rg")) {
+        if (existsSync4("/usr/bin/rg") || existsSync4("/usr/local/bin/rg")) {
           const args = ["-n"];
           if (context > 0) args.push("-C", String(context));
           if (include) args.push("-g", include);
@@ -5899,7 +6002,7 @@ function createGrepTool(ctx) {
 import { tool as tool8 } from "ai";
 import { z as z10 } from "zod";
 import { execFileSync as execFileSync2 } from "node:child_process";
-import { resolve as resolve9 } from "node:path";
+import { resolve as resolve10 } from "node:path";
 function createGlobTool(ctx) {
   return tool8({
     description: "Find files matching a glob pattern.",
@@ -5908,7 +6011,7 @@ function createGlobTool(ctx) {
       path: z10.string().optional().describe("Subdirectory relative to workspace")
     }),
     execute: async ({ pattern, path: path2 }) => {
-      const searchDir = path2 ? resolve9(ctx.workspace, path2) : ctx.workspace;
+      const searchDir = path2 ? resolve10(ctx.workspace, path2) : ctx.workspace;
       try {
         const stdout = execFileSync2("find", [
           searchDir,
@@ -6124,8 +6227,9 @@ async function buildRouter4(deps) {
   });
   try {
     const uiDir = new URL("../opencode/ui/", import.meta.url).pathname;
-    router.use(layout(join4(uiDir, "layout.tsx")));
-    router.get("/", ssr(join4(uiDir, "page.tsx")));
+    addTailwindSource(uiDir);
+    router.use(layout(join5(uiDir, "layout.tsx")));
+    router.get("/", ssr(join5(uiDir, "page.tsx")));
   } catch (e) {
     console.warn("[opencode] UI not available:", e);
   }
@@ -6133,17 +6237,17 @@ async function buildRouter4(deps) {
 }
 
 // opencode/ws.ts
-var clients = /* @__PURE__ */ new WeakMap();
+var clients2 = /* @__PURE__ */ new WeakMap();
 function createWSHandler2(deps) {
   const { sql: sql2, model, workspace, systemPrompt, skills, skillsRegistry, permissions, pendingQuestions } = deps;
   return {
     open(ws, ctx) {
       const userId = ctx.user?.id ?? 0;
       const mountPath = ctx.mountPath ?? "";
-      clients.set(ws, { userId, mountPath });
+      clients2.set(ws, { userId, mountPath });
     },
     async message(ws, ctx, data) {
-      const client = clients.get(ws);
+      const client = clients2.get(ws);
       if (!client) return;
       let msg;
       try {
@@ -6240,17 +6344,17 @@ function createWSHandler2(deps) {
       }
     },
     close(ws) {
-      const client = clients.get(ws);
+      const client = clients2.get(ws);
       if (client) {
         client.abortController?.abort();
-        clients.delete(ws);
+        clients2.delete(ws);
       }
     },
     error(ws, _ctx, _err) {
-      const client = clients.get(ws);
+      const client = clients2.get(ws);
       if (client) {
         client.abortController?.abort();
-        clients.delete(ws);
+        clients2.delete(ws);
       }
     }
   };
@@ -6260,7 +6364,7 @@ function createWSHandler2(deps) {
 import { readFile } from "node:fs/promises";
 import { glob } from "node:fs/promises";
 import { homedir } from "node:os";
-import { resolve as resolve10 } from "node:path";
+import { resolve as resolve11 } from "node:path";
 import { parse as parseYaml } from "yaml";
 var SEARCH_DIRS = [
   (ws) => `${ws}/.opencode/skills`,
@@ -6298,7 +6402,7 @@ async function scanDir(dir) {
   try {
     const files = [];
     for await (const entry of glob("*/SKILL.md", { cwd: dir })) {
-      const skill = await parseSkillFile(resolve10(dir, entry));
+      const skill = await parseSkillFile(resolve11(dir, entry));
       if (skill) files.push(skill);
     }
     return files;
@@ -6633,8 +6737,8 @@ function analytics(options) {
 
 // preferences.ts
 import { readFile as readFile2 } from "node:fs/promises";
-import { existsSync as existsSync4 } from "node:fs";
-import { join as join5, resolve as resolve11 } from "node:path";
+import { existsSync as existsSync5 } from "node:fs";
+import { join as join6, resolve as resolve12 } from "node:path";
 var defaults = {
   locale: { default: "en", cookie: "locale", fromAcceptLanguage: true },
   theme: { default: "system", cookie: "theme" }
@@ -6683,7 +6787,7 @@ async function handlePrefSwitch(req, value, cookieName, load) {
   });
 }
 function preferences(options) {
-  const dir = options.dir ? resolve11(options.dir) : void 0;
+  const dir = options.dir ? resolve12(options.dir) : void 0;
   const localeOpts = { ...defaults.locale, ...options.locale };
   const themeOpts = { ...defaults.theme, ...options.theme };
   const cache2 = /* @__PURE__ */ new Map();
@@ -6695,8 +6799,8 @@ function preferences(options) {
     if (!validLocale(locale)) return {};
     const cached = cache2.get(locale);
     if (cached) return cached;
-    const filePath = join5(dir, `${locale}.json`);
-    if (!existsSync4(filePath)) return {};
+    const filePath = join6(dir, `${locale}.json`);
+    if (!existsSync5(filePath)) return {};
     try {
       const content = await readFile2(filePath, "utf-8");
       const data = JSON.parse(content);
@@ -8116,102 +8220,6 @@ function registerWorker(url) {
   };
 }
 
-// live.ts
-import chokidar from "chokidar";
-var clients2 = /* @__PURE__ */ new Set();
-function broadcastReload() {
-  for (const ws of clients2) {
-    try {
-      ws.send("reload");
-    } catch {
-      clients2.delete(ws);
-    }
-  }
-}
-function liveReload(opts) {
-  const r = new Router();
-  r.ws("/__weifuwu/livereload", {
-    open(ws) {
-      clients2.add(ws);
-      ws.on("close", () => clients2.delete(ws));
-      ws.on("error", () => clients2.delete(ws));
-    }
-  });
-  const watcher = chokidar.watch(opts.dirs, {
-    ignored: /(^|[/\\])\.|node_modules|[/\\]\.weifuwu[/\\]/,
-    ignoreInitial: true
-  });
-  watcher.on("change", (path2) => {
-    if (!/\.tsx?$/.test(path2)) return;
-    clearCompileCache();
-    setTimeout(broadcastReload, 50);
-  });
-  r.close = () => {
-    watcher.close();
-    clients2.clear();
-  };
-  return r;
-}
-
-// tailwind.ts
-import { existsSync as existsSync5, mkdirSync as mkdirSync3, readFileSync as readFileSync5, writeFileSync as writeFileSync3 } from "node:fs";
-import { relative, resolve as resolve12 } from "node:path";
-var isDev2 = process.env.NODE_ENV !== "production";
-function tailwind(cssPath, scanDir2) {
-  let compiledCss = "";
-  let twWatcher = null;
-  return async (req, ctx, next) => {
-    const url = new URL(req.url);
-    if (!compiledCss) {
-      compiledCss = await compile(cssPath, scanDir2);
-    }
-    if (url.pathname === "/__wfw/style.css") {
-      return new Response(compiledCss || "", {
-        headers: { "content-type": "text/css; charset=utf-8" }
-      });
-    }
-    ctx.compiledTailwindCss = compiledCss;
-    if (isDev2 && !twWatcher) {
-      twWatcher = watchFile(cssPath, () => {
-        compiledCss = "";
-      });
-    }
-    return next(req, ctx);
-  };
-}
-async function compile(cssPath, scanDir2) {
-  try {
-    const inputFile = resolve12(cssPath);
-    if (!existsSync5(inputFile)) {
-      mkdirSync3(dirname4(inputFile), { recursive: true });
-      writeFileSync3(inputFile, '@import "tailwindcss"\n', "utf-8");
-    }
-    const { default: tailwindPlugin } = await import("@tailwindcss/postcss");
-    const { default: postcss } = await import("postcss");
-    let src = readFileSync5(inputFile, "utf-8");
-    const scanSource = scanDir2 ? relative(dirname4(inputFile), scanDir2) || "." : ".";
-    const sourcePath = scanSource === "." ? "./" : `./${scanSource}/`;
-    src = `@source "${sourcePath}";
-${src}`;
-    const result = await postcss([tailwindPlugin()]).process(src, { from: inputFile });
-    return result.css;
-  } catch (err) {
-    console.warn("Tailwind CSS processing failed:", err.message);
-    return "";
-  }
-}
-function dirname4(p) {
-  return p.substring(0, p.lastIndexOf("/")) || "/";
-}
-function watchFile(path2, onChange) {
-  let watcher = null;
-  import("chokidar").then((chokidar2) => {
-    watcher = chokidar2.default.watch(resolve12(path2), { persistent: false });
-    watcher.on("change", onChange);
-  });
-  return watcher;
-}
-
 // not-found.ts
 function notFound(path2) {
   return async (req, ctx) => {

package/dist/live.d.ts

@@ -1,4 +1,5 @@
 import { Router } from './router.ts';
+export declare function broadcastReload(): void;
 export declare function liveReload(opts: {
     dirs: string[];
 }): Router & {

package/dist/tailwind.d.ts

@@ -1,2 +1,3 @@
 import type { Middleware } from './types.ts';
-export declare function tailwind(cssPath: string, scanDir?: string): Middleware;
+export declare function addTailwindSource(dir: string): void;
+export declare function tailwind(dir: string): Middleware;

package/opencode/ui/app.css

@@ -0,0 +1 @@
+@import "tailwindcss"

package/opencode/ui/layout.tsx

@@ -0,0 +1,14 @@
+export default function RootLayout({ children }: { children: any }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Opencode Chat</title>
+      </head>
+      <body>
+        <div id="__weifuwu_root">{children}</div>
+      </body>
+    </html>
+  )
+}

package/opencode/ui/page.tsx

@@ -0,0 +1,294 @@
+import { useState, useRef, useEffect } from 'react'
+
+interface ToolCallEvent { toolName: string; input: unknown }
+interface ToolResultEvent { toolName: string; output: unknown }
+interface SessionItem { id: number; title: string; created_at?: string }
+interface MessageItem { role: string; content: string; toolCalls?: ToolCallEvent[]; toolResults?: ToolResultEvent[] }
+
+function formatDate(s: string) {
+  const d = new Date(s)
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+function firstLine(text: string) {
+  return text.split('\n')[0].slice(0, 48) || 'Empty'
+}
+
+export default function Page() {
+  const [sessions, setSessions] = useState<SessionItem[]>([])
+  const [currentId, setCurrentId] = useState<number | null>(null)
+  const [messages, setMessages] = useState<MessageItem[]>([])
+  const [input, setInput] = useState('')
+  const [streaming, setStreaming] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const abortRef = useRef<AbortController | null>(null)
+  const textRef = useRef('')
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => { fetch('/opencode/sessions').then(r => r.json()).then(setSessions).catch(() => {}) }, [])
+  useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: 'smooth' }) }, [messages, streaming])
+
+  async function createSession() {
+    setError('')
+    const res = await fetch('/opencode/sessions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) })
+    if (!res.ok) { setError('Failed'); return }
+    const s = await res.json()
+    setSessions(p => [s, ...p])
+    setCurrentId(s.id); setMessages([]); setStreaming(''); textRef.current = ''
+    setTimeout(() => inputRef.current?.focus(), 100)
+  }
+
+  async function selectSession(id: number) {
+    abortRef.current?.abort()
+    setCurrentId(id); setStreaming(''); textRef.current = ''
+    const res = await fetch(`/opencode/sessions/${id}`)
+    if (!res.ok) { setError('Failed to load'); return }
+    const { messages: msgs } = await res.json() as any
+    setMessages(msgs.map((m: any) => ({
+      role: m.role, content: m.content || '',
+      toolCalls: Array.isArray(m.tool_calls) ? m.tool_calls : undefined,
+      toolResults: Array.isArray(m.tool_results) ? m.tool_results : undefined,
+    })))
+    setTimeout(() => inputRef.current?.focus(), 100)
+  }
+
+  function deleteSession(e: React.MouseEvent, id: number) {
+    e.stopPropagation()
+    fetch('/opencode/sessions/' + id, { method: 'DELETE' })
+    setSessions(p => p.filter(s => s.id !== id))
+    if (currentId === id) { setCurrentId(null); setMessages([]) }
+  }
+
+  async function sendMessage() {
+    const content = input.trim()
+    if (!content || !currentId || loading) return
+    setError('')
+    setMessages(p => [...p, { role: 'user', content }])
+    setInput(''); setLoading(true); setStreaming(''); textRef.current = ''
+    abortRef.current?.abort()
+    const controller = new AbortController()
+    abortRef.current = controller
+
+    try {
+      const res = await fetch(`/opencode/sessions/${currentId}/message`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }), signal: controller.signal,
+      })
+      if (!res.ok) { setError('Request failed'); setLoading(false); return }
+
+      const reader = res.body!.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        buffer += decoder.decode(value, { stream: true })
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || ''
+
+        for (const line of lines) {
+          if (line.startsWith('event: ')) continue
+          if (!line.startsWith('data: ')) continue
+          try {
+            const d = JSON.parse(line.slice(6))
+            switch (d.type) {
+              case 'text-delta':
+                textRef.current += d.text || ''
+                setStreaming(textRef.current)
+                break
+              case 'tool-call':
+                setMessages(p => {
+                  const last = p[p.length - 1]
+                  if (last?.role === 'assistant') {
+                    const tcs = last.toolCalls || []
+                    return [...p.slice(0, -1), { ...last, toolCalls: [...tcs, { toolName: d.toolName, input: d.input }] }]
+                  }
+                  return [...p, { role: 'assistant', content: '', toolCalls: [{ toolName: d.toolName, input: d.input }] }]
+                })
+                break
+              case 'tool-result':
+                setMessages(p => {
+                  const last = p[p.length - 1]
+                  if (last?.role === 'assistant') {
+                    const trs = last.toolResults || []
+                    return [...p.slice(0, -1), { ...last, toolResults: [...trs, { toolName: d.toolName, output: d.output }] }]
+                  }
+                  return [...p, { role: 'assistant', content: '', toolResults: [{ toolName: d.toolName, output: d.output }] }]
+                })
+                break
+              case 'finish':
+                const finalContent = textRef.current
+                setMessages(p => {
+                  const last = p[p.length - 1]
+                  if (last?.role === 'assistant' && !last.content && finalContent) {
+                    return [...p.slice(0, -1), { ...last, content: finalContent }]
+                  }
+                  if (last?.role === 'assistant' && last.content) return p
+                  return [...p, { role: 'assistant', content: finalContent }]
+                })
+                setStreaming(''); textRef.current = ''; setLoading(false)
+                setTimeout(() => inputRef.current?.focus(), 50)
+                return
+            }
+          } catch {}
+        }
+      }
+    } catch (e: any) {
+      if (e.name !== 'AbortError') setError(e.message || 'Error')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div className="flex h-screen font-sans antialiased bg-zinc-950 text-zinc-100">
+      {/* Sidebar */}
+      <aside className="w-64 flex flex-col border-r border-zinc-800 bg-zinc-900/50 shrink-0">
+        <div className="p-3 border-b border-zinc-800">
+          <button onClick={createSession}
+            className="w-full flex items-center justify-center gap-2 py-2 px-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded-lg text-sm transition-colors cursor-pointer">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4"/></svg>
+            New Chat
+          </button>
+        </div>
+        <nav className="flex-1 overflow-y-auto p-2 space-y-0.5">
+          {sessions.length === 0 && (
+            <div className="text-xs text-zinc-600 text-center py-8">No sessions yet</div>
+          )}
+          {sessions.map(s => (
+            <div key={s.id}
+              onClick={() => selectSession(s.id)}
+              className={`group flex items-center gap-2 p-2 rounded-lg cursor-pointer text-sm transition-colors ${
+                currentId === s.id ? 'bg-zinc-700/60 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200'
+              }`}>
+              <svg className="w-4 h-4 shrink-0 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
+              <span className="truncate flex-1">{s.title || `Session ${s.id}`}</span>
+              <button onClick={e => deleteSession(e, s.id)}
+                className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-zinc-600 transition-all cursor-pointer">
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+              </button>
+            </div>
+          ))}
+        </nav>
+      </aside>
+
+      {/* Main */}
+      <main className="flex-1 flex flex-col min-w-0">
+        {/* Header */}
+        {currentId && (
+          <header className="flex items-center gap-2 px-5 py-2.5 border-b border-zinc-800 bg-zinc-900/30">
+            <svg className="w-4 h-4 text-emerald-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+            <span className="text-xs text-zinc-500 font-mono">opencode</span>
+            <span className="text-xs text-zinc-600 mx-1">/</span>
+            <span className="text-sm text-zinc-300 truncate">{sessions.find(s => s.id === currentId)?.title || `Session ${currentId}`}</span>
+          </header>
+        )}
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="max-w-3xl mx-auto px-4 py-6 space-y-4">
+            {!currentId && (
+              <div className="flex flex-col items-center justify-center h-[70vh] text-zinc-600">
+                <svg className="w-12 h-12 mb-4 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
+                <p className="text-sm mb-2">Select a session or create a new one</p>
+                <button onClick={createSession} className="mt-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg text-sm transition-colors cursor-pointer">
+                  + New Chat
+                </button>
+              </div>
+            )}
+
+            {messages.map((m, i) => (
+              <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                <div className={`max-w-[75%] rounded-2xl px-4 py-2.5 leading-relaxed whitespace-pre-wrap text-sm ${
+                  m.role === 'user'
+                    ? 'bg-indigo-600 text-white rounded-br-md'
+                    : 'bg-zinc-800/80 text-zinc-200 rounded-bl-md border border-zinc-700/50'
+                }`}>
+                  {m.content || <span className="text-zinc-500 italic">No response</span>}
+                  {m.toolCalls?.map((tc, j) => (
+                    <details key={j} className="mt-2 rounded-lg overflow-hidden bg-black/20 border border-zinc-700/50">
+                      <summary className="px-3 py-1.5 text-xs text-zinc-400 cursor-pointer hover:text-zinc-200 select-none flex items-center gap-1.5">
+                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                        {tc.toolName}
+                      </summary>
+                      <pre className="px-3 py-2 text-xs text-zinc-400 overflow-x-auto">{JSON.stringify(tc.input, null, 2)}</pre>
+                    </details>
+                  ))}
+                  {m.toolResults?.map((tr, j) => (
+                    <details key={j} className="mt-1.5 rounded-lg overflow-hidden bg-black/20 border border-zinc-700/50">
+                      <summary className="px-3 py-1.5 text-xs text-zinc-400 cursor-pointer hover:text-zinc-200 select-none flex items-center gap-1.5">
+                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                        {tr.toolName} result
+                      </summary>
+                      <pre className="px-3 py-2 text-xs text-zinc-400 overflow-x-auto max-h-48">{JSON.stringify(tr.output, null, 2)}</pre>
+                    </details>
+                  ))}
+                </div>
+              </div>
+            ))}
+
+            {streaming && (
+              <div className="flex justify-start">
+                <div className="max-w-[75%] rounded-2xl px-4 py-2.5 bg-zinc-800/80 text-zinc-200 rounded-bl-md border border-zinc-700/50 leading-relaxed whitespace-pre-wrap text-sm">
+                  {streaming}<span className="inline-block w-1.5 h-4 bg-indigo-400 ml-0.5 animate-pulse rounded-sm" />
+                </div>
+              </div>
+            )}
+
+            {loading && !streaming && (
+              <div className="flex justify-start">
+                <div className="flex items-center gap-2 px-4 py-3 bg-zinc-800/60 rounded-2xl rounded-bl-md border border-zinc-700/40">
+                  <div className="flex gap-1">
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {error && (
+              <div className="flex justify-center">
+                <div className="flex items-center gap-2 px-4 py-2 bg-red-900/30 text-red-400 rounded-lg text-xs border border-red-800/40">
+                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                  {error}
+                </div>
+              </div>
+            )}
+
+            <div ref={bottomRef} />
+          </div>
+        </div>
+
+        {/* Input */}
+        <div className="border-t border-zinc-800 bg-zinc-900/50">
+          <div className="max-w-3xl mx-auto px-4 py-3">
+            <div className="flex items-end gap-2 bg-zinc-800/80 rounded-xl border border-zinc-700/50 px-3 py-2 focus-within:border-zinc-500 transition-colors">
+              <input ref={inputRef}
+                value={input}
+                onChange={e => setInput(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage() } }}
+                placeholder={currentId ? 'Type a message...' : 'Create a session first'}
+                disabled={!currentId || loading}
+                className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-500 outline-none resize-none disabled:opacity-40"
+              />
+              <button onClick={sendMessage} disabled={!currentId || loading || !input.trim()}
+                className="flex items-center justify-center p-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:bg-zinc-700 disabled:text-zinc-500 text-white transition-colors cursor-pointer disabled:cursor-default shrink-0">
+                {loading ? (
+                  <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
+                ) : (
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19V5m0 0l-7 7m7-7l7 7"/></svg>
+                )}
+              </button>
+            </div>
+            {currentId && (
+              <p className="text-[10px] text-zinc-600 text-center mt-1.5">Enter to send</p>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weifuwu",
-  "version": "0.18.8",
+  "version": "0.18.10",
   "description": "Web-standard HTTP framework for Node.js — (req, ctx) => Response",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,6 +14,7 @@
   "files": [
     "dist/",
     "cli.ts",
+    "opencode/ui/",
     "README.md",
     "LICENSE"
   ],