driggsby 0.5.1 → 0.6.0

package/README.md

@@ -22,6 +22,12 @@ npx driggsby@latest mcp setup other
 After setup, authenticate Driggsby through your client — run `/mcp` in
 Claude Code, or sign in through the browser window Codex opens.
 
+So your Driggsby MCP page can tell your connections apart, `login` sends
+Driggsby this computer's name and operating system version (for example
+`mbp-studio` and `macOS 15.6`) with its sign-in, and
+`mcp setup claude-code` saves them as headers on the Driggsby entry it
+adds to Claude Code, which sends them with each request.
+
 For another MCP client, choose Other. Driggsby currently supports only
 OAuth-based remote MCP at:
 

package/dist/dev/host-page.js

@@ -23,9 +23,12 @@ 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. */
+    /* The strip above the frame is the console's title row over a
+       dashboard, in its own measured values: 46px tall on the black
+       ground with no rule under it, the name centered in 14px ink, and
+       the side slot in the row's quiet 14px tertiary. Equal side tracks
+       keep the name centered; the slot ellipsizes only when the two
+       would otherwise meet. */
     * { box-sizing: border-box; }
     html { color-scheme: dark; }
     body {
@@ -37,26 +40,42 @@ export function hostPageHtml(slug, appOrigin, background) {
       color: #fafafa;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
       font-size: 14px;
-      line-height: 21px;
+      line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }
     header {
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) fit-content(60%) minmax(0, 1fr);
+      column-gap: 16px;
       align-items: center;
-      justify-content: space-between;
       height: 46px;
-      padding: 0 16px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
+      padding: 0 20px;
+      border-bottom: 1px solid transparent;
+    }
+    header .slug,
+    header .mode {
+      grid-row: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    header .slug { grid-column: 2; }
+    header .mode {
+      grid-column: 3;
+      justify-self: end;
+      max-width: 100%;
+      color: #a1a1a1;
     }
-    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 ?? "#000000"};
+         the app loads — the same surface the production host shows. With
+         none declared, Driggsby's own: its card surface on the black
+         page. */
+      background: ${background ?? "#0a0a0a"};
     }
   </style>
 </head>

package/dist/device.js

@@ -0,0 +1,127 @@
+import { readFileSync, statSync } from "node:fs";
+import { isIP } from "node:net";
+import { hostname, platform, release, version } from "node:os";
+// Load-bearing: these allowlists are what make the values safe as command
+// arguments (spawn-plan.ts quotes them for cmd.exe) and as "Name: value"
+// headers. They must never admit % ! ^ & | < > " \ : or a control
+// character; device.test.ts checks each.
+const NAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]{0,62}$/;
+const SYSTEM_PATTERN = /^[A-Za-z0-9][A-Za-z0-9 ._/-]{0,63}$/;
+const MAC_VERSION_FILE = "/System/Library/CoreServices/SystemVersion.plist";
+// os-release(5): /etc first, then the vendor copy.
+const LINUX_RELEASE_FILES = ["/etc/os-release", "/usr/lib/os-release"];
+// Both files are a few hundred bytes; anything larger isn't one.
+const MAX_FILE_BYTES = 64 * 1024;
+// A PRETTY_NAME is a short line; a longer one is not parsed at all.
+const MAX_PRETTY_NAME_CHARS = 256;
+// Hostname labels that spell out an address ("ip-172-31-22-33",
+// "c-73-162-12-34", "192-168-1-20") or are only digits name no computer.
+const ADDRESS_LABEL = /^((ip|c)-)?\d{1,3}(-\d{1,3}){3}$|^\d+$/i;
+// Windows 11 reports itself as NT 10.0; its builds start at 22000.
+const WINDOWS_11_FIRST_BUILD = 22000;
+export function describeDevice(facts) {
+    try {
+        const known = facts ?? realOsFacts();
+        return { name: deviceName(known.hostname), system: deviceSystem(known) };
+    }
+    catch {
+        // os.hostname() and os.release() can throw in unusual runtimes.
+        return { name: null, system: null };
+    }
+}
+// The known values alone, as the sign-in request carries them; null when
+// nothing is known.
+export function knownDevice(device) {
+    const known = {
+        ...(device.name === null ? {} : { name: device.name }),
+        ...(device.system === null ? {} : { system: device.system }),
+    };
+    return Object.keys(known).length === 0 ? null : known;
+}
+// The Driggsby headers `mcp setup` gives Claude Code, one per known value.
+export function deviceHeaders(device) {
+    const headers = [];
+    if (device.name !== null) {
+        headers.push(`X-Driggsby-Device-Name: ${device.name}`);
+    }
+    if (device.system !== null) {
+        headers.push(`X-Driggsby-Device-System: ${device.system}`);
+    }
+    return headers;
+}
+// "mbp-studio.local" and "devbox-02.corp.example.test" are mbp-studio and
+// devbox-02: the first label is the name people give their computer. An
+// address or localhost names no computer.
+function deviceName(raw) {
+    const trimmed = raw.trim();
+    if (isIP(trimmed) !== 0) {
+        return null;
+    }
+    const first = trimmed.split(".")[0] ?? "";
+    if (first.toLowerCase() === "localhost" || ADDRESS_LABEL.test(first)) {
+        return null;
+    }
+    return NAME_PATTERN.test(first) ? first : null;
+}
+function deviceSystem(facts) {
+    switch (facts.platform) {
+        case "darwin":
+            return allowed(macVersion(facts)) ?? "macOS";
+        case "linux":
+            return allowed(linuxPrettyName(facts)) ?? "Linux";
+        case "win32":
+            return facts.version.includes("Server") ? "Windows Server" : windowsName(facts.release);
+        default:
+            return null;
+    }
+}
+function macVersion(facts) {
+    const plist = facts.readFile(MAC_VERSION_FILE);
+    const version = plist?.match(/<key>ProductVersion<\/key>\s*<string>([0-9.]+)<\/string>/)?.[1];
+    return version === undefined ? null : `macOS ${version}`;
+}
+// PRETTY_NAME="Debian GNU/Linux 12 (bookworm)" is Debian GNU/Linux 12.
+function linuxPrettyName(facts) {
+    for (const path of LINUX_RELEASE_FILES) {
+        const osRelease = facts.readFile(path);
+        if (osRelease === null) {
+            continue;
+        }
+        const line = osRelease.split(/\r?\n/).find((each) => each.startsWith("PRETTY_NAME="));
+        if (line === undefined || line.length > MAX_PRETTY_NAME_CHARS) {
+            return null;
+        }
+        const value = line.slice("PRETTY_NAME=".length).trim().replace(/^["']|["']$/g, "");
+        return value.replace(/\s*\([^)]*\)\s*$/, "").trim();
+    }
+    return null;
+}
+// Windows 10 and 11 both report NT 10.0; anything else is just Windows.
+function windowsName(nodeRelease) {
+    const [major, , buildText] = nodeRelease.split(".");
+    const build = Number(buildText);
+    if (major !== "10" || !Number.isInteger(build)) {
+        return "Windows";
+    }
+    return build >= WINDOWS_11_FIRST_BUILD ? "Windows 11" : "Windows 10";
+}
+function allowed(value) {
+    return value !== null && SYSTEM_PATTERN.test(value) ? value : null;
+}
+function realOsFacts() {
+    return { hostname: hostname(), platform: platform(), release: release(), version: version(), readFile: readTextFile };
+}
+// A regular file of a sane size only: never a FIFO or device node that
+// would block, never something huge.
+function readTextFile(path) {
+    try {
+        const stat = statSync(path);
+        if (!stat.isFile() || stat.size > MAX_FILE_BYTES) {
+            return null;
+        }
+        return readFileSync(path, "utf8");
+    }
+    catch {
+        return null;
+    }
+}

package/dist/init/template-styles.js

@@ -1,25 +1,35 @@
 // 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.
+// own: the console's palette, type, insets, and page column, measured off
+// the console itself. The app is its own origin and cannot read the
+// console's stylesheet, so each gray is written as the console paints it
+// on its black page (the console's cards and fills are translucent over
+// that ground) and each hue verbatim. The :root block is the same one
+// Driggsby's own example dashboard carries. --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. */
+   to the "background" in driggsby.json. The status tones are the
+   console's own, for gains, losses, warnings, and a live dot. */
 :root {
   color-scheme: dark;
   --bg-app: #000000;
   --bg-card: #0a0a0a;
   --bg-mute: #262626;
   --hairline: rgba(255, 255, 255, 0.14);
+  --hairline-strong: rgba(255, 255, 255, 0.22);
   --text-primary: #fafafa;
   --text-secondary: #c4c4c4;
   --text-tertiary: #a1a1a1;
+  --status-success: oklch(0.72 0.14 160);
+  --text-success: oklch(0.82 0.11 160);
+  --text-warning: oklch(0.85 0.11 85);
+  --text-error: oklch(0.8 0.13 25);
   --radius-card: 8px;
   --radius-bar: 4px;
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
 }
 
 * {
@@ -32,21 +42,25 @@ body {
   color: var(--text-primary);
   font-family: var(--font-sans);
   font-size: 14px;
-  line-height: 21px;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
 
+/* The console's page column. */
 main {
-  max-width: 800px;
+  max-width: 75rem;
   margin: 0 auto;
-  padding: 24px 24px 64px;
+  padding: 24px;
+}
+
+main > header {
+  margin-bottom: 20px;
 }
 
 h1 {
   margin: 0;
   font-size: 24px;
   font-weight: 600;
-  line-height: 36px;
   letter-spacing: -0.02em;
 }
 
@@ -54,24 +68,19 @@ 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. */
+/* The console's stat tiles: a card per figure, 16px apart, the row
+   capped at the console's 920px. */
 .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;
+  gap: 16px;
+  max-width: 920px;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 900px) {
   .stat-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -86,22 +95,22 @@ h2 {
 .stat {
   display: flex;
   flex-direction: column;
-  padding: 16px;
+  padding: 14px 16px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-card);
   background: var(--bg-card);
 }
 
 .stat-label {
   font-size: 13px;
-  line-height: 20px;
   color: var(--text-tertiary);
 }
 
 .stat-value {
-  margin-top: 4px;
+  margin-top: 2px;
   font-size: 20px;
   font-weight: 600;
-  line-height: 28px;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.01em;
   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. */
@@ -165,6 +174,7 @@ h2 {
   /* Holds its line even when empty, so every row measures the same as
      the skeleton row it replaces. */
   min-height: 21px;
+  margin-top: 1px;
   color: var(--text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -179,10 +189,10 @@ h2 {
 /* 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. */
+   the height of the text it stands in for (the line, plus any margin the
+   text carries), 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);
@@ -192,13 +202,13 @@ h2 {
 .skeleton-label {
   width: 64px;
   height: 12px;
-  margin: 4px 0;
+  margin: 3.75px 0;
 }
 
 .skeleton-value {
   width: 96px;
   height: 20px;
-  margin: 8px 0 4px;
+  margin: 7px 0 5px;
 }
 
 .skeleton-glyph {
@@ -217,7 +227,7 @@ h2 {
 .skeleton-institution {
   width: 110px;
   height: 12px;
-  margin: 4.5px 0;
+  margin: 5.5px 0 4.5px;
 }
 
 .skeleton-balance {

package/dist/login/claim-client.js

@@ -4,6 +4,7 @@
 // token is returned by exactly one poll; callers must never poll again after
 // an approval.
 import { CliError } from "../cli-error.js";
+import { knownDevice } from "../device.js";
 import { sanitizeForTerminal } from "../terminal-text.js";
 // The CLI's own sign-in: read, deploy, and the transaction-rule tools.
 const CLAIM_SCOPE = "driggsby.cli";
@@ -23,11 +24,13 @@ export const SIGN_IN_START_FAILURE = "We weren't able to start a Driggsby sign-i
 // Poll failures happen after the user may already have approved, so "start a
 // sign-in" would be the wrong stage to describe.
 const SIGN_IN_FINISH_FAILURE = "We weren't able to finish your Driggsby sign-in just now. Please try again\nin a minute.";
-export async function createClaimRequest(baseUrl) {
+// device: this computer's name and system (device.ts), so the sign-in shows
+// up on Driggsby's MCP page as the computer it is; only known values go.
+export async function createClaimRequest(baseUrl, device = { name: null, system: null }) {
     const response = await fetch(`${baseUrl}/app-tokens/claim-requests`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ app_name: CLAIM_APP_NAME, scope: CLAIM_SCOPE }),
+        body: JSON.stringify({ app_name: CLAIM_APP_NAME, scope: CLAIM_SCOPE, ...deviceField(device) }),
         signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
         // Never follow a redirect: a 307/308 would replay this claim flow —
         // and, on the poll below, the poll secret — to whatever origin a
@@ -141,6 +144,11 @@ function stringField(record, field) {
     const value = record?.[field];
     return typeof value === "string" && value !== "" ? value : null;
 }
+// The claim body's device field: only the values this computer knows.
+function deviceField(device) {
+    const known = knownDevice(device);
+    return known === null ? {} : { device: known };
+}
 // The server's user-facing error text, stripped of terminal control bytes
 // like every other string this CLI did not author, and length-bounded.
 function errorDescription(body) {

package/dist/login/login.js

@@ -2,9 +2,10 @@
 // page, poll until they approve, and store the token. The token is shown to
 // no one — it goes straight from the poll response into the credential
 // store.
-import { apiBaseUrl, apiHost } from "../api/base-url.js";
+import { apiBaseUrl, apiHost, baseUrlMayReceiveSavedSignIn } from "../api/base-url.js";
 import { blockedNetworkError } from "../api/network-error.js";
 import { CliError } from "../cli-error.js";
+import { describeDevice } from "../device.js";
 import { defaultCredentialEnvironment, describeStorageLocation, environmentToken, saveToken, } from "../credentials/store.js";
 import { sanitizeForTerminal, wrapProse } from "../terminal-text.js";
 import { createClaimRequest, pollClaimRequest, SIGN_IN_START_FAILURE, } from "./claim-client.js";
@@ -69,7 +70,10 @@ async function storeApprovedToken(appToken, environment, warn) {
 }
 async function createClaim(baseUrl) {
     try {
-        return await createClaimRequest(baseUrl);
+        // This computer's name goes only to Driggsby (or a local run), never
+        // to another host a base-URL override names.
+        const device = baseUrlMayReceiveSavedSignIn(baseUrl) ? describeDevice() : { name: null, system: null };
+        return await createClaimRequest(baseUrl, device);
     }
     catch (error) {
         const blocked = blockedNetworkError(error, {

package/dist/mcp-setup/commands.js

@@ -1,6 +1,11 @@
 import {} from "./known-client.js";
 export const DRIGGSBY_MCP_URL = "https://app.driggsby.com/mcp";
-export function buildInstallerCommand(client, scope) {
+// headers: this computer's name and system for Driggsby's MCP page
+// (device.ts builds them from allowlisted values only). Claude Code takes
+// them after the URL (--header is variadic, so before the name it would
+// swallow it); Codex has no header option, so it never gets any. The
+// commands printed for a person to run carry none.
+export function buildInstallerCommand(client, scope, headers = []) {
     switch (client) {
         case "claude-code":
             return {
@@ -14,6 +19,7 @@ export function buildInstallerCommand(client, scope) {
                     scope ?? "user",
                     "driggsby",
                     DRIGGSBY_MCP_URL,
+                    ...headers.flatMap((header) => ["--header", header]),
                 ],
             };
         case "codex":

package/dist/mcp-setup/setup.js

@@ -1,5 +1,6 @@
 import { createInterface } from "node:readline/promises";
 import { CliError } from "../cli-error.js";
+import { describeDevice, deviceHeaders } from "../device.js";
 import { trimLikeRust } from "../terminal-text.js";
 import { runClientCommand } from "./client-command.js";
 import { classifyExistingMcpConfig } from "./classify.js";
@@ -24,7 +25,11 @@ export async function runMcpSetup(options) {
         return;
     }
     write(`Adding Driggsby to ${displayName(client)} MCP config...\n`);
-    const result = await runClientCommand(installer, streamConfigOutput(client));
+    // The command it runs also names this computer (Claude Code only); the
+    // commands it prints for a person stay the plain, portable ones.
+    const headers = installClient === "claude-code" ? deviceHeaders(describeDevice()) : [];
+    const runInstaller = buildInstallerCommand(installClient, options.scope, headers);
+    const result = await runClientCommand(runInstaller, streamConfigOutput(client));
     switch (result.kind) {
         case "output":
             if (result.output.succeeded) {

package/dist/mcp-setup/spawn-plan.js

@@ -5,8 +5,9 @@
 // PATH + PATHEXT (never the current directory, which Windows shells would
 // search first) and run shims through an explicit, absolute cmd.exe
 // invocation with our own quoting. Real commands only ever carry fixed
-// constant arguments (see commands.ts); nothing user-controlled may ever
-// flow into a spawn plan.
+// constant arguments (see commands.ts) or this computer's name and system,
+// allowlisted by device.ts to characters cmd.exe treats as plain; nothing
+// user-controlled may ever flow into a spawn plan.
 import { existsSync } from "node:fs";
 import { isAbsolute, join } from "node:path";
 import {} from "./commands.js";
@@ -80,8 +81,9 @@ export function resolveWindowsProgram(program, lookup = defaultLookup()) {
 // (the cmd convention) and trailing backslashes doubled (so a path ending
 // in \ cannot escape the closing quote for the child's own parser). The
 // safe set covers every constant argument the CLI actually runs, including
-// the MCP URL; only fixed constants and PATH-resolved program paths may
-// reach this function.
+// the MCP URL; only fixed constants, PATH-resolved program paths, and the
+// device values device.ts allowlists (no % ! ^ & | < > " \ or control
+// characters) may reach this function.
 export function quoteForCmd(value) {
     if (/^[A-Za-z0-9_\-.:\\/=]+$/.test(value)) {
         return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "driggsby",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "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.5.1",
-    "@driggsby/sdk": "0.5.1"
+    "@driggsby/deploy": "0.6.0",
+    "@driggsby/sdk": "0.6.0"
   }
 }