// panes/about.js — static metadata + links.
import { registerPane } from '../app.js';
import { MCP_BASE } from '../lib/api.js';

const TPL = `
  <div class="pane-head">
    <div><div class="title">About</div><div class="sub">CxWebApp control center.</div></div>
  </div>
  <div class="grid cols-2">
    <div class="card">
      <h2>What is this?</h2>
      <p class="muted mt-2">Single-page UI for the CxWebApp Crow backend. Sidecars (diffusion / demand / lang / slack) and the CxAI MCP agent are all exposed through this one console.</p>
      <h3 class="mt-4 mb-2">Endpoints</h3>
      <ul class="muted" style="line-height:1.9">
        <li><code>/api/health</code>, <code>/api/version</code>, <code>/api/system</code></li>
        <li><code>/api/items</code> · <code>/api/diffusion/*</code> · <code>/api/demand/*</code></li>
        <li><code>/api/lang/*</code> · <code>/api/slack/*</code> · <code>/api/mac/*</code></li>
        <li><code>/ws/echo</code></li>
        <li>MCP base: <code>${MCP_BASE}</code></li>
      </ul>
    </div>
    <div class="card">
      <h2>Shortcuts</h2>
      <p class="muted mt-2">Use <kbd>⌘K</kbd> / <kbd>Ctrl-K</kbd> to open the command palette.</p>
      <p class="muted mt-2">Theme is persisted in <code>localStorage</code> as <code>cx_theme</code>.</p>
      <h3 class="mt-4 mb-2">Configuring the MCP base</h3>
      <p class="muted">Set <code>data-mcp-base="…"</code> on <code>&lt;body&gt;</code> in <code>static/index.html</code>.</p>
    </div>
  </div>
`;

registerPane('about', {
  label: 'About',
  init(host) { host.innerHTML = TPL; },
});
