driggsby 0.3.0 → 0.3.1

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,248 @@
+// 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 render replaces it and fades in (see 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; }
+}
+
+.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;
+  }
+}
+`;

package/dist/init/templates.js

@@ -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) {
@@ -210,22 +225,41 @@ function renderOverview(result) {
 }
 
 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."));
+    revealOnce(container);
+    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);
@@ -258,148 +292,10 @@ if (window.driggsby) {
   });
 }
 `;
-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;
-}
-`;
 // "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.1",
   "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.1",
+    "@driggsby/sdk": "0.3.1"
   }
 }