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

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

@@ -0,0 +1,46 @@
+/* name: 终端等宽 */
+/* Look-owned palette: phosphor-on-black CRT is the identity — a host palette would turn the
+   well pink. Light mode is a paper well with deep green ink; dark is near-black with green
+   phosphor (#3dff6e). Radius is squared: rounds read as "chat app", not as a console. */
+:root[data-mode="light"] {
+  --bg: #ecefe4;
+  --fg: #12290f;
+  --surface: #f7faf1;
+  --surface-fg: #12290f;
+  --border: #ccd5c0;
+  --muted: #dfe6d4;
+  --muted-fg: #4c5f44;
+  --primary: #157a24;
+  --primary-fg: #ffffff;
+  --secondary: #dfe6d4;
+  --secondary-fg: #12290f;
+  --accent: #e2ecd6;
+  --accent-fg: #12290f;
+  --destructive: #b42318;
+  --destructive-fg: #ffffff;
+  --ring: #157a24;
+  --input: #ccd5c0;
+  --radius: 8px;
+  --shadow: rgba(20, 40, 25, 0.12);
+}
+:root[data-mode="dark"] {
+  --bg: #0a0d08;
+  --fg: #3dff6e;
+  --surface: #060904;
+  --surface-fg: #3dff6e;
+  --border: #1d2a18;
+  --muted: #10180d;
+  --muted-fg: #5f8a55;
+  --primary: #3dff6e;
+  --primary-fg: #0a0d08;
+  --secondary: #10180d;
+  --secondary-fg: #3dff6e;
+  --accent: #12200f;
+  --accent-fg: #3dff6e;
+  --destructive: #ff5341;
+  --destructive-fg: #0a0d08;
+  --ring: #3dff6e;
+  --input: #1d2a18;
+  --radius: 8px;
+  --shadow: rgba(0, 0, 0, 0.55);
+}

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

@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  Badge,
+  Button,
+  Icon,
+  Input,
+  RunTimeline,
+  Terminal,
+  useApp,
+} from "@monkey-mini-app/ui";
+
+import { EV, type Run, type Step } from "./shared/events";
+
+type AgentEvent =
+  | { type: "status"; status: string }
+  | { type: "text-delta"; text: string }
+  | { type: "tool"; phase: string; name: string }
+  | { type: "turn"; phase: string; turn: number }
+  | { type: "done"; text: string }
+  | { type: "error"; message: string };
+type TimelineItem = {
+  id: string;
+  title: string;
+  description?: string;
+  time?: string;
+  status?: "pass" | "fail" | "running" | "skipped";
+};
+
+// Token hues only: under this look's phosphor palette a literal `bg-emerald-400` fights the
+// ground, and the rule is colour = state, nothing else.
+const LAMP: Record<string, string> = {
+  idle: "bg-muted-foreground/40",
+  running: "bg-primary/50",
+  done: "bg-primary",
+  cancelled: "bg-muted-foreground/70",
+  error: "bg-destructive",
+};
+
+export default function Ui() {
+  const { call, on, onAny } = useApp();
+  const [goal, setGoal] = useState("");
+  const [run, setRun] = useState<Run | null>(null);
+  const [running, setRunning] = useState(false);
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [live, setLive] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const applyRun = useCallback((next: Run) => {
+    setRun(next);
+    setRunning(next?.status === "running");
+    if (next?.status !== "running") {
+      // finished: the persisted snapshot is authoritative, drop the optimistic feed
+      setSteps(next.steps ?? []);
+      setLive(next.result ?? "");
+    }
+  }, []);
+
+  // ⭐ key: fetch the snapshot ONCE, then let ctx.push events keep it current — no interval polling.
+  useEffect(() => {
+    void (call("runStatus", {}) as Promise<Run>).then(applyRun).catch(() => {});
+  }, [call, applyRun]);
+
+  useEffect(() => {
+    const offRun = on(EV.run, (data) => applyRun(data as Run));
+    const offAgent = on(EV.agent, (data) => {
+      const ev = data as AgentEvent;
+      const at = Date.now();
+      if (ev.type === "text-delta") setLive((prev) => prev + ev.text);
+      else if (ev.type === "tool" && ev.phase === "start")
+        setSteps((p) => [...p, { phase: "tool", name: ev.name, at }]);
+      else if (ev.type === "turn" && ev.phase === "start")
+        setSteps((p) => [...p, { phase: "turn", turn: ev.turn, at }]);
+      else if (ev.type === "done")
+        setSteps((p) => [...p, { phase: "done", at }]);
+      else if (ev.type === "error")
+        setSteps((p) => [...p, { phase: "error", text: ev.message, at }]);
+    });
+    // Events dropped from the host replay buffer (long disconnect): refetch, don't guess.
+    const offAny = onAny((e) => {
+      if (e.name === "*" && (e.data as { gap?: boolean })?.gap) {
+        void (call("runStatus", {}) as Promise<Run>)
+          .then(applyRun)
+          .catch(() => {});
+      }
+    });
+    return () => {
+      offRun();
+      offAgent();
+      offAny();
+    };
+  }, [on, onAny, call, applyRun]);
+
+  async function start() {
+    setError(null);
+    setSteps([]);
+    setLive("");
+    try {
+      await call("start", { goal });
+    } catch (e) {
+      setError(String((e as Error)?.message || e));
+    }
+  }
+
+  // ⭐ key: a run's phases on a time axis = RunTimeline. Plain ordered events = Timeline.
+  const items: TimelineItem[] = steps.map((s, i) => ({
+    id: String(i),
+    title:
+      s.phase === "tool"
+        ? `调用工具 ${s.name ?? ""}`
+        : s.phase === "turn"
+          ? `第 ${s.turn} 轮`
+          : s.phase === "done"
+            ? "完成"
+            : s.phase,
+    description: s.text ?? (s.phase === "tool" ? "结束" : undefined),
+    time: new Date(s.at).toLocaleTimeString("zh-CN"),
+    status:
+      s.phase === "error"
+        ? "fail"
+        : s.phase === "done"
+          ? "pass"
+          : running && i === steps.length - 1
+            ? "running"
+            : "skipped",
+  }));
+
+  const status = run?.status ?? "idle";
+
+  return (
+    // ⭐ Look: terminal — lamp header, a command bar, mono wells. Colour is state, nothing else.
+    <div className="flex h-full min-h-0 flex-col bg-background font-mono text-sm">
+      <div className="border-border text-muted-foreground flex items-center gap-2 border-b px-4 py-2.5 text-xs">
+        <span className={`size-2 rounded-full ${LAMP[status] ?? LAMP.idle}`} />
+        runner · {goal.trim() || "未指定目标"}
+        <Badge
+          variant={status === "error" ? "destructive" : "outline"}
+          className="ml-auto"
+        >
+          {status}
+        </Badge>
+      </div>
+
+      <div className="border-border flex flex-wrap items-center gap-2 border-b px-4 py-3">
+        <Icon.ChevronRight className="text-muted-foreground size-4 shrink-0" />
+        <Input
+          value={goal}
+          placeholder="读 packages/ui/src 下组件，总结导出清单写到 storage"
+          onChange={(e) => setGoal(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !running && goal.trim()) void start();
+          }}
+          className="h-8 min-w-52 flex-1 border-0 bg-transparent px-0 font-mono text-sm shadow-none focus-visible:ring-0"
+        />
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => void start()}
+          disabled={running || !goal.trim()}
+        >
+          <Icon.Play size={14} strokeWidth={2} /> 运行
+        </Button>
+        {running ? (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => void call("cancel", {})}
+          >
+            <Icon.Square size={14} strokeWidth={2} /> 取消
+          </Button>
+        ) : null}
+      </div>
+      {error ? (
+        <p className="text-destructive px-4 py-2 text-xs">{error}</p>
+      ) : null}
+
+      <div className="border-border grid min-h-0 flex-1 grid-rows-[auto_1fr]">
+        <div className="border-border max-h-56 min-h-0 overflow-y-auto border-b px-4 py-3">
+          {items.length ? (
+            <RunTimeline items={items} />
+          ) : (
+            <p className="text-muted-foreground text-xs">等待运行…</p>
+          )}
+        </div>
+        <div className="min-h-0 p-4">
+          {/* ⭐ Phosphor well: token surfaces (not the kit's hard zinc), green glow, scanlines
+              and a corner vignette on top. Square-ish corners — rounds read as a chat app. */}
+          <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="border-border bg-card text-card-foreground h-full rounded-lg"
+              lines={live ? live.split("\n") : ["$ 输出会实时写到这里", "$ █"]}
+            />
+            <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,276 @@
+// ⭐ This template needs ONE library the platform does not ship. Before `mini_app_reload`:
+//    mini_app_install({ appId: "com.example.sheets", packages: [{ name: "exceljs" }] })
+// It lands in this app's own node_modules (--ignore-scripts, lockfile committed,
+// node_modules not). `ui.tsx` still cannot import it — the browser bundle has its own
+// closed surface, so the workbook is parsed here and the UI only sees JSON.
+import ExcelJS from "exceljs";
+
+// ⭐ Platform module: full lodash on both sides. Aggregates below are the case it pays for.
+import { mean, sum } from "lodash";
+
+import { defineApp } from "@monkey-mini-app/api";
+
+type SheetData = {
+  name: string;
+  headers: string[];
+  /** Capped preview rows; aggregates are computed over every row. */
+  rows: Record<string, string | number>[];
+  rowCount: number;
+  columns: {
+    header: string;
+    numeric: boolean;
+    count: number;
+    min?: number;
+    max?: number;
+    total?: number;
+    avg?: number;
+  }[];
+};
+
+type Report = {
+  id: string;
+  fileName: string;
+  createdAt: number;
+  sheetCount: number;
+  rowCount: number;
+  digest?: { headline: string; bullets: string[] };
+};
+
+const PREVIEW_CAP = 300;
+
+/**
+ * An `.xlsx` cell is not always a primitive: formulas carry `{ result }`, rich text
+ * carries `richText[]`, dates are `Date`, hyperlinks wrap `{ text }`. Passing those
+ * straight to the UI gives `[object Object]` in half the columns.
+ */
+function cellText(value: unknown): string | number | null {
+  if (value === null || value === undefined) return null;
+  if (typeof value === "number" || typeof value === "boolean")
+    return typeof value === "boolean" ? String(value) : value;
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  if (typeof value === "object") {
+    const v = value as Record<string, unknown>;
+    if ("result" in v) return cellText(v.result);
+    if ("text" in v) return cellText(v.text);
+    if (Array.isArray(v.richText)) {
+      return (v.richText as { text?: string }[])
+        .map((p) => p.text ?? "")
+        .join("");
+    }
+  }
+  return String(value);
+}
+
+function toNumberOrNull(value: string | number | null): number | null {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (value === null) return null;
+  const cleaned = String(value).replace(/[,\s%]/g, "");
+  if (!cleaned || !/^-?\d+(\.\d+)?$/.test(cleaned)) return null;
+  const n = Number(cleaned);
+  return Number.isFinite(n) ? n : null;
+}
+
+/**
+ * ⭐ exceljs re-declares a **global** `interface Buffer extends ArrayBuffer`, which poisons the
+ * `Buffer` *type name* everywhere it is imported — so the app works in `Uint8Array` and hands
+ * the reader a plain ArrayBuffer. (`as any` would hide the next real mismatch.)
+ */
+function toArrayBuffer(b: Uint8Array): ArrayBuffer {
+  return b.buffer.slice(
+    b.byteOffset,
+    b.byteOffset + b.byteLength,
+  ) as ArrayBuffer;
+}
+
+async function parseWorkbook(
+  data: Uint8Array,
+): Promise<{ sheets: SheetData[] }> {
+  const wb = new ExcelJS.Workbook();
+  // exceljs parses the bytes in-process: no temp file on disk, nothing uploaded.
+  await wb.xlsx.load(toArrayBuffer(data));
+  const sheets: SheetData[] = [];
+  wb.worksheets.forEach((ws) => {
+    if (!ws.rowCount) return;
+    const headerRow = ws.getRow(1);
+    const width = headerRow.cellCount;
+    const headers: string[] = [];
+    for (let c = 1; c <= width; c++) {
+      headers.push(String(cellText(headerRow.getCell(c).value) ?? `列${c}`));
+    }
+
+    const matrix: (string | number | null)[][] = [];
+    ws.eachRow((row, rowNumber) => {
+      if (rowNumber === 1) return;
+      const line: (string | number | null)[] = [];
+      for (let c = 1; c <= width; c++)
+        line.push(cellText(row.getCell(c).value));
+      if (line.some((x) => x !== null && x !== "")) matrix.push(line);
+    });
+
+    const columns = headers.map((header, i) => {
+      const nums = matrix
+        .map((r) => toNumberOrNull(r[i] ?? null))
+        .filter((n): n is number => n !== null);
+      // A column is numeric when most of its cells parse as numbers: one stray text
+      // cell in an amount column must not demote the whole column to text.
+      const numeric = nums.length > 0 && nums.length >= matrix.length * 0.6;
+      return {
+        header,
+        numeric,
+        count: matrix.length,
+        min: numeric ? Math.min(...nums) : undefined,
+        max: numeric ? Math.max(...nums) : undefined,
+        total: numeric ? Number(sum(nums).toFixed(2)) : undefined,
+        avg: numeric ? Number(mean(nums).toFixed(2)) : undefined,
+      };
+    });
+
+    sheets.push({
+      name: ws.name,
+      headers,
+      rowCount: matrix.length,
+      columns,
+      rows: matrix.slice(0, PREVIEW_CAP).map((r) => {
+        const obj: Record<string, string | number> = {};
+        headers.forEach((h, i) => {
+          obj[h] = (r[i] ?? "") as string | number;
+        });
+        return obj;
+      }),
+    });
+  });
+  return { sheets };
+}
+
+function digestPrompt(sheets: SheetData[]): string {
+  const lines: string[] = [];
+  for (const s of sheets.slice(0, 6)) {
+    lines.push(`### ${s.name}（${s.rowCount} 行）`);
+    for (const c of s.columns.slice(0, 12)) {
+      lines.push(
+        c.numeric
+          ? `- ${c.header}: n=${c.count} 合计=${c.total} 均值=${c.avg} 最小=${c.min} 最大=${c.max}`
+          : `- ${c.header}: 文本列，${c.count} 行`,
+      );
+    }
+  }
+  return [
+    "下面是用户本机一份 Excel 的结构与数值汇总（已抽样，未逐行列出）。",
+    "用中文写业务结论，不要复述列名清单，不要提 lodash / exceljs / storage 这些实现细节。",
+    "",
+    lines.join("\n"),
+    "",
+    "返回 JSON：{ headline: 一句话结论, bullets: 3-5 条值得关注的点（含具体数字） }",
+  ].join("\n");
+}
+
+async function loadSheets(ctx, id: string): Promise<SheetData[]> {
+  const stored = await ctx.storage.table("reports").get(id);
+  if (!stored || !Array.isArray(stored.sheets)) {
+    throw new Error("找不到该报表，请重新拖入文件");
+  }
+  return stored.sheets as SheetData[];
+}
+
+export default defineApp({
+  name: "表格台",
+  description: "文件进，格子上干活，哪里变了",
+  api: {
+    /** ⭐ History survives reload: the parse result lives on disk, not in a tab. */
+    async list(ctx) {
+      const index = await ctx.storage.get("index");
+      return Array.isArray(index) ? index : [];
+    },
+
+    /** Full report (incl. sheets) for a history row — index alone has no payload. */
+    async get(ctx, args) {
+      const id = String(args?.id ?? "");
+      const stored = await ctx.storage.table("reports").get(id);
+      if (!stored) throw new Error("找不到该报表，请重新拖入文件");
+      return stored;
+    },
+
+    async ingest(ctx, args) {
+      const fileName = String(args?.fileName ?? "").trim() || "未命名报表";
+      const base64 = String(args?.base64 ?? "");
+      if (!base64) throw new Error("文件内容为空");
+
+      const data = new Uint8Array(Buffer.from(base64, "base64"));
+      let sheets: SheetData[];
+      try {
+        sheets = (await parseWorkbook(data)).sheets;
+      } catch (cause) {
+        throw new Error(
+          `无法读取这个 Excel：${cause instanceof Error ? cause.message : String(cause)}（仅支持 .xlsx，旧版 .xls 需要先另存为 .xlsx）`,
+        );
+      }
+      if (!sheets.length) throw new Error("工作簿里没有带数据的表");
+
+      const id = "r_" + Date.now().toString(36);
+      const report = {
+        id,
+        fileName,
+        createdAt: Date.now(),
+        sheetCount: sheets.length,
+        rowCount: sheets.reduce((n, s) => n + s.rowCount, 0),
+      };
+
+      // ⭐ Big payload → its own table (one file per report); the index stays tiny so
+      //    `list` is cheap. Same reason the UI gets preview rows, not the whole sheet.
+      await ctx.storage.table("reports").set(id, { ...report, sheets });
+      const index = [report, ...((await ctx.storage.get("index")) ?? [])].slice(
+        0,
+        30,
+      );
+      await ctx.storage.set("index", index);
+
+      return { ...report, sheets };
+    },
+
+    /** ⭐ The host's model, called from a button. No API key in this file, no second SDK. */
+    async digest(ctx, args) {
+      const id = String(args?.id ?? "");
+      const sheets = await loadSheets(ctx, id);
+      const text = await ctx.llm(digestPrompt(sheets), {
+        schema: {
+          type: "object",
+          properties: {
+            headline: { type: "string" },
+            bullets: { type: "array", items: { type: "string" } },
+          },
+          required: ["headline", "bullets"],
+        },
+      });
+      let digest = { headline: "模型没有返回结论", bullets: [] as string[] };
+      try {
+        const parsed = JSON.parse(text);
+        digest = {
+          headline: String(parsed.headline ?? digest.headline),
+          bullets: Array.isArray(parsed.bullets)
+            ? parsed.bullets.map(String)
+            : [],
+        };
+      } catch {
+        digest = { headline: text.slice(0, 120), bullets: [] };
+      }
+
+      const stored = await ctx.storage.table("reports").get(id);
+      await ctx.storage.table("reports").set(id, { ...stored, digest });
+      const index = ((await ctx.storage.get("index")) ?? []).map((r) =>
+        r.id === id ? { ...r, digest } : r,
+      );
+      await ctx.storage.set("index", index);
+      return digest;
+    },
+
+    async remove(ctx, args) {
+      const id = String(args?.id ?? "");
+      await ctx.storage.table("reports").delete(id);
+      await ctx.storage.set(
+        "index",
+        ((await ctx.storage.get("index")) ?? []).filter((r) => r.id !== id),
+      );
+      return { ok: true };
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+{
+  "id": "com.example.sheets",
+  "name": "表格台",
+  "description": "文件进，格子上干活，哪里变了",
+  "version": "0.1.0",
+  "entry": "ui.tsx",
+  "acronym": "BG"
+}

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

@@ -0,0 +1,46 @@
+/* name: 桌面分栏 */
+/* Look-owned palette: walnut desk + amber desk-lamp. The papers are cream in BOTH modes —
+   a dark desk with lamp-lit paper is the desk; dark papers would read as mud. All ink is
+   dark in both modes for the same reason, so `--foreground` is never painted on the wood. */
+:root[data-mode="light"] {
+  --bg: #8a6845;
+  --fg: #33260f;
+  --surface: #faf5ea;
+  --surface-fg: #33260f;
+  --border: #6b4f2c;
+  --muted: #ebdfc6;
+  --muted-fg: #74603f;
+  --primary: #a8741c;
+  --primary-fg: #fdf6e7;
+  --secondary: #efe3c8;
+  --secondary-fg: #33260f;
+  --accent: #e9d9b4;
+  --accent-fg: #33260f;
+  --destructive: #a13d2d;
+  --destructive-fg: #fff8ee;
+  --ring: #c98f2e;
+  --input: #c7ab7d;
+  --radius: 12px;
+  --shadow: rgba(48, 32, 12, 0.42);
+}
+:root[data-mode="dark"] {
+  --bg: #2f2311;
+  --fg: #2e2113;
+  --surface: #f0e6cf;
+  --surface-fg: #2e2113;
+  --border: #7a5a30;
+  --muted: #e2d5b8;
+  --muted-fg: #5f4d30;
+  --primary: #a8741c;
+  --primary-fg: #fdf6e7;
+  --secondary: #e6d9b6;
+  --secondary-fg: #2e2113;
+  --accent: #dfcf9f;
+  --accent-fg: #2e2113;
+  --destructive: #b04938;
+  --destructive-fg: #fff3ec;
+  --ring: #d9a643;
+  --input: #e2d3ae;
+  --radius: 12px;
+  --shadow: rgba(8, 5, 1, 0.6);
+}