docs(marketing): positioning teardown + draft 'TaskYou vs X' compare pages

docs/compare/compare.css

@@ -0,0 +1,117 @@
+/* TaskYou /compare — shared styles, extracted from index.html so the
+   comparison section matches the landing page exactly. */
+:root{
+  --bg:#0e0b16; --panel:#15111f; --panel2:#1b1628; --line:#241e38; --line2:#2e2746;
+  --text:#f3eaff; --muted:#9b93bd; --dim:#6f6790;
+  --orange:#ff7a3c; --orange-d:#c9432a; --green:#7cf6b0; --yellow:#ffd23f; --red:#ff5f57;
+}
+*{box-sizing:border-box; margin:0; padding:0;}
+html{scroll-behavior:smooth;}
+body{
+  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text);
+  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
+}
+/* CRT scanlines */
+body::before{
+  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.5;
+  background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
+}
+.grid-bg{
+  position:fixed; inset:0; z-index:-1; pointer-events:none;
+  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
+  background-size:26px 26px;
+  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
+          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
+}
+.wrap{max-width:1080px; margin:0 auto; padding:0 1.5rem;}
+.prose{max-width:820px;}
+a{color:inherit; text-decoration:none;}
+.mono{font-family:'JetBrains Mono',monospace;}
+
+/* NAV */
+nav{position:sticky; top:0; z-index:100; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(14,11,22,.72); border-bottom:1px solid var(--line);}
+nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px;}
+.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem;}
+.brand img{height:26px; width:auto; image-rendering:pixelated;}
+.navlinks{display:flex; align-items:center; gap:1.4rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--muted);}
+.navlinks a:hover{color:var(--text);}
+.navlinks a.active{color:var(--orange);}
+.navlinks .desktop-only{display:inline;}
+@media(max-width:640px){.navlinks .desktop-only{display:none;}}
+.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.8rem; padding:.5rem .9rem; border-radius:8px; transition:transform .12s ease;}
+.btn:hover{transform:translateY(-1px);}
+.btn-primary{background:var(--orange); color:#1a1320; box-shadow:0 4px 0 var(--orange-d);}
+.btn-primary:active{transform:translateY(3px); box-shadow:0 1px 0 var(--orange-d);}
+
+/* HERO / PAGE HEAD */
+header.phead{padding:3.5rem 0 1.5rem; position:relative;}
+.eyebrow{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:.8rem;}
+h1.headline{font-weight:700; font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.04; letter-spacing:-.02em; margin-bottom:.8rem;}
+h1.headline .t{color:var(--orange);}
+.oneline{font-family:'JetBrains Mono',monospace; font-size:1rem; color:var(--green); line-height:1.55; max-width:70ch; border-left:2px solid var(--line2); padding-left:1rem;}
+.oneline b{color:var(--text); font-weight:600;}
+
+/* CONTENT */
+section.body{padding:2rem 0 3rem;}
+.body h2{font-weight:700; font-size:clamp(1.4rem,2.6vw,1.8rem); letter-spacing:-.01em; margin:2.4rem 0 .9rem;}
+.body h3{font-weight:600; font-size:1.12rem; margin:1.6rem 0 .5rem; color:var(--text);}
+.body p{color:var(--muted); margin:.7rem 0; max-width:78ch;}
+.body p strong, .body li strong{color:var(--text); font-weight:600;}
+.body em{color:var(--text); font-style:italic;}
+.body a{color:var(--green); text-decoration:none; border-bottom:1px solid rgba(124,246,176,.3);}
+.body a:hover{border-bottom-color:var(--green);}
+.body ul, .body ol{color:var(--muted); margin:.7rem 0 .7rem 1.2rem; max-width:78ch;}
+.body li{margin:.4rem 0;}
+.body code{font-family:'JetBrains Mono',monospace; font-size:.85em; background:#0a0812; border:1px solid var(--line2); border-radius:5px; padding:.08rem .35rem; color:var(--green);}
+.body pre{font-family:'JetBrains Mono',monospace; font-size:.8rem; background:#0a0812; border:1px solid var(--line2); border-radius:10px; padding:1rem 1.1rem; overflow-x:auto; margin:1rem 0; color:var(--muted); line-height:1.5;}
+.body pre code{background:none; border:none; padding:0; color:inherit;}
+.body blockquote{border-left:3px solid var(--orange); background:var(--panel); border-radius:0 10px 10px 0; padding:.9rem 1.2rem; margin:1.2rem 0; color:var(--text);}
+.body blockquote p{color:var(--text); margin:.3rem 0;}
+.body hr{border:none; border-top:1px solid var(--line); margin:2.5rem 0;}
+.note{font-size:.86rem; color:var(--dim); font-style:italic; margin-top:2rem;}
+
+/* TABLES */
+.tablewrap{overflow-x:auto; margin:1.3rem 0; border:1px solid var(--line2); border-radius:12px;}
+table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px;}
+thead th{background:#181426; color:var(--text); font-weight:600; text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line2); font-family:'JetBrains Mono',monospace; font-size:.78rem;}
+tbody td{padding:.7rem .9rem; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:middle;}
+tbody td:first-child{vertical-align:middle;}
+tbody tr:last-child td{border-bottom:none;}
+tbody tr:nth-child(even){background:rgba(255,255,255,.012);}
+td.c, th.c{text-align:center;}
+td strong, td b{color:var(--text);}
+/* status marks — crisp monospace glyphs, theme-colored, never OS emoji */
+.mark{font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; line-height:1; font-variant-emoji:text;}
+.yes{color:var(--green);}
+.no{color:var(--dim);}
+.partial{color:var(--yellow);}
+/* value cells: centered glyph, annotation as a small caption beneath it so
+   glyphs line up in a tidy grid regardless of annotation length */
+td.val{text-align:center; vertical-align:middle;}
+td.val .mark{display:block; font-size:1.05rem;}
+td.val .anno{display:block; max-width:24ch; margin:.22rem auto 0; font-size:.78rem; line-height:1.35; color:var(--muted);}
+td.val .anno.plain{margin:0; font-size:.88rem;}
+td.val .anno code{font-size:.76rem;}
+.legend{font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--dim); margin-top:.7rem;}
+
+/* CARD GRID (compare index) */
+.cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0;}
+@media(max-width:680px){.cards{grid-template-columns:1fr;}}
+.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.3rem; transition:border-color .15s ease, transform .15s ease; display:block;}
+.card:hover{border-color:var(--orange); transform:translateY(-2px);}
+.card h3{font-size:1.1rem; margin-bottom:.3rem; color:var(--text); border:none;}
+.card p{color:var(--muted); font-size:.9rem; margin:.3rem 0 0;}
+.card .arrow{color:var(--orange); font-family:'JetBrains Mono',monospace; font-size:.78rem; margin-top:.8rem; display:inline-block;}
+
+/* back / pager */
+.pager{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);}
+.pager a{font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--muted); border:1px solid var(--line2); border-radius:8px; padding:.5rem .8rem;}
+.pager a:hover{border-color:var(--orange); color:var(--text);}
+
+/* FOOTER */
+footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem; color:var(--dim); margin-top:2rem;}
+footer .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;}
+footer .fbrand{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600;}
+footer .fbrand img{height:22px; width:auto; image-rendering:pixelated;}
+footer .flinks{display:flex; gap:1.3rem; font-family:'JetBrains Mono',monospace; font-size:.78rem;}
+footer .flinks a:hover{color:var(--text);}

docs/compare/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Compare — TaskYou</title>
+<meta name="description" content="TaskYou is an autonomy-first task orchestrator for coding agents.">
+<link rel="icon" href="../images/logo.webp">
+<meta property="og:title" content="Compare — TaskYou">
+<meta property="og:description" content="TaskYou is an autonomy-first task orchestrator for coding agents.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="compare.css">
+</head>
+<body>
+<div class="grid-bg"></div>
+<nav>
+  <div class="wrap">
+    <a class="brand" href="/"><img src="../images/logo.webp" alt="">taskyou</a>
+    <div class="navlinks">
+      <a class="desktop-only" href="/#how">How it works</a>
+      <a class="desktop-only" href="/#features">Features</a>
+      <a class="active" href="/compare/">Compare</a>
+      <a href="https://github.com/bborn/taskyou">GitHub</a>
+      <a href="/#install" class="btn btn-primary">Install ↓</a>
+    </div>
+  </div>
+</nav>
+<section class="body">
+  <div class="wrap prose">
+<h1 class="headline">TaskYou vs everything else</h1>
+<p><strong>TaskYou is an autonomy-first task orchestrator for coding agents.</strong> You drop a task on a board, an agent picks it up and works in its own isolated git worktree in the background, and the card tracks all the way to a merged PR. One agent per task. A worktree per agent.</p>
+<p>That's a different job from a terminal multiplexer, a process dashboard, or a worktree-diff tool. This page lays the whole landscape on one grid, then links to a detailed page for each contender. We try to be fair: where a tool genuinely beats us at <em>its</em> job, we say so.</p>
+<blockquote><p><strong>The short version:</strong> most of these tools help you <em>watch and drive</em> agents you launch by</p><p>hand. TaskYou helps you <em>queue outcomes and walk away.</em> If your mental model is "panes I'm</p><p>babysitting," you want a multiplexer. If it's "a backlog that clears itself," you want TaskYou.</p></blockquote>
+<hr>
+<h2>Capability matrix</h2>
+<div class="tablewrap"><table><thead><tr><th>Capability</th><th class="c"><strong>TaskYou</strong></th><th class="c">tmux / Zellij</th><th class="c">cmux / Warp</th><th class="c">Conductor / Emdash / Superset</th></tr></thead><tbody><tr><td>Unit of work is a <strong>task / outcome</strong> (not a pane)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark yes">✓︎</span></td></tr><tr><td><strong>Queue + background execution</strong> (stack work, walk away)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td><strong>Kanban board</strong> (Backlog / In Progress / Blocked / Done)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td><strong>Worktree-per-task isolation</strong>, automatic</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark partial">◐︎</span></td><td class="val"><span class="mark yes">✓︎</span></td></tr><tr><td><strong>PR-aware completion</strong> (task state follows the PR to merge)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td><strong>Pluggable executors</strong> (Claude, Codex, Gemini, Pi, OpenClaw, OpenCode)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="anno plain">n/a</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td><strong>Routines</strong> — scheduled unattended runs that feed the queue</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td></tr><tr><td><strong>Live executor panes</strong> to watch/drive an agent</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td>Runs over <strong>SSH</strong> (board from anywhere)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td></tr><tr><td><strong>Web UI</strong> (same board in a browser)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td><strong>Desktop app</strong> (macOS / Linux)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark yes">✓︎</span></td></tr><tr><td><strong>Email control</strong> (create + unblock tasks from your phone)</td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td><td class="val"><span class="mark no">✕︎</span></td></tr><tr><td><strong>Fully scriptable CLI / agent API</strong></td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark partial">◐︎</span></td><td class="val"><span class="mark partial">◐︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr><tr><td>Open source</td><td class="val"><span class="mark yes">✓︎</span><span class="anno">MIT</span></td><td class="val"><span class="mark yes">✓︎</span></td><td class="val"><span class="mark partial">◐︎</span></td><td class="val"><span class="mark partial">◐︎</span></td></tr></tbody></table></div>
+<p><span class="mark yes">✓︎</span> first-class · <span class="mark partial">◐︎</span> partial / possible-but-not-the-point · <span class="mark no">✕︎</span> no · n/a not applicable <em>(<code><span class="mark partial">◐︎</span></code> and <code><span class="mark no">✕︎</span></code> for other tools reflect their stated positioning as of mid-2026; correct us with a PR if a tool has shipped past this.)</em></p>
+<hr>
+<h2>Pick your comparison</h2>
+<ul><li><strong><a href="taskyou-vs-tmux.html">TaskYou vs tmux / Zellij</a></strong> — TaskYou <em>runs on</em> tmux; here's what it adds on top.</li><li><strong><a href="taskyou-vs-conductor-emdash-superset.html">TaskYou vs Conductor / Emdash / Superset</a></strong> — the other worktree-orchestrator camp.</li><li><strong><a href="taskyou-vs-cmux-warp.html">TaskYou vs cmux / Warp</a></strong> — desktop agent apps vs a board that runs anywhere.</li></ul>
+<hr>
+<h2>One-liners</h2>
+<ul><li><strong>vs tmux / Zellij:</strong> tmux multiplexes terminals; TaskYou multiplexes <em>tasks</em> — and it's built on tmux, so you get the panes anyway.</li><li><strong>vs Conductor / Emdash / Superset:</strong> they isolate a worktree per branch and help you review the diff; TaskYou does that <em>and</em> runs the work in the background on a queue, across six executors, on whatever surface you're holding.</li><li><strong>vs cmux / Warp:</strong> they're polished Mac apps for agents; TaskYou is the same board in your terminal, your browser, your desktop, your inbox, and over SSH.</li></ul>
+<div class="pager"><a href="/compare/">← All comparisons</a></div>
+  </div>
+</section>
+<footer>
+  <div class="wrap">
+    <span class="fbrand"><img src="../images/logo.webp" alt="">taskyou</span>
+    <span class="flinks">
+      <a href="/">Home</a>
+      <a href="/compare/">Compare</a>
+      <a href="https://github.com/bborn/taskyou">GitHub</a>
+      <a href="https://github.com/bborn/taskyou#readme">Docs</a>
+    </span>
+  </div>
+</footer>
+</body>
+</html>