@cueloop/client 0.1.0-alpha.3 → 0.1.0-alpha.31

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.
Files changed (105) hide show
  1. package/package.json +17 -11
  2. package/src/App.autoclose.test.tsx +133 -0
  3. package/src/App.diff.test.tsx +27 -20
  4. package/src/App.export.test.tsx +19 -28
  5. package/src/App.plan-review.test.tsx +507 -0
  6. package/src/App.readonly.test.tsx +26 -27
  7. package/src/App.rendering.test.tsx +119 -0
  8. package/src/App.review-panel.test.tsx +123 -0
  9. package/src/App.submit-confirm.test.tsx +216 -0
  10. package/src/App.test.tsx +83 -64
  11. package/src/App.tsx +0 -0
  12. package/src/App.walk.test.tsx +265 -0
  13. package/src/attribution.test.ts +31 -0
  14. package/src/attribution.ts +32 -0
  15. package/src/clipboard.test.ts +23 -0
  16. package/src/clipboard.ts +26 -0
  17. package/src/components/AnnotationCard.compose-rows.test.ts +49 -0
  18. package/src/components/AnnotationCard.stories.tsx +75 -0
  19. package/src/components/AnnotationCard.tsx +208 -0
  20. package/src/components/Breadcrumb.stories.tsx +19 -0
  21. package/src/components/Breadcrumb.tsx +38 -0
  22. package/src/components/CodeBlock.stories.tsx +25 -0
  23. package/src/components/CodeBlock.tsx +68 -0
  24. package/src/components/CompletionOverlay.stories.tsx +23 -0
  25. package/src/components/CompletionOverlay.tsx +49 -0
  26. package/src/components/ComposeBar.stories.tsx +18 -0
  27. package/src/components/ComposeBar.tsx +54 -0
  28. package/src/components/ConfirmCard.stories.tsx +37 -0
  29. package/src/components/ConfirmCard.tsx +117 -0
  30. package/src/components/ConfirmDialog.stories.tsx +21 -0
  31. package/src/components/ConfirmDialog.tsx +56 -0
  32. package/src/components/DiffSheet.stories.tsx +44 -0
  33. package/src/components/DiffSheet.tsx +243 -0
  34. package/src/components/InboxList.stories.tsx +18 -0
  35. package/src/components/InboxList.tsx +55 -0
  36. package/src/components/PlanSheet.stories.tsx +81 -0
  37. package/src/components/PlanSheet.tsx +329 -0
  38. package/src/components/PromptDialog.stories.tsx +36 -0
  39. package/src/components/PromptDialog.tsx +62 -0
  40. package/src/components/ReviewPanel.stories.tsx +87 -0
  41. package/src/components/ReviewPanel.tsx +116 -0
  42. package/src/components/ReviewRail.stories.tsx +107 -0
  43. package/src/components/ReviewRail.tsx +180 -0
  44. package/src/components/SettingsDialog.stories.tsx +63 -0
  45. package/src/components/SettingsDialog.tsx +132 -0
  46. package/src/components/SettingsRows.stories.tsx +18 -0
  47. package/src/components/SettingsRows.tsx +92 -0
  48. package/src/components/WalkWizard.stories.tsx +89 -0
  49. package/src/components/WalkWizard.tsx +146 -0
  50. package/src/components/__snapshots__/stories.test.tsx.snap +1519 -0
  51. package/src/components/primitives/Button.stories.tsx +32 -0
  52. package/src/components/primitives/Button.tsx +44 -0
  53. package/src/components/primitives/Card.stories.tsx +25 -0
  54. package/src/components/primitives/Card.tsx +59 -0
  55. package/src/components/primitives/Dialog.stories.tsx +24 -0
  56. package/src/components/primitives/Dialog.tsx +54 -0
  57. package/src/components/primitives/StatusBar.stories.tsx +11 -0
  58. package/src/components/primitives/StatusBar.tsx +22 -0
  59. package/src/components/primitives/Tabs.stories.tsx +29 -0
  60. package/src/components/primitives/Tabs.tsx +97 -0
  61. package/src/components/primitives/Toolbar.stories.tsx +17 -0
  62. package/src/components/primitives/Toolbar.tsx +14 -0
  63. package/src/components/primitives/frame.test.ts +12 -0
  64. package/src/components/primitives/frame.ts +14 -0
  65. package/src/components/stories-app.tsx +95 -0
  66. package/src/components/stories.test.tsx +60 -0
  67. package/src/components/story-fixtures.ts +90 -0
  68. package/src/components/story.ts +66 -0
  69. package/src/components/syntax-highlight.ts +57 -0
  70. package/src/components/theme-context.stories.tsx +41 -0
  71. package/src/components/theme-context.tsx +30 -0
  72. package/src/components/truncate-text.ts +6 -0
  73. package/src/config.test.ts +196 -30
  74. package/src/config.ts +128 -16
  75. package/src/editor.test.ts +134 -0
  76. package/src/editor.ts +101 -13
  77. package/src/herdr.test.ts +41 -0
  78. package/src/herdr.ts +21 -0
  79. package/src/index.ts +2 -0
  80. package/src/integrations.test.ts +41 -0
  81. package/src/integrations.ts +28 -0
  82. package/src/intent-dispatch.test.ts +308 -0
  83. package/src/intent-dispatch.ts +295 -0
  84. package/src/key-bindings.test.ts +142 -0
  85. package/src/key-bindings.ts +363 -0
  86. package/src/keymap.test.ts +477 -0
  87. package/src/keymap.ts +272 -0
  88. package/src/review-panel.test.ts +111 -0
  89. package/src/review-panel.ts +76 -0
  90. package/src/run.ts +9 -5
  91. package/src/serve.test.ts +13 -6
  92. package/src/serve.ts +7 -7
  93. package/src/session-controller.share.test.ts +248 -0
  94. package/src/session-controller.ts +607 -0
  95. package/src/share.ts +80 -0
  96. package/src/test-support.ts +87 -0
  97. package/src/theme.ts +26 -3
  98. package/src/view-diff.test.ts +19 -8
  99. package/src/view-diff.ts +22 -22
  100. package/src/view-plan.test.ts +260 -0
  101. package/src/view-plan.ts +365 -0
  102. package/src/walk.test.ts +116 -0
  103. package/src/walk.ts +65 -0
  104. package/src/view.test.ts +0 -157
  105. package/src/view.ts +0 -0
package/src/keymap.ts ADDED
@@ -0,0 +1,272 @@
1
+ /**
2
+ * The keyboard grammar as a pure reducer: view state in, intents out.
3
+ * App builds a KeyState per key event, calls reduceKey, and dispatches the
4
+ * intents to controller verbs and view-state setters - no branch bodies live
5
+ * in the key handler. Diff and plan reviews share one path for annotation
6
+ * navigation, deletion, and submit; the read-only rule is one gate here.
7
+ */
8
+
9
+ import { actionFor } from "./config";
10
+
11
+ export type Intent =
12
+ | { type: "exit" }
13
+ | { type: "status"; message: string }
14
+ | { type: "move"; to: "down" | "up" | "top" | "bottom" }
15
+ | { type: "inboxMove"; to: "down" | "up" }
16
+ | { type: "openSession" }
17
+ | { type: "requestDeleteSession" }
18
+ | { type: "openRename" }
19
+ | { type: "confirmDialog" }
20
+ | { type: "startSpan" }
21
+ | { type: "spanKey"; name: string }
22
+ | { type: "openCompose"; kind: "comment" | "suggestion"; from: "cursor" | "span" }
23
+ | { type: "openSubmit" }
24
+ | { type: "share" }
25
+ | { type: "cut" }
26
+ | { type: "edit" }
27
+ | { type: "editCard" }
28
+ | { type: "nextAnnotation" }
29
+ | { type: "prevAnnotation" }
30
+ | { type: "walkStart" }
31
+ | { type: "walkForward" }
32
+ | { type: "walkBack" }
33
+ | { type: "walkLeave" }
34
+ | { type: "removeAnnotation" }
35
+ | { type: "deselect" }
36
+ | { type: "closeOverlay" }
37
+ | { type: "saveCompose" }
38
+ | { type: "submitVerdict" }
39
+ | { type: "cycleVerdict"; direction: -1 | 1 }
40
+ | { type: "finishReview" }
41
+ | { type: "optInAutoClose" }
42
+ | { type: "dismissCompletion" }
43
+ | { type: "cycleReviewPanel" }
44
+ | { type: "resizeReviewPanel"; direction: -1 | 1 };
45
+
46
+ export interface KeyInput {
47
+ name: string;
48
+ shift: boolean;
49
+ /** Option/Alt arrives as `meta` in this terminal stack (never as a raw alt). */
50
+ meta?: boolean;
51
+ }
52
+
53
+ export interface KeyState {
54
+ /** Loaded keymap (config.ts): action -> key combos. */
55
+ keys: Record<string, string[]>;
56
+ readOnly: boolean;
57
+ /**
58
+ * Owner-only verbs a share collaborator lacks (undefined = owner, allowed).
59
+ * A collaborator annotates but cannot edit the plan (cut / $EDITOR runs on
60
+ * the gateway) or submit an agent verdict (there is no agent on a share).
61
+ */
62
+ canEditPlan?: boolean;
63
+ canSubmitVerdict?: boolean;
64
+ /** Owner-only: publish the plan as a share. A collaborator never re-shares. */
65
+ canShare?: boolean;
66
+ /** Layer that owns keys before the grammar runs. */
67
+ overlay: "none" | "walk" | "compose" | "submit" | "confirm" | "prompt" | "completion-prompt" | "completion-counting";
68
+ view: "inbox" | "plan" | "diff";
69
+ /** Plan-only span selection sub-mode. */
70
+ spanMode: boolean;
71
+ /** The walk cursor sits on the end card - return offers the submit action. */
72
+ walkAtEnd: boolean;
73
+ resolved: boolean;
74
+ hasInboxItems: boolean;
75
+ annotationCount: number;
76
+ hasFocusedAnnotation: boolean;
77
+ /** Cursor sits on annotatable text: a work block (plan) or a code row (diff). */
78
+ cursorAnnotatable: boolean;
79
+ }
80
+
81
+ /** Verbs that write session state; an observer never reaches their handlers. */
82
+ const MUTATING_ACTIONS = new Set(["comment", "suggest", "cut", "edit", "delete_annotation", "submit", "walk", "share"]);
83
+
84
+ const SPAN_KEYS = ["l", "h", "w", "b", "$", "0"];
85
+
86
+ function status(message: string): Intent[] {
87
+ return [{ type: "status", message }];
88
+ }
89
+
90
+ /**
91
+ * Reduce one key event to intents. `resolvedAction` is the binding-layer
92
+ * resolution (key-bindings.ts over @opentui/keymap) when the caller has one;
93
+ * without it the reducer falls back to the plain reverse lookup, so the
94
+ * grammar stays testable as a pure function.
95
+ */
96
+ export function reduceKey(state: KeyState, key: KeyInput, resolvedAction?: string): Intent[] {
97
+ const name = key.name;
98
+ // compose/submit overlays own the keys via focused inputs; only escape,
99
+ // return, and verdict arrows route through the grammar
100
+ if (state.overlay === "compose" || state.overlay === "submit") {
101
+ if (name === "escape") return [{ type: "closeOverlay" }];
102
+ if (name === "return" || name === "enter") {
103
+ // In the composer, ⌥/Alt+⏎ (meta) and shift+⏎ insert a newline - the
104
+ // focused textarea owns that; only a bare ⏎ saves. The submit overlay
105
+ // keeps its plain ⏎ submit.
106
+ if (state.overlay === "compose") {
107
+ if (key.shift || key.meta) return [];
108
+ return [{ type: "saveCompose" }];
109
+ }
110
+ return [{ type: "submitVerdict" }];
111
+ }
112
+ if (state.overlay === "submit" && (name === "left" || name === "right")) {
113
+ return [{ type: "cycleVerdict", direction: name === "left" ? -1 : 1 }];
114
+ }
115
+ return [];
116
+ }
117
+ // a modal confirm owns the keys: ⏎ commits the action, escape backs out
118
+ if (state.overlay === "confirm") {
119
+ if (name === "return" || name === "enter") return [{ type: "confirmDialog" }];
120
+ if (name === "escape") return [{ type: "closeOverlay" }];
121
+ return [];
122
+ }
123
+ // a text prompt: the focused input owns typing; only ⏎ save and esc route here
124
+ if (state.overlay === "prompt") {
125
+ if (name === "return" || name === "enter") return [{ type: "confirmDialog" }];
126
+ if (name === "escape") return [{ type: "closeOverlay" }];
127
+ return [];
128
+ }
129
+ if (state.overlay === "completion-prompt" || state.overlay === "completion-counting") {
130
+ if (name === "return" || name === "enter" || name === "q") return [{ type: "finishReview" }];
131
+ if (name === "a") return [{ type: "optInAutoClose" }];
132
+ if (name === "escape") return [{ type: "dismissCompletion" }];
133
+ return [];
134
+ }
135
+ // the walk wizard owns its keys while active: ] advances (marking the
136
+ // current file viewed), [ steps back, escape leaves keeping progress, and
137
+ // return on the end card hands over to the submit confirm
138
+ if (state.overlay === "walk") {
139
+ if (name === "]") return [{ type: "walkForward" }];
140
+ if (name === "[") return [{ type: "walkBack" }];
141
+ if (name === "escape") return [{ type: "walkLeave" }];
142
+ if ((name === "return" || name === "enter") && state.walkAtEnd) {
143
+ return [{ type: "walkLeave" }, { type: "openSubmit" }];
144
+ }
145
+ if (name === "q") return [{ type: "exit" }];
146
+ return [];
147
+ }
148
+ const action = resolvedAction ?? actionFor(state.keys, name, key.shift);
149
+ if (action === "quit") return [{ type: "exit" }];
150
+ // the ONE read-only rule: any mutating attempt answers instead of acting
151
+ // (span-mode c/s are hardwired keys, so they gate by name as well)
152
+ const mutating = MUTATING_ACTIONS.has(action ?? "") || (state.spanMode && (name === "c" || name === "s"));
153
+ if (state.readOnly && mutating) return status("observer - read-only");
154
+
155
+ // share is a session-level verb: it works from any view, owner only
156
+ if (action === "share") {
157
+ if (state.canShare === false) return status("only the plan owner can share");
158
+ return [{ type: "share" }];
159
+ }
160
+
161
+ if (state.view === "inbox") return inboxGrammar(state, name);
162
+ // span mode owns its single-letter keys (b slides the span back) before the
163
+ // review-panel controls claim them
164
+ if (state.spanMode) return spanGrammar(name);
165
+ // the review panel rides both plan and diff reviews; collapsing and resizing
166
+ // are view state, so the read-only gate above lets them through
167
+ const reviewPanel = reviewPanelGrammar(action);
168
+ if (reviewPanel) return reviewPanel;
169
+ if (state.view === "diff") return diffGrammar(state, action);
170
+ return planGrammar(state, action, name);
171
+ }
172
+
173
+ /** The review-panel controls: cycle the mode, widen and narrow the rail. */
174
+ function reviewPanelGrammar(action: string | undefined): Intent[] | null {
175
+ if (action === "review_cycle") return [{ type: "cycleReviewPanel" }];
176
+ if (action === "review_wider") return [{ type: "resizeReviewPanel", direction: 1 }];
177
+ if (action === "review_narrower") return [{ type: "resizeReviewPanel", direction: -1 }];
178
+ return null;
179
+ }
180
+
181
+ function inboxGrammar(state: KeyState, name: string): Intent[] {
182
+ if (!state.hasInboxItems) return [];
183
+ if (name === "j" || name === "down") return [{ type: "inboxMove", to: "down" }];
184
+ if (name === "k" || name === "up") return [{ type: "inboxMove", to: "up" }];
185
+ if (name === "return" || name === "enter") return [{ type: "openSession" }];
186
+ if (name === "d") return [{ type: "requestDeleteSession" }];
187
+ return [];
188
+ }
189
+
190
+ function diffGrammar(state: KeyState, action: string | undefined): Intent[] {
191
+ const navigation = navigationIntent(action);
192
+ if (navigation) return navigation;
193
+ if (action === "walk") {
194
+ // marking viewed writes the session record, so a resolved review answers
195
+ if (state.resolved) return status("review submitted - read-only");
196
+ return [{ type: "walkStart" }];
197
+ }
198
+ if (action === "comment") {
199
+ if (state.resolved) return status("review submitted - read-only");
200
+ if (!state.cursorAnnotatable) return status("move to a code line to comment");
201
+ return [{ type: "openCompose", kind: "comment", from: "cursor" }];
202
+ }
203
+ const shared = annotationCluster(state, action);
204
+ if (shared) return shared;
205
+ if (action === "span" || action === "cut" || action === "edit" || action === "suggest") {
206
+ return status("plan-only verb - diff review uses c on a line");
207
+ }
208
+ return [];
209
+ }
210
+
211
+ function spanGrammar(name: string): Intent[] {
212
+ if (name === "escape") return [{ type: "closeOverlay" }];
213
+ if (SPAN_KEYS.includes(name)) return [{ type: "spanKey", name }];
214
+ if (name === "c" || name === "s") {
215
+ return [{ type: "openCompose", kind: name === "s" ? "suggestion" : "comment", from: "span" }];
216
+ }
217
+ return [];
218
+ }
219
+
220
+ function planGrammar(state: KeyState, action: string | undefined, name: string): Intent[] {
221
+ const navigation = navigationIntent(action);
222
+ if (navigation) return navigation;
223
+ if (action === "walk") return status("the guided walk is a diff-review mode");
224
+ if (name === "escape") return [{ type: "deselect" }];
225
+ if (action === "span") return state.cursorAnnotatable ? [{ type: "startSpan" }] : [];
226
+ if (action === "comment" || action === "suggest") {
227
+ if (state.resolved) return status("review submitted - read-only");
228
+ if (!state.cursorAnnotatable) return status("text is cut - restore it first");
229
+ return [{ type: "openCompose", kind: action === "suggest" ? "suggestion" : "comment", from: "cursor" }];
230
+ }
231
+ if (action === "cut" || action === "edit") {
232
+ if (state.resolved) return status("review submitted - read-only");
233
+ // the document selects, the rail edits: with a card selected, Cut deletes
234
+ // the annotation and edit rewrites the card body in place
235
+ if (state.hasFocusedAnnotation) return [action === "cut" ? { type: "removeAnnotation" } : { type: "editCard" }];
236
+ // editing the plan itself is the owner's verb; a share viewer only annotates,
237
+ // and has no edit affordance, so the key is silent rather than a nag
238
+ if (state.canEditPlan === false) return [];
239
+ return [{ type: action }];
240
+ }
241
+ return annotationCluster(state, action) ?? [];
242
+ }
243
+
244
+ /** Cursor movement is the same intent everywhere; views clamp their own bounds. */
245
+ function navigationIntent(action: string | undefined): Intent[] | null {
246
+ if (action === "down" || action === "up" || action === "top" || action === "bottom") {
247
+ return [{ type: "move", to: action }];
248
+ }
249
+ return null;
250
+ }
251
+
252
+ /** Annotation navigation, deletion, and submit: one path for plan and diff. */
253
+ function annotationCluster(state: KeyState, action: string | undefined): Intent[] | null {
254
+ if (action === "next_annotation" || action === "prev_annotation") {
255
+ if (!state.annotationCount) return status("no annotations");
256
+ return [{ type: action === "next_annotation" ? "nextAnnotation" : "prevAnnotation" }];
257
+ }
258
+ if (action === "delete_annotation") {
259
+ if (state.resolved || !state.hasFocusedAnnotation) return [];
260
+ return [{ type: "removeAnnotation" }];
261
+ }
262
+ if (action === "rename") {
263
+ if (!state.hasFocusedAnnotation) return status("select a collaborator's note to rename them");
264
+ return [{ type: "openRename" }];
265
+ }
266
+ if (action === "submit") {
267
+ // a collaborator's notes union back as they go; there is no verdict to submit
268
+ if (state.canSubmitVerdict === false) return status("shared view - your notes save as you go; q to leave");
269
+ return state.resolved ? [] : [{ type: "openSubmit" }];
270
+ }
271
+ return null;
272
+ }
@@ -0,0 +1,111 @@
1
+ import { describe, expect, test } from "bun:test";
2
+ import {
3
+ REVIEW_DEFAULT_WIDTH,
4
+ REVIEW_MAX_WIDTH,
5
+ REVIEW_MIN_WIDTH,
6
+ REVIEW_PLAN_MIN_WIDTH,
7
+ REVIEW_RESIZE_STEP,
8
+ clampWidth,
9
+ cycleReviewPanelMode,
10
+ maxWidthForTerminal,
11
+ resolveReviewWidth,
12
+ reviewRowsToDivider,
13
+ toggleReviewPanelMode,
14
+ widthFromMouseColumn,
15
+ } from "./review-panel";
16
+
17
+ describe("clampWidth", () => {
18
+ test("keeps a width inside the bounds untouched", () => {
19
+ expect(clampWidth(REVIEW_DEFAULT_WIDTH)).toBe(REVIEW_DEFAULT_WIDTH);
20
+ });
21
+
22
+ test("clamps below the minimum and above the maximum", () => {
23
+ expect(clampWidth(REVIEW_MIN_WIDTH - 10)).toBe(REVIEW_MIN_WIDTH);
24
+ expect(clampWidth(REVIEW_MAX_WIDTH + 10)).toBe(REVIEW_MAX_WIDTH);
25
+ });
26
+
27
+ test("rounds a fractional column to a whole one", () => {
28
+ expect(clampWidth(30.7)).toBe(31);
29
+ });
30
+
31
+ test("honors explicit bounds", () => {
32
+ expect(clampWidth(100, 10, 20)).toBe(20);
33
+ expect(clampWidth(5, 10, 20)).toBe(10);
34
+ });
35
+ });
36
+
37
+ describe("cycleReviewPanelMode", () => {
38
+ test("cycles expanded -> compact -> hidden -> expanded", () => {
39
+ expect(cycleReviewPanelMode("expanded")).toBe("compact");
40
+ expect(cycleReviewPanelMode("compact")).toBe("hidden");
41
+ expect(cycleReviewPanelMode("hidden")).toBe("expanded");
42
+ });
43
+ });
44
+
45
+ describe("toggleReviewPanelMode", () => {
46
+ test("the chevron toggles only between expanded and compact, never hidden", () => {
47
+ expect(toggleReviewPanelMode("expanded")).toBe("compact");
48
+ expect(toggleReviewPanelMode("compact")).toBe("expanded");
49
+ // a hidden panel has no chevron; a stray toggle still opens it
50
+ expect(toggleReviewPanelMode("hidden")).toBe("expanded");
51
+ });
52
+ });
53
+
54
+ describe("widthFromMouseColumn", () => {
55
+ test("measures the rail from the mouse column to the right edge", () => {
56
+ // divider dragged to column 80 of a 120-wide terminal -> a 40-col rail
57
+ expect(widthFromMouseColumn(80, 120)).toBe(40);
58
+ });
59
+
60
+ test("clamps the dragged width to the bounds", () => {
61
+ expect(widthFromMouseColumn(0, 120)).toBe(REVIEW_MAX_WIDTH);
62
+ expect(widthFromMouseColumn(119, 120)).toBe(REVIEW_MIN_WIDTH);
63
+ });
64
+
65
+ test("cannot drag the rail wide enough to starve the plan on a narrow terminal", () => {
66
+ // dragging to the far left edge of a 60-col terminal still leaves the plan its minimum
67
+ expect(widthFromMouseColumn(0, 60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
68
+ });
69
+
70
+ test("the resize step widens and narrows within the clamp", () => {
71
+ expect(clampWidth(REVIEW_DEFAULT_WIDTH + REVIEW_RESIZE_STEP)).toBe(REVIEW_DEFAULT_WIDTH + REVIEW_RESIZE_STEP);
72
+ expect(clampWidth(REVIEW_MIN_WIDTH - REVIEW_RESIZE_STEP)).toBe(REVIEW_MIN_WIDTH);
73
+ });
74
+ });
75
+
76
+ describe("maxWidthForTerminal", () => {
77
+ test("allows the full rail on a wide terminal", () => {
78
+ expect(maxWidthForTerminal(120)).toBe(REVIEW_MAX_WIDTH);
79
+ });
80
+
81
+ test("reserves the plan its minimum on a narrow terminal", () => {
82
+ // 60-col terminal: 30 for the plan and 1 for the divider leaves 29 for the rail
83
+ expect(maxWidthForTerminal(60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
84
+ });
85
+
86
+ test("never drops below the rail minimum, however narrow the terminal", () => {
87
+ expect(maxWidthForTerminal(40)).toBe(REVIEW_MIN_WIDTH);
88
+ });
89
+ });
90
+
91
+ describe("resolveReviewWidth", () => {
92
+ test("leaves a width that already fits untouched", () => {
93
+ expect(resolveReviewWidth(REVIEW_DEFAULT_WIDTH, 120)).toBe(REVIEW_DEFAULT_WIDTH);
94
+ });
95
+
96
+ test("shrinks a wide persisted width so the plan keeps its room", () => {
97
+ // a saved 50-col rail on a 60-col terminal would leave the plan 9 cols; clamp it back
98
+ expect(resolveReviewWidth(REVIEW_MAX_WIDTH, 60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
99
+ });
100
+ });
101
+
102
+ describe("reviewRowsToDivider", () => {
103
+ test("builds one vertical glyph per row", () => {
104
+ expect(reviewRowsToDivider(3)).toBe("│\n│\n│");
105
+ });
106
+
107
+ test("never collapses to an empty column", () => {
108
+ expect(reviewRowsToDivider(0)).toBe("│");
109
+ expect(reviewRowsToDivider(-4)).toBe("│");
110
+ });
111
+ });
@@ -0,0 +1,76 @@
1
+ /**
2
+ * Pure geometry and state for the resizable review panel. The panel shows the
3
+ * review rail in one of three modes and the expanded rail resizes within a
4
+ * clamp; App owns the React state and the mouse wiring, this module owns the
5
+ * arithmetic so the layout math stays unit-tested and out of the JSX. Bounds
6
+ * and the compact width carry over verbatim from the approved prototype.
7
+ */
8
+
9
+ /** Expanded (full rail), compact (count + dots strip), or hidden (nothing). */
10
+ export type ReviewPanelMode = "expanded" | "compact" | "hidden";
11
+
12
+ /** Expanded-rail width bounds, in terminal columns. */
13
+ export const REVIEW_MIN_WIDTH = 24;
14
+ export const REVIEW_MAX_WIDTH = 50;
15
+ export const REVIEW_DEFAULT_WIDTH = 34;
16
+ /**
17
+ * Columns the plan/diff column keeps for itself: the expanded rail yields past
18
+ * this so a narrow terminal (or a wide persisted width) can never crowd the
19
+ * plan out to nothing - the whole reason the panel is resizable. On terminals
20
+ * wide enough for the full 50-col rail this bound never binds.
21
+ */
22
+ export const REVIEW_PLAN_MIN_WIDTH = 30;
23
+ /** The compact strip is a fixed narrow column: count on top, one dot per card. */
24
+ export const REVIEW_COMPACT_WIDTH = 6;
25
+ /** Keyboard resize step, in columns, for the widen/narrow keys. */
26
+ export const REVIEW_RESIZE_STEP = 2;
27
+
28
+ /** Round a desired width to a whole column and clamp it to the bounds. */
29
+ export function clampWidth(desiredWidth: number, min = REVIEW_MIN_WIDTH, max = REVIEW_MAX_WIDTH): number {
30
+ return Math.max(min, Math.min(max, Math.round(desiredWidth)));
31
+ }
32
+
33
+ /**
34
+ * The widest the expanded rail may be on a given terminal, reserving the plan
35
+ * its minimum and one column for the divider. Never drops below REVIEW_MIN_WIDTH
36
+ * (an extremely narrow terminal is the auto-collapse case, handled elsewhere).
37
+ */
38
+ export function maxWidthForTerminal(terminalWidth: number): number {
39
+ return Math.max(REVIEW_MIN_WIDTH, Math.min(REVIEW_MAX_WIDTH, terminalWidth - REVIEW_PLAN_MIN_WIDTH - 1));
40
+ }
41
+
42
+ /** Clamp a desired rail width to the bounds AND the terminal, so the plan keeps its room. */
43
+ export function resolveReviewWidth(desiredWidth: number, terminalWidth: number): number {
44
+ return clampWidth(desiredWidth, REVIEW_MIN_WIDTH, maxWidthForTerminal(terminalWidth));
45
+ }
46
+
47
+ /** The keybinding cycle: expanded -> compact -> hidden -> expanded. */
48
+ export function cycleReviewPanelMode(mode: ReviewPanelMode): ReviewPanelMode {
49
+ return mode === "expanded" ? "compact" : mode === "compact" ? "hidden" : "expanded";
50
+ }
51
+
52
+ /**
53
+ * The clickable chevron toggles only between expanded and compact - hidden is
54
+ * reachable by keybinding alone, so it never leaves a leftover tab behind. A
55
+ * toggle from hidden still opens the panel rather than doing nothing.
56
+ */
57
+ export function toggleReviewPanelMode(mode: ReviewPanelMode): ReviewPanelMode {
58
+ return mode === "expanded" ? "compact" : "expanded";
59
+ }
60
+
61
+ /**
62
+ * Rail width from an absolute mouse column while dragging the divider: the rail
63
+ * spans from the mouse column to the terminal's right edge, then clamps.
64
+ */
65
+ export function widthFromMouseColumn(mouseColumn: number, terminalWidth: number): number {
66
+ return resolveReviewWidth(terminalWidth - mouseColumn, terminalWidth);
67
+ }
68
+
69
+ /**
70
+ * The divider is a single-column stack of vertical glyphs (a text block, not a
71
+ * bordered box - a one-column box with a border renders a full box). One glyph
72
+ * per row, at least one so the column never collapses.
73
+ */
74
+ export function reviewRowsToDivider(rows: number): string {
75
+ return Array.from({ length: Math.max(1, rows) }, () => "│").join("\n");
76
+ }
package/src/run.ts CHANGED
@@ -10,17 +10,21 @@ export interface RunClientOptions {
10
10
  home?: string;
11
11
  }
12
12
 
13
- export async function runClient(opts: RunClientOptions): Promise<number> {
14
- const renderer = await createCliRenderer();
13
+ export async function runClient(options: RunClientOptions): Promise<number> {
14
+ // mouse movement reporting makes multiplexers forward drags to the app,
15
+ // so the renderer's native selection is the drag driver
16
+ const renderer = await createCliRenderer({ enableMouseMovement: true });
15
17
  return new Promise<number>((resolve) => {
16
18
  createRoot(renderer).render(
17
19
  React.createElement(App, {
18
- home: opts.home,
19
- sessionId: opts.sessionId,
20
+ home: options.home,
21
+ sessionId: options.sessionId,
20
22
  onExit: (code: number) => {
21
23
  renderer.destroy();
22
24
  resolve(code);
23
- process.exit(code);
25
+ // one microtask between destroy and exit lets the renderer flush
26
+ // its terminal-restore sequences before the process dies
27
+ queueMicrotask(() => process.exit(code));
24
28
  },
25
29
  }),
26
30
  );
package/src/serve.test.ts CHANGED
@@ -38,7 +38,7 @@ afterEach(async () => {
38
38
  });
39
39
 
40
40
  /** Connect, open a PTY shell, resolve with the bytes seen until `until` matches. */
41
- function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 8000): Promise<string> {
41
+ function sshCapture(port: number, until: (frame: string) => boolean, timeoutMs = 8000): Promise<string> {
42
42
  return new Promise((resolve, reject) => {
43
43
  const conn = new Client();
44
44
  let out = "";
@@ -55,8 +55,8 @@ function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 800
55
55
  .on("ready", () => {
56
56
  conn.shell({ term: "xterm-256color", cols: 100, rows: 30 }, (err, stream) => {
57
57
  if (err) return finish(err);
58
- stream.on("data", (d: Buffer) => {
59
- out += d.toString("utf8");
58
+ stream.on("data", (chunk: Buffer) => {
59
+ out += chunk.toString("utf8");
60
60
  if (until(out)) finish();
61
61
  });
62
62
  stream.on("close", () => finish(new Error(`stream closed early; captured:\n${out}`)));
@@ -70,6 +70,7 @@ function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 800
70
70
 
71
71
  describe("cueloop serve", () => {
72
72
  test("listens on localhost, persists a host key under CUELOOP_HOME/ssh", () => {
73
+ // Assert
73
74
  expect(handle.host).toBe("127.0.0.1");
74
75
  expect(handle.port).toBeGreaterThan(0);
75
76
  expect(handle.fingerprints.length).toBe(1);
@@ -78,7 +79,10 @@ describe("cueloop serve", () => {
78
79
  });
79
80
 
80
81
  test("an anonymous ssh client gets the observer TUI for the session", async () => {
81
- const bytes = await sshCapture(handle.port, (s) => s.includes("Rollout Plan") && s.includes("observer"));
82
+ // Act
83
+ const bytes = await sshCapture(handle.port, (frame) => frame.includes("Rollout Plan") && frame.includes("observer"));
84
+
85
+ // Assert
82
86
  expect(bytes).toContain("cueloop");
83
87
  expect(bytes).toContain("Rollout Plan");
84
88
  // observer chrome, not the controller's mutating hint bar
@@ -86,10 +90,13 @@ describe("cueloop serve", () => {
86
90
  });
87
91
 
88
92
  test("two observers can watch at once", async () => {
93
+ // Act
89
94
  const [a, b] = await Promise.all([
90
- sshCapture(handle.port, (s) => s.includes("Rollout Plan")),
91
- sshCapture(handle.port, (s) => s.includes("Rollout Plan")),
95
+ sshCapture(handle.port, (frame) => frame.includes("Rollout Plan")),
96
+ sshCapture(handle.port, (frame) => frame.includes("Rollout Plan")),
92
97
  ]);
98
+
99
+ // Assert
93
100
  expect(a).toContain("Rollout Plan");
94
101
  expect(b).toContain("Rollout Plan");
95
102
  });
package/src/serve.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * SSH-served TUI (#22 share path): `cueloop serve` lets teammates join a
2
+ * SSH-served TUI: `cueloop serve` lets teammates join a
3
3
  * review session over plain ssh. Every SSH connection renders <App> in
4
4
  * observer mode (readOnly) against the same local daemon; the one writable
5
5
  * controller stays the local owner's own `cueloop` TUI.
@@ -44,8 +44,8 @@ export interface ServeHandle {
44
44
  close(): Promise<void>;
45
45
  }
46
46
 
47
- export async function serveClient(opts: ServeOptions = {}): Promise<ServeHandle> {
48
- const home = opts.home ?? cueloopHome();
47
+ export async function serveClient(options: ServeOptions = {}): Promise<ServeHandle> {
48
+ const home = options.home ?? cueloopHome();
49
49
  const sshDir = join(home, "ssh");
50
50
  mkdirSync(sshDir, { recursive: true, mode: 0o700 });
51
51
 
@@ -53,15 +53,15 @@ export async function serveClient(opts: ServeOptions = {}): Promise<ServeHandle>
53
53
  // password-less by design; see the trust model in the module comment
54
54
  auth: "open",
55
55
  hostKey: { path: join(sshDir, "host_key") },
56
- startupBanner: opts.banner ?? true,
56
+ startupBanner: options.banner ?? true,
57
57
  idleTimeout: "2h",
58
- onError: opts.onError,
58
+ onError: options.onError,
59
59
  }).serve((session) => {
60
60
  const root = createRoot(session.renderer);
61
61
  root.render(
62
62
  React.createElement(App, {
63
63
  home,
64
- sessionId: opts.sessionId,
64
+ sessionId: options.sessionId,
65
65
  readOnly: true,
66
66
  // q disconnects only this observer, never the server
67
67
  onExit: () => session.end(),
@@ -70,6 +70,6 @@ export async function serveClient(opts: ServeOptions = {}): Promise<ServeHandle>
70
70
  session.onClose(() => root.unmount());
71
71
  });
72
72
 
73
- const info = await server.listen(opts.port ?? 2222, opts.host ?? "127.0.0.1");
73
+ const info = await server.listen(options.port ?? 2222, options.host ?? "127.0.0.1");
74
74
  return { ...info, close: () => server.close() };
75
75
  }