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

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

@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  Button,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+  Icon,
+  Input,
+  ListDetail,
+  useApp,
+} from "@monkey-mini-app/ui";
+
+import { ItemRow, type Item } from "./ui/item-row";
+
+type Filter = "all" | "active" | "done";
+type Stats = { total: number; active: number; done: number };
+
+const FILTERS: { id: Filter; label: string }[] = [
+  { id: "all", label: "全部" },
+  { id: "active", label: "先干" },
+  { id: "done", label: "已完" },
+];
+
+const WEEK_LABELS = ["一", "二", "三", "四", "五", "六", "日"];
+
+/*
+ * Real liquid glass, not frosted glass: the background is *displaced*, so the pane bends what is
+ * behind it. `backdrop-filter` accepts an SVG filter alongside the functions (verified in
+ * Chromium: `blur(2px) url(#id)` survives as written) — `LiquidDefs` below carries that filter.
+ *
+ * A displacement map can only bend structure that exists. Over a smooth gradient it renders
+ * nothing at all, which is why the sky carries grain and tight bokeh — see the wash layer.
+ *
+ * The refraction is gentle on purpose (`scale="45"`, `yChannelSelector="B"`): push it to
+ * `scale="130"` / `yChannelSelector="G"` and the text inside the pane starts wobbling — water, not glass.
+ *
+ * Non-Chromium engines drop `url()` here, so fall back to the old frost rather than a plain box.
+ */
+const REFRACTS =
+  typeof CSS !== "undefined" &&
+  typeof CSS.supports === "function" &&
+  CSS.supports("backdrop-filter", "blur(2px) url(#mma-liquid)");
+
+const GLASS = {
+  // Radius lives on the style, not a class: the old `ISLAND = "rounded-3xl"` was defined and
+  // never applied, which is why the panes looked hard-edged. Token so theme.css owns the size.
+  borderRadius: "var(--radius)",
+  backgroundColor: "color-mix(in oklch, var(--card) 14%, transparent)",
+  boxShadow:
+    "inset 0 1px 0 color-mix(in oklch, var(--card) 60%, transparent)," +
+    "inset 0 -1px 0 color-mix(in oklch, var(--card) 22%, transparent)," +
+    "inset 0 0 24px color-mix(in oklch, var(--card) 14%, transparent)," +
+    "0 14px 36px -10px var(--shadow)",
+  border: "1px solid color-mix(in oklch, var(--card) 28%, transparent)",
+  backdropFilter: REFRACTS
+    ? "blur(2px) saturate(160%) url(#mma-liquid)"
+    : "blur(18px) saturate(200%) brightness(1.08)",
+  WebkitBackdropFilter: REFRACTS
+    ? "blur(2px) saturate(160%)"
+    : "blur(18px) saturate(200%) brightness(1.08)",
+} as const;
+
+/** Soft card for the working set — not liquid. A full-bleed displaced pane eats the sky
+ *  and is why the facade never matched the floating-pill prototype. */
+const WORK = {
+  borderRadius: "var(--radius)",
+  backgroundColor: "color-mix(in oklch, var(--card) 78%, transparent)",
+  boxShadow: "0 10px 28px -12px var(--shadow)",
+  border: "1px solid color-mix(in oklch, var(--card) 40%, transparent)",
+  backdropFilter: "blur(12px) saturate(140%)",
+  WebkitBackdropFilter: "blur(12px) saturate(140%)",
+} as const;
+
+/**
+ * The filter lives in the app's own document — `backdrop-filter: url(#id)` resolves against the
+ * same DOM tree, so a mini-app carries its liquid glass with it. Hidden, zero-size, off-screen:
+ * a `width=0` svg still exposes its `<defs>` to the document.
+ */
+function LiquidDefs() {
+  return (
+    <svg
+      aria-hidden
+      className="pointer-events-none fixed -left-[9999px] top-0 h-0 w-0"
+    >
+      <defs>
+        {/* noise → blur (so the bend is smooth, not fuzzy) → displace the backdrop pixels */}
+        <filter
+          id="mma-liquid"
+          x="0%"
+          y="0%"
+          width="100%"
+          height="100%"
+          filterUnits="objectBoundingBox"
+        >
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.004"
+            numOctaves="2"
+            seed="3"
+            result="n"
+          />
+          <feGaussianBlur in="n" stdDeviation="1.8" result="m" />
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="m"
+            scale="45"
+            xChannelSelector="R"
+            yChannelSelector="B"
+          />
+        </filter>
+        {/* fine grain for the sky: the lens needs high-frequency detail behind it to read at all */}
+        <filter id="mma-grain">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.9"
+            numOctaves="2"
+          />
+          <feColorMatrix type="saturate" values="0" />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+export default function Ui() {
+  const { call } = useApp();
+  const [filter, setFilter] = useState<Filter>("all");
+  const [draft, setDraft] = useState("");
+  const [items, setItems] = useState<Item[]>([]);
+  const [stats, setStats] = useState<Stats>({ total: 0, active: 0, done: 0 });
+  const [sel, setSel] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // ⭐ key: refresh depends on filter; useCallback avoids an infinite loop
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const pack = (await call("list", { filter })) as {
+        items: Item[];
+        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]);
+
+  const current = items.find((i) => i.id === sel) ?? null;
+
+  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 () => {
+      const item = (await call("add", { title })) as Item;
+      setDraft("");
+      setSel(item.id);
+    });
+  }
+
+  const now = new Date();
+  const weekday = now.toLocaleDateString("zh-CN", { weekday: "long" });
+  const dateLabel = `${now.getMonth() + 1} 月 ${now.getDate()} 日`;
+  // this week, Monday-first, today marked — the wide island's whole job
+  const week = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(now);
+    d.setDate(now.getDate() - ((now.getDay() + 6) % 7) + i);
+    return {
+      label: WEEK_LABELS[i],
+      day: d.getDate(),
+      today: d.toDateString() === now.toDateString(),
+    };
+  });
+
+  return (
+    // ⭐ Look: glass-island (references/looks/glass-island.md) — a cluster of frosted widgets
+    //   floating on the sky, then the working set. The sky IS the palette: this app ships
+    //   theme.css, so `bg-background` is the look's own blue-grey. Do not paint a gradient over
+    //   it (that flattens the ground and the slabs stop reading as glass), and do not turn this
+    //   into a page-wide tile wall — that is aurora-bento.
+    <div className="bg-background relative flex h-full min-h-0 flex-col gap-3 overflow-hidden p-5">
+      <LiquidDefs />
+      {/* The lens can only bend what is there: soft pools for hue depth, tight bokeh and grain for
+          something with edges. Token-derived `color-mix()` on --primary / --card / --foreground, so a
+          different ThemePop choice or dark mode keeps working and the app ships no colour literal. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0"
+        style={{
+          // Floating haze: large soft orbs in white / mist-blue, low contrast. Light mode is
+          // haze-grey + white + a whisper of blue — not a saturated sky. Still enough structure
+          // (orb edges + grain) for the liquid lens to bend.
+          // Floating orbs must read against the haze ground: higher alpha, clearer edges,
+          // white + soft primary only (still not a saturated sky).
+          background:
+            "radial-gradient(55% 58% at 10% -4%, color-mix(in oklch, var(--card) 92%, transparent), transparent 68%)," +
+            "radial-gradient(48% 52% at 92% 4%, color-mix(in oklch, var(--primary) 38%, transparent), transparent 66%)," +
+            "radial-gradient(50% 45% at 72% 88%, color-mix(in oklch, var(--card) 80%, transparent), transparent 64%)," +
+            "radial-gradient(42% 48% at 12% 82%, color-mix(in oklch, var(--primary) 28%, transparent), transparent 64%)," +
+            "radial-gradient(160px 160px at 32% 28%, color-mix(in oklch, var(--card) 95%, transparent), transparent 70%)," +
+            "radial-gradient(130px 130px at 78% 36%, color-mix(in oklch, var(--primary) 32%, transparent), transparent 70%)," +
+            "radial-gradient(140px 140px at 52% 62%, color-mix(in oklch, var(--card) 88%, transparent), transparent 68%)," +
+            "radial-gradient(110px 110px at 22% 58%, color-mix(in oklch, var(--primary) 24%, transparent), transparent 70%)",
+        }}
+      />
+      {/* grain: finest structure; opacity high enough that the bend is legible on a mid sky */}
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute inset-0 h-full w-full opacity-[0.2]"
+      >
+        <rect width="100%" height="100%" filter="url(#mma-grain)" />
+      </svg>
+
+      {/* the island cluster: unequal spans, each widget says exactly one thing */}
+      {/* The sky has to stay visible around the cluster: an island stretched to every edge is
+          just a page with rounded corners. Cap the content and let `--background` frame it.
+          6 columns are written out rather than switched on at `md:` — a mini-app lives in a
+          panel of whatever width the user dragged it to, and this arrangement *is* the look. */}
+      <div className="relative mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col gap-3">
+        <div className="grid grid-cols-6 gap-3">
+          <div
+            style={GLASS}
+            className="col-span-2 row-span-2 flex flex-col justify-between p-4"
+          >
+            <p className="text-muted-foreground text-xs tracking-[0.18em] uppercase">
+              {weekday}
+            </p>
+            <p className="font-serif text-6xl leading-[0.82] font-medium tracking-tight tabular-nums">
+              {now.getDate()}
+            </p>
+            <p className="text-muted-foreground text-xs">{dateLabel}</p>
+          </div>
+
+          <div
+            style={GLASS}
+            className="col-span-4 flex items-center justify-between p-3"
+          >
+            {week.map((d) => (
+              <span
+                key={d.label}
+                className={
+                  d.today
+                    ? "bg-foreground text-background flex size-9 flex-col items-center justify-center rounded-full text-[11px] leading-tight"
+                    : "text-muted-foreground flex size-9 flex-col items-center justify-center rounded-full text-[11px] leading-tight"
+                }
+              >
+                <span className="opacity-70">{d.label}</span>
+                <span className="tabular-nums">{d.day}</span>
+              </span>
+            ))}
+          </div>
+
+          <div style={GLASS} className="col-span-2 p-4">
+            <p className="text-muted-foreground text-[11px]">进行中</p>
+            <p className="mt-1 text-2xl font-medium tabular-nums">
+              {stats.active}
+            </p>
+          </div>
+          <div style={GLASS} className="col-span-2 p-4">
+            <p className="text-muted-foreground text-[11px]">已完</p>
+            <p className="mt-1 text-2xl font-medium tabular-nums">
+              {stats.done}
+            </p>
+          </div>
+        </div>
+
+        {/* the working set: controls in its own header, ListDetail owns the remaining height */}
+        {/* Working set is a soft card, not liquid glass — wall-to-wall displacement ate the sky
+            and is why the facade never matched the floating-pill prototype. */}
+        <div style={WORK} className="relative flex min-h-0 flex-1 flex-col">
+          <div className="border-border/60 flex flex-wrap items-center gap-2 border-b p-3">
+            {FILTERS.map((f) => (
+              <Button
+                key={f.id}
+                size="sm"
+                variant={filter === f.id ? "default" : "ghost"}
+                onClick={() => setFilter(f.id)}
+              >
+                {f.label}
+              </Button>
+            ))}
+            <Button
+              size="sm"
+              variant="ghost"
+              className="ml-auto"
+              onClick={() => void act(() => call("archive", {}))}
+            >
+              <Icon.Archive size={16} strokeWidth={2} /> 归档
+            </Button>
+            <div className="flex w-full gap-2">
+              <Input
+                value={draft}
+                placeholder="加一件，回车"
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void add();
+                }}
+              />
+              <Button onClick={() => void add()} disabled={!draft.trim()}>
+                <Icon.Plus size={16} strokeWidth={2} />
+              </Button>
+            </div>
+            {error ? (
+              <p className="text-destructive w-full text-sm">{error}</p>
+            ) : null}
+          </div>
+
+          <div className="min-h-0 flex-1">
+            <ListDetail
+              list={
+                <ul>
+                  {loading && !items.length ? (
+                    <li className="text-muted-foreground px-3 py-4 text-sm">
+                      加载中…
+                    </li>
+                  ) : null}
+                  {!loading && !items.length ? (
+                    <li className="p-4">
+                      <Empty>
+                        <EmptyHeader>
+                          <EmptyTitle>这一屏还空着</EmptyTitle>
+                          <EmptyDescription>
+                            上面加一件，它会出现在左边。
+                          </EmptyDescription>
+                        </EmptyHeader>
+                      </Empty>
+                    </li>
+                  ) : null}
+                  {items.map((it) => (
+                    <li key={it.id}>
+                      <ItemRow
+                        item={it}
+                        selected={sel === it.id}
+                        onSelect={() => setSel(it.id)}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              }
+              detail={
+                current ? (
+                  <div className="flex flex-col gap-3 p-4">
+                    <h2 className="text-lg font-semibold">{current.title}</h2>
+                    <p className="text-muted-foreground text-sm">
+                      {new Date(current.createdAt).toLocaleString("zh-CN")}
+                    </p>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() =>
+                          void act(() => call("toggle", { id: current.id }))
+                        }
+                      >
+                        {current.done ? "标为未完" : "标为完成"}
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() =>
+                          void act(async () => {
+                            await call("remove", { id: current.id });
+                            setSel(null);
+                          })
+                        }
+                      >
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                ) : undefined
+              }
+              empty={
+                <p className="text-muted-foreground p-4 text-sm">
+                  点左边一条，这边打开。
+                </p>
+              }
+              mobileView={current ? "detail" : "list"}
+              onMobileBack={() => setSel(null)}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/skills/monkey-mini-app/templates/{monitor → watch}/main.api.ts

@@ -1,7 +1,7 @@
-import { defineDashboard } from "@monkeyagent/dashboard";
+import { defineApp } from "@monkey-mini-app/api";
 
-// ⭐ 关键：host 已经把 OS 基础指标给到 ctx.system.metrics()（内存/CPU/负载/uptime 都有），
-//         不要再用 bash 重算。ctx.bash 只用于拿 host 没有的：ps（进程）、df（磁盘）。
+// ⭐ key: the host already exposes OS basics via ctx.system.metrics() (memory/CPU/load/uptime are all there),
+//         so don't recompute them with bash. Use ctx.bash only for what the host lacks: ps (processes), df (disk).
 type Proc = { pid: string; cpu: number; mem: number; name: string };
 
 function fmtBytes(n: number): string {
@@ -26,7 +26,7 @@ async function sh(ctx, cmd: string): Promise<string> {
 }
 
 function parseProcesses(text: string): Proc[] {
-  // 最后一列是 comm，可能含空格；用最后一段当 name，前面 4 段是 pid/cpu/mem
+  // the last column is comm and may contain spaces; join the trailing tokens as name, the leading columns are pid/cpu/mem
   if (!text) return [];
   return text
     .split("\n")
@@ -53,14 +53,14 @@ function parseDisk(text: string): { total: number; used: number; avail: number;
   return { total, used, avail, usedPct, mount: cols[5] || "/" };
 }
 
-export default defineDashboard({
-  name: "系统监控",
-  description: "CPU / 内存 / 磁盘 / 进程实时指标",
+export default defineApp({
+  name: "值班屏",
+  description: "打开就自己在跳。没有开始按钮。",
   api: {
     async getSnapshot(ctx) {
       const base = await ctx.system.metrics();
       const platform = base?.platform || "";
-      // 内存/CPU/负载由 metrics 提供，这里只补 host 没有的：进程 + 磁盘
+      // memory/CPU/load come from metrics; only fill in what the host lacks here: processes + disk
       const [psText, dfLine] = await Promise.all([
         sh(ctx, platform === "darwin" ? "ps -axo pid,pcpu,pmem,comm -r | head -n 9" : "ps -axo pid,pcpu,pmem,comm --sort=-pcpu | head -n 9"),
         sh(ctx, "df -k / | tail -1"),

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

@@ -0,0 +1,8 @@
+{
+  "id": "com.example.watch",
+  "name": "值班屏",
+  "description": "打开就自己在跳。没有开始按钮。",
+  "version": "0.1.0",
+  "entry": "ui.tsx",
+  "acronym": "ZB"
+}

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

@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+
+import {
+  DashboardShell,
+  Reveal,
+  Sparkline,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  useApp,
+} from "@monkey-mini-app/ui";
+
+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 } = useApp();
+  const [snap, setSnap] = useState<Snapshot | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [memHist, setMemHist] = useState<number[]>([]);
+  const [loadHist, setLoadHist] = useState<number[]>([]);
+
+  // ⭐ key: polling — fetch every 2s; stop when the page is hidden (in background) to avoid wasted runs.
+  //         busy prevents issuing the next tick before the previous one returns; alive prevents setState after unmount.
+  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 memPct = snap?.memory.usedPct ?? 0;
+
+  return (
+    // ⭐ Look: tape — numerals + vertical rules, no card chrome. The shape is DashboardShell:
+    //   the hostname row and the KPI band are pinned, and the sparklines + process table are the
+    //   one scroller. Hand-rolled, that scroller tends to land on the outer column, and the first
+    //   table scroll takes the numbers off the top of a screen meant to be read from across a room.
+    <div className="h-full min-h-0 font-mono">
+      <DashboardShell
+        header={
+          <div className="text-muted-foreground flex items-center justify-between border-b px-4 py-2 text-xs tracking-widest uppercase">
+            <span>{snap?.hostname ?? "值班屏"}</span>
+            <span>每 2 秒 · {fmtUptime(snap?.uptimeSec ?? 0)}</span>
+          </div>
+        }
+        kpis={
+          <Reveal>
+            {/* four columns written out, not switched on at `md:` — the panel width is
+            user-dragged, so a breakpoint here is a lie (see `today`). */}
+            <div className="grid grid-cols-4 divide-x divide-border">
+              <div className="px-4 py-5">
+                <div className="text-muted-foreground text-[10px] tracking-widest uppercase">
+                  Load
+                </div>
+                <div className="mt-1 text-3xl font-medium tracking-tight tabular-nums">
+                  {load ? Number(load["1m"]).toFixed(2) : "—"}
+                </div>
+              </div>
+              <div className="px-4 py-5">
+                <div className="text-muted-foreground text-[10px] tracking-widest uppercase">
+                  Mem
+                </div>
+                <div className="mt-1 text-3xl font-medium tracking-tight tabular-nums">
+                  {memPct}%
+                </div>
+              </div>
+              <div className="px-4 py-5">
+                <div className="text-muted-foreground text-[10px] tracking-widest uppercase">
+                  Disk
+                </div>
+                <div className="mt-1 text-3xl font-medium tracking-tight tabular-nums">
+                  {snap?.disk ? `${snap.disk.usedPct}%` : "—"}
+                </div>
+              </div>
+              <div className="px-4 py-5">
+                <div className="text-muted-foreground text-[10px] tracking-widest uppercase">
+                  CPU
+                </div>
+                <div className="mt-1 text-3xl font-medium tracking-tight tabular-nums">
+                  {snap ? snap.cpu.count : "—"}
+                </div>
+              </div>
+            </div>
+          </Reveal>
+        }
+        main={
+          <>
+            {error ? (
+              <p className="text-destructive px-4 py-2 text-sm">{error}</p>
+            ) : null}
+            <div className="grid grid-cols-2 gap-0 border-t">
+              <div className="border-r p-4">
+                <Sparkline data={memHist.map((v) => ({ value: v }))} />
+              </div>
+              <div className="p-4">
+                <Sparkline data={loadHist.map((v) => ({ value: v }))} />
+              </div>
+            </div>
+            <div className="border-t">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-20">PID</TableHead>
+                    <TableHead className="w-24">CPU%</TableHead>
+                    <TableHead className="w-24">MEM%</TableHead>
+                    <TableHead>PROC</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>
+            </div>
+          </>
+        }
+      />
+    </div>
+  );
+}
+
+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/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "noEmit": true,
+    // main.api.ts runs on Node: Buffer/process are part of the backend authoring surface
+    // (the host's own static check whitelists the same names). exceljs and friends come
+    // from the repo's devDependencies so a template that names one still type-checks here.
+    "types": ["node"],
+    "paths": {
+      "@monkey-mini-app/api": ["../../packages/api/src/index.ts"],
+      "@monkey-mini-app/ui": ["../../packages/ui/src/index.ts"],
+      "@monkey-mini-app/ui/*": ["../../packages/ui/src/*"],
+      // The iframe vendors. An app directory has no node_modules, so these rows are the
+      // only reason `lodash` / `motion` are not red in the author's editor. Both motion
+      // rows are the **react** declaration, matching what /mma/vendors/motion.js ships
+      // (motion's own bare entry is the vanilla API and has no `motion.div`).
+      "lodash": ["../../node_modules/lodash-es"],
+      "lodash/*": ["../../node_modules/lodash-es/*"],
+      "motion": ["../../node_modules/motion/dist/react.d.ts"],
+      "motion/react": ["../../node_modules/motion/dist/react.d.ts"]
+    }
+  },
+  "include": ["templates/**/*.ts", "templates/**/*.tsx", "types/**/*.d.ts"]
+}

package/skills/monkey-mini-app/types/cdn.d.ts

@@ -0,0 +1 @@
+declare module "https://esm.sh/*";