/* global React, Icon */

// ─── S13 Environment & API Config ─────────────────────
function S13_EnvConfig() {
  const [provider, setProvider] = React.useState("anthropic");
  const [showKey, setShowKey] = React.useState(false);
  const providers = [
    { id: "anthropic", label: "Anthropic Direct", desc: "api.anthropic.com" },
    { id: "bedrock", label: "Amazon Bedrock", desc: "AWS-managed" },
    { id: "vertex", label: "Google Vertex", desc: "GCP-managed" },
    { id: "foundry", label: "Microsoft Foundry", desc: "Azure-managed" },
    { id: "custom", label: "Custom Proxy", desc: "self-hosted gateway" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / claude settings / <span>environment</span></div>
          <h1>Environment &amp; API config</h1>
          <p>Writes to <span className="mono" style={{ color: "var(--ink-1)" }}>settings.json["env"]</span> · API keys never logged to CCM database</p>
        </div>
        <div className="actions">
          <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
            <button className="btn sm primary" style={{ justifyContent: "center" }}>Global</button>
            <button className="btn sm ghost" style={{ justifyContent: "center" }}>ccm-web</button>
          </div>
          <button className="btn"><Icon name="ext" size={12}/> View raw JSON</button>
          <button className="btn primary">Save</button>
        </div>
      </div>

      {/* Security banner */}
      <div style={{
        display: "flex", gap: 12, alignItems: "flex-start",
        background: "var(--warn-soft)", border: "1px solid #4a3a1f",
        borderRadius: "var(--r-3)", padding: "10px 14px", marginBottom: 14
      }}>
        <Icon name="shield" size={14} className=""/>
        <div style={{ fontSize: 12, lineHeight: 1.5 }}>
          <b style={{ color: "var(--warn)" }}>Subscription override.</b>
          <span style={{ color: "var(--ink-1)" }}> Setting <span className="mono">ANTHROPIC_API_KEY</span> overrides your Claude subscription on every session — billing falls to the API key. Leave blank to keep using subscription auth.</span>
        </div>
      </div>

      {/* Provider selector */}
      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-head"><h3><Icon name="globe" size={12}/> API provider</h3><span className="meta">determines which env vars apply</span></div>
        <div className="card-body">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
            {providers.map(p => (
              <div key={p.id} onClick={() => setProvider(p.id)} style={{
                padding: "12px 12px",
                borderRadius: "var(--r-2)",
                border: provider === p.id ? "1px solid var(--accent)" : "1px solid var(--border)",
                background: provider === p.id ? "var(--accent-soft)" : "var(--bg-1)",
                cursor: "pointer"
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                  <span style={{
                    width: 12, height: 12, borderRadius: 6,
                    border: "1px solid " + (provider === p.id ? "var(--accent)" : "var(--ink-3)"),
                    background: provider === p.id ? "var(--accent)" : "transparent",
                    boxShadow: provider === p.id ? "inset 0 0 0 2px var(--bg-2)" : "none"
                  }}/>
                  <span style={{ fontSize: 12, fontWeight: 600 }}>{p.label}</span>
                </div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{p.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {/* Authentication */}
        <div className="card">
          <div className="card-head"><h3><Icon name="shield" size={12}/> Authentication</h3><span className="pill warn"><span className="swatch"/>secrets</span></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="field">
              <label>
                ANTHROPIC_API_KEY
                <span className="pill" style={{ marginLeft: "auto" }}><span className="swatch"/>masked</span>
              </label>
              <div style={{ display: "flex", gap: 4 }}>
                <input className="input mono" type={showKey ? "text" : "password"} defaultValue="sk-ant-api03-xKj2vN8mPQrLs9wY3hTbVcZfRdEgHnMpQwXyZaBcDeFgHi" style={{ flex: 1 }}/>
                <button className="btn icon" onClick={() => setShowKey(!showKey)}><Icon name="eye" size={12}/></button>
                <button className="btn icon"><Icon name="copy" size={12}/></button>
              </div>
              <span className="hint" style={{ color: "var(--warn)" }}>⚠ overrides subscription · billing via API</span>
            </div>
            <div className="field">
              <label>ANTHROPIC_AUTH_TOKEN <span style={{ color: "var(--ink-3)" }}>optional</span></label>
              <input className="input mono" type="password" placeholder="bearer token (alternative to API key)"/>
            </div>
            <div className="field">
              <label>apiKeyHelper <span style={{ color: "var(--ink-3)" }}>script path</span></label>
              <input className="input mono" placeholder="~/.claude/keyhelper.sh"/>
              <span className="hint">script that prints API key to stdout — for rotation / vault integration</span>
            </div>
          </div>
        </div>

        {/* Provider-specific */}
        <div className="card">
          <div className="card-head"><h3><Icon name="server" size={12}/> Endpoint · {providers.find(p => p.id === provider).label}</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {provider === "anthropic" && (
              <>
                <div className="field">
                  <label>ANTHROPIC_BASE_URL</label>
                  <input className="input mono" defaultValue="https://api.anthropic.com"/>
                  <span className="hint">change for staging or proxy</span>
                </div>
                <div className="field">
                  <label>ANTHROPIC_BETAS <span style={{ color: "var(--ink-3)" }}>comma-separated</span></label>
                  <input className="input mono" placeholder="prompt-caching-2024-07-31, computer-use-2024-10-22"/>
                </div>
              </>
            )}
            {provider === "bedrock" && (
              <>
                <div className="field"><label>ANTHROPIC_BEDROCK_BASE_URL</label><input className="input mono" defaultValue="https://bedrock-runtime.us-east-1.amazonaws.com"/></div>
                <div className="field"><label>AWS_REGION</label><input className="input mono" defaultValue="us-east-1"/></div>
                <div className="field"><label>AWS_PROFILE</label><input className="input mono" defaultValue="default"/></div>
              </>
            )}
            {provider === "vertex" && (
              <>
                <div className="field"><label>ANTHROPIC_VERTEX_PROJECT_ID</label><input className="input mono" placeholder="my-gcp-project"/></div>
                <div className="field"><label>ANTHROPIC_VERTEX_BASE_URL</label><input className="input mono" defaultValue="https://us-central1-aiplatform.googleapis.com"/></div>
                <div className="field"><label>CLOUD_ML_REGION</label><input className="input mono" defaultValue="us-central1"/></div>
              </>
            )}
            {provider === "foundry" && (
              <div className="field"><label>ANTHROPIC_FOUNDRY_BASE_URL</label><input className="input mono" placeholder="https://my-resource.openai.azure.com"/></div>
            )}
            {provider === "custom" && (
              <>
                <div className="field"><label>ANTHROPIC_BASE_URL</label><input className="input mono" placeholder="https://your-proxy.com"/></div>
                <div className="field"><label>Custom headers</label>
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    <div style={{ display: "flex", gap: 4 }}>
                      <input className="input mono" placeholder="X-Custom-Header" style={{ flex: 1 }}/>
                      <input className="input mono" placeholder="value" style={{ flex: 1 }}/>
                      <button className="btn icon"><Icon name="x" size={11}/></button>
                    </div>
                    <button className="btn sm ghost" style={{ justifyContent: "flex-start" }}><Icon name="plus" size={11}/> Add header</button>
                  </div>
                </div>
              </>
            )}
            <div style={{ display: "flex", gap: 6, paddingTop: 4, borderTop: "1px dashed var(--border)" }}>
              <button className="btn sm"><Icon name="bolt" size={11}/> Test connection</button>
              <span className="pill ok" style={{ marginLeft: "auto" }}><span className="swatch"/>last test ok · 142ms</span>
            </div>
          </div>
        </div>

        {/* Model */}
        <div className="card">
          <div className="card-head"><h3><Icon name="spark" size={12}/> Model</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="field">
              <label>ANTHROPIC_MODEL</label>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {[
                  { id: "claude-sonnet-4-5", label: "claude-sonnet-4-5", note: "default · best balance" },
                  { id: "claude-opus-4-1", label: "claude-opus-4-1", note: "most capable · higher cost" },
                  { id: "claude-haiku-4-5", label: "claude-haiku-4-5", note: "fastest · lowest cost" },
                  { id: "custom", label: "Custom…", note: "specify any model id" },
                ].map(m => (
                  <label key={m.id} style={{
                    display: "flex", alignItems: "center", gap: 10,
                    padding: "8px 10px", borderRadius: 4, cursor: "pointer",
                    background: m.id === "claude-sonnet-4-5" ? "var(--bg-3)" : "var(--bg-1)",
                    border: m.id === "claude-sonnet-4-5" ? "1px solid var(--accent-line)" : "1px solid var(--border)",
                  }}>
                    <span style={{
                      width: 12, height: 12, borderRadius: 6,
                      border: "1px solid " + (m.id === "claude-sonnet-4-5" ? "var(--accent)" : "var(--ink-3)"),
                      background: m.id === "claude-sonnet-4-5" ? "var(--accent)" : "transparent",
                      boxShadow: m.id === "claude-sonnet-4-5" ? "inset 0 0 0 2px var(--bg-3)" : "none"
                    }}/>
                    <span className="mono" style={{ fontSize: 12, fontWeight: 500 }}>{m.label}</span>
                    <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-3)" }}>{m.note}</span>
                  </label>
                ))}
              </div>
            </div>
            <div className="field">
              <label>ANTHROPIC_SMALL_FAST_MODEL <span style={{ color: "var(--ink-3)" }}>for haiku tasks</span></label>
              <input className="input mono" defaultValue="claude-haiku-4-5"/>
            </div>
          </div>
        </div>

        {/* Advanced */}
        <div className="card">
          <div className="card-head"><h3>Advanced</h3><span className="meta">timeout &amp; limits</span></div>
          <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div className="field"><label>API_TIMEOUT_MS</label><input className="input mono" defaultValue="600000"/><span className="hint">10 min default</span></div>
            <div className="field"><label>MAX_THINKING_TOKENS</label><input className="input mono" defaultValue="8192"/></div>
            <div className="field"><label>DISABLE_PROMPT_CACHING</label><div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0" }}><span className="toggle"/><span className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>off</span></div></div>
            <div className="field"><label>HTTP_PROXY</label><input className="input mono" placeholder="http://proxy:8080"/></div>
            <div className="field" style={{ gridColumn: "span 2" }}>
              <label>Resolved env preview</label>
              <div className="code" style={{ fontSize: 11 }}>
{`"env": {
  `}<span className="k">"ANTHROPIC_API_KEY"</span>{`: `}<span className="s">"sk-ant-api03-•••••••••••••••"</span>{`,
  `}<span className="k">"ANTHROPIC_BASE_URL"</span>{`: `}<span className="s">"https://api.anthropic.com"</span>{`,
  `}<span className="k">"ANTHROPIC_MODEL"</span>{`: `}<span className="s">"claude-sonnet-4-5"</span>{`,
  `}<span className="k">"API_TIMEOUT_MS"</span>{`: `}<span className="s">"600000"</span>{`
}`}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── S14 Feature Flags ────────────────────────────────
const Flag = ({ envvar, label, desc, on, danger, beta }) => (
  <div style={{
    display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12,
    padding: "12px 14px",
    borderTop: "1px solid var(--border-soft)",
    alignItems: "flex-start"
  }}>
    <span className={`toggle ${on ? "on" : ""}`} style={{ marginTop: 2 }}/>
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
        <span style={{ fontSize: 12.5, fontWeight: 600 }}>{label}</span>
        {beta && <span className="pill accent"><span className="swatch"/>experimental</span>}
        {danger && <span className="pill warn"><Icon name="warn" size={9}/>caution</span>}
      </div>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", marginBottom: 4 }}>{envvar}</div>
      <div style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{desc}</div>
    </div>
    <span className="mono" style={{ fontSize: 10.5, color: on ? "var(--ok)" : "var(--ink-3)", whiteSpace: "nowrap", marginTop: 4 }}>= "{on ? "1" : "0"}"</span>
  </div>
);

function S14_FeatureFlags() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / claude settings / <span>feature flags</span></div>
          <h1>Feature flags</h1>
          <p>Boolean and tuning env vars · 4 enabled · changes take effect on next session</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="refresh" size={12}/> Reset to defaults</button>
          <button className="btn primary">Save</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {/* Experimental */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="spark" size={12}/> Experimental <span className="pill accent"><span className="swatch"/>beta</span></h3>
            <span className="meta">2 of 4 on</span>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <Flag on={true} beta envvar="CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS" label="Agent Teams mode"
              desc="Run multiple agents in parallel with shared context. Higher token cost; coordinator overhead."/>
            <Flag on={true} beta envvar="CLAUDE_CODE_FORK_SUBAGENT" label="Fork subagent mode"
              desc="Subagents inherit full parent context instead of starting fresh. Useful for handoffs; doubles per-step memory."/>
            <Flag on={false} beta envvar="CLAUDE_AUTO_BACKGROUND_TASKS" label="Auto-background long tasks"
              desc="Tasks running > 60s auto-detach. Stream continues via SSE; user can keep prompting in foreground."/>
            <Flag on={false} beta envvar="CLAUDE_CODE_ENABLE_TELEMETRY" label="OpenTelemetry tracing"
              desc="Emit OTLP spans to configured collector. Useful for fleet observability."/>
          </div>
        </div>

        {/* Context management */}
        <div className="card">
          <div className="card-head"><h3><Icon name="db" size={12}/> Context management</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 14, padding: 14 }}>
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, alignItems: "center" }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600 }}>Auto-compact threshold</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>CLAUDE_AUTOCOMPACT_PCT_OVERRIDE</div>
                </div>
                <span className="mono" style={{ fontSize: 14, fontWeight: 600, color: "var(--accent)" }}>80%</span>
              </div>
              <div style={{ position: "relative", height: 4, background: "var(--bg-4)", borderRadius: 2 }}>
                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "80%", background: "var(--accent)", borderRadius: 2 }}/>
                <div style={{ position: "absolute", left: "80%", top: -5, width: 14, height: 14, borderRadius: 7, background: "var(--ink-0)", border: "2px solid var(--accent)", transform: "translateX(-7px)" }}/>
                <div style={{ position: "absolute", left: "95%", top: -2, width: 1, height: 8, background: "var(--ink-3)" }}/>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 6 }}>
                <span>1%</span><span>50%</span><span style={{ color: "var(--ink-2)" }}>default 95%</span><span>100%</span>
              </div>
              <div style={{ fontSize: 11.5, color: "var(--ink-2)", marginTop: 8, lineHeight: 1.5 }}>
                Compact context when usage hits this percent of the window. Lower = more aggressive summarization.
              </div>
            </div>
            <Flag on={false} envvar="CLAUDE_CODE_DISABLE_CONTEXT_PERSIST" label="Disable session persistence"
              desc="Don't write session transcript to disk between turns. Faster but no /resume."/>
          </div>
        </div>

        {/* Bash behavior */}
        <div className="card">
          <div className="card-head"><h3><Icon name="terminal" size={12}/> Bash &amp; tools</h3></div>
          <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, padding: 14 }}>
            <div className="field">
              <label>BASH_DEFAULT_TIMEOUT_MS</label>
              <input className="input mono" defaultValue="120000"/>
              <span className="hint">2 min</span>
            </div>
            <div className="field">
              <label>BASH_MAX_TIMEOUT_MS</label>
              <input className="input mono" defaultValue="600000"/>
              <span className="hint">10 min ceiling</span>
            </div>
            <div className="field">
              <label>BASH_MAX_OUTPUT_LENGTH</label>
              <input className="input mono" defaultValue="30000"/>
              <span className="hint">chars before truncation</span>
            </div>
            <div className="field">
              <label>BASH_DEFAULT_CWD</label>
              <input className="input mono" defaultValue="$PROJECT_ROOT"/>
            </div>
            <div className="field" style={{ gridColumn: "span 2" }}>
              <Flag on={true} envvar="CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC" label="Block non-essential network"
                desc="Disable analytics, error reporting, font CDNs. Tools (WebFetch etc.) still work."/>
            </div>
          </div>
        </div>

        {/* CCM-specific */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="server" size={12}/> CCM-specific</h3>
            <span className="meta">applies to CCM only, not Claude Code</span>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <Flag on={true} envvar="CCM_LOGGING_LEVEL" label="Standard logging"
              desc="Capture tool call metadata + plan snapshots. Tool I/O bodies excluded."/>
            <Flag on={false} envvar="CCM_LOG_FULL_PAYLOADS" label="Full payload capture"
              desc="Store complete tool inputs and outputs. ~10× storage; never logs API keys regardless." danger/>
            <Flag on={true} envvar="CCM_AUTO_INSTALL_HOOKS" label="Auto-install hooks on new project"
              desc="Detect new working directory and offer to install tracing hooks."/>
            <Flag on={false} envvar="CCM_REDACT_SECRETS" label="Aggressive secret redaction"
              desc="Pattern-match common token formats in tool I/O before storage. Slight overhead per event."/>
          </div>
        </div>

        {/* Permission & Safety */}
        <div className="card">
          <div className="card-head">
            <h3><Icon name="shield" size={12}/> Permission &amp; safety</h3>
            <span className="pill warn"><span className="swatch"/>danger zone</span>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <Flag on={false} envvar="skipDangerousModePermissionPrompt" label="Skip dangerous-mode prompt"
              desc="Stop confirming before running destructive commands (rm -rf, force-push, drop table). Required for fully unattended runs." danger/>
            <Flag on={false} envvar="skipAutoPermissionPrompt" label="Skip auto permission prompt"
              desc="Auto-grant routine tool permissions without user confirmation. CCM still logs each grant." danger/>
            <Flag on={true} envvar="agentPushNotifEnabled" label="Agent push notifications"
              desc="System notification when an agent finishes or asks for input. Useful for long jobs."/>
          </div>
        </div>

        {/* UI & Display */}
        <div className="card">
          <div className="card-head"><h3><Icon name="eye" size={12}/> UI &amp; display</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 0, padding: 0 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, padding: 14, borderBottom: "1px solid var(--border-soft)" }}>
              <div className="field">
                <label>theme</label>
                <div className="input" style={{ display: "flex", justifyContent: "space-between" }}>dark <Icon name="chevd" size={11}/></div>
              </div>
              <div className="field">
                <label>language</label>
                <input className="input mono" defaultValue="en"/>
              </div>
            </div>
            <Flag on={false} envvar="prefersReducedMotion" label="Reduce motion"
              desc="Disable timeline scrubber animation, sparkline tweens, panel transitions."/>
            <Flag on={false} envvar="syntaxHighlightingDisabled" label="Disable syntax highlighting"
              desc="Render code blocks as plain mono. Faster on huge diffs."/>
            <Flag on={true} envvar="terminalTitleFromRename" label="Sync terminal title from /rename"
              desc="Update OS terminal title when session is renamed."/>
            <Flag on={true} envvar="awaySummaryEnabled" label="Away summary"
              desc="Show a recap of activity when you return after >5 min idle."/>
            <Flag on={true} envvar="autoScrollEnabled" label="Auto-scroll on new output"
              desc="Stick to bottom of transcript while assistant is streaming."/>
          </div>
        </div>

        {/* Git */}
        <div className="card">
          <div className="card-head"><h3><Icon name="git" size={12}/> Git</h3></div>
          <div className="card-body" style={{ padding: 0 }}>
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10, borderBottom: "1px solid var(--border-soft)" }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <div className="field">
                  <label>commit author name</label>
                  <input className="input mono" placeholder="(use git config)"/>
                </div>
                <div className="field">
                  <label>commit author email</label>
                  <input className="input mono" placeholder="(use git config)"/>
                </div>
              </div>
            </div>
            <Flag on={true} envvar="commitAttribution" label="Add Co-authored-by trailer"
              desc="Append `Co-authored-by: Claude <noreply@anthropic.com>` to commits made via /commit."/>
            <Flag on={true} envvar="prAttribution" label="Add 🤖 footer to PR descriptions"
              desc="Auto-generated PR bodies include a footer attributing Claude."/>
            <Flag on={true} envvar="includeGitInstructions" label="Include git instructions in system prompt"
              desc="Inject branch / staged-files / dirty status into every turn. Costs ~120 tokens/turn."/>
            <Flag on={true} envvar="respectGitignore" label="Respect .gitignore"
              desc="Skip ignored paths in Read/Glob/Grep tools. Recommended."/>
          </div>
        </div>

        {/* Updates */}
        <div className="card">
          <div className="card-head"><h3><Icon name="refresh" size={12}/> Updates</h3></div>
          <div className="card-body" style={{ padding: 14, display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="field">
              <label>autoUpdatesChannel</label>
              <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
                {["stable", "beta", "nightly", "off"].map((c, i) => (
                  <button key={c} className={`btn sm ${i === 0 ? "primary" : "ghost"}`} style={{ flex: 1, justifyContent: "center", textTransform: "capitalize" }}>{c}</button>
                ))}
              </div>
              <span className="hint">Stable releases ~weekly · nightly daily</span>
            </div>
            <div className="field">
              <label>minimumVersion</label>
              <input className="input mono" defaultValue="2.4.0"/>
              <span className="hint">refuse to launch if Claude Code is older than this</span>
            </div>
            <div style={{ padding: 10, background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 4, fontSize: 11.5, color: "var(--ink-2)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                <span>Current</span>
                <span className="mono" style={{ color: "var(--ink-0)" }}>2.4.7</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span>Available</span>
                <span className="mono" style={{ color: "var(--ok)" }}>2.4.7 · up to date</span>
              </div>
            </div>
          </div>
        </div>

        {/* Debug & Misc */}
        <div className="card" style={{ gridColumn: "span 2" }}>
          <div className="card-head"><h3><Icon name="terminal" size={12}/> Debug &amp; misc</h3></div>
          <div className="card-body" style={{ padding: 0 }}>
            <Flag on={false} envvar="disableAllHooks" label="Disable ALL hooks"
              desc="Kill switch — bypasses every PreToolUse/PostToolUse/UserPromptSubmit hook globally. Use only when debugging hook itself." danger/>
            <div style={{ padding: 14, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, borderTop: "1px solid var(--border-soft)" }}>
              <div className="field">
                <label>feedbackSurveyRate</label>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <div style={{ flex: 1, position: "relative", height: 4, background: "var(--bg-4)", borderRadius: 2 }}>
                    <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "10%", background: "var(--accent)", borderRadius: 2 }}/>
                    <div style={{ position: "absolute", left: "10%", top: -4, width: 12, height: 12, borderRadius: 6, background: "var(--ink-0)", border: "2px solid var(--accent)", transform: "translateX(-6px)" }}/>
                  </div>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 600, color: "var(--accent)", minWidth: 36, textAlign: "right" }}>0.1</span>
                </div>
                <span className="hint">prob. of survey prompt per session end</span>
              </div>
              <div className="field">
                <label>defaultShell</label>
                <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
                  {["bash", "zsh", "fish", "auto"].map((sh, i) => (
                    <button key={sh} className={`btn sm ${i === 1 ? "primary" : "ghost"}`} style={{ flex: 1, justifyContent: "center", padding: "5px 4px", fontSize: 11 }}>{sh}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>mcp.jsonServerCommand</label>
                <input className="input mono" placeholder="(none)"/>
                <span className="hint">override path to MCP json runner</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Active env summary */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head">
          <h3><Icon name="check" size={12}/> Active overrides <span className="pill accent"><span className="swatch"/>5</span></h3>
          <span className="meta mono">~/.claude/settings.json["env"]</span>
        </div>
        <div className="card-body">
          <div className="code">
{`{
  `}<span className="c">{`// experimental`}</span>{`
  `}<span className="k">"CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS"</span>{`: `}<span className="s">"1"</span>{`,
  `}<span className="k">"CLAUDE_CODE_FORK_SUBAGENT"</span>{`: `}<span className="s">"1"</span>{`,
  `}<span className="c">{`// context`}</span>{`
  `}<span className="k">"CLAUDE_AUTOCOMPACT_PCT_OVERRIDE"</span>{`: `}<span className="s">"80"</span>{`,
  `}<span className="c">{`// network`}</span>{`
  `}<span className="k">"CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC"</span>{`: `}<span className="s">"1"</span>{`,
  `}<span className="c">{`// ccm`}</span>{`
  `}<span className="k">"CCM_AUTO_INSTALL_HOOKS"</span>{`: `}<span className="s">"1"</span>
{`
}`}
          </div>
        </div>
      </div>
    </div>
  );
}

window.S13_EnvConfig = S13_EnvConfig;
window.S14_FeatureFlags = S14_FeatureFlags;