@monkey-mini-app/dsh-mini-app 0.1.1 → 0.1.4

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

@@ -0,0 +1,117 @@
+import { useEffect, useState } from "react";
+
+import { Badge, Button, Icon, Terminal, useApp } from "@monkey-mini-app/ui";
+
+type Job = { id: string; title: string };
+type Run = {
+  id: string;
+  title: string;
+  command: string;
+  stdout: string;
+  stderr: string;
+  exitCode: number;
+  at: number;
+};
+
+export default function Ui() {
+  const { call } = useApp();
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [run, setRun] = useState<Run | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    void call("jobs", {}).then((d) =>
+      setJobs((d as { jobs: Job[] }).jobs ?? []),
+    );
+  }, [call]);
+
+  async function runJob(id: string) {
+    setBusy(id);
+    setError(null);
+    try {
+      setRun((await call("run", { id })) as Run);
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  const lines = run
+    ? [
+        `$ ${run.command}`,
+        run.stdout.trim() || "(no stdout)",
+        run.stderr.trim() ? `stderr:\n${run.stderr.trim()}` : "",
+        `exit ${run.exitCode}`,
+      ].filter(Boolean)
+    : ["点一个按钮。没有对话框，没有模型。"];
+
+  return (
+    // ⭐ Look: terminal — buttons on top, kit Terminal well below. Never a prompt box.
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <div className="flex items-center gap-2 border-b px-4 py-3">
+        {/* one state lamp, not three decorative traffic lights: colour = state, and a literal
+            `fill-emerald-400` would fight this look's phosphor ground. */}
+        <span
+          className={`size-2 rounded-full ${busy ? "bg-primary/50" : run ? (run.exitCode === 0 ? "bg-primary" : "bg-destructive") : "bg-muted-foreground/40"}`}
+        />
+        <span className="font-mono text-xs">chores</span>
+        {run ? (
+          <Badge
+            variant={run.exitCode === 0 ? "default" : "destructive"}
+            className="ml-auto"
+          >
+            {run.exitCode === 0 ? "ok" : "fail"}
+          </Badge>
+        ) : null}
+      </div>
+      <div className="flex flex-wrap gap-2 px-4 py-3">
+        {jobs.map((j) => (
+          <Button
+            key={j.id}
+            size="sm"
+            variant="outline"
+            disabled={busy !== null}
+            onClick={() => void runJob(j.id)}
+          >
+            {busy === j.id ? (
+              <Icon.Loader2 className="animate-spin" size={14} />
+            ) : (
+              <Icon.Play size={14} />
+            )}
+            {j.title}
+          </Button>
+        ))}
+      </div>
+      {error ? <p className="text-destructive px-4 text-sm">{error}</p> : null}
+      <div className="min-h-0 flex-1 p-3">
+        {/* ⭐ Same phosphor well as `runner`: token surfaces instead of the kit's hard zinc,
+            green glow, scanlines + vignette on a click-through overlay. */}
+        <div
+          className="border-border relative h-full min-h-0 overflow-hidden rounded-lg border"
+          style={{
+            textShadow:
+              "0 0 6px color-mix(in oklch, var(--primary) 65%, transparent)",
+          }}
+        >
+          <Terminal
+            className="bg-card text-card-foreground h-full rounded-lg"
+            lines={
+              lines.length ? lines : ["$ 挑一个上面的按钮，本机跑一条", "$ █"]
+            }
+          />
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0"
+            style={{
+              backgroundImage:
+                "repeating-linear-gradient(0deg, color-mix(in oklch, var(--foreground) 7%, transparent) 0 1px, transparent 1px 3px)," +
+                "radial-gradient(120% 90% at 50% 40%, transparent 62%, var(--shadow))",
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,14 +1,14 @@
-import { defineDashboard } from "@monkeyagent/dashboard";
+import { defineApp } from "@monkey-mini-app/api";
 
-export default defineDashboard({
+export default defineApp({
   name: "骨架示例",
   description: "最小可运行：一次 call 往返 + 读 Host 配置",
   api: {
-    // ⭐ 关键：每个方法都拿到同一个 ctx —— appId / appDir / storage / config / log / 能力(这页不用)
+    // ⭐ key: every method receives the same ctx — appId / appDir / storage / config / log / capabilities (unused on this page)
     async ping(ctx) {
       return {
-        appId: ctx.appId,                      // 当前小程序 reverse-DNS id
-        theme: ctx.config?.theme ?? "light",   // 跟随 Host 设置（设置页 / 顶栏可改）
+        appId: ctx.appId,                      // reverse-DNS id of the current mini-app
+        theme: ctx.config?.theme ?? "light",   // follows the Host theme (changeable in Settings / top bar)
         now: Date.now(),
       };
     },

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

@@ -3,6 +3,5 @@
   "name": "骨架示例",
   "description": "最小可运行结构：一次 call 往返 + 读 Host 配置",
   "version": "0.1.0",
-  "entry": "ui.tsx",
-  "theme": { "followsHost": true }
+  "entry": "ui.tsx"
 }

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

@@ -1,20 +1,29 @@
 import { useEffect, useState } from "react";
 
-import { AppShell, Badge, Card, CardContent, CardHeader, CardTitle, Icon, PageHeader } from "@monkey-mini-app/ui";
-import { useDashboardApi } from "@monkeyagent/host";
+import {
+  AppShell,
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  PageHeader,
+  useApp,
+} from "@monkey-mini-app/ui";
 
 type Ping = { appId: string; theme: string; now: number };
 
 export default function Ui() {
-  // ⭐ 关键：访问后端**只有**一个入口 —— useDashboardApi().call(method, args)
-  //          method 必须是 defineDashboard({ api }) 的键；UI 永不 import main.api.ts。
-  const { call } = useDashboardApi();
+  // ⭐ key: the backend is reachable through **one** entry only — useApp().call(method, args)
+  //          method must be a key of defineApp({ api }); the UI never imports main.api.ts.
+  const { call } = useApp();
   const [data, setData] = useState<Ping | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    // ⭐ 关键：组件卸载后别 setState（长/慢任务与取消配套见 insights / agentrun）
+    // ⭐ key: don't setState after the component unmounts (long/slow tasks with cancellation: see radar / runner)
     let alive = true;
     (async () => {
       try {
@@ -35,8 +44,8 @@ export default function Ui() {
   const label = error ? "出错" : loading ? "连接中" : "正常";
 
   return (
-    // ⭐ 关键：页面用 AppShell 包一层（可选 sidebar/header），页头用 PageHeader。
-    //         这里是「骨架基线」；别的模板会在 main 里放列表/看板/图表。
+    // ⭐ key: wrap the page in AppShell (optional sidebar/header), use PageHeader for the page header.
+    //         This is the "skeleton baseline"; other templates put lists/kanban/charts inside main.
     <AppShell header={<PageHeader title="骨架示例" description="最小可运行结构" />}>
       <div className="max-w-xl">
         <Card>

package/skills/monkey-mini-app/templates/radar/api/scan.ts

@@ -0,0 +1,79 @@
+import { EV, type Payload, type Progress } from "../shared/events";
+import { SAMPLE_ITEMS } from "../shared/sample";
+
+const DIGEST_SCHEMA = {
+  type: "object",
+  properties: {
+    headline: { type: "string" },
+    bullets: { type: "array", items: { type: "string" } },
+  },
+  required: ["headline", "bullets"],
+};
+
+function parseDigest(raw: string): { headline: string; bullets: string[] } {
+  let value: { headline?: unknown; bullets?: unknown };
+  try {
+    value = JSON.parse(raw);
+  } catch {
+    throw new Error("模型没有返回 JSON：" + String(raw).slice(0, 180));
+  }
+  const headline = String(value?.headline ?? "").trim();
+  const bullets = Array.isArray(value.bullets)
+    ? value.bullets.map((b) => String(b).trim()).filter(Boolean).slice(0, 3)
+    : [];
+  if (!headline || bullets.length !== 3) throw new Error("摘要格式不对");
+  return { headline, bullets };
+}
+
+function sleep(ms: number, signal?: AbortSignal) {
+  return new Promise<void>((resolve) => {
+    if (signal?.aborted) return resolve();
+    const t = setTimeout(resolve, ms);
+    signal?.addEventListener(
+      "abort",
+      () => {
+        clearTimeout(t);
+        resolve();
+      },
+      { once: true },
+    );
+  });
+}
+
+// ⭐ key: long job lives in api/ (backend only). UI must not import this file.
+export async function runRefresh(ctx): Promise<Payload> {
+  const items = SAMPLE_ITEMS.slice(0, 8);
+  const report = async (partial: Partial<Progress>) => {
+    const next: Progress = { running: true, step: "refresh", done: 0, total: 3, ...partial };
+    await ctx.storage.set("progress", next);
+    ctx.push(EV.progress, next);
+  };
+  try {
+    await report({ step: "fetch·sample 8/8", done: 1 });
+    if (ctx.signal?.aborted) throw new Error("cancelled");
+    await sleep(300, ctx.signal);
+
+    await report({ step: "summarize#1/1", done: 2 });
+    const raw = await ctx.llm(
+      "根据这些标题写一条中文 headline，以及恰好 3 条中文 bullets。不要前言：\n" +
+        items.map((i) => "- " + i.title).join("\n"),
+      { schema: DIGEST_SCHEMA },
+    );
+    if (ctx.signal?.aborted) throw new Error("cancelled");
+    const digest = parseDigest(raw);
+
+    const payload: Payload = { items, digest, at: Date.now() };
+    await ctx.storage.set("latest", payload);
+    const done: Progress = { running: false, step: "done", done: 3, total: 3 };
+    await ctx.storage.set("progress", done);
+    ctx.push(EV.progress, done);
+    ctx.push(EV.latest, payload);
+    return payload;
+  } catch (cause) {
+    const message = cause instanceof Error ? cause.message : String(cause);
+    const failed: Progress = { running: false, step: "failed", done: 0, total: 3, error: message };
+    await ctx.storage.set("progress", failed);
+    ctx.push(EV.progress, failed);
+    throw new Error("摘要失败：" + message);
+  }
+}

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

@@ -0,0 +1,29 @@
+import { defineApp } from "@monkey-mini-app/api";
+
+import { runRefresh } from "./api/scan";
+import { type Payload, type Progress } from "./shared/events";
+import { SAMPLE_ITEMS } from "./shared/sample";
+
+export default defineApp({
+  name: "信息雷达",
+  description: "拉源、做简报、长任务可取消",
+  api: {
+    async latest(ctx): Promise<Payload> {
+      return (await ctx.storage.get("latest")) || { items: SAMPLE_ITEMS, digest: null, at: 0 };
+    },
+
+    // fire-and-forget: returns immediately; api/scan.ts pushes progress over SSE
+    async scan(ctx) {
+      void runRefresh(ctx);
+      return { ok: true };
+    },
+
+    async scanStatus(ctx): Promise<Progress> {
+      return (await ctx.storage.get("progress")) || { running: false, step: "idle", done: 0, total: 3 };
+    },
+
+    async refresh(ctx) {
+      return runRefresh(ctx);
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+{
+  "id": "com.example.radar",
+  "name": "信息雷达",
+  "description": "拉源、做简报、长任务可取消",
+  "version": "0.1.0",
+  "entry": "ui.tsx",
+  "acronym": "LD"
+}

package/skills/monkey-mini-app/templates/radar/shared/events.ts

@@ -0,0 +1,25 @@
+// ⭐ key: names AND payloads live here so ui.tsx and api/ cannot drift.
+//         Pure isomorphic: no React, no ctx, no DOM, no Node.
+export const EV = {
+  progress: "progress",
+  latest: "latest",
+} as const;
+
+export type Events = {
+  progress: {
+    running: boolean;
+    step: string;
+    done: number;
+    total: number;
+    error?: string;
+  };
+  latest: {
+    items: { title: string; link?: string }[];
+    digest: { headline: string; bullets: string[] } | null;
+    at: number;
+  };
+};
+
+export type EventName = keyof Events;
+export type Progress = Events["progress"];
+export type Payload = Events["latest"];

package/skills/monkey-mini-app/templates/{insights/lib → radar/shared}/sample.ts

@@ -1,6 +1,6 @@
 export type FeedItem = { title: string; link?: string };
 
-// 内置样例源：默认不走网络，保证离线也能跑起来（教"采样走通全链路"）
+// Built-in sample feed: no network by default so it runs offline (teaches "prove the full pipeline with a sample")
 export const SAMPLE_ITEMS: FeedItem[] = [
   { title: "TypeScript 5.7 发布：更快的类型检查与更好的模块解析", link: "https://example.com/ts57" },
   { title: "Vite 6 默认启用 Rolldown 路线图", link: "https://example.com/vite6" },

package/skills/monkey-mini-app/templates/radar/theme.css

@@ -0,0 +1,47 @@
+/* name: 编辑排版 */
+/* Look-owned palette: paper and ink are the identity — under the default kit palette the
+   page is just text and reads as "unfinished". Light is newsprint with vermilion (E1),
+   dark is cool night-reading stock with ultramarine (E2). Radius is small: this look is
+   rules and type, not cards. */
+:root[data-mode="light"] {
+  --bg: #f6f2e9;
+  --fg: #1c1a16;
+  --surface: #fffdf7;
+  --surface-fg: #1c1a16;
+  --border: #e0d9c9;
+  --muted: #ece5d6;
+  --muted-fg: #6d675c;
+  --primary: #c0402a;
+  --primary-fg: #fff8f5;
+  --secondary: #efe8da;
+  --secondary-fg: #1c1a16;
+  --accent: #f1e9d9;
+  --accent-fg: #1c1a16;
+  --destructive: #8f2d22;
+  --destructive-fg: #fff4f1;
+  --ring: #c0402a;
+  --input: #d9d2c2;
+  --radius: 6px;
+  --shadow: rgba(60, 50, 30, 0.18);
+}
+:root[data-mode="dark"] {
+  --bg: #14161a;
+  --fg: #e8eaee;
+  --surface: #191c22;
+  --surface-fg: #e8eaee;
+  --border: #262a31;
+  --muted: #1d2128;
+  --muted-fg: #9aa0aa;
+  --primary: #7f95f5;
+  --primary-fg: #0f1216;
+  --secondary: #1d2128;
+  --secondary-fg: #e8eaee;
+  --accent: #1a2030;
+  --accent-fg: #e8eaee;
+  --destructive: #ff6b63;
+  --destructive-fg: #14060a;
+  --ring: #7f95f5;
+  --input: #2a2d31;
+  --radius: 6px;
+  --shadow: rgba(0, 0, 0, 0.5);
+}

package/skills/monkey-mini-app/templates/radar/ui/brief.tsx

@@ -0,0 +1,31 @@
+import type { Payload } from "../shared/events";
+
+/**
+ * UI-only. The brief is an article, not a card: kicker → serif display → numbered bullets,
+ * limited measure. That is the whole `editorial` grammar (references/looks/editorial.md).
+ */
+export function Brief({ data, stale }: { data: Payload | null; stale: boolean }) {
+  const digest = data?.digest;
+  return (
+    <article className="max-w-2xl">
+      <p className="text-muted-foreground text-xs tracking-[0.2em] uppercase">
+        本期简报 {data?.at ? `· ${new Date(data.at).toLocaleDateString("zh-CN")}` : ""}
+      </p>
+      <h2 className="mt-3 font-serif text-3xl leading-snug font-bold tracking-tight">
+        {digest ? digest.headline : stale ? "还没有简报，点右上角整理一次" : "正在整理…"}
+      </h2>
+      {digest?.bullets?.length ? (
+        <ol className="text-muted-foreground mt-6 flex list-none flex-col gap-4 p-0">
+          {digest.bullets.map((b, i) => (
+            <li key={i} className="flex gap-4 text-sm leading-relaxed">
+              <span className="text-primary font-mono text-xs tabular-nums">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+              <span className="text-foreground">{b}</span>
+            </li>
+          ))}
+        </ol>
+      ) : null}
+    </article>
+  );
+}

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

@@ -0,0 +1,131 @@
+import { useEffect, useState } from "react";
+
+import {
+  AppShell,
+  Button,
+  DetailPanel,
+  Icon,
+  PageHeader,
+  Progress,
+  Separator,
+  useApp,
+} from "@monkey-mini-app/ui";
+
+import { EV, type Payload, type Progress as ScanProgress } from "./shared/events";
+import { Brief } from "./ui/brief";
+
+type Item = Payload["items"][number];
+
+export default function Ui() {
+  const { call, on } = useApp();
+  const [data, setData] = useState<Payload | null>(null);
+  const [progress, setProgress] = useState<ScanProgress | null>(null);
+  const [selected, setSelected] = useState<Item | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = async () => setData((await call("latest", {})) as Payload);
+
+  // ⭐ key: on(EV.progress) / ctx.push(EV.progress) — the name exists only in shared/events.ts.
+  useEffect(() => {
+    const offProgress = on(EV.progress, (d) => {
+      const p = d as ScanProgress;
+      setProgress(p);
+      if (!p.running && !p.error) void load();
+      if (p.error) setError(p.error);
+    });
+    const offLatest = on(EV.latest, (d) => setData(d as Payload));
+    return () => {
+      offProgress();
+      offLatest();
+    };
+  }, [on]);
+
+  async function run() {
+    setError(null);
+    try {
+      await call("scan", {}); // fire-and-forget start, returns immediately
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    }
+  }
+
+  useEffect(() => {
+    void load();
+  }, [call]);
+
+  const items = data?.items ?? [];
+  const running = Boolean(progress?.running);
+  const pct = progress && progress.total ? Math.round((progress.done / progress.total) * 100) : 0;
+
+  return (
+    <AppShell
+      header={
+        <PageHeader
+          title="信息雷达"
+          description="公开头条 · 模型整理成三条要点"
+          actions={
+            <Button disabled={running} onClick={() => void run()}>
+              <Icon.Sparkles size={16} strokeWidth={2} /> 整理
+            </Button>
+          }
+        />
+      }
+    >
+      {/* ⭐ Look: editorial — one prose column, hairline rules, a numbered index. No card soup. */}
+      <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col gap-6 overflow-y-auto px-2 py-2">
+        {running ? (
+          <div className="flex items-center gap-3">
+            <Progress value={pct} className="h-1 flex-1" />
+            <span className="text-muted-foreground font-mono text-xs">{progress?.step}</span>
+          </div>
+        ) : null}
+        {error ? <p className="text-destructive text-sm">{error}</p> : null}
+
+        <Brief data={data} stale={!running} />
+
+        <Separator />
+
+        <section>
+          <p className="text-muted-foreground mb-2 text-xs tracking-[0.2em] uppercase">
+            来源索引 · {items.length}
+          </p>
+          <ul className="list-none p-0">
+            {items.map((it, i) => (
+              <li key={it.title + i} className="border-border border-b last:border-b-0">
+                <button
+                  type="button"
+                  onClick={() => setSelected(it)}
+                  className="hover:bg-muted/50 flex w-full items-baseline gap-4 px-2 py-3 text-left"
+                >
+                  <span className="text-muted-foreground font-mono text-xs tabular-nums">
+                    {String(i + 1).padStart(2, "0")}
+                  </span>
+                  <span className="min-w-0 flex-1 truncate text-sm">{it.title}</span>
+                  <Icon.ArrowUpRight size={14} strokeWidth={2} className="text-muted-foreground shrink-0" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
+
+      {/* reading a source is still a sheet — the look governs the page, not every overlay */}
+      <DetailPanel
+        open={Boolean(selected)}
+        onOpenChange={(o) => {
+          if (!o) setSelected(null);
+        }}
+        title={selected?.title ?? ""}
+      >
+        <div className="flex flex-col gap-3">
+          <p className="text-sm">{selected?.title}</p>
+          {selected?.link ? (
+            <a href={selected.link} target="_blank" rel="noreferrer" className="text-primary text-xs hover:underline">
+              阅读原文
+            </a>
+          ) : null}
+        </div>
+      </DetailPanel>
+    </AppShell>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { defineApp } from "@monkey-mini-app/api";
+
+import { EV, type Run, type Step } from "./shared/events";
+
+// ⭐ key: ctx.agent is the entry point for "have the model do one multi-step job"; it returns the final string.
+//         Progress reaches the UI over `ctx.push(...)` (SSE) — no polling. `streamTo` mirrors the agent's own
+//         events onto one channel; lifecycle changes are pushed explicitly.
+//         The run is ALSO persisted, so reopening the app shows the last run instead of a blank screen.
+//         Cancellation: a module-level AbortController (the app module loads once, so a var can hold it).
+
+const EMPTY: Run = { goal: "", status: "idle", steps: [], result: "", startedAt: 0 };
+
+let currentAbort: AbortController | null = null;
+
+async function load(ctx: { storage: { get(k: string): Promise<unknown> } }): Promise<Run> {
+  return ((await ctx.storage.get("run")) as Run) || EMPTY;
+}
+
+/** Persist + stream one change. Storage is the snapshot, `push` is the live feed. */
+async function save(ctx, run: Run, patch?: Partial<Run>) {
+  const next: Run = { ...run, ...(patch || {}) };
+  await ctx.storage.set("run", next);
+  ctx.push(EV.run, next);
+  return next;
+}
+
+export default defineApp({
+  name: "执行器",
+  description: "模型自己走多步，UI 就是这条 run，可取消",
+  api: {
+    /** Snapshot for first paint: fetch once on mount, then live-update from events. */
+    async runStatus(ctx) {
+      return load(ctx);
+    },
+
+    // start returns immediately; the agent runs in the background and pushes as it goes
+    async start(ctx, args?: { goal?: string }) {
+      const goal = String(args?.goal ?? "").trim();
+      if (!goal) throw new Error("请输入目标");
+      currentAbort?.abort();
+      const ac = new AbortController();
+      currentAbort = ac;
+
+      let run = await save(ctx, { ...EMPTY, goal, startedAt: Date.now() }, { status: "running" });
+
+      void ctx
+        .agent(goal, {
+          signal: ac.signal,
+          maxIterations: 12,
+          // ⭐ streamTo uses the same name the UI subscribes to (EV.agent)
+          streamTo: EV.agent,
+          onEvent: async (ev) => {
+            // onEvent still runs — use it to keep the durable snapshot, not to feed the UI
+            if (ev.type !== "tool" && ev.type !== "turn" && ev.type !== "done" && ev.type !== "error") {
+              return;
+            }
+            const step: Step =
+              ev.type === "tool"
+                ? { phase: "tool", name: ev.name, at: Date.now() }
+                : ev.type === "turn"
+                  ? { phase: "turn", turn: ev.turn, at: Date.now() }
+                  : ev.type === "done"
+                    ? { phase: "done", at: Date.now() }
+                    : { phase: "error", text: ev.message, at: Date.now() };
+            run = { ...run, steps: [...run.steps, step] };
+            await ctx.storage.set("run", run);
+          },
+        })
+        .then(async (text) => {
+          const cur = await load(ctx);
+          await save(ctx, cur, { status: "done", result: text.slice(-4000) });
+          if (currentAbort === ac) currentAbort = null;
+        })
+        .catch(async (cause) => {
+          const msg = String((cause as Error)?.message || cause);
+          const cur = await load(ctx);
+          await save(ctx, cur, { status: "error", result: msg });
+          if (currentAbort === ac) currentAbort = null;
+        });
+
+      return { ok: true, started: true };
+    },
+
+    async cancel(ctx) {
+      currentAbort?.abort();
+      currentAbort = null;
+      await save(ctx, await load(ctx), { status: "cancelled" });
+      return { ok: true };
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+{
+  "id": "com.example.runner",
+  "name": "执行器",
+  "description": "模型自己走多步，UI 就是这条 run，可取消",
+  "version": "0.1.0",
+  "entry": "ui.tsx",
+  "acronym": "ZX"
+}

package/skills/monkey-mini-app/templates/runner/shared/events.ts

@@ -0,0 +1,14 @@
+export type Step = { phase: string; name?: string; turn?: number; text?: string; at: number };
+export type Run = { goal: string; status: string; steps: Step[]; result: string; startedAt: number };
+
+export const EV = {
+  run: "run",
+  agent: "agent",
+} as const;
+
+export type Events = {
+  run: Run;
+  agent: unknown;
+};
+
+export type EventName = keyof Events;