---
title: "tty7"
description: "A terminal workbench: persistent sessions, remote work, agents."
mode: "custom"
---

{/* Mirrors CLIAgent::accent_rgb / icon_path: a solid brand disc with the
   agent's own mark masked in white on top, as tab_strip.rs avatar_disc draws it. */}
export const AGENTS = {
  claude: { name: "Claude Code", c: "#D97757" },
  codex: { name: "Codex", c: "#000000", edge: true },
  gemini: { name: "Gemini", c: "#4285F4" },
  cursor: { name: "Cursor", c: "#9AA0A6" },
  opencode: { name: "OpenCode", c: "#6E56CF" },
  copilot: { name: "Copilot", c: "#8957E5" },
};

export const GROUPS = [
  { name: "atlas-api", meta: "main", items: [
    { a: "claude", t: "Spin up a staging instance", s: "working" },
    { a: "codex", t: "Inspect CLI error logs", s: "working" },
  ] },
  { name: "northwind", meta: "", items: [
    { a: "cursor", t: "Refactor session auth", b: "feat/session-auth", s: "waiting" },
    { a: "gemini", t: "Fix pricing fetch timeout", b: "fix/pricing-fetch-timeout", s: "working" },
  ] },
  { name: "orbit", meta: "main  ·  +104 −12", items: [
    { shell: true, t: "~/code/orbit", on: true },
    { a: "claude", t: "Optimize route planner" },
  ] },
  { name: "lumen-web", meta: "main  ·  +259 −191", items: [
    { a: "copilot", t: "Backtest search ranking" },
  ] },
];

export const Glyph = ({ a, shell }) => shell
  ? <span className="t7w-glyph is-shell">{">_"}</span>
  : <span className={"t7w-glyph" + (AGENTS[a].edge ? " is-edge" : "")} style={{ background: AGENTS[a].c }} title={AGENTS[a].name}>
      <span className="t7w-mark" style={{ WebkitMaskImage: "url(/images/agents/" + a + ".svg)", maskImage: "url(/images/agents/" + a + ".svg)" }} />
    </span>;

export const Row = ({ it }) => (
  <div className={"t7w-row" + (it.b ? " is-tall" : "") + (it.on ? " is-on" : "")}>
    <Glyph a={it.a} shell={it.shell} />
    <div className="t7w-rtext">
      <span>{it.t}</span>
      {it.b ? <span className="t7w-branch">{it.b}</span> : null}
    </div>
    {it.s ? <span className={"t7w-dot is-" + it.s} /> : null}
  </div>
);

export const Group = ({ g }) => (
  <div className="t7w-group">
    <div className="t7w-ghead"><b>{g.name}</b><span>{g.meta}</span></div>
    {g.items.map((it) => <Row key={it.t} it={it} />)}
  </div>
);

export const Search = () => (
  <svg width="11" height="11" viewBox="0 0 12 12" style={{ flexShrink: 0 }}>
    <circle cx="5" cy="5" r="3.9" fill="none" stroke="var(--w-a35)" strokeWidth="1.2" />
    <path d="M8 8l2.8 2.8" stroke="var(--w-a35)" strokeWidth="1.2" strokeLinecap="round" />
  </svg>
);

export const Check = () => (
  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2.5 6.2l2.3 2.3 4.7-5" fill="none" stroke="var(--w-green)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
);

export const Cross = () => (
  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3.5 3.5l5 5M8.5 3.5l-5 5" fill="none" stroke="var(--w-red)" strokeWidth="1.4" strokeLinecap="round" /></svg>
);

export const State = ({ s }) => (
  <span className="t7w-ck">{s === "ok" ? <Check /> : s === "fail" ? <Cross /> : <span className="t7w-spin" />}</span>
);

export const CHECKS = [["lint", "ok", "18s"], ["typecheck", "ok", "41s"], ["test (py3.12)", "run", "2m"], ["build image", "ok", "1m 12s"]];
export const PRS = [
  ["Add export endpoints", "#214  ·  Merged 1d ago", "ok"],
  ["Refactor session auth", "#228  ·  feat/session-auth  ·  Draft", "run"],
  ["Fix pricing fetch timeout", "#229  ·  1 check failing", "fail"],
];

export const Inspector = () => (
  <aside className="t7w-ins">
    <div className="t7w-bar"><span>Info</span><span>Files</span><span>Changes</span><span className="is-on">PR</span></div>
    <div className="t7w-pr">
      <div className="t7w-prhead">
        <div className="t7w-meta"><span>#231</span><span>·</span><span>Open</span><span className="grow" /><span>12m ago</span></div>
        <div className="t7w-prtitle">Handle empty daily summaries</div>
        <div className="t7w-prbranch"><b>fix/report-daily-summary</b> → main</div>
        <div className="t7w-practs"><span className="t7w-merge">Squash and merge</span><span className="note">Waiting on 1 check</span></div>
      </div>
      <div className="t7w-sect">
        <div className="t7w-shead"><b>Checks</b><span>3 of 4 passed</span></div>
        {CHECKS.map(([n, s, t]) => (
          <div className="t7w-item" key={n}><State s={s} /><span className="grow">{n}</span><span className="dim">{t}</span></div>
        ))}
      </div>
      <div className="t7w-sect">
        <div className="t7w-shead"><b>Reviews</b></div>
        <div className="t7w-item"><span className="t7w-avatar">M</span><span className="grow">mara</span><span className="dim" style={{ color: "var(--w-green)" }}>Approved</span></div>
        <div className="t7w-item"><span className="t7w-avatar">J</span><span className="grow">jonas</span><span className="dim">Requested</span></div>
      </div>
      <div className="t7w-sect">
        <div className="t7w-shead"><b>Pull requests</b></div>
        {PRS.map(([t, m, s]) => (
          <div className="t7w-pritem" key={t}><State s={s} /><div><span className="t">{t}</span><span className="m">{m}</span></div></div>
        ))}
      </div>
    </div>
  </aside>
);

{/* The hero demo. Five chapters after the promo storyboard
   (videos/tty7-promo/STORYBOARD.md), each a pure function of the seconds t
   since it began, so any frame can be drawn directly and a click can jump
   to any chapter. */}

export const CHAPTERS = [
  { key: "agents", label: "Every agent", d: 7.5 },
  { key: "cli", label: "Agents drive it", d: 9.5 },
  { key: "prompt", label: "Editor prompt", d: 7.5 },
  { key: "search", label: "⌘P everything", d: 8 },
  { key: "persist", label: "Quit, keep running", d: 7.5 },
];

export const typed = (s, t, t0, cps = 22) => (t < t0 ? "" : s.slice(0, Math.floor((t - t0) * cps)));
export const typingDone = (s, t, t0, cps = 22) => t >= t0 + s.length / cps;
export const hl = (s, q) => {
  const i = q ? s.toLowerCase().indexOf(q) : -1;
  return i < 0 ? s : <>{s.slice(0, i)}<mark>{s.slice(i, i + q.length)}</mark>{s.slice(i + q.length)}</>;
};

export const P = ({ br = "main", caret, children }) => (
  <div className="t7w-prompt">
    <span className="p-arrow">→</span><span className="p-dir">orbit</span><span className="p-br">{br}</span><span className="p-dirty">●</span>
    <span className="p-cmd">{children}{caret ? <span className="t7w-caret" /> : null}</span>
  </div>
);

export const O = ({ c = "", children }) => <div className={"t7w-out " + c}>{children}</div>;

{/* Sidebar for a frame: the base groups plus whatever the chapter changed. A split
   stays in the same tab; the tab picks up the agent's status. */}
export const sidebar = (ch, t) => {
  const g = GROUPS.map((x) => ({ ...x, items: x.items.map((it) => ({ ...it })) }));
  const find = (title) => g.flatMap((x) => x.items).find((it) => it.t === title);
  if (ch === 0) find("Refactor session auth").s = t < 3.1 ? "working" : "waiting";
  if (ch === 1 && t >= 3.2) find("~/code/orbit").s = t < 6.4 ? "working" : "done";
  if ((ch === 3 && t >= 4.1) || ch === 4) {
    find("~/code/orbit").on = false;
    g[0].items.unshift({ a: "claude", t: "Handle empty daily summaries", s: ch === 4 && t >= 5.2 ? "done" : "working", on: true });
  }
  return g;
};

export const AgentsTable = ({ cursor }) => (
  <>
    <O c="o-head">{"PANE  AGENT    STATUS   MESSAGE"}</O>
    {AGENT_ROWS.map(([p, a, s, m]) => {
      const st = a === "cursor" ? cursor : s;
      return <O key={p}>{p.padEnd(6)}{a.padEnd(9)}<span className={"o-" + st}>{st.padEnd(9)}</span>{m}</O>;
    })}
  </>
);

export const AGENT_ROWS = [
  ["%12", "claude", "working", "Spin up a staging instance"],
  ["%14", "codex", "working", "Inspect CLI error logs"],
  ["%21", "cursor", "working", "Refactor session auth"],
  ["%22", "gemini", "working", "Fix pricing fetch timeout"],
  ["%31", "claude", "done", "Optimize route planner"],
];

export const TermAgents = ({ t }) => {
  const c1 = "tty7 agents", c2 = "tty7 wait %21 --until waiting";
  return (
    <div className="t7w-term t7w-mono">
      <P caret={t < 1.3}>{typed(c1, t, 0.4, 18)}</P>
      {t >= 1.3 ? <AgentsTable cursor="working" /> : null}
      {t >= 1.5 ? <P caret={!typingDone(c2, t, 1.7, 26)}>{typed(c2, t, 1.7, 26)}</P> : null}
      {t >= 3.1 ? <O>{"%21  "}<span className="o-waiting">waiting</span></O> : null}
      {t >= 3.1 ? <P caret /> : null}
    </div>
  );
};

export const TermCli = ({ t }) => {
  const a = "tty7 split --h", b = "tty7 send %12 'claude \"fix flaky test\"' --enter";
  const c = "tty7 wait %12 --until done", d = "tty7 capture %12 --tail 1";
  const split = t >= 1.3;
  return (
    <div className={"t7w-split" + (split ? " is-split" : "")}>
      <div className="t7w-term t7w-mono">
        <P caret={t < 1.3}>{typed(a, t, 0.4, 18)}</P>
        {t >= 1.3 ? <O c="o-dim">%12</O> : null}
        {t >= 1.5 ? <P caret={!typingDone(b, t, 1.6, 30)}>{typed(b, t, 1.6, 30)}</P> : null}
        {t >= 3.3 ? <P caret={t >= 3.3 && t < 6.4 && typingDone(c, t, 3.5, 26)}>{typed(c, t, 3.5, 26)}</P> : null}
        {t >= 6.5 ? <P caret={!typingDone(d, t, 6.6, 26)}>{typed(d, t, 6.6, 26)}</P> : null}
        {t >= 7.7 ? <O c="o-done-ok">✓ Patched warmup() race · 214 passed</O> : null}
        {t >= 7.7 ? <P caret /> : null}
      </div>
      {split ? (
        <div className="t7w-term t7w-mono t7w-pane2">
          <P caret={t < 3.2}>{t >= 3.2 ? "claude \"fix flaky test\"" : ""}</P>
          {t >= 3.7 ? <O c="o-claude">✻ Reading cache_test.rs</O> : null}
          {t >= 4.6 ? <O c="o-claude">✻ Running cargo test ×20</O> : null}
          {t >= 5.6 ? <O c="o-done-ok">✓ Found race in warmup()</O> : null}
          {t >= 6.3 ? <O c="o-done-ok">✓ Patched warmup() race · 214 passed</O> : null}
        </div>
      ) : null}
    </div>
  );
};

export const COMPLETIONS = [
  ["checkout", "Switch branches or restore working tree files"],
  ["cherry-pick", "Apply the changes introduced by existing commits"],
  ["cherry", "Find commits yet to be applied upstream"],
];

export const TermPrompt = ({ t }) => {
  const menu = t >= 1.8 && t < 3.6;
  const sel = t < 2.4 ? 0 : t < 3.0 ? 1 : 0;
  const accepted = t >= 4.5, ran = t >= 5.3;
  let line;
  if (t < 3.6) line = <>{typed("git ch", t, 0.4, 12)}{!menu && t >= 1.0 ? <span className="o-ghost">eckout -b fix/pricing</span> : null}</>;
  else if (!accepted) line = <>{"git checkout "}{t >= 3.8 ? <span className="o-ghost">-b fix/pricing</span> : null}</>;
  else line = <><b className="o-cmd">git</b> <span>checkout</span> <span className="o-flag">-b</span> <span className="o-arg">fix/pricing</span></>;
  return (
    <div className="t7w-term t7w-mono">
      <P>cargo test --quiet</P>
      <O c="o-dim">test result: ok. 214 passed; 0 failed</O>
      <div className="t7w-anchor">
        <P caret={!ran}>{line}</P>
        {menu ? (
          <div className="t7w-pop t7w-complete">
            {COMPLETIONS.map(([n, d], i) => (
              <div className={"t7w-crow" + (i === sel ? " is-sel" : "")} key={n}><span className="n">{n}</span><span className="d">{d}</span></div>
            ))}
          </div>
        ) : null}
      </div>
      {ran ? <O>{"Switched to a new branch 'fix/pricing'"}</O> : null}
      {ran ? <P br="fix/pricing" caret /> : null}
    </div>
  );
};

export const PAL = {
  Terminals: [["claude", "Spin up a staging instance", "atlas-api"], ["codex", "Inspect CLI error logs", "atlas-api"], ["cursor", "Refactor session auth", "northwind  ·  feat/session-auth"]],
  Actions: [["Split Right", "⌘D"], ["Zoom Pane", "⇧⌘↩"], ["New Worktree Tab…", ""]],
  Sessions: [["claude", "Handle empty daily summaries", "atlas-api  ·  12m ago"], ["codex", "Add export endpoints", "atlas-api  ·  Yesterday"], ["claude", "Summarize benchmark results", "research  ·  Last week"]],
};

export const Palette = ({ t }) => {
  const q = typed("summ", t, 2.2, 7).toLowerCase();
  const m = (s) => !q || s.toLowerCase().includes(q);
  const groups = [
    ["Terminals", PAL.Terminals.filter((x) => m(x[1]))],
    ["Actions", PAL.Actions.filter((x) => m(x[0]))],
    ["Sessions", PAL.Sessions.filter((x) => m(x[1]))],
  ].filter(([, xs]) => xs.length);
  if (q) groups.sort((x, y) => (x[0] === "Sessions" ? -1 : y[0] === "Sessions" ? 1 : 0));
  let i = 0;
  return (
    <div className="t7w-pop t7w-palette">
      <div className="t7w-pinput">
        <Search />
        {q ? <span>{q}<span className="t7w-caret" /></span> : <span className="ph"><span className="t7w-caret" />Search tabs, sessions, hosts and actions</span>}
      </div>
      <div className="t7w-scopes">{["All", "Actions", "Terminals", "Sessions", "Hosts"].map((s) => <span key={s} className={s === "All" ? "is-on" : ""}>{s}</span>)}</div>
      <div className="t7w-presults">
        {groups.map(([name, xs]) => (
          <div key={name}>
            <div className="t7w-pgroup">{name}</div>
            {xs.map((x) => {
              const sel = i++ === 0;
              return name === "Actions" ? (
                <div className={"t7w-prow" + (sel ? " is-sel" : "")} key={x[0]}><span className="t7w-glyph is-shell">{"›"}</span><span className="grow">{hl(x[0], q)}</span><span className="t7w-kbd-plain">{x[1]}</span></div>
              ) : (
                <div className={"t7w-prow" + (sel ? " is-sel" : "")} key={x[1]}><Glyph a={x[0]} /><span className="grow">{hl(x[1], q)}</span><span className="meta">{x[2]}</span></div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
};

export const TermResumed = ({ t, t0, extra }) => (
  <div className="t7w-term t7w-mono">
    <P>{t >= t0 ? "claude --resume 3f9c2a" : ""}</P>
    {t >= t0 + 0.5 ? <O c="o-claude">✻ Resuming “Handle empty daily summaries”</O> : null}
    {t >= t0 + 1.2 ? <O c="o-dim">  Read report_service.py · 3 edits pending</O> : null}
    {t >= t0 + 1.9 ? <O c="o-claude">✻ Running pytest tests/test_report_service.py</O> : null}
    {extra}
  </div>
);

export const TermSearch = ({ t }) => (t < 4.1
  ? (
    <div className="t7w-term t7w-mono">
      <P>tty7 agents</P>
      <AgentsTable cursor="waiting" />
      <P caret />
    </div>
  )
  : <TermResumed t={t} t0={4.1} />);

export const TermPersist = ({ t }) => (
  <TermResumed t={9} t0={0} extra={<>
    {t >= 4.6 ? <O c="o-done-ok">✓ 18 passed · empty summaries return EMPTY_SUMMARY</O> : null}
    {t >= 5.2 ? <O c="o-claude">⏺ Done. 3 files changed, +41 −6</O> : null}
  </>} />
);

export const PERSIST_PANES = [["claude", "Handle empty daily summaries"], ["claude", "Spin up a staging instance"], ["codex", "Inspect CLI error logs"], ["gemini", "Fix pricing fetch timeout"]];

export const Frame = ({ ch, t }) => {
  const k = CHAPTERS[ch].key;
  const groups = sidebar(ch, t);
  const title = (k === "search" && t >= 4.1) || k === "persist" ? "Handle empty daily summaries" : "~/code/orbit";
  const gone = k === "persist" && t >= 0.9 && t < 3.7;
  const palOpen = k === "search" && t >= 0.7 && t < 4.0;
  const toast = k === "agents" && t >= 3.2 && t < 6.9;
  return (
    <div className="t7w-stagebox">
      <div className={"t7w" + (gone ? " is-gone" : "")} aria-hidden="true">
        <div className="t7w-lights"><span /><span /><span /></div>
        <aside className="t7w-sb">
          <div className="t7w-bar">
            <span className="t7w-iconbtn"><svg width="11" height="11" viewBox="0 0 11 11"><path d="M5.5 1v9M1 5.5h9" stroke="var(--w-a45)" strokeWidth="1.2" strokeLinecap="round" /></svg></span>
          </div>
          <div className="t7w-sbtop">
            <div className="t7w-ws"><span className="t7w-ws-init">W</span><span>work</span></div>
            <div className="t7w-search"><Search /><span>Search</span></div>
          </div>
          <div className="t7w-groups">{groups.map((g) => <Group key={g.name} g={g} />)}</div>
        </aside>
        <main className="t7w-main">
          <div className="t7w-bar">
            <div className={"t7w-pal" + (k === "search" && t >= 0.35 && t < 0.7 ? " is-press" : "")}><Search /><span>{title}</span><span className="t7w-kbd">⌘P</span></div>
          </div>
          {k === "agents" ? <TermAgents t={t} /> : k === "cli" ? <TermCli t={t} /> : k === "prompt" ? <TermPrompt t={t} /> : k === "search" ? <TermSearch t={t} /> : <TermPersist t={t} />}
        </main>
        <Inspector />
        {palOpen ? <div className="t7w-scrim" /> : null}
        {palOpen ? <Palette t={t} /> : null}
        {toast ? (
          <div className="t7w-toast">
            <img src="/logo/logo.svg" alt="" />
            <div><b>Cursor</b><span>needs your permission…</span><span className="sub">northwind · Refactor session auth</span></div>
          </div>
        ) : null}
      </div>
      {k === "persist" && t >= 1.1 && t < 3.8 ? (
        <div className="t7w-afterlife">
          <div className="t7w-al-title">Window closed. The server kept going.</div>
          {PERSIST_PANES.map(([a, s]) => (
            <div className="t7w-al-row" key={s}><Glyph a={a} /><span>{s}</span><span className="t7w-dot is-working" /></div>
          ))}
        </div>
      ) : null}
    </div>
  );
};

{/* Mintlify documents useState and useEffect in MDX, so the mutable clock and the
   element handle live in state rather than refs.

   Keep JS comments out of every export body in this file, line and block comments alike: the
   hosted Mintlify build fails to parse a page that has one, and shows only a
   "parsing error" placeholder. mint dev and mint validate accept it, so the only
   place it shows up is the live site. Comment at the top level, like this. */}
export const Demo = () => {
  const [st, setSt] = useState({ ch: 0, t: 0 });
  const [c0] = useState(() => ({ ch: 0, start: 0, visible: true, last: 0, paused: 0 }));
  const [el, setEl] = useState(null);
  useEffect(() => {
    const c = c0;
    c.start = performance.now();
    let raf = 0;
    const tick = (now) => {
      raf = requestAnimationFrame(tick);
      if (!c.visible || document.hidden) { c.start = now - c.paused; return; }
      let t = (now - c.start) / 1000;
      if (t >= CHAPTERS[c.ch].d) { c.ch = (c.ch + 1) % CHAPTERS.length; c.start = now; t = 0; }
      c.paused = now - c.start;
      if (now - c.last < 33) return;
      c.last = now;
      setSt({ ch: c.ch, t });
    };
    c.paused = 0;
    raf = requestAnimationFrame(tick);
    const io = new IntersectionObserver(([e]) => { c.visible = e.isIntersecting; }, { threshold: 0.05 });
    if (el) io.observe(el);
    return () => { cancelAnimationFrame(raf); io.disconnect(); };
  }, [el]);
  const go = (i) => {
    const c = c0;
    c.ch = i; c.start = performance.now(); c.paused = 0;
    setSt({ ch: i, t: 0 });
  };
  const cur = CHAPTERS[st.ch];
  return (
    <div className="t7h-demo" ref={setEl}>
      <Frame ch={st.ch} t={st.t} />
      <div className="t7h-chapters" role="tablist" aria-label="tty7 demo">
        {CHAPTERS.map((c, i) => (
          <button key={c.key} role="tab" aria-selected={i === st.ch} className={"t7h-chapter" + (i === st.ch ? " is-on" : "")} onClick={() => go(i)}>
            <span className="t7h-chapter-bar"><span style={{ width: (i === st.ch ? Math.min(1, st.t / cur.d) * 100 : i < st.ch ? 100 : 0) + "%" }} /></span>
            <span className="t7h-chapter-label">{c.label}</span>
          </button>
        ))}
      </div>
      <div className="t7h-chapter-now">{cur.label}</div>
    </div>
  );
};

export const Ico = ({ d }) => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary-text)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
);

export const FEATURES = [
  { t: "Sessions that outlive the app", href: "/getting-started/concepts",
    d: "M12 3v8M6.3 6.3a8 8 0 1 0 11.4 0",
    p: "A background server owns your shells, not the window. Quit tty7 and your builds keep building. No tmux to learn or configure." },
  { t: "Editor-grade input", href: "/terminal/prompt",
    d: "M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM7 10h.01M11 10h.01M15 10h.01M8 14h8",
    p: "Ghost suggestions from your history, tab completion that explains each flag, syntax highlighting, click-to-place caret, real multi-line editing." },
  { t: "Agent-aware", href: "/agents/overview",
    d: "M8 8h8a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-5a3 3 0 0 1 3-3zM12 4v4M9.5 13h.01M14.5 13h.01",
    p: "26 coding CLIs recognised on sight. Per-pane status dots, a notification when one needs you, and session resume after a reboot." },
  { t: "Remote work that feels local", href: "/remote/workspaces",
    d: "M5 4h14a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM5 13h14a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zM7 7.5h.01M7 16.5h.01",
    p: "A native Rust SSH stack with profiles, SFTP, and port forwarding — plus remote workspaces where files, repos, and panes stay on the far machine." },
  { t: "Git where you are looking", href: "/git/source-control",
    d: "M6 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM6 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM18 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM6 7v10M18 9v1a4 4 0 0 1-4 4H6",
    p: "Branch and diff counts on every sidebar row, a source control panel, a diff overlay, GitHub issues and pull requests, and worktrees in one dialog." },
  { t: "Scriptable", href: "/cli/overview",
    d: "M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM7 9l3 3-3 3M13 15h4",
    p: "A bundled tty7 CLI that opens panes, sends keys, reads screens, and blocks until an agent needs you — so scripts and agents can drive the workbench." },
];

export const Features = () => (
  <div className="t7h-grid">
    {FEATURES.map((f) => (
      <a className="t7h-card" href={f.href} key={f.t}>
        <span className="t7h-card-icon"><Ico d={f.d} /></span>
        <h3>{f.t}</h3>
        <p>{f.p}</p>
      </a>
    ))}
  </div>
);

export const Tick = () => (
  <span className="t7h-tick"><svg width="10" height="10" viewBox="0 0 12 12"><path d="M2.5 6.2l2.3 2.3 4.7-5" fill="none" stroke="var(--primary-text)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
);

export const AgentPanel = () => (
  <div className="t7h-panel" role="img" aria-label="Agent tabs in the tty7 sidebar, each with a live status dot, and a notification that Cursor is waiting for input">
    {GROUPS.slice(0, 2).map((g) => <Group key={g.name} g={g} />)}
    <div className="t7h-toast">
      <Glyph a="cursor" />
      <div><b>Cursor needs your permission…</b><span>northwind · Refactor session auth</span></div>
      <span className="t7w-kbd">⌘1</span>
    </div>
  </div>
);

export const Bench = ({ title, hint, big, unit, rows, max }) => (
  <div className="t7h-bench">
    <div className="t7h-bench-top"><h3>{title}</h3><span>{hint}</span></div>
    <div className="t7h-big">{big}<small>{unit}</small></div>
    <div className="t7h-bars">
      {rows.map(([n, v]) => (
        <div className={"t7h-barrow" + (n === "tty7" ? " is-us" : "")} key={n}>
          <span>{n}</span>
          <span className="t7h-track"><span className="t7h-fill" style={{ display: "block", width: (v / max) * 100 + "%" }} /></span>
          <span className="v">{v} {unit}</span>
        </div>
      ))}
    </div>
  </div>
);

export const STEPS = [
  { t: "Install it", p: "Native builds for macOS, Windows, and Linux. No runtime to install first.", href: "/getting-started/installation", l: "Installation" },
  { t: "Set it up", p: "Five minutes of settings that pay for themselves: shell, font, theme, keys.", href: "/getting-started/first-launch", l: "First launch" },
  { t: "Learn the three words", p: "Workspace, tab, pane — and the server underneath them that keeps it all alive.", href: "/getting-started/concepts", l: "Core concepts" },
];

export const Home = () => (
  <div className="t7h">
    <section className="t7h-hero">
      <div className="t7h-wrap">
        <span className="t7h-eyebrow"><i />Open source · written in Rust</span>
        <h1>A terminal you can leave running.</h1>
        <p className="t7h-lede">Close the window, reboot, walk to a different laptop — the shells you started are still there, and so are the coding agents you left working in them.</p>
        <div className="t7h-ctas">
          <a className="t7h-btn t7h-btn-primary" href="https://github.com/l0ng-ai/tty7/releases">Download tty7</a>
          <a className="t7h-btn t7h-btn-ghost" href="/introduction">Read the docs →</a>
        </div>
        <div className="t7h-platforms">macOS · Windows · Linux</div>
      </div>
      <div className="t7h-stage"><Demo /></div>
    </section>

    <section className="t7h-section">
      <div className="t7h-wrap">
        <div className="t7h-kicker">What makes it different</div>
        <h2 className="t7h-h2">A workbench, not just a window.</h2>
        <p className="t7h-sub">Everything you reach for between commands — sessions, hosts, branches, agents — sits next to the terminal instead of in another app.</p>
        <Features />
      </div>
    </section>

    <section className="t7h-section">
      <div className="t7h-wrap t7h-split">
        <div>
          <div className="t7h-kicker">Coding agents</div>
          <h2 className="t7h-h2">Run five agents. Watch none of them.</h2>
          <p className="t7h-sub">tty7 never wraps your agents — it recognises them by the command in the pane and keeps track from the outside.</p>
          <ul className="t7h-list">
            <li><Tick /><span><b>Status on every tab.</b> Working, waiting, done — a dot per pane, grouped by repository.</span></li>
            <li><Tick /><span><b>Told when you're needed.</b> A notification the moment an agent blocks on you, and another when a turn finishes.</span></li>
            <li><Tick /><span><b>Back after a reboot.</b> Agent sessions resume where they were, in the pane they were in.</span></li>
          </ul>
          <div className="t7h-chips">
            {["claude", "codex", "gemini", "cursor", "opencode", "copilot"].map((a) => (
              <span className="t7h-chip" key={a}><Glyph a={a} />{AGENTS[a].name}</span>
            ))}
            <a className="t7h-chip is-more" href="/agents/overview">+20 more</a>
          </div>
        </div>
        <AgentPanel />
      </div>
    </section>

    <section className="t7h-section">
      <div className="t7h-wrap">
        <div className="t7h-kicker">Performance</div>
        <h2 className="t7h-h2">Roughly twice as fast where it counts.</h2>
        <p className="t7h-sub">The PTY is read at device speed and parsed off the render path, so drawing never throttles reading — and a flood never drops the frame rate.</p>
        <div className="t7h-stats">
          <Bench title="Plaintext I/O, 11 MB cat" hint="lower is better" big="95" unit="ms" max={239}
            rows={[["tty7", 95], ["Ghostty", 179], ["Kitty", 185], ["Alacritty", 239]]} />
          <Bench title="DOOM-fire frame rate" hint="higher is better" big="888" unit="fps" max={888}
            rows={[["tty7", 888], ["Kitty", 617], ["Ghostty", 552], ["Alacritty", 485]]} />
        </div>
        <p className="t7h-footnote">Apple M1 Pro, macOS 26.3.1, 155×40 grid, five-run averages. <a href="https://github.com/l0ng-ai/tty7/tree/main/scripts/bench">Reproduce it with one command →</a></p>
      </div>
    </section>

    <section className="t7h-section">
      <div className="t7h-wrap">
        <div className="t7h-kicker">Start here</div>
        <h2 className="t7h-h2">Up and running in three steps.</h2>
        <div className="t7h-steps">
          {STEPS.map((s, i) => (
            <a className="t7h-card" href={s.href} key={s.t}>
              <span className="t7h-step-n">{i + 1}</span>
              <h3>{s.t}</h3>
              <p>{s.p}</p>
              <span className="t7h-more">{s.l} →</span>
            </a>
          ))}
        </div>
      </div>
    </section>

    <div className="t7h-wrap">
      <section className="t7h-end">
        <h2 className="t7h-h2">Your shells will still be there.</h2>
        <p className="t7h-sub">Free and open source. Native on macOS, Windows, and Linux.</p>
        <div className="t7h-ctas">
          <a className="t7h-btn t7h-btn-primary" href="https://github.com/l0ng-ai/tty7/releases">Download tty7</a>
          <a className="t7h-btn t7h-btn-ghost" href="/introduction">Read the docs →</a>
        </div>
        <div className="t7h-end-links">
          <a href="https://github.com/l0ng-ai/tty7">GitHub</a>
          <a href="https://discord.gg/s3dethqz2V">Discord</a>
          <a href="https://github.com/l0ng-ai/tty7/blob/main/CHANGELOG.md">Changelog</a>
        </div>
      </section>
    </div>
  </div>
);

<Home />