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/docs/designs/ai-configuration-consolidation-mock.html ADDED Viewed

@@ -0,0 +1,812 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CTM AI Configuration Consolidation Mock</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #171927;
+      --panel: #24283b;
+      --panel-2: #1b1d2d;
+      --line: #414868;
+      --text: #c0caf5;
+      --muted: #7883b3;
+      --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;
+      border-bottom: 1px solid var(--line);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: sticky;
+      top: 0;
+      background: rgba(23, 25, 39, 0.96);
+      backdrop-filter: blur(10px);
+      z-index: 10;
+    }
+    .nav {
+      display: flex;
+      gap: 4px;
+      border: 1px solid var(--line);
+      border-radius: 9px;
+      padding: 4px;
+      background: #121421;
+    }
+    .nav button {
+      border: 0;
+      border-radius: 6px;
+      padding: 7px 16px;
+      background: transparent;
+      color: var(--muted);
+      min-width: 88px;
+    }
+    .nav .active {
+      background: var(--accent);
+      color: #0d1117;
+      font-weight: 700;
+    }
+    main {
+      max-width: 1320px;
+      margin: 0 auto;
+      padding: 30px 28px 56px;
+    }
+    .page-title {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 20px;
+      margin-bottom: 22px;
+    }
+    h1, h2, h3, p { margin: 0; }
+    h1 {
+      font-size: 28px;
+      letter-spacing: 0;
+    }
+    .subtitle {
+      color: var(--muted);
+      margin-top: 6px;
+      font-size: 15px;
+    }
+    .actions, .row-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+    .btn {
+      border: 1px solid var(--line);
+      background: transparent;
+      color: var(--text);
+      border-radius: 6px;
+      padding: 7px 12px;
+      min-height: 34px;
+    }
+    .btn.primary {
+      border-color: var(--accent);
+      background: var(--accent);
+      color: #111827;
+      font-weight: 700;
+    }
+    .btn.warn {
+      color: var(--red);
+      border-color: transparent;
+    }
+    .tabs {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(120px, 1fr));
+      gap: 2px;
+      padding: 3px;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: var(--panel-2);
+      margin-bottom: 18px;
+    }
+    .tabs button {
+      border: 0;
+      border-radius: 7px;
+      background: transparent;
+      color: var(--muted);
+      padding: 9px 10px;
+      font-weight: 600;
+    }
+    .tabs .active {
+      background: var(--accent);
+      color: #10121c;
+    }
+    .notice {
+      border: 1px solid rgba(125, 207, 255, 0.4);
+      background: rgba(125, 207, 255, 0.08);
+      border-radius: 8px;
+      padding: 12px 14px;
+      color: var(--cyan);
+      margin-bottom: 18px;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+      margin-bottom: 18px;
+    }
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 14px;
+    }
+    .card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+    .eyebrow {
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 700;
+    }
+    .metric {
+      font-size: 22px;
+      font-weight: 800;
+      margin-top: 4px;
+    }
+    .fine {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 999px;
+      padding: 3px 8px;
+      font-size: 12px;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+    .status.ok {
+      color: var(--green);
+      background: rgba(158, 206, 106, 0.12);
+    }
+    .status.warn {
+      color: var(--yellow);
+      background: rgba(224, 175, 104, 0.12);
+    }
+    .section {
+      margin-top: 24px;
+    }
+    .section-head {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 10px;
+    }
+    .section-head h2 {
+      font-size: 20px;
+    }
+    .agents {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .agent-card {
+      min-height: 148px;
+    }
+    .agent-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 800;
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    .dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: var(--green);
+      display: inline-block;
+    }
+    .dot.yellow { background: var(--yellow); }
+    .dot.blue { background: var(--accent); }
+    .kv {
+      display: grid;
+      grid-template-columns: 88px 1fr;
+      gap: 6px 10px;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+    .kv span:nth-child(odd) {
+      color: var(--muted);
+    }
+    .gateway-card {
+      display: grid;
+      grid-template-columns: 1.1fr 1fr;
+      gap: 18px;
+      align-items: start;
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 10px;
+    }
+    .chip {
+      border: 1px solid var(--line);
+      border-radius: 5px;
+      padding: 3px 7px;
+      color: var(--text);
+      background: var(--panel-2);
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .provider-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+    .provider-toolbar input {
+      background: var(--panel);
+      border: 1px solid var(--line);
+      color: var(--text);
+      border-radius: 6px;
+      padding: 8px 10px;
+      width: min(280px, 100%);
+    }
+    .providers {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .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.google::before { background: var(--accent); }
+    .provider-name {
+      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: 12px 0 10px;
+    }
+    .mini {
+      background: var(--panel-2);
+      border-radius: 6px;
+      padding: 8px;
+      min-height: 58px;
+    }
+    .route-box {
+      background: var(--panel-2);
+      border-radius: 6px;
+      padding: 9px;
+      margin-bottom: 10px;
+    }
+    .route-line {
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      align-items: center;
+      margin-top: 5px;
+    }
+    .connection {
+      border-top: 1px solid var(--line);
+      padding-top: 10px;
+      margin-top: 10px;
+    }
+    .connection-row {
+      background: var(--panel-2);
+      border-radius: 6px;
+      padding: 9px;
+      margin-top: 6px;
+    }
+    .catalog {
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--panel);
+    }
+    .catalog div {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--line);
+    }
+    .catalog div:nth-child(-n+4) {
+      color: var(--muted);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      background: var(--panel-2);
+      font-weight: 800;
+    }
+    .catalog div:nth-last-child(-n+4) {
+      border-bottom: 0;
+    }
+    .settings-preview {
+      display: grid;
+      grid-template-columns: 320px 1fr;
+      gap: 16px;
+      align-items: start;
+      margin-top: 32px;
+    }
+    .settings-nav {
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 10px;
+    }
+    .settings-nav div {
+      padding: 9px 10px;
+      border-radius: 6px;
+      color: var(--muted);
+      font-weight: 700;
+    }
+    .settings-nav .active {
+      background: var(--accent);
+      color: #10121c;
+    }
+    @media (max-width: 1000px) {
+      main { padding: 22px 16px 40px; }
+      .grid, .providers { grid-template-columns: 1fr 1fr; }
+      .agents { grid-template-columns: 1fr 1fr; }
+      .gateway-card, .settings-preview { grid-template-columns: 1fr; }
+      .tabs { grid-template-columns: 1fr 1fr; }
+    }
+    @media (max-width: 640px) {
+      .topbar { justify-content: flex-start; padding-left: 10px; overflow-x: auto; }
+      .nav { min-width: max-content; }
+      .page-title, .section-head, .provider-toolbar { align-items: flex-start; flex-direction: column; }
+      .grid, .providers, .agents, .mini-grid { grid-template-columns: 1fr; }
+      .catalog { grid-template-columns: 1fr; }
+      .catalog div:nth-child(-n+4) { display: none; }
+      .catalog div { border-bottom: 0; padding: 7px 10px; }
+      .route-line { align-items: flex-start; flex-direction: column; }
+    }
+  </style>
+</head>
+<body>
+  <div class="topbar">
+    <nav class="nav" aria-label="Mock primary navigation">
+      <button>Sessions</button>
+      <button>Prompts</button>
+      <button>Wall-E</button>
+      <button class="active">AI</button>
+      <button>Settings</button>
+    </nav>
+  </div>
+  <main>
+    <div class="page-title">
+      <div>
+        <h1>AI Configuration</h1>
+        <p class="subtitle">One place for coding agents, gateways, AI providers, model health, testing, and Wall-E routing.</p>
+      </div>
+      <div class="actions">
+        <button class="btn">Test all</button>
+        <button class="btn">Connect gateway</button>
+        <button class="btn primary">Add provider</button>
+      </div>
+    </div>
+    <div class="tabs" role="tablist" aria-label="AI configuration sections">
+      <button class="active">Overview</button>
+      <button>Coding Agents</button>
+      <button>Gateways</button>
+      <button>AI Providers</button>
+      <button>Model Catalog</button>
+    </div>
+    <div class="notice">
+      Discussion point: both top navigation and Settings should land here. Settings can keep a summary, but not a second provider editor.
+    </div>
+    <section class="grid" aria-label="Overview metrics">
+      <article class="card">
+        <div class="card-header">
+          <div>
+            <div class="eyebrow">CTM jobs</div>
+            <div class="metric">OpenAI · Auto</div>
+            <p class="fine">Default route for background jobs and prompt utilities.</p>
+          </div>
+          <span class="status ok">Healthy</span>
+        </div>
+      </article>
+      <article class="card">
+        <div class="card-header">
+          <div>
+            <div class="eyebrow">Wall-E jobs</div>
+            <div class="metric">Anthropic · Direct</div>
+            <p class="fine">Used for Wall-E chat, reflection, and scheduled jobs.</p>
+          </div>
+          <span class="status warn">1 warning</span>
+        </div>
+      </article>
+      <article class="card">
+        <div class="card-header">
+          <div>
+            <div class="eyebrow">Wall-E Coding Agent</div>
+            <div class="metric">Claude Sonnet</div>
+            <p class="fine">Runtime is a coding agent; model route comes from AI Providers.</p>
+          </div>
+          <span class="status ok">Ready</span>
+        </div>
+      </article>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Coding Agents</h2>
+          <p class="subtitle">Session runners are configured separately from provider/model access.</p>
+        </div>
+        <button class="btn">Manage agent defaults</button>
+      </div>
+      <div class="agents">
+        <article class="card agent-card">
+          <div class="agent-title"><span class="dot"></span>Claude Code</div>
+          <p class="fine">Runs Claude coding sessions.</p>
+          <div class="kv">
+            <span>Auth</span><span>Claude CLI</span>
+            <span>Model</span><span>Anthropic · Sonnet</span>
+            <span>Status</span><span>Available</span>
+          </div>
+        </article>
+        <article class="card agent-card">
+          <div class="agent-title"><span class="dot blue"></span>Codex / OpenAI</div>
+          <p class="fine">Runs OpenAI coding sessions.</p>
+          <div class="kv">
+            <span>Auth</span><span>Codex CLI</span>
+            <span>Model</span><span>OpenAI · GPT-5.5</span>
+            <span>Status</span><span>Available</span>
+          </div>
+        </article>
+        <article class="card agent-card">
+          <div class="agent-title"><span class="dot yellow"></span>Gemini</div>
+          <p class="fine">Runs Google/Gemini sessions.</p>
+          <div class="kv">
+            <span>Auth</span><span>Gemini CLI</span>
+            <span>Model</span><span>Google · Pro</span>
+            <span>Status</span><span>Needs test</span>
+          </div>
+        </article>
+        <article class="card agent-card">
+          <div class="agent-title"><span class="dot"></span>Wall-E Coding Agent</div>
+          <p class="fine">Uses CTM/Wall-E model routes.</p>
+          <div class="kv">
+            <span>Auth</span><span>Internal</span>
+            <span>Model</span><span>Anthropic · Direct</span>
+            <span>Status</span><span>Ready</span>
+          </div>
+        </article>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>Gateways</h2>
+          <p class="subtitle">Shared routing layers for model discovery and provider access.</p>
+        </div>
+      </div>
+      <article class="card gateway-card">
+        <div>
+          <div class="card-header">
+            <div>
+              <h3>Portkey Gateway</h3>
+              <p class="fine">Connected · 33 Portkey providers · 2,483 imported models</p>
+            </div>
+            <span class="status ok">Synced 12m ago</span>
+          </div>
+          <div class="row-actions" style="justify-content:flex-start">
+            <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 warn">Remove</button>
+          </div>
+        </div>
+        <div>
+          <div class="eyebrow">Imported providers</div>
+          <div class="chips">
+            <span class="chip">Anthropic · 38 models</span>
+            <span class="chip">OpenAI · 175 models</span>
+            <span class="chip">Google Gemini · 124 models</span>
+            <span class="chip">Fireworks AI · 27 models</span>
+            <span class="chip">Mistral AI · 53 models</span>
+            <span class="chip">Together AI · 170 models</span>
+          </div>
+        </div>
+      </article>
+    </section>
+    <section class="section">
+      <div class="section-head">
+        <div>
+          <h2>AI Providers</h2>
+          <p class="subtitle">Keep the existing model/provider information, tests, rescans, credentials, and route policy here.</p>
+        </div>
+      </div>
+      <div class="provider-toolbar">
+        <div class="chips" style="margin-top:0">
+          <span class="chip">2,662 models</span>
+          <span class="chip">42 AI providers</span>
+          <span class="chip">3 failing tests</span>
+        </div>
+        <input type="search" placeholder="Search AI providers..." aria-label="Search AI providers">
+      </div>
+      <div class="providers">
+        <article class="card provider-card anthropic">
+          <div class="card-header">
+            <div>
+              <div class="provider-name"><span class="dot yellow"></span>Anthropic</div>
+              <p class="fine">42 models · 2 routes · Used by Wall-E jobs</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-box">
+            <div class="eyebrow">Access route</div>
+            <div class="route-line">
+              <strong>Auto</strong>
+              <div class="row-actions">
+                <button class="btn">Use Portkey</button>
+                <button class="btn">Prefer Direct</button>
+                <button class="btn">Auto</button>
+              </div>
+            </div>
+            <p class="fine">1 direct · 1 Portkey · provider-level policy</p>
+          </div>
+          <div class="connection">
+            <div class="eyebrow">Connections</div>
+            <div class="connection-row">
+              <strong>Anthropic direct</strong> <span class="chip">Direct</span>
+              <p class="fine">Credential set · provider API · 42 models</p>
+              <div class="row-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="fine">Credential set · gateway route · 38 models</p>
+              <div class="row-actions" style="justify-content:flex-start"><button class="btn">Test</button><button class="btn">Re-scan</button></div>
+            </div>
+          </div>
+        </article>
+        <article class="card provider-card openai">
+          <div class="card-header">
+            <div>
+              <div class="provider-name"><span class="dot"></span>OpenAI</div>
+              <p class="fine">175 models · 3 routes · 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-box">
+            <div class="eyebrow">Access route</div>
+            <div class="route-line">
+              <strong>Prefer Direct</strong>
+              <div class="row-actions">
+                <button class="btn">Use Portkey</button>
+                <button class="btn">Prefer Direct</button>
+                <button class="btn">Auto</button>
+              </div>
+            </div>
+            <p class="fine">2 direct · 1 Portkey · provider-level policy</p>
+          </div>
+          <div class="connection">
+            <div class="eyebrow">Connections</div>
+            <div class="connection-row">
+              <strong>OpenAI direct</strong> <span class="chip">Direct</span>
+              <p class="fine">Credential set · provider API · 108 models</p>
+              <div class="row-actions" style="justify-content:flex-start"><button class="btn">Test</button><button class="btn">Re-scan</button><button class="btn warn">Remove</button></div>
+            </div>
+          </div>
+        </article>
+        <article class="card provider-card google">
+          <div class="card-header">
+            <div>
+              <div class="provider-name"><span class="dot"></span>Fireworks AI</div>
+              <p class="fine">27 models · 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-box">
+            <div class="eyebrow">Access route</div>
+            <div class="route-line">
+              <strong>Portkey only</strong>
+              <span class="chip">No direct CTM provider configured</span>
+            </div>
+            <p class="fine">Created from Portkey catalog discovery.</p>
+          </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="fine">Gateway route · 27 models</p>
+              <div class="row-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 Catalog</h2>
+          <p class="subtitle">Long model inventory stays available for inspection, search, pricing, route source, and ambiguity debugging.</p>
+        </div>
+        <button class="btn">Expand catalog</button>
+      </div>
+      <div class="catalog" 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="settings-preview" aria-label="Settings consolidation mock">
+      <div>
+        <h2>Settings Mock</h2>
+        <p class="subtitle">Settings keeps a summary/deep link, not a second AI provider editor.</p>
+      </div>
+      <div></div>
+      <aside class="settings-nav">
+        <div>General</div>
+        <div class="active">AI</div>
+        <div>Integrations</div>
+        <div>Access</div>
+        <div>Advanced</div>
+      </aside>
+      <article class="card">
+        <div class="card-header">
+          <div>
+            <h3>AI summary</h3>
+            <p class="fine">Open the AI Configuration page for provider cards, models, testing, gateways, and defaults.</p>
+          </div>
+          <button class="btn primary">Open AI Configuration</button>
+        </div>
+        <div class="grid" style="grid-template-columns:repeat(3,1fr);margin:0">
+          <div class="mini"><div class="eyebrow">Providers</div><strong>42 configured</strong></div>
+          <div class="mini"><div class="eyebrow">Health</div><strong>3 need attention</strong></div>
+          <div class="mini"><div class="eyebrow">Last test</div><strong>30s ago</strong></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>