agentgui 1.0.960 → 1.0.961
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/.claude/workflows/gui-claude-code-parity.js +88 -0
- package/AGENTS.md +16 -0
- package/PUNCHLIST-PARITY.md +36 -0
- package/package.json +1 -1
- package/site/app/js/app.js +16 -1
- package/site/app/vendor/anentrypoint-design/247420.css +248 -49
- package/site/app/vendor/anentrypoint-design/247420.js +15 -13
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
export const meta = {
|
|
2
|
+
name: 'gui-claude-code-parity',
|
|
3
|
+
description: 'Drive a maximum-effort DESIGN-LANGUAGE parity sweep of the agentgui GUI toward claude.ai/code (Claude Code web GUI), with cowork and Claude Desktop as secondary bars: per-lens designer agents benchmark the SHIPPED visual+layout+motion language against the real reference products, an adversarial verifier confirms each gap against the live source (kept-typography guard), a synthesizer orders them into a dependency-aware kit-vs-app-vs-server build plan. The user verdict driving this run: the UI is too primitive and the layout is jank - it must LOOK and FEEL like a chat agent / Claude Code web GUI.',
|
|
4
|
+
whenToUse: 'Run after the logic-predictability sweep (9th run) has landed. Distinct from all six prior workflows: gui-audit hunts JANK, gui-overhaul DESIGNS new surfaces, gui-predictability-polish polishes primitives, gui-cohesion hunts one-product feel, gui-completion hunts scoped-out coverage, gui-logic-predictability audits operating logic. This one hunts the VISUAL + LAYOUT + MOTION DESIGN-LANGUAGE PARITY gap - whether the calm desktop aesthetic, the column composition and density, the chat-thread craft, the file-browser fidelity, the live-session command-center feel, and the microinteraction polish read as a Claude-Code-web-class product rather than a primitive kit of parts. Reference bars: claude.ai/code (primary), cowork, Claude Desktop, c:\\dev\\fsbrowse (file view). All visual/component work lands in c:\\dev\\anentrypoint-design; the app keeps wiring; no new index.html !important overrides; server changes stay confineToRoots-confined.',
|
|
5
|
+
phases: [
|
|
6
|
+
{ title: 'Hunt', detail: 'one designer agent per design-language lens benchmarks the shipped source against the Claude-Code-web bar' },
|
|
7
|
+
{ title: 'Verify', detail: 'adversarially confirm each gap is real, unshipped, and soundly fixable (kept-typography guard)' },
|
|
8
|
+
{ title: 'Plan', detail: 'synthesize confirmed gaps into a dependency-ordered kit-vs-app-vs-server build plan' },
|
|
9
|
+
],
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// Shared grounding. Nine sweeps have shipped; this one hunts whether what shipped LOOKS and FEELS like the Claude Code web GUI.
|
|
13
|
+
const GROUND =
|
|
14
|
+
' GROUND IN REAL SOURCE (read, do not guess - nine sweeps HAVE shipped: jank audit, redesign, polish, cohesion, completion, logic-predictability; the app already has a three-column WorkspaceShell, a ConversationList rail, a full-CRUD Files manager, a SessionDashboard live view, a ContextPane, structured tool cards, per-block code copy, hash routing, edit/retry/export/followups): agentgui front-end c:\\dev\\agentgui\\site\\app\\js\\app.js + backend.js + index.html; kit c:\\dev\\anentrypoint-design\\src\\components\\{shell.js,sessions.js,agent-chat.js,chat.js,files.js,files-modals.js,context-pane.js,content.js,form-primitives.js,theme-toggle.js} + dist CSS {app-shell.css,chat.css}; server c:\\dev\\agentgui\\lib\\http-handler.js + server.js; the fsbrowse reference is c:\\dev\\fsbrowse. AGENTS.md + the PUNCHLIST-*.md files record what already landed - do NOT re-report it; hunt what still looks primitive or feels un-Claude-Code.' +
|
|
15
|
+
' POLICY: fully-destructive run - reshape anything; ALL visual/component/layout work lands in the KIT as defaults/props/CSS; the app keeps state+callback wiring only; NEVER add new index.html !important overrides; use kit design tokens (CSS vars) not raw hex; NO decorative glyphs (ASCII words + CSS .status-dot-disc) but KEEP the typographic set middot/ellipsis/em-en-dash; any server mutation stays confineToRoots realpath-confined; every visual change must preserve a11y (roles/aria/focus rings/44x44 touch/keyboard), responsive behavior (420px to wide desktop, no h-scroll), reduced-motion guards on any new animation, and explicit empty/loading/error composition.';
|
|
16
|
+
|
|
17
|
+
const LENSES = [
|
|
18
|
+
{ key: 'visual-language', prompt: 'DESIGN-LANGUAGE LENS - VISUAL SYSTEM. Benchmark the SHIPPED visual language against claude.ai/code (the Claude Code web GUI) as the primary bar. Audit the kit token system end to end: color (surface/background layering, border subtlety, accent restraint - Claude Code is calm and low-chroma, not a primitive high-contrast slab), elevation (are panels distinguished by subtle background + hairline borders, or by heavy shadows / no separation at all?), radius scale (consistent corner language across cards/buttons/inputs/dialogs?), typography (display vs body vs mono families, the TYPE SCALE - is there a real modular scale or arbitrary sizes? line-height for reading comfort? font-weight hierarchy for headings vs meta?), spacing rhythm (is there an 4/8px spacing system or ad-hoc margins? consistent padding inside cards/rows/panels?), and the status-disc/rail-tone color semantics. Hunt: places that read PRIMITIVE - unstyled-looking inputs, borders that are too heavy or missing, accent overused, type that is all one size, cramped or inconsistent padding, hardcoded hex instead of tokens. Name every gap with the concrete kit token/CSS fix and the claude.ai/code reference it matches.' + GROUND },
|
|
19
|
+
{ key: 'layout-composition', prompt: 'DESIGN-LANGUAGE LENS - LAYOUT COMPOSITION (the user said the layout is JANK). Benchmark the three-column WorkspaceShell composition against claude.ai/code and Claude Desktop. Audit: column proportions (rail / sessions / main / pane widths - do they feel balanced and intentional, or arbitrary? does the chat thread get a comfortable reading measure, ~70ch, or sprawl edge to edge?), the grid track stability across tabs (does geometry jump when switching chat<->files<->live?), vertical rhythm (header/crumb/toolbar/content/composer stacking - aligned baselines? consistent gutters?), density (is whitespace generous and calm like Claude Code, or cramped/primitive?), the rail design (icon+label vs label-only, active-state treatment, footer), how empty and loading states COMPOSE within the grid (do they fill the space gracefully or leave a tiny widget floating in a void?), sticky headers/composers, and the responsive collapse choreography (rail->drawer, pane->hidden at breakpoints - smooth and predictable?). Hunt every place the layout reads jank: misaligned edges, inconsistent gutters, a pane that collapses to dead space, a thread that is too wide to read, a composer that floats. Name every gap with the concrete shell.js / app-shell.css fix and the reference layout it should match.' + GROUND },
|
|
20
|
+
{ key: 'chat-thread-craft', prompt: 'DESIGN-LANGUAGE LENS - CHAT THREAD CRAFT (must read like a chat agent). Benchmark the AgentChat thread against claude.ai/code and Claude Desktop chat. Audit: turn presentation (full-width rows with a clear user-vs-assistant distinction via alignment/background/avatar, or undifferentiated blocks? is the user turn visually distinct from the assistant turn?), avatars/role labels, turn separators and spacing between turns (breathing room, not a wall of text), the streaming experience (caret, working tail, smooth append without reflow jank), code block craft (header with language + copy, syntax theme matching the calm aesthetic, horizontal scroll handling, NOT a primitive gray box), inline markdown polish (headings/lists/tables/blockquotes/links styled with care), tool-call cards (collapsible, scannable, status-clear - do they read as first-class or as raw dumps?), the composer presentation (rounded, elevated, context line, send/stop affordance placement matching Claude Code), and message actions (copy/retry/edit revealed on hover, consistently placed). Hunt everything that makes the thread read PRIMITIVE rather than like a polished chat agent. Name every gap with the concrete chat.js / agent-chat.js / chat.css fix and the reference it matches.' + GROUND },
|
|
21
|
+
{ key: 'file-browser-fidelity', prompt: 'DESIGN-LANGUAGE LENS - FILE BROWSER FIDELITY. Benchmark the Files view against c:\\dev\\fsbrowse (read its server.js + public/) as the file-manager bar, and against Claude Code/Desktop file panes for chrome. Audit: the layout (grid vs list density, column headers, the breadcrumb design, the roots picker), the preview experience (split-view pane vs modal, syntax-highlighted file preview, image preview, prev/next stepping, large-file handling), affordance design (sort headers, filter input, action buttons on rows - revealed tastefully, not cluttered), iconography for file types (ASCII/CSS, no decorative glyphs), permissions/locked indicators, the show-more pattern for big dirs, drag-drop upload affordance, and empty/loading/error composition. Hunt where the file view reads PRIMITIVE vs fsbrowse-grade: cramped rows, weak breadcrumb, modal-only preview where a split pane belongs, no visual file-type distinction, clumsy sort/filter chrome. Name every gap with the concrete files.js / files-modals.js fix and the fsbrowse/Claude-Code reference it matches.' + GROUND },
|
|
22
|
+
{ key: 'live-session-command', prompt: 'DESIGN-LANGUAGE LENS - LIVE SESSION COMMAND CENTER (view all live sessions, manage them simultaneously). Benchmark the SessionDashboard against the idea of a Claude-Code/cowork multi-session command center. Audit: card design (does a session card communicate at a glance - agent, model, cwd, status, last activity, current tool, elapsed, cost - without clutter? is the visual hierarchy right?), the grid/density for MANY sessions (does 12+ sessions read as a scannable command center or a messy stack? grouping by status/recency?), status legibility (running vs idle vs stale vs error - instantly distinguishable by the disc + word + accent, color-blind safe?), bulk management (select, stop-selected, stop-all - discoverable and safe with confirms?), the live stream/heartbeat indication (is the dashboard visibly LISTENING even at zero running?), per-card actions (open in live, resume in chat, stop, view events - consistently placed), sort/filter controls, and how a brand-new session appears (motion/placement). Hunt where managing many sessions feels primitive or where you cannot act on several at once gracefully. Name every gap with the concrete sessions.js fix and the command-center reference it matches.' + GROUND },
|
|
23
|
+
{ key: 'motion-microinteraction', prompt: 'DESIGN-LANGUAGE LENS - MOTION + MICROINTERACTION POLISH (the difference between primitive and product). Benchmark the interaction polish against claude.ai/code and Claude Desktop. Audit (every new animation MUST be reduced-motion guarded): state transitions (tab switches, drawer open/close, pane collapse - do they animate smoothly or snap jarringly?), hover/focus feedback (rows, buttons, cards, file rows - is there a tasteful hover lift/tint and a visible focus ring, or nothing?), loading craft (skeletons that match the real content shape vs a bare spinner vs a frozen blank?), scroll behavior (smooth scroll-to on jump-to-latest / jump-to-error, scroll anchoring during streaming, sticky elements), button press feedback, the streaming caret and working-tail motion, toast/banner enter/exit, confirm-state arming feedback, copy->copied label flips, and dialog enter/exit. Hunt every place an interaction feels abrupt, dead, or primitive vs the smooth Claude Code feel - AND any animation missing a prefers-reduced-motion guard. Name every gap with the concrete kit CSS/component fix and the reference it matches.' + GROUND },
|
|
24
|
+
];
|
|
25
|
+
|
|
26
|
+
const GAP_SCHEMA = {
|
|
27
|
+
type: 'object',
|
|
28
|
+
required: ['lens', 'gaps'],
|
|
29
|
+
properties: {
|
|
30
|
+
lens: { type: 'string' },
|
|
31
|
+
gaps: {
|
|
32
|
+
type: 'array',
|
|
33
|
+
items: {
|
|
34
|
+
type: 'object',
|
|
35
|
+
required: ['title', 'where', 'fixLocation', 'fix', 'severity'],
|
|
36
|
+
properties: {
|
|
37
|
+
title: { type: 'string', description: 'the primitive/jank/un-Claude-Code visual or interaction gap' },
|
|
38
|
+
where: { type: 'string', description: 'file:line or component (or "absent")' },
|
|
39
|
+
fixLocation: { type: 'string', enum: ['kit', 'app', 'server', 'kit+app', 'app+server', 'kit+app+server'] },
|
|
40
|
+
fix: { type: 'string', description: 'the concrete change: token/css/component/prop/wiring' },
|
|
41
|
+
benchmark: { type: 'string', description: 'which reference product sets the bar (claude.ai/code, cowork, Claude Desktop, fsbrowse)' },
|
|
42
|
+
severity: { type: 'string', enum: ['high', 'medium', 'low'] },
|
|
43
|
+
keptTypography: { type: 'boolean', description: 'true if this touches the middot/ellipsis/dash set - which must NOT be flagged as a glyph violation' },
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const VERDICT_SCHEMA = {
|
|
51
|
+
type: 'object',
|
|
52
|
+
required: ['title', 'real', 'reason'],
|
|
53
|
+
properties: {
|
|
54
|
+
title: { type: 'string' },
|
|
55
|
+
real: { type: 'boolean', description: 'true if the gap genuinely exists in the shipped source, is not already shipped, and the fix is sound and lands in the right place' },
|
|
56
|
+
reason: { type: 'string', description: 'why - cite the source you read' },
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
phase('Hunt');
|
|
61
|
+
const verified = await pipeline(
|
|
62
|
+
LENSES,
|
|
63
|
+
(l) => agent(l.prompt, { label: 'hunt:' + l.key, phase: 'Hunt', schema: GAP_SCHEMA }),
|
|
64
|
+
(report, l) => parallel((report?.gaps || []).map((g) => () =>
|
|
65
|
+
agent(
|
|
66
|
+
'Adversarially verify this Claude-Code-web design-language finding against the REAL source (read the cited files - do not trust the claim). '
|
|
67
|
+
+ 'KEPT-TYPOGRAPHY GUARD: middot, ellipsis, em/en-dash are intentional product typography - flagging one of those as a decorative glyph is NOT a real finding (real=false). '
|
|
68
|
+
+ 'A finding is real only if the gap genuinely exists in the shipped source AND was not already fixed by a prior sweep (check the PUNCHLIST-*.md files / AGENTS.md) AND the proposed fix is sound, lands in the right place (kit vs app vs server, visual work in the KIT not the app), uses tokens not hex, preserves a11y + reduced-motion + responsive, and any server mutation stays confinement-safe. '
|
|
69
|
+
+ 'Reject vague taste-only findings with no concrete source-grounded fix. '
|
|
70
|
+
+ 'Finding: ' + JSON.stringify(g),
|
|
71
|
+
{ label: 'verify:' + (g.title || '').slice(0, 32), phase: 'Verify', schema: VERDICT_SCHEMA }
|
|
72
|
+
).then((v) => ({ ...g, lens: report.lens, verdict: v }))
|
|
73
|
+
))
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
const confirmed = verified.flat().filter(Boolean).filter((g) => g.verdict && g.verdict.real);
|
|
77
|
+
log('confirmed ' + confirmed.length + ' real Claude-Code-parity design-language gaps across ' + LENSES.length + ' lenses');
|
|
78
|
+
|
|
79
|
+
phase('Plan');
|
|
80
|
+
const plan = await agent(
|
|
81
|
+
'Synthesize these adversarially-confirmed Claude-Code-web design-language gaps into a dependency-ordered build plan for the anentrypoint-design kit + agentgui app + server. '
|
|
82
|
+
+ 'Order: server changes first (if any), then kit token/CSS foundations, then kit components (each edited ONCE with all its changes batched), then app wiring, then the single build->vendor->witness step. '
|
|
83
|
+
+ 'Group by component so each kit file is touched once; call out which gaps share a component (batch), which are independent (parallelizable), which conflict, and the highest-leverage few that most close the too-primitive / layout-jank verdict. '
|
|
84
|
+
+ 'Confirmed gaps: ' + JSON.stringify(confirmed),
|
|
85
|
+
{ label: 'synthesize-plan', phase: 'Plan' }
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
return { confirmed, plan, lensCount: LENSES.length, confirmedCount: confirmed.length };
|
package/AGENTS.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# AgentGUI — Agent Notes
|
|
2
2
|
|
|
3
|
+
## GUI Claude-Code-web parity sweep (2026-06-11) — tenth maximum-effort run
|
|
4
|
+
|
|
5
|
+
Hunts the VISUAL + LAYOUT + MOTION design-language parity gap vs claude.ai/code (the user verdict: too primitive, layout jank). New workflow `.claude/workflows/gui-claude-code-parity.js` (6 design-language lenses: visual-language, layout-composition, chat-thread-craft, file-browser-fidelity, live-session-command, motion-microinteraction; hunt -> adversarial verify (kept-typography guard) -> plan). 66 agents -> 37 confirmed gaps (`PUNCHLIST-PARITY.md`). Pushed: kit `anentrypoint-design` 28387c3, agentgui 0a93fc6.
|
|
6
|
+
|
|
7
|
+
**Chat reads like Claude Code, not a messenger.** AgentChat passes `flat:true` + `aicat:false` to `ChatMessage`; flat turns are FULL-WIDTH, avatar-less, capped at `--measure`, led by a `.chat-role` label (You / agent name), the assistant turn carrying a faint `color-mix(--fg 3%)` background (`.chat-msg-flat` in chat.css). The bubble/avatar layout is kept ONLY for the messenger demo. Composer is ONE bordered rounded-rect shell (`.chat-composer` border `var(--rule)` + `--r-2`, `:focus-within` ring) with a borderless textarea and an inline `--r-1` send (was a `--r-pill` stadium + 50% round button); `flex-wrap` + `.chat-composer-hint{order:5}` lay context/input/hint as rows. Tool calls render as a bordered status-toned card (`.chat-tool` de-frames the inherited `.chat-bubble`, head=icon·name·label·status-pill, running->accent / error->flame); the bundle shipped ZERO `.chat-tool` CSS before. `injectCodeCopy` reads the `<code>` `language-*` class -> a `.chat-code-lang` header tab on every rendered block. `::selection` is accent-tint, not mascot pink.
|
|
8
|
+
|
|
9
|
+
**Layout has a real content gutter.** Kit `WorkspaceShell` gains `mainFlush`; `.ws-main` now has `padding: var(--space-4) var(--space-5)` (files/live/history/settings) and the chat tab opts out via `.ws-main--flush` (app sets `mainFlush: state.tab==='chat'` since the thread self-gutters at `--measure`). `.ws-crumb` gets `min-height:48px` + a matching left gutter so the top edge aligns with the rail head.
|
|
10
|
+
|
|
11
|
+
**Live dashboard is a command center.** `SessionDashboard`: status-bucketed grid (Errored/Running/Idle/External `role=group` sections when `sort==='status'`, flat otherwise); header status breakdown `N running · M idle · K errors` (toned `.ds-dash-breakdown .seg.is-*`); a `.ds-dash-stream-disc` heartbeat (pulsing `status-dot-live` when connected); tri-state `role=checkbox` select-all + clear (`onSelectAll`/`onClearSelection`, app toggles `state.live.selected`); `is-armed` one-shot pulse on the armed stop button. `SessionCard`: cost/token stat (`session.cost`/`tokens`, app feeds the in-page chat's `totalCost` onto its own card), `is-new` arrival cue (`session.isNew`, app sets it for <3s-old sids), icon-led actions (open=primary), `is-stale` amber inset bar (was opacity .92). Files: `TYPE_ICON.dir='folder'` + new `file-image`/`link`/`folder-open` icons (shell.js); ConversationList loading skeleton rows. File preview: Prism highlight hook (`highlightAllUnder` ref) + `.ds-preview-gutter` line numbers + image fit/actual toggle + checkerboard.
|
|
12
|
+
|
|
13
|
+
**Motion (all `prefers-reduced-motion: no-preference` guarded).** `.ws-shell` eases `grid-template-columns` (rail/pane collapse no longer snaps; track count stays stable); `.agentchat-thread` `scroll-behavior:smooth`; `.ds-session-row` hover transition; `.ws-scrim` opacity fade (was display toggle); `.ds-alert` enter; copy->copied color flip; `.ds-dash-card.is-new` fade-in.
|
|
14
|
+
|
|
15
|
+
**Load-bearing webjsx fix (caught by the live witness).** SessionCard passed raw `null`s positionally in its head/meta/actions/top-level children arrays; webjsx `applyDiff` crashes (`reading 'key'`) on ANY null among VElement siblings (not just keyed ones). This was a PRE-EXISTING latent bug (the unmodified kit crashed identically on this env's external sessions) that this env's data now triggered. Fix: `.filter(Boolean)` EVERY children array in SessionCard + SessionDashboard header/body, and `Btn` now spreads array `children`. The kit-wide rule: never pass a conditional `x ? h() : null` positionally — build the array and `.filter(Boolean)` it (the same pattern ConversationList already uses). Witness localhost:3009/gm/ (port 3000 was owned by another app): 0 console/page errors across chat/files/live; composer 14px radius; ws-main flush=0 on chat, 32px on files; folder icon distinct; no h-scroll. First `/gm/` request triggers the 30-90s ccsniff walk -> poll until 200 before witnessing.
|
|
16
|
+
|
|
17
|
+
**Deferred (documented in `PUNCHLIST-PARITY.md`, rows pending):** Files multi-select + BulkBar + density-thumbnail grid (kit props + heavy app/server wiring), the `/api/move-confined` drag-to-move endpoint, a toolbar up-button + file-grid keys in the SHORTCUTS array, and F3 panel/card elevation unification. These are lower-leverage than the shipped visual/layout/motion/command-center batch.
|
|
18
|
+
|
|
3
19
|
## GUI logic+predictability sweep (2026-06-10) — ninth maximum-effort run
|
|
4
20
|
|
|
5
21
|
Audits whether everything OPERATES logically and predictably (not coverage, not cohesion). New workflow `.claude/workflows/gui-logic-predictability.js` (6 lenses: interaction-lifecycle, cross-surface-consistency, information-architecture, realtime-truth, input-ergonomics, scale-robustness; hunt -> adversarial verify (kept-typography guard) -> plan). 78 agents -> 67 confirmed findings (`PUNCHLIST-LOGIC.md`). ALL implemented across kit/app/server.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# PUNCHLIST-PARITY — 10th run: Claude-Code-web design-language parity
|
|
2
|
+
|
|
3
|
+
Workflow `.claude/workflows/gui-claude-code-parity.js` (6 design-language lenses: visual-language, layout-composition, chat-thread-craft, file-browser-fidelity, live-session-command, motion-microinteraction). 66 agents -> 37 adversarially-confirmed gaps. Verdict: the thread reads as IM/messenger (avatar circles + colored bubbles + mascot-pink chroma + zero content gutter + unstyled tool dumps + snapping shell), not claude.ai/code. Work is overwhelmingly kit-side CSS + a few kit component props; server untouched except one optional move endpoint (descoped).
|
|
4
|
+
|
|
5
|
+
## Highest-leverage (close most of the too-primitive / layout-jank verdict)
|
|
6
|
+
1. Flat full-width chat turns (kill avatar circles + bubbles) — G1, G12
|
|
7
|
+
2. `.ws-main` + `.ws-crumb` gutters — G7, G8
|
|
8
|
+
3. Tool-card CSS (currently raw mascot `<details>` dump) — G11
|
|
9
|
+
4. Calm composer (rounded-rect, not pill+round-send) — G2
|
|
10
|
+
5. Mascot-pink de-leak (`::selection` + aicat) — G3
|
|
11
|
+
6. Shell collapse + thread autoscroll easing — Gmotion1, Gmotion2
|
|
12
|
+
|
|
13
|
+
## Phase F — kit token/CSS foundations (app-shell.css / chat.css)
|
|
14
|
+
- F1 layout gutters: `.ws-main` padding + `.ws-main--flush`; `.ws-crumb` min-height 48px + padding (G7, G8)
|
|
15
|
+
- F2 mascot de-leak: `::selection` accent-tint (G3 css half)
|
|
16
|
+
- F3 border/elevation unification: panels/cards on bg-2 + hairline + r-2, drop drop-shadows (G6)
|
|
17
|
+
- F4 motion easing (all reduced-motion guarded): `.ws-shell` grid-template-columns transition (Gm1); `.agentchat-thread` smooth scroll (Gm2); `.ds-session-row` hover transition (Gm3); `.ws-scrim` opacity fade (Gm4); `.ds-alert` enter (Gm5); copy->copied color transition (Gm6); `.ws-content` tab cross-fade (Gm-tab); `.is-armed` pulse (Gm-arm); `.ds-dash-card.is-stale` accent inset bar (G-stale); `.ds-dash-card.is-new` enter (G-new)
|
|
18
|
+
- F5 tool-card block: `.chat-tool*` rules, de-frame mascot bubble (G11)
|
|
19
|
+
- F6 component-CSS halves: `.ds-session-row-skeleton`; `.agentchat-msg` flat turn; `.ds-preview-code` token paint + `.ds-preview-gutter` line numbers; `.chat-code-lang`; `.ds-preview-media-alpha`
|
|
20
|
+
|
|
21
|
+
## Phase C — kit components
|
|
22
|
+
- C-CHAT (agent-chat.js + chat.js): `layout="flat"` default flat turns; stop unconditional `aicat`; `injectCodeCopy` lang label (G1, G12, G3, code-lang)
|
|
23
|
+
- C-COMPOSER (chat.js ChatComposer + CSS): rounded-rect shell, inline send (G2)
|
|
24
|
+
- C-FILES (files.js + shell.js ICONS): `TYPE_ICON.dir='folder'`, add file-image/link icons; FileGrid selection props + BulkBar; density columns + SegmentedControl (G-folder, G-multiselect, G-density)
|
|
25
|
+
- C-FILES-MODALS (files-modals.js): Prism highlight + `lineNumbers`; media fit/actual + dimensions (G-highlight, G-linenum, G-media)
|
|
26
|
+
- C-SESSIONS (sessions.js): `groups` buckets; header status breakdown; cost/tokens stat; live-pulse disc; tri-state select-all; icon-led card actions; `.is-new`/`.is-armed` wiring; ConversationList skeleton (G-grouping, G-status, G-cost, G-heartbeat, G-selectall, G-cardicons, G-new, G-skeleton)
|
|
27
|
+
|
|
28
|
+
## Phase 3 — app wiring (app.js, no new index.html !important)
|
|
29
|
+
- `C` destructure completeness (highest-risk; witness catches `is not defined`)
|
|
30
|
+
- `.ws-main--flush` on chat tab; files marked Set + bulk; density->columns; toolbar `up` Btn; warm Prism before preview; grid keys into SHORTCUTS; live groups/select-all/cost/isNew
|
|
31
|
+
|
|
32
|
+
## Phase 4 — build -> vendor -> witness -> push
|
|
33
|
+
build.mjs -> copy dist into site/app/vendor -> witness localhost:3000/gm/ (0 errors, flat turns, gutters, folder icon, eased transitions, dashboard breakdown, glyph count 0, no h-scroll, 420px drawers) -> push kit + app.
|
|
34
|
+
|
|
35
|
+
## Descoped
|
|
36
|
+
- `/api/move-confined` drag-to-move endpoint: checkbox + bulk-delete uses the existing delete loop; new endpoint cut unless drag-to-move lands.
|
package/package.json
CHANGED
package/site/app/js/app.js
CHANGED
|
@@ -591,7 +591,9 @@ function view() {
|
|
|
591
591
|
} else if (state.tab === 'files' && state.files && state.files.preview && !isNarrow()) {
|
|
592
592
|
pane = filePreviewPane();
|
|
593
593
|
}
|
|
594
|
-
|
|
594
|
+
// The chat tab manages its own --measure gutter, so it opts out of the content
|
|
595
|
+
// column padding; every other surface (files/live/history/settings) keeps it.
|
|
596
|
+
return WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow: isNarrow(), stableFrame: true, mainFlush: state.tab === 'chat' });
|
|
595
597
|
}
|
|
596
598
|
|
|
597
599
|
// The left workspace rail: brand, New chat action, and the primary view nav.
|
|
@@ -1300,6 +1302,12 @@ function liveMain() {
|
|
|
1300
1302
|
currentTool,
|
|
1301
1303
|
status,
|
|
1302
1304
|
stopping: stoppingSet.has(r.sessionId),
|
|
1305
|
+
// Arrival cue for a freshly-started session (a brief enter animation).
|
|
1306
|
+
isNew: startedTs ? (now - startedTs < 3000) : false,
|
|
1307
|
+
// Surface the in-page chat's own running cost on its card (the only
|
|
1308
|
+
// session we hold a reliable per-session cost for; others omit it).
|
|
1309
|
+
cost: (state.chat.resumeSid && (r.claudeSessionId === state.chat.resumeSid || r.sessionId === state.chat.resumeSid))
|
|
1310
|
+
? (state.chat.totalCost || null) : null,
|
|
1303
1311
|
};
|
|
1304
1312
|
});
|
|
1305
1313
|
// External sessions (a claude CLI in a terminal, etc.): live SSE motion that
|
|
@@ -1390,6 +1398,13 @@ function liveMain() {
|
|
|
1390
1398
|
if (set.has(s.sid)) set.delete(s.sid); else set.add(s.sid);
|
|
1391
1399
|
state.live.selected = set; render();
|
|
1392
1400
|
},
|
|
1401
|
+
// Tri-state select-all over the currently-visible selectable sids.
|
|
1402
|
+
onSelectAll: (sids) => {
|
|
1403
|
+
const set = (state.live.selected instanceof Set) ? state.live.selected : new Set();
|
|
1404
|
+
for (const sid of sids) set.add(sid);
|
|
1405
|
+
state.live.selected = set; render();
|
|
1406
|
+
},
|
|
1407
|
+
onClearSelection: () => { state.live.selected = new Set(); render(); },
|
|
1393
1408
|
// Two-step bulk stops: arm first, execute on the confirmed click.
|
|
1394
1409
|
confirmingStopAll: !!lv.confirmingStopAll,
|
|
1395
1410
|
confirmingStopSelected: !!lv.confirmingStopSelected,
|