npm - create-walle - Versions diffs - 0.9.21 → 0.9.23 - Mend

create-walle 0.9.21 → 0.9.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (500) hide show

package/template/claude-task-manager/public/designs/ai-providers-consolidation-v2.html ADDED Viewed

@@ -0,0 +1,830 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CTM AI Providers Consolidation Mock v2</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #171927;
+      --surface: #202438;
+      --panel: #24283b;
+      --panel-deep: #151724;
+      --line: #414868;
+      --text: #c0caf5;
+      --muted: #7b84b4;
+      --accent: #7aa2f7;
+      --cyan: #7dcfff;
+      --green: #9ece6a;
+      --yellow: #e0af68;
+      --red: #f7768e;
+      --purple: #bb9af7;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--text);
+      font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    button,
+    input,
+    select {
+      font: inherit;
+    }
+    .topbar {
+      height: 58px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid var(--line);
+      background: #1f2335;
+      position: sticky;
+      top: 0;
+      z-index: 20;
+    }
+    .nav-shell {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .nav {
+      display: flex;
+      gap: 4px;
+      border: 1px solid var(--line);
+      border-radius: 9px;
+      padding: 4px;
+      background: #11131f;
+    }
+    .nav button {
+      border: 0;
+      border-radius: 6px;
+      padding: 7px 16px;
+      background: transparent;
+      color: var(--muted);
+      min-width: 88px;
+      cursor: default;
+    }
+    .nav .active {
+      background: var(--accent);
+      color: #10121c;
+      font-weight: 700;
+    }
+    .gear {
+      width: 34px;
+      height: 34px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      display: grid;
+      place-items: center;
+      color: var(--muted);
+      background: #11131f;
+      font-size: 18px;
+    }
+    .mock-menu {
+      position: absolute;
+      top: 50px;
+      right: calc(50% - 440px);
+      width: 220px;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      padding: 10px;
+      background: var(--panel);
+      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
+    }
+    .mock-menu div {
+      padding: 8px 10px;
+      border-radius: 6px;
+      color: var(--muted);
+      font-weight: 700;
+    }
+    .mock-menu .selected {
+      background: rgba(122, 162, 247, 0.14);
+      color: var(--text);
+    }
+    main {
+      max-width: 1380px;
+      margin: 0 auto;
+      padding: 28px 28px 60px;
+    }
+    h1,
+    h2,
+    h3,
+    p {
+      margin: 0;
+    }
+    h1 {
+      font-size: 28px;
+      letter-spacing: 0;
+    }
+    h2 {
+      font-size: 20px;
+      letter-spacing: 0;
+    }
+    h3 {
+      font-size: 16px;
+      letter-spacing: 0;
+    }
+    .subtitle {
+      color: var(--muted);
+      margin-top: 5px;
+    }
+    .page-head,
+    .section-head,
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .page-head {
+      align-items: flex-end;
+      margin-bottom: 18px;
+    }
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .btn {
+      min-height: 34px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--text);
+      padding: 7px 12px;
+      font-weight: 700;
+    }
+    .btn.primary {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: #10121c;
+    }
+    .btn.danger {
+      border-color: transparent;
+      color: var(--red);
+    }
+    .search {
+      width: 250px;
+      min-height: 34px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: var(--panel);
+      color: var(--text);
+      padding: 7px 10px;
+    }
+    .section {
+      margin-top: 24px;
+    }
+    .section-head {
+      margin-bottom: 10px;
+      align-items: flex-end;
+    }
+    .card {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      padding: 14px;
+    }
+    .notice {
+      border: 1px solid rgba(125, 207, 255, 0.36);
+      border-radius: 8px;
+      background: rgba(125, 207, 255, 0.08);
+      color: var(--cyan);
+      padding: 11px 13px;
+      margin-bottom: 18px;
+    }
+    .grid-3 {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .providers {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .eyebrow {
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .metric {
+      margin-top: 4px;
+      font-size: 18px;
+      font-weight: 800;
+    }
+    .muted {
+      color: var(--muted);
+    }
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 999px;
+      padding: 3px 8px;
+      font-size: 12px;
+      font-weight: 800;
+      white-space: nowrap;
+    }
+    .status.ok {
+      background: rgba(158, 206, 106, 0.13);
+      color: var(--green);
+    }
+    .status.warn {
+      background: rgba(224, 175, 104, 0.13);
+      color: var(--yellow);
+    }
+    .status.bad {
+      background: rgba(247, 118, 142, 0.13);
+      color: var(--red);
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--green);
+      display: inline-block;
+    }
+    .dot.yellow { background: var(--yellow); }
+    .dot.blue { background: var(--accent); }
+    .dot.red { background: var(--red); }
+    .defaults-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 10px;
+      margin-top: 12px;
+    }
+    .default-tile {
+      background: var(--panel-deep);
+      border: 1px solid rgba(65, 72, 104, 0.72);
+      border-radius: 7px;
+      padding: 11px;
+    }
+    .select-line {
+      display: grid;
+      grid-template-columns: 88px 1fr;
+      gap: 8px;
+      margin-top: 8px;
+      font-size: 12px;
+    }
+    .select-line span:nth-child(odd) {
+      color: var(--muted);
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 9px;
+    }
+    .chip {
+      border: 1px solid var(--line);
+      border-radius: 5px;
+      background: var(--panel-deep);
+      color: var(--text);
+      padding: 3px 7px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .gateway {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 18px;
+      align-items: start;
+    }
+    .provider-card {
+      position: relative;
+      overflow: hidden;
+    }
+    .provider-card::before {
+      content: "";
+      position: absolute;
+      inset: 0 0 auto;
+      height: 3px;
+      background: var(--accent);
+    }
+    .provider-card.anthropic::before { background: #ff9e64; }
+    .provider-card.openai::before { background: var(--green); }
+    .provider-card.fireworks::before { background: var(--cyan); }
+    .provider-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 800;
+      font-size: 16px;
+    }
+    .mini-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-top: 12px;
+    }
+    .mini {
+      min-height: 58px;
+      background: var(--panel-deep);
+      border-radius: 6px;
+      padding: 8px;
+    }
+    .route {
+      margin-top: 10px;
+      padding: 10px;
+      border-radius: 7px;
+      background: var(--panel-deep);
+    }
+    .connection {
+      margin-top: 10px;
+      border-top: 1px solid var(--line);
+      padding-top: 10px;
+    }
+    .connection-row {
+      margin-top: 7px;
+      padding: 9px;
+      border-radius: 6px;
+      background: var(--panel-deep);
+    }
+    .ops {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 12px;
+    }
+    .ops-card {
+      min-height: 168px;
+    }
+    .table {
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--panel);
+    }
+    .table div {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--line);
+    }
+    .table div:nth-child(-n+4) {
+      background: var(--panel-deep);
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .table div:nth-last-child(-n+4) {
+      border-bottom: 0;
+    }
+    .settings-mock {
+      display: grid;
+      grid-template-columns: 300px 1fr;
+      gap: 14px;
+      margin-top: 12px;
+    }
+    .settings-nav {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      padding: 10px;
+    }
+    .settings-nav div {
+      padding: 9px 10px;
+      border-radius: 6px;
+      color: var(--muted);
+      font-weight: 800;
+    }
+    .settings-nav .active {
+      background: var(--accent);
+      color: #10121c;
+    }
+    @media (max-width: 1100px) {
+      .grid-3,
+      .providers,
+      .ops,
+      .defaults-grid {
+        grid-template-columns: 1fr 1fr;
+      }
+      .gateway,
+      .settings-mock {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 720px) {
+      .topbar {
+        justify-content: flex-start;
+        padding-left: 10px;
+        overflow-x: auto;
+      }
+      .mock-menu {
+        display: none;
+      }
+      main {
+        padding: 22px 16px 48px;
+      }
+      .page-head,
+      .section-head,
+      .row {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+      .grid-3,
+      .grid-2,
+      .providers,
+      .ops,
+      .defaults-grid,
+      .mini-grid {
+        grid-template-columns: 1fr;
+      }
+      .table {
+        grid-template-columns: 1fr;
+      }
+      .table div:nth-child(-n+4) {
+        display: none;
+      }
+      .table div {
+        border-bottom: 0;
+        padding: 8px 10px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="topbar">
+    <div class="nav-shell">
+      <nav class="nav" aria-label="Current CTM navigation mock">
+        <button>Sessions</button>
+        <button>Prompts</button>
+        <button>Wall-E</button>
+        <button class="active">More</button>
+      </nav>
+      <div class="gear" aria-label="Settings">&#9881;</div>
+    </div>
+    <div class="mock-menu" aria-label="More menu mock">
+      <div>Insights</div>
+      <div>Permissions</div>
+      <div>Review</div>
+      <div>Rules</div>
+      <div class="selected">AI Providers</div>
+      <div>Backups</div>
+      <div>Worktrees</div>
+    </div>
+  </header>
+  <main>
+    <div class="page-head">
+      <div>
+        <h1>AI Providers</h1>
+        <p class="subtitle">Configure CTM, Wall-E, gateways, provider access, model operations, and model catalog details.</p>
+      </div>
+      <div class="actions">
+        <input class="search" type="search" placeholder="Search providers or models..." aria-label="Search providers or models">
+        <button class="btn">Test all</button>
+        <button class="btn primary">+ Add Provider</button>
+      </div>
+    </div>
+    <div class="notice">
+      Keep the current navigation: AI Providers stays under More, Settings stays as the gear. This page becomes the single editor; Settings only summarizes and links here.
+    </div>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Usage Defaults</h2>
+          <p class="subtitle">This answers where CTM and Wall-E provider routes are configured.</p>
+        </div>
+        <button class="btn">Save Defaults</button>
+      </div>
+      <article class="card">
+        <div class="row">
+          <div>
+            <h3>Default model routes</h3>
+            <p class="subtitle">Provider credentials live in cards below. These controls decide which route CTM and Wall-E use by default.</p>
+          </div>
+          <span class="status ok"><span class="dot"></span>2 healthy defaults</span>
+        </div>
+        <div class="defaults-grid">
+          <div class="default-tile">
+            <div class="eyebrow">CTM jobs</div>
+            <div class="metric">OpenAI &middot; Prefer Direct</div>
+            <div class="select-line"><span>Provider</span><span>OpenAI</span><span>Model</span><span>gpt-5.5</span><span>Fallback</span><span>Portkey when direct fails</span></div>
+          </div>
+          <div class="default-tile">
+            <div class="eyebrow">Wall-E jobs</div>
+            <div class="metric">Anthropic &middot; Auto</div>
+            <div class="select-line"><span>Provider</span><span>Anthropic</span><span>Model</span><span>claude-sonnet-4.5</span><span>Fallback</span><span>Portkey when available</span></div>
+          </div>
+          <div class="default-tile">
+            <div class="eyebrow">Wall-E Coding Agent</div>
+            <div class="metric">Anthropic &middot; Direct</div>
+            <div class="select-line"><span>Provider</span><span>Anthropic</span><span>Model</span><span>claude-sonnet-4.5</span><span>Runner</span><span>Wall-E coding agent</span></div>
+          </div>
+        </div>
+      </article>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Coding Agent Routes</h2>
+          <p class="subtitle">Coding agents are session runners. They can reference provider/model routes, but they are not provider cards.</p>
+        </div>
+      </div>
+      <div class="grid-3">
+        <article class="card">
+          <div class="row"><h3>Claude Code</h3><span class="status ok">Ready</span></div>
+          <div class="select-line"><span>Auth</span><span>Claude CLI</span><span>Default</span><span>Anthropic &middot; Sonnet</span><span>Config</span><span>Agent runtime</span></div>
+        </article>
+        <article class="card">
+          <div class="row"><h3>Codex / OpenAI</h3><span class="status ok">Ready</span></div>
+          <div class="select-line"><span>Auth</span><span>Codex CLI</span><span>Default</span><span>OpenAI &middot; GPT-5.5</span><span>Config</span><span>Agent runtime</span></div>
+        </article>
+        <article class="card">
+          <div class="row"><h3>Gemini</h3><span class="status warn">Needs test</span></div>
+          <div class="select-line"><span>Auth</span><span>Gemini CLI</span><span>Default</span><span>Google &middot; Pro</span><span>Config</span><span>Agent runtime</span></div>
+        </article>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Gateways</h2>
+          <p class="subtitle">Shared routing and discovery layers. Portkey connects once, then provider cards decide usage.</p>
+        </div>
+      </div>
+      <article class="card gateway">
+        <div>
+          <div class="row">
+            <div>
+              <h3>Portkey Gateway</h3>
+              <p class="subtitle">Connected &middot; 33 Portkey providers &middot; 2,483 imported models</p>
+            </div>
+            <span class="status ok">Synced 12m ago</span>
+          </div>
+          <div class="actions" style="justify-content:flex-start;margin-top:12px">
+            <button class="btn">Edit Gateway</button>
+            <button class="btn">Sync now</button>
+            <button class="btn">Apply to Portkey providers</button>
+            <button class="btn">Disable as default</button>
+            <button class="btn danger">Remove</button>
+          </div>
+        </div>
+        <div>
+          <div class="eyebrow">Portkey catalog providers</div>
+          <div class="chips">
+            <span class="chip">Anthropic &middot; 38 models</span>
+            <span class="chip">OpenAI &middot; 175 models</span>
+            <span class="chip">Google Gemini &middot; 124 models</span>
+            <span class="chip">Fireworks AI &middot; 27 models</span>
+            <span class="chip">Mistral AI &middot; 53 models</span>
+            <span class="chip">Together AI &middot; 170 models</span>
+          </div>
+        </div>
+      </article>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Provider Access</h2>
+          <p class="subtitle">Manual provider add, credentials, route policy, tests, rescans, remove actions, and model counts stay here.</p>
+        </div>
+      </div>
+      <div class="providers">
+        <article class="card provider-card anthropic">
+          <div class="row">
+            <div>
+              <div class="provider-title"><span class="dot yellow"></span>Anthropic</div>
+              <p class="subtitle">42 models &middot; 2 routes &middot; Wall-E default</p>
+            </div>
+            <span class="status ok">Active</span>
+          </div>
+          <div class="mini-grid">
+            <div class="mini"><div class="eyebrow">Cost range</div><strong>$0.25 - $15.00</strong></div>
+            <div class="mini"><div class="eyebrow">Capabilities</div><div class="chips"><span class="chip">chat</span><span class="chip">tools</span><span class="chip">vision</span></div></div>
+          </div>
+          <div class="route">
+            <div class="row">
+              <div><div class="eyebrow">Access route</div><strong>Auto</strong><p class="muted">1 direct &middot; 1 Portkey</p></div>
+              <div class="actions"><button class="btn">Use Portkey</button><button class="btn">Prefer Direct</button><button class="btn">Auto</button></div>
+            </div>
+          </div>
+          <div class="connection">
+            <div class="eyebrow">Connections</div>
+            <div class="connection-row"><strong>Anthropic direct</strong> <span class="chip">Direct</span><p class="muted">Credential set &middot; provider API &middot; 42 models</p><div class="actions" style="justify-content:flex-start"><button class="btn">Test</button><button class="btn">Re-scan</button></div></div>
+            <div class="connection-row"><strong>Anthropic via Portkey</strong> <span class="chip">Portkey</span><p class="muted">Gateway route &middot; 38 models</p><div class="actions" style="justify-content:flex-start"><button class="btn">Test</button><button class="btn">Re-scan</button><button class="btn danger">Remove</button></div></div>
+          </div>
+        </article>
+        <article class="card provider-card openai">
+          <div class="row">
+            <div>
+              <div class="provider-title"><span class="dot"></span>OpenAI</div>
+              <p class="subtitle">175 models &middot; 3 routes &middot; CTM default</p>
+            </div>
+            <span class="status ok">Active</span>
+          </div>
+          <div class="mini-grid">
+            <div class="mini"><div class="eyebrow">Cost range</div><strong>$0.05 - $150.00</strong></div>
+            <div class="mini"><div class="eyebrow">Capabilities</div><div class="chips"><span class="chip">chat</span><span class="chip">code</span><span class="chip">tools</span></div></div>
+          </div>
+          <div class="route">
+            <div class="row">
+              <div><div class="eyebrow">Access route</div><strong>Prefer Direct</strong><p class="muted">2 direct &middot; 1 Portkey</p></div>
+              <div class="actions"><button class="btn">Use Portkey</button><button class="btn">Prefer Direct</button><button class="btn">Auto</button></div>
+            </div>
+          </div>
+          <div class="connection">
+            <div class="eyebrow">Connections</div>
+            <div class="connection-row"><strong>OpenAI direct</strong> <span class="chip">Direct</span><p class="muted">Credential set &middot; provider API &middot; 108 models</p><div class="actions" style="justify-content:flex-start"><button class="btn">Test</button><button class="btn">Re-scan</button><button class="btn danger">Remove</button></div></div>
+          </div>
+        </article>
+        <article class="card provider-card fireworks">
+          <div class="row">
+            <div>
+              <div class="provider-title"><span class="dot blue"></span>Fireworks AI</div>
+              <p class="subtitle">27 models &middot; Portkey-only</p>
+            </div>
+            <span class="status ok">Active</span>
+          </div>
+          <div class="mini-grid">
+            <div class="mini"><div class="eyebrow">Cost range</div><strong>Catalog pricing</strong></div>
+            <div class="mini"><div class="eyebrow">Capabilities</div><div class="chips"><span class="chip">chat</span><span class="chip">code</span></div></div>
+          </div>
+          <div class="route">
+            <div><div class="eyebrow">Access route</div><strong>Portkey only</strong><p class="muted">No direct CTM provider configured.</p></div>
+          </div>
+          <div class="connection">
+            <div class="eyebrow">Connections</div>
+            <div class="connection-row"><strong>Fireworks via Portkey catalog</strong> <span class="chip">Portkey</span><p class="muted">Gateway route &middot; 27 models</p><div class="actions" style="justify-content:flex-start"><button class="btn">Test</button><button class="btn">Re-scan</button></div></div>
+          </div>
+        </article>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Model Operations</h2>
+          <p class="subtitle">Shadow Training, Tier Assignments, and Scorecard remain on AI Providers as model operations.</p>
+        </div>
+      </div>
+      <div class="ops">
+        <article class="card ops-card">
+          <div class="row"><h3>Shadow Training</h3><span class="status ok">Enabled</span></div>
+          <p class="subtitle">Collects comparison/evaluation data from eligible routes.</p>
+          <div class="chips"><span class="chip">1,248 results</span><span class="chip">82% evaluated</span><span class="chip">avg 0.74</span></div>
+          <div class="actions" style="justify-content:flex-start;margin-top:14px"><button class="btn">Configure</button><button class="btn">Review samples</button></div>
+        </article>
+        <article class="card ops-card">
+          <div class="row"><h3>Tier Assignments</h3><span class="status warn">2 unset</span></div>
+          <p class="subtitle">Maps fast/default/premium tasks to provider routes.</p>
+          <div class="chips"><span class="chip">Fast: OpenAI mini</span><span class="chip">Default: Sonnet</span><span class="chip">Premium: GPT-5.5</span></div>
+          <div class="actions" style="justify-content:flex-start;margin-top:14px"><button class="btn">Edit tiers</button></div>
+        </article>
+        <article class="card ops-card">
+          <div class="row"><h3>Scorecard</h3><span class="status ok">7d</span></div>
+          <p class="subtitle">Quality, latency, cost, evals, and benchmark coverage.</p>
+          <div class="chips"><span class="chip">OpenAI 91</span><span class="chip">Anthropic 89</span><span class="chip">Gemini 83</span></div>
+          <div class="actions" style="justify-content:flex-start;margin-top:14px"><button class="btn">7d</button><button class="btn">30d</button><button class="btn">All</button></div>
+        </article>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Model Catalog</h2>
+          <p class="subtitle">Collapsed/searchable inventory for pricing, capabilities, source, verification, and duplicate routes.</p>
+        </div>
+        <button class="btn">Expand catalog</button>
+      </div>
+      <div class="table" aria-label="Model catalog mock">
+        <div>Model</div><div>Provider</div><div>Route</div><div>Status</div>
+        <div>claude-sonnet-4.5</div><div>Anthropic</div><div>Direct</div><div>Verified</div>
+        <div>@anthropic/claude-sonnet-4.5</div><div>Anthropic</div><div>Portkey</div><div>Gateway</div>
+        <div>@fireworks-ai/qwen3-coder</div><div>Fireworks AI</div><div>Portkey</div><div>Catalog</div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Settings Summary Mock</h2>
+          <p class="subtitle">The gear keeps a consistent Settings UI: summary card, no duplicate provider editor.</p>
+        </div>
+      </div>
+      <div class="settings-mock">
+        <aside class="settings-nav" aria-label="Settings tabs mock">
+          <div>General</div>
+          <div class="active">AI</div>
+          <div>Integrations</div>
+          <div>Access</div>
+          <div>Advanced</div>
+        </aside>
+        <article class="card">
+          <div class="row">
+            <div>
+              <h3>AI summary</h3>
+              <p class="subtitle">Read-only overview of the same AI Providers state.</p>
+            </div>
+            <button class="btn primary">Open AI Providers</button>
+          </div>
+          <div class="defaults-grid">
+            <div class="default-tile"><div class="eyebrow">CTM jobs</div><strong>OpenAI &middot; Direct</strong></div>
+            <div class="default-tile"><div class="eyebrow">Wall-E jobs</div><strong>Anthropic &middot; Auto</strong></div>
+            <div class="default-tile"><div class="eyebrow">Health</div><strong>5 ok &middot; 1 warning</strong></div>
+          </div>
+        </article>
+      </div>
+    </section>
+  </main>
+</body>
+</html>