import type { FC } from "hono/jsx";

export interface AgentWorkspaceProps {
  owner?: string;
  repo?: string;
  prNumber?: number;
  user?: any;
}

const EVENTS = [
  {
    title: "Gate failed on push",
    time: "12:04",
    dotColor: "#b42318",
    body: "gate: tests went red on feat/repair-sandbox-loop — 2 of 412 tests failing after the sandbox lifecycle change.",
    code: "✗ auto-repair › reuses sandbox session across attempts\n✗ auto-repair › caps repair attempts at limit",
    diff: false,
  },
  {
    title: "Claude attached to the PR sandbox",
    time: "12:05",
    dotColor: "#16181d",
    body: "Instead of opening a detached loop, the agent joined the existing pr-218 sandbox and reproduced both failures in isolation.",
    code: null,
    diff: false,
  },
  {
    title: "Patch drafted",
    time: "12:07",
    dotColor: "#16181d",
    body: "Root cause: the repair loop never terminated when a gate stayed red. Claude bounded the loop and threaded the sandbox session through each attempt.",
    code: null,
    diff: true,
  },
  {
    title: "Gates re-run — all green",
    time: "12:08",
    dotColor: "#1e7f5c",
    body: "412 tests pass. Security and type gates unchanged. The repair attempt, patch, and outcome were recorded to flywheel telemetry.",
    code: null,
    diff: false,
  },
  {
    title: "Waiting on your review",
    time: "12:09",
    dotColor: "#b45309",
    body: "Branch protection requires one human approval. Review the diff, hop into the sandbox, or approve to let auto-merge finish.",
    code: null,
    diff: false,
  },
];

const FILES = [
  { path: "src/lib/auto-repair.ts", add: 184, del: 62 },
  { path: "src/lib/pr-sandbox.ts", add: 97, del: 18 },
  { path: "src/lib/ai-ci-healer.ts", add: 41, del: 12 },
  { path: "drizzle/0107_auto_repair_mode.sql", add: 14, del: 0 },
  { path: "src/hooks/post-receive.ts", add: 22, del: 6 },
];

export const AgentWorkspace: FC<AgentWorkspaceProps> = (props) => {
  const owner = props.owner ?? "ccantynz-alt";
  const repo = props.repo ?? "gluecron";
  const prNumber = props.prNumber ?? 218;
  const userInitial =
    props.user?.name?.[0]?.toUpperCase() ??
    props.user?.username?.[0]?.toUpperCase() ??
    "C";

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <div class="aw-root">
        {/* Top bar */}
        <header class="aw-topbar">
          <a href="/" class="aw-logo">
            <span class="aw-logo-mark" />
            gluecron
          </a>
          <nav class="aw-breadcrumb">
            <a href={`/${owner}`} class="aw-breadcrumb-link">
              {owner}
            </a>
            <span class="aw-breadcrumb-sep">/</span>
            <a href={`/${owner}/${repo}`} class="aw-breadcrumb-link">
              {repo}
            </a>
            <span class="aw-breadcrumb-sep">/</span>
            <span class="aw-breadcrumb-current">Workspace</span>
          </nav>
          <div class="aw-topbar-right">
            <span class="aw-system-status">
              <span class="aw-system-dot" />
              All systems normal
            </span>
            <span class="aw-topbar-divider" />
            <span class="aw-avatar">{userInitial}</span>
          </div>
        </header>

        <main class="aw-main">
          {/* Page header */}
          <div class="aw-page-header">
            <div>
              <div class="aw-eyebrow">
                Pull request #{prNumber} · Agent session
              </div>
              <h1 class="aw-title">
                Unify auto-repair loop with PR sandbox lifecycle
              </h1>
              <div class="aw-meta">
                <span class="aw-branch-label">
                  feat/repair-sandbox-loop → main
                </span>
                <span class="aw-meta-sep">·</span>
                <span>opened by Claude, supervised by you</span>
              </div>
            </div>
            <div class="aw-header-actions">
              <a
                href={`/${owner}/${repo}/pull/${prNumber}`}
                class="aw-btn-secondary"
              >
                View full diff
              </a>
              <button
                id="aw-approve-btn"
                type="button"
                class="aw-btn-approve"
              >
                Approve &amp; merge
              </button>
            </div>
          </div>

          <div class="aw-layout">
            {/* Left: session activity */}
            <section class="aw-left">
              <div class="aw-section-header">
                <h2 class="aw-section-title">Session activity</h2>
                <span id="aw-session-clock" class="aw-session-clock">
                  session · 47:12
                </span>
              </div>

              <div id="aw-timeline" class="aw-timeline">
                {EVENTS.map((e, i) => (
                  <div
                    id={`aw-event-${i}`}
                    class={`aw-event${i === 0 ? " aw-event--visible" : " aw-event--hidden"}`}
                  >
                    <div class="aw-event-gutter">
                      <span
                        id={`aw-event-dot-${i}`}
                        class="aw-event-dot"
                        style={`background:${e.dotColor}`}
                      />
                      <span
                        id={`aw-event-line-${i}`}
                        class={`aw-event-line${i === 0 ? " aw-event-line--hidden" : ""}`}
                      />
                    </div>
                    <div class="aw-event-body">
                      <div class="aw-event-header">
                        <span class="aw-event-title">{e.title}</span>
                        <span class="aw-event-time">{e.time}</span>
                      </div>
                      <p class="aw-event-text">{e.body}</p>
                      {e.code && (
                        <pre class="aw-code-block">{e.code}</pre>
                      )}
                      {e.diff && (
                        <div class="aw-diff-card">
                          <div class="aw-diff-header">
                            <span>src/lib/auto-repair.ts</span>
                            <span>
                              <span class="aw-diff-plus">+9</span>{" "}
                              <span class="aw-diff-minus">&#8722;3</span>
                            </span>
                          </div>
                          <div class="aw-diff-body">
                            <div class="aw-diff-ctx">
                              {"  const session = await sandbox.attach(pr.id);"}
                            </div>
                            <div class="aw-diff-rem">
                              {"− while (gate.failing) { await attemptPatch(gate); }"}
                            </div>
                            <div class="aw-diff-ins">
                              {"+ for (let i = 0; i < MAX_REPAIR_ATTEMPTS; i++) {"}
                            </div>
                            <div class="aw-diff-ins">
                              {"+   const patch = await attemptPatch(gate, session);"}
                            </div>
                            <div class="aw-diff-ins">
                              {"+   if (await gates.rerun(session, patch)) break;"}
                            </div>
                            <div class="aw-diff-ins">{"+ }"}</div>
                            <div class="aw-diff-ctx">
                              {'  telemetry.record("repair.attempt", patch);'}
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>

              {/* Composer */}
              <div class="aw-composer">
                <input
                  id="aw-composer-input"
                  type="text"
                  placeholder="Ask Claude about this session, or give it direction…"
                  class="aw-composer-input"
                />
                <button type="button" id="aw-send-btn" class="aw-composer-send">
                  Send
                </button>
              </div>
            </section>

            {/* Right sticky rail */}
            <aside class="aw-rail">
              {/* Where this stands */}
              <div class="aw-rail-section">
                <h3 class="aw-rail-label">Where this stands</h3>
                <div class="aw-card">
                  <div class="aw-status-row">
                    <span
                      id="aw-status-dot"
                      class="aw-status-dot aw-pulse"
                      style="background:#b45309"
                    />
                    <span id="aw-status-label" class="aw-status-label">
                      Agent repairing
                    </span>
                  </div>
                  <p id="aw-status-body" class="aw-status-body">
                    Claude is working inside the PR sandbox. You can watch each
                    step, join the terminal, or interrupt at any time.
                  </p>
                  <div class="aw-card-divider" />
                  <div class="aw-gates">
                    <div class="aw-gate-row">
                      <span
                        class="aw-gate-dot"
                        style="background:#1e7f5c"
                      />
                      <span class="aw-gate-name">gate: security</span>
                      <span
                        class="aw-gate-state"
                        style="color:#1e7f5c"
                      >
                        passed
                      </span>
                    </div>
                    <div class="aw-gate-row">
                      <span
                        class="aw-gate-dot"
                        style="background:#1e7f5c"
                      />
                      <span class="aw-gate-name">gate: types</span>
                      <span
                        class="aw-gate-state"
                        style="color:#1e7f5c"
                      >
                        passed
                      </span>
                    </div>
                    <div class="aw-gate-row">
                      <span
                        id="aw-gate-tests-dot"
                        class="aw-gate-dot"
                        style="background:#b42318"
                      />
                      <span class="aw-gate-name">gate: tests</span>
                      <span
                        id="aw-gate-tests-state"
                        class="aw-gate-state"
                        style="color:#b42318"
                      >
                        failed
                      </span>
                    </div>
                    <div class="aw-gate-row">
                      <span
                        id="aw-gate-review-dot"
                        class="aw-gate-dot"
                        style="background:#c4c6cf"
                      />
                      <span class="aw-gate-name">review: human</span>
                      <span
                        id="aw-gate-review-state"
                        class="aw-gate-state"
                        style="color:#8a8d99"
                      >
                        waiting on you
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Sandbox */}
              <div class="aw-rail-section">
                <h3 class="aw-rail-label">Sandbox</h3>
                <div class="aw-card">
                  <div class="aw-sandbox-url-row">
                    <a href="#" class="aw-sandbox-url">
                      pr-{prNumber}.preview.gluecron.com
                    </a>
                    <span class="aw-sandbox-live">live</span>
                  </div>
                  <p class="aw-sandbox-desc">
                    Isolated environment on this branch. Expires on merge.
                  </p>
                  <div class="aw-sandbox-actions">
                    <a href="#" class="aw-btn-sandbox">
                      Open preview
                    </a>
                    <a href="#" class="aw-btn-sandbox">
                      Join terminal
                    </a>
                  </div>
                </div>
              </div>

              {/* Changes */}
              <div class="aw-rail-section">
                <h3 class="aw-rail-label">Changes · 11 files</h3>
                <div class="aw-files">
                  {FILES.map((f, i) => (
                    <a
                      href={`/${owner}/${repo}/pull/${prNumber}/files`}
                      class="aw-file-row"
                    >
                      <span class="aw-file-path">{f.path}</span>
                      <span class="aw-file-add">+{f.add}</span>
                      <span class="aw-file-del">&#8722;{f.del}</span>
                    </a>
                  ))}
                  <a
                    href={`/${owner}/${repo}/pull/${prNumber}/files`}
                    class="aw-files-more"
                  >
                    Show all 11 files →
                  </a>
                </div>
              </div>

              {/* Manual control reassurance */}
              <div class="aw-control-note">
                <p class="aw-control-text">
                  Nothing merges without you. Every agent action above is
                  recorded, reversible, and waiting on your review — approve,
                  request changes, or take over the branch manually at any
                  point.
                </p>
              </div>
            </aside>
          </div>
        </main>
      </div>
      <script dangerouslySetInnerHTML={{ __html: js }} />
    </>
  );
};

export default AgentWorkspace;

const css = `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

@keyframes gcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

*, *::before, *::after { box-sizing: border-box; }

.aw-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: #16181d;
  background: #fcfcfd;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Top bar ────────────────────────────────────────────────────── */
.aw-topbar {
  height: 56px;
  border-bottom: 1px solid rgba(22,24,29,0.07);
  background: #fcfcfd;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.aw-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #16181d;
  text-decoration: none;
  flex-shrink: 0;
}

.aw-logo-mark {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #4353c9;
  display: inline-block;
  flex-shrink: 0;
}

.aw-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #6b7080;
}

.aw-breadcrumb-link {
  color: #6b7080;
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 6px;
  transition: color 0.15s;
}
.aw-breadcrumb-link:hover { color: #16181d; }

.aw-breadcrumb-sep { color: #c4c6cf; }

.aw-breadcrumb-current {
  color: #16181d;
  font-weight: 500;
  padding: 5px 8px;
}

.aw-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.aw-system-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #6b7080;
}

.aw-system-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e7f5c;
  flex-shrink: 0;
}

.aw-topbar-divider {
  width: 1px;
  height: 20px;
  background: rgba(22,24,29,0.07);
  flex-shrink: 0;
}

.aw-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #16181d;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

/* ── Main ───────────────────────────────────────────────────────── */
.aw-main {
  flex: 1;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 32px 72px;
}

/* ── Page header ────────────────────────────────────────────────── */
.aw-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.aw-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8d99;
  margin-bottom: 10px;
}

.aw-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #16181d;
  margin: 0 0 6px;
}

.aw-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6b7080;
  flex-wrap: wrap;
}

.aw-branch-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.aw-meta-sep { color: #c4c6cf; }

.aw-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.aw-btn-secondary {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(22,24,29,0.12);
  background: #ffffff;
  color: #16181d;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: inherit;
  line-height: 1;
}
.aw-btn-secondary:hover { border-color: rgba(22,24,29,0.24); }

.aw-btn-approve {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  background: #9a9da8;
  color: #ffffff;
  cursor: default;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

/* ── Two-column layout ──────────────────────────────────────────── */
.aw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 48px;
  align-items: start;
}

/* ── Left column ────────────────────────────────────────────────── */
.aw-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.aw-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #16181d;
  margin: 0;
}

.aw-session-clock {
  font-size: 12px;
  color: #8a8d99;
}

/* ── Timeline ───────────────────────────────────────────────────── */
.aw-timeline {
  display: flex;
  flex-direction: column;
}

.aw-event {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 16px;
  position: relative;
  padding-bottom: 28px;
}

.aw-event--hidden { display: none; }
.aw-event--visible { display: grid; }

.aw-event-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aw-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.aw-event-line {
  width: 1px;
  flex: 1;
  background: rgba(22,24,29,0.08);
  margin-top: 6px;
  min-height: 12px;
}

.aw-event-line--hidden { display: none; }

.aw-event-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.aw-event-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #16181d;
}

.aw-event-time {
  font-size: 12px;
  color: #8a8d99;
}

.aw-event-text {
  font-size: 13px;
  color: #6b7080;
  margin: 4px 0 0;
  max-width: 56ch;
}

.aw-code-block {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #16181d;
  overflow-x: auto;
  white-space: pre;
}

/* ── Diff card ──────────────────────────────────────────────────── */
.aw-diff-card {
  margin: 12px 0 0;
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.aw-diff-header {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(22,24,29,0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #6b7080;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aw-diff-plus { color: #1e7f5c; }
.aw-diff-minus { color: #b42318; }

.aw-diff-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.75;
  padding: 8px 0;
}

.aw-diff-ctx {
  padding: 0 16px;
  color: #8a8d99;
}

.aw-diff-rem {
  padding: 0 16px;
  background: rgba(180,35,24,0.05);
  color: #b42318;
}

.aw-diff-ins {
  padding: 0 16px;
  background: rgba(30,127,92,0.06);
  color: #1e7f5c;
}

/* ── Composer ───────────────────────────────────────────────────── */
.aw-composer {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(22,24,29,0.10);
  border-radius: 10px;
  background: #ffffff;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.15s;
}
.aw-composer:focus-within { border-color: rgba(22,24,29,0.22); }

.aw-composer-input {
  flex: 1;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  color: #16181d;
  background: transparent;
  min-width: 0;
}
.aw-composer-input::placeholder { color: #8a8d99; }

.aw-composer-send {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  border: 0;
  background: #16181d;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.aw-composer-send:hover { opacity: 0.85; }

/* ── Right rail ─────────────────────────────────────────────────── */
.aw-rail {
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: sticky;
  top: 92px;
}

.aw-rail-section {}

.aw-rail-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8d99;
  font-weight: 500;
  margin: 0 0 14px;
}

.aw-card {
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 12px;
  background: #ffffff;
  padding: 20px;
}

/* ── Status card ────────────────────────────────────────────────── */
.aw-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.aw-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.aw-pulse { animation: gcPulse 1.4s ease-in-out infinite; }

.aw-status-label {
  font-size: 14px;
  font-weight: 600;
  color: #16181d;
}

.aw-status-body {
  font-size: 13px;
  color: #6b7080;
  margin: 0;
  line-height: 1.6;
}

.aw-card-divider {
  height: 1px;
  background: rgba(22,24,29,0.06);
  margin: 16px 0;
}

.aw-gates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aw-gate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.aw-gate-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.aw-gate-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #16181d;
}

.aw-gate-state {
  margin-left: auto;
  font-size: 12px;
}

/* ── Sandbox card ───────────────────────────────────────────────── */
.aw-sandbox-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.aw-sandbox-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: #4353c9;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw-sandbox-url:hover { text-decoration: underline; }

.aw-sandbox-live {
  font-size: 11px;
  color: #1e7f5c;
  font-weight: 500;
  flex-shrink: 0;
}

.aw-sandbox-desc {
  font-size: 12.5px;
  color: #6b7080;
  margin: 0 0 16px;
  line-height: 1.6;
}

.aw-sandbox-actions {
  display: flex;
  gap: 8px;
}

.aw-btn-sandbox {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid rgba(22,24,29,0.12);
  background: #ffffff;
  color: #16181d;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s;
}
.aw-btn-sandbox:hover { border-color: rgba(22,24,29,0.24); }

/* ── Files list ─────────────────────────────────────────────────── */
.aw-files {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aw-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #16181d;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.15s;
}
.aw-file-row:hover { color: #4353c9; }

.aw-file-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.aw-file-add {
  margin-left: auto;
  color: #1e7f5c;
  flex-shrink: 0;
}

.aw-file-del {
  color: #b42318;
  flex-shrink: 0;
}

.aw-files-more {
  font-size: 12px;
  color: #6b7080;
  text-decoration: none;
  margin-top: 2px;
  transition: color 0.15s;
}
.aw-files-more:hover { color: #16181d; }

/* ── Control note ───────────────────────────────────────────────── */
.aw-control-note {
  border-top: 1px solid rgba(22,24,29,0.07);
  padding-top: 20px;
}

.aw-control-text {
  font-size: 12.5px;
  color: #8a8d99;
  margin: 0;
  line-height: 1.6;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .aw-layout {
    grid-template-columns: 1fr;
  }
  .aw-rail {
    position: static;
  }
}
`;

const js = `
(function () {
  var step = 0;
  var approved = false;
  var seconds = 47 * 60 + 12;

  var GREEN  = '#1e7f5c';
  var AMBER  = '#b45309';
  var RED    = '#b42318';
  var INK    = '#16181d';
  var GREY   = '#c4c6cf';
  var PULSE  = 'gcPulse 1.4s ease-in-out infinite';

  var EVENT_DOTS = [RED, INK, INK, GREEN, AMBER];

  /* ── helpers ── */
  function el(id) { return document.getElementById(id); }

  function setAnim(elem, doAnim) {
    if (!elem) return;
    elem.style.animation = doAnim ? PULSE : 'none';
  }

  /* ── clock ── */
  function updateClock() {
    var e = el('aw-session-clock');
    if (!e) return;
    var m = Math.floor(seconds / 60);
    var s = String(seconds % 60).padStart(2, '0');
    e.textContent = 'session · ' + m + ':' + s;
  }

  /* ── timeline ── */
  function updateTimeline() {
    for (var i = 0; i <= 4; i++) {
      var ev = el('aw-event-' + i);
      if (!ev) continue;

      if (i <= step) {
        ev.classList.remove('aw-event--hidden');
        ev.classList.add('aw-event--visible');
        ev.style.paddingBottom = (i === step) ? '0' : '28px';

        var line = el('aw-event-line-' + i);
        if (line) {
          if (i === step) {
            line.classList.add('aw-event-line--hidden');
          } else {
            line.classList.remove('aw-event-line--hidden');
          }
        }

        var dot = el('aw-event-dot-' + i);
        if (dot) {
          dot.style.background = EVENT_DOTS[i];
          setAnim(dot, i === step && step < 4);
        }
      }
    }
  }

  /* ── status card ── */
  function updateStatus() {
    var dot   = el('aw-status-dot');
    var label = el('aw-status-label');
    var body  = el('aw-status-body');

    var lbl, txt, color, pulse;

    if (approved) {
      lbl   = 'Merging';
      color = GREEN;
      pulse = true;
      txt   = 'Approved. Auto-merge is completing and the deploy will follow — typically under a minute end-to-end.';
    } else if (step < 3) {
      lbl   = 'Agent repairing';
      color = AMBER;
      pulse = true;
      txt   = 'Claude is working inside the PR sandbox. You can watch each step, join the terminal, or interrupt at any time.';
    } else if (step < 4) {
      lbl   = 'Gates green';
      color = GREEN;
      pulse = false;
      txt   = 'The repair passed every gate. Claude is writing up the session summary.';
    } else {
      lbl   = 'Your review';
      color = AMBER;
      pulse = true;
      txt   = 'Everything is green and waiting on one human approval. The full diff and sandbox are one click away.';
    }

    if (dot)   { dot.style.background = color; setAnim(dot, pulse); }
    if (label) { label.textContent = lbl; }
    if (body)  { body.textContent  = txt; }
  }

  /* ── gate rows ── */
  function updateGates() {
    var testsDot   = el('aw-gate-tests-dot');
    var testsState = el('aw-gate-tests-state');

    if (testsDot && testsState) {
      if (step >= 3) {
        testsDot.style.background  = GREEN;
        setAnim(testsDot, false);
        testsState.textContent     = 'passed';
        testsState.style.color     = GREEN;
      } else if (step >= 1) {
        testsDot.style.background  = AMBER;
        setAnim(testsDot, true);
        testsState.textContent     = 're-running';
        testsState.style.color     = AMBER;
      } else {
        testsDot.style.background  = RED;
        setAnim(testsDot, false);
        testsState.textContent     = 'failed';
        testsState.style.color     = RED;
      }
    }

    var reviewDot   = el('aw-gate-review-dot');
    var reviewState = el('aw-gate-review-state');

    if (reviewDot && reviewState) {
      if (approved) {
        reviewDot.style.background = GREEN;
        setAnim(reviewDot, false);
        reviewState.textContent    = 'approved';
        reviewState.style.color    = GREEN;
      } else if (step >= 4) {
        reviewDot.style.background = AMBER;
        setAnim(reviewDot, true);
        reviewState.textContent    = 'waiting on you';
        reviewState.style.color    = AMBER;
      } else {
        reviewDot.style.background = GREY;
        setAnim(reviewDot, false);
        reviewState.textContent    = 'waiting on you';
        reviewState.style.color    = '#8a8d99';
      }
    }
  }

  /* ── approve button ── */
  function updateApproveBtn() {
    var btn = el('aw-approve-btn');
    if (!btn) return;

    if (approved) {
      btn.textContent   = 'Approved — merging';
      btn.style.background = GREEN;
      btn.style.cursor  = 'default';
    } else if (step >= 4) {
      btn.textContent   = 'Approve & merge';
      btn.style.background = INK;
      btn.style.cursor  = 'pointer';
    } else {
      btn.textContent   = 'Approve & merge';
      btn.style.background = '#9a9da8';
      btn.style.cursor  = 'default';
    }
  }

  /* ── full render ── */
  function render() {
    updateClock();
    updateTimeline();
    updateStatus();
    updateGates();
    updateApproveBtn();
  }

  /* ── init ── */
  function init() {
    render();

    /* step timer: advance every 4 s */
    var stepTimer = setInterval(function () {
      if (step < 4) {
        step++;
        render();
      } else {
        clearInterval(stepTimer);
      }
    }, 4000);

    /* wall-clock: tick every 1 s */
    setInterval(function () {
      seconds++;
      updateClock();
    }, 1000);

    /* approve button */
    var btn = el('aw-approve-btn');
    if (btn) {
      btn.addEventListener('click', function () {
        if (step >= 4 && !approved) {
          approved = true;
          render();
        }
      });
    }

    /* composer send */
    var sendBtn = el('aw-send-btn');
    var input   = el('aw-composer-input');
    if (sendBtn && input) {
      sendBtn.addEventListener('click', function () {
        input.value = '';
        input.focus();
      });
      input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { input.value = ''; }
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
`;