diff --git a/index.html b/index.html
index cf9ce14..1022272 100644
--- a/index.html
+++ b/index.html
@@ -3,517 +3,446 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>AgentForge — Orchestrate AI Agents Like Infrastructure</title>
-<meta name="description" content="A macOS desktop app for managing, scheduling, and monitoring Claude Code and Codex agents through a kanban-style task board.">
+<title>AgentForge - AI agent orchestration for macOS</title>
+<meta name="description" content="AgentForge is a macOS desktop app for scheduling, monitoring, and chaining Claude Code and OpenAI Codex CLI agents from a local kanban board.">
+<link rel="icon" href="taskboard-electron/assets/agentforge.png">
 <style>
-*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+*,*::before,*::after{box-sizing:border-box}
 :root{
---bg:#0a0a0f;--surface:#12121a;--surface-hover:#1a1a26;
---border:#1e1e2e;--border-active:#2d2d44;
---text:#e2e2ef;--text-muted:#6b6b8a;--text-dim:#44445e;
---accent:#7c6aff;--accent-glow:rgba(124,106,255,0.15);
---green:#34d399;--blue:#60a5fa;--orange:#fbbf24;--red:#f87171;--cyan:#22d3ee;
---font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
---font-mono:'SF Mono','JetBrains Mono','Fira Code',monospace;
+--bg:#f5f5f7;
+--paper:#fff;
+--paper-strong:rgba(255,255,255,.9);
+--paper-soft:rgba(255,255,255,.68);
+--ink:#1d1d1f;
+--muted:#6e6e73;
+--dim:#9a9aa1;
+--line:rgba(60,60,67,.14);
+--line-strong:rgba(60,60,67,.22);
+--blue:#007aff;
+--blue-soft:rgba(0,122,255,.1);
+--green:#34c759;
+--green-soft:rgba(52,199,89,.12);
+--orange:#ff9500;
+--orange-soft:rgba(255,149,0,.12);
+--purple:#5856d6;
+--purple-soft:rgba(88,86,214,.12);
+--shadow:0 24px 70px rgba(31,35,45,.13);
+--shadow-soft:0 10px 34px rgba(31,35,45,.09);
+--radius:8px;
 --nav-h:64px;
+--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
+--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
+--mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
 }
-html{scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
-body{background:var(--bg);overflow-x:hidden}
-a{color:var(--accent);text-decoration:none}
-a:hover{text-decoration:underline}
+html{scroll-behavior:smooth;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
+body{margin:0;background:
+linear-gradient(180deg,#fbfbfd 0%,#f5f5f7 34%,#fff 100%);
+overflow-x:hidden}
+body::before{content:"";position:fixed;inset:0;pointer-events:none;background:
+linear-gradient(90deg,rgba(0,122,255,.055),transparent 24%,transparent 76%,rgba(52,199,89,.05)),
+linear-gradient(180deg,rgba(255,255,255,.72),transparent 44%);z-index:-1}
+a{color:inherit;text-decoration:none}
 img,svg{display:block}
-.container{max-width:1120px;margin:0 auto;padding:0 24px}
-section{padding:100px 0}
-h2.section-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:12px;text-align:center}
-p.section-sub{text-align:center;color:var(--text-muted);max-width:600px;margin:0 auto 56px;font-size:1.05rem}
-
-/* ANIMATIONS */
-.fade-in-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
-.fade-in-up.visible{opacity:1;transform:translateY(0)}
+button,input{font:inherit}
+.container{width:min(1120px,calc(100% - 48px));margin:0 auto}
+.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;font-weight:700}
+.eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 16px rgba(52,199,89,.65)}
+.section{padding:88px 0}
+.section.alt{background:linear-gradient(180deg,rgba(245,245,247,.56),rgba(255,255,255,.82));border-block:1px solid var(--line)}
+.section,.container,.product-window,.code-block,.showcase-panel,.feature-card,.step-card,.integration-card,.arch-item,.board-col,.task{min-width:0}
+.section-header{max-width:720px;margin:0 auto 38px;text-align:center}
+.section-title{font-family:var(--display);font-size:44px;line-height:1.05;font-weight:800;margin:10px 0 12px;letter-spacing:0}
+.section-sub{color:var(--muted);font-size:18px;margin:0}
 
 /* NAV */
-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:#0a0a0fee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:1000;display:flex;align-items:center}
-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
-.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:700;font-size:1.1rem;color:var(--text);text-decoration:none}
-.nav-brand svg{flex-shrink:0}
-.nav-links{display:flex;gap:28px;list-style:none}
-.nav-links a{color:var(--text-muted);font-size:.875rem;font-weight:500;transition:color .2s}
-.nav-links a:hover{color:var(--text);text-decoration:none}
-.nav-right{display:flex;align-items:center;gap:16px}
-.nav-right a.gh{color:var(--text-muted);transition:color .2s}
-.nav-right a.gh:hover{color:var(--text)}
-.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .2s;text-decoration:none}
-.btn-primary{background:var(--accent);color:#fff}
-.btn-primary:hover{background:#6b5bef;text-decoration:none}
-.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border-active)}
-.btn-outline:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
-.hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer}
+.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;background:rgba(251,251,253,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}
+.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
+.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:16px}
+.brand img{width:34px;height:34px;border-radius:8px;box-shadow:0 8px 18px rgba(0,122,255,.18)}
+.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
+.nav-links a{color:var(--muted);font-size:13px;font-weight:650;transition:color .18s ease}
+.nav-links a:hover{color:var(--ink)}
+.nav-actions{display:flex;align-items:center;gap:10px}
+.icon-link{width:34px;height:34px;border:1px solid var(--line);background:var(--paper-soft);border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:color .18s ease,background .18s ease,border-color .18s ease}
+.icon-link:hover{color:var(--ink);background:var(--paper);border-color:var(--line-strong)}
+.hamburger{display:none;width:34px;height:34px;border:1px solid var(--line);background:var(--paper-soft);border-radius:8px;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:8px;font-size:14px;font-weight:750;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;white-space:nowrap}
+.btn:hover{transform:translateY(-1px)}
+.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 28px rgba(0,122,255,.22)}
+.btn-primary:hover{box-shadow:0 16px 34px rgba(0,122,255,.28)}
+.btn-secondary{background:var(--paper-strong);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-soft)}
+.btn-secondary:hover{border-color:var(--line-strong)}
 
 /* HERO */
-.hero{padding-top:calc(var(--nav-h) + 80px);padding-bottom:80px;text-align:center;position:relative;overflow:hidden}
-.hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);pointer-events:none;z-index:0}
-.hero>*{position:relative;z-index:1}
-.hero h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;line-height:1.15;margin-bottom:20px;letter-spacing:-0.02em}
-.hero h1 span{background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
-.hero .subtitle{max-width:640px;margin:0 auto 36px;color:var(--text-muted);font-size:1.1rem;line-height:1.7}
-.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px}
-.hero-btns .btn{padding:12px 28px;font-size:.95rem}
-
-/* KANBAN MOCKUP */
-.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:0 auto;perspective:1200px}
-.kanban-col{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:left}
-.kanban-col-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:8px}
-.kanban-col-title .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
-.kanban-card{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:8px;padding:12px;margin-bottom:8px;font-size:.82rem;color:var(--text);transition:transform .2s,border-color .2s}
-.kanban-card:last-child{margin-bottom:0}
-.kanban-card:hover{transform:translateY(-2px);border-color:var(--border-active)}
-.kanban-card.running{border-left-color:var(--blue)}
-.kanban-card.done{border-left-color:var(--green)}
-.card-title{font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
-.card-meta{color:var(--text-dim);font-size:.72rem;font-family:var(--font-mono)}
-.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 1.5s ease infinite}
-@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,.4)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(52,211,153,0)}}
-
-/* FEATURES */
-.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
-.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;transition:transform .25s,border-color .25s,box-shadow .25s}
-.feature-card:hover{transform:translateY(-4px);border-color:var(--border-active);box-shadow:0 8px 30px rgba(0,0,0,.3)}
-.feature-card svg{margin-bottom:16px;color:var(--accent)}
-.feature-card h3{font-size:1.1rem;margin-bottom:8px;font-weight:700}
-.feature-card p{color:var(--text-muted);font-size:.9rem;line-height:1.65}
-
-/* ARCHITECTURE */
-.arch-diagram{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;max-width:700px;margin:0 auto}
-.arch-row{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}
-.arch-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 28px;font-family:var(--font-mono);font-size:.85rem;font-weight:600;position:relative;text-align:center;transition:border-color .3s}
-.arch-box:hover{border-color:var(--border-active)}
-.arch-box.frontend{border-color:var(--cyan);box-shadow:0 0 20px rgba(34,211,238,.08)}
-.arch-box.backend{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
-.arch-box.sqlite{border-color:var(--green)}
-.arch-box.scheduler{border-color:var(--orange)}
-.arch-box.cli{border-color:var(--blue)}
-.arch-connector{display:flex;flex-direction:column;align-items:center;padding:12px 0;position:relative}
-.arch-connector .line{width:2px;height:36px;background:linear-gradient(180deg,var(--cyan),var(--accent));position:relative;overflow:hidden}
-.arch-connector .line::after{content:'';position:absolute;top:-6px;left:-2px;width:6px;height:6px;background:var(--accent);border-radius:50%;animation:flowDot 2s linear infinite}
-@keyframes flowDot{0%{top:-6px}100%{top:100%}}
-.arch-connector .label{font-size:.72rem;color:var(--text-muted);font-family:var(--font-mono);margin-top:4px}
-.arch-spread{display:flex;justify-content:center;gap:20px;margin-top:16px;position:relative}
-.arch-spread::before{content:'';position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
-
-/* ORCHESTRATION TREE */
-.orch-tree{display:flex;flex-direction:column;align-items:center;gap:0;max-width:600px;margin:0 auto 40px}
-.orch-node{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 20px;font-family:var(--font-mono);font-size:.82rem;display:flex;align-items:center;gap:8px;position:relative}
-.orch-node .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
-.orch-node .status-dot.green{background:var(--green)}
-.orch-node .status-dot.blue{background:var(--blue)}
-.orch-node .status-dot.orange{background:var(--orange)}
-.orch-row-tree{display:flex;gap:20px;justify-content:center}
-.orch-vline{width:2px;height:24px;background:var(--border-active);margin:0 auto}
-.orch-hline{display:flex;align-items:flex-start;justify-content:center;gap:60px;position:relative}
-.orch-hline::before{content:'';position:absolute;top:0;left:calc(50% - 60px);width:120px;height:2px;background:var(--border-active)}
-.orch-hline-branch{display:flex;flex-direction:column;align-items:center}
-
-/* INTEGRATIONS */
-.integrations-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
-.integration-card{flex:1 1 190px;max-width:225px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 20px;text-align:center;transition:transform .25s,border-color .25s}
-.integration-card:hover{transform:translateY(-4px);border-color:var(--border-active)}
-.integration-card svg{margin:0 auto 16px;color:var(--accent)}
-.integration-card h3{font-size:1.05rem;margin-bottom:8px}
-.integration-card p{color:var(--text-muted);font-size:.85rem;margin-bottom:16px;line-height:1.6}
+.hero{min-height:92vh;padding:calc(var(--nav-h) + 58px) 0 56px;display:flex;align-items:center;position:relative;overflow:hidden}
+.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
+.hero-inner{position:relative;z-index:1;text-align:center}
+.hero-icon{width:92px;height:92px;margin:0 auto 22px;border-radius:20px;box-shadow:0 28px 60px rgba(0,122,255,.22)}
+.hero h1{font-family:var(--display);font-size:68px;line-height:1.02;font-weight:850;letter-spacing:0;margin:0 auto 18px;max-width:820px}
+.hero-copy{max-width:780px;margin:0 auto;color:var(--muted);font-size:21px;line-height:1.55}
+.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 36px}
+.hero-metrics{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:34px}
+.metric-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--paper-soft);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:650;backdrop-filter:blur(20px)}
+.metric-pill strong{color:var(--ink)}
+.hero-stage{width:min(100%,1040px);margin:0 auto;position:relative}
+.product-window{background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;text-align:left}
+.window-bar{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(245,245,247,.74)}
+.traffic{display:flex;gap:8px}
+.traffic span{width:12px;height:12px;border-radius:999px}
+.traffic span:nth-child(1){background:#ff5f57}.traffic span:nth-child(2){background:#ffbd2e}.traffic span:nth-child(3){background:#28c840}
+.window-title{font-size:13px;color:var(--muted);font-weight:700}
+.window-action{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;font-weight:750}
+.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px;background:linear-gradient(180deg,#fbfbfd,#f4f6fb)}
+.board-col{min-width:0;background:rgba(255,255,255,.74);border:1px solid var(--line);border-radius:8px;padding:12px}
+.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
+.board-label{display:flex;align-items:center;gap:9px;font-weight:800}
+.state-dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line)}
+.state-dot.queue{background:var(--orange-soft);color:var(--orange)}
+.state-dot.running{background:var(--blue-soft);color:var(--blue)}
+.state-dot.done{background:var(--green-soft);color:var(--green)}
+.count{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:#fff}
+.task{border:1px solid var(--line);background:#fff;border-radius:8px;padding:12px;margin-bottom:10px;box-shadow:0 8px 20px rgba(31,35,45,.05)}
+.task:last-child{margin-bottom:0}
+.task-title{font-weight:760;font-size:14px;margin-bottom:8px}
+.task-body{color:var(--muted);font-size:12px;margin-bottom:10px}
+.tags{display:flex;gap:6px;flex-wrap:wrap}
+.tag{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:6px;padding:3px 7px}
+.tag.green{color:var(--green);background:var(--green-soft)}
+.tag.orange{color:var(--orange);background:var(--orange-soft)}
 
-/* CODE BLOCKS */
-.code-block{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0;overflow:hidden;margin:20px auto;max-width:680px;text-align:left;position:relative}
-.code-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg)}
-.code-header span{font-size:.75rem;color:var(--text-dim);font-family:var(--font-mono)}
-.copy-btn{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:.72rem;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:var(--font-mono);transition:all .2s}
-.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
-.code-block pre{padding:16px;overflow-x:auto;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;color:var(--text-muted);margin:0}
-.code-block pre .kw{color:var(--accent)}
-.code-block pre .str{color:var(--green)}
-.code-block pre .cmt{color:var(--text-dim)}
-.code-block pre .fn{color:var(--cyan)}
-.code-block pre .flag{color:var(--orange)}
-
-/* API TABLE */
-.api-table-wrap{overflow-x:auto;max-width:780px;margin:0 auto}
-.api-table{width:100%;border-collapse:collapse;font-size:.85rem}
-.api-table th{text-align:left;padding:12px 16px;border-bottom:2px solid var(--border);color:var(--text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
-.api-table td{padding:12px 16px;border-bottom:1px solid var(--border)}
-.api-table tr:hover td{background:var(--surface)}
-.api-table .method{font-family:var(--font-mono);font-weight:700;font-size:.75rem;padding:3px 8px;border-radius:4px;display:inline-block}
-.method.get{background:rgba(52,211,153,.12);color:var(--green)}
-.method.post{background:rgba(96,165,250,.12);color:var(--blue)}
-.method.delete{background:rgba(248,113,113,.12);color:var(--red)}
-.api-table .endpoint{font-family:var(--font-mono);color:var(--text)}
-.api-table .desc{color:var(--text-muted)}
-
-/* QUICK START */
-.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
-.step-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;text-align:center;transition:transform .25s}
-.step-card:hover{transform:translateY(-4px)}
-.step-num{font-size:2rem;font-weight:800;color:var(--accent);font-family:var(--font-mono);margin-bottom:8px}
-.step-card h3{margin-bottom:8px;font-size:1rem}
-.step-card p{color:var(--text-muted);font-size:.85rem;line-height:1.6}
-
-/* FOOTER */
-footer{border-top:1px solid var(--border);padding:48px 0;color:var(--text-muted);font-size:.85rem}
-.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
-.footer-brand{display:flex;flex-direction:column;gap:8px}
-.footer-brand .tagline{color:var(--text-dim);font-size:.82rem}
-.footer-links{display:flex;gap:24px}
-.footer-links a{color:var(--text-muted);transition:color .2s}
-.footer-links a:hover{color:var(--text);text-decoration:none}
-.footer-copy{color:var(--text-dim);font-size:.8rem}
-
-/* TOAST */
-.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface);border:1px solid var(--green);color:var(--green);padding:10px 24px;border-radius:8px;font-size:.85rem;font-family:var(--font-mono);z-index:2000;opacity:0;transition:all .3s ease;pointer-events:none}
+/* CONTENT */
+.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
+.feature-card,.step-card,.integration-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:var(--shadow-soft);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
+.feature-card:hover,.step-card:hover,.integration-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 44px rgba(31,35,45,.12)}
+.feature-icon{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;margin-bottom:18px}
+.feature-icon.blue{color:var(--blue);background:var(--blue-soft)}
+.feature-icon.green{color:var(--green);background:var(--green-soft)}
+.feature-icon.orange{color:var(--orange);background:var(--orange-soft)}
+.feature-icon.purple{color:var(--purple);background:var(--purple-soft)}
+.feature-card h3,.step-card h3,.integration-card h3{margin:0 0 8px;font-size:18px}
+.feature-card p,.step-card p,.integration-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
+.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
+.showcase-panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:var(--shadow-soft)}
+.showcase-panel h3{font-size:28px;line-height:1.15;margin:0 0 12px}
+.showcase-panel p{color:var(--muted);margin:0 0 18px}
+.timeline{display:grid;gap:10px}
+.timeline-step{display:flex;gap:12px;align-items:flex-start;background:#f7f8fb;border:1px solid var(--line);border-radius:8px;padding:13px}
+.timeline-step span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}
+.timeline-step strong{display:block;margin-bottom:2px}
+.timeline-step p{font-size:13px;margin:0;color:var(--muted)}
+.architecture{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
+.arch-item{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px;text-align:center}
+.arch-item strong{display:block;margin-bottom:5px}
+.arch-item span{font-family:var(--mono);font-size:12px;color:var(--muted)}
+.integrations-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
+.code-block{background:#101216;color:#e7e8ef;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
+.code-header{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:#171a20;color:#aeb4c1;font-family:var(--mono);font-size:12px}
+.code-header span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.copy-btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#d5d8e0;border-radius:8px;padding:4px 9px;cursor:pointer}
+.copy-btn:hover{background:rgba(255,255,255,.12)}
+pre{max-width:100%;margin:0;padding:18px;overflow:auto;font-family:var(--mono);font-size:13px;line-height:1.7;color:#d5d8e0}
+.cmd{color:#8ad7ff}.comment{color:#747b8c}.string{color:#b7f7c0}
+.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
+.step-num{width:34px;height:34px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:850;margin-bottom:18px}
+footer{padding:48px 0;border-top:1px solid var(--line);background:rgba(255,255,255,.64)}
+.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
+.footer-links{display:flex;gap:18px;flex-wrap:wrap}
+.footer-links a{color:var(--muted);font-size:14px;font-weight:650}
+.footer-links a:hover{color:var(--ink)}
+.footer-copy{color:var(--dim);font-size:13px}
+.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(29,29,31,.92);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:10px 18px;font-size:13px;opacity:0;transition:all .22s ease;pointer-events:none;z-index:100}
 .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
+.fade-in-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
+.fade-in-up.visible{opacity:1;transform:translateY(0)}
+.hero .fade-in-up{opacity:1;transform:none}
 
-/* RESPONSIVE */
-@media(max-width:768px){
-.nav-links{display:none}
-.hamburger{display:block}
-nav .nav-inner{gap:12px}
-.features-grid,.integrations-grid,.steps{grid-template-columns:1fr}
-.kanban{grid-template-columns:1fr;max-width:400px}
-section{padding:64px 0}
-.hero{padding-top:calc(var(--nav-h) + 48px);padding-bottom:48px}
-.arch-row{flex-direction:column;gap:12px}
-.arch-spread{flex-direction:column;align-items:center;gap:12px}
-.arch-spread::before{display:none}
-.orch-hline{flex-direction:column;align-items:center;gap:8px}
-.orch-hline::before{display:none}
-.footer-inner{flex-direction:column;align-items:center;text-align:center}
+@media(max-width:980px){
+.hero h1{font-size:56px}
+.feature-grid,.showcase,.architecture,.integrations-grid,.quick-grid{grid-template-columns:1fr 1fr}
+.board{grid-template-columns:1fr}
+.board-col:nth-child(3){display:none}
+}
+@media(max-width:760px){
+.container{width:min(100% - 32px,1120px)}
+.nav-links{position:absolute;top:var(--nav-h);left:16px;right:16px;display:none;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:var(--shadow-soft)}
+.nav-links.open{display:flex}
+.nav-links li{width:100%}
+.nav-links a{display:block;width:100%;padding:10px 12px}
+.hamburger{display:flex}
+.nav-actions .btn-secondary,.icon-link{display:none}
+.hero{min-height:auto;padding-top:calc(var(--nav-h) + 42px)}
+.hero h1{font-size:44px}
+.hero-copy{font-size:18px}
+.section{padding:64px 0}
+.section-title{font-size:34px}
+.feature-grid,.showcase,.architecture,.integrations-grid,.quick-grid{grid-template-columns:1fr}
+.board{gap:10px;padding:12px}
+.window-action{display:none}
+.footer-inner{align-items:flex-start;flex-direction:column}
 }
-@media(max-width:480px){
-.hero h1{font-size:1.75rem}
-.hero .subtitle{font-size:.95rem}
-.hero-btns .btn{padding:10px 20px;font-size:.85rem}
-.feature-card{padding:20px}
+@media(max-width:440px){
+.hero-icon{width:78px;height:78px}
+.hero h1{font-size:36px}
+.btn{width:100%}
+.hero-actions{flex-direction:column}
+.metric-pill{width:100%;justify-content:center}
+}
+@media(prefers-reduced-motion:reduce){
+html{scroll-behavior:auto}
+*,*::before,*::after{transition:none!important;animation:none!important}
+.fade-in-up{opacity:1;transform:none}
 }
 </style>
 </head>
 <body>
-<!-- NAVIGATION -->
-<nav>
-<div class="nav-inner">
-<a href="#" class="nav-brand">
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2L4 8v4l10 6 10-6V8L14 2z" fill="#7c6aff" opacity=".3"/><path d="M4 12v4l10 6 10-6v-4L14 18 4 12z" fill="#7c6aff" opacity=".6"/><path d="M4 16v4l10 6 10-6v-4L14 22 4 16z" fill="#7c6aff"/><path d="M14 2L4 8l10 6 10-6L14 2z" stroke="#7c6aff" stroke-width="1.5" fill="none"/></svg>
-AgentForge
+<nav class="nav">
+<div class="container nav-inner">
+<a href="#" class="brand" aria-label="AgentForge home">
+<img src="taskboard-electron/assets/agentforge.png" alt="">
+<span>AgentForge</span>
 </a>
 <ul class="nav-links">
 <li><a href="#features">Features</a></li>
 <li><a href="#skills">Skills</a></li>
 <li><a href="#architecture">Architecture</a></li>
-<li><a href="#integrations">Integrations</a></li>
-<li><a href="#api">API</a></li>
+<li><a href="#integrations">Channels</a></li>
 <li><a href="#quickstart">Quick Start</a></li>
 </ul>
-<div class="nav-right">
-<a href="https://github.com/hetaoBackend/agentforge" class="gh" aria-label="GitHub">
-<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+<div class="nav-actions">
+<a class="icon-link" href="https://github.com/hetaoBackend/agentforge" aria-label="GitHub">
+<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"></path></svg>
 </a>
-<a href="#quickstart" class="btn btn-primary">Download</a>
-</div>
-<button class="hamburger" aria-label="Menu" onclick="document.querySelector('.nav-links').style.display=document.querySelector('.nav-links').style.display==='flex'?'none':'flex'">
-<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+<a class="btn btn-secondary" href="#quickstart">Install</a>
+<button class="hamburger" aria-label="Menu" aria-expanded="false">
+<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><line x1="4" y1="7" x2="20" y2="7"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="17" x2="20" y2="17"></line></svg>
 </button>
 </div>
+</div>
 </nav>
 
-<!-- HERO -->
+<main>
 <section class="hero">
-<div class="container">
-<h1 class="fade-in-up">Orchestrate AI agents<br>like <span>infrastructure</span></h1>
-<p class="subtitle fade-in-up">A macOS desktop app for managing, scheduling, and monitoring <strong>Claude Code &amp; Codex</strong> agents through a kanban-style task board &mdash; with a compounding skill library, recursive agent spawning, DAG pipelines, and chat integrations.</p>
-<div class="hero-btns fade-in-up">
-<a href="#quickstart" class="btn btn-primary">
-<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+<div class="container hero-inner">
+<img class="hero-icon fade-in-up" src="taskboard-electron/assets/agentforge.png" alt="AgentForge app icon">
+<div class="eyebrow fade-in-up">Local-first orchestration for coding agents</div>
+<h1 class="fade-in-up">AgentForge</h1>
+<p class="hero-copy fade-in-up">A native-feeling macOS command center for scheduling, monitoring, and chaining Claude Code and OpenAI Codex CLI agents from your own machine.</p>
+<div class="hero-actions fade-in-up">
+<a class="btn btn-primary" href="#quickstart">
+<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" aria-hidden="true"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg>
 Download for macOS
 </a>
-<a href="https://github.com/hetaoBackend/agentforge" class="btn btn-outline">
-<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="display:inline"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
-View on GitHub
+<a class="btn btn-secondary" href="https://github.com/hetaoBackend/agentforge">
+<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"></path></svg>
+View source
 </a>
 </div>
-
-<!-- Kanban Mockup -->
-<div class="kanban fade-in-up">
-<div class="kanban-col">
-<div class="kanban-col-title"><span class="dot" style="background:var(--orange)"></span> Queue</div>
-<div class="kanban-card"><div class="card-title">Code review: auth module</div><div class="card-meta">immediate &middot; 2m ago</div></div>
-<div class="kanban-card"><div class="card-title">Refactor DB queries</div><div class="card-meta">scheduled &middot; in 15m</div></div>
-</div>
-<div class="kanban-col">
-<div class="kanban-col-title"><span class="dot" style="background:var(--blue)"></span> Running</div>
-<div class="kanban-card running"><div class="card-title"><span class="pulse-dot"></span> Run test suite</div><div class="card-meta">elapsed 1m 32s</div></div>
-<div class="kanban-card running"><div class="card-title"><span class="pulse-dot"></span> Deploy staging</div><div class="card-meta">elapsed 0m 48s</div></div>
+<div class="hero-metrics fade-in-up">
+<span class="metric-pill"><strong>4</strong> schedule modes</span>
+<span class="metric-pill"><strong>Bun</strong> backend</span>
+<span class="metric-pill"><strong>127.0.0.1</strong> only</span>
+<span class="metric-pill"><strong>Claude + Codex</strong></span>
 </div>
-<div class="kanban-col">
-<div class="kanban-col-title"><span class="dot" style="background:var(--green)"></span> Done</div>
-<div class="kanban-card done"><div class="card-title">Update dependencies</div><div class="card-meta">completed &middot; 5m ago</div></div>
+<div class="hero-stage fade-in-up" aria-label="AgentForge board preview">
+<div class="product-window">
+<div class="window-bar">
+<div class="traffic" aria-hidden="true"><span></span><span></span><span></span></div>
+<div class="window-title">AgentForge task board</div>
+<div class="window-action"><span>1 running</span><span>/</span><span>3 queued</span></div>
 </div>
+<div class="board">
+<div class="board-col">
+<div class="board-head">
+<div class="board-label"><span class="state-dot queue"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M3 6h18"></path><path d="M7 12h10"></path><path d="M10 18h4"></path></svg></span>Queue</div>
+<span class="count">3</span>
 </div>
+<div class="task">
+<div class="task-title">Review scheduler drift</div>
+<div class="task-body">Check delayed and cron tasks after app sleep and wake.</div>
+<div class="tags"><span class="tag orange">scheduled</span><span class="tag">codex</span></div>
 </div>
-</section>
-
-<!-- FEATURES -->
-<section id="features">
-<div class="container">
-<h2 class="section-title fade-in-up">Built for agent orchestration</h2>
-<p class="section-sub fade-in-up">Everything you need to run, schedule, and chain AI coding agents at scale.</p>
-<div class="features-grid">
-<div class="feature-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 4h12l6 6v22H9z"/><polyline points="21,4 21,10 27,10"/><path d="M16 23l1.7-3.6 3.6-1.7-3.6-1.7L16 12.4l-1.7 3.6-3.6 1.7 3.6 1.7z"/></svg>
-<h3>Compounding Skill Library</h3>
-<p>AgentForge detects recurring patterns across your tasks and distills them into reusable Claude Code skills &mdash; with skill-creator and one-click approval. <a href="#skills" style="color:var(--accent)">See how &rarr;</a></p>
+<div class="task">
+<div class="task-title">Draft Feishu smoke test</div>
+<div class="task-body">Create a compact channel startup checklist.</div>
+<div class="tags"><span class="tag">feishu</span><span class="tag">qa</span></div>
 </div>
-<div class="feature-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="18" cy="6" r="4"/><circle cx="8" cy="20" r="4"/><circle cx="28" cy="20" r="4"/><circle cx="8" cy="32" r="3"/><circle cx="18" cy="32" r="3"/><line x1="18" y1="10" x2="8" y2="16"/><line x1="18" y1="10" x2="28" y2="16"/><line x1="8" y1="24" x2="8" y2="29"/><line x1="8" y1="24" x2="18" y2="29"/></svg>
-<h3>Agents that Spawn Agents</h3>
-<p>Any running task can create sub-tasks, build DAG pipelines, and collect results &mdash; enabling recursive, multi-agent workflows.</p>
 </div>
-<div class="feature-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="18" r="4"/><circle cx="18" cy="8" r="4"/><circle cx="18" cy="28" r="4"/><circle cx="30" cy="18" r="4"/><line x1="10" y1="16" x2="14" y2="10"/><line x1="10" y1="20" x2="14" y2="26"/><line x1="22" y1="10" x2="26" y2="16"/><line x1="22" y1="26" x2="26" y2="20"/></svg>
-<h3>DAG Pipelines</h3>
-<p>Define task dependencies with automatic cascade execution. If an upstream task fails, all downstream tasks are automatically cancelled.</p>
+<div class="board-col">
+<div class="board-head">
+<div class="board-label"><span class="state-dot running"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg></span>Running</div>
+<span class="count">1</span>
 </div>
-<div class="feature-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="18" cy="18" r="14"/><polyline points="18,8 18,18 24,22"/><circle cx="18" cy="18" r="2" fill="currentColor"/></svg>
-<h3>Flexible Scheduling</h3>
-<p>Immediate, delayed, one-time datetime, and cron-based recurring tasks. Schedule agents to run exactly when you need them.</p>
+<div class="task">
+<div class="task-title">Refine trace output</div>
+<div class="task-body">Group stream-json events into readable checkpoints.</div>
+<div class="tags"><span class="tag">renderer</span><span class="tag">trace</span></div>
 </div>
-<div class="feature-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="30" height="24" rx="3"/><line x1="3" y1="11" x2="33" y2="11"/><circle cx="7" cy="8" r="1" fill="currentColor"/><circle cx="11" cy="8" r="1" fill="currentColor"/><circle cx="15" cy="8" r="1" fill="currentColor"/><line x1="7" y1="16" x2="12" y2="16"/><line x1="14" y1="16" x2="26" y2="16"/><line x1="7" y1="20" x2="20" y2="20"/><line x1="7" y1="24" x2="16" y2="24"/></svg>
-<h3>Live Output Streaming</h3>
-<p>Real-time colorized output from the Claude Code or Codex CLI, streaming NDJSON events as your agents work.</p>
 </div>
+<div class="board-col">
+<div class="board-head">
+<div class="board-label"><span class="state-dot done"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6 9 17l-5-5"></path></svg></span>Done</div>
+<span class="count">2</span>
 </div>
+<div class="task">
+<div class="task-title">Ship skill sweep summary</div>
+<div class="task-body">Summarize promoted patterns and candidate skills.</div>
+<div class="tags"><span class="tag green">completed</span><span class="tag">skills</span></div>
 </div>
-</section>
-
-<!-- SKILL LIBRARY -->
-<section id="skills">
-<div class="container">
-<h2 class="section-title fade-in-up">Your agents compound your skills</h2>
-<p class="section-sub fade-in-up">AgentForge turns the work you repeat into reusable skills &mdash; detected, distilled, approved, and loaded by both Claude Code and Codex.</p>
-<div class="fade-in-up" style="display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px">
-<div style="flex:1 1 180px;max-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px">
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700">1</span><strong style="font-size:.98rem">Detect</strong></div>
-<p style="color:var(--text-muted);font-size:.85rem;line-height:1.6;margin:0">A sweep tracks recurring patterns across your completed runs &mdash; both recipes you repeat and pitfalls you fixed.</p>
-</div>
-<div style="flex:1 1 180px;max-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px">
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700">2</span><strong style="font-size:.98rem">Distill</strong></div>
-<p style="color:var(--text-muted);font-size:.85rem;line-height:1.6;margin:0">Anthropic's skill-creator authors a proper <code>SKILL.md</code> &mdash; and first judges whether the pattern is even worth a skill.</p>
-</div>
-<div style="flex:1 1 180px;max-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px">
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700">3</span><strong style="font-size:.98rem">Approve</strong></div>
-<p style="color:var(--text-muted);font-size:.85rem;line-height:1.6;margin:0">Review the worthiness verdict and a fully editable <code>SKILL.md</code>, then approve or dismiss. You stay in control.</p>
 </div>
-<div style="flex:1 1 180px;max-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px">
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700">4</span><strong style="font-size:.98rem">Deliver</strong></div>
-<p style="color:var(--text-muted);font-size:.85rem;line-height:1.6;margin:0">Written once and symlinked into both Claude Code and Codex &mdash; loaded natively via progressive disclosure, zero prompt injection.</p>
 </div>
-<div style="flex:1 1 180px;max-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px">
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700">5</span><strong style="font-size:.98rem">Manage</strong></div>
-<p style="color:var(--text-muted);font-size:.85rem;line-height:1.6;margin:0">Enable/disable, inspect the <code>SKILL.md</code>, or delete each skill from the Skills tab.</p>
 </div>
 </div>
-<p class="fade-in-up" style="text-align:center;color:var(--text-muted);font-size:.9rem;margin:26px auto 0;max-width:660px;line-height:1.7">Distilled skills are standard, portable <code>SKILL.md</code> files. The automatic sweep is <strong>off by default</strong> (it spends tokens) &mdash; flip it on in Settings, or just hit the manual <strong>Scan</strong> button anytime.</p>
 </div>
 </section>
 
-<!-- ARCHITECTURE -->
-<section id="architecture">
+<section class="section" id="features">
 <div class="container">
-<h2 class="section-title fade-in-up">Two-process architecture</h2>
-<p class="section-sub fade-in-up">Electron spawns a Bun/TypeScript backend. React talks REST. No WebSocket needed.</p>
-<div class="arch-diagram fade-in-up">
-<div class="arch-row">
-<div class="arch-box frontend">React Frontend</div>
-</div>
-<div class="arch-connector">
-<div class="line"></div>
-<span class="label">HTTP/JSON :9712</span>
-</div>
-<div class="arch-row">
-<div class="arch-box backend">Python Backend</div>
-</div>
-<div class="arch-spread">
-<div class="arch-box sqlite">SQLite</div>
-<div class="arch-box scheduler">Scheduler</div>
-<div class="arch-box cli">Claude CLI</div>
-</div>
+<div class="section-header">
+<div class="eyebrow fade-in-up">Built for repeatable agent work</div>
+<h2 class="section-title fade-in-up">Run agents like a local automation pipeline.</h2>
+<p class="section-sub fade-in-up">AgentForge keeps the human in control while making agent work schedulable, observable, and reusable.</p>
+</div>
+<div class="feature-grid">
+<article class="feature-card fade-in-up">
+<div class="feature-icon blue"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="3"></rect><path d="M8 9h8M8 13h5M8 17h7"></path></svg></div>
+<h3>Kanban control</h3>
+<p>Create tasks, watch live output, retry failures, fork successful runs, and keep scheduled work visible.</p>
+</article>
+<article class="feature-card fade-in-up">
+<div class="feature-icon green"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18"></path><path d="M5 8h14"></path><path d="M7 16h10"></path></svg></div>
+<h3>Flexible scheduling</h3>
+<p>Run immediately, after a delay, at a specific date, or on cron. Heartbeats can decide when work is worth creating.</p>
+</article>
+<article class="feature-card fade-in-up">
+<div class="feature-icon orange"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="12" cy="18" r="3"></circle><path d="M8.5 8.5 11 15"></path><path d="m15.5 8.5-2.5 6.5"></path></svg></div>
+<h3>DAG workflows</h3>
+<p>Chain tasks into dependencies so research, implementation, review, and reporting can run as one workflow.</p>
+</article>
+<article class="feature-card fade-in-up">
+<div class="feature-icon purple"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2 4 14h7l-1 8 9-12h-7z"></path></svg></div>
+<h3>Skill Library</h3>
+<p>Detect repeated work patterns, distill them into standard SKILL.md files, and load them into Claude Code and Codex.</p>
+</article>
+<article class="feature-card fade-in-up">
+<div class="feature-icon blue"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16"></path><path d="M4 12h10"></path><path d="M4 18h16"></path></svg></div>
+<h3>Live event stream</h3>
+<p>Read structured output from Claude Code or Codex CLI without tailing terminals or digging through logs.</p>
+</article>
+<article class="feature-card fade-in-up">
+<div class="feature-icon green"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"></path><path d="m9 12 2 2 4-5"></path></svg></div>
+<h3>Local first</h3>
+<p>The backend listens on loopback only. Your code stays on your Mac; channels and agents connect through local control.</p>
+</article>
 </div>
 </div>
 </section>
 
-<!-- ORCHESTRATION -->
-<section id="orchestration">
+<section class="section alt" id="skills">
 <div class="container">
-<h2 class="section-title fade-in-up">Recursive agent delegation</h2>
-<p class="section-sub fade-in-up">A single prompt triggers a multi-agent workflow.</p>
-<div class="orch-tree fade-in-up">
-<div class="orch-node"><span class="status-dot green"></span> User Prompt</div>
-<div class="orch-vline"></div>
-<div class="orch-node"><span class="status-dot green"></span> Task A: Research</div>
-<div class="orch-vline"></div>
-<div class="orch-hline">
-<div class="orch-hline-branch">
-<div class="orch-vline"></div>
-<div class="orch-node"><span class="status-dot blue"></span> Task B: Analyze</div>
-<div class="orch-vline"></div>
-<div class="orch-node"><span class="status-dot orange"></span> Task D: Report</div>
-</div>
-<div class="orch-hline-branch">
-<div class="orch-vline"></div>
-<div class="orch-node"><span class="status-dot blue"></span> Task C: Summarize</div>
-</div>
+<div class="showcase">
+<div class="showcase-panel fade-in-up">
+<div class="eyebrow">Compounding Skill Library</div>
+<h3>Your agents get better at your work.</h3>
+<p>AgentForge can scan completed runs for recurring recipes and pitfalls, draft a proper skill, and keep you in the approval loop before anything is installed.</p>
+<div class="timeline">
+<div class="timeline-step"><span>1</span><div><strong>Detect</strong><p>Find patterns across completed task history.</p></div></div>
+<div class="timeline-step"><span>2</span><div><strong>Distill</strong><p>Ask an agent to draft a useful SKILL.md, not just a prompt snippet.</p></div></div>
+<div class="timeline-step"><span>3</span><div><strong>Approve</strong><p>Review, edit, enable, disable, or delete from the Skills tab.</p></div></div>
+</div>
+</div>
+<div class="showcase-panel fade-in-up">
+<div class="code-block">
+<div class="code-header"><span>~/.agentforge/skills/release-check/SKILL.md</span><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>
+<pre><span class="comment"># Recurring release checklist distilled from runs</span>
+name: release-check
+description: Verify package build, backend binary,
+and Electron resources before a DMG release.
+
+steps:
+  - run frontend-quality gate
+  - compile Bun backend
+  - inspect Forge output</pre>
 </div>
 </div>
-<div class="code-block fade-in-up">
-<div class="code-header"><span>prompt.txt</span><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>
-<pre><span class="cmt"># Example: multi-agent research workflow</span>
-Research the top 5 competitors in the AI coding space.
-For each competitor, spawn a sub-task to analyze their
-pricing, features, and developer experience.
-Collect all results and produce a final comparison report.</pre>
 </div>
 </div>
 </section>
 
-<!-- INTEGRATIONS -->
-<section id="integrations">
+<section class="section" id="architecture">
 <div class="container">
-<h2 class="section-title fade-in-up">Control from anywhere</h2>
-<p class="section-sub fade-in-up">Trigger and monitor agents from your favorite messaging platforms.</p>
-<div class="integrations-grid">
-<div class="integration-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M30 5L4 14l10 4 4 10L30 5z"/><line x1="14" y1="18" x2="20" y2="12"/></svg>
-<h3>Telegram</h3>
-<p>Bot API polling. Easy setup. Send prompts and receive results directly in Telegram.</p>
-</div>
-<div class="integration-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="18" y2="30"/><line x1="10" y1="14" x2="26" y2="14"/><line x1="10" y1="22" x2="26" y2="22"/><line x1="10" y1="6" x2="10" y2="30"/><line x1="26" y1="6" x2="26" y2="30"/></svg>
-<h3>Slack</h3>
-<p>Socket Mode. Real-time events. Create tasks and get status updates in channels.</p>
-</div>
-<div class="integration-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="6" width="28" height="20" rx="4"/><path d="M10 16h4v4h-4z"/><path d="M22 16h4v4h-4z"/><path d="M13 22c2 2 8 2 10 0"/></svg>
-<h3>Feishu / Lark</h3>
-<p>WebSocket long-connection. No public IP needed. Send any message to create a task.</p>
-</div>
-<div class="integration-card fade-in-up">
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 7C8 7 3 11 3 16c0 2.7 1.6 5.1 4.1 6.7L6 27l4.6-2.3c1.1.3 2.2.4 3.4.4"/><circle cx="10.5" cy="14.5" r="1.1" fill="currentColor"/><circle cx="17.5" cy="14.5" r="1.1" fill="currentColor"/><path d="M23 14c4.4 0 8 3 8 6.8 0 2.2-1.3 4.1-3.3 5.4l.9 3.3-3.6-1.8c-.6.1-1.3.2-2 .2-4.4 0-8-3-8-6.8S18.6 14 23 14z"/><circle cx="21" cy="20.5" r=".9" fill="currentColor"/><circle cx="26" cy="20.5" r=".9" fill="currentColor"/></svg>
-<h3>WeChat</h3>
-<p>Experimental local bridge. Scan a QR to log in, then message the bot to create and track tasks &mdash; no public IP needed.</p>
+<div class="section-header">
+<div class="eyebrow fade-in-up">Bun and Electron, cleanly separated</div>
+<h2 class="section-title fade-in-up">A desktop app with a local service core.</h2>
+<p class="section-sub fade-in-up">Electron owns the native shell. The Bun backend owns scheduling, SQLite, agent execution, channels, heartbeats, and skills.</p>
 </div>
+<div class="architecture fade-in-up">
+<div class="arch-item"><strong>Electron</strong><span>main + preload</span></div>
+<div class="arch-item"><strong>React</strong><span>renderer UI</span></div>
+<div class="arch-item"><strong>Bun.serve</strong><span>127.0.0.1:9712</span></div>
+<div class="arch-item"><strong>SQLite</strong><span>~/.agentforge</span></div>
 </div>
 </div>
 </section>
 
-<!-- API REFERENCE -->
-<section id="api">
+<section class="section alt" id="integrations">
 <div class="container">
-<h2 class="section-title fade-in-up">Full REST API</h2>
-<p class="section-sub fade-in-up">All endpoints at <code style="font-family:var(--font-mono);color:var(--cyan);font-size:.9rem">localhost:9712/api</code></p>
-<div class="api-table-wrap fade-in-up">
-<table class="api-table">
-<thead><tr><th>Method</th><th>Endpoint</th><th>Description</th></tr></thead>
-<tbody>
-<tr><td><span class="method get">GET</span></td><td class="endpoint">/api/tasks</td><td class="desc">List all tasks</td></tr>
-<tr><td><span class="method get">GET</span></td><td class="endpoint">/api/tasks/:id</td><td class="desc">Get a single task</td></tr>
-<tr><td><span class="method get">GET</span></td><td class="endpoint">/api/tasks/:id/runs</td><td class="desc">Get run history</td></tr>
-<tr><td><span class="method get">GET</span></td><td class="endpoint">/api/tasks/:id/output</td><td class="desc">Get task output</td></tr>
-<tr><td><span class="method get">GET</span></td><td class="endpoint">/api/tasks/:id/events</td><td class="desc">Stream output events</td></tr>
-<tr><td><span class="method post">POST</span></td><td class="endpoint">/api/tasks</td><td class="desc">Create a task</td></tr>
-<tr><td><span class="method post">POST</span></td><td class="endpoint">/api/tasks/:id/cancel</td><td class="desc">Cancel a task</td></tr>
-<tr><td><span class="method post">POST</span></td><td class="endpoint">/api/tasks/:id/retry</td><td class="desc">Retry a task</td></tr>
-<tr><td><span class="method delete">DELETE</span></td><td class="endpoint">/api/tasks/:id</td><td class="desc">Delete a task</td></tr>
-<tr><td><span class="method get">GET</span></td><td class="endpoint">/api/health</td><td class="desc">Health check</td></tr>
-</tbody>
-</table>
-</div>
-<div class="code-block fade-in-up" style="margin-top:40px">
-<div class="code-header"><span>curl</span><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>
-<pre><span class="cmt"># Create a new task</span>
-<span class="fn">curl</span> <span class="flag">-X POST</span> http://127.0.0.1:9712/api/tasks \
-  <span class="flag">-H</span> <span class="str">"Content-Type: application/json"</span> \
-  <span class="flag">-d</span> <span class="str">'{
-    "title": "Review auth module",
-    "prompt": "Review the authentication module for security issues",
-    "working_dir": "~/projects/myapp",
-    "schedule_type": "immediate"
-  }'</span></pre>
+<div class="section-header">
+<div class="eyebrow fade-in-up">Remote control, local execution</div>
+<h2 class="section-title fade-in-up">Start work from the places you already talk.</h2>
+<p class="section-sub fade-in-up">Optional bridges can create and monitor tasks while AgentForge still runs the work locally on your Mac.</p>
+</div>
+<div class="integrations-grid">
+<article class="integration-card fade-in-up"><h3>Telegram</h3><p>Send prompts to the bot, get task links and result summaries back.</p></article>
+<article class="integration-card fade-in-up"><h3>Slack</h3><p>Socket Mode events for task creation and status updates in channels.</p></article>
+<article class="integration-card fade-in-up"><h3>Feishu / Lark</h3><p>Long-connection support without exposing your machine to the public internet.</p></article>
+<article class="integration-card fade-in-up"><h3>WeChat</h3><p>Experimental local bridge for messaging-driven task creation.</p></article>
 </div>
 </div>
 </section>
 
-<!-- QUICK START -->
-<section id="quickstart">
+<section class="section" id="quickstart">
 <div class="container">
-<h2 class="section-title fade-in-up">Get started in minutes</h2>
-<p class="section-sub fade-in-up">Three steps to your first agent-powered workflow.</p>
-<div class="steps">
-<div class="step-card fade-in-up">
-<div class="step-num">1</div>
-<h3>Download</h3>
-<p>Grab the latest AgentForge DMG from the releases page. Requires macOS 12+ on Apple Silicon.</p>
-</div>
-<div class="step-card fade-in-up">
-<div class="step-num">2</div>
-<h3>Install</h3>
-<p>Drag AgentForge to your Applications folder. The app bundles its own Bun-compiled backend &mdash; no extra setup.</p>
-</div>
-<div class="step-card fade-in-up">
-<div class="step-num">3</div>
-<h3>Launch</h3>
-<p>Open AgentForge, point it at your project directory, and start creating tasks for Claude Code or Codex agents.</p>
+<div class="section-header">
+<div class="eyebrow fade-in-up">Quick Start</div>
+<h2 class="section-title fade-in-up">Install it, point it at a repo, start delegating.</h2>
+<p class="section-sub fade-in-up">AgentForge is MIT licensed and runs as a local macOS app.</p>
 </div>
+<div class="quick-grid">
+<article class="step-card fade-in-up"><div class="step-num">1</div><h3>Download</h3><p>Grab the latest AgentForge DMG from GitHub Releases for Apple Silicon Macs.</p></article>
+<article class="step-card fade-in-up"><div class="step-num">2</div><h3>Install</h3><p>Drag AgentForge into Applications. The app bundles its compiled Bun backend.</p></article>
+<article class="step-card fade-in-up"><div class="step-num">3</div><h3>Run agents</h3><p>Choose a working directory, select Claude Code or Codex CLI, and schedule the task.</p></article>
 </div>
 <div class="code-block fade-in-up">
 <div class="code-header"><span>Build from source</span><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>
-<pre><span class="cmt"># Clone and build</span>
-<span class="fn">git</span> clone https://github.com/hetaoBackend/agentforge.git
-<span class="fn">cd</span> agentforge
-
-<span class="cmt"># Install dependencies</span>
-<span class="fn">uv</span> sync
-<span class="fn">cd</span> taskboard-electron && <span class="fn">npm</span> install && <span class="fn">cd</span> ..
+<pre><span class="comment"># Clone and run the Electron app</span>
+<span class="cmd">git</span> clone https://github.com/hetaoBackend/agentforge.git
+<span class="cmd">cd</span> agentforge/taskboard-electron
+<span class="cmd">bun</span> install --ignore-scripts
+<span class="cmd">bun</span> run start
 
-<span class="cmt"># Start the dev server</span>
-<span class="fn">cd</span> taskboard-electron && <span class="fn">npm</span> start</pre>
+<span class="comment"># Build the distributable DMG</span>
+<span class="cmd">bun</span> run make</pre>
 </div>
 </div>
 </section>
+</main>
 
-<!-- FOOTER -->
 <footer>
-<div class="container">
-<div class="footer-inner">
-<div class="footer-brand">
-<a href="#" class="nav-brand" style="font-size:.95rem">
-<svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2L4 8v4l10 6 10-6V8L14 2z" fill="#7c6aff" opacity=".3"/><path d="M4 12v4l10 6 10-6v-4L14 18 4 12z" fill="#7c6aff" opacity=".6"/><path d="M4 16v4l10 6 10-6v-4L14 22 4 16z" fill="#7c6aff"/></svg>
-AgentForge
-</a>
-<span class="tagline">Orchestrate AI agents like infrastructure.</span>
-</div>
+<div class="container footer-inner">
+<a href="#" class="brand"><img src="taskboard-electron/assets/agentforge.png" alt=""><span>AgentForge</span></a>
 <div class="footer-links">
 <a href="https://github.com/hetaoBackend/agentforge">GitHub</a>
-<a href="#api">API Docs</a>
 <a href="#features">Features</a>
+<a href="#architecture">Architecture</a>
+<a href="#quickstart">Quick Start</a>
 </div>
 <div class="footer-copy">MIT License &copy; 2026 AgentForge contributors</div>
 </div>
-</div>
 </footer>
 
-<!-- TOAST -->
 <div class="toast" id="toast">Copied to clipboard</div>
 
-<!-- JAVASCRIPT -->
 <script>
-// IntersectionObserver for fade-in-up animations
 (function() {
   var observer = new IntersectionObserver(function(entries) {
     entries.forEach(function(entry) {
@@ -522,47 +451,43 @@ <h3>Launch</h3>
         observer.unobserve(entry.target);
       }
     });
-  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+  }, { threshold: 0.1, rootMargin: '0px 0px -32px 0px' });
 
   document.querySelectorAll('.fade-in-up').forEach(function(el) {
     observer.observe(el);
   });
 })();
 
-// Copy to clipboard with toast feedback
 function copyCode(btn) {
   var pre = btn.closest('.code-block').querySelector('pre');
   var text = pre.textContent || pre.innerText;
   navigator.clipboard.writeText(text).then(function() {
     var toast = document.getElementById('toast');
     toast.classList.add('show');
-    btn.textContent = 'Copied!';
-    btn.style.borderColor = 'var(--green)';
-    btn.style.color = 'var(--green)';
+    btn.textContent = 'Copied';
     setTimeout(function() {
       toast.classList.remove('show');
       btn.textContent = 'Copy';
-      btn.style.borderColor = '';
-      btn.style.color = '';
-    }, 2000);
+    }, 1700);
   });
 }
 
-// Smooth scroll for nav links (fallback for browsers without CSS smooth scroll)
 document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
-  anchor.addEventListener('click', function(e) {
+  anchor.addEventListener('click', function(event) {
     var target = document.querySelector(this.getAttribute('href'));
-    if (target) {
-      e.preventDefault();
-      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      // Close mobile menu if open
-      var navLinks = document.querySelector('.nav-links');
-      if (window.innerWidth <= 768) {
-        navLinks.style.display = 'none';
-      }
-    }
+    if (!target) return;
+    event.preventDefault();
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    document.querySelector('.nav-links').classList.remove('open');
+    document.querySelector('.hamburger').setAttribute('aria-expanded', 'false');
   });
 });
+
+document.querySelector('.hamburger').addEventListener('click', function() {
+  var links = document.querySelector('.nav-links');
+  var open = links.classList.toggle('open');
+  this.setAttribute('aria-expanded', String(open));
+});
 </script>
 </body>
 </html>
