@noodleseed/agent-kit 0.94.0 → 0.95.0

package/skills/claude-code/examples/stateful-draft/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "stateful-draft",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "validate": "noodle validate",
+    "dev": "noodle dev",
+    "deploy": "noodle deploy",
+    "site": "node site/demo.mjs"
+  },
+  "devDependencies": {
+    "@noodleseed/assistant": "^1.33.0",
+    "@vitejs/plugin-react": "latest",
+    "@noodleseed/one": "^0.154.0",
+    "react": "latest",
+    "react-dom": "latest",
+    "vite": "latest",
+    "vitest": "latest"
+  }
+}

package/skills/claude-code/examples/stateful-draft/site/client.js

@@ -0,0 +1,44 @@
+import '/sdk/index.js';
+
+const config = await fetch('/demo-config').then((response) => response.json());
+const mount = document.querySelector('#assistant');
+const status = document.querySelector('#status');
+if (config.authenticated && !config.signedIn) {
+  document.querySelector('#demo-login').hidden = false;
+  status.textContent =
+    'Your draft is ready to come with you. This next step simulates the product’s signup.';
+} else {
+  const assistant = document.createElement('noodle-assistant');
+  assistant.setAttribute('theme', 'light');
+  if (config.authenticated) {
+    assistant.setAttribute('session-endpoint', '/assistant-session');
+    status.textContent =
+      'You are using a synthetic demo account. Open the chat to continue with your saved brief.';
+  } else {
+    assistant.setAttribute('embed-id', config.embedId);
+    assistant.setAttribute('service-url', config.serviceUrl);
+    status.textContent =
+      'Start without an account. Open the chat and describe what you want to achieve.';
+  }
+  mount.append(assistant);
+}
+
+document.addEventListener('assistant-sign-in-requested', async (event) => {
+  status.textContent = 'Preparing your account handoff…';
+  try {
+    const response = await fetch('/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ signInTicket: event.detail.signInTicket }),
+    });
+    const result = await response.json();
+    if (!response.ok) {
+      status.textContent = result.error ?? 'Handoff not started';
+      return;
+    }
+    window.location.assign(result.destination);
+  } catch {
+    status.textContent =
+      'The handoff did not start. Your brief has not been moved. Please try again.';
+  }
+});

package/skills/claude-code/examples/stateful-draft/site/demo.mjs

@@ -0,0 +1,158 @@
+/** Loopback-only synthetic host. Replace its demo identity with your existing login in a real app. */
+import { randomUUID } from 'node:crypto';
+import { readFile } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createAssistantSession } from '@noodleseed/assistant/server';
+
+const publicOrigin = 'http://localhost:3001';
+const appOrigin = 'http://localhost:3002';
+const serviceUrl = process.env.NOODLE_SERVICE_URL ?? 'https://cloud.noodleseed.dev';
+const embedId = process.env.NOODLE_EMBED_ID;
+const credentialFile = process.env.NOODLE_ASSISTANT_CREDENTIALS_FILE;
+if (!embedId?.match(/^pub_[a-z0-9]+$/i)) {
+  throw new Error('Set NOODLE_EMBED_ID from the hosted deployment.');
+}
+if (new URL(serviceUrl).protocol !== 'https:')
+  throw new Error('The hosted service must use HTTPS.');
+// Consume only the explicitly supplied backend credential file. Its content is never sent to the browser.
+const credentials = credentialFile ? JSON.parse(await readFile(credentialFile, 'utf8')) : undefined;
+if (
+  credentials &&
+  (typeof credentials.clientId !== 'string' || typeof credentials.clientSecret !== 'string')
+) {
+  throw new Error('The backend credential file is not a CLI-created assistant client file.');
+}
+const sdkDir = dirname(fileURLToPath(import.meta.resolve('@noodleseed/assistant')));
+const siteDir = dirname(fileURLToPath(import.meta.url));
+const transactions = new Map();
+const lifetime = 10 * 60 * 1000;
+
+function send(res, status, value, type = 'application/json') {
+  res.writeHead(status, {
+    'Content-Type': type,
+    'Cache-Control': 'no-store',
+    'Referrer-Policy': 'no-referrer',
+    'X-Content-Type-Options': 'nosniff',
+  });
+  res.end(type === 'application/json' ? JSON.stringify(value) : value);
+}
+function redirect(res, destination) {
+  res.writeHead(303, { Location: destination, 'Cache-Control': 'no-store' });
+  res.end();
+}
+function current(req) {
+  const id = /(?:^|;\s*)brief_demo=([a-f0-9-]+)/.exec(req.headers.cookie ?? '')?.[1];
+  return id ? transactions.get(id) : undefined;
+}
+async function jsonBody(req) {
+  let text = '';
+  for await (const chunk of req) {
+    text += chunk.toString();
+    if (Buffer.byteLength(text) > 8192) throw new Error('Request too large');
+  }
+  return JSON.parse(text);
+}
+
+function handler(origin) {
+  return async (req, res) => {
+    // The fixed loopback host is intentional: never deploy this synthetic-login server to the internet.
+    if (req.headers.host !== new URL(origin).host) return send(res, 403, { error: 'Wrong host' });
+    for (const [id, transaction] of transactions) {
+      if (transaction.expiresAt <= Date.now()) transactions.delete(id);
+    }
+    const path = new URL(req.url ?? '/', origin).pathname;
+    try {
+      if (req.method === 'GET' && path === '/') {
+        return send(
+          res,
+          200,
+          await readFile(join(siteDir, 'index.html')),
+          'text/html; charset=utf-8',
+        );
+      }
+      if (req.method === 'GET' && path === '/demo-config') {
+        return send(res, 200, {
+          serviceUrl,
+          embedId,
+          authenticated: origin === appOrigin,
+          signedIn: Boolean(current(req)?.user),
+        });
+      }
+      if (req.method === 'GET' && path === '/client.js') {
+        return send(res, 200, await readFile(join(siteDir, 'client.js')), 'text/javascript');
+      }
+      if (req.method === 'GET' && /^\/sdk\/[a-z0-9._-]+\.js$/i.test(path)) {
+        return send(res, 200, await readFile(join(sdkDir, path.slice(5))), 'text/javascript');
+      }
+      if (req.method === 'POST') {
+        if (req.headers.origin !== origin) return send(res, 403, { error: 'Wrong origin' });
+        if (origin === publicOrigin && path === '/start') {
+          if (!credentials)
+            return send(res, 503, {
+              error:
+                'Signup demonstration needs an authorized backend client. The anonymous brief is still available.',
+            });
+          if (transactions.size >= 40) return send(res, 429, { error: 'Please try again later' });
+          const body = await jsonBody(req);
+          if (typeof body.signInTicket !== 'string' || body.signInTicket.length > 4096) {
+            return send(res, 400, { error: 'Missing continuation ticket' });
+          }
+          const id = randomUUID();
+          transactions.set(id, {
+            signInTicket: body.signInTicket,
+            expiresAt: Date.now() + lifetime,
+          });
+          res.setHeader(
+            'Set-Cookie',
+            `brief_demo=${id}; HttpOnly; SameSite=Lax; Path=/; Max-Age=600`,
+          );
+          return send(res, 200, { destination: appOrigin });
+        }
+        if (origin === appOrigin && path === '/demo-login') {
+          const transaction = current(req);
+          if (!transaction)
+            return send(res, 410, { error: 'Demo expired. Start again on the public page.' });
+          // Synthetic identity only. A production route must verify its existing application session.
+          transaction.user ??= { id: `demo_${randomUUID()}`, name: 'Demo visitor' };
+          return redirect(res, '/');
+        }
+      }
+      if (origin === appOrigin && req.method === 'GET' && path === '/assistant-session') {
+        if (!credentials) return send(res, 503, { error: 'Configure the backend client first' });
+        if (req.headers['sec-fetch-site'] !== 'same-origin')
+          return send(res, 403, { error: 'Same-origin request required' });
+        const transaction = current(req);
+        if (!transaction?.user)
+          return send(res, 401, { error: 'Choose the synthetic demo account first' });
+        // Reuse the in-flight result so concurrent mounts cannot spend the single-use ticket twice.
+        transaction.session ??= createAssistantSession({
+          serviceUrl,
+          clientId: credentials.clientId,
+          clientSecret: credentials.clientSecret,
+          origin: appOrigin,
+          user: transaction.user,
+          signInTicket: transaction.signInTicket,
+        });
+        const session = await transaction.session;
+        delete transaction.signInTicket;
+        return send(res, 200, session);
+      }
+      return send(res, 404, { error: 'Not found' });
+    } catch {
+      // Do not log credentials, tickets, requests, or raw provider errors.
+      return send(res, 409, {
+        error: 'Continuation was not completed. Return to the public page and start again.',
+      });
+    }
+  };
+}
+for (const [port, origin] of [
+  [3001, publicOrigin],
+  [3002, appOrigin],
+]) {
+  createServer(handler(origin)).listen(port, '127.0.0.1');
+}
+console.log(`Synthetic onboarding demo: ${publicOrigin}`);
+console.log('Loopback only. Uses the hosted assistant; demo signup is not a real account.');

package/skills/claude-code/examples/stateful-draft/site/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>First Brief · Conversational onboarding demo</title>
+    <style>
+      :root { font-family: system-ui, sans-serif; color: #172033; background: #f6f8fc; }
+      body { margin: 0; }
+      main { max-width: 880px; margin: 0 auto; padding: 64px 28px; }
+      .label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #526077; }
+      h1 { max-width: 640px; font-size: clamp(36px, 6vw, 64px); line-height: 1.08; letter-spacing: -.055em; }
+      p { max-width: 570px; line-height: 1.6; color: #526077; }
+      .sample { padding: 24px; border: 1px solid #dce3ee; border-radius: 16px; background: white; margin: 28px 0; max-width: 550px; }
+      a { color: #174bbd; }
+      button { border: none; background: #2563eb; color: white; padding: 14px 20px; border-radius: 9px; font: inherit; cursor: pointer; }
+      :focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
+      .notice { font-size: 13px; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <span class="label">FIRST BRIEF · INTERNAL DEMONSTRATION</span>
+      <h1>Make something useful.<br>Then decide to sign up.</h1>
+      <p>Describe a goal. Refine a short brief. See the result before deciding whether to take it into an account.</p>
+      <div class="sample">
+        <strong>Try this in the chat</strong>
+        <p>“I want to help new teammates complete their first useful project in a week.”</p>
+        <p id="status" role="status" aria-live="polite">Connecting…</p>
+      </div>
+      <form id="demo-login" action="/demo-login" method="post" hidden>
+        <p><strong>Simulated signup</strong><br>This creates a temporary demo identity. It does not register an account with any SaaS product.</p>
+        <button type="submit">Continue as a demo user</button>
+        <p><a href="http://localhost:3001">Cancel and return to the public page</a></p>
+      </form>
+      <p class="notice">Use synthetic information only. The assistant and draft storage are hosted by Noodle Seed. Signup is simulated locally; no customer backend is connected. Drafts expire within 24 hours. <a href="https://noodleseed.com/privacy" target="_blank" rel="noreferrer">Privacy</a></p>
+    </main>
+    <div id="assistant"></div>
+    <script type="module" src="/client.js"></script>
+  </body>
+</html>

package/skills/claude-code/examples/stateful-draft/src/helpers.ts

@@ -0,0 +1,6 @@
+import type { ServerDefinition } from '@noodleseed/one';
+import { generateHelpers } from '@noodleseed/one/react';
+
+export type AppType = ServerDefinition;
+
+export const { useCallTool, useToolInfo, useSendFollowUpMessage } = generateHelpers<AppType>();

package/skills/claude-code/examples/stateful-draft/src/server.ts

@@ -0,0 +1,159 @@
+import {
+  annotations,
+  authenticatedWebsite,
+  connector,
+  embeddedAssistant,
+  noodleManaged,
+  publicWebsite,
+  server,
+  tool,
+  z,
+} from '@noodleseed/one';
+
+const draft = z.object({
+  title: z.string().trim().min(1).max(120).optional(),
+  audience: z.string().trim().min(1).max(240).optional(),
+  goal: z.string().trim().min(1).max(240).optional(),
+});
+
+const snapshot = z.object({
+  value: draft,
+  revision: z.number().int(),
+  status: z.string(),
+});
+
+const state = connector('noodle_state')
+  .version('1.0.0')
+  .operation('read_state', {
+    type: 'read',
+    input: z.object({ handle: z.string() }),
+    output: snapshot,
+  })
+  .operation('patch_state', {
+    type: 'action',
+    input: z.object({
+      handle: z.string(),
+      expectedRevision: z.number().int().min(0),
+      value: draft,
+    }),
+    output: snapshot,
+  });
+
+const openDraft = tool('open_draft', {
+  title: 'Review your brief',
+  description:
+    'Preview a proposed brief and read the saved brief with its revision. Pass the proposed title, audience, and goal in proposal to prefill the editable preview without saving it. Omit proposal to reload the saved record after a conflict.',
+  input: z.object({ proposal: draft.default({}) }),
+  output: snapshot.extend({ proposal: draft }),
+  fulfil: ({ input, connectors }) => {
+    const saved = connectors.state.readState({ handle: 'draft' });
+    return {
+      value: saved.value,
+      revision: saved.revision,
+      status: saved.status,
+      proposal: input.proposal,
+    };
+  },
+  viewTitle: 'Your project brief',
+  invoking: 'Loading your saved brief…',
+  invoked: 'Your brief is ready to review',
+  view: { component: 'draft-card', entry: './views/draft-card.tsx' },
+  annotations: annotations.readOnly(),
+  viewDescription: 'Review and edit a saved brief before deciding whether to create an account.',
+  csp: { connectDomains: [], resourceDomains: [], frameDomains: [] },
+});
+
+const saveDraft = tool('save_draft', {
+  title: 'Save your brief',
+  description:
+    'Save this reviewed brief for up to 24 hours. This does not create an account or a project.',
+  input: draft.required().extend({
+    expectedRevision: z.number().int().min(0).meta({ title: 'Saved version' }),
+  }),
+  output: snapshot,
+  annotations: annotations.localAction({ destructive: false, confirm: true }),
+  fulfil: ({ input, connectors }) => {
+    const saved = connectors.state.patchState({
+      handle: 'draft',
+      expectedRevision: input.expectedRevision,
+      value: { title: input.title, audience: input.audience, goal: input.goal },
+    });
+    return { value: saved.value, revision: saved.revision, status: saved.status };
+  },
+});
+
+const continueDraft = tool('continue_draft', {
+  title: 'Continue with an account',
+  description:
+    'Read the brief in the signed-in account. Call only when the visitor chooses to continue with an account, after showing useful value. Sign-in carries the saved draft forward; it does not submit, publish, or create a project.',
+  input: z.object({}),
+  output: snapshot.extend({ accountId: z.string() }),
+  annotations: annotations.readOnly(),
+  fulfil: ({ connectors, user }) => {
+    const saved = connectors.state.readState({ handle: 'draft' });
+    return {
+      value: saved.value,
+      revision: saved.revision,
+      status: saved.status,
+      accountId: user.id,
+    };
+  },
+});
+
+export default server(
+  'stateful_draft',
+  {
+    title: 'Your first useful brief',
+    version: '1.0.0',
+    instructions:
+      'Help someone turn their goal into a concise project brief: a title, audience, and desired outcome. Base the brief on information they supply. Propose a sensible editable title; never require a naming question. If the audience and outcome are already clear, immediately show the complete proposed brief. Otherwise ask one short question for missing information and skip anything already answered. Show the useful proposed brief in chat before offering to save it. Do not request an email, password, document, or external research. Read open_draft before save_draft. Saving requires review and confirmation; an unconfirmed save is not persisted. Never claim an account or project was created. After saving, offer continue_draft only as an optional next step; never require signup to see the brief. This is a synthetic onboarding example, not an integration with a specific SaaS product.',
+    branding: {
+      name: 'First Brief',
+      accent: '#2563EB',
+      surface: '#F8FAFC',
+      surfaceDark: '#111827',
+      radius: 'md',
+      density: 'comfortable',
+      typography: 'system',
+      colorScheme: 'auto',
+    },
+    use: { state },
+    state: {
+      handles: {
+        draft: {
+          kind: 'draft',
+          version: 'v2',
+          scope: 'caller',
+          ttlSeconds: 86400,
+          claimOnAuthentication: true,
+          schema: draft,
+        },
+      },
+    },
+    assistant: embeddedAssistant({
+      model: noodleManaged(),
+      privacyUrl: 'https://noodleseed.com/privacy',
+      behavior: { showConfirmationDetails: false },
+      access: [
+        publicWebsite({
+          origins: ['http://localhost:3001'],
+          capabilities: [openDraft, saveDraft, continueDraft],
+          signIn: true,
+        }),
+        authenticatedWebsite({
+          origins: ['http://localhost:3002'],
+          capabilities: [openDraft, saveDraft, continueDraft],
+        }),
+      ],
+      labels: {
+        welcomeHeading: 'What would you like to achieve?',
+        composerPlaceholder: 'Describe your goal…',
+        signInHeading: 'Take your brief with you',
+        signInBody: 'Continue with an account to use your saved brief inside the product.',
+        signInAction: 'Sign in',
+        signUpAction: 'Create account',
+      },
+    }),
+  },
+  [openDraft, saveDraft, continueDraft],
+);

package/skills/claude-code/examples/stateful-draft/src/views/draft-card.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import { useCallTool, useSendFollowUpMessage, useToolInfo } from '../helpers.js';
+import './widget-style.css';
+
+type Brief = { title?: string; audience?: string; goal?: string };
+type Snapshot = { value: Brief; revision: number; status: string; proposal?: Brief };
+
+function displayBrief(data: Snapshot | undefined): Brief {
+  const proposal = data?.proposal;
+  return proposal && (proposal.title || proposal.audience || proposal.goal)
+    ? proposal
+    : (data?.value ?? {});
+}
+
+function snapshot(result: unknown): Snapshot | undefined {
+  if (!result || typeof result !== 'object') return;
+  const envelope = result as { isError?: boolean; structuredContent?: Partial<Snapshot> };
+  const data = envelope.structuredContent;
+  if (
+    !envelope.isError &&
+    data &&
+    data.value &&
+    typeof data.value === 'object' &&
+    Number.isInteger(data.revision) &&
+    typeof data.status === 'string'
+  ) {
+    return data as Snapshot;
+  }
+}
+
+export default function DraftCard() {
+  const info = useToolInfo('open_draft');
+  const read = useCallTool('open_draft');
+  const save = useCallTool('save_draft');
+  const followUp = useSendFollowUpMessage();
+  const [saved, setSaved] = useState(() => snapshot(info));
+  const [brief, setBrief] = useState<Brief>(() => displayBrief(snapshot(info)));
+  const [busy, setBusy] = useState(false);
+  const [reloadRequired, setReloadRequired] = useState(false);
+  const [message, setMessage] = useState('Review your brief. An account is optional.');
+  useEffect(() => {
+    const next = snapshot({ structuredContent: info.structuredContent });
+    if (next) {
+      setSaved(next);
+      setBrief(displayBrief(next));
+    }
+  }, [info.structuredContent]);
+  const complete = Boolean(brief.title?.trim() && brief.audience?.trim() && brief.goal?.trim());
+  const unchanged = ['title', 'audience', 'goal'].every(
+    (key) => brief[key as keyof Brief] === saved?.value[key as keyof Brief],
+  );
+
+  async function run(operation: 'load' | 'save') {
+    setBusy(true);
+    try {
+      const result =
+        operation === 'load'
+          ? await read.callTool({})
+          : await save.callTool({ ...brief, expectedRevision: saved?.revision });
+      const next = snapshot(result);
+      if (!next) throw new Error('No authoritative result');
+      setSaved(next);
+      setBrief(displayBrief(next));
+      setReloadRequired(false);
+      setMessage(operation === 'save' ? 'Your brief is saved.' : 'Saved brief loaded.');
+    } catch {
+      setReloadRequired(true);
+      setMessage(
+        'No save was confirmed. Reload saved to check the latest brief before trying again.',
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main className="brief-shell">
+      <header>
+        <p className="brief-eyebrow">YOUR FIRST USEFUL STEP</p>
+        <h1>Your project brief</h1>
+        <p>Make something useful before creating an account.</p>
+      </header>
+      <section className="brief-fields">
+        <label>
+          Project title
+          <input
+            required
+            maxLength={120}
+            value={brief.title ?? ''}
+            placeholder="A better first week"
+            onChange={(event) => setBrief({ ...brief, title: event.currentTarget.value })}
+          />
+        </label>
+        <label>
+          Who is this for?
+          <textarea
+            required
+            maxLength={240}
+            rows={2}
+            value={brief.audience ?? ''}
+            placeholder="New teammates joining our product team"
+            onChange={(event) => setBrief({ ...brief, audience: event.currentTarget.value })}
+          />
+        </label>
+        <label>
+          What would success look like?
+          <textarea
+            required
+            maxLength={240}
+            rows={3}
+            value={brief.goal ?? ''}
+            placeholder="Complete their first useful project in a week"
+            onChange={(event) => setBrief({ ...brief, goal: event.currentTarget.value })}
+          />
+        </label>
+        <p role="status" aria-live="polite">
+          {busy ? 'Waiting for the result…' : message}
+        </p>
+        <div className="brief-actions">
+          <button type="button" disabled={busy} onClick={() => void run('load')}>
+            Reload saved
+          </button>
+          <button
+            className="brief-primary"
+            type="button"
+            onClick={() => void run('save')}
+            disabled={busy || !saved || !complete || reloadRequired}
+          >
+            Save brief
+          </button>
+        </div>
+      </section>
+      <footer>
+        <p>
+          A saved brief lasts up to 24 hours and can follow you when you sign in. No project has
+          been created.
+        </p>
+        <button
+          type="button"
+          disabled={
+            busy || !complete || !unchanged || !saved || saved.revision === 0 || reloadRequired
+          }
+          onClick={() =>
+            void followUp({ prompt: 'I would like to continue with my saved brief in an account.' })
+          }
+        >
+          Continue with an account
+        </button>
+      </footer>
+    </main>
+  );
+}

package/skills/claude-code/examples/stateful-draft/src/views/widget-style.css

@@ -0,0 +1,93 @@
+@layer stateful-draft {
+  .brief-shell {
+    box-sizing: border-box;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 24px;
+    color: var(--ns-text-primary, #172033);
+    background: var(--ns-surface, #f8fafc);
+    font-family: var(--ns-font, system-ui, sans-serif);
+    line-height: 1.5;
+  }
+  .brief-shell * {
+    box-sizing: border-box;
+  }
+  .brief-shell h1 {
+    margin: 4px 0;
+    font-size: 26px;
+    letter-spacing: -0.03em;
+  }
+  .brief-shell p {
+    color: var(--ns-text-secondary, #526077);
+  }
+  .brief-eyebrow {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+  }
+  .brief-fields {
+    display: grid;
+    gap: 16px;
+    margin: 24px 0;
+  }
+  .brief-shell label {
+    display: grid;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .brief-shell input,
+  .brief-shell textarea {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--ns-border, #cbd5e1);
+    border-radius: var(--ns-radius-md, 8px);
+    color: inherit;
+    background: var(--ns-surface-raised, #fff);
+    font: inherit;
+    font-weight: 400;
+    resize: vertical;
+  }
+  .brief-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .brief-shell button {
+    padding: 10px 16px;
+    border: 1px solid var(--ns-border, #cbd5e1);
+    border-radius: var(--ns-radius-md, 8px);
+    background: var(--ns-surface-raised, #fff);
+    color: inherit;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .brief-shell .brief-primary {
+    background: var(--ns-accent, #2563eb);
+    color: var(--ns-accent-text, #fff);
+    border-color: transparent;
+  }
+  .brief-shell button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .brief-shell :focus-visible {
+    outline: 2px solid var(--ns-focus, #2563eb);
+    outline-offset: 3px;
+  }
+  .brief-shell footer {
+    border-top: 1px solid var(--ns-border, #cbd5e1);
+    padding-top: 12px;
+    font-size: 13px;
+  }
+  @media (max-width: 380px) {
+    .brief-shell {
+      padding: 16px;
+    }
+    .brief-actions button {
+      width: 100%;
+    }
+  }
+}