@lardexx/arenacode 0.0.0-stage → 2.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +288 -2
- package/bin/arenacode.js +19 -0
- package/docs/ANALYSIS.md +201 -0
- package/docs/PUBLISHING.md +65 -0
- package/docs/TUI.md +114 -0
- package/docs/tui-approve.html +28 -0
- package/docs/tui-approve.png +0 -0
- package/docs/tui-home.html +28 -0
- package/docs/tui-home.png +0 -0
- package/docs/tui-palette.html +28 -0
- package/docs/tui-palette.png +0 -0
- package/docs/tui-plan.html +28 -0
- package/docs/tui-plan.png +0 -0
- package/docs/tui-preview.html +28 -0
- package/docs/tui-session.png +0 -0
- package/docs/tui-slash.html +28 -0
- package/package.json +32 -4
- package/src/bridge.js +135 -0
- package/src/cli.js +720 -0
- package/src/config.js +141 -0
- package/src/local.js +507 -0
- package/src/meta.js +143 -0
- package/src/prompts/agent-prompt.md +237 -0
- package/src/tui/app.js +1368 -0
- package/src/tui/dialogs.js +136 -0
- package/src/tui/keys.js +134 -0
- package/src/tui/logo.js +54 -0
- package/src/tui/render.js +256 -0
- package/src/tui/term.js +93 -0
- package/src/tui/theme.js +246 -0
- package/src/tui/widgets.js +374 -0
- package/src/turn.js +213 -0
- package/src/ui.js +130 -0
package/docs/TUI.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# TUI architecture
|
|
2
|
+
|
|
3
|
+
The terminal UI is a copy of [opencode](https://opencode.ai)'s, rebuilt by hand on `node:tty` — no `ink`, no
|
|
4
|
+
`blessed`, no dependencies at all.
|
|
5
|
+
|
|
6
|
+
## Where the design comes from
|
|
7
|
+
|
|
8
|
+
1. **The real binary.** `curl -fsSL https://opencode.ai/install | bash` installed opencode 1.19.5
|
|
9
|
+
(`~/.opencode/bin/opencode`, a 214 MB Bun-compiled binary). It was run inside a pty at 112×36 and its output
|
|
10
|
+
captured byte-for-byte (`tools/…`, `/home/user/oc-study/capture.py`): home screen, typed input, the `/` list,
|
|
11
|
+
`ctrl+p` palette, a conversation, the permission dialog.
|
|
12
|
+
2. **The real source.** Tag `v1.19.5` of the repo (now `anomalyco/opencode`) carries the TUI in TypeScript:
|
|
13
|
+
`packages/tui/src/component/prompt/index.tsx` (the box), `routes/session/index.tsx` (messages and tool rows),
|
|
14
|
+
`routes/home.tsx` (centred layout), `ui/dialog*.tsx` (dialogs), `logo.tsx` + `logo.ts` (the wordmark and its
|
|
15
|
+
shadow marks), `feature-plugins/home/footer.tsx` (the footer), `theme/assets/*.json` (the palettes),
|
|
16
|
+
`config/keybind.ts` (the keybinds).
|
|
17
|
+
|
|
18
|
+
Screenshots alone would have produced a lookalike; the source produced the actual rules — the 2-cell icon gutter,
|
|
19
|
+
`paddingLeft: 3` for assistant parts, `paddingTop/Bottom: 1` with `paddingLeft: 2` inside the prompt, the `╹▀▀▀`
|
|
20
|
+
underline built from a half-block in the *element* colour, the shadow blend `tint(background, fg, 0.25)` behind the
|
|
21
|
+
logo's `_` cells, dialog width 60/88/116 with `paddingTop = height / 4`.
|
|
22
|
+
|
|
23
|
+
## Modules
|
|
24
|
+
|
|
25
|
+
| Module | Job |
|
|
26
|
+
|---|---|
|
|
27
|
+
| `src/tui/term.js` | alternate screen, raw mode, resize, flicker-free frame writes (`CSI ?2026` synchronised output) |
|
|
28
|
+
| `src/tui/keys.js` | raw stdin → key events (arrows, `tab`, `pgup`, `ctrl+x`, lone `esc` with a 40 ms timer) |
|
|
29
|
+
| `src/tui/render.js` | ANSI-aware text maths: `vlen`, `vclip`, `vpad`, `vslice`, `wrap`, `overlay`, `overlayDim`; everything measured in visible cells |
|
|
30
|
+
| `src/tui/theme.js` | five palettes with opencode's role names and hex values, truecolor output, `tint()` |
|
|
31
|
+
| `src/tui/logo.js` | the two-tone block wordmark |
|
|
32
|
+
| `src/tui/widgets.js` | prompt box, chat blocks, tool rows, footer, tips |
|
|
33
|
+
| `src/tui/dialogs.js` | list / confirm / alert dialogs |
|
|
34
|
+
| `src/tui/app.js` | state machine, layout, bridge polling, local-action queue, key routing |
|
|
35
|
+
|
|
36
|
+
## Widgets, mapped to opencode
|
|
37
|
+
|
|
38
|
+
**Prompt** — `component/prompt/index.tsx`. A left border `┃` in the agent colour (Build → `secondary`,
|
|
39
|
+
Plan → `accent`), interior on `backgroundElement` with two cells of padding, one blank row above and below the
|
|
40
|
+
text, a meta row `Build · <model> <provider>`, then a `╹` + `▀`×n underline, then either the hints
|
|
41
|
+
(`tab agents ctrl+p commands`) or, while working, `⠋ <status> … esc interrupt`:
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
┃
|
|
45
|
+
┃ Ask anything… "Read package.json and add a lint script"
|
|
46
|
+
┃
|
|
47
|
+
┃ Build · arenacode bridge 2.5.2
|
|
48
|
+
╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
|
|
49
|
+
tab agents ctrl+p commands
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
**User message** — a `┃` border in the agent colour on `backgroundPanel`, `paddingTop/Bottom 1`, `paddingLeft 2`.
|
|
53
|
+
|
|
54
|
+
**Assistant parts** — `paddingLeft 3`: prose, `- Thought: …` / `⠋ Thinking: …` in `warning`, inline tool rows
|
|
55
|
+
(`$` shell, `→` read, `←` write/edit, `✱` glob/grep, `%` fetch, `◈` search, `⚙` other — a 2-cell icon gutter), and
|
|
56
|
+
block tools (`paddingTop/Bottom 1`, `paddingLeft 2`, `backgroundPanel`) for anything with output. A turn closes with
|
|
57
|
+
`▣ Build · <model> · <duration>`.
|
|
58
|
+
|
|
59
|
+
**Dialogs** — `backgroundPanel` rectangle, width 60 (`88` large, `116` xlarge), centred horizontally, starting at
|
|
60
|
+
`height / 4`, title bold on the left and `esc` muted on the right, a filter line, then rows with right-aligned
|
|
61
|
+
shortcuts; the selected row is painted `primary` with `background` text. The backdrop is dimmed — a terminal has no
|
|
62
|
+
alpha, so the cells outside the dialog are stripped of colour and repainted in `textMuted`, which is opencode's
|
|
63
|
+
`rgba(0,0,0,150)` intent.
|
|
64
|
+
|
|
65
|
+
**Footer** — directory (with `:branch`) on the left, task tag and version on the right, two cells of padding.
|
|
66
|
+
|
|
67
|
+
## State
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
{ mode, status, items[], seqItems, input, cursor, history, scroll, taskId,
|
|
71
|
+
overlay, approval, prompt, toast, health, latency, details, slashIndex, attachments }
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
`items` is the transcript. Bridge events are folded in with the desktop client's rules: `seq` is a step key, so
|
|
75
|
+
`tool`/`thought` rows update in place, `text` rows append deltas, `done` closes the turn.
|
|
76
|
+
|
|
77
|
+
## Local actions
|
|
78
|
+
|
|
79
|
+
An event carrying `local_exec`, `local_fs`, `local_ui` or `local_file` becomes a job on a serial queue:
|
|
80
|
+
|
|
81
|
+
1. a card appears in the transcript (`running`),
|
|
82
|
+
2. a dialog asks — `Run once` / `Don't run` for a command, `Approve` / `Reject` / `Revise` for a plan
|
|
83
|
+
(`y`/`n`, `a`/`r`/`f` work as well, plus `↑↓` and `enter`),
|
|
84
|
+
3. the action runs locally in `quiet` mode (nothing is written raw to the screen; the output belongs to the card),
|
|
85
|
+
4. `POST /task/<id>/local-result {rid, output, code}` answers the bridge,
|
|
86
|
+
5. the card fills in with the exit code, byte count or error.
|
|
87
|
+
|
|
88
|
+
Serial order matters: the bridge expects one answer per `rid`, and the agent waits for each one.
|
|
89
|
+
|
|
90
|
+
## Testing it
|
|
91
|
+
|
|
92
|
+
A TUI cannot be asserted on `stdout`; it has to run in a pty. `test/tui.js` does that:
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
node test/tui.js # home, transcript, tool cards, palette, quit
|
|
96
|
+
SCENARIO=approve node test/tui.js # the terminal dialog
|
|
97
|
+
SCENARIO=plan node test/tui.js # plan approval
|
|
98
|
+
DUMP=1 node test/tui.js # also write /tmp/tui-frames*.raw
|
|
99
|
+
node tools/frame2html.js /tmp/tui-frames-plan.raw docs/tui-plan.html --match Revise
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Snapshots in three shapes, all from the same captured bytes:
|
|
103
|
+
|
|
104
|
+
* `node tools/frame2html.js <capture.raw> docs/tui-home.html --match 'Ask anything'` — coloured HTML, one block
|
|
105
|
+
element per row at `height: 1em` so painted backgrounds and `▀`/`▄` blocks meet with no seams (a plain
|
|
106
|
+
`line-height` above 1 leaves thin gaps between those rows — that is what looked like screen tearing);
|
|
107
|
+
* `python3 tools/ansi2png.py <capture.raw> docs/tui-home.png --match 'Ask anything'` — a real image rendered from
|
|
108
|
+
the pty stream with pyte + Pillow, immune to CSS (`pip install pyte pillow`);
|
|
109
|
+
* `DUMP=1 node test/tui.js` — the raw bytes, `/tmp/tui-frames*.raw`.
|
|
110
|
+
|
|
111
|
+
`script -qfec "stty rows 36 cols 112; node bin/arenacode.js ui …" /dev/null` gives the child a pty, the test types on
|
|
112
|
+
its stdin like a user, and the captured stream is split into frames (each draw homes the cursor) so assertions look at
|
|
113
|
+
what was actually on screen. `tools/frame2html.js` turns the last matching frame into the coloured snapshots in
|
|
114
|
+
`docs/` — it understands `38;2`/`48;2` truecolor, 256-colour, bold, dim, italic, underline and reverse.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>arenacode TUI — snapshot</title>
|
|
6
|
+
<style>
|
|
7
|
+
:root { color-scheme: dark; }
|
|
8
|
+
html, body { background: #0a0a0a; }
|
|
9
|
+
body { margin:0; padding:30px; color:#eeeeee;
|
|
10
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
|
|
11
|
+
"Noto Sans Mono", "Liberation Mono", monospace; }
|
|
12
|
+
h1 { font-size:13px; font-weight:600; color:#808080; margin:0 0 6px; letter-spacing:.06em; text-transform:uppercase; }
|
|
13
|
+
p { color:#484848; font-size:12px; margin:0 0 18px; }
|
|
14
|
+
.frame { display:inline-block; background:#0a0a0a; border:1px solid #1e1e1e; border-radius:10px;
|
|
15
|
+
padding:14px 16px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
|
|
16
|
+
/* line-height 1 is what keeps ▀/▄ blocks and painted backgrounds tiling with no seams */
|
|
17
|
+
pre { margin:0; font-size:13px; line-height:1; white-space:pre; letter-spacing:0;
|
|
18
|
+
font-variant-ligatures:none; font-kerning:none; tab-size:2;
|
|
19
|
+
text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }
|
|
20
|
+
.ln { height:1em; line-height:1em; white-space:pre; }
|
|
21
|
+
.ln > span { display:inline; }
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<h1>arenacode — terminal UI</h1>
|
|
26
|
+
<p>captured from a real pty · opencode-style layout, ANSI colours preserved</p>
|
|
27
|
+
<div class="frame"><pre><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20);font-weight:700">Terminal</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">esc</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">echo from-pc</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(250,178,131)"> </span><span style="color:rgb(10,10,10);background:rgb(250,178,131)">Run once</span><span style="background:rgb(250,178,131)"> </span><span style="color:rgb(10,10,10);background:rgb(250,178,131)">y</span><span style="background:rgb(250,178,131)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Don't run</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">n</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(8,8,8)"> </span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(8,8,8)"> </span><span style="color:rgb(95,95,95);background:rgb(8,8,8)">read hello.txt and ru</span><span style="color:rgb(95,95,95);background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">↑↓</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">select</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">enter</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">confirm</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">esc</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">cancel</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(8,8,8)"> </span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(245,167,66)">⠋ Thinking: Looking at the folder</span> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">→</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Reading file: hello.txt</span><span style="color:rgb(128,128,128);background:rgb(20,20,20)"> (23 B)</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">hello from the project</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">$</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">echo from-pc</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(10,10,10)">┃</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">echo from-pc</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(128,128,128);background:rgb(30,30,30)">Ask anything… "Read package.json and add a lint script"</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(92,156,245);background:rgb(30,30,30)">Build</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(128,128,128);background:rgb(30,30,30)">·</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(238,238,238);background:rgb(30,30,30)">arenacode</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(128,128,128);background:rgb(30,30,30)">bridge 2.5.2</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">╹</span><span style="color:rgb(30,30,30)">▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀</span> </div><div class="ln"> <span style="color:rgb(92,156,245)">⠋</span> <span style="color:rgb(128,128,128)">Echo test</span> <span style="color:rgb(238,238,238)">esc</span> <span style="color:rgb(128,128,128)">interrupt</span> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(128,128,128)">/tmp/arenacode-tui-IPflRl/project</span> <span style="color:rgb(128,128,128)">01ecdc · v2.5.2</span> </div></pre></div>
|
|
28
|
+
</body></html>
|
|
Binary file
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>arenacode TUI — snapshot</title>
|
|
6
|
+
<style>
|
|
7
|
+
:root { color-scheme: dark; }
|
|
8
|
+
html, body { background: #0a0a0a; }
|
|
9
|
+
body { margin:0; padding:30px; color:#eeeeee;
|
|
10
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
|
|
11
|
+
"Noto Sans Mono", "Liberation Mono", monospace; }
|
|
12
|
+
h1 { font-size:13px; font-weight:600; color:#808080; margin:0 0 6px; letter-spacing:.06em; text-transform:uppercase; }
|
|
13
|
+
p { color:#484848; font-size:12px; margin:0 0 18px; }
|
|
14
|
+
.frame { display:inline-block; background:#0a0a0a; border:1px solid #1e1e1e; border-radius:10px;
|
|
15
|
+
padding:14px 16px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
|
|
16
|
+
/* line-height 1 is what keeps ▀/▄ blocks and painted backgrounds tiling with no seams */
|
|
17
|
+
pre { margin:0; font-size:13px; line-height:1; white-space:pre; letter-spacing:0;
|
|
18
|
+
font-variant-ligatures:none; font-kerning:none; tab-size:2;
|
|
19
|
+
text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }
|
|
20
|
+
.ln { height:1em; line-height:1em; white-space:pre; }
|
|
21
|
+
.ln > span { display:inline; }
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<h1>arenacode — terminal UI</h1>
|
|
26
|
+
<p>captured from a real pty · opencode-style layout, ANSI colours preserved</p>
|
|
27
|
+
<div class="frame"><pre><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700"> </span> <span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">▄</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span> </div><div class="ln"> <span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▄</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">█</span> <span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">█</span> </div><div class="ln"> <span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▄</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);background:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(199,199,199);background:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(199,199,199);background:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);background:rgb(36,36,36);font-weight:700"> </span><span style="color:rgb(199,199,199);background:rgb(36,36,36);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">█</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">█</span> <span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">█</span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700">▀</span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700">▀</span><span style="color:rgb(238,238,238);background:rgb(60,60,60);font-weight:700">▀</span> </div><div class="ln"> <span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(36,36,36);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700"> </span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span><span style="color:rgb(199,199,199);font-weight:700">▀</span> <span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700"> </span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span><span style="color:rgb(238,238,238);font-weight:700">▀</span> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(250,178,131)">/connect</span><span style="color:rgb(128,128,128)"> bridge offline at http://127.0.0.1:9</span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(128,128,128);background:rgb(30,30,30)">Ask anything… "Read package.json and add a lint script"</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">┃</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(92,156,245);background:rgb(30,30,30)">Build</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(128,128,128);background:rgb(30,30,30)">·</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(238,238,238);background:rgb(30,30,30)">arenacode</span><span style="background:rgb(30,30,30)"> </span><span style="color:rgb(128,128,128);background:rgb(30,30,30)">bridge 2.5.2</span><span style="background:rgb(30,30,30)"> </span> </div><div class="ln"> <span style="color:rgb(92,156,245)">╹</span><span style="color:rgb(30,30,30)">▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀</span> </div><div class="ln"> <span style="color:rgb(238,238,238)">tab</span> <span style="color:rgb(128,128,128)">agents</span> <span style="color:rgb(238,238,238)">ctrl+p</span> <span style="color:rgb(128,128,128)">commands</span> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(245,167,66)">● Tip </span><span style="color:rgb(128,128,128)">Press </span><span style="color:rgb(238,238,238)">ctrl+p</span><span style="color:rgb(128,128,128)"> for every command</span> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(128,128,128)">~/arenacode-cli</span> <span style="color:rgb(128,128,128)">v2.5.2</span> </div><div class="ln">Script done on 2026-11-02 16:39:41+00:00 [COMMAND_EXIT_CODE="0"]</div><div class="ln"> </div></pre></div>
|
|
28
|
+
</body></html>
|
|
Binary file
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>arenacode TUI — snapshot</title>
|
|
6
|
+
<style>
|
|
7
|
+
:root { color-scheme: dark; }
|
|
8
|
+
html, body { background: #0a0a0a; }
|
|
9
|
+
body { margin:0; padding:30px; color:#eeeeee;
|
|
10
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
|
|
11
|
+
"Noto Sans Mono", "Liberation Mono", monospace; }
|
|
12
|
+
h1 { font-size:13px; font-weight:600; color:#808080; margin:0 0 6px; letter-spacing:.06em; text-transform:uppercase; }
|
|
13
|
+
p { color:#484848; font-size:12px; margin:0 0 18px; }
|
|
14
|
+
.frame { display:inline-block; background:#0a0a0a; border:1px solid #1e1e1e; border-radius:10px;
|
|
15
|
+
padding:14px 16px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
|
|
16
|
+
/* line-height 1 is what keeps ▀/▄ blocks and painted backgrounds tiling with no seams */
|
|
17
|
+
pre { margin:0; font-size:13px; line-height:1; white-space:pre; letter-spacing:0;
|
|
18
|
+
font-variant-ligatures:none; font-kerning:none; tab-size:2;
|
|
19
|
+
text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }
|
|
20
|
+
.ln { height:1em; line-height:1em; white-space:pre; }
|
|
21
|
+
.ln > span { display:inline; }
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<h1>arenacode — terminal UI</h1>
|
|
26
|
+
<p>captured from a real pty · opencode-style layout, ANSI colours preserved</p>
|
|
27
|
+
<div class="frame"><pre><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20);font-weight:700">Commands</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">esc</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">Search</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20);font-weight:700">Commands</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(250,178,131)"> </span><span style="color:rgb(10,10,10);background:rgb(250,178,131)">Stop the running turn</span><span style="background:rgb(250,178,131)"> </span><span style="color:rgb(10,10,10);background:rgb(250,178,131)">esc</span><span style="background:rgb(250,178,131)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">New session</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">ctrl+x n</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(12,12,12)"> </span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Task queue</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">ctrl+x l</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(12,12,12)"> </span><span style="color:rgb(51,51,51);background:rgb(12,12,12)">Ask a</span><span style="color:rgb(51,51,51);background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Toggle detail</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">ctrl+x d</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(12,12,12)"> </span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Toggle sidebar</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">ctrl+x b</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">┃</span><span style="background:rgb(12,12,12)"> </span><span style="color:rgb(37,62,98);background:rgb(12,12,12)">Build</span><span style="color:rgb(37,62,98);background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Switch mode (agent / plan)</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">tab</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="color:rgb(37,62,98)">╹</span><span style="color:rgb(12,12,12)">▀▀▀▀▀▀▀</span><span style="color:rgb(12,12,12);background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Theme</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">ctrl+x t</span><span style="background:rgb(20,20,20)"> </span>▀▀▀▀▀▀▀ </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Bridge status (ping)</span><span style="background:rgb(20,20,20)"> </span>mands </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Bridge workspace files</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Help</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">f1</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">Quit</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">ctrl+x q</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">enter</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">run</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(238,238,238);background:rgb(20,20,20)">esc</span><span style="background:rgb(20,20,20)"> </span><span style="color:rgb(128,128,128);background:rgb(20,20,20)">close</span><span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> <span style="background:rgb(20,20,20)"> </span> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> </div><div class="ln"> <span style="color:rgb(128,128,128)">~/arenacode-cli</span> <span style="color:rgb(128,128,128)">v2.5.2</span> </div><div class="ln">Script done on 2026-11-02 16:40:03+00:00 [COMMAND_EXIT_CODE="0"]</div><div class="ln"> </div></pre></div>
|
|
28
|
+
</body></html>
|
|
Binary file
|