projectkeeper 0.0.0-stage → 1.0.0

package/ui/keeper.css

@@ -0,0 +1,101 @@
+/* The Keeper view's two pages and Keeper activity (Spec §6.10, §6.9; D105). Own layer only (§6.16): reads the theme's
+   --pk-* tokens with factory fallbacks and adds no colour of its own. */
+
+/* The two pages */
+.kp-tabs{align-self:flex-start;width:max-content}
+.kp-tabs button{padding:4px 16px;font-weight:600}
+#kp-page,#kp-settings{display:flex;flex-direction:column;gap:12px}
+#kp-page>.stack{gap:12px}
+.kp-head .sub .tag{margin-right:4px}
+
+/* A block folded by default: one line that says what is inside and how much */
+.kp-fold>summary{flex-wrap:wrap}
+.kp-fold-head{color:var(--pk-text,#e7e7df)}
+.kp-fold-note{color:var(--pk-accent,#e3b76f);font-size:11.5px}
+.kp-fold>.content{padding-top:2px}
+.section>.content>.kp-fold{margin-top:2px}
+
+/* Takeover: the three depths */
+.kp-depths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
+.kp-depth{display:flex;flex-direction:column;gap:5px;padding:9px 10px;border:1px solid var(--pk-control-border,var(--pk-line,#35352f));border-radius:var(--pk-radius,6px);cursor:pointer;font-size:12px;line-height:1.45}
+.kp-depth .row{gap:7px}
+.kp-depth input{margin:0}
+.kp-depth.selected{border-color:var(--pk-accent,#e3b76f);background:var(--pk-accent-bg,#322c20)}
+.kp-depth.disabled{cursor:default;opacity:.62}
+.kp-depth:not(.disabled):hover{border-color:var(--pk-accent,#e3b76f)}
+.kp-why{font-style:italic}
+.kp-folder-row{align-items:flex-start;gap:12px;flex-wrap:nowrap}
+.kp-folder-text{gap:4px;max-width:110ch;line-height:1.5}
+.kp-folder-grant label.chk{display:flex;align-items:flex-start;gap:8px;line-height:1.5}
+.kp-folder-grant label.chk input{margin:3px 0 0}
+#kp-folder-name{max-width:320px;font-family:var(--pk-font-mono,ui-monospace,monospace)}
+.kp-start-row{align-items:center}
+@media (max-width:900px){.kp-depths{grid-template-columns:1fr}}
+
+/* Takeover: progress as the Keeper works */
+.kp-progress{border-top:1px solid var(--pk-line-soft,#2b2b26);padding-top:10px;gap:8px}
+.kp-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
+.kp-steps li>.btn{margin-left:6px}
+.kp-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
+.kp-lane-q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100ch}
+.kp-table-frame{overflow-x:auto}
+
+/* The briefing */
+.kp-briefing h4{margin-top:6px}
+.kp-briefing h4:first-child{margin-top:0}
+.kp-brief-text{line-height:1.6;max-width:110ch}
+.kp-work td:first-child .tag{margin-left:6px}
+.kp-work td,.kp-rounds td{padding:4px 8px}
+
+/* Clear */
+.kp-clear table td{padding:3px 8px;vertical-align:top}
+.kp-clear .kp-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
+.kp-warn{color:var(--pk-accent,#e3b76f)}
+#kp-clear-word{max-width:220px;font-family:var(--pk-font-mono,ui-monospace,monospace);letter-spacing:.06em}
+
+/* Daily */
+.kp-schedule-row{align-items:flex-end;gap:12px}
+.kp-schedule-row .field{min-width:150px}
+.kp-schedule-row select.input,.kp-schedule-row input.input{width:auto;min-width:150px}
+.kp-days{gap:6px;min-height:34px}
+.kp-day{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 7px;border:1px solid var(--pk-control-border,var(--pk-line,#35352f));border-radius:var(--pk-radius-sm,5px);cursor:pointer}
+.kp-day input{margin:0}
+.kp-status{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--pk-line-soft,#2b2b26);padding-top:8px}
+.kp-disabled{opacity:.6}
+[hidden].field{display:none}
+
+/* Keeper activity: a round is a row; its tree opens on a click */
+.ka-head{margin:6px 0 0}
+.ka-rounds{display:flex;flex-direction:column;gap:6px}
+.ka-round{border:1px solid var(--pk-section-border,var(--pk-line-soft,#2b2b26));border-radius:var(--pk-radius,6px)}
+.ka-round-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:7px 10px;cursor:pointer;list-style:none;font-size:12px}
+.ka-round-row::-webkit-details-marker{display:none}
+.ka-round-row::before{content:'▸';font-size:10px;color:var(--pk-text-faint,#85857b)}
+.ka-round[open]>.ka-round-row::before{content:'▾'}
+.ka-round-row .btn{margin-left:auto}
+.ka-round-result{flex-basis:100%;padding-left:16px}
+.ka-round-tree .kv-rounds{padding:4px 8px 10px}
+
+/* Model provider: the keys, the route, the backups (§6.10 key、模型与路由) */
+.kp-keys td{vertical-align:top;padding:5px 8px}
+.kp-keys .kp-mask{letter-spacing:.08em;white-space:nowrap}
+.kp-key-state{min-width:180px;max-width:340px}
+.kp-key-state .faint{font-size:11.5px;overflow-wrap:anywhere}
+.kp-key-actions{white-space:nowrap}
+.kp-key-actions .btn+.btn{margin-left:4px}
+input.kp-key-lanes{width:58px}
+.kp-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
+.kp-add-key,.kp-main-row{align-items:flex-end;gap:10px}
+.kp-add-key .field,.kp-main-row .field{min-width:150px}
+.kp-route{border-top:1px solid var(--pk-line-soft,#2b2b26);padding-top:10px;gap:8px}
+.kp-route h5{margin:6px 0 4px;font-size:12px}
+.kp-steps-route td{padding:4px 8px;vertical-align:top}
+.kp-steps-route select{max-width:420px}
+.kp-backup-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
+.kp-backup-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+.kp-backup-row select.input{width:auto;min-width:180px;max-width:360px}
+.kp-backup-row select.kp-order-key{width:200px}
+.kp-backup-row select.kp-order-model{width:300px}
+#kp-backup-add{width:auto;min-width:240px;max-width:360px}
+.kp-round-usage>summary{flex-wrap:wrap}
+.kp-model-usage td{padding:4px 8px;vertical-align:top}

package/ui/key-order.js

@@ -0,0 +1,62 @@
+/**
+ * The key order on `Keeper` → `Model provider` (Spec §6.10 备用与并行; CKC-03 AC-35): "When a key runs out of quota or is
+ * rate-limited". Its first row is the main key — the same setting as `Main model — key` — and every row, the first too,
+ * chooses its key and its model, and can be moved or taken out; whichever row is first is the main key. Pure functions, so
+ * the order the page sends is tested without a browser.
+ */
+
+/** The rows of the order: the main model first, then the backups. */
+export function orderRows(route) {
+  const thinking = route.main?.thinking ?? null;
+  return [...(route.main ? [{ provider: route.main.provider, id: route.main.id, thinking, keyName: route.main.keyName, usable: route.main.usable }] : []), ...route.backups];
+}
+
+/**
+ * What the page posts for an order (`POST /api/projects/:id/route`): the first row is the main model, the rest the
+ * backups. The main model's thinking stays with the first place; a key moved down keeps the thinking it had as a backup,
+ * or the main one's. `null` for an empty order: one key at least stays.
+ */
+export function orderBody(next, thinking) {
+  if (!next.length) return null;
+  const [main, ...backups] = next;
+  return { model: { provider: main.provider, id: main.id, thinking }, backups: backups.map((b) => ({ provider: b.provider, id: b.id, thinking: b.thinking ?? thinking })) };
+}
+
+/** The row at `i` moved by `d` (−1 earlier, +1 later). */
+export function moveRow(list, i, d) {
+  const next = [...list];
+  const [x] = next.splice(i, 1);
+  next.splice(i + d, 0, x);
+  return next;
+}
+
+/** The model a key runs in a row: the one asked for when the key carries it, else the main model, else its first. */
+export function modelFor(key, prefer, mainId) {
+  const has = (id) => Boolean(id) && key.models.some((m) => m.id === id);
+  return has(prefer) ? prefer : has(mainId) ? mainId : key.models[0]?.id;
+}
+
+/**
+ * Another key chosen for the row at `i` — every row chooses its key, the first too (one key per row). A key that sits in
+ * another row changes places with this one, each keeping its model; chosen for a lower row from the first, or for the
+ * first from a lower row, that is a change of the main key. A key outside the order takes the row, on the row's model
+ * when it carries it, else the main model, else its first; the key that was there leaves the order.
+ */
+export function chooseKey(list, i, key, mainId) {
+  const j = list.findIndex((x) => x.provider === key.id);
+  if (j === i || !list[i]) return list;
+  const next = [...list];
+  if (j >= 0) [next[i], next[j]] = [next[j], next[i]];
+  else next[i] = { provider: key.id, id: modelFor(key, list[i].id, mainId), thinking: list[i].thinking ?? null };
+  return next;
+}
+
+/**
+ * The main row's `Use` with a key that sits in a lower row of the order (DA): the two rows change places, as the list's
+ * own select does, and the first row runs the model chosen — the old main key stays in the order, where it was dropped
+ * before. `null` when the key is the main key already or is outside the order: the main model is then set as before.
+ */
+export function mainChosen(list, key, model, mainId) {
+  if (!key || list.findIndex((x) => x.provider === key.id) <= 0) return null;
+  return chooseKey(list, 0, key, mainId).map((x, i) => (i === 0 ? { ...x, id: model } : x));
+}

package/ui/list-fold.js

@@ -0,0 +1,67 @@
+// The List's blocks that open and close (Spec §6.3 `List`; E153): the top plate, each earlier generation's row, each
+// module's block, the foundation's and the cross-cutting ring's. Every one is folded to its head until the owner opens
+// it (owner, 2026-10-01: 「这个我改过ui的地方，可以点击放开收上去，这样就是想看哪个module就可以点着看了，否则太长了」), so
+// the whole List is about one screen and reads as the project's contents.
+//
+// What the owner opened is a choice of this browser, like the rail and the theme (shell-state.js): it lives in
+// `localStorage`, per project, never in the project's assets, and holds across a refresh of the view's data and a
+// reload of the page. Storage can be missing or throw (a private window, blocked site data); the choice then holds on
+// this page only. A work row's own fold — its `Process` · `Outcome` — is the process view's one rule (k-fold.js).
+//
+// No DOM here, so the rule is tested with `node --test` (src/ui/list-fold.test.ts). views.js draws the blocks from it.
+
+export const LIST_FOLD_KEY = 'pk.list.open';
+
+/** The keys of the List's blocks. A module's and the foundation's block go by their area; the ring's has no area. */
+export const PLATE_KEY = 'plate';
+export const CROSS_KEY = 'block:cross';
+export const blockKey = (areaId) => `block:${areaId}`;
+export const generationKey = (generationId) => `gen:${generationId}`;
+
+/** `storage`: the browser's `localStorage` when left out; null for none (the choice then holds on the page). */
+export function createListFold(storage) {
+  const store = () => (storage === undefined ? globalThis.localStorage : storage);   // read inside try: it can throw
+  let here = null;   // project id → the keys open in it; read from the browser once, kept on the page when there is none
+  const read = () => {
+    if (here) return here;
+    here = new Map();
+    try {
+      const kept = JSON.parse(store()?.getItem(LIST_FOLD_KEY) ?? '{}');
+      if (kept && typeof kept === 'object' && !Array.isArray(kept)) {
+        for (const [pid, keys] of Object.entries(kept)) if (Array.isArray(keys)) here.set(pid, new Set(keys.filter((k) => typeof k === 'string')));
+      }
+    } catch { /* nothing kept, or not ours: every block folded */ }
+    return here;
+  };
+  const write = () => {
+    const kept = {};
+    for (const [pid, keys] of read()) if (keys.size) kept[pid] = [...keys];
+    try { store()?.setItem(LIST_FOLD_KEY, JSON.stringify(kept)); } catch { /* remembered on this page only */ }
+  };
+  const openIn = (pid) => read().get(pid) ?? new Set();
+  const set = (pid, key, open) => {
+    const keys = read().get(pid) ?? new Set();
+    open = Boolean(open);
+    if (open === keys.has(key)) return open;
+    if (open) keys.add(key); else keys.delete(key);
+    read().set(pid, keys);
+    write();
+    return open;
+  };
+  return {
+    /** Whether a block is open: only when the owner opened it. */
+    isOpen: (pid, key) => openIn(pid).has(key),
+    set,
+    toggle: (pid, key) => set(pid, key, !openIn(pid).has(key)),
+    /**
+     * `Expand all` opens every block the List draws now (`keys`); `Fold all` folds every block of the project, the
+     * ones no longer drawn with them, so nothing stale is kept.
+     */
+    setAll(pid, keys, open) {
+      read().set(pid, open ? new Set([...openIn(pid), ...keys]) : new Set());
+      write();
+    },
+    allOpen: (pid, keys) => keys.length > 0 && keys.every((k) => openIn(pid).has(k)),
+    anyOpen: (pid, keys) => keys.some((k) => openIn(pid).has(k)),
+  };
+}

package/ui/markdown.d.ts

@@ -0,0 +1,21 @@
+/** Types for markdown.js, so the node tests under src/ check against them. The browser never loads this file. */
+export type Inline =
+  | { t: 'text'; v: string }
+  | { t: 'br' }
+  | { t: 'code'; v: string }
+  | { t: 'b' | 'i' | 's'; kids: Inline[] }
+  /** `href` is null when the address is not plain http(s): the words are shown, and they go nowhere. */
+  | { t: 'a'; href: string | null; raw: string; img?: boolean; kids: Inline[] }
+  | { t: 'cite'; id: string };
+export type Block =
+  | { t: 'p'; kids: Inline[] }
+  | { t: 'h'; level: number; kids: Inline[] }
+  | { t: 'code'; lang: string; text: string }
+  | { t: 'hr' }
+  | { t: 'quote'; kids: Block[] }
+  | { t: 'list'; ordered: boolean; start: number | null; items: Block[][] }
+  | { t: 'table'; align: string[]; head: Inline[][]; rows: Inline[][][] };
+export function parseMarkdown(text: string): Block[];
+export function parseInline(src: string): Inline[];
+export function safeHref(href: string): string | null;
+export function fillMarkdown<T>(target: T, text: string, options?: { onCite?: (id: string) => void }): T;