@monkey-mini-app/dsh-mini-app 0.1.0

package/skills/monkey-mini-app/templates/monitor/ui.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from "react";
+
+import {
+  AppShell,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Icon,
+  PageHeader,
+  Progress,
+  Sparkline,
+  StatCard,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@monkey-mini-app/ui";
+import { useDashboardApi } from "@monkeyagent/host";
+
+type Snapshot = {
+  hostname?: string;
+  platform?: string;
+  arch?: string;
+  loadavg?: Record<string, number>;
+  uptimeSec?: number;
+  collectedAt: number;
+  cpu: { model: string; count: number };
+  processes: { pid: string; cpu: number; mem: number; name: string }[];
+  memory: { total: number; used: number; free: number; usedPct: number };
+  disk: { total: string; used: string; free: string; usedPct: number } | null;
+};
+
+export default function Ui() {
+  const { call } = useDashboardApi();
+  const [snap, setSnap] = useState<Snapshot | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [memHist, setMemHist] = useState<number[]>([]);
+  const [loadHist, setLoadHist] = useState<number[]>([]);
+
+  // ⭐ 关键：轮询 —— 每 2s 拉一次；页面隐藏（或在后台）就停止，避免空跑。
+  //         busy 防止上一帧未回再发下一帧；alive 防组件卸载后 setState。
+  useEffect(() => {
+    let alive = true;
+    let busy = false;
+    async function tick() {
+      if (busy) return;
+      busy = true;
+      try {
+        const next = (await call("getSnapshot", {})) as Snapshot;
+        if (!alive) return;
+        setSnap(next);
+        setError(null);
+        setMemHist((prev) => prev.concat(next.memory.usedPct).slice(-48));
+        const load = Number(next.loadavg?.["1m"] ?? 0);
+        setLoadHist((prev) => prev.concat(load).slice(-48));
+      } catch (e) {
+        if (alive) setError(String((e as Error)?.message || e));
+      } finally {
+        busy = false;
+      }
+    }
+    void tick();
+    const id = setInterval(() => void tick(), 2000);
+    const stop = () => {
+      if (document.hidden) clearInterval(id);
+    };
+    document.addEventListener("visibilitychange", stop);
+    return () => {
+      alive = false;
+      clearInterval(id);
+      document.removeEventListener("visibilitychange", stop);
+    };
+  }, [call]);
+
+  const procs = snap?.processes ?? [];
+  const load = snap?.loadavg;
+  const loadMax = Math.max(4, ...(loadHist.length ? loadHist : [1]));
+  const memPct = snap?.memory.usedPct ?? 0;
+
+  return (
+    <AppShell header={<PageHeader title="系统监控" description={snap ? `${snap.hostname ?? "本机"} · 每 2 秒刷新` : "正在读取本机指标…"} />}>
+      <div className="flex h-full min-h-0 flex-col gap-3 overflow-y-auto">
+        {error && <p className="text-sm" style={{ color: "var(--destructive)" }}>{error}</p>}
+
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+          <StatCard title="CPU" value={snap ? `${snap.cpu.count} 核` : "—"}>
+            <span className="text-xs text-muted-foreground">{snap?.cpu.model || ""}</span>
+          </StatCard>
+          <StatCard title="平均负载" value={load ? Number(load["1m"]).toFixed(2) : "—"} delta={snap ? "1 / 5 / 15 分钟" : ""}>
+            <span className="text-xs text-muted-foreground">已运行 {fmtUptime(snap?.uptimeSec ?? 0)}</span>
+          </StatCard>
+          <StatCard title="内存" value={`${memPct}%`} delta={snap ? `${fmtBytes(snap.memory.used)} / ${fmtBytes(snap.memory.total)}` : ""} />
+          <StatCard title="磁盘 /" value={snap?.disk ? `${snap.disk.usedPct}%` : "—"} delta={snap?.disk ? `${snap.disk.used} / ${snap.disk.total}` : ""} />
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>内存压力 (%)</CardTitle>
+              <CardDescription>最近 {memHist.length} 次 · 每 2 秒</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3">
+              <Sparkline data={memHist.map((v) => ({ value: v }))} />
+              <Progress value={memPct} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>负载（1 分钟）</CardTitle>
+              <CardDescription>峰值 {loadMax.toFixed(2)}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Sparkline data={loadHist.map((v) => ({ value: v }))} />
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>进程</CardTitle>
+            <CardDescription>按 CPU 排序 · 跟随刷新</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {!procs.length ? (
+              <span className="text-sm text-muted-foreground">还没有进程列表。</span>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-20">PID</TableHead>
+                    <TableHead className="w-24">CPU%</TableHead>
+                    <TableHead className="w-24">内存%</TableHead>
+                    <TableHead>进程</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {procs.map((p) => (
+                    <TableRow key={p.pid}>
+                      <TableCell className="font-mono">{p.pid}</TableCell>
+                      <TableCell>{p.cpu.toFixed(1)}</TableCell>
+                      <TableCell>{p.mem.toFixed(1)}</TableCell>
+                      <TableCell className="max-w-[420px] truncate">{p.name}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
+  );
+}
+
+function fmtBytes(n: number): string {
+  if (!Number.isFinite(n) || n <= 0) return "—";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return n.toFixed(i ? 1 : 0) + units[i];
+}
+
+function fmtUptime(sec: number): string {
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return h ? `${h}h ${m}m` : `${m}m`;
+}

package/skills/monkey-mini-app/templates/review/main.api.ts

@@ -0,0 +1,68 @@
+import { defineDashboard } from "@monkeyagent/dashboard";
+
+// ⭐ 关键：StatusBadge / health 类组件认的都是小写状态词（pass|fail|blocked|flaky|running|pending），
+//         不要用 "PASS"/"FAIL" 之类大写 —— 会落到默认 pending 灰色、颜色全错。
+type CaseStatus = "pass" | "fail" | "blocked";
+type TestCase = { id: string; name: string; status: CaseStatus; duration: number };
+type LogLine = { level: "info" | "debug" | "warn" | "error"; text: string };
+
+const DEFAULT_BEFORE = `function fetchWithRetry(url) {
+  const res = fetch(url); // 网络错误直接抛，无重试
+  if (!res.ok) throw new Error("HTTP " + res.status);
+  return res;
+}`;
+
+const DEFAULT_AFTER = `function fetchWithRetry(url, retries = 2) {
+  let lastErr;
+  for (let i = 0; i <= retries; i++) {
+    try {
+      const res = fetch(url);
+      if (res.ok) return res;
+      lastErr = new Error("HTTP " + res.status);
+    } catch (e) {
+      lastErr = e;
+    }
+  }
+  throw lastErr;
+}`;
+
+const CASES: TestCase[] = [
+  { id: "TC-01", name: "正常请求返回", status: "pass", duration: 42 },
+  { id: "TC-02", name: "一次失败后重试成功", status: "pass", duration: 310 },
+  { id: "TC-03", name: "重试耗尽抛错", status: "fail", duration: 1204 },
+  { id: "TC-04", name: "非 2xx 状态码处理", status: "blocked", duration: 0 },
+];
+
+export default defineDashboard({
+  name: "修复基准",
+  description: "编辑 → diff 对比 → 用例表格，改完写回",
+  api: {
+    async get(ctx) {
+      const saved = await ctx.storage.get("after");
+      return {
+        before: DEFAULT_BEFORE,
+        after: typeof saved === "string" && saved ? saved : DEFAULT_AFTER,
+        cases: CASES,
+        logs: [
+          { level: "info", text: "[10:00:01] 复现：无网络时 fetchWithRetry 直接抛错" },
+          { level: "info", text: "[10:00:02] 分析：缺少异常捕获与重试逻辑" },
+          { level: "debug", text: "[10:00:03] 方案：增加 retries 参数 + try/catch 循环" },
+          { level: "warn", text: "[10:00:04] 回归结果：2 通过 / 1 失败 / 1 阻塞" },
+        ] as LogLine[],
+        savedAt: (await ctx.storage.get("savedAt")) || 0,
+      };
+    },
+    async save(ctx, args?: { after?: string }) {
+      const code = String(args?.after ?? "").trim();
+      if (!code) throw new Error("代码不能为空");
+      await ctx.storage.set("after", code);
+      await ctx.storage.set("savedAt", Date.now());
+      return { ok: true, savedAt: Date.now() };
+    },
+    async reset(ctx) {
+      await ctx.storage.set("after", DEFAULT_AFTER);
+      await ctx.storage.set("savedAt", 0);
+      return { ok: true, savedAt: 0 };
+    },
+  },
+});

package/skills/monkey-mini-app/templates/review/manifest.json

@@ -0,0 +1,9 @@
+{
+  "id": "com.example.review",
+  "name": "修复基准",
+  "description": "编辑 → diff → 用例表格，改完写回",
+  "version": "0.1.0",
+  "entry": "ui.tsx",
+  "theme": { "followsHost": true },
+  "acronym": "XF"
+}

package/skills/monkey-mini-app/templates/review/ui.tsx

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  AppShell,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CodeEditor,
+  type ColumnDef,
+  DataGrid,
+  DiffViewer,
+  FilterBar,
+  Icon,
+  LogViewer,
+  PageHeader,
+  StatusBadge,
+} from "@monkey-mini-app/ui";
+import { useDashboardApi } from "@monkeyagent/host";
+
+type LogLine = { level: string; text: string };
+type TestCase = { id: string; name: string; status: "pass" | "fail" | "blocked"; duration: number };
+
+function fmtTime(ts: number) {
+  if (!ts) return "尚未保存";
+  const d = new Date(ts);
+  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+export default function Ui() {
+  const { call } = useDashboardApi();
+  const [before, setBefore] = useState("");
+  const [after, setAfter] = useState("");
+  const [cases, setCases] = useState<TestCase[]>([]);
+  const [logs, setLogs] = useState<LogLine[]>([]);
+  const [savedAt, setSavedAt] = useState(0);
+  const [status, setStatus] = useState<"all" | TestCase["status"]>("all");
+  const [dirty, setDirty] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setError(null);
+    try {
+      const pack = (await call("get", {})) as { before: string; after: string; cases: TestCase[]; logs: LogLine[]; savedAt: number };
+      setBefore(pack?.before ?? "");
+      setAfter(pack?.after ?? "");
+      setCases(Array.isArray(pack?.cases) ? pack.cases : []);
+      setLogs(Array.isArray(pack?.logs) ? pack.logs : []);
+      setSavedAt(pack?.savedAt ?? 0);
+      setDirty(false);
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    }
+  }, [call]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  async function act(job: () => Promise<unknown>) {
+    setError(null);
+    try {
+      await job();
+      await refresh();
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    }
+  }
+
+  const filtered = status === "all" ? cases : cases.filter((c) => c.status === status);
+
+  // ⭐ 关键：DataGrid 的列用 meta 声明排序/列搜索；StatusBadge 认小写状态
+  const columns: ColumnDef<TestCase>[] = [
+    { accessorKey: "id", header: "ID", meta: { sort: true, search: "text" } },
+    { accessorKey: "name", header: "用例", meta: { sort: true, search: "text" } },
+    {
+      accessorKey: "status",
+      header: "状态",
+      meta: { sort: true, search: "select" },
+      cell: ({ getValue }) => <StatusBadge status={String(getValue())} />,
+    },
+    {
+      accessorKey: "duration",
+      header: "耗时 (ms)",
+      meta: { sort: true, search: "number" },
+      cell: ({ getValue }) => String(getValue()),
+    },
+  ];
+
+  return (
+    <AppShell header={<PageHeader title="修复基准" description="编辑 → diff → 用例表格，改完写回" />}>
+      <div className="flex h-full min-h-0 flex-col gap-3 overflow-y-auto">
+        {error && <p className="text-sm" style={{ color: "var(--destructive)" }}>{error}</p>}
+
+        <Card>
+          <CardHeader>
+            <CardTitle>编辑</CardTitle>
+            <CardDescription>修改后保存，diff 实时刷新 · {fmtTime(savedAt)}{dirty ? " · 未保存" : ""}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CodeEditor value={after} onChange={(v) => { setAfter(v); setDirty(true); }} language="ts" height="240px" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Diff 对比</CardTitle>
+            <CardDescription>before → after</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {/* ⭐ 关键：DiffViewer 用 original/modified（不是老版的 oldText/newText） */}
+            <DiffViewer original={before} modified={after} mode="unified" fileName="fetchWithRetry.ts" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>用例结果</CardTitle>
+            <CardDescription>排序 / 列搜索 / 分页自带</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FilterBar>
+              {( ["all", "pass", "fail", "blocked"] as const ).map((s) => (
+                <Button key={s} size="sm" variant={status === s ? "default" : "outline"} onClick={() => setStatus(s)}>
+                  {s === "all" ? "全部" : s}
+                </Button>
+              ))}
+              <div className="ml-auto flex gap-2">
+                <Button size="sm" variant="outline" onClick={() => void act(() => call("reset", {}))}>
+                  <Icon.RotateCcw size={16} strokeWidth={2} /> 重置
+                </Button>
+                <Button size="sm" onClick={() => void act(() => call("save", { after }))}>
+                  <Icon.Save size={16} strokeWidth={2} /> 保存修复
+                </Button>
+              </div>
+            </FilterBar>
+            <div className="mt-3">
+              <DataGrid columns={columns} data={filtered} pageSize={8} />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>日志</CardTitle>
+            <CardDescription>级别着色</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <LogViewer lines={logs.map((l) => `[${l.level}] ${l.text}`)} />
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
+  );
+}

package/skills/monkey-mini-app/templates/todo/main.api.ts

@@ -0,0 +1,83 @@
+import { defineDashboard } from "@monkeyagent/dashboard";
+
+type TodoItem = { id: string; title: string; done: boolean; createdAt: number };
+type Filter = "all" | "active" | "done";
+
+function uid() {
+  return "t_" + Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+}
+
+// ⭐ 关键：本地数据用 ctx.storage（单表 get/set）；多表用 ctx.storage.table(name)。
+//         todo 用主表存"进行中的任务"，把已完成的归档到第二张表体现分表。
+async function loadItems(ctx): Promise<TodoItem[]> {
+  const items = await ctx.storage.get("items");
+  return Array.isArray(items) ? items : [];
+}
+async function saveItems(ctx, items: TodoItem[]) {
+  await ctx.storage.set("items", items);
+}
+function statsOf(items: TodoItem[]) {
+  const done = items.filter((i) => i.done).length;
+  return { total: items.length, active: items.length - done, done };
+}
+
+export default defineDashboard({
+  name: "待办",
+  description: "本地待办：CRUD + 状态筛选 + 归档到第二张表",
+  api: {
+    async list(ctx, args?: { filter?: Filter }) {
+      const all = await loadItems(ctx);
+      return {
+        items: args?.filter === "active" ? all.filter((i) => !i.done) : args?.filter === "done" ? all.filter((i) => i.done) : all,
+        stats: statsOf(all),
+      };
+    },
+    async add(ctx, args?: { title?: string }) {
+      const title = String(args?.title ?? "").trim();
+      if (!title) throw new Error("请填写标题");
+      const items = await loadItems(ctx);
+      const item: TodoItem = { id: uid(), title, done: false, createdAt: Date.now() };
+      items.unshift(item);
+      await saveItems(ctx, items);
+      return item;
+    },
+    async toggle(ctx, args?: { id?: string }) {
+      const id = args?.id;
+      if (!id) throw new Error("缺少 id");
+      const items = await loadItems(ctx);
+      let found = false;
+      const next = items.map((it) => {
+        if (it.id !== id) return it;
+        found = true;
+        return { ...it, done: !it.done };
+      });
+      if (!found) throw new Error("任务不存在");
+      await saveItems(ctx, next);
+      return next.find((it) => it.id === id);
+    },
+    async remove(ctx, args?: { id?: string }) {
+      const items = await loadItems(ctx);
+      const next = items.filter((it) => it.id !== args?.id);
+      if (next.length === items.length) throw new Error("任务不存在");
+      await saveItems(ctx, next);
+      return { ok: true };
+    },
+    async clearDone(ctx) {
+      const items = await loadItems(ctx);
+      await saveItems(ctx, items.filter((i) => !i.done));
+      return { ok: true };
+    },
+    // ⭐ 关键：ctx.storage.table("archive") 是另一张独立表 —— 演示多表。
+    //         table() 返回与 storage 同样的 get/set/delete/clear。
+    async archive(ctx) {
+      const items = await loadItems(ctx);
+      const done = items.filter((i) => i.done);
+      if (!done.length) return { ok: true, archived: 0 };
+      const archive = ctx.storage.table("archive");
+      const prev = (await archive.get("done")) ?? [];
+      await archive.set("done", [...prev, ...done]);
+      await saveItems(ctx, items.filter((i) => !i.done));
+      return { ok: true, archived: done.length };
+    },
+  },
+});

package/skills/monkey-mini-app/templates/todo/manifest.json

@@ -0,0 +1,8 @@
+{
+  "id": "com.example.todo",
+  "name": "待办",
+  "description": "本地待办，存在这台机器上",
+  "version": "0.1.0",
+  "entry": "ui.tsx",
+  "theme": { "followsHost": true }
+}

package/skills/monkey-mini-app/templates/todo/ui.tsx

@@ -0,0 +1,177 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  AppShell,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+  FilterBar,
+  Icon,
+  Input,
+  PageHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@monkey-mini-app/ui";
+import { useDashboardApi } from "@monkeyagent/host";
+
+type Filter = "all" | "active" | "done";
+type TodoItem = { id: string; title: string; done: boolean; createdAt: number };
+type Stats = { total: number; active: number; done: number };
+
+const FILTERS: { id: Filter; label: string }[] = [
+  { id: "all", label: "全部" },
+  { id: "active", label: "进行中" },
+  { id: "done", label: "已完成" },
+];
+
+export default function Ui() {
+  const { call } = useDashboardApi();
+  const [filter, setFilter] = useState<Filter>("all");
+  const [draft, setDraft] = useState("");
+  const [items, setItems] = useState<TodoItem[]>([]);
+  const [stats, setStats] = useState<Stats>({ total: 0, active: 0, done: 0 });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // ⭐ 关键：refresh 依赖 filter，filter 变就重拉；用 useCallback 避免无限循环
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const pack = (await call("list", { filter })) as { items: TodoItem[]; stats: Stats };
+      setItems(Array.isArray(pack?.items) ? pack.items : []);
+      setStats(pack?.stats ?? { total: 0, active: 0, done: 0 });
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    } finally {
+      setLoading(false);
+    }
+  }, [call, filter]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  async function act(job: () => Promise<unknown>) {
+    setError(null);
+    try {
+      await job();
+      await refresh();
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    }
+  }
+
+  async function add() {
+    const title = draft.trim();
+    if (!title) return;
+    await act(async () => {
+      await call("add", { title });
+      setDraft("");
+    });
+  }
+
+  return (
+    // ⭐ 关键：一屏固定 —— AppShell 定高，main 内部滚动，页面不整体滚。
+    //         让「内容不被裁成一条缝」+ 侧栏折叠/钉到右侧后仍撑满。
+    <AppShell header={<PageHeader title="待办" description="CRUD · 状态筛选 · 归档" />}>
+      <div className="flex h-full min-h-0 flex-col gap-3">
+        <FilterBar>
+          {FILTERS.map((f) => (
+            <Button key={f.id} size="sm" variant={filter === f.id ? "default" : "outline"} onClick={() => setFilter(f.id)}>
+              {f.label}
+            </Button>
+          ))}
+          <div className="ml-auto flex items-center gap-2">
+            <Badge variant="secondary">{stats.active} 进行中</Badge>
+            <Badge variant="outline">{stats.done} 已完成</Badge>
+            <Button size="sm" variant="ghost" onClick={() => void act(() => call("archive", {}))}>
+              <Icon.Archive size={16} strokeWidth={2} /> 归档
+            </Button>
+          </div>
+        </FilterBar>
+
+        <Card className="min-h-0 flex-1 overflow-hidden">
+          <CardHeader>
+            <CardTitle>添加任务</CardTitle>
+            <div className="flex gap-2">
+              <Input
+                value={draft}
+                placeholder="要做什么？回车提交"
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void add();
+                }}
+                className="flex-1"
+              />
+              <Button onClick={() => void add()} disabled={!draft.trim()}>
+                <Icon.Plus size={16} strokeWidth={2} /> 添加
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="flex flex-col min-h-0 flex-1 gap-2 overflow-y-auto">
+            {error && <p className="text-sm" style={{ color: "var(--destructive)" }}>{error}</p>}
+            {loading && !items.length ? <p className="text-sm text-muted-foreground">加载中…</p> : null}
+            {!loading && !items.length ? (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyTitle>还没有任务</EmptyTitle>
+                  <EmptyDescription>上面加一条就开始。</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : null}
+            {items.length ? (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-10"></TableHead>
+                    <TableHead>标题</TableHead>
+                    <TableHead className="w-20">状态</TableHead>
+                    <TableHead className="w-20"></TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {items.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell>
+                        <Checkbox
+                          checked={item.done}
+                          onCheckedChange={() => void act(() => call("toggle", { id: item.id }))}
+                        />
+                      </TableCell>
+                      <TableCell
+                        style={{ textDecoration: item.done ? "line-through" : "none", opacity: item.done ? 0.55 : 1 }}
+                      >
+                        {item.title}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={item.done ? "secondary" : "default"}>{item.done ? "已完成" : "进行中"}</Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Button size="sm" variant="ghost" onClick={() => void act(() => call("remove", { id: item.id }))}>
+                          <Icon.Trash2 size={16} strokeWidth={2} />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            ) : null}
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
+  );
+}