wireframe T-275 v2: icon-only mode button, passive status indicator, active state
Incorporate review feedback: - Resting control is icon-only; the label moves to the hover tooltip, the status-bar indicator, and the open dropdown rows. - Status-bar mode becomes a passive, colour-coded text indicator (no click-to-cycle) — switching lives in the composer control + Ctrl/Cmd+M. - Add the ACTIVE (turn running) state: the existing Stop row sits above the text box while the mode icon stays trailing it — both visible, no conflict. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -3,33 +3,41 @@
|
||||
"shapes": {
|
||||
"title": {"type": "Text", "left": 40, "top": 24, "text": "T-275 · Permission-mode control beside the Claude composer", "fontColor": "#c8d0e0", "fontSize": 20},
|
||||
|
||||
"secA": {"type": "Text", "left": 40, "top": 66, "text": "RESTING — mode button trailing the composer (per mode)", "fontColor": "#7d8694", "fontSize": 13},
|
||||
"secA": {"type": "Text", "left": 40, "top": 66, "text": "RESTING — icon-only button trailing the composer (label on hover / status bar / open menu)", "fontColor": "#7d8694", "fontSize": 13},
|
||||
|
||||
"a1": {"type": "Rectangle", "left": 40, "top": 96, "width": 600, "height": 72, "fillColor": "#1b1f26", "strokeColor": "#2c323c", "corners": [6, 6, 6, 6]},
|
||||
"a1hint": {"type": "Text", "left": 58, "top": 110, "text": "Message Claude…", "fontColor": "#7d8694", "fontSize": 14},
|
||||
"a1sub": {"type": "Text", "left": 58, "top": 134, "text": "Enter to send · Shift+Enter newline", "fontColor": "#525a64", "fontSize": 11},
|
||||
"a1btn": {"type": "Rectangle", "left": 478, "top": 124, "width": 150, "height": 32, "fillColor": "#20252e", "strokeColor": "#3a414d", "corners": [4, 4, 4, 4]},
|
||||
"a1ic": {"type": "Ellipse", "left": 490, "top": 133, "width": 14, "height": 14, "fillColor": "#7d8694", "strokeColor": "#7d8694"},
|
||||
"a1lbl": {"type": "Text", "left": 512, "top": 131, "text": "default", "fontColor": "#c8d0e0", "fontSize": 13},
|
||||
"a1car": {"type": "Text", "left": 606, "top": 130, "text": "v", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"a1btn": {"type": "Rectangle", "left": 596, "top": 124, "width": 32, "height": 32, "fillColor": "#20252e", "strokeColor": "#3a414d", "corners": [4, 4, 4, 4]},
|
||||
"a1ic": {"type": "Ellipse", "left": 604, "top": 132, "width": 16, "height": 16, "fillColor": "#7d8694", "strokeColor": "#7d8694"},
|
||||
|
||||
"a2": {"type": "Rectangle", "left": 40, "top": 196, "width": 600, "height": 72, "fillColor": "#1b1f26", "strokeColor": "#2c323c", "corners": [6, 6, 6, 6]},
|
||||
"a2hint": {"type": "Text", "left": 58, "top": 210, "text": "Message Claude…", "fontColor": "#7d8694", "fontSize": 14},
|
||||
"a2sub": {"type": "Text", "left": 58, "top": 234, "text": "Enter to send · Shift+Enter newline", "fontColor": "#525a64", "fontSize": 11},
|
||||
"a2btn": {"type": "Rectangle", "left": 478, "top": 224, "width": 150, "height": 32, "fillColor": "#20252e", "strokeColor": "#d8a657", "corners": [4, 4, 4, 4]},
|
||||
"a2ic": {"type": "Ellipse", "left": 490, "top": 233, "width": 14, "height": 14, "fillColor": "#d8a657", "strokeColor": "#d8a657"},
|
||||
"a2lbl": {"type": "Text", "left": 512, "top": 231, "text": "accept-edits", "fontColor": "#c8d0e0", "fontSize": 13},
|
||||
"a2car": {"type": "Text", "left": 606, "top": 230, "text": "v", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"a2tip": {"type": "Rectangle", "left": 470, "top": 222, "width": 112, "height": 24, "fillColor": "#0e1115", "strokeColor": "#3a414d", "corners": [4, 4, 4, 4]},
|
||||
"a2tipt": {"type": "Text", "left": 480, "top": 226, "text": "accept-edits", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"a2hover": {"type": "Text", "left": 470, "top": 250, "text": "(hover tooltip)", "fontColor": "#525a64", "fontSize": 10},
|
||||
"a2btn": {"type": "Rectangle", "left": 596, "top": 224, "width": 32, "height": 32, "fillColor": "#20252e", "strokeColor": "#d8a657", "corners": [4, 4, 4, 4]},
|
||||
"a2ic": {"type": "Ellipse", "left": 604, "top": 232, "width": 16, "height": 16, "fillColor": "#d8a657", "strokeColor": "#d8a657"},
|
||||
|
||||
"a3": {"type": "Rectangle", "left": 40, "top": 296, "width": 600, "height": 72, "fillColor": "#1b1f26", "strokeColor": "#2c323c", "corners": [6, 6, 6, 6]},
|
||||
"a3hint": {"type": "Text", "left": 58, "top": 310, "text": "Message Claude…", "fontColor": "#7d8694", "fontSize": 14},
|
||||
"a3sub": {"type": "Text", "left": 58, "top": 334, "text": "Enter to send · Shift+Enter newline", "fontColor": "#525a64", "fontSize": 11},
|
||||
"a3btn": {"type": "Rectangle", "left": 478, "top": 324, "width": 150, "height": 32, "fillColor": "#20252e", "strokeColor": "#7fb0c8", "corners": [4, 4, 4, 4]},
|
||||
"a3ic": {"type": "Ellipse", "left": 490, "top": 333, "width": 14, "height": 14, "fillColor": "#7fb0c8", "strokeColor": "#7fb0c8"},
|
||||
"a3lbl": {"type": "Text", "left": 512, "top": 331, "text": "plan", "fontColor": "#c8d0e0", "fontSize": 13},
|
||||
"a3car": {"type": "Text", "left": 606, "top": 330, "text": "v", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"a3btn": {"type": "Rectangle", "left": 596, "top": 324, "width": 32, "height": 32, "fillColor": "#20252e", "strokeColor": "#7fb0c8", "corners": [4, 4, 4, 4]},
|
||||
"a3ic": {"type": "Ellipse", "left": 604, "top": 332, "width": 16, "height": 16, "fillColor": "#7fb0c8", "strokeColor": "#7fb0c8"},
|
||||
|
||||
"secB": {"type": "Text", "left": 700, "top": 66, "text": "OPEN — dropdown on click (active marked; bypass guarded)", "fontColor": "#7d8694", "fontSize": 13},
|
||||
"secD": {"type": "Text", "left": 40, "top": 392, "text": "ACTIVE (turn running) — existing Stop row above; mode icon still trails the text box", "fontColor": "#7d8694", "fontSize": 13},
|
||||
"d1": {"type": "Rectangle", "left": 40, "top": 420, "width": 600, "height": 110, "fillColor": "#1b1f26", "strokeColor": "#2c323c", "corners": [6, 6, 6, 6]},
|
||||
"d1run": {"type": "Text", "left": 58, "top": 434, "text": "Pondering…", "fontColor": "#d97757", "fontSize": 13},
|
||||
"d1stop": {"type": "Rectangle", "left": 516, "top": 430, "width": 104, "height": 28, "fillColor": "#2a2320", "strokeColor": "#d97757", "corners": [4, 4, 4, 4]},
|
||||
"d1stopt": {"type": "Text", "left": 534, "top": 436, "text": "Stop esc", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"d1div": {"type": "Rectangle", "left": 56, "top": 466, "width": 568, "height": 1, "fillColor": "#23282f", "strokeColor": "#23282f"},
|
||||
"d1hint": {"type": "Text", "left": 58, "top": 480, "text": "Message Claude…", "fontColor": "#7d8694", "fontSize": 14},
|
||||
"d1sub": {"type": "Text", "left": 58, "top": 504, "text": "Enter to send · Shift+Enter newline", "fontColor": "#525a64", "fontSize": 11},
|
||||
"d1btn": {"type": "Rectangle", "left": 596, "top": 490, "width": 32, "height": 32, "fillColor": "#20252e", "strokeColor": "#3a414d", "corners": [4, 4, 4, 4]},
|
||||
"d1ic": {"type": "Ellipse", "left": 604, "top": 498, "width": 16, "height": 16, "fillColor": "#7d8694", "strokeColor": "#7d8694"},
|
||||
|
||||
"secB": {"type": "Text", "left": 700, "top": 66, "text": "OPEN — dropdown on click (labels live here; active marked; bypass guarded)", "fontColor": "#7d8694", "fontSize": 13},
|
||||
|
||||
"pop": {"type": "Rectangle", "left": 1118, "top": 140, "width": 200, "height": 182, "fillColor": "#1b1f26", "strokeColor": "#3a414d", "corners": [6, 6, 6, 6]},
|
||||
"r1bg": {"type": "Rectangle", "left": 1124, "top": 147, "width": 188, "height": 34, "fillColor": "#232b34", "strokeColor": "#232b34", "corners": [4, 4, 4, 4]},
|
||||
@@ -48,10 +56,8 @@
|
||||
"b1": {"type": "Rectangle", "left": 700, "top": 300, "width": 600, "height": 72, "fillColor": "#1b1f26", "strokeColor": "#2c323c", "corners": [6, 6, 6, 6]},
|
||||
"b1hint": {"type": "Text", "left": 718, "top": 314, "text": "Message Claude…", "fontColor": "#7d8694", "fontSize": 14},
|
||||
"b1sub": {"type": "Text", "left": 718, "top": 338, "text": "Enter to send · Shift+Enter newline", "fontColor": "#525a64", "fontSize": 11},
|
||||
"b1btn": {"type": "Rectangle", "left": 1138, "top": 328, "width": 150, "height": 32, "fillColor": "#232b34", "strokeColor": "#7fb0c8", "corners": [4, 4, 4, 4]},
|
||||
"b1ic": {"type": "Ellipse", "left": 1150, "top": 337, "width": 14, "height": 14, "fillColor": "#7d8694", "strokeColor": "#7d8694"},
|
||||
"b1lbl": {"type": "Text", "left": 1172, "top": 335, "text": "default", "fontColor": "#c8d0e0", "fontSize": 13},
|
||||
"b1car": {"type": "Text", "left": 1266, "top": 334, "text": "^", "fontColor": "#7fb0c8", "fontSize": 12},
|
||||
"b1btn": {"type": "Rectangle", "left": 1256, "top": 328, "width": 32, "height": 32, "fillColor": "#232b34", "strokeColor": "#7fb0c8", "corners": [4, 4, 4, 4]},
|
||||
"b1ic": {"type": "Ellipse", "left": 1264, "top": 336, "width": 16, "height": 16, "fillColor": "#7d8694", "strokeColor": "#7d8694"},
|
||||
|
||||
"secC": {"type": "Text", "left": 700, "top": 408, "text": "INTERACTION ZONE (D-78) — a prompt replaces the composer", "fontColor": "#7d8694", "fontSize": 13},
|
||||
"c1": {"type": "Rectangle", "left": 700, "top": 438, "width": 600, "height": 96, "fillColor": "#20252e", "strokeColor": "#d8a657", "corners": [6, 6, 6, 6]},
|
||||
@@ -60,21 +66,22 @@
|
||||
"c1allowt": {"type": "Text", "left": 740, "top": 495, "text": "Allow", "fontColor": "#c8d0e0", "fontSize": 13},
|
||||
"c1deny": {"type": "Rectangle", "left": 818, "top": 488, "width": 90, "height": 30, "fillColor": "#33272b", "strokeColor": "#c87f7f", "corners": [4, 4, 4, 4]},
|
||||
"c1denyt": {"type": "Text", "left": 842, "top": 495, "text": "Deny", "fontColor": "#c8d0e0", "fontSize": 13},
|
||||
"c1note": {"type": "Text", "left": 930, "top": 462, "text": "Composer + its mode button are replaced here.", "fontColor": "#7d8694", "fontSize": 11},
|
||||
"c1note": {"type": "Text", "left": 930, "top": 462, "text": "Composer + its icon button are replaced here.", "fontColor": "#7d8694", "fontSize": 11},
|
||||
"c1note2": {"type": "Text", "left": 930, "top": 480, "text": "Mode stays readable in the status bar below.", "fontColor": "#7d8694", "fontSize": 11},
|
||||
|
||||
"sb": {"type": "Rectangle", "left": 700, "top": 548, "width": 600, "height": 26, "fillColor": "#14171c", "strokeColor": "#2c323c"},
|
||||
"sbt": {"type": "Text", "left": 716, "top": 553, "text": "opus 4.8 ·", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"sbbadge": {"type": "Rectangle", "left": 800, "top": 551, "width": 64, "height": 20, "fillColor": "#1b1f26", "strokeColor": "#3a414d", "corners": [3, 3, 3, 3]},
|
||||
"sbbadget": {"type": "Text", "left": 808, "top": 553, "text": "default", "fontColor": "#c8d0e0", "fontSize": 11},
|
||||
"sbt2": {"type": "Text", "left": 874, "top": 553, "text": "· 21k ctx · $0.12", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"sbbadget": {"type": "Text", "left": 800, "top": 553, "text": "default", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"sbt2": {"type": "Text", "left": 858, "top": 553, "text": "· 21k ctx · $0.12", "fontColor": "#7d8694", "fontSize": 12},
|
||||
"sbnote": {"type": "Text", "left": 700, "top": 580, "text": "passive text indicator — coloured to match the active mode, no click (default shown in neutral grey)", "fontColor": "#525a64", "fontSize": 10},
|
||||
|
||||
"nhdr": {"type": "Text", "left": 40, "top": 600, "text": "DESIGN NOTES", "fontColor": "#7d8694", "fontSize": 13},
|
||||
"n1": {"type": "Text", "left": 40, "top": 624, "text": "1. Mode button trails the composer text box (bottom-right) — the slot where the Stop button appears when busy.", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n2": {"type": "Text", "left": 40, "top": 646, "text": "2. Per-mode icon + accent: default (neutral grey), accept-edits (amber), plan (blue). bypass (red) shows only when active.", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n3": {"type": "Text", "left": 40, "top": 668, "text": "3. Click opens a popover ABOVE the button; active mode marked. bypass is divided off + guarded (confirm), never one click away (T-181).", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n4": {"type": "Text", "left": 40, "top": 690, "text": "4. D-78: while a permission / AskUserQuestion prompt replaces the composer, the mode button rides away with it; the status-bar badge stays as the persistent mirror.", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n5": {"type": "Text", "left": 40, "top": 712, "text": "5. Status-bar badge is kept (mirrors the new control). Ctrl/Cmd+M still cycles the safe trio (T-226); the dropdown is the discoverable peer.", "fontColor": "#c8d0e0", "fontSize": 12}
|
||||
"n1": {"type": "Text", "left": 40, "top": 624, "text": "1. Resting control is ICON-ONLY (a compact square, per-mode coloured glyph) trailing the composer — the slot where Stop appears when busy.", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n2": {"type": "Text", "left": 40, "top": 646, "text": "2. The mode LABEL lives in three places, never on the resting button: the hover tooltip, the status-bar badge, and the open dropdown rows.", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n3": {"type": "Text", "left": 40, "top": 668, "text": "3. Per-mode colour: default (neutral grey), accept-edits (amber), plan (blue). bypass (red) shows only when active; it is divided off + guarded (T-181).", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n4": {"type": "Text", "left": 40, "top": 690, "text": "4. D-78: while a permission / AskUserQuestion prompt replaces the composer, the icon button rides away with it; the status-bar badge stays as the mirror.", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n5": {"type": "Text", "left": 40, "top": 712, "text": "5. Status-bar mode is now a passive, colour-coded TEXT indicator (no click-to-cycle). Switching lives in the composer control + Ctrl/Cmd+M (T-226).", "fontColor": "#c8d0e0", "fontSize": 12},
|
||||
"n6": {"type": "Text", "left": 40, "top": 734, "text": "6. While a turn runs, the existing Stop row (RunningIndicator + Stop) sits above the text box; the mode icon stays trailing the text box below — both visible, no conflict.", "fontColor": "#c8d0e0", "fontSize": 12}
|
||||
},
|
||||
"connectors": {
|
||||
"pop-anchor": {"tailId": "pop", "headId": "b1btn", "strokeColor": "#3a414d"}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 191 KiB |
Reference in New Issue
Block a user