-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
345 lines (321 loc) · 20 KB
/
Copy pathindex.html
File metadata and controls
345 lines (321 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>8sync — terminal-first AI coding harness</title>
<meta name="description" content="8sync: terminal-first AI coding harness for CachyOS/Arch + Kitty + Helix + omp. Keep your normal terminal workflow; AI observes project context and executes when you ask." />
<meta property="og:title" content="8sync — terminal-first AI coding harness" />
<meta property="og:description" content="Keep your normal terminal workflow; AI agents observe project context, load agents/* memory, execute tasks on demand." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://8-sync-dev.github.io/su-code/" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%E2%9A%A1%3C/text%3E%3C/svg%3E" />
<style>
:root {
--bg: #0a0e1c;
--bg2: #0f1428;
--card: rgba(255,255,255,0.04);
--card-hover: rgba(255,255,255,0.07);
--line: rgba(255,255,255,0.10);
--line-strong: rgba(255,255,255,0.18);
--txt: #e8edf7;
--muted: #97a4c4;
--dim: #6b7796;
--pri: #5eead4;
--pri2: #60a5fa;
--accent: #a78bfa;
--good: #22d3ee;
--code-bg: rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color: var(--txt);
background:
radial-gradient(1000px 500px at 10% -10%, rgba(94,234,212,.16), transparent 60%),
radial-gradient(950px 520px at 100% 0%, rgba(96,165,250,.18), transparent 60%),
radial-gradient(700px 400px at 50% 100%, rgba(167,139,250,.12), transparent 70%),
var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }
/* Header */
.top { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom: 28px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-0.01em; }
.logo-mark { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--pri),var(--pri2)); display:grid; place-items:center; color:#06111f; font-weight:900; }
.nav { display:flex; gap:18px; flex-wrap:wrap; }
.nav a { color:var(--muted); text-decoration:none; font-size:14px; }
.nav a:hover { color:var(--txt); }
/* Hero */
.hero { padding: 16px 0 8px; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border:1px solid var(--line-strong); border-radius:999px; color:var(--muted); font-size:13px; }
.eyebrow b { color:var(--pri); }
h1 { margin: 18px 0 14px; font-size: clamp(32px, 6.2vw, 56px); line-height:1.05; letter-spacing:-0.02em; }
h1 .grad { background: linear-gradient(90deg,var(--pri),var(--pri2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { color:var(--muted); max-width:780px; font-size:17px; }
.cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:10px; text-decoration:none; font-weight:700; font-size:14px; transition: transform .12s ease, box-shadow .2s ease; }
.btn.primary { color:#06111f; background: linear-gradient(90deg,var(--pri),var(--pri2)); box-shadow: 0 8px 22px -10px rgba(94,234,212,.4); }
.btn.primary:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--txt); border:1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--card); }
/* Feature grid */
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:36px; }
.card { background: var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; transition: background .15s ease, border-color .15s ease; }
.card:hover { background: var(--card-hover); border-color: var(--line-strong); }
.card h3 { margin:0 0 8px; font-size:16px; display:flex; align-items:center; gap:8px; }
.card h3 .dot { width:8px; height:8px; border-radius:99px; background:var(--pri); box-shadow:0 0 12px var(--pri); }
.card p { margin:0; color: var(--muted); font-size:14px; }
/* Sections */
section { margin-top: 56px; scroll-margin-top: 20px; }
section > h2 { margin: 0 0 6px; font-size:24px; letter-spacing:-0.01em; }
section > .lede { color:var(--muted); margin: 0 0 18px; font-size:15px; }
/* Code blocks */
code { background: rgba(255,255,255,.08); padding:2px 6px; border-radius:6px; font-size:0.92em; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { background: var(--code-bg); border:1px solid var(--line); padding:16px 18px; border-radius:12px; overflow:auto; margin:0; font-size:13.5px; line-height:1.6; }
pre code { background: transparent; padding:0; font-size:inherit; }
.codeblock { position:relative; }
.codeblock .lbl { position:absolute; top:10px; right:14px; font-size:11px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; }
/* Tables */
table { width:100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
td code { font-size: 12.5px; white-space: nowrap; }
/* Two-col rows */
.two { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
/* Footer */
footer { margin-top:56px; color:var(--muted); border-top:1px solid var(--line); padding-top:22px; font-size: 13px; display:flex; flex-wrap:wrap; gap:14px; justify-content: space-between; }
footer .tags { color: var(--dim); }
a { color: #9cd7ff; text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<main class="wrap">
<!-- HEADER -->
<div class="top">
<div class="logo">
<span class="logo-mark">8</span>
<span>8sync</span>
<span style="color:var(--dim); font-weight:400; font-size:13px;">· 8-Sync-Dev</span>
</div>
<nav class="nav">
<a href="#install">Install</a>
<a href="#dashboard">Dashboard</a>
<a href="#commands">Commands</a>
<a href="#skills">Skills</a>
<a href="#update">Update</a>
<a href="https://github.com/8-Sync-Dev/su-code">GitHub</a>
</nav>
</div>
<!-- HERO -->
<header class="hero">
<span class="eyebrow">⚡ <b>terminal-first</b> · AI coding harness</span>
<h1>Use the terminal as usual,<br/><span class="grad">AI observes from behind.</span></h1>
<p class="sub">
You still <code>cd</code>, code, build, and test from the CLI. AI agents (omp) follow project context, load <code>agents/*</code> memory, and execute tasks on demand.
</p>
<div class="cta">
<a class="btn primary" href="https://github.com/8-Sync-Dev/su-code">View on GitHub →</a>
<a class="btn ghost" href="#install">Quick start</a>
<a class="btn ghost" href="https://github.com/orgs/8-Sync-Dev/discussions">Community</a>
</div>
</header>
<!-- FEATURES -->
<section class="grid" style="margin-top:40px;">
<article class="card">
<h3><span class="dot"></span>Terminal-first</h3>
<p>No separate “AI terminal”. Your existing CLI workflow stays untouched — 8sync just wraps around it.</p>
</article>
<article class="card">
<h3><span class="dot"></span>Dashboard CRUD</h3>
<p><code>8sync harness web</code> opens a local page to view & edit the whole agent-team: models, skills, memory, rules, engines, <b>codebase graph</b> — written straight to config.</p>
</article>
<article class="card">
<h3><span class="dot"></span>Context-aware</h3>
<p>Whichever project you enter, the AI picks up its context. Memory is shared via <code>AGENTS.md</code> + <code>agents/*</code>. <code>8sync harness</code> builds it all with one command.</p>
</article>
<article class="card">
<h3><span class="dot"></span>Skill injection</h3>
<p><b>35 skills</b> bundled. <code>8sync skill add <github-url></code> clones into both the global <code>~/.omp/skills/</code> and the project's <code>agents/skills/</code>.</p>
</article>
</section>
<!-- INSTALL -->
<section id="install">
<h2>Quick start</h2>
<p class="lede">CachyOS / Arch Linux, Kitty terminal (enable <code>allow_remote_control yes</code> for the 3-pane layout).</p>
<div class="codeblock">
<span class="lbl">bash</span>
<pre><code># 1. Install — one-liner, prebuilt binary (NO git/rust/cargo needed)
curl -fsSL https://raw.githubusercontent.com/8-Sync-Dev/su-code/main/install.sh | sh
8sync setup # AI core: omp + codegraph + MCP/skills + gh (y/N per profile)
8sync doctor # verify
# 2. Enter a project → build the harness with one command (idempotent)
cd ~/code/my-app
8sync harness # skills + codegraph + AGENTS.md + memory
8sync . # open a session (kitty 3-pane + omp)
# 3. Dashboard — view + CRUD the whole agent-team from the browser
8sync harness web # → http://127.0.0.1:8731</code></pre>
</div>
<p class="lede" style="margin-top:14px;">
Build from source: <code>git clone … && bash scripts/bootstrap.sh</code>.
Common setup flags: <code>--dry-run</code>, <code>--no-profile</code>, <code>--community</code>, <code>--profile <name></code>.
</p>
</section>
<!-- DASHBOARD -->
<section id="dashboard">
<h2>Dashboard — <code>8sync harness web</code></h2>
<p class="lede">A local web app (axum + Vite/React, embedded in the binary) to <b>view and control the whole agent-team</b> from the browser instead of hand-editing config files. Every page reads real data; most support <b>CRUD written straight</b> to config/memory. Click any screenshot for the full-size PNG.</p>
<figure style="margin:20px 0 0;">
<a href="assets/dashboard-state.png"><img src="assets/dashboard-state.png" alt="State page — live plan of the current session" style="width:100%; border-radius:12px; border:1px solid var(--line); display:block;" /></a>
<figcaption style="color:var(--dim); font-size:13px; margin-top:8px; text-align:center;">State — the live plan of the current session.</figcaption>
</figure>
<div class="grid" style="margin-top:18px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));">
<article class="card" style="padding:10px;">
<a href="assets/dashboard-bench.png"><img src="assets/dashboard-bench.png" alt="Bench page — token-budget bench with upfront breakdown and spine advisory" style="width:100%; border-radius:8px; border:1px solid var(--line); display:block;" /></a>
<p style="margin:10px 4px 2px;">Bench — token-budget bench with upfront breakdown (prefix / CORE / memory-spine) + spine advisory.</p>
</article>
<article class="card" style="padding:10px;">
<a href="assets/dashboard-codegraph.png"><img src="assets/dashboard-codegraph.png" alt="Codegraph page — package call graph + Leiden clusters" style="width:100%; border-radius:8px; border:1px solid var(--line); display:block;" /></a>
<p style="margin:10px 4px 2px;">Codegraph — package call graph + Leiden clusters, symbol search, caller/callee tracing — live from codebase-memory-mcp.</p>
</article>
<article class="card" style="padding:10px;">
<a href="assets/dashboard-models.png"><img src="assets/dashboard-models.png" alt="Models page — adaptive model routing per role/task" style="width:100%; border-radius:8px; border:1px solid var(--line); display:block;" /></a>
<p style="margin:10px 4px 2px;">Models — adaptive model routing per role/task, written straight to <code>models.toml</code>.</p>
</article>
<article class="card" style="padding:10px;">
<a href="assets/dashboard-marketplace.png"><img src="assets/dashboard-marketplace.png" alt="Marketplace page — MCP + skills marketplace" style="width:100%; border-radius:8px; border:1px solid var(--line); display:block;" /></a>
<p style="margin:10px 4px 2px;">Marketplace — browse + one-click install MCP servers & skills (official registry, Smithery, Glama, mcp.so).</p>
</article>
</div>
<div class="two" style="margin-top:24px;">
<table>
<tbody>
<tr><td><b>Session</b></td><td>State (live plan) · Context (real token/compaction)</td></tr>
<tr><td><b>Configure</b></td><td>Models · Skills (filter + cycle tier) · Memory (edit 6 files) · Rules (add/remove)</td></tr>
<tr><td><b>Runtime</b></td><td>Engines · <b>Codegraph</b> graph · MCP · Submodules</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td><b>Quality</b></td><td>Bench (live runs) · Readiness · Team</td></tr>
<tr><td><b>Projects</b></td><td>Workspaces (project switcher)</td></tr>
<tr><td><b>Build</b></td><td>Workflow (build a pipeline → export as omp extension)</td></tr>
</tbody>
</table>
</div>
<div class="codeblock" style="margin-top:18px;">
<span class="lbl">bash</span>
<pre><code>8sync harness web # http://127.0.0.1:8731 (auto-opens the browser)
8sync harness web --port 9000 # change the port
8sync harness web --no-open # background / headless</code></pre>
</div>
</section>
<!-- COMMANDS -->
<section id="commands">
<h2>Core commands</h2>
<p class="lede">Every verb has <code>-h</code> / <code>--help</code> with an EXAMPLES block. Run <code>8sync</code> or <code>8sync help</code> for the cheatsheet.</p>
<div class="two">
<div>
<h3 style="font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px;">Vibe loop (daily)</h3>
<table>
<tbody>
<tr><td><code>8sync .</code></td><td>Open/attach a session (kitty 3-pane + <code>omp --continue</code> inside abduco)</td></tr>
<tr><td><code>8sync ai [prompt]</code></td><td>Empty → resume; with a prompt → one-shot <code>omp -p</code></td></tr>
<tr><td><code>8sync find <kw></code></td><td>rg/fd + fzf, opens the editor at <code>file:line</code></td></tr>
<tr><td><code>8sync note "msg"</code></td><td>Appends to <code>agents/NOTES.md</code></td></tr>
<tr><td><code>8sync run dev|build|test|fmt|lint</code></td><td>Recipe-based project runner</td></tr>
<tr><td><code>8sync ship "msg"</code></td><td><code>git add -A && commit && push && gh pr create</code></td></tr>
</tbody>
</table>
</div>
<div>
<h3 style="font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px;">Lifecycle & tools</h3>
<table>
<tbody>
<tr><td><code>8sync setup</code></td><td>Install the harness + pick profiles</td></tr>
<tr><td><code>8sync up</code></td><td>Self-update binary + <code>omp update</code></td></tr>
<tr><td><code>8sync doctor</code></td><td>Comprehensive health check</td></tr>
<tr><td><code>8sync harness</code></td><td>Build/refresh the harness with one command (idempotent)</td></tr>
<tr><td><code>8sync harness web</code></td><td><b>Local dashboard</b> — agent-team CRUD</td></tr>
<tr><td><code>8sync harness gateway</code></td><td>Deploy/verify omp model-gateway</td></tr>
<tr><td><code>8sync harness add-local-model</code></td><td>Serve a local GGUF model (mistral.rs) as an omp provider</td></tr>
<tr><td><code>8sync locate</code></td><td>Visual grounding — bounding boxes + click points from an image</td></tr>
<tr><td><code>8sync skill</code></td><td>List + add skills (see below)</td></tr>
<tr><td><code>8sync theme | bg</code></td><td>Kitty palette / wallpaper live swap</td></tr>
<tr><td><code>8sync bt | clean</code></td><td>Bluetooth / disk cleanup + report</td></tr>
<tr><td><code>8sync sec on|off</code></td><td>WARP VPN + ufw in one go</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- SKILLS -->
<section id="skills">
<h2>Skill injection</h2>
<p class="lede">A skill is an instruction module for the AI. 8sync bundles <b>35 skills</b> (codegraph · karpathy · ponytail · assp · impeccable · taste · 8sync-cli · image-routing + 18 research skills · …); <code>8sync skill add</code> is collection-aware and pulls whole sets from GitHub.</p>
<div class="codeblock">
<span class="lbl">bash</span>
<pre><code># Clone from a URL: installs into BOTH ~/.omp/skills/ (global, read by omp) and agents/skills/ (project)
# Also rewrites the <!-- 8sync:skills:* --> block in AGENTS.md
8sync skill add https://github.com/colbymchenry/codegraph
# Other spec forms
8sync skill add gh:owner/repo
8sync skill add path:/abs/local/dir
8sync skill add builtin:karpathy
# Idempotent: re-running = git pull --ff-only
8sync skill add https://github.com/colbymchenry/codegraph # → "updated"
# Build / refresh the whole harness (replaces the old `skill sync`)
8sync harness init
8sync harness up --timer 30m</code></pre>
</div>
</section>
<!-- UPDATE -->
<section id="update">
<h2>Update</h2>
<p class="lede">Two ways:</p>
<div class="two">
<div>
<h3 style="font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px;">Auto (recommended)</h3>
<div class="codeblock">
<pre><code>8sync up</code></pre>
</div>
<p class="lede" style="margin-top:10px;">Self-updates the binary (GitHub release) + <code>omp update</code>. Never touches <code>pacman -Syu</code>.</p>
</div>
<div>
<h3 style="font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px;">Manual (build from source)</h3>
<div class="codeblock">
<pre><code>cd su-code && git pull
cargo build --release
install -m755 target/release/8sync \
~/.local/bin/8sync</code></pre>
</div>
</div>
</div>
</section>
<!-- DOCS / SITE -->
<section id="docs">
<h2>Documentation site</h2>
<p class="lede">This page is <code>docs/index.html</code>, auto-deployed via GitHub Pages on every push to <code>main</code>.</p>
<table>
<tbody>
<tr><td>Source</td><td><a href="https://github.com/8-Sync-Dev/su-code/blob/main/docs/index.html">docs/index.html</a></td></tr>
<tr><td>Workflow</td><td><a href="https://github.com/8-Sync-Dev/su-code/blob/main/.github/workflows/pages.yml">.github/workflows/pages.yml</a></td></tr>
<tr><td>Trigger</td><td>push <code>main</code> or <code>workflow_dispatch</code></td></tr>
<tr><td>URL</td><td><a href="https://8-sync-dev.github.io/su-code/">8-sync-dev.github.io/su-code</a></td></tr>
<tr><td>Full README</td><td><a href="https://github.com/8-Sync-Dev/su-code#readme">github.com/8-Sync-Dev/su-code#readme</a></td></tr>
<tr><td>AGENTS.md (for AI)</td><td><a href="https://github.com/8-Sync-Dev/su-code/blob/main/AGENTS.md">AGENTS.md</a></td></tr>
</tbody>
</table>
</section>
<footer>
<div>© 8-Sync-Dev · MIT License · built on <a href="https://omp.sh">omp</a></div>
<div class="tags">#8sync #omp #VibeCoding #TerminalWorkflow #RustLang #ArchLinux #CachyOS</div>
</footer>
</main>
</body>
</html>