Files
clawd/antfarm/landing/dashboard-mockup-detail.html
Echo dc64d18224 fix: convert antfarm from broken submodule to regular directory
Fixes Gitea 500 error caused by invalid submodule reference.
Converted antfarm from pseudo-submodule (missing .gitmodules) to
regular directory with all source files.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-11 16:03:37 +00:00

279 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Antfarm Dashboard</title>
<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=Inter:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#FAF8F5;color:#3A3226;min-height:100vh}
header{background:#6B7F3B;border-bottom:2px solid #5a6b32;padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
header h1{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:#fff;letter-spacing:0}
header h1 span{color:#D4E8A0}
select{background:#5a6b32;color:#fff;border:1px solid #4a5a28;border-radius:6px;padding:6px 12px;font-size:14px;cursor:pointer}
select:focus{outline:none;border-color:#8ECFC0}
.board{display:flex;gap:16px;padding:24px;overflow-x:auto;min-height:calc(100vh - 65px)}
.column{min-width:220px;flex:1;background:#fff;border:none;border-radius:8px;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(58,50,38,.1)}
.column-header{padding:12px 16px;border-bottom:1px solid #eee;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6B7F3B;background:#f5f0e8;border-radius:8px 8px 0 0}
.column-header .count{background:#6B7F3B;color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;margin-left:8px}
.cards{padding:8px;flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.card{background:#FAF8F5;border:1px solid #D4C4A0;border-radius:6px;padding:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:#E8845C;box-shadow:0 2px 8px rgba(232,132,92,.15)}
.card.done{border-left:3px solid #6B7F3B}
.card.failed{border-left:3px solid #E8845C}
.card-title{font-size:13px;font-weight:500;color:#3A3226;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-meta{font-size:11px;color:#8b8072;display:flex;justify-content:space-between;align-items:center}
.badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.badge-running{background:#8ECFC033;color:#3a9e8a}
.badge-done{background:#6B7F3B22;color:#6B7F3B}
.badge-failed{background:#E8845C22;color:#d4603a}
.badge-pending{background:#D4C4A044;color:#8b8072}
.empty{color:#8b8072;font-size:12px;text-align:center;padding:24px 8px}
.refresh-note{color:rgba(255,255,255,.6);font-size:11px;margin-left:auto}
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(58,50,38,.5);z-index:100;display:flex;align-items:center;justify-content:center;opacity:1;pointer-events:auto}
.panel{background:#fff;border:1px solid #D4C4A0;border-radius:12px;width:90%;max-width:640px;max-height:85vh;overflow-y:auto;padding:24px;position:relative;box-shadow:0 8px 32px rgba(58,50,38,.15)}
.panel-close{position:absolute;top:12px;right:16px;background:none;border:none;color:#8b8072;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}
.panel-close:hover{color:#3A3226;background:#f5f0e8}
.panel h2{font-size:16px;font-weight:600;color:#3A3226;margin-bottom:4px;padding-right:40px}
.panel-task{font-size:13px;color:#8b8072;margin-bottom:16px;line-height:1.5}
.panel-meta{display:flex;gap:12px;margin-bottom:20px;font-size:12px;color:#8b8072;flex-wrap:wrap}
.panel-meta span{display:flex;align-items:center;gap:4px}
.steps-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.step-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#FAF8F5;border:1px solid #D4C4A0;border-radius:6px}
.step-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.step-icon.done{background:#6B7F3B22;color:#6B7F3B}
.step-icon.running{background:#8ECFC033;color:#3a9e8a}
.step-icon.pending{background:#D4C4A044;color:#8b8072}
.step-name{font-size:13px;font-weight:500;color:#3A3226;flex:1}
.step-agent{font-size:11px;color:#8b8072;font-family:'Geist Mono',monospace}
.step-status{font-size:11px;text-transform:uppercase;font-weight:600}
.stories-section{border-top:1px solid #D4C4A0;padding-top:20px}
.stories-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.stories-header h3{font-size:15px;font-weight:600;color:#3A3226}
.stories-header span{font-size:13px;font-weight:600;color:#6B7F3B}
.progress-bar{background:#D4C4A044;border-radius:4px;height:8px;margin-bottom:16px;overflow:hidden}
.progress-fill{background:#6B7F3B;height:100%;border-radius:4px}
.story-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#FAF8F5;border:1px solid #D4C4A0;border-radius:6px;margin-bottom:6px}
.story-name{font-size:13px;font-weight:500;color:#3A3226;flex:1}
</style>
</head>
<body>
<header>
<h1><span>antfarm</span> dashboard</h1>
<select><option>feature-dev</option></select>
<span class="refresh-note">Auto-refresh: 30s</span>
</header>
<div class="board">
<div class="column">
<div class="column-header">plan<span class="count">3</span></div>
<div class="cards">
<div class="card done"><div class="card-title">Add user authentication with OAuth</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 10:02 AM</span></div></div>
<div class="card done"><div class="card-title">Refactor payment processing pipeline</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 9:45 AM</span></div></div>
<div class="card done"><div class="card-title">Add webhook retry with exponential backoff</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 8:30 AM</span></div></div>
</div>
</div>
<div class="column">
<div class="column-header">setup<span class="count">2</span></div>
<div class="cards">
<div class="card done"><div class="card-title">Add user authentication with OAuth</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 10:14 AM</span></div></div>
<div class="card done"><div class="card-title">Refactor payment processing pipeline</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 9:58 AM</span></div></div>
</div>
</div>
<div class="column">
<div class="column-header">implement<span class="count">3</span></div>
<div class="cards">
<div class="card"><div class="card-title">Add user authentication with OAuth</div><div class="card-meta"><span class="badge badge-running">running</span><span>Stories: 5/7</span></div></div>
<div class="card"><div class="card-title">Refactor payment processing pipeline</div><div class="card-meta"><span class="badge badge-running">running</span><span>Stories: 2/5</span></div></div>
<div class="card"><div class="card-title">Add webhook retry with exponential backoff</div><div class="card-meta"><span class="badge badge-pending">pending</span><span>Feb 9, 8:31 AM</span></div></div>
</div>
</div>
<div class="column">
<div class="column-header">verify<span class="count">2</span></div>
<div class="cards">
<div class="card"><div class="card-title">Migrate database to connection pooling</div><div class="card-meta"><span class="badge badge-running">running</span><span>Feb 9, 9:22 AM</span></div></div>
<div class="card"><div class="card-title">Add rate limiting to public API endpoints</div><div class="card-meta"><span class="badge badge-pending">pending</span><span>Feb 9, 9:10 AM</span></div></div>
</div>
</div>
<div class="column">
<div class="column-header">test<span class="count">2</span></div>
<div class="cards">
<div class="card"><div class="card-title">Add real-time notifications via WebSockets</div><div class="card-meta"><span class="badge badge-running">running</span><span>Feb 9, 8:55 AM</span></div></div>
<div class="card failed"><div class="card-title">Implement team invitation flow</div><div class="card-meta"><span class="badge badge-failed">failed</span><span>Retry 2/3</span></div></div>
</div>
</div>
<div class="column">
<div class="column-header">PR<span class="count">2</span></div>
<div class="cards">
<div class="card"><div class="card-title">Add CSV export for billing reports</div><div class="card-meta"><span class="badge badge-running">running</span><span>Feb 9, 8:40 AM</span></div></div>
<div class="card done"><div class="card-title">Add audit logging for admin actions</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 7:15 AM</span></div></div>
</div>
</div>
<div class="column">
<div class="column-header">review<span class="count">3</span></div>
<div class="cards">
<div class="card"><div class="card-title">Add RBAC with role hierarchy</div><div class="card-meta"><span class="badge badge-running">running</span><span>Feb 9, 7:50 AM</span></div></div>
<div class="card done"><div class="card-title">Implement SSO with SAML 2.0</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 9, 6:30 AM</span></div></div>
<div class="card done"><div class="card-title">Add dark mode support</div><div class="card-meta"><span class="badge badge-done">done</span><span>Feb 8, 11:45 PM</span></div></div>
</div>
</div>
</div>
<!-- Detail panel overlay -->
<div class="overlay">
<div class="panel">
<button class="panel-close"></button>
<h2>feature-dev</h2>
<div class="panel-task">Add user authentication with OAuth</div>
<div class="panel-meta">
<span><span class="badge badge-running">running</span></span>
<span>Created: Feb 9, 9:58 AM</span>
<span>Updated: Feb 9, 10:41 AM</span>
</div>
<div class="steps-list">
<div class="step-row">
<div class="step-icon done"></div>
<div class="step-name">plan</div>
<div class="step-agent">planner</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="step-row">
<div class="step-icon done"></div>
<div class="step-name">setup</div>
<div class="step-agent">setup</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="step-row">
<div class="step-icon running"></div>
<div class="step-name">implement</div>
<div class="step-agent">developer</div>
<div class="step-status"><span class="badge badge-running">running</span></div>
</div>
<div class="step-row">
<div class="step-icon pending"></div>
<div class="step-name">verify</div>
<div class="step-agent">verifier</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="step-row">
<div class="step-icon pending"></div>
<div class="step-name">test</div>
<div class="step-agent">tester</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="step-row">
<div class="step-icon pending"></div>
<div class="step-name">pr</div>
<div class="step-agent">developer</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="step-row">
<div class="step-icon pending"></div>
<div class="step-name">review</div>
<div class="step-agent">reviewer</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
</div>
<div class="stories-section">
<div class="stories-header">
<h3>Stories</h3>
<span>6 / 12 done</span>
</div>
<div class="progress-bar"><div class="progress-fill" style="width:50%"></div></div>
<div class="story-row">
<div class="step-icon done"></div>
<div class="story-name">S-1: Create OAuth provider configuration module</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="story-row">
<div class="step-icon done"></div>
<div class="story-name">S-2: Implement Google OAuth callback handler</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="story-row">
<div class="step-icon done"></div>
<div class="story-name">S-3: Implement GitHub OAuth callback handler</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="story-row" style="flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden">
<div style="display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer">
<div class="step-icon done"></div>
<div class="story-name" style="flex:1">S-4: Add JWT token generation and validation</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
<span style="color:#8b8072;font-size:10px;display:inline-block;transform:rotate(90deg)"></span>
</div>
<div style="padding:0 12px 12px 44px;font-size:12px;color:#5a5045;line-height:1.6">
<div style="margin-bottom:8px">Generate signed JWT tokens on login, validate on every protected request. Support configurable expiry and issuer claims.</div>
<div style="margin-bottom:8px">
<div style="font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:#6B7F3B;margin-bottom:4px">Acceptance Criteria</div>
<label style="display:flex;align-items:flex-start;gap:6px;margin-bottom:3px;cursor:default"><span style="color:#6B7F3B;flex-shrink:0"></span><span>JWT signed with RS256 using configurable secret</span></label>
<label style="display:flex;align-items:flex-start;gap:6px;margin-bottom:3px;cursor:default"><span style="color:#6B7F3B;flex-shrink:0"></span><span>Token includes user ID, email, roles, exp, iat, iss claims</span></label>
<label style="display:flex;align-items:flex-start;gap:6px;margin-bottom:3px;cursor:default"><span style="color:#6B7F3B;flex-shrink:0"></span><span>Validation middleware rejects expired and malformed tokens</span></label>
<label style="display:flex;align-items:flex-start;gap:6px;margin-bottom:3px;cursor:default"><span style="color:#6B7F3B;flex-shrink:0"></span><span>Refresh token rotation implemented with reuse detection</span></label>
<label style="display:flex;align-items:flex-start;gap:6px;margin-bottom:3px;cursor:default"><span style="color:#6B7F3B;flex-shrink:0"></span><span>Unit tests cover generation, validation, expiry, and invalid signatures</span></label>
</div>
</div>
</div>
<div class="story-row">
<div class="step-icon done"></div>
<div class="story-name">S-5: Create session middleware with refresh tokens</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="story-row">
<div class="step-icon done"></div>
<div class="story-name">S-6: Build user profile merge for linked accounts</div>
<div class="step-status"><span class="badge badge-done">done</span></div>
</div>
<div class="story-row">
<div class="step-icon running"></div>
<div class="story-name">S-7: Add CSRF protection to auth endpoints</div>
<div class="step-status"><span class="badge badge-running">running</span></div>
</div>
<div class="story-row">
<div class="step-icon pending"></div>
<div class="story-name">S-8: Implement account lockout after failed attempts</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="story-row">
<div class="step-icon pending"></div>
<div class="story-name">S-9: Add OAuth scope permission UI</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="story-row">
<div class="step-icon pending"></div>
<div class="story-name">S-10: Create auth error handling and user feedback</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="story-row">
<div class="step-icon pending"></div>
<div class="story-name">S-11: Add logout with token revocation</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
<div class="story-row">
<div class="step-icon pending"></div>
<div class="story-name">S-12: Write auth integration tests</div>
<div class="step-status"><span class="badge badge-pending">pending</span></div>
</div>
</div>
</div>
</div>
</body>
</html>