Skip to content

Commit adf6795

Browse files
bloveclaudegithub-actions[bot]
authored
feat(ag-ui): productize itinerary panel (phase 1) (#729)
* docs(specs): ag-ui itinerary redesign + app mode map design Two-phase plan: (1) productize the trip-itinerary panel onto chat-library tokens with CDK drag-to-reorder, agent-edit pulse, per-day add affordance, and polished empty state; (2) add an App-mode toolbar toggle that switches the demo to full-bleed Google Map + chat copilot (Tesla-style), reusing the Phase-1 panel as a floating overlay. Geocoding at the client-tool seam so the store stays simple. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs(plans): ag-ui itinerary redesign — phase 1 and phase 2 Phase 1 productizes the itinerary panel (chat tokens, Material icons, CDK drag-to-reorder, agent-edit pulse, per-day add affordance, polished empty state, reorder_stop client tool). 10 tasks, TDD throughout. Phase 2 adds the App-mode toolbar toggle and Tesla-style map cockpit (full Google Map + chat sidebar, Phase-1 panel as floating overlay, geocoding at the client-tool seam). 12 tasks. API key wired via gitignored generated-keys.local.ts so committed files never carry secrets. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(ag-ui): extend ItineraryStore with reorder, source, recentlyChangedId * build(ag-ui): add @angular/cdk drag-drop dependency * style(ag-ui): repaint itinerary panel onto chat library tokens * feat(ag-ui): restructure itinerary panel with day headers, per-day add, numbered cards * feat(ag-ui): CDK drag-to-reorder for itinerary stops Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(ag-ui): agent-edit pulse on the just-changed itinerary row + drag a11y polish * feat(ag-ui): polished empty state with luggage icon + suggestion chips * feat(ag-ui): add reorder_stop client tool; move_stop now wraps reorder Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs(plans): ag-ui itinerary phase 1 live-smoke + acceptance skeleton Live-smoke: 6 Chrome-MCP-driven real-user scenarios targeting the streaming-shape bugs aimock replay can't catch (incremental DOM/NG0956, mid-stream tool calls, pulse timer-reset race, drag-while-stream). Runs against the real OpenAI key in root .env via local uvicorn :8000 + nx serve :4200, with a port-free + bundle-freshness preamble and a scenario-5 decoupling fallback policy. Acceptance follow-up: not-yet-actionable skeleton homing the broader surface (theme matrix, persistence, mobile, a11y, reduced-motion, interrupt path) plus deferred engineering items surfaced in Phase 1 reviews so they aren't lost. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * docs(plans): record Phase 1 live-smoke run — all 6 scenarios pass Ran the Chrome-MCP live smoke against real OpenAI key. All 6 scenarios PASS. Headline: NG0956 (the @for re-creation warning the smoke targets) never fired, including a long nested-markdown stream and a 3x add burst. Findings (non-blocking): (1) NG0953 OutputRef-after-destroy dev warning on day_card view teardown — library-layer (libs/render), not Phase 1 example code (zero outputs there); filed as follow-up. (2) gpt-5-mini at high effort narrates instead of calling tools — model steering note for demo scripting. (3) Fixed Step 0b: source only OPENAI_API_KEY, not the whole .env (which exports AG_UI_INTERNAL_TOKEN and 401s the dev proxy). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore(docs): regenerate api docs --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 5f9d8f2 commit adf6795

15 files changed

Lines changed: 3869 additions & 122 deletions
Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# AG-UI Itinerary — Broader Acceptance Run — Follow-up Skeleton
2+
3+
> **Status: NOT YET ACTIONABLE.** This is a skeleton capturing the broader acceptance surface for the itinerary redesign so deferred items aren't lost. It is NOT a runnable checklist. When this work is scheduled, run `superpowers:writing-plans` against this skeleton to expand each section into bite-sized, executable steps.
4+
5+
**Why this doc exists:** The tight pre-merge smoke (`2026-06-22-ag-ui-itinerary-phase-1-live-smoke.md`) deliberately covers only the streaming-shape regressions aimock can't catch. The Phase 1 code reviews surfaced several deferred polish items and broader concerns that have no other home. This is that home.
6+
7+
**Relationship to other docs:**
8+
- Spec: `../specs/2026-06-22-ag-ui-itinerary-redesign-design.md`
9+
- Phase 1 plan: `2026-06-22-ag-ui-itinerary-phase-1-productize.md`
10+
- Phase 1 smoke: `2026-06-22-ag-ui-itinerary-phase-1-live-smoke.md`
11+
- Phase 2 plan: `2026-06-22-ag-ui-itinerary-phase-2-app-mode-map.md` (App mode + map — much of this skeleton should be re-run after Phase 2 lands)
12+
13+
---
14+
15+
## 1. Theme matrix
16+
17+
**Intent:** Drive all 4 theme options (default-dark, default-light, material-dark, material-light) × the light/dark scheme toggle; assert the panel's `--ngaf-chat-*` tokens resolve to legible values in each. Catches a missing token fallback that only shows in one theme (e.g. an unset `--ngaf-chat-surface-alt` rendering transparent on material-light).
18+
19+
**Status:** not yet actionable.
20+
21+
---
22+
23+
## 2. Persistence across reload
24+
25+
**Intent:** Add and reorder several stops, hard-reload the page, assert localStorage rehydrates the exact stop order. The `reorder` ordering is array-slot-based with no explicit `order` field, so the round-trip through `JSON.stringify`/`parse` must preserve sequence. Also verify the `ag-ui-demo:itinerary` storage key survives a reload in both App-mode-off and (post-Phase-2) App-mode-on.
26+
27+
**Status:** not yet actionable.
28+
29+
---
30+
31+
## 3. Overflow menu + outside-click
32+
33+
**Intent:** The P1.4 code review flagged that the overflow menu has no outside-click-to-close handler and no Esc/arrow-key navigation. Acceptance run documents the current behavior and decides whether it warrants a fix (likely a small `@HostListener('document:click')` or a CDK overlay migration).
34+
35+
**Origin:** P1.4 code-quality review.
36+
**Status:** not yet actionable.
37+
38+
---
39+
40+
## 4. Mobile viewport
41+
42+
**Intent:** `resize_window` to ~390px width; assert the `@media (max-width: 900px)` path stacks the panel above the chat (full-width, capped height, border-bottom instead of border-right). Verify drag-to-reorder still works with touch-style pointer events at mobile width. Post-Phase-2: verify the App-mode floating overlay degrades sensibly on a phone (it may need to become a bottom sheet).
43+
44+
**Status:** not yet actionable.
45+
46+
---
47+
48+
## 5. Empty-state accessibility
49+
50+
**Intent:** The P1.8 review flagged that `role="status"` on the whole empty-state container produces a verbose SR announcement ("Your trip is empty Ask the agent… Plan a Paris weekend Add a Day 1 stop"). Acceptance run captures the screen-reader experience and decides scope — likely scope `role="status"` to the title alone, or swap to `aria-label` on the container and drop live-region semantics (the empty state on mount isn't really a status *change*).
51+
52+
**Origin:** P1.8 code-quality review.
53+
**Status:** not yet actionable.
54+
55+
---
56+
57+
## 6. Reduced-motion
58+
59+
**Intent:** Emulate `prefers-reduced-motion: reduce`; assert the agent-edit pulse animation is suppressed (the guard landed in P1.7). Verify no other decorative motion (CDK drag transitions are functional feedback and may stay).
60+
61+
**Origin:** P1.7 code-quality review (guard added; this verifies it).
62+
**Status:** not yet actionable.
63+
64+
---
65+
66+
## 7. Interrupt panel path (clear_day ask tool)
67+
68+
**Intent:** Drive the `clear_day` ask tool to the interrupt/approval panel; verify Confirm clears the day and Cancel leaves state completely untouched (no partial mutation). Verify the four-action interrupt vocabulary (accept/edit/respond/ignore) behaves on this tool. This overlaps with smoke Scenario 6 but goes deeper on the cancel-leaves-state-untouched invariant.
69+
70+
**Status:** not yet actionable.
71+
72+
---
73+
74+
## Deferred engineering items (not acceptance scenarios, but homed here)
75+
76+
These came out of Phase 1 reviews / verification and aren't user-facing acceptance checks — they're code-health follow-ups. Listed so they aren't lost:
77+
78+
- **`styles.css` token cleanup**`examples/ag-ui/angular/src/styles.css` still references `--a2ui-primary*` (×7) and `--tp-border` (×1) on `.ag-ui-demo__header`, outside Phase 1's panel/shell scope. A 2-line follow-up could finish the token migration. (Origin: P1.10 verification.)
79+
- **`tsconfig.app.json` setup errors** — pre-existing `declarationMap`-without-`composite` and missing project-ref `composite: true` warnings surface on `tsc --noEmit`. Orthogonal to the itinerary work; worth a separate cleanup PR. (Origin: P1.10 verification.)
80+
- **Bundle budget** — the example's initial bundle (~1.35 MB) sits well above the 500 KB warning budget (under the 1.5 MB error budget). Pre-existing; if a future phase wants headroom, lazy-load the A2UI / markdown chunks. (Origin: P1.10 verification.)
81+
- **Composer autofocus on re-mount** — the per-day add composer's native `autofocus` won't re-fire when the `@if` re-mounts the input (second+ open). A focus directive would fix it. (Origin: P1.4 code-quality review.)
82+
- **`.itin__remove` keyboard reveal** — the remove button is `opacity:0` until row hover; a keyboard user tabbing onto it sees nothing. Add `.itin__stop:focus-within .itin__remove { opacity: .7 }`. (Origin: P1.4 / P1.6 reviews; the drag handle got its `:focus-visible` reveal in P1.7 but the remove button did not.)

0 commit comments

Comments
 (0)