Interface specification: six workspaces, twenty-seven interface items, styling and keys
This commit is contained in:
Sam
@@ -0,0 +1,93 @@
|
||||
---
|
||||
type: context
|
||||
id: context.paperclip-harness.docs-ui-layout-md-interface-spec
|
||||
title: docs/UI-LAYOUT.md interface spec
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/context
|
||||
- paperclip-harness
|
||||
- ui-layout
|
||||
- spec
|
||||
- docs
|
||||
---
|
||||
|
||||
# docs/UI-LAYOUT.md interface spec
|
||||
|
||||
New spec at /home/sam/paseo/projects/paperclip-harness/docs/UI-LAYOUT.md (9942 bytes) written this turn. Structure:
|
||||
|
||||
1. Opens with the only four questions the UI may answer: what is the state of the work, what is happening now, what needs me, what do I do about it.
|
||||
2. Fact-ownership table pinning each shown fact to one source (see the paperclip-harness context note for the full mapping).
|
||||
3. Per-pane tables: what each pane must show and which keys it may use. TUIOS keeps `h j k l z n`; bare Esc stays free.
|
||||
4. Three candidate layouts (A one-page-per-view, B cockpit tree+thread, C cockpit with diff) plus a width-driven recommendation: C at 150+ columns, B at 110–149, A at 80–109, 'too small' screen below 80x24.
|
||||
|
||||
Open decisions recorded in the doc/conversation: (1) diff as its own pane vs bottom half of the log; (2) whether tree selection drives other panes by writing `watching = AUD-163` into `.harness/harness.toml` (panes watch the file) vs direct pane messages; (3) whether the four screens stay four workspaces or collapse to two.
|
||||
|
||||
## Detailed context from completed turn
|
||||
|
||||
That notification is the failed Explore agent finishing late — the one that returned nothing because `claude-haiku-4.5` 404s. Nothing new in it; I did that reading myself.
|
||||
|
||||
Meanwhile I did what you asked next: the interface spec and the mockups.
|
||||
|
||||
## `docs/UI-LAYOUT.md`
|
||||
|
||||
It opens with the only four questions the interface is allowed to answer — what is the state of the work, what is happening now, what needs me, what do I do about it — then a table pinning every fact to its one owner:
|
||||
|
||||
| shown | read from | never |
|
||||
|---|---|---|
|
||||
| tasks, status, assignee | company issue list | a folder name |
|
||||
| blockers | `issues/{id}/diagnostics/blockers`, per task | the list |
|
||||
| thread | `issues/{id}/comments` | a copy |
|
||||
| run state | `issues/{id}/runs` | a log we write |
|
||||
| cost | `issues/{id}/cost-summary` | our arithmetic |
|
||||
| what changed | `git` in the task's worktree | a stored diff |
|
||||
| folder, machine, session, watched task | `.harness/harness.toml` | Paperclip |
|
||||
|
||||
Then a table per pane: what it must show and which keys it may use, with `h j k l z n` reserved for TUIOS and a bare Esc free.
|
||||
|
||||
## Three layouts, live in your session
|
||||
|
||||
They are running now on workspaces 6, 7, 8 (`mock-A`, `mock-B`, `mock-C`), and as images:
|
||||
|
||||
```
|
||||
/tmp/mockups/A.png /tmp/mockups/B.png /tmp/mockups/C.png
|
||||
```
|
||||
|
||||
- **A — one page each.** What exists today. Whole width per page, works at 80 columns. Costs a keystroke to look at the tree while replying.
|
||||
- **B — cockpit: tree beside conversation.** Tree 34% left, thread and reply box right, `⤷` markers under each task showing what it waits on. Log and diff one workspace away.
|
||||
- **C — cockpit with the change visible.** Tree 28%, thread top right, diff bottom right — a claim and the code behind it in one glance. Needs width; below ~120 columns the diff half is unreadable.
|
||||
|
||||
Recommendation in the doc: **C, falling back to B, falling back to A, chosen by the pane's actual width** — 150+, 110–149, 80–109, and the "too small" screen below 80×24. The person gets as much as the terminal can carry, never a layout pretending to have room it does not.
|
||||
|
||||
## Two decisions I need from you
|
||||
|
||||
1. **Is the diff its own pane, or the bottom half of the log?** A separate pane never squeezes the log for a long diff, but costs a workspace. C only works if the diff can share a page with the reply.
|
||||
2. **Does the tree drive the other panes?** My proposal: `enter` on a task writes `watching = AUD-163` into the project's `harness.toml` and asks TUIOS to switch to the reply page; the reply, log and diff panes watch that file and reload when it changes. One fact, one owner, no message bus — but it means a file is the hand-off, so say if you would rather each pane be told directly.
|
||||
|
||||
Also still open from earlier: whether the four screens stay four workspaces or become two.
|
||||
|
||||
Say which layout you want, and I will build it — starting with the width-driven choice, since that is what makes it survive being used in a small pane.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 85%
|
||||
- Reason: Key deliverable and its design decisions, reusable by future work on the UI.; enriched with final-answer detail because persistence should be reusable
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
type: context
|
||||
id: context.paperclip-harness.paperclip-harness
|
||||
title: paperclip-harness
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/context
|
||||
- paperclip-harness
|
||||
- tuios
|
||||
- tml
|
||||
- architecture
|
||||
- ui-layout
|
||||
---
|
||||
|
||||
# paperclip-harness
|
||||
|
||||
Repo root: /home/sam/paseo/projects/paperclip-harness (pack label 'paperclip-harness'), running inside a TUIOS session ('tuios coding harness' / π window) so windows/workspaces are addressable by name or index.
|
||||
|
||||
Top-level contents: AGENTS.md, bin/, CHECKLIST.md, docs/, HANDOVER.md, README.md, tui/, plus the workspace layout (shell, tree, reply, log, new, and mock-A/mock-B/mock-C mockups).
|
||||
|
||||
Architecture/config rules discovered:
|
||||
- Rendering: TML documents (root `<tml version="1" title="...">`, optional first-child `<state>{JSON}</state>`), rendered by tuios in a popup or pane using the user's theme. Rules documented in the repo: roles not hex colours (fg, dim, mute, accent, success, warning, error, info, series1–6; hex refused); bindings read state (`{state.passed}`, `{pct(...)}`) with no loops/assignment; data attributes take state paths without braces (`rows="state.services"`); actions `set/toggle/emit/close/copy/pane(...)`; limits 256 KiB from a pane, 5,000 nodes, depth 32, state 1 MiB, patch 64 KiB, 8 open surfaces per pane. Expressions have no object literals, so action params live in state (e.g. state.run = {"window":"build","text":"make\n"}).
|
||||
- Data ownership (from the new spec): tasks/status/assignee from the company issue list (never a folder name); blockers from `issues/{id}/diagnostics/blockers` per task; thread from `issues/{id}/comments`; run state from `issues/{id}/runs`; cost from `issues/{id}/cost-summary` (never our arithmetic); what-changed from `git` in the task's worktree (never a stored diff); folder/machine/session/watched task from `.harness/harness.toml` (never Paperclip).
|
||||
- Key ownership in panes: `h j k l z n` are reserved for TUIOS; a bare Esc must stay free.
|
||||
|
||||
Known environment caveats: some sessions have no display, so screenshots fail with 'no window found' and clipboard writes report 'no clipboard' but the file is saved; windows in this harness are 88x26 by default.
|
||||
|
||||
Related: the Explore subagent configured with `claude-haiku-4.5` 404s and returns nothing — do that reading directly.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 85%
|
||||
- Reason: Durable repo overview and rendering/config conventions evidenced across the turn.
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
94
.pi/memory-vault/packs/paperclip-harness/20-context/tmp.md
Normal file
94
.pi/memory-vault/packs/paperclip-harness/20-context/tmp.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
type: context
|
||||
id: context.paperclip-harness.tmp
|
||||
title: tmp
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/context
|
||||
- autolearn
|
||||
- rich-discovery
|
||||
- repo/tmp
|
||||
---
|
||||
|
||||
# tmp
|
||||
|
||||
## Rich discovery update (2026-11-10 01:47:01)
|
||||
|
||||
That notification is the failed Explore agent finishing late — the one that returned nothing because `claude-haiku-4.5` 404s. Nothing new in it; I did that reading myself.
|
||||
|
||||
Meanwhile I did what you asked next: the interface spec and the mockups.
|
||||
|
||||
## `docs/UI-LAYOUT.md`
|
||||
|
||||
It opens with the only four questions the interface is allowed to answer — what is the state of the work, what is happening now, what needs me, what do I do about it — then a table pinning every fact to its one owner:
|
||||
|
||||
| shown | read from | never |
|
||||
|---|---|---|
|
||||
| tasks, status, assignee | company issue list | a folder name |
|
||||
| blockers | `issues/{id}/diagnostics/blockers`, per task | the list |
|
||||
| thread | `issues/{id}/comments` | a copy |
|
||||
| run state | `issues/{id}/runs` | a log we write |
|
||||
| cost | `issues/{id}/cost-summary` | our arithmetic |
|
||||
| what changed | `git` in the task's worktree | a stored diff |
|
||||
| folder, machine, session, watched task | `.harness/harness.toml` | Paperclip |
|
||||
|
||||
Then a table per pane: what it must show and which keys it may use, with `h j k l z n` reserved for TUIOS and a bare Esc free.
|
||||
|
||||
## Three layouts, live in your session
|
||||
|
||||
They are running now on workspaces 6, 7, 8 (`mock-A`, `mock-B`, `mock-C`), and as images:
|
||||
|
||||
```
|
||||
/tmp/mockups/A.png /tmp/mockups/B.png /tmp/mockups/C.png
|
||||
```
|
||||
|
||||
- **A — one page each.** What exists today. Whole width per page, works at 80 columns. Costs a keystroke to look at the tree while replying.
|
||||
- **B — cockpit: tree beside conversation.** Tree 34% left, thread and reply box right, `⤷` markers under each task showing what it waits on. Log and diff one workspace away.
|
||||
- **C — cockpit with the change visible.** Tree 28%, thread top right, diff bottom right — a claim and the code behind it in one glance. Needs width; below ~120 columns the diff half is unreadable.
|
||||
|
||||
Recommendation in the doc: **C, falling back to B, falling back to A, chosen by the pane's actual width** — 150+, 110–149, 80–109, and the "too small" screen below 80×24. The person gets as much as the terminal can carry, never a layout pretending to have room it does not.
|
||||
|
||||
## Two decisions I need from you
|
||||
|
||||
1. **Is the diff its own pane, or the bottom half of the log?** A separate pane never squeezes the log for a long diff, but costs a workspace. C only works if the diff can share a page with the reply.
|
||||
2. **Does the tree drive the other panes?** My proposal: `enter` on a task writes `watching = AUD-163` into the project's `harness.toml` and asks TUIOS to switch to the reply page; the reply, log and diff panes watch that file and reload when it changes. One fact, one owner, no message bus — but it means a file is the hand-off, so say if you would rather each pane be told directly.
|
||||
|
||||
Also still open from earlier: whether the four screens stay four workspaces or become two.
|
||||
|
||||
Say which layout you want, and I will build it — starting with the width-driven choice, since that is what makes it survive being used in a small pane.
|
||||
|
||||
## Source paths observed
|
||||
|
||||
- `tmp/pi-subagents-1000/home-sam-paseo-projects-paperclip-harness/01a1c288-74f9-75ae-ba9a-a501d66bc3b5/tasks/87e640dd-8043-41e.output`
|
||||
- `home/sam/paseo/projects/paperclip-harness/docs/UI-LAYOUT.md`
|
||||
- `tmp/mockups/A.txt`
|
||||
- `tmp/mockups/B.txt`
|
||||
- `tmp/mockups/C.txt`
|
||||
- `tmp/mockups/A.png`
|
||||
- `tmp/mockups/B.png`
|
||||
- `tmp/mockups/C.png`
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 84%
|
||||
- Reason: Update component/repository context with detailed discovered structure and configuration
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
type: action
|
||||
id: action.paperclip-harness.wrote-docs-ui-layout-md-and-three-live-layout-mockups
|
||||
title: Wrote docs/UI-LAYOUT.md and three live layout mockups
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/action
|
||||
- ui-layout
|
||||
- deliverable
|
||||
- mockups
|
||||
- commit
|
||||
---
|
||||
|
||||
# Wrote docs/UI-LAYOUT.md and three live layout mockups
|
||||
|
||||
Completed work this turn:
|
||||
- Deliverable: /home/sam/paseo/projects/paperclip-harness/docs/UI-LAYOUT.md (9942 bytes) — four allowed user questions, fact-ownership table, per-pane show/keys spec, three layouts, width-driven recommendation.
|
||||
- Artifacts: three mockups run live as TUIOS workspaces 6/7/8 (mock-A, mock-B, mock-C) and captured as /tmp/mockups/{A,B,C}.txt and .png.
|
||||
- Validation: text renderings measured (A 16x81, B 20x82, C 15x82) and inspected; each workspace confirmed at 88x26 via tuios list-workspaces. Committed as ae7fc00 ('Interface spec: what each page must show, the source of every fact, and three layouts').
|
||||
- Follow-up: awaiting user choice of layout and answers on diff-pane placement, tree-driven pane hand-off, and workspace count; build starts with the width-driven chooser.
|
||||
|
||||
## Detailed deliverable from completed turn
|
||||
|
||||
That notification is the failed Explore agent finishing late — the one that returned nothing because `claude-haiku-4.5` 404s. Nothing new in it; I did that reading myself.
|
||||
|
||||
Meanwhile I did what you asked next: the interface spec and the mockups.
|
||||
|
||||
## `docs/UI-LAYOUT.md`
|
||||
|
||||
It opens with the only four questions the interface is allowed to answer — what is the state of the work, what is happening now, what needs me, what do I do about it — then a table pinning every fact to its one owner:
|
||||
|
||||
| shown | read from | never |
|
||||
|---|---|---|
|
||||
| tasks, status, assignee | company issue list | a folder name |
|
||||
| blockers | `issues/{id}/diagnostics/blockers`, per task | the list |
|
||||
| thread | `issues/{id}/comments` | a copy |
|
||||
| run state | `issues/{id}/runs` | a log we write |
|
||||
| cost | `issues/{id}/cost-summary` | our arithmetic |
|
||||
| what changed | `git` in the task's worktree | a stored diff |
|
||||
| folder, machine, session, watched task | `.harness/harness.toml` | Paperclip |
|
||||
|
||||
Then a table per pane: what it must show and which keys it may use, with `h j k l z n` reserved for TUIOS and a bare Esc free.
|
||||
|
||||
## Three layouts, live in your session
|
||||
|
||||
They are running now on workspaces 6, 7, 8 (`mock-A`, `mock-B`, `mock-C`), and as images:
|
||||
|
||||
```
|
||||
/tmp/mockups/A.png /tmp/mockups/B.png /tmp/mockups/C.png
|
||||
```
|
||||
|
||||
- **A — one page each.** What exists today. Whole width per page, works at 80 columns. Costs a keystroke to look at the tree while replying.
|
||||
- **B — cockpit: tree beside conversation.** Tree 34% left, thread and reply box right, `⤷` markers under each task showing what it waits on. Log and diff one workspace away.
|
||||
- **C — cockpit with the change visible.** Tree 28%, thread top right, diff bottom right — a claim and the code behind it in one glance. Needs width; below ~120 columns the diff half is unreadable.
|
||||
|
||||
Recommendation in the doc: **C, falling back to B, falling back to A, chosen by the pane's actual width** — 150+, 110–149, 80–109, and the "too small" screen below 80×24. The person gets as much as the terminal can carry, never a layout pretending to have room it does not.
|
||||
|
||||
## Two decisions I need from you
|
||||
|
||||
1. **Is the diff its own pane, or the bottom half of the log?** A separate pane never squeezes the log for a long diff, but costs a workspace. C only works if the diff can share a page with the reply.
|
||||
2. **Does the tree drive the other panes?** My proposal: `enter` on a task writes `watching = AUD-163` into the project's `harness.toml` and asks TUIOS to switch to the reply page; the reply, log and diff panes watch that file and reload when it changes. One fact, one owner, no message bus — but it means a file is the hand-off, so say if you would rather each pane be told directly.
|
||||
|
||||
Also still open from earlier: whether the four screens stay four workspaces or become two.
|
||||
|
||||
Say which layout you want, and I will build it — starting with the width-driven choice, since that is what makes it survive being used in a small pane.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 85%
|
||||
- Reason: Concrete deliverable, artifacts, commit, and follow-up context.; enriched with final-answer detail because persistence should be reusable
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
type: decision
|
||||
id: decision.paperclip-harness.responsive-layout-selection-by-pane-width-c-b-a
|
||||
title: Responsive layout selection by pane width (C→B→A)
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/decision
|
||||
- ui-layout
|
||||
- responsive
|
||||
- decision
|
||||
- paperclip-harness
|
||||
---
|
||||
|
||||
# Responsive layout selection by pane width (C→B→A)
|
||||
|
||||
Decision: pick the UI layout from the pane's actual width rather than fixing one. Order: layout C (cockpit with visible diff) at 150+ columns, layout B (tree beside thread) at 110–149, layout A (one page per view) at 80–109, and a dedicated 'too small' screen below 80x24.
|
||||
|
||||
Context: three layouts were mocked up (A one-page, B cockpit, C cockpit-with-diff). C gives a claim and the code behind it in one glance but needs width; below ~120 columns the diff half is unreadable. A works at 80 columns but costs a keystroke to see the tree while replying.
|
||||
|
||||
Rationale: give the person as much as the terminal can carry, never a layout pretending to have room it does not. Consequence: first build step is the width-driven chooser.
|
||||
|
||||
Open caveats: diff as separate pane vs bottom of log (C depends on diff sharing a page with reply); whether tree selection writes `watching` into harness.toml to drive other panes vs direct messaging; four workspaces vs two.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 85%
|
||||
- Reason: Explicit architectural choice with rationale, consequences, alternatives, and open caveats.
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
type: observation
|
||||
id: observation.paperclip-harness.mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow
|
||||
title: Mockup layouts A/B/C measured widths and screenshot workflow
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/observation
|
||||
- tuios
|
||||
- mockups
|
||||
- screenshots
|
||||
- caveats
|
||||
---
|
||||
|
||||
# Mockup layouts A/B/C measured widths and screenshot workflow
|
||||
|
||||
Three layout mockups were rendered as text and images:
|
||||
- /tmp/mockups/A.txt (16 lines, 81 wide), B.txt (20 lines, 82 wide), C.txt (15 lines, 82 wide); images A.png 145K, B.png 171K, C.png 160K (mode 600).
|
||||
- They also run live as TUIOS workspaces 6/7/8 named mock-A/mock-B/mock-C (each 88x26 alongside shell, tree, reply, log, new).
|
||||
- C's diff half is unreadable below ~120 columns per the doc, which is why the width-driven fallback exists.
|
||||
|
||||
Screenshot/clipboard caveats in this harness: 'tuios screenshot' with a wrong window name fails with 'no window found matching ...', listing available windows (Yazi panes and π windows) and offering 'tuios list-windows -s <session>'; repeated clipboard writes in a display-less session print 'This session has no display, so it has no clipboard' yet still save the file. 'tuios list-workspaces' output format: ` ws <n> '<name>'`; a sizing pass showed all 8 workspaces at 88x26.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 80%
|
||||
- Reason: Concrete environment and artifact facts useful for future UI work and debugging.
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
type: observation
|
||||
id: observation.paperclip-harness.tmp-repository-structure-and-configuration-patterns
|
||||
title: tmp repository structure and configuration patterns
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/observation
|
||||
- autolearn
|
||||
- rich-discovery
|
||||
- repo/tmp
|
||||
---
|
||||
|
||||
# tmp repository structure and configuration patterns
|
||||
|
||||
## Structural/configuration observations (2026-11-10 01:47:01)
|
||||
|
||||
That notification is the failed Explore agent finishing late — the one that returned nothing because `claude-haiku-4.5` 404s. Nothing new in it; I did that reading myself.
|
||||
|
||||
Meanwhile I did what you asked next: the interface spec and the mockups.
|
||||
|
||||
## `docs/UI-LAYOUT.md`
|
||||
|
||||
It opens with the only four questions the interface is allowed to answer — what is the state of the work, what is happening now, what needs me, what do I do about it — then a table pinning every fact to its one owner:
|
||||
|
||||
| shown | read from | never |
|
||||
|---|---|---|
|
||||
| tasks, status, assignee | company issue list | a folder name |
|
||||
| blockers | `issues/{id}/diagnostics/blockers`, per task | the list |
|
||||
| thread | `issues/{id}/comments` | a copy |
|
||||
| run state | `issues/{id}/runs` | a log we write |
|
||||
| cost | `issues/{id}/cost-summary` | our arithmetic |
|
||||
| what changed | `git` in the task's worktree | a stored diff |
|
||||
| folder, machine, session, watched task | `.harness/harness.toml` | Paperclip |
|
||||
|
||||
Then a table per pane: what it must show and which keys it may use, with `h j k l z n` reserved for TUIOS and a bare Esc free.
|
||||
|
||||
## Three layouts, live in your session
|
||||
|
||||
They are running now on workspaces 6, 7, 8 (`mock-A`, `mock-B`, `mock-C`), and as images:
|
||||
|
||||
```
|
||||
/tmp/mockups/A.png /tmp/mockups/B.png /tmp/mockups/C.png
|
||||
```
|
||||
|
||||
- **A — one page each.** What exists today. Whole width per page, works at 80 columns. Costs a keystroke to look at the tree while replying.
|
||||
- **B — cockpit: tree beside conversation.** Tree 34% left, thread and reply box right, `⤷` markers under each task showing what it waits on. Log and diff one workspace away.
|
||||
- **C — cockpit with the change visible.** Tree 28%, thread top right, diff bottom right — a claim and the code behind it in one glance. Needs width; below ~120 columns the diff half is unreadable.
|
||||
|
||||
Recommendation in the doc: **C, falling back to B, falling back to A, chosen by the pane's actual width** — 150+, 110–149, 80–109, and the "too small" screen below 80×24. The person gets as much as the terminal can carry, never a layout pretending to have room it does not.
|
||||
|
||||
## Two decisions I need from you
|
||||
|
||||
1. **Is the diff its own pane, or the bottom half of the log?** A separate pane never squeezes the log for a long diff, but costs a workspace. C only works if the diff can share a page with the reply.
|
||||
2. **Does the tree drive the other panes?** My proposal: `enter` on a task writes `watching = AUD-163` into the project's `harness.toml` and asks TUIOS to switch to the reply page; the reply, log and diff panes watch that file and reload when it changes. One fact, one owner, no message bus — but it means a file is the hand-off, so say if you would rather each pane be told directly.
|
||||
|
||||
Also still open from earlier: whether the four screens stay four workspaces or become two.
|
||||
|
||||
Say which layout you want, and I will build it — starting with the width-driven choice, since that is what makes it survive being used in a small pane.
|
||||
|
||||
## Source paths observed
|
||||
|
||||
- `tmp/pi-subagents-1000/home-sam-paseo-projects-paperclip-harness/01a1c288-74f9-75ae-ba9a-a501d66bc3b5/tasks/87e640dd-8043-41e.output`
|
||||
- `home/sam/paseo/projects/paperclip-harness/docs/UI-LAYOUT.md`
|
||||
- `tmp/mockups/A.txt`
|
||||
- `tmp/mockups/B.txt`
|
||||
- `tmp/mockups/C.txt`
|
||||
- `tmp/mockups/A.png`
|
||||
- `tmp/mockups/B.png`
|
||||
- `tmp/mockups/C.png`
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 82%
|
||||
- Reason: Captured factual repo structure/configuration patterns from rich discovery
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
type: session
|
||||
id: session.paperclip-harness.rich-discovery-tmp-2026-11-10-01-47-01
|
||||
title: Rich discovery: tmp 2026-11-10 01:47:01
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/session
|
||||
- autolearn
|
||||
- rich-discovery
|
||||
- repo/tmp
|
||||
---
|
||||
|
||||
# Rich discovery: tmp 2026-11-10 01:47:01
|
||||
|
||||
Sanitized rich discovery snapshot captured automatically from the completed turn.
|
||||
|
||||
|
||||
## Source paths observed
|
||||
|
||||
- `tmp/pi-subagents-1000/home-sam-paseo-projects-paperclip-harness/01a1c288-74f9-75ae-ba9a-a501d66bc3b5/tasks/87e640dd-8043-41e.output`
|
||||
- `home/sam/paseo/projects/paperclip-harness/docs/UI-LAYOUT.md`
|
||||
- `tmp/mockups/A.txt`
|
||||
- `tmp/mockups/B.txt`
|
||||
- `tmp/mockups/C.txt`
|
||||
- `tmp/mockups/A.png`
|
||||
- `tmp/mockups/B.png`
|
||||
- `tmp/mockups/C.png`
|
||||
|
||||
## Final answer snapshot
|
||||
|
||||
That notification is the failed Explore agent finishing late — the one that returned nothing because `claude-haiku-4.5` 404s. Nothing new in it; I did that reading myself.
|
||||
|
||||
Meanwhile I did what you asked next: the interface spec and the mockups.
|
||||
|
||||
## `docs/UI-LAYOUT.md`
|
||||
|
||||
It opens with the only four questions the interface is allowed to answer — what is the state of the work, what is happening now, what needs me, what do I do about it — then a table pinning every fact to its one owner:
|
||||
|
||||
| shown | read from | never |
|
||||
|---|---|---|
|
||||
| tasks, status, assignee | company issue list | a folder name |
|
||||
| blockers | `issues/{id}/diagnostics/blockers`, per task | the list |
|
||||
| thread | `issues/{id}/comments` | a copy |
|
||||
| run state | `issues/{id}/runs` | a log we write |
|
||||
| cost | `issues/{id}/cost-summary` | our arithmetic |
|
||||
| what changed | `git` in the task's worktree | a stored diff |
|
||||
| folder, machine, session, watched task | `.harness/harness.toml` | Paperclip |
|
||||
|
||||
Then a table per pane: what it must show and which keys it may use, with `h j k l z n` reserved for TUIOS and a bare Esc free.
|
||||
|
||||
## Three layouts, live in your session
|
||||
|
||||
They are running now on workspaces 6, 7, 8 (`mock-A`, `mock-B`, `mock-C`), and as images:
|
||||
|
||||
```
|
||||
/tmp/mockups/A.png /tmp/mockups/B.png /tmp/mockups/C.png
|
||||
```
|
||||
|
||||
- **A — one page each.** What exists today. Whole width per page, works at 80 columns. Costs a keystroke to look at the tree while replying.
|
||||
- **B — cockpit: tree beside conversation.** Tree 34% left, thread and reply box right, `⤷` markers under each task showing what it waits on. Log and diff one workspace away.
|
||||
- **C — cockpit with the change visible.** Tree 28%, thread top right, diff bottom right — a claim and the code behind it in one glance. Needs width; below ~120 columns the diff half is unreadable.
|
||||
|
||||
Recommendation in the doc: **C, falling back to B, falling back to A, chosen by the pane's actual width** — 150+, 110–149, 80–109, and the "too small" screen below 80×24. The person gets as much as the terminal can carry, never a layout pretending to have room it does not.
|
||||
|
||||
## Two decisions I need from you
|
||||
|
||||
1. **Is the diff its own pane, or the bottom half of the log?** A separate pane never squeezes the log for a long diff, but costs a workspace. C only works if the diff can share a page with the reply.
|
||||
2. **Does the tree drive the other panes?** My proposal: `enter` on a task writes `watching = AUD-163` into the project's `harness.toml` and asks TUIOS to switch to the reply page; the reply, log and diff panes watch that file and reload when it changes. One fact, one owner, no message bus — but it means a file is the hand-off, so say if you would rather each pane be told directly.
|
||||
|
||||
Also still open from earlier: whether the four screens stay four workspaces or become two.
|
||||
|
||||
Say which layout you want, and I will build it — starting with the width-driven choice, since that is what makes it survive being used in a small pane.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 86%
|
||||
- Reason: Preserve full sanitized discovery detail from a rich investigation turn
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
type: session
|
||||
id: session.paperclip-harness.ui-interface-spec-and-mockup-session-snapshot
|
||||
title: UI interface spec and mockup session snapshot
|
||||
status: active
|
||||
source_of_truth: false
|
||||
freshness: current
|
||||
last_reviewed: 2026-11-10
|
||||
tags:
|
||||
- pack/paperclip-harness
|
||||
- agent-memory/session
|
||||
- session
|
||||
- paperclip-harness
|
||||
- ui-layout
|
||||
- tuios
|
||||
---
|
||||
|
||||
# UI interface spec and mockup session snapshot
|
||||
|
||||
Rich discovery/planning session for paperclip-harness UI:
|
||||
- Read TML surface rules (roles not hex, state bindings, action set, size limits 256 KiB/5,000 nodes/depth 32/1 MiB state/64 KiB patch/8 surfaces per pane).
|
||||
- Authored docs/UI-LAYOUT.md tying every displayed fact to one owner (issue list, blockers, comments, runs, cost-summary, git worktree, .harness/harness.toml).
|
||||
- Built and verified three layouts A/B/C as text, PNG, and live TUIOS workspaces mock-A/B/C at 88x26; recommended width-driven C→B→A with a sub-80x24 'too small' screen.
|
||||
- Environment notes: display-less sessions block screenshots and clipboard; Explore subagent on claude-haiku-4.5 404s.
|
||||
- Outstanding: user must pick layout and resolve diff-pane placement, harness.toml watch-file hand-off, and 4-vs-2 workspaces.
|
||||
|
||||
## Evidence
|
||||
|
||||
- Confidence: 80%
|
||||
- Reason: Sanitized snapshot of a rich discovery/planning turn with durable details.
|
||||
|
||||
## Related
|
||||
|
||||
- [[packs/paperclip-harness/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||||
|
||||
## Related learned memories <!-- same-turn-2026-11-10 01:47:01 -->
|
||||
|
||||
- context: [[packs/paperclip-harness/20-context/paperclip-harness|paperclip-harness]]
|
||||
- context: [[packs/paperclip-harness/20-context/docs-ui-layout-md-interface-spec|docs/UI-LAYOUT.md interface spec]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/mockup-layouts-a-b-c-measured-widths-and-screenshot-workflow|Mockup layouts A/B/C measured widths and screenshot workflow]]
|
||||
- decision: [[packs/paperclip-harness/50-decisions/responsive-layout-selection-by-pane-width-c-b-a|Responsive layout selection by pane width (C→B→A)]]
|
||||
- action: [[packs/paperclip-harness/40-actions/2026-11-10-wrote-docs-ui-layout-md-and-three-live-layout-mockups|Wrote docs/UI-LAYOUT.md and three live layout mockups]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/ui-interface-spec-and-mockup-session-snapshot|UI interface spec and mockup session snapshot]]
|
||||
- session: [[packs/paperclip-harness/80-sessions/rich-discovery-tmp-2026-11-10-01-47-01|Rich discovery: tmp 2026-11-10 01:47:01]]
|
||||
- context: [[packs/paperclip-harness/20-context/tmp|tmp]]
|
||||
- observation: [[packs/paperclip-harness/60-observations/tmp-repository-structure-and-configuration-patterns|tmp repository structure and configuration patterns]]
|
||||
Reference in New Issue
Block a user