driggsby 0.3.0 → 0.3.2

package/dist/dev/host-page.js

@@ -23,33 +23,40 @@ export function hostPageHtml(slug, appOrigin, background) {
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${slug} — driggsby dev</title>
   <style>
+    /* The strip above the frame is the console's title row, in its own
+       measured values: 46px tall on the black ground, 14px ink, a 14%
+       white hairline under it. */
     * { box-sizing: border-box; }
+    html { color-scheme: dark; }
     body {
       margin: 0;
       display: flex;
       flex-direction: column;
       height: 100vh;
-      background: #ffffff;
-      color: #1f2430;
-      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+      background: #000000;
+      color: #fafafa;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
       font-size: 14px;
+      line-height: 21px;
+      -webkit-font-smoothing: antialiased;
     }
     header {
       display: flex;
-      align-items: baseline;
+      align-items: center;
       justify-content: space-between;
-      padding: 10px 16px;
-      border-bottom: 1px solid #e6e8ec;
+      height: 46px;
+      padding: 0 16px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
     }
-    header .slug { font-weight: 600; }
-    header .mode { color: #6d7280; font-size: 13px; }
+    header .slug { font-weight: 500; }
+    header .mode { color: #a1a1a1; font-size: 13px; }
     iframe {
       flex: 1;
       width: 100%;
       border: none;
       /* The app's declared background from driggsby.json, painted while
          the app loads — the same surface the production host shows. */
-      background: ${background ?? "#ffffff"};
+      background: ${background ?? "#000000"};
     }
   </style>
 </head>

package/dist/init/init-command.js

@@ -9,7 +9,8 @@ import { join } from "node:path";
 import { slugProblem } from "@driggsby/deploy";
 import { CliError } from "../cli-error.js";
 import { quotedForTerminal, wrapProse } from "../terminal-text.js";
-import { APP_JS, STYLES_CSS, driggsbyJsonText, indexHtml } from "./templates.js";
+import { STYLES_CSS } from "./template-styles.js";
+import { APP_JS, driggsbyJsonText, indexHtml } from "./templates.js";
 // Argv and prompt answers echo back inside quotes with this cap; a slug can
 // never be longer than 63 characters, so the cap only trims hostile input.
 const MAX_SLUG_ECHO_CHARS = 80;

package/dist/init/template-styles.js

@@ -0,0 +1,241 @@
+// The scaffold's styles.css. A deployed app lives inside Driggsby's dark
+// chrome, so the page is dark by default and its values are Driggsby's
+// own: the console's ground, card rung, hairline, ink ramp, radii, and
+// type sizes, written out as plain colors because the app is its own
+// origin and cannot read the console's stylesheet. --bg-app must stay
+// equal to driggsby.json's "background" (init-command.test.ts pins the
+// two together): Driggsby paints that color while the app loads.
+export const STYLES_CSS = `/* Driggsby's console palette, so this page reads as part of the app it
+   opens inside. Change these together if you re-theme; keep --bg-app equal
+   to the "background" in driggsby.json. */
+:root {
+  color-scheme: dark;
+  --bg-app: #000000;
+  --bg-card: #0a0a0a;
+  --bg-mute: #262626;
+  --hairline: rgba(255, 255, 255, 0.14);
+  --text-primary: #fafafa;
+  --text-secondary: #c4c4c4;
+  --text-tertiary: #a1a1a1;
+  --radius-card: 8px;
+  --radius-bar: 4px;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg-app);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 21px;
+  -webkit-font-smoothing: antialiased;
+}
+
+main {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 24px 24px 64px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  margin: 24px 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+}
+
+/* One card, four cells; the 1px gap over the card's own hairline color
+   draws the divider between cells however the grid wraps. */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 24px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-card);
+  background: var(--hairline);
+  overflow: hidden;
+}
+
+@media (max-width: 640px) {
+  .stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 400px) {
+  .stat-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  background: var(--bg-card);
+}
+
+.stat-label {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-tertiary);
+}
+
+.stat-value {
+  margin-top: 4px;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  /* A currency string has no natural break, and a clipped balance is a
+     wrong number. If a value ever outgrows its cell, it wraps. */
+  overflow-wrap: anywhere;
+}
+
+#accounts {
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-card);
+  background: var(--bg-card);
+  overflow: hidden;
+}
+
+.account-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+}
+
+.account-row + .account-row {
+  border-top: 1px solid var(--hairline);
+}
+
+/* A list with nothing in it says so, in the row's own inset. */
+.empty-row {
+  padding: 14px 16px;
+  color: var(--text-secondary);
+}
+
+/* The institution's initial on a round pill, as the console draws it. */
+.account-glyph {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bg-mute);
+  color: var(--text-secondary);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.account-names {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.account-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-institution {
+  /* Holds its line even when empty, so every row measures the same as
+     the skeleton row it replaces. */
+  min-height: 21px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-balance {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The skeleton ships in the HTML so the first paint is the final layout
+   as muted bars; the first data render replaces it in a dissolve (see the
+   "Settling in" section of app.js). Each bar's margins pad it to exactly
+   the height of the text it stands in for, and the columns holding
+   stacked bars are flex so those margins never collapse — the skeleton
+   page and the data page measure identical, and nothing shifts when data
+   lands. */
+.skeleton {
+  border-radius: var(--radius-bar);
+  background: var(--bg-mute);
+  animation: skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.skeleton-label {
+  width: 64px;
+  height: 12px;
+  margin: 4px 0;
+}
+
+.skeleton-value {
+  width: 96px;
+  height: 20px;
+  margin: 8px 0 4px;
+}
+
+.skeleton-glyph {
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.skeleton-name {
+  width: 150px;
+  height: 14px;
+  margin: 3.5px 0;
+}
+
+.skeleton-institution {
+  width: 110px;
+  height: 12px;
+  margin: 4.5px 0;
+}
+
+.skeleton-balance {
+  width: 72px;
+  height: 14px;
+  margin: 3.5px 0;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+/* The skeleton-to-data dissolve itself is app.js's "Settling in" View
+   Transition; it needs no CSS here and already sits out reduced motion. */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+`;

package/dist/init/templates.js

@@ -6,8 +6,8 @@
 // tool result shapes only in structure, so the scaffold's render functions
 // work unchanged when live data replaces them. The HTML ships a skeleton
 // of the final layout so the first paint — in every context, before any
-// script runs — is muted bars that the first render replaces, fading in
-// at the exact same size so nothing shifts.
+// script runs — is muted bars that the first render replaces at the exact
+// same size, dissolving one into the other, so nothing shifts or pops.
 export function indexHtml(slug) {
     return `<!doctype html>
 <html lang="en">
@@ -51,6 +51,7 @@ export function indexHtml(slug) {
       <h2>Accounts</h2>
       <div id="accounts" aria-busy="true">
         <div class="account-row">
+          <div class="skeleton skeleton-glyph"></div>
           <div class="account-names">
             <div class="skeleton skeleton-name"></div>
             <div class="skeleton skeleton-institution"></div>
@@ -58,6 +59,7 @@ export function indexHtml(slug) {
           <div class="skeleton skeleton-balance"></div>
         </div>
         <div class="account-row">
+          <div class="skeleton skeleton-glyph"></div>
           <div class="account-names">
             <div class="skeleton skeleton-name"></div>
             <div class="skeleton skeleton-institution"></div>
@@ -65,6 +67,7 @@ export function indexHtml(slug) {
           <div class="skeleton skeleton-balance"></div>
         </div>
         <div class="account-row">
+          <div class="skeleton skeleton-glyph"></div>
           <div class="account-names">
             <div class="skeleton skeleton-name"></div>
             <div class="skeleton skeleton-institution"></div>
@@ -162,10 +165,22 @@ function formatMoney(value) {
   if (!value || typeof value.amount !== "string") return "—";
   const number = Number(value.amount);
   if (!Number.isFinite(number)) return "—";
-  return new Intl.NumberFormat(undefined, {
-    style: "currency",
-    currency: value.currency_code || "USD"
-  }).format(number);
+  const currency = value.currency_code === undefined ? "USD" : value.currency_code;
+  if (typeof currency !== "string") return "—";
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: currency
+    }).format(number);
+  } catch (error) {
+    // An unknown currency code renders as absent, never as a guess in
+    // the wrong currency — and never takes the rest of the page down.
+    return "—";
+  }
+}
+
+function asText(value) {
+  return typeof value === "string" ? value : "";
 }
 
 function element(tag, className, text) {
@@ -175,19 +190,6 @@ function element(tag, className, text) {
   return node;
 }
 
-// The page ships with a skeleton of this exact layout in its HTML — muted
-// bars where the numbers will be — so the very first paint is already the
-// final shape. The first render into a container replaces its skeleton and
-// fades in, so data arriving reads as the page settling, never as content
-// popping. classList.add is idempotent and re-adding a class never restarts
-// its animation, so later live updates repaint in place without re-fading.
-// aria-busy ships in the HTML so assistive tech hears "loading" until the
-// first real content lands.
-function revealOnce(container) {
-  container.classList.add("fade-in");
-  container.removeAttribute("aria-busy");
-}
-
 function renderOverview(result) {
   const rollups = (result && result.summary_rollups) || {};
   const container = document.getElementById("overview");
@@ -206,29 +208,142 @@ function renderOverview(result) {
     );
     container.append(stat);
   }
-  revealOnce(container);
+  // aria-busy ships in the HTML so assistive tech hears "loading" until
+  // the first content lands; every render clears it (harmless once gone).
+  container.removeAttribute("aria-busy");
 }
 
 function renderAccounts(result) {
-  const accounts = (result && result.linked_accounts) || [];
+  const list = result && Array.isArray(result.linked_accounts) ? result.linked_accounts : [];
+  const accounts = list.filter((account) => account && typeof account === "object");
   const container = document.getElementById("accounts");
   container.replaceChildren();
+  if (accounts.length === 0) {
+    container.append(element("div", "empty-row", "No linked accounts yet."));
+    container.removeAttribute("aria-busy");
+    return;
+  }
   for (const account of accounts) {
     const row = element("div", "account-row");
     const names = element("div", "account-names");
-    const mask = account.account_mask_last4;
+    // Only strings paint; a malformed field renders as absent, never as
+    // "[object Object]".
+    const displayName = asText(account.account_display_name);
+    const institution = asText(account.institution_name);
+    const mask = asText(account.account_mask_last4);
+    // The institution's initial on a round pill, the way Driggsby's own
+    // account rows draw it. Array.from keeps an emoji-leading name from
+    // breaking the render (it splits by whole character, not UTF-16 half).
+    const initialSource = (institution || displayName).trim();
+    const initial = (Array.from(initialSource)[0] || "?").toUpperCase();
+    const institutionLine = [institution, mask ? "····" + mask : ""].filter(Boolean).join(" ");
     names.append(
-      element("div", "account-name", account.account_display_name || "Account"),
-      element(
-        "div",
-        "account-institution",
-        (account.institution_name || "") + (mask ? " ····" + mask : "")
-      )
+      element("div", "account-name", displayName || "Account"),
+      element("div", "account-institution", institutionLine)
+    );
+    const glyph = element("div", "account-glyph", initial);
+    // Decorative: the institution's name is read out on the next line.
+    glyph.setAttribute("aria-hidden", "true");
+    row.append(
+      glyph,
+      names,
+      element("div", "account-balance", formatMoney(account.current_balance))
     );
-    row.append(names, element("div", "account-balance", formatMoney(account.current_balance)));
     container.append(row);
   }
-  revealOnce(container);
+  container.removeAttribute("aria-busy");
+}
+
+// ---------------------------------------------------------------------------
+// Settling in. The first data a section shows replaces its skeleton in a
+// dissolve: the browser snapshots the page, the paint lands, and old
+// crossfades into new (a View Transition — pixels that did not change
+// don't visibly change, so what reads as animating is the bars becoming
+// numbers). The skeleton and the data measure identical (see styles.css),
+// so the dissolve reads as the page coming into focus — never a blink, a
+// shift, or a pop. Where the browser has no View Transitions, or the
+// person prefers reduced motion, the swap is simply instant.
+//
+// The beat below covers sections whose data lands together (the common
+// case). A section whose first data trails in later gets its own beat and
+// its own dissolve; starting it skips whatever remained of the first one's
+// animation — the paints always land, only the crossfade is cut short.
+// ---------------------------------------------------------------------------
+
+// How long a section's first paint may wait so sections whose data lands
+// in the same beat dissolve in together instead of one by one.
+const SETTLE_TOGETHER_MS = 50;
+
+let pendingFirstPaints = [];
+let settleFlushScheduled = false;
+
+function settle(paint) {
+  const reducedMotion =
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (typeof document.startViewTransition !== "function" || reducedMotion) {
+    paint();
+    return;
+  }
+  pendingFirstPaints.push(paint);
+  if (settleFlushScheduled) return; // this paint rides the beat already in flight
+  settleFlushScheduled = true;
+  setTimeout(() => {
+    // Collected inside the flush, which runs inside the transition
+    // callback, so a first result that lands between the beat ending and
+    // the snapshot being taken joins this dissolve instead of cutting it
+    // short with a second one.
+    const flush = () => {
+      const paints = pendingFirstPaints;
+      pendingFirstPaints = [];
+      settleFlushScheduled = false;
+      for (const apply of paints) {
+        // One section's render must never stop another's: the scaffold
+        // is meant to be edited, and a throw mid-edit stays that
+        // section's problem — it heals on its own next result.
+        try {
+          apply();
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    };
+    try {
+      const transition = document.startViewTransition(flush);
+      // A skipped transition (a hidden tab, a second dissolve starting)
+      // still runs flush; only the animation is dropped. Without this,
+      // the skip surfaces as an uncaught rejection in the console.
+      transition.ready.catch(() => {});
+    } catch (error) {
+      // If starting the transition itself threw, nothing will call
+      // flush; run it plain so the paints land and the beat resets.
+      console.error(error);
+      flush();
+    }
+  }, SETTLE_TOGETHER_MS);
+}
+
+// Wraps a render function for its watch: the first result goes through
+// settle() above, and only the latest result paints if more arrive while
+// that dissolve is still pending. Every later result repaints in place
+// with no animation at all.
+function settledRenderer(render) {
+  let hasSettled = false;
+  let firstPaintQueued = false;
+  let latestResult;
+  return (result) => {
+    if (hasSettled) {
+      render(result);
+      return;
+    }
+    latestResult = result;
+    if (firstPaintQueued) return;
+    firstPaintQueued = true;
+    settle(() => {
+      hasSettled = true;
+      render(latestResult);
+    });
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -239,7 +354,7 @@ function renderAccounts(result) {
 // shows its own notice explaining that the page runs with real data only
 // inside Driggsby. Embedded, sample numbers never paint at all — the
 // shipped skeleton holds the layout until the first real results replace
-// it and fade in.
+// it in a dissolve (see "Settling in" above).
 // ---------------------------------------------------------------------------
 
 const standalone = window.parent === window;
@@ -250,156 +365,14 @@ if (standalone) {
 }
 
 if (window.driggsby) {
-  driggsby.watch("get_overview", {}, (result) => {
-    renderOverview(result);
-  });
-  driggsby.watch("list_accounts", {}, (result) => {
-    renderAccounts(result);
-  });
-}
-`;
-export const STYLES_CSS = `:root {
-  --background: #ffffff;
-  --text: #1f2430;
-  --text-muted: #6d7280;
-  --hairline: #e6e8ec;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background: var(--background);
-  color: var(--text);
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-main {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 48px 24px 64px;
-}
-
-h1 {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 600;
-}
-
-h2 {
-  margin: 40px 0 4px;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-/* The skeleton ships in the HTML so the first paint is the final layout as
-   muted bars; the first render replaces it and fades in (see app.js). The
-   bar margins make each skeleton block exactly the height of the text it
-   stands in for, so nothing shifts when data lands. */
-.skeleton {
-  border-radius: 4px;
-  background: var(--hairline);
-  animation: skeleton-pulse 1.6s ease-in-out infinite;
-}
-
-.skeleton-label {
-  width: 64px;
-  height: 12px;
-  margin: 3.75px 0 0;
-}
-
-.skeleton-value {
-  width: 96px;
-  height: 20px;
-  margin: 8.75px 0 5px;
-}
-
-.skeleton-name {
-  width: 150px;
-  height: 14px;
-  margin: 4px 0 8px;
-}
-
-.skeleton-institution {
-  width: 110px;
-  height: 12px;
-  margin: 4px 0;
-}
-
-.skeleton-balance {
-  width: 72px;
-  height: 14px;
-}
-
-@keyframes skeleton-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.55; }
-}
-
-.fade-in {
-  animation: fade-in 200ms ease-out;
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .skeleton,
-  .fade-in {
-    animation: none;
-  }
-}
-
-.stat-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 20px;
-  margin-top: 32px;
-}
-
-.stat-label {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.account-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 0;
-  border-top: 1px solid var(--hairline);
-}
-
-.account-row:first-child {
-  border-top: none;
-}
-
-.account-institution {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.account-balance {
-  font-variant-numeric: tabular-nums;
+  driggsby.watch("get_overview", {}, settledRenderer(renderOverview));
+  driggsby.watch("list_accounts", {}, settledRenderer(renderAccounts));
 }
 `;
 // "background" is the template's own page background (styles.css
-// --background): Driggsby paints it while the app loads, so the loading
+// --bg-app): Driggsby paints it while the app loads, so the loading
 // surface matches the app from the first frame. An agent that re-themes
 // the app should keep this equal to the page's real background color.
 export function driggsbyJsonText(slug) {
-    return `{\n  "slug": ${JSON.stringify(slug)},\n  "serve": ".",\n  "background": "#ffffff"\n}\n`;
+    return `{\n  "slug": ${JSON.stringify(slug)},\n  "serve": ".",\n  "background": "#000000"\n}\n`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "driggsby",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Set up and build on Driggsby, the MCP server for personal finance.",
   "license": "Apache-2.0",
   "repository": {
@@ -28,7 +28,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@driggsby/deploy": "0.3.0",
-    "@driggsby/sdk": "0.3.0"
+    "@driggsby/deploy": "0.3.2",
+    "@driggsby/sdk": "0.3.2"
   }
 }