driggsby 0.2.4 → 0.3.1

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

@@ -21,8 +21,6 @@ export function indexHtml(slug) {
   <main>
     <header>
       <h1>${slug}</h1>
-      <p class="sample-note" id="sample-note" hidden>Sample data — your real
-      accounts appear when this app runs inside Driggsby.</p>
     </header>
     <!-- The bars below are skeleton placeholders. app.js replaces them
          with data on its first render; edit the render functions there,
@@ -53,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>
@@ -60,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>
@@ -67,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>
@@ -112,6 +113,11 @@ export const APP_JS = `// Your app's code. Edit anything — driggsby dev reload
 // Params mirror Driggsby's public MCP tools of the same names, with one
 // simplification: those tools require a "reason" string, but a watch can
 // leave it out — Driggsby fills one in naming the dashboard.
+//
+// To see a tool's exact result shape before writing render code, run it
+// once from the terminal — the JSON it prints is what the callback gets:
+//
+//   npx driggsby@latest query <tool>
 
 // ---------------------------------------------------------------------------
 // Sample data. Every name and number here is invented. It paints only
@@ -159,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) {
@@ -207,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);
@@ -232,25 +269,18 @@ function renderAccounts(result) {
 // Live data. window.driggsby exists when the Driggsby SDK loaded — inside
 // Driggsby, or under driggsby dev. Whether anything embeds this page is
 // knowable synchronously: opened directly in a tab, no host will ever
-// answer, so the sample data replaces the skeleton right away and the note
-// explaining it is revealed (it ships hidden in the HTML, so an embedded
-// page never shows it, not even for the moment before this script runs).
-// Embedded, sample numbers never paint at all — the shipped skeleton holds
-// the layout until the first real results replace it and fade in.
+// answer, so the sample data replaces the skeleton right away, and the SDK
+// 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.
 // ---------------------------------------------------------------------------
 
 const standalone = window.parent === window;
-const note = document.getElementById("sample-note");
 
 if (standalone) {
-  // The note and the sample values paint together (this whole branch is
-  // one synchronous task). The reveal is kept first so an edit that ever
-  // makes rendering async can't paint values before their label.
-  if (note) note.hidden = false;
   renderOverview(SAMPLE_OVERVIEW);
   renderAccounts(SAMPLE_ACCOUNTS);
-} else if (note) {
-  note.remove();
 }
 
 if (window.driggsby) {
@@ -262,165 +292,10 @@ if (window.driggsby) {
   });
 }
 `;
-export const STYLES_CSS = `:root {
-  --background: #ffffff;
-  --text: #1f2430;
-  --text-muted: #6d7280;
-  --hairline: #e6e8ec;
-  --note-background: #fdf6e3;
-  --note-text: #7a5b1e;
-}
-
-* {
-  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;
-}
-
-.sample-note {
-  display: inline-block;
-  margin: 12px 0 0;
-  padding: 4px 10px;
-  border-radius: 6px;
-  background: var(--note-background);
-  color: var(--note-text);
-  font-size: 13px;
-}
-
-/* The display rule above would defeat the hidden attribute without this. */
-.sample-note[hidden] {
-  display: none;
-}
-
-/* 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/dist/main.js

@@ -1,12 +1,15 @@
 // CLI entry point. The bin stub (bin/driggsby.js) imports this module; it is
 // never imported as a library.
+import { homedir } from "node:os";
 import { parseArgv } from "./args.js";
 import { CliError } from "./cli-error.js";
 import { runDeploy } from "./deploy/deploy-command.js";
 import { runDev } from "./dev/dev-command.js";
+import { runDevStop } from "./dev/dev-stop.js";
 import { runInit } from "./init/init-command.js";
 import { runRollback } from "./deploy/rollback-command.js";
 import { runVersions } from "./deploy/versions-command.js";
+import { runQuery } from "./query/query-command.js";
 import { runLogin } from "./login/login.js";
 import { runLogout } from "./login/logout.js";
 import { runMcpSetup } from "./mcp-setup/setup.js";
@@ -33,13 +36,15 @@ async function run(argv) {
         case "init":
             return await runInit({ slug: command.slug });
         case "dev":
-            return await runDev();
+            return command.stop ? await runDevStop(homedir()) : await runDev();
         case "deploy":
             return await runDeploy({ preview: command.preview });
         case "rollback":
             return await runRollback({ toVersion: command.toVersion });
         case "versions":
             return await runVersions({});
+        case "query":
+            return await runQuery({ tool: command.tool, params: command.params });
     }
 }
 try {

package/dist/owner-only-file.js

@@ -0,0 +1,26 @@
+// A file under ~/.driggsby that only its owner may read, written atomically:
+// the directory is created owner-only if it does not exist, the body lands
+// in a temp file with mode 0600, and a rename makes it appear whole. Used
+// for the saved sign-in and for the record of a running `driggsby dev`.
+import { randomUUID } from "node:crypto";
+import { mkdir, rename, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+export const DRIGGSBY_DIRECTORY_NAME = ".driggsby";
+export function driggsbyDirectory(homeDirectory) {
+    return join(homeDirectory, DRIGGSBY_DIRECTORY_NAME);
+}
+export async function writeOwnerOnlyFile(homeDirectory, fileName, body) {
+    const directory = driggsbyDirectory(homeDirectory);
+    // mode applies only when the directory is created; an existing ~/.driggsby
+    // keeps whatever permissions the user already gave it.
+    await mkdir(directory, { recursive: true, mode: 0o700 });
+    const temporaryPath = join(directory, `${fileName}.${randomUUID()}.tmp`);
+    try {
+        await writeFile(temporaryPath, body, { mode: 0o600 });
+        await rename(temporaryPath, join(directory, fileName));
+    }
+    catch (error) {
+        await rm(temporaryPath, { force: true });
+        throw error;
+    }
+}