/* global React, Icon */

// ─── S07 Agents ───────────────────────────────────────
function S07_Agents() {
  const agents = [
    { name: "general", builtin: true, model: "sonnet-4-5", tools: 12, perm: "default", scope: "global", desc: "Default agent. Full toolset, conservative permissions." },
    { name: "code-reviewer", builtin: false, model: "sonnet-4-5", tools: 5, perm: "read-only", scope: "global", desc: "Reviews diffs, no write tools." },
    { name: "doc-writer", builtin: false, model: "haiku-4-5", tools: 4, perm: "default", scope: "project", desc: "Drafts docs from code; lower-cost model." },
    { name: "test-runner", builtin: false, model: "sonnet-4-5", tools: 6, perm: "bash-restricted", scope: "project", desc: "Runs tests; Bash whitelisted to bun/jest." },
    { name: "migration", builtin: false, model: "opus-4-1", tools: 14, perm: "elevated", scope: "global", desc: "Long-running schema migrations. Plan-first." },
  ];
  const sel = agents[1];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / <span>agents</span></div>
          <h1>Agents</h1>
          <p>5 definitions · 1 built-in · 4 custom · 2 project-scoped</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="folder" size={12}/> Open ~/.claude/agents</button>
          <button className="btn primary"><Icon name="plus" size={12}/> New agent</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3>All agents</h3><span className="meta">5</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {agents.map((a, i) => (
              <div key={a.name} style={{
                padding: "10px 12px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                background: a.name === sel.name ? "var(--bg-3)" : "transparent",
                borderLeft: a.name === sel.name ? "2px solid var(--accent)" : "2px solid transparent",
                cursor: "pointer"
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: ["#d97757", "#6ba3d6", "#7fb685", "#e0a458", "#c97daa"][i] }}/>
                    <span style={{ fontWeight: 500, fontSize: 12.5 }}>{a.name}</span>
                    {a.builtin && <span className="pill"><span className="swatch"/>built-in</span>}
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{a.scope}</span>
                </div>
                <div style={{ fontSize: 11, color: "var(--ink-2)", marginTop: 4 }}>{a.desc}</div>
                <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
                  <span className="pill mono">{a.model}</span>
                  <span className="pill"><Icon name="bolt" size={9}/>{a.tools} tools</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3><Icon name="agent" size={12}/> code-reviewer <span className="pill"><span className="swatch"/>custom</span></h3>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn sm"><Icon name="bolt" size={11}/> Test</button>
              <button className="btn sm"><Icon name="copy" size={11}/> Duplicate</button>
              <button className="btn sm primary">Save</button>
            </div>
          </div>
          <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="field">
                <label>Name</label>
                <input className="input mono" defaultValue="code-reviewer"/>
              </div>
              <div className="field">
                <label>Description</label>
                <input className="input" defaultValue="Reviews diffs against guidelines. No write tools."/>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <div className="field">
                  <label>Model</label>
                  <div className="input" style={{ display: "flex", justifyContent: "space-between" }}>claude-sonnet-4-5 <Icon name="chevd" size={11}/></div>
                </div>
                <div className="field">
                  <label>Permission</label>
                  <div className="input" style={{ display: "flex", justifyContent: "space-between" }}>read-only <Icon name="chevd" size={11}/></div>
                </div>
              </div>
              <div className="field">
                <label>Color</label>
                <div style={{ display: "flex", gap: 6 }}>
                  {["#d97757", "#6ba3d6", "#7fb685", "#e0a458", "#c97daa", "#6cc0b8"].map((c, i) => (
                    <span key={c} style={{
                      width: 22, height: 22, borderRadius: 4, background: c, cursor: "pointer",
                      border: i === 1 ? "2px solid var(--ink-0)" : "1px solid var(--border)"
                    }}/>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Allowed tools <span style={{ color: "var(--ink-3)" }}>5 of 12</span></label>
                <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12 }}>
                  {[
                    ["Read", true], ["Glob", true], ["Grep", true], ["WebFetch", true], ["Task", true],
                    ["Edit", false], ["Write", false], ["Bash", false], ["NotebookEdit", false]
                  ].map(([t, on]) => (
                    <label key={t} style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0" }}>
                      <span className={`toggle ${on ? "on" : ""}`}/>
                      <span className="mono" style={{ fontSize: 11.5, color: on ? "var(--ink-0)" : "var(--ink-3)" }}>{t}</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="field">
                <label>System prompt <span style={{ color: "var(--ink-3)" }}>markdown</span></label>
                <div className="code" style={{ height: 200, whiteSpace: "pre-wrap" }}>
{`You are a `}<span className="k">code-reviewer</span>{` agent.

Read the diff. Flag:
- correctness bugs
- API contract changes
- missing tests
- perf regressions

Be terse. One bullet per concern.
Cite file:line. No prose intros.`}
                </div>
              </div>
              <div className="field">
                <label>Frontmatter preview</label>
                <div className="code">
{`---
`}<span className="k">name</span>{`: code-reviewer
`}<span className="k">description</span>{`: Reviews diffs…
`}<span className="k">model</span>{`: claude-sonnet-4-5
`}<span className="k">tools</span>{`: [Read, Glob, Grep, WebFetch, Task]
`}<span className="k">permission_mode</span>{`: read-only
`}<span className="k">color</span>{`: blue
---`}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── S08 Skills ────────────────────────────────────────
function S08_Skills() {
  const skills = [
    { name: "pdf-extract", scope: "global", paths: "*.pdf", invoc: true, tools: 3 },
    { name: "deck-export", scope: "global", paths: "*.html", invoc: true, tools: 4 },
    { name: "schema-migrate", scope: "project", paths: "drizzle/*.ts", invoc: false, tools: 6 },
    { name: "release-notes", scope: "project", paths: "CHANGELOG.md", invoc: true, tools: 2 },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / <span>skills</span></div>
          <h1>Skills</h1>
          <p>4 skills · 2 global · 2 project · click to edit SKILL.md and supporting files</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="book" size={12}/> Docs</button>
          <button className="btn primary"><Icon name="plus" size={12}/> New skill</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3>Skills</h3><span className="meta">4</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {skills.map((s, i) => (
              <div key={s.name} style={{
                padding: "10px 12px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                background: i === 1 ? "var(--bg-3)" : "transparent",
                borderLeft: i === 1 ? "2px solid var(--accent)" : "2px solid transparent",
                cursor: "pointer"
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <Icon name="skill" size={12} className=""/>
                    <span style={{ fontWeight: 500 }}>{s.name}</span>
                  </span>
                  <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{s.scope}</span>
                </div>
                <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                  <span className="pill mono">{s.paths}</span>
                  <span className="pill"><Icon name="bolt" size={9}/>{s.tools}</span>
                  {s.invoc ? <span className="pill ok"><span className="swatch"/>auto</span> : <span className="pill"><span className="swatch"/>manual</span>}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>deck-export · SKILL.md</h3>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn sm ghost"><Icon name="eye" size={11}/> Preview</button>
              <button className="btn sm primary">Save</button>
            </div>
          </div>
          <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 220px", gap: 16 }}>
            <div>
              <div style={{ display: "flex", gap: 4, marginBottom: 10, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
                <button className="btn sm primary" style={{ flex: 1, justifyContent: "center" }}>Edit</button>
                <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>Preview</button>
                <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>Frontmatter</button>
              </div>
              <div className="code" style={{ height: 320, whiteSpace: "pre-wrap" }}>
<span className="c">{`---
`}</span><span className="k">{`name`}</span>{`: deck-export
`}<span className="k">{`description`}</span>{`: Export an HTML deck to PPTX or PDF.
`}<span className="k">{`disable-model-invocation`}</span>{`: false
`}<span className="k">{`allowed-tools`}</span>{`: [Bash, Read, Write, WebFetch]
`}<span className="k">{`paths`}</span>{`: ["*.html"]
<span className="c">---</span>

# Deck export

When user asks to export a slide deck, follow these steps:

1. Validate that each slide is in canonical form…
2. Run the exporter via `}<span className="s">{`bun run export.ts`}</span>{`
3. If captions exist, attach speaker notes…

## Files

- export.ts — the exporter
- prompts/refine.md — caption refinement prompt`}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", marginBottom: 8 }}>Files</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {[
                  { n: "SKILL.md", active: true },
                  { n: "export.ts" },
                  { n: "prompts/" },
                  { n: "  refine.md" },
                  { n: "  qa.md" },
                  { n: "templates/" },
                  { n: "  16x9.html" },
                ].map((f, i) => (
                  <div key={i} style={{
                    fontSize: 11.5,
                    fontFamily: "var(--font-mono)",
                    padding: "3px 8px",
                    borderRadius: 3,
                    background: f.active ? "var(--bg-3)" : "transparent",
                    color: f.active ? "var(--ink-0)" : "var(--ink-2)",
                    cursor: "pointer"
                  }}>{f.n}</div>
                ))}
              </div>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", margin: "16px 0 8px" }}>Slash command preview</div>
              <div className="code" style={{ fontSize: 11 }}>
<span className="p">{`/`}</span><span className="k">{`deck-export`}</span>{`
  `}<span className="c">{`Export an HTML deck to`}</span>{`
  `}<span className="c">{`PPTX or PDF.`}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.S07_Agents = S07_Agents;
window.S08_Skills = S08_Skills;