wield-mcp 0.0.0-stage → 0.1.2

package/dist/extension/tokens.css

@@ -0,0 +1,201 @@
+/* generated from design/tokens.css */
+/* @tokens:start */
+:root {
+  /* ---- type ---- */
+  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+
+  --fs-display-xl: clamp(2.75rem, 1.55rem + 4.9vw, 5.5rem);   /* 44 -> 88 */
+  --fs-display-l:  clamp(2.125rem, 1.45rem + 2.8vw, 3.75rem); /* 34 -> 60 */
+  --fs-display-m:  clamp(1.625rem, 1.3rem + 1.35vw, 2.375rem);/* 26 -> 38 */
+  --fs-title: 1.375rem;   /* 22 */
+  --fs-lead:  1.1875rem;  /* 19 */
+  --fs-body:  1rem;       /* 16 */
+  --fs-small: 0.875rem;   /* 14 */
+  --fs-xs:    0.8125rem;  /* 13 */
+  --fs-label: 0.71875rem; /* 11.5 mono labels, buttons */
+  --fs-code:  0.8125rem;  /* 13 */
+
+  --lh-display: 0.98;
+  --lh-heading: 1.08;
+  --lh-snug: 1.3;
+  --lh-body: 1.55;
+  --lh-code: 1.65;
+
+  --tr-display: -0.035em;   /* display-xl */
+  --tr-heading: -0.03em;    /* display-l */
+  --tr-heading-m: -0.022em; /* display-m */
+  --tr-title: -0.012em;
+  --tr-label: 0.06em;
+
+  --wght-display: 540;
+  --wght-strong: 560;
+  --wdth-display: 92%;   /* Instrument Sans width axis; fallbacks ignore it */
+
+  /* ---- space (4px base) ---- */
+  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
+  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
+
+  /* ---- radii: grows with the size of the thing ---- */
+  --r-1: 3px;    /* highlighter, keycaps */
+  --r-2: 6px;    /* buttons, inputs, chips */
+  --r-3: 10px;   /* cards */
+  --r-4: 14px;   /* panels, playground */
+  --r-pill: 999px; /* status badges only */
+
+  /* ---- layout ---- */
+  --page-max: 1200px;
+  --header-h: 60px;
+
+  /* ---- motion ---- */
+  --dur-1: 120ms;  /* hover, press */
+  --dur-2: 200ms;  /* state change */
+  --dur-3: 320ms;  /* panel swap */
+  --dur-4: 560ms;  /* the URL swap */
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
+  --ease-mark: cubic-bezier(0.7, 0, 0.2, 1);
+
+  /* ---- color: light (default) ---- */
+  --bg: #f5f5f3;          /* page */
+  --bg-sunken: #eeeeeb;   /* code blocks, insets */
+  --surface: #ffffff;     /* cards */
+  --surface-2: #fafaf8;   /* hover */
+  --surface-3: #e9e9e5;   /* chips, pressed */
+  --line: #e2e2dd;        /* hairline */
+  --line-2: #d1d1cb;      /* strong hairline, input border */
+  --line-3: #b4b4ad;      /* input hover */
+  --ink: #121311;         /* text, primary button */
+  --ink-2: #3b3c38;       /* body */
+  --ink-3: #5f605a;       /* secondary, 5.6:1 on --bg */
+  --ink-4: #8d8e88;       /* disabled, decorative only (3.1:1) */
+  --on-ink: #f7f7f4;      /* text on --ink */
+
+  --hivis: #ffc23d;       /* the accent (molten). Fill only, never text on light */
+  --hivis-2: #ffb01f;     /* hover/pressed fill */
+  --hivis-wash: #fff1dc;  /* faint tint, max one area per view */
+  --on-hivis: #1a0c00;    /* text on hi-vis */
+
+  --ok: #157a4a;      --ok-wash: #e3f2e9;   --ok-line: #b8dcc6;
+  --warn: #8f560b;    --warn-wash: #fbf0dc; --warn-line: #ebd2a4;
+  --fail: #bf3328;    --fail-wash: #fbe7e4; --fail-line: #efc0ba;
+  --run: #3b3c38;     --run-wash: #ecece8;  --run-line: #d6d6d0;
+
+  --focus: #121311;
+  --scrim: rgba(18, 19, 17, 0.4);
+
+  /* dark "bench" panels: build log, terminal, agent transcript */
+  --panel: #111210;
+  --panel-2: #181917;
+  --panel-3: #20211f;
+  --panel-line: #282926;
+  --panel-line-2: #363733;
+  --panel-ink: #ecece8;
+  --panel-ink-2: #aeafa8;
+  --panel-ink-3: #82837d;  /* 4.9:1 on --panel */
+  --panel-ok: #62d39c;
+  --panel-warn: #f0b552;
+  --panel-fail: #ff7d70;
+  --syn-str: #e3d09c;
+  --syn-num: #a3d9c3;
+  --syn-key: #ecece8;
+  --syn-punc: #82837d;
+
+  /* elevation: stacked hairline shadows, never one heavy drop */
+  --e1: 0 0 0 1px rgba(18, 19, 17, 0.07);
+  --e2: 0 0 0 1px rgba(18, 19, 17, 0.07), 0 1px 1px rgba(18, 19, 17, 0.03), 0 2px 4px rgba(18, 19, 17, 0.04);
+  --e3: 0 0 0 1px rgba(18, 19, 17, 0.07), 0 2px 2px rgba(18, 19, 17, 0.03), 0 8px 16px -4px rgba(18, 19, 17, 0.07);
+  --e4: 0 0 0 1px rgba(18, 19, 17, 0.08), 0 2px 2px rgba(18, 19, 17, 0.03), 0 12px 24px -6px rgba(18, 19, 17, 0.10), 0 32px 56px -20px rgba(18, 19, 17, 0.16);
+  --e-panel: 0 0 0 1px rgba(18, 19, 17, 0.9), 0 12px 32px -12px rgba(18, 19, 17, 0.35);
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0d0e0d;
+    --bg-sunken: #131412;
+    --surface: #161715;
+    --surface-2: #1b1c1a;
+    --surface-3: #252623;
+    --line: #272825;
+    --line-2: #363733;
+    --line-3: #4b4c47;
+    --ink: #f0f0ec;
+    --ink-2: #c8c9c2;
+    --ink-3: #9a9b94;
+    --ink-4: #6b6c66;
+    --on-ink: #121311;
+
+    --hivis: #ffc23d;
+    --hivis-2: #ffd35c;
+    --hivis-wash: #2a1a08;
+    --on-hivis: #1a0c00;
+
+    --ok: #55c98f;    --ok-wash: #112a1d;   --ok-line: #224d37;
+    --warn: #e8ab4c;  --warn-wash: #2c2311;  --warn-line: #574219;
+    --fail: #ff7568;  --fail-wash: #321614;  --fail-line: #5f2924;
+    --run: #c8c9c2;   --run-wash: #222320;   --run-line: #363733;
+
+    --focus: #ff8a1f;
+    --scrim: rgba(0, 0, 0, 0.6);
+
+    --panel: #121311;
+    --panel-2: #191a18;
+    --panel-3: #21221f;
+    --panel-line: #2a2b28;
+    --panel-line-2: #393a36;
+
+    --e1: 0 0 0 1px rgba(255, 255, 255, 0.07);
+    --e2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
+    --e3: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.5);
+    --e4: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 12px 24px -6px rgba(0, 0, 0, 0.55), 0 32px 56px -20px rgba(0, 0, 0, 0.7);
+    --e-panel: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
+
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme="dark"] {
+  --bg: #0d0e0d;
+  --bg-sunken: #131412;
+  --surface: #161715;
+  --surface-2: #1b1c1a;
+  --surface-3: #252623;
+  --line: #272825;
+  --line-2: #363733;
+  --line-3: #4b4c47;
+  --ink: #f0f0ec;
+  --ink-2: #c8c9c2;
+  --ink-3: #9a9b94;
+  --ink-4: #6b6c66;
+  --on-ink: #121311;
+
+  --hivis: #ffc23d;
+  --hivis-2: #ffd35c;
+  --hivis-wash: #2a1a08;
+  --on-hivis: #1a0c00;
+
+  --ok: #55c98f;    --ok-wash: #112a1d;   --ok-line: #224d37;
+  --warn: #e8ab4c;  --warn-wash: #2c2311;  --warn-line: #574219;
+  --fail: #ff7568;  --fail-wash: #321614;  --fail-line: #5f2924;
+  --run: #c8c9c2;   --run-wash: #222320;   --run-line: #363733;
+
+  --focus: #ff8a1f;
+  --scrim: rgba(0, 0, 0, 0.6);
+
+  --panel: #121311;
+  --panel-2: #191a18;
+  --panel-3: #21221f;
+  --panel-line: #2a2b28;
+  --panel-line-2: #393a36;
+
+  --e1: 0 0 0 1px rgba(255, 255, 255, 0.07);
+  --e2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --e3: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.5);
+  --e4: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 12px 24px -6px rgba(0, 0, 0, 0.55), 0 32px 56px -20px rgba(0, 0, 0, 0.7);
+  --e-panel: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
+
+  color-scheme: dark;
+}
+/* @tokens:end */

package/dist/extension/ui.css

@@ -0,0 +1,216 @@
+/* Wield extension UI. Tokens come from design/tokens.css (copied to dist/tokens.css
+   at build). No web fonts: an extension page that loaded Google Fonts would send a
+   request off the device, so we use the token fallback stacks. */
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; } /* component display rules must never override hidden */
+html, body { margin: 0; }
+body {
+  background: var(--bg);
+  color: var(--ink-2);
+  font: 400 var(--fs-small)/var(--lh-body) var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+}
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
+::selection { background: var(--hivis); color: var(--on-hivis); }
+
+.mono { font-family: var(--font-mono); font-size: var(--fs-code); }
+.label {
+  font: 400 var(--fs-label)/1.4 var(--font-mono);
+  text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--ink-3);
+  margin: 0 0 var(--s-2);
+}
+.muted { color: var(--ink-3); }
+.num { font-variant-numeric: tabular-nums; }
+
+/* header */
+.top {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
+  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface);
+}
+.brand { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; }
+.brand svg { width: 18px; height: 18px; display: block; }
+.brand b { font: 600 15px/1 var(--font-sans); letter-spacing: -0.04em; }
+
+/* status badge: text + color, never color alone */
+.badge {
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
+  font: 400 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tr-label);
+  padding: 5px 8px; border-radius: var(--r-pill); border: 1px solid var(--run-line); background: var(--run-wash); color: var(--run);
+}
+.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.badge.ok { color: var(--ok); background: var(--ok-wash); border-color: var(--ok-line); }
+.badge.warn { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); }
+.badge.fail { color: var(--fail); background: var(--fail-wash); border-color: var(--fail-line); }
+.badge.plain::before { display: none; }
+
+section { padding: var(--s-4); border-bottom: 1px solid var(--line); }
+section:last-of-type { border-bottom: 0; }
+
+/* hairline rows */
+.rows { list-style: none; margin: 0; padding: 0; }
+.rows > li { display: grid; gap: 2px var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
+.rows > li:first-child { border-top: 0; padding-top: 0; }
+.empty { color: var(--ink-3); margin: 0; }
+
+.site { grid-template-columns: 1fr auto; align-items: center; }
+.site .name { color: var(--ink); font-weight: 500; }
+.site .sub { grid-column: 1; color: var(--ink-3); font-size: var(--fs-xs); }
+.site .badge { grid-row: 1 / span 2; grid-column: 2; }
+
+.run-head { display: flex; justify-content: space-between; gap: var(--s-2); align-items: flex-start; }
+.run-head .id { flex: 1; min-width: 0; color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-code); overflow-wrap: anywhere; }
+.run-head .badge { flex: none; }
+.run-meta { color: var(--ink-3); font-size: var(--fs-xs); }
+.reqs {
+  list-style: none; margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-3);
+  background: var(--bg-sunken); border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line);
+  font: 400 12px/1.5 var(--font-mono); color: var(--ink-2);
+}
+.reqs li { display: grid; grid-template-columns: 3.4em 1fr auto auto; gap: 2px var(--s-2); padding: 2px 0; }
+.reqs .path { overflow-wrap: break-word; word-break: normal; color: var(--ink); min-width: 0; }
+.reqs .host { color: var(--ink-3); }
+.reqs .st { color: var(--ok); }
+.reqs .st.bad { color: var(--fail); }
+.reqs .ms { color: var(--ink-3); text-align: right; min-width: 4.5em; }
+
+.proof {
+  margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3);
+  border-top: 1px solid var(--line); background: var(--surface);
+}
+
+.hint { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
+.hint code { font-family: var(--font-mono); background: var(--bg-sunken); padding: 1px 4px; border-radius: var(--r-1); color: var(--ink-2); }
+
+/* buttons */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
+  height: 40px; padding: 0 var(--s-4); border-radius: var(--r-2); cursor: pointer;
+  font: 400 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tr-label);
+  border: 1px solid transparent; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+}
+.btn-sm { height: 32px; padding: 0 var(--s-3); }
+.btn-primary { background: var(--ink); color: var(--on-ink); }
+.btn-primary:hover { background: var(--ink-2); }
+.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
+.btn-secondary:hover { border-color: var(--line-3); background: var(--surface-2); }
+.btn-ghost { background: transparent; color: var(--ink-2); }
+.btn-ghost:hover { background: var(--surface-3); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
+.reqs li.dest { display: block; color: var(--ink-3); padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
+
+/* ---------------------------------------------------------------------------
+   Allow window (confirm.html). Calm on purpose: paper, ink, hairlines. No
+   warning colors; the decision is the user's, not an alarm. Classes are
+   semantic (ask-*) so a redesign only touches this block.
+   --------------------------------------------------------------------------- */
+body.ask { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
+.ask-body { flex: 1; padding: var(--s-5) var(--s-5) var(--s-4); }
+.ask-eyebrow { margin-bottom: var(--s-2); }
+.ask-title {
+  margin: 0 0 var(--s-2); color: var(--ink);
+  font: var(--wght-display) var(--fs-title)/var(--lh-snug) var(--font-sans);
+  letter-spacing: var(--tr-title); text-wrap: balance; overflow-wrap: anywhere;
+}
+.ask-site { margin: 0 0 var(--s-5); color: var(--ink-3); }
+.ask-site b { color: var(--ink-2); font-weight: 500; }
+.ask-section { margin: 0 0 var(--s-4); padding: 0; border: 0; }
+.ask-writes { list-style: none; margin: 0; padding: 0; border-radius: var(--r-3); background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); }
+.ask-write { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
+.ask-write:first-child { border-top: 0; }
+.ask-request { display: flex; gap: var(--s-2); align-items: baseline; font: 400 var(--fs-code)/1.5 var(--font-mono); }
+.ask-method { color: var(--ink); font-weight: 500; min-width: 3.6em; }
+.ask-path { color: var(--ink-2); overflow-wrap: anywhere; }
+.ask-fields { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
+.ask-field { font: 400 12px/1 var(--font-mono); color: var(--ink-2); background: var(--surface); padding: 5px 7px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--line-2); }
+.ask-nofields { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
+.ask-explain { margin: 0 0 var(--s-2); color: var(--ink-2); }
+.ask-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); max-width: 46ch; }
+.ask-gone { padding: var(--s-6) 0; color: var(--ink-3); }
+
+.ask-foot {
+  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
+  padding: var(--s-3) var(--s-5) var(--s-4); background: var(--bg); border-top: 1px solid var(--line);
+}
+.ask-timer { position: absolute; left: 0; right: 0; top: -1px; height: 1px; overflow: hidden; }
+.ask-timer span { display: block; height: 100%; background: var(--ink-3); transform-origin: left; transition-property: transform; transition-timing-function: linear; }
+.ask-timer span.run { transform: scaleX(0); }
+.ask-countdown { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
+.ask-actions { display: flex; gap: var(--s-2); flex: none; }
+@media (prefers-reduced-motion: reduce) { .ask-timer { display: none; } }
+
+/* ---------------------------------------------------------------------------
+   Recording review (record.html). Same calm system as the Allow window.
+   --------------------------------------------------------------------------- */
+body.rec { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
+.rec-body { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-5); }
+.rec-title { margin: 0 0 var(--s-2); color: var(--ink); font: var(--wght-display) var(--fs-display-m)/var(--lh-heading) var(--font-sans); letter-spacing: var(--tr-heading-m); text-wrap: balance; }
+.rec-sub { margin: 0 0 var(--s-5); color: var(--ink-3); }
+.rec-facts { list-style: none; margin: 0 0 var(--s-6); padding: 0; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--line); }
+.rec-fact { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); color: var(--ink-2); }
+.rec-fact:first-child { border-top: 0; }
+.rec-section { margin-bottom: var(--s-5); }
+.rec-requests { list-style: none; margin: 0; padding: 0; }
+.rec-request { padding: var(--s-2) 0; border-top: 1px solid var(--line); }
+.rec-line { display: grid; grid-template-columns: 3.6em 1fr auto; gap: var(--s-2); font: 400 var(--fs-code)/1.5 var(--font-mono); }
+.rec-method { color: var(--ink); }
+.rec-path { color: var(--ink-2); overflow-wrap: anywhere; }
+.rec-status { color: var(--ink-3); }
+.rec-detail { margin: 2px 0 0 4.2em; font-size: var(--fs-xs); color: var(--ink-3); }
+.rec-raw summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-small); }
+.rec-raw pre { max-height: 50vh; overflow: auto; margin: var(--s-3) 0 0; padding: var(--s-3); border-radius: var(--r-3); background: var(--bg-sunken); font: 12px/1.5 var(--font-mono); color: var(--ink-2); }
+.rec-error { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--fail-wash); color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail-line); }
+.rec-public { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-3) 0 var(--s-5); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
+.rec-public input { margin-top: 2px; flex: none; accent-color: var(--ink); }
+.rec-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--bg); }
+.rec-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); flex: 1 1 24ch; max-width: 52ch; }
+.rec-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
+
+/* popup: teach a site */
+.rec-start { display: flex; gap: var(--s-2); }
+.input { flex: 1; min-width: 0; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; }
+.input:hover { border-color: var(--line-3); }
+
+.ask-body-preview { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); max-height: 180px; overflow: auto; border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font: 12px/1.5 var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* popup: per-site rows */
+.site .site-actions { grid-column: 1 / -1; display: flex; gap: var(--s-1); margin-top: 2px; }
+.site .site-hint { color: var(--ink-2); }
+.site-policy .name { color: var(--ink); }
+.btn-xs { height: 24px; padding: 0 var(--s-2); font-size: 10.5px; }
+.sites-all { margin-top: var(--s-2); }
+.sites-all summary { cursor: pointer; font-size: var(--fs-xs); color: var(--ink-3); }
+.sites-all .site { grid-template-columns: 1fr auto auto; }
+.sites-all .site .site-actions { grid-column: auto; margin: 0; }
+
+/* ---------------------------------------------------------------------------
+   First-run page (welcome.html)
+   --------------------------------------------------------------------------- */
+body.welcome { min-height: 100vh; background: var(--bg); }
+.welcome-body { max-width: 720px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-8); }
+.welcome-title { margin: 0 0 var(--s-3); color: var(--ink); font: var(--wght-display) var(--fs-display-m)/var(--lh-heading) var(--font-sans); letter-spacing: var(--tr-heading-m); text-wrap: balance; }
+.welcome-lead { margin: 0 0 var(--s-6); font-size: var(--fs-lead); color: var(--ink-2); max-width: 36em; }
+.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
+.welcome-step { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--e1); }
+.welcome-step h2 { margin: 4px 0 var(--s-1); font: 560 var(--fs-body)/1.3 var(--font-sans); color: var(--ink); }
+.welcome-step p { margin: 0 0 var(--s-2); color: var(--ink-2); }
+.welcome-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 12px/1 var(--font-mono); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
+.welcome-step[data-state="done"] .welcome-num { background: var(--ok-wash); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
+.welcome-step[data-state="done"] .welcome-num::before { content: "✓"; font-size: 14px; }
+.welcome-step[data-state="done"] .welcome-num { font-size: 0; }
+.welcome-step[data-state="error"] .welcome-num { background: var(--fail-wash); color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail-line); }
+.welcome-cmd { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; }
+.welcome-cmd code { flex: 1; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); font: var(--fs-code)/1.4 var(--font-mono); color: var(--ink); }
+.welcome-result { margin-top: var(--s-3); }
+.welcome-ok { color: var(--ink); }
+.welcome-err { color: var(--fail); }
+.welcome-list { margin: 0; padding-left: var(--s-5); color: var(--ink-2); font-size: var(--fs-small); }
+
+/* popup: developer mode */
+.dev-toggle { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm, 13px); color: var(--ink); }
+.dev-toggle input { accent-color: var(--ink); }
+
+/* Allow window: a draft that would reach another site */
+.ask-warning { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--hivis, #ffc23d); color: var(--on-hivis, #121311); font-size: var(--fs-sm, 13px); line-height: 1.45; }
+.ask-field-foreign { font-weight: 600; box-shadow: inset 0 0 0 1px currentColor; }

package/dist/extension/welcome.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Wield is installed</title>
+  <link rel="stylesheet" href="tokens.css">
+  <link rel="stylesheet" href="ui.css">
+</head>
+<!-- First-run page (product-100 §5). Classes are semantic (welcome-*). -->
+<body class="welcome">
+  <header class="top">
+    <span class="brand" aria-label="Wield">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><defs><linearGradient id="wm-hd" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffd85a"/><stop offset=".5" stop-color="#ff9a24"/><stop offset="1" stop-color="#ff5200"/></linearGradient><linearGradient id="wm-ht" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff6a0a"/><stop offset="1" stop-color="currentColor"/></linearGradient></defs><g transform="translate(0 -2.45)"><path d="M7.0 11.6 2.4 16.6 7.0 21.6M17.0 11.6 21.6 16.6 17.0 21.6" fill="none" stroke="currentColor" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.0 21.6 12.6 10.28" stroke="currentColor" stroke-width="2.3" stroke-linecap="round"/><g transform="translate(12.6 10.28) rotate(8.045051779050041)"><rect x="-1.15" y="-.2" width="2.3" height="2.4" fill="url(#wm-ht)"/></g><g transform="translate(12.908 8.102) rotate(8.05) scale(0.84)"><path d="M-4.6 -1.9 -2.9 -1.9 -2.4 -1.5 1.3 -1.5 4.4 -0.55 4.6 -0.2 4.6 0.2 4.4 0.55 1.3 1.5 -2.4 1.5 -2.9 1.9 -4.6 1.9Z" fill="url(#wm-hd)" stroke="url(#wm-hd)" stroke-width=".35" stroke-linejoin="round"/><path d="M-4.2 -1.25H-2.9M-1.9 -.95H1.0" stroke="#fff1b8" stroke-width=".55" stroke-linecap="round" opacity=".85"/><rect x="-1.4" y="1.35" width="2.8" height=".8" rx=".3" fill="currentColor"/></g><rect x="7.01" y="5.50" width="1.3" height="1.3" fill="#ffc23d"/><rect x="5.41" y="7.20" width=".9" height=".9" fill="#ff8a1f"/></g></svg>
+      <b>wield</b>
+    </span>
+    <span class="badge" id="ready">Setting up</span>
+  </header>
+  <main class="welcome-body">
+    <p class="label">Welcome</p>
+    <h1 class="welcome-title">Your agent can now use websites through this browser.</h1>
+    <p class="welcome-lead">Wield runs each task in your own tab of the site, with your own login. You see every request in the toolbar popup, and nothing that changes something is sent without your Allow.</p>
+
+    <ol class="welcome-steps">
+      <li class="welcome-step" id="s-ext" data-state="done">
+        <span class="welcome-num" aria-hidden="true">1</span>
+        <div><h2>Extension installed</h2><p id="ext-text"></p></div>
+      </li>
+      <li class="welcome-step" id="s-bridge" data-state="wait">
+        <span class="welcome-num" aria-hidden="true">2</span>
+        <div>
+          <h2>Connect your agent</h2>
+          <p id="bridge-text">Checking…</p>
+          <div class="welcome-cmd" id="cmd-wrap" hidden>
+            <code id="cmd">npx -y wield-mcp init</code>
+            <button class="btn btn-secondary btn-sm" id="copy" type="button">Copy</button>
+          </div>
+          <p class="hint" id="bridge-hint" hidden>Run it once in a terminal. It sets up Wield’s small helper and adds Wield to Claude, Cursor or Codex. This page updates by itself.</p>
+        </div>
+      </li>
+      <li class="welcome-step" id="s-try" data-state="wait">
+        <span class="welcome-num" aria-hidden="true">3</span>
+        <div>
+          <h2>Try it once</h2>
+          <p id="try-text">Search Chefkoch for lasagne recipes, the way your agent would. Wield opens chefkoch.de in a background tab and sends one request to it.</p>
+          <button class="btn btn-primary btn-sm" id="try" type="button">Run a sample search</button>
+          <div class="welcome-result" id="result" hidden></div>
+        </div>
+      </li>
+      <li class="welcome-step" id="s-teach" data-state="info">
+        <span class="welcome-num" aria-hidden="true">4</span>
+        <div><h2>Teach it your sites</h2><p>On any site, open the Wield popup and click <b>Record</b>, then do the task once. You review exactly what would be sent before anything leaves your browser.</p></div>
+      </li>
+    </ol>
+  </main>
+  <script src="welcome.js"></script>
+</body>
+</html>

package/dist/extension/welcome.js

@@ -0,0 +1,69 @@
+"use strict";
+(() => {
+  // apps/extension/src/ui/welcome.ts
+  var $ = (id) => document.getElementById(id);
+  function setStep(id, state) {
+    $(id).dataset.state = state;
+  }
+  async function poll() {
+    const s = await chrome.runtime.sendMessage({ type: "popup_state" });
+    $("ext-text").textContent = `Wield ${s.version} in ${s.browser}.`;
+    const up = s.bridge.state === "connected";
+    setStep("s-bridge", up ? "done" : "wait");
+    $("bridge-text").textContent = up ? "Connected. Your agent can call Wield now." : "Not connected yet. Wield needs its small helper on this computer to talk to your agent.";
+    $("cmd-wrap").hidden = up;
+    $("bridge-hint").hidden = up;
+    const ready = $("ready");
+    ready.className = `badge ${up ? "ok" : ""}`;
+    ready.textContent = up ? "Ready" : "Setting up";
+  }
+  $("copy").addEventListener("click", async () => {
+    const text = $("cmd").textContent ?? "";
+    try {
+      await navigator.clipboard.writeText(text);
+      $("copy").textContent = "Copied";
+    } catch {
+      const r = document.createRange();
+      r.selectNodeContents($("cmd"));
+      getSelection()?.removeAllRanges();
+      getSelection()?.addRange(r);
+    }
+  });
+  $("try").addEventListener("click", async () => {
+    const btn = $("try");
+    btn.disabled = true;
+    btn.textContent = "Running\u2026";
+    const out = $("result");
+    out.hidden = false;
+    out.replaceChildren();
+    const t0 = performance.now();
+    const r = await chrome.runtime.sendMessage({ type: "sample_run" });
+    const ms = Math.round(r.duration_ms ?? performance.now() - t0);
+    if (r.ok) {
+      setStep("s-try", "done");
+      const head = document.createElement("p");
+      head.className = "welcome-ok";
+      head.textContent = `Wield is ready. ${r.output?.total ?? r.output?.recipes?.length ?? 0} lasagne recipes on chefkoch.de, in ${(ms / 1e3).toFixed(1)} s, ${r.requests ?? 1} request${r.requests === 1 ? "" : "s"} from this browser.`;
+      out.append(head);
+      const ul = document.createElement("ul");
+      ul.className = "welcome-list";
+      for (const x of (r.output?.recipes ?? []).slice(0, 3)) {
+        const li = document.createElement("li");
+        li.textContent = String(x.title ?? "");
+        ul.append(li);
+      }
+      out.append(ul);
+      btn.textContent = "Run again";
+    } else {
+      setStep("s-try", "error");
+      const p = document.createElement("p");
+      p.className = "welcome-err";
+      p.textContent = r.error?.message ?? "The sample run failed.";
+      out.append(p);
+      btn.textContent = "Try again";
+    }
+    btn.disabled = false;
+  });
+  void poll();
+  setInterval(() => void poll(), 2e3);
+})();

package/dist/extension-id.txt

@@ -0,0 +1 @@
+mkgnkapppehppdfjgohaoclabmjgfkgn