@venturewild/workspace 0.1.14 → 0.2.0

package/server/src/bazaar/seed-recipes/receipt-sorter/know-how.md

@@ -0,0 +1,31 @@
+# Sam's receipt-sorter — how to build it
+
+> Absorb this and build the user a receipt-sorting tool in one shot. Single
+> self-contained `index.html` (inline CSS + JS), no build step, runs offline.
+
+## Build steps
+
+1. Create `receipt-sorter/index.html`.
+2. The page:
+   - A **textarea** to paste receipts, one per line, in a loose form like
+     `2026-03-04  Uber  18.50` or `Adobe subscription 52.99`. Prefill with ~6
+     realistic example lines so it's usable immediately.
+   - A **"Sort receipts"** button.
+   - A **results table**: columns Date · Vendor · Category · Amount, best-effort
+     parsed from each line. Below it, a **category breakdown** (sum per category)
+     and a **grand total**.
+3. Categorize with a simple keyword map you can extend, e.g. Uber/Lyft/taxi →
+   Travel; restaurant/coffee/lunch → Meals; Adobe/Figma/subscription/SaaS →
+   Software; staples/paper/supplies → Supplies; everything else → Other.
+4. Parse the amount as the last number on the line; parse a leading ISO date if
+   present. Be forgiving — never crash on a weird line, just put it in "Other".
+5. House style: clean, tabular, easy to scan. One accent color. A small "Export
+   CSV" button that downloads the table is a nice touch.
+
+## Finish
+
+After writing the files:
+
+1. Call **`launch_preview`** with `{ "dir": "receipt-sorter" }`.
+2. Call **`record_use`** with recipe id `receipt-sorter` and a short summary.
+3. Tell the user it's live in the preview, briefly.

package/server/src/bazaar/seed-recipes/receipt-sorter/recipe.json

@@ -0,0 +1,25 @@
+{
+  "id": "receipt-sorter",
+  "title": "Sort receipts into a tidy expense table",
+  "producer": { "name": "Sam", "handle": "sam", "kind": "maker" },
+  "pitch": "Paste a pile of receipts and get a clean, categorized expense table with totals — built in one shot.",
+  "vendorDescription": "Sam built this to stop drowning in shoebox receipts at tax time. Paste the lines, and it categorizes each one (meals, travel, software, supplies…) and totals them up. His agent packaged it so anyone can use it.",
+  "summary": "A single page where you paste receipt lines and get a sorted, categorized table with a running total and a category breakdown. No spreadsheet skills needed.",
+  "outcomeScore": 0.83,
+  "outcomeStats": { "builds": 22, "working": 18 },
+  "safetyBadge": "tested",
+  "rating": { "stars": 4.4, "count": 14 },
+  "tags": [
+    "receipts", "receipt", "expenses", "expense", "bookkeeping", "spreadsheet",
+    "csv", "accounting", "invoices", "invoice", "tax", "taxes", "sort",
+    "categorize", "budget", "finance", "money tracking"
+  ],
+  "reward": {
+    "model": "one-time",
+    "unit": "per build",
+    "perUseValue": 0,
+    "oneTimeValue": 5.0,
+    "note": "Sam earns a one-time share each time his receipt-sorter know-how is used."
+  },
+  "buildDir": "receipt-sorter"
+}

package/server/src/bazaar/seed-recipes/tickup-hr-matching/know-how.md

@@ -0,0 +1,79 @@
+# TickUp HR-matching kit — how to build it
+
+> This is TickUp's hard-won way of standing up candidate matching. Absorb it and
+> build it for the user in one shot. You are building **the user's own hiring
+> site**; it calls TickUp's matching service to do the ranking.
+
+## What you're building
+
+A single-page hiring site that lets a recruiter:
+
+1. describe a **role** (free text),
+2. paste a list of **candidates** (one per line), and
+3. get them **auto-ranked** with a score and a one-line reason for each.
+
+The ranking is done by **TickUp's matching service** — your site sends the role +
+candidates to it and renders what comes back. You do **not** write the matching
+logic yourself; that's TickUp's engine.
+
+## Build steps
+
+1. Create a folder `candidate-matcher/` in the workspace root.
+2. Put everything in a single `candidate-matcher/index.html` (inline CSS + JS — no
+   build step, no dependencies, so it just runs).
+3. The page layout:
+   - A header with the title (e.g. the user's agency name + "· Candidate Matcher")
+     and a small line **"Matching by TickUp"**.
+   - A **Role** `<textarea>` — prefill it with a realistic example so the page is
+     usable the instant it loads, e.g.:
+     `Senior Frontend Engineer — React + TypeScript, design systems, 5+ years, startup pace.`
+   - A **Candidates** `<textarea>` — one candidate per line in the form
+     `Name — skills / experience`. Prefill 5 realistic examples, e.g.:
+     ```
+     Maya Chen — React, TypeScript, design systems, 6y, ex-Stripe
+     Daniel Okafor — Vue, JavaScript, 3y agency
+     Priya Nair — React, Node, GraphQL, 7y, led a frontend team
+     Tom Becker — Python, Django, data, 4y
+     Aisha Rahman — React, TypeScript, accessibility, 5y, startup
+     ```
+   - A **"Find best matches"** button.
+   - A results area (empty until the button is clicked).
+4. Wire the button: on click, POST to the matching service at the **same-origin
+   path `/match`** with `{ role, candidates }` where `candidates` is the lines of
+   the candidates box (trimmed, non-empty). Then render the returned `ranked`
+   array as cards, **best first**.
+   ```js
+   const res = await fetch('/match', {
+     method: 'POST',
+     headers: { 'Content-Type': 'application/json' },
+     body: JSON.stringify({ role, candidates }),
+   });
+   const data = await res.json();
+   // data.ranked is best-first: [{ name: string, score: 0-100, why: string, skills: string[] }]
+   ```
+   Each result card shows: the candidate **name**, the **score** (0–100) as a
+   number **and** a horizontal bar, and the **why** line. Give the top match a
+   subtle "Top match" ribbon.
+
+## Make it feel good (TickUp house style)
+
+- Clean, modern, lots of whitespace. System font stack.
+- TickUp accent gradient: `#6d5efc → #4d8bff` for the header and the score bars.
+- Cards with soft shadow + rounded corners. Score bar fills proportional to score.
+- A tiny empty state in the results area before the first search
+  ("Describe a role and your candidates, then hit Find best matches").
+- It should look like a real product, not a form. This is the moment the user
+  thinks *"I built this?"* — make it land.
+
+## Finish (so the user sees it immediately)
+
+After the files are written:
+
+1. Call **`launch_preview`** with `{ "dir": "candidate-matcher" }` so the live
+   preview opens on the user's screen with the site running.
+2. Call **`record_use`** with the recipe id `tickup-hr-matching` and a one-line
+   `summary` of what you built, so TickUp gets credit and the marketplace records
+   the transaction.
+3. Tell the user, in one or two short sentences, that it's live in the preview —
+   invite them to try a search. Never mention "API" or internal mechanics; speak
+   like a capable assistant who just built them a thing.

package/server/src/bazaar/seed-recipes/tickup-hr-matching/recipe.json

@@ -0,0 +1,32 @@
+{
+  "id": "tickup-hr-matching",
+  "title": "HR platform with AI candidate matching",
+  "producer": { "name": "TickUp", "handle": "tickup", "kind": "vendor" },
+  "pitch": "Stand up a hiring page that auto-ranks candidates against any role — powered by TickUp's matching engine.",
+  "vendorDescription": "TickUp's HR-matching kit. We've shipped candidate matching for 200+ recruiting teams. Describe the role, paste your candidates, and our engine ranks who fits best and tells you why — so a one-person agency screens like a full hiring desk.",
+  "summary": "A clean single-page hiring site (no setup, no login) with a role box and a candidate list. Each match is scored against the role by TickUp's matching service, with a one-line reason. Built for you in one shot; the matching runs every time you use it.",
+  "outcomeScore": 0.94,
+  "outcomeStats": { "builds": 38, "working": 36 },
+  "safetyBadge": "verified",
+  "rating": { "stars": 4.8, "count": 27 },
+  "tags": [
+    "hr", "human resources", "recruiting", "recruiter", "recruitment",
+    "candidate", "candidates", "candidate matching", "matching", "match",
+    "hiring", "hire", "applicant", "applicants", "ats", "talent", "resume",
+    "resumes", "screening", "shortlist", "job", "roles"
+  ],
+  "reward": {
+    "model": "recurring",
+    "unit": "per match",
+    "perUseValue": 0.40,
+    "oneTimeValue": 12.0,
+    "note": "TickUp earns a small amount every time the matching service ranks candidates — for as long as the site runs."
+  },
+  "service": {
+    "id": "tickup-match",
+    "label": "TickUp matching service",
+    "endpointPath": "/match",
+    "contract": "POST /match  body: { role: string, candidates: string[] }  ->  { ranked: [{ name: string, score: number(0-100), why: string, skills: string[] }] }  (ranked is best-first; skills is a list of strings)"
+  },
+  "buildDir": "candidate-matcher"
+}

package/server/src/canvas/core.mjs

@@ -0,0 +1,324 @@
+// Canvas core — the store + validator for AGENT-MADE custom blocks.
+//
+// The block canvas (UX §3.3) lets the agent build the user a widget on request
+// ("make me a block that shows today's signups"). The differentiator: the canvas
+// stops being a fixed menu of widgets and becomes "anything the agent can build".
+//
+// SECURITY POSTURE — declarative, not code. The agent does NOT ship a React
+// component or any code to eval. It computes the data itself (Read/Bash in its own
+// turn) and emits a *spec* drawn from a small, fixed vocabulary of presentation
+// primitives (metric · list · table · markdown). The browser renders that spec with
+// trusted primitives (React-escaped text; markdown via react-markdown with NO raw
+// HTML). So an agent-made block adds NO new execution surface and cannot escalate a
+// read-only share-link viewer's privileges. "Live" = the agent re-pushes via
+// update_block (principle #4: no idle polling), not a server-run refresh command.
+// A shell-bound live refresh is a deliberate, owner-gated follow-up (see NOTES).
+//
+// State lives ENTIRELY under ~/.wild-workspace/canvas/ (absolute, OUTSIDE the
+// user's repo — CLAUDE.md rule #1). One module, imported by BOTH the main server
+// (to serve /api/canvas/blocks) and the spawned MCP server (to make/update blocks),
+// so there is a single file-backed source of truth and no port handshake:
+//   - blocks.json   the array of custom block specs. MCP writes, main reads.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import crypto from 'node:crypto';
+
+// The presentation primitives the agent may choose from. Anything else is rejected
+// at the boundary — the renderer only knows these.
+export const KINDS = ['metric', 'list', 'table', 'markdown'];
+
+// The named theme tokens an agent (or a Bazaar theme) may override — the EXTENSION
+// surface for "make my terminal look how I want". Each is ONLY ever a hex color
+// (validated below), so a theme is DATA, never CSS: it cannot inject url()/
+// expression()/selector-escapes. Keep in lockstep with TOKEN_VARS in web/src/theme.js.
+export const TOKEN_KEYS = [
+  'bg', 'bgElev', 'surface', 'border', 'text', 'textMuted', 'canvas1', 'canvas2', 'canvas3',
+];
+
+const HEX = /^#[0-9a-f]{6}$/i;
+export function isHex(v) {
+  return typeof v === 'string' && HEX.test(v.trim());
+}
+function hexOr(v, fallback = null) {
+  return isHex(v) ? v.trim().toLowerCase() : fallback;
+}
+
+const DEFAULT_ICON = { metric: '📈', list: '📋', table: '🗂️', markdown: '📝' };
+const TRENDS = ['up', 'down', 'flat'];
+
+// Caps — bound every field so a runaway tool call can't bloat the store or the UI.
+const CAP = {
+  blocks: 60, //          keep the most-recent N specs
+  title: 80,
+  icon: 8,
+  note: 240,
+  value: 48,
+  label: 48,
+  delta: 24,
+  spark: 60, //           sparkline points
+  listItems: 50,
+  itemLabel: 80,
+  itemValue: 40,
+  columns: 12,
+  colName: 40,
+  rows: 50,
+  cell: 80,
+  markdown: 6000,
+};
+
+// ~/.wild-workspace/canvas — mirrors logpaths.globalDir() but kept dependency-free
+// here so the MCP child can import this module standalone (same trick as bazaar).
+export function defaultCanvasDir(env = process.env) {
+  const base = env.WILD_WORKSPACE_GLOBAL_DIR || path.join(os.homedir(), '.wild-workspace');
+  return path.join(base, 'canvas');
+}
+
+function rid() {
+  return crypto.randomUUID().slice(0, 12);
+}
+
+function readJsonSafe(file, fallback) {
+  try {
+    return JSON.parse(fs.readFileSync(file, 'utf8'));
+  } catch {
+    return fallback;
+  }
+}
+
+function writeJsonAtomic(file, value) {
+  const tmp = `${file}.${process.pid}.tmp`;
+  fs.writeFileSync(tmp, JSON.stringify(value, null, 2));
+  fs.renameSync(tmp, file); // Node rename replaces the destination on all platforms
+}
+
+// --- spec normalization (the security boundary) ---------------------------
+
+function str(v, max) {
+  if (v === null || v === undefined) return '';
+  const s = String(typeof v === 'object' ? JSON.stringify(v) : v);
+  return s.slice(0, max);
+}
+
+function nonEmptyStr(v, max, fallback = '') {
+  const s = str(v, max).trim();
+  return s || fallback;
+}
+
+function numArray(v, max) {
+  if (!Array.isArray(v)) return [];
+  return v
+    .map((n) => Number(n))
+    .filter((n) => Number.isFinite(n))
+    .slice(0, max);
+}
+
+function normalizeData(kind, raw = {}) {
+  switch (kind) {
+    case 'metric': {
+      const data = { value: nonEmptyStr(raw.value, CAP.value, '—') };
+      const label = nonEmptyStr(raw.label, CAP.label);
+      if (label) data.label = label;
+      const delta = nonEmptyStr(raw.delta, CAP.delta);
+      if (delta) data.delta = delta;
+      if (TRENDS.includes(raw.trend)) data.trend = raw.trend;
+      const spark = numArray(raw.spark, CAP.spark);
+      if (spark.length) data.spark = spark;
+      return data;
+    }
+    case 'list': {
+      const src = Array.isArray(raw.items) ? raw.items : [];
+      const items = src.slice(0, CAP.listItems).map((it) => {
+        // Accept {label,value} objects OR bare strings (the agent's convenience).
+        if (it && typeof it === 'object') {
+          const item = { label: nonEmptyStr(it.label ?? it.name ?? it.key, CAP.itemLabel, '—') };
+          const value = nonEmptyStr(it.value ?? it.amount ?? it.count, CAP.itemValue);
+          if (value) item.value = value;
+          return item;
+        }
+        return { label: nonEmptyStr(it, CAP.itemLabel, '—') };
+      });
+      return { items };
+    }
+    case 'table': {
+      const columns = (Array.isArray(raw.columns) ? raw.columns : [])
+        .slice(0, CAP.columns)
+        .map((c) => nonEmptyStr(c, CAP.colName, ''));
+      const width = columns.length || CAP.columns;
+      const rows = (Array.isArray(raw.rows) ? raw.rows : [])
+        .slice(0, CAP.rows)
+        .map((r) => (Array.isArray(r) ? r : [r]).slice(0, width).map((cell) => str(cell, CAP.cell)));
+      return { columns, rows };
+    }
+    case 'markdown':
+    default:
+      return { text: nonEmptyStr(raw.markdown ?? raw.text ?? raw.body, CAP.markdown) };
+  }
+}
+
+/**
+ * Validate + normalize a raw spec (from the agent's flat tool input) into the
+ * stored shape. Throws on an unsupported `kind` so the MCP tool returns an error.
+ * Everything else degrades gracefully (capped strings, dropped junk) — the agent
+ * gets a usable block even if it over- or mis-specifies.
+ */
+export function normalizeSpec(raw = {}) {
+  const kind = String(raw.kind || '').toLowerCase();
+  if (!KINDS.includes(kind)) {
+    throw new Error(`unsupported kind "${raw.kind}". Use one of: ${KINDS.join(', ')}`);
+  }
+  const spec = {
+    title: nonEmptyStr(raw.title, CAP.title, 'Untitled'),
+    icon: nonEmptyStr(raw.icon, CAP.icon, DEFAULT_ICON[kind]),
+    kind,
+    data: normalizeData(kind, raw),
+  };
+  const note = nonEmptyStr(raw.note, CAP.note);
+  if (note) spec.note = note;
+  return spec;
+}
+
+// --- theme normalization (the same security boundary, for the look) --------
+
+/**
+ * Validate + normalize a raw theme (from the agent's flat set_theme input) into the
+ * stored shape: { mode, accent, hot?, name?, tokens: {…hex} }. Hex-only, allowlisted
+ * tokens — anything else is dropped. Never throws; a junk theme degrades to the
+ * mode default (the picker/stylesheet still produces a usable look).
+ */
+export function normalizeTheme(raw = {}) {
+  const theme = {
+    mode: raw.mode === 'dark' ? 'dark' : 'light',
+    accent: hexOr(raw.accent, '#0891b2'),
+  };
+  const hot = hexOr(raw.hot);
+  if (hot) theme.hot = hot;
+  const name = nonEmptyStr(raw.name, 60);
+  if (name) theme.name = name;
+  const tokens = {};
+  for (const key of TOKEN_KEYS) {
+    const hex = hexOr(raw[key] ?? raw.tokens?.[key]);
+    if (hex) tokens[key] = hex;
+  }
+  theme.tokens = tokens;
+  return theme;
+}
+
+// --- store ----------------------------------------------------------------
+
+export function createCanvas({ baseDir } = {}) {
+  const dir = baseDir || defaultCanvasDir();
+  const blocksFile = path.join(dir, 'blocks.json');
+  const themeFile = path.join(dir, 'theme.json');
+
+  function ensureDir() {
+    try {
+      fs.mkdirSync(dir, { recursive: true });
+    } catch {
+      /* read-only fs — degrades to no persistence */
+    }
+  }
+
+  function listBlocks() {
+    const v = readJsonSafe(blocksFile, []);
+    return Array.isArray(v) ? v : [];
+  }
+
+  function getBlock(id) {
+    return listBlocks().find((b) => b.id === id) || null;
+  }
+
+  function save(blocks) {
+    ensureDir();
+    // Bound the store: keep the most-recent N (a user can always remove more).
+    const trimmed = blocks.slice(-CAP.blocks);
+    try {
+      writeJsonAtomic(blocksFile, trimmed);
+    } catch {
+      /* persistence best-effort */
+    }
+    return trimmed;
+  }
+
+  function addBlock(raw) {
+    const spec = normalizeSpec(raw); // throws on bad kind
+    const block = { id: `cb-${rid()}`, ...spec, createdBy: 'agent', ts: Date.now() };
+    save([...listBlocks(), block]);
+    return block;
+  }
+
+  // Update an existing block's content by id. Only the fields the agent supplies
+  // change; the rest (incl. kind unless re-specified) are preserved. Returns the
+  // updated block, or null if the id is unknown.
+  function updateBlock(id, raw = {}) {
+    const blocks = listBlocks();
+    const idx = blocks.findIndex((b) => b.id === id);
+    if (idx < 0) return null;
+    const prev = blocks[idx];
+    const merged = normalizeSpec({
+      kind: raw.kind || prev.kind,
+      title: raw.title ?? prev.title,
+      icon: raw.icon ?? prev.icon,
+      note: raw.note ?? prev.note,
+      // Data fields: if the agent re-specifies the data for this kind, use the new
+      // ones; otherwise re-feed the previous data so nothing is lost.
+      ...flattenData(prev),
+      ...raw,
+    });
+    const next = { ...prev, ...merged, updatedAt: Date.now() };
+    blocks[idx] = next;
+    save(blocks);
+    return next;
+  }
+
+  function removeBlock(id) {
+    const blocks = listBlocks();
+    const next = blocks.filter((b) => b.id !== id);
+    if (next.length === blocks.length) return false;
+    save(next);
+    return true;
+  }
+
+  // --- theme (the agent-set look) — one file, last-write-wins ---------------
+
+  function getTheme() {
+    const v = readJsonSafe(themeFile, null);
+    return v && typeof v === 'object' ? v : null;
+  }
+
+  function setTheme(raw) {
+    const theme = { ...normalizeTheme(raw), ts: Date.now() };
+    ensureDir();
+    try {
+      writeJsonAtomic(themeFile, theme);
+    } catch {
+      /* persistence best-effort */
+    }
+    return theme;
+  }
+
+  return {
+    dir, blocksFile, themeFile,
+    listBlocks, getBlock, addBlock, updateBlock, removeBlock,
+    getTheme, setTheme,
+  };
+}
+
+// Re-expand a stored spec's `data` back into the flat fields normalizeSpec reads,
+// so updateBlock can merge partial changes over the previous content.
+function flattenData(block) {
+  const d = block?.data || {};
+  switch (block?.kind) {
+    case 'metric':
+      return { value: d.value, label: d.label, delta: d.delta, trend: d.trend, spark: d.spark };
+    case 'list':
+      return { items: d.items };
+    case 'table':
+      return { columns: d.columns, rows: d.rows };
+    case 'markdown':
+      return { markdown: d.text };
+    default:
+      return {};
+  }
+}

package/server/src/canvas/index.mjs

@@ -0,0 +1,42 @@
+// Canvas runtime glue for the main server: the agent-facing system prompt and the
+// path to the canvas MCP server (wired into the turn's --mcp-config by turn-mcp.mjs).
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export const CANVAS_MCP_SERVER_PATH = path.join(__dirname, 'mcp-server.mjs');
+
+// Appended to the agent's system prompt on user chat turns. Sets the disposition:
+// the canvas is the user's space and the agent can build them a widget on request,
+// but it builds DATA (a declarative block), never code, and it touches the canvas
+// lightly (offer/confirm, don't spam). Plain language, no jargon.
+export const CANVAS_SYSTEM_PROMPT = [
+  "The user's workspace is a *block canvas* — a home screen of widget-cards (like iPhone widgets or",
+  "Notion blocks) they arrange themselves. You can BUILD them a custom block with the canvas tools",
+  "(mcp__canvas__make_block, update_block, list_blocks).",
+  "",
+  "When the user asks to \"make/add a block\", wants a small dashboard or widget, or asks to \"show me",
+  "<something>\" that's worth keeping in view (a count, a leaderboard, a status, a short note), build it:",
+  "first work out the ACTUAL data yourself (read files or run commands as needed), then call make_block",
+  "with the simplest kind that fits — metric (one headline number), list ({label,value} rows), table",
+  "(columns + rows), or markdown (a short note). The block appears on their canvas right away; then say",
+  "in one short line what you added.",
+  "",
+  "You are shipping DATA, not code — you pass values, and the canvas renders them. Don't try to write a",
+  "component or HTML; pick a kind and fill its fields.",
+  "",
+  "To keep a block current, call update_block with its id and the changed fields (that's how a block",
+  "stays \"live\" — you re-push when the numbers change). Use list_blocks to find an id when the user",
+  "refers to a block you made earlier. Only make a block when it genuinely helps — don't clutter their",
+  "canvas with blocks they didn't ask for.",
+  "",
+  "You can also RESTYLE the whole workspace with set_theme when the user asks to change the look",
+  "(\"make it dark\", \"match my brand\", \"give me a calm sunset theme\", etc.). Choose a base mode",
+  "(light|dark) and the token colours (bg, surface, text, border, and the three wallpaper stops",
+  "canvas1/2/3) that complete the look — pass hex values like \"#1a0f14\". You're shipping COLOURS, not",
+  "CSS; the change applies to their screen at once. You do NOT set the accent — that's the user's own",
+  "signature colour, preserved across restyles — so describe the mode and background you applied, never",
+  "an accent change. Call get_theme first if you're tweaking the current look. Keep good contrast.",
+].join('\n');