e6685203fe
- Added REPO_INVENTORY.md with all repos, branches, remotes, and staging info - Added .gitignore - Synced all existing docs from local workspace - Centralized documentation hub for GrowQR team
90 lines
11 KiB
HTML
90 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>GrowQR — Linear System Flow</title>
|
|
<style>
|
|
:root {
|
|
--bg:#080c14; --panel:#101827; --card:#162132; --card2:#111a28; --border:#26364d;
|
|
--text:#e5edf8; --muted:#92a3b8; --blue:#60a5fa; --purple:#a78bfa; --green:#34d399;
|
|
--amber:#fbbf24; --rose:#fb7185; --cyan:#22d3ee; --line:#52647c;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{min-height:100vh;background:radial-gradient(circle at top,#121a2b 0,#080c14 55%);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:42px 28px 70px}
|
|
header{text-align:center;margin-bottom:32px}
|
|
h1{font-size:2.35rem;letter-spacing:-.04em;margin-bottom:10px}.grad{background:linear-gradient(135deg,var(--blue),var(--purple),var(--cyan));-webkit-background-clip:text;color:transparent}
|
|
header p{color:var(--muted);font-size:1.05rem;max-width:860px;margin:auto;line-height:1.55}
|
|
.shell{max-width:1480px;margin:0 auto;background:rgba(16,24,39,.82);border:1px solid var(--border);border-radius:22px;padding:32px;box-shadow:0 24px 90px rgba(0,0,0,.45);position:relative;overflow:hidden}
|
|
.shell:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(96,165,250,.06),transparent 18%,transparent 82%,rgba(251,191,36,.05));pointer-events:none}
|
|
.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;position:relative;z-index:2}.pill{border:1px solid var(--border);background:#0d1421;border-radius:999px;padding:8px 13px;color:var(--muted);font-size:.78rem}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
|
|
.flow{position:relative;z-index:2;display:grid;grid-template-columns:repeat(8,minmax(135px,1fr));gap:14px;align-items:stretch;margin-bottom:32px}
|
|
.step{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:16px;padding:18px 16px;min-height:220px;position:relative;box-shadow:0 12px 26px rgba(0,0,0,.18)}
|
|
.step:after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:var(--line);font-size:25px;font-weight:700;z-index:3}.step:last-child:after{display:none}
|
|
.num{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;margin-bottom:12px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
|
|
.step h3{font-size:.98rem;margin-bottom:10px;line-height:1.25}.step p{font-size:.79rem;color:var(--muted);line-height:1.45;margin-bottom:12px}.step ul{list-style:none;color:var(--muted);font-size:.76rem;line-height:1.65}.step li{display:flex;gap:7px}.step li:before{content:"•";opacity:.65}.blue{border-color:rgba(96,165,250,.36)}.blue .num{color:var(--blue);background:rgba(96,165,250,.12)}.purple{border-color:rgba(167,139,250,.38)}.purple .num{color:var(--purple);background:rgba(167,139,250,.12)}.green{border-color:rgba(52,211,153,.36)}.green .num{color:var(--green);background:rgba(52,211,153,.12)}.amber{border-color:rgba(251,191,36,.38)}.amber .num{color:var(--amber);background:rgba(251,191,36,.12)}.rose{border-color:rgba(251,113,133,.36)}.rose .num{color:var(--rose);background:rgba(251,113,133,.12)}.cyan{border-color:rgba(34,211,238,.36)}.cyan .num{color:var(--cyan);background:rgba(34,211,238,.12)}
|
|
.swimlanes{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1.25fr 1.15fr;gap:18px;margin-top:24px}.lane{border:1px solid var(--border);border-radius:16px;background:rgba(13,20,33,.75);padding:20px}.lane h2{font-size:1rem;margin-bottom:14px}.lane-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(38,54,77,.75)}.lane-row:first-of-type{border-top:0}.badge{min-width:88px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.lane-row div:last-child{font-size:.82rem;color:var(--text);line-height:1.45}.muted{color:var(--muted)}
|
|
.callouts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.callout{background:#0d1421;border:1px solid var(--border);border-radius:14px;padding:16px}.callout h4{font-size:.86rem;margin-bottom:8px}.callout p{font-size:.76rem;color:var(--muted);line-height:1.45}
|
|
footer{text-align:center;color:var(--muted);font-size:.78rem;margin-top:28px}
|
|
@media(max-width:1200px){.flow{grid-template-columns:repeat(4,1fr)}.step:nth-child(4):after{content:"↓";right:50%;top:auto;bottom:-24px}.step:nth-child(5):before{content:""}.swimlanes,.callouts{grid-template-columns:1fr 1fr}}
|
|
@media(max-width:760px){body{padding:24px 14px}.shell{padding:20px}.flow,.swimlanes,.callouts{grid-template-columns:1fr}.step:after{content:"↓";right:50%;top:auto;bottom:-24px}.step:last-child:after{display:none}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1><span class="grad">GrowQR</span> End-to-End System Flow</h1>
|
|
<p>A linear view of how a user request moves through the product: from interactive client, through auth and durable agent orchestration, into sandboxed execution, domain tools, versioned memory, and back to the UI.</p>
|
|
</header>
|
|
<div class="shell">
|
|
<div class="legend">
|
|
<span class="pill"><span class="dot" style="background:var(--blue)"></span>Client / Gateway</span>
|
|
<span class="pill"><span class="dot" style="background:var(--purple)"></span>Durable Control</span>
|
|
<span class="pill"><span class="dot" style="background:var(--green)"></span>Runtime Execution</span>
|
|
<span class="pill"><span class="dot" style="background:var(--cyan)"></span>Domain Tools</span>
|
|
<span class="pill"><span class="dot" style="background:var(--amber)"></span>Versioned Memory</span>
|
|
<span class="pill"><span class="dot" style="background:var(--rose)"></span>System DB</span>
|
|
</div>
|
|
|
|
<section class="flow">
|
|
<article class="step blue"><div class="num">1</div><h3>User Interaction</h3><p>User opens a channel, thread, quest, or agent module.</p><ul><li>Chat-first interface</li><li>Generated UI cards</li><li>Realtime progress surface</li></ul></article>
|
|
<article class="step blue"><div class="num">2</div><h3>Gateway Bootstrap</h3><p>Stateless backend validates identity and prepares the session.</p><ul><li>Auth/session verification</li><li>Billing/entitlement checks</li><li>Repo + actor lookup</li></ul></article>
|
|
<article class="step purple"><div class="num">3</div><h3>Actor Connection</h3><p>Client connects to the durable control plane for live orchestration.</p><ul><li>WebSocket event stream</li><li>Actor key routing</li><li>Per-user state hydration</li></ul></article>
|
|
<article class="step purple"><div class="num">4</div><h3>Intent Routing</h3><p>The control plane maps intent to a thread, quest workflow, or specialized agent.</p><ul><li>Thread/session state</li><li>Quest workflow state</li><li>Runtime lifecycle decision</li></ul></article>
|
|
<article class="step green"><div class="num">5</div><h3>Sandbox Startup</h3><p>An isolated execution environment is created or resumed.</p><ul><li>Per-user/runtime isolation</li><li>Workspace/worktree mount</li><li>Agent harness session</li></ul></article>
|
|
<article class="step green"><div class="num">6</div><h3>Agent Execution</h3><p>The runtime performs reasoning, tool selection, file operations, and progress streaming.</p><ul><li>Sub-agent delegation</li><li>File/read/write/bash tools</li><li>Incremental UI events</li></ul></article>
|
|
<article class="step cyan"><div class="num">7</div><h3>Domain Tool Calls</h3><p>Existing services are invoked as controlled tools, not as direct frontend destinations.</p><ul><li>Interview / Roleplay</li><li>Pathways / Q-Score</li><li>Social & matching tools</li></ul></article>
|
|
<article class="step amber"><div class="num">8</div><h3>Memory Commit</h3><p>Outputs become versioned memory and indexed system metadata.</p><ul><li>Markdown/JSON memory files</li><li>Diff, commit, merge</li><li>DB pointers + indexes</li></ul></article>
|
|
</section>
|
|
|
|
<section class="swimlanes">
|
|
<div class="lane">
|
|
<h2 class="blue">Request Path</h2>
|
|
<div class="lane-row"><span class="badge">Initial</span><div>Client calls the gateway for auth, provisioning, and actor connection details.</div></div>
|
|
<div class="lane-row"><span class="badge">Realtime</span><div>Client then communicates with the durable control plane over live events/actions.</div></div>
|
|
<div class="lane-row"><span class="badge">Return</span><div>Progress, tool activity, generated UI modules, and final artifacts stream back to the client.</div></div>
|
|
</div>
|
|
<div class="lane">
|
|
<h2 class="purple">Control Responsibilities</h2>
|
|
<div class="lane-row"><span class="badge">Actors</span><div>Hold small durable state: active threads, quest runs, runtime handles, recovery pointers.</div></div>
|
|
<div class="lane-row"><span class="badge">Workflow</span><div>Serialize long-running work, resume after restarts, coordinate runtime and memory commits.</div></div>
|
|
<div class="lane-row"><span class="badge">Security</span><div>Control which user, actor, runtime, repo, and service calls are allowed.</div></div>
|
|
</div>
|
|
<div class="lane">
|
|
<h2 class="green">Execution & Persistence</h2>
|
|
<div class="lane-row"><span class="badge">Runtime</span><div>Ephemeral sandbox runs the agent harness and tool execution. It can be killed/restarted.</div></div>
|
|
<div class="lane-row"><span class="badge">Memory</span><div>Git-backed files are the durable user memory and audit trail.</div></div>
|
|
<div class="lane-row"><span class="badge">DB</span><div>Relational storage keeps product metadata, indexes, recovery pointers, and billing/account records.</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="callouts">
|
|
<div class="callout"><h4 class="purple">Why actors?</h4><p>They provide durable, addressable entities for users, threads, quests, runtimes, and score updates without rebuilding locking and recovery in the gateway.</p></div>
|
|
<div class="callout"><h4 class="green">Why sandbox?</h4><p>Agent execution can run file tools, shell commands, plugins, and service calls in an isolated, disposable runtime.</p></div>
|
|
<div class="callout"><h4 class="amber">Why Git memory?</h4><p>User context becomes inspectable, versioned, diffable, reversible, and portable across runtime restarts and upgrades.</p></div>
|
|
<div class="callout"><h4 class="rose">Why DB too?</h4><p>The database is not the agent memory. It is the operational index for accounts, pointers, subscriptions, recovery, and fast dashboard queries.</p></div>
|
|
</section>
|
|
</div>
|
|
<footer>GrowQR — Linear architecture flow · Client → Gateway → Durable Control → Sandbox Runtime → Tools → Memory → UI</footer>
|
|
</body>
|
|
</html>
|