Guided Buying v3: persona switching, approval loop, and catalog polish - #1019
Guided Buying v3: persona switching, approval loop, and catalog polish#1019petervachon wants to merge 40 commits into
Conversation
Experiment → Guided Buying docs page links to a full-screen /guided-buying prototype, rendered in a separate React root to escape the Nextra docs layout. Catalog "Selection" workspace: - scan-row and card layouts (toggle) with a recommendation lead row - product detail overlay, cart peek drawer, full-canvas compare table - filters (brand/category/price/stock) with agent chips and price basis - routable, deep-linkable state (?item / ?compare) and Review & submit stub Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Build out the Guided Buying prototype's front-door flow and the buyer's escalation queue, all scripted/mocked atop the Apollo AI Chat pattern. Buy conversation (catalog/v1): - Intake hero → in-chat Bridge: streamed restatement, then an inferred request envelope (cost center / ship-to / need-by / approver with provenance + edit affordances) and the routing consequence, revealed with a staggered field animation. - Continue to selection → sourcing summary + a results carousel rendered inline in the thread (pick + 2 alternatives, skeleton→reveal), with the pick mirroring the catalog's Picked-for-you treatment. - Add to cart confirms in-chat with amount + approval-limit status and a Review affordance; cart pill pulses on increment. - ConversationProvider drives the shared thread across the Buy hero and the docked rail; catalog cards are fully clickable for details. Workbench (workbench/): the off-catalog fork's escalation queue, adapted from the Invoice Processing layout — list with stat cards + Quote (amber) / Contract (red) chips, and a three-region detail (queue · finding + Approve/Counter/Reject + Autopilot composer · Activity/Details/Line items/Source). Seeded with the standing-desks quote and mobile-lines contract. Actions stubbed. Shared Ai Chat tweaks: hover-only message actions, tighter empty-state composer, stable scrollbar gutter. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…nd finish lines Pull the buy flow back to the intended model — chat as the front door and a tertiary escape hatch, a guided structured middle, and real finish lines. - Intake stays conversational; once a request is made, a guided surface (BuyScaffold + GuidedBuy) presents the envelope/results directly, no transcript - Constant header anchor (title + subtext) with staggered slide transitions, a consistent back control, and reserved bar height so the anchor never shifts - Agentic Bridge edit: per-field pickers with reasons + cost-center→approver cascade; routing line indented to the card; em-dash removed - Cart as a first-class object: persistent cart button (transitions in on Selection), peek with editable quantities, card-level steppers, and a primary "Review & submit · N · $total" that feeds the one unified Review page - Configure + catalog submission finish lines: outcome headline, agent line naming the destination, dynamic recap, single primary exit, no in-flow back - One Autopilot FAB replacing all scattered ask affordances (currently hidden behind a flag), with a persistent context-aware mini-chat thread - Selection product matches shown as a 3-up grid instead of a cut-off carousel - Shell: two demo seats (requester/buyer) with a Switch user menu item - Buy intake composer gains attachment UI; example chips get a "Try an example" label Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…mpt continuity, copy - Bridge → Configure now reads as an expansion (rail reveals from the right, center fades, header anchored) instead of a horizontal swipe - Configure rail cleaned up: sentence case, connecting-line timeline with dashed not-started dots, baseline-aligned header, more title→timeline space - Carry the user's prompt through the flow: a "Request · From you" row on both Bridges (editable free text on catalog, read-only on contract) and the prompt as the Review hero for continuity - Bridge field picker closes with the reverse of its open (a touch quicker); the edit pencil swaps to a check while a field is open - Rebrand "Autopilot" → "AI Assistant" and "Picked for you" → "Best match" in user-facing text (code identifiers unchanged) - Hide the Autopilot FAB behind a flag (kept fully wired for later) - Copy: intake/Bridge/Selection headers + subtext, intake placeholder - Fix: contract finish line "Back to Buy" now resets to a fresh Intake (honors resetChat) instead of returning to the in-flight Bridge Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…cles The not-completed step markers were inline spans, so size-4 didn't apply and they collapsed to a thin vertical sliver. Add block + a 2px ring so they match the completed checkmark circles: solid border for the current step, dotted for upcoming. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ed Buying - Configure timeline dots render as proper circles (checks for done, solid ring current, dotted upcoming) - Configure option cards use the card glow selectable state (glass), keeping the teal selected outline - Match preview cards and both Bridge envelopes use the glass variant - Configure step content staggers in (question, note, options, actions) - Selection "Review & submit" transitions in like the top-bar buttons - Soften the card selectable AI glow opacity (shared card component) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ests queue Add the third use case (services sourcing / RFQ) and the requester's Requests surface to the Guided Buying prototype. Services sourcing: - Swap the desks chip for "Hire 2 contract designers for the Q3 rebrand"; the services Bridge routes an RFQ to procurement. - Workbench gains REQ-2053 with a vendor shortlist (indicative estimates, agent pick, provenance) and an RFQ-as-primary action that sends to the shortlist. Requests (the requester's seat, mirror of the buyer's Workbench): - Seat-dependent nav: requester sees Requests, buyer sees Workbench; the identity chip swaps both and lands on each seat's queue. - Workbench-style list (stat cards + table); detail is a right-side slide-over panel with the status timeline, an AutopilotIcon lead banner, and state-fit actions (Message procurement / Mark urgent in-flight, Reorder / View order when terminal). Notes and urgent flags surface in the buyer's Workbench. - Submitting a contract or services request lands in its Requests panel; the standalone routed confirmation screen is dissolved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…at rail Replace gradient circle + AutopilotIcon header with the AiMark (Astroid) icon painted via SVG gradient def, and apply --ai-gradient-text clip to the wordmark. Renames label from "AI Assistant" to "Autopilot" per project brand. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…uided Buying - Add FlowPhaseBar component: horizontal phase indicator with dot/check glyphs, muted connector lines, completed phases clickable as back-nav - Wire CATALOG_PHASES (Details→Choose→Review→Done) and NON_CATALOG_PHASES (Details→Sent) into BuyFlow, Review, and CatalogSubmitted - Fix B1 headline reset: replace didReset ref with __TSR_index-keyed effect so navigating to /buy again from the sidebar always resets to Intake - Add fromReview HistoryState flag; Review's phase bar navigates back to Buy without clearing the conversation (preserves selection state) - B2: extend RequestsContext with submittedRows/submitRequest; CatalogSubmitted registers REQ-2052 on mount so it appears in My Requests immediately - B3: MatchCard title line-clamp-2 with fixed 2-line height for aligned cards - B4: Add-button label unified to "Add N" on all three selection cards - B5: Retire gradient fills — Best match badges and send button replaced with ai-gradient-start/15 soft-tint; glow effects kept at opacity-15 - B6: Date format changed from MM/DD/YYYY to DD MMM YYYY across all request rows - B7: KPI hint copy "still with procurement" → "pending approval or sourcing" - B8: Remove Dashboard from sidebar nav (route and page preserved) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…uying shelf build Add a P1/P2 tier toggle to the Guided Buying prototype for CGA (now) vs V2 (next) feature comparison. Key additions: - TierContext / TierProvider with localStorage persistence - <P1> and <P2> gate components; useTier() only in permitted files - TierToggle segmented control injected into ApolloShell via new headerSlot prop - GB prototype tokens added to globals.css (--gb-tealbg, --gb-tealline, etc.) - J1-01: chip starters copy cleanup (no trailing periods) - J1-02: TeamsResumeCard with teal border, resume to bridge, step name "Picks up at Details" instead of drifting step number - J1-04: AI reasoning strip above match grid, not-picked italic reasons on alt cards, AI pick badge with P1/P2 text swap, teal evidence chips on lead card, action chip row (Why not the XPS?, Compare all three, Ask) - J1-05: P2 personalized strip with provenance chips (lucide icons replacing emoji), Ordered in May chip on lead, Yoga set-aside via setAside prop on MatchCard (unified component, no separate card — prevents layout drift), Update my preferences chip at P2 - KPI grid: auto-fit minmax(200px,1fr) — 3 tiles at P1, 4 at P2, no dead space - Spend under management tile: teal border, +$27,735 delta, P2 only - Chip text raised to 11px minimum Browser-verified at 1440px: KPI grid auto-fit confirmed; Yoga slot height 347px at P1 and P2 (0px delta). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…mit A) Replace ad-hoc ACCENT/gb-teal Button overrides and chip constants with Apollo toolkit primitives across the catalog flow. - MatchCarousel: Card variant="glass" + AiGlow variant="card" for lead card (drops selectable="ai" collision); Badge status="ai" for AI pick badge; Badge variant="secondary" for evidence chips; Badge status="ai" variant="secondary" for memory chips; Button variant="ai-outline" for Ask chip; reasoning strip uses --ai-gradient + --insight-200 border - All 10 catalog files: remove const ACCENT and every className override that applied it; Button default renders bg-primary already - Remove direct bg-(--gb-teal) className from Button in ServiceBridge, ServicesBridge, NotInCatalogBanner, ProductCard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tem (Commit B) Replace all --gb-* prototype tokens with canonical Apollo tokens and delete the --gb-* definitions from globals.css. - --gb-teal → --primary across all 14 affected files (spans, borders, rings, backgrounds, text, dot indicators) - --gb-indigo → --insight-600 (TierToggle P2 active state, TeamsResumeCard icon fill) - --gb-indigobg → --insight-50 (TeamsResumeCard icon area background) - WorkbenchDetail timeline dots: amber-500 → --warning, emerald-500 → --success - Delete all 8 --gb-* custom property definitions from app/globals.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- MatchCarousel: add AI disclosure line (Info icon + "The output is AI generated. Please review.") below the card grid - MatchCarousel: Yoga card renders identically at both tiers on arrival; set-aside state reserved for stop-3 dock correction (wires in separately) - MatchCarousel: remove "32GB min · saved Jun 12" third provenance chip from j1-05 P2 reasoning strip - ServiceBridge: add AI disclosure line below the interpreted-summary routing line, above the CTA Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…off JourneyBar PM feedback 4 tasks: JourneyBar stage interactivity fix (Received non-button, delivery receipt link), Details button on shelf cards via ProductDetailOverlay, CatalogSubmitted "What happens next" JourneyBar on /track, PO record route at /po/$id with print stylesheet. GROUP 2 cleanup: caveat moved below journey card in RequestWindow (consistent with the other five caveat placements); yogaSetAside state renamed to correctionMade throughout BuyFlow, GuidedBuy, MatchCarousel, ShelfDock. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… tiles
Removes the P2-gated "Spend under management" tile; hub shows exactly 3 tiles at both
tiers with the auto-fit grid unchanged.
Adds an AI attention line above the tiles, derived from in-flight request data: approver
name and pending-days count parsed from REQUEST_DETAILS, item noun extracted from the
request title. P2 tier appends one inline sentence ("I sent a reminder this morning.")
without altering the P1 sentence. Follow up button routes to /requests/$id at both tiers.
AiCaveat below the attention line at both tiers. Renders nothing if no in-flight request
exists.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Thread userMenuAdditionalItems through ApolloShell → ShellLayout → ShellSidebar → UserProfile → UserProfileMenuItems, replacing the headerSlot TierToggle. TierMenuSection renders two DropdownMenuItems with a Check icon on the active tier, grouped under a "Prototype tier" label. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Avatar background shifts with tier: primary for P1/Now, --insight-600 for P2/Next. Thread avatarClassName through ApolloShell → ShellLayout → ShellSidebar → UserProfile → AvatarFallback. Add colored legend dots (size-2 rounded-full in icon-sized containers) to the tier menu items so they align horizontally with the Toggle theme and Language icons below. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Wrap the 3-up match grid in a -mx-20 breakout div so cards have more horizontal room without widening the surrounding content (reasoning strip, chips, caveat stay at max-w-[720px]). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Back | stepper (absolute center) | Reset+Cart all live in one h-12 band with a hairline border-b. Scroll area moved below the band so the chrome is fixed while content scrolls. phaseBar no longer lives in the anchor div — it sits in the band between the flanking controls. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…oose MatchCarousel now shows the user's original requestText (from useConversation) as a quoted line above the AI reasoning strip — making the human ask visually distinct from AI output. P1 strip shortened: trailing "Here are all three matches so you can see why." removed (already implied by the cards below). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Each non-lead, non-set-aside MatchCard now gets a "Why not this?" ghost button that opens the ShelfDock scoped to that item (Yoga or XPS). ShelfDock gains a `subject: CatalogItem` prop; defense copy switches between XPS_DEFENSE and YOGA_DEFENSE based on subject.id. "Update my preferences" moves into the P2 reasoning strip (after badge chips). The chip row below the grid is removed; the Ask button moves beside the Review CTA in the bottom row. BuyFlow adds shelfDockSubject state and passes it to ShelfDock. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
INFERRED_REQUEST_QUANTITY corrected from 2 to 15 so "Add N" and cart totals reflect the canonical journey (15 × $1,849 EPP). SAMPLE_REQUEST summary and the Intake CATALOG_STARTER chip updated to match "15 laptops for Fusion Event contractors" — keeps the requestText hero on the Choose screen consistent with the cards. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…bject At P2, the Teams resume card and the AiChatInput now share a single continuous outline: the band provides top+left+right borders (rounded-t-xl, border-2 border-input, insight-50 tint), the form provides left+right+bottom (border-t-0 rounded-b-xl). No gap, no double border at the seam. AiChatInput gains an `embedded` prop that drops the outer pt-3/px-4 padding (aligning left/right borders with the band above), suppresses the glow, and removes the focus box-shadow that would bleed into the band. Corner radius changes between tiers are the deliberate, accepted consequence of attachment. Resume demoted to ghost button — one primary action on the Intake screen. Band background is --insight-50 so it reads as provenance, not a peer card. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Done screen: header chrome, receipt-style summary card, animated confirm check, and reordered action bar with the AI caveat above it - Add consistent step-transition fades across Choose, Review, and Done - Bridge: read-only Request row with a Revise action that reparses the envelope and preserves any fields the user overrode - Fix BuyFlow's reset effect wiping conversation state on navigation to Review/Done, which had silently broken the header title everywhere - Assistant panel: split the Details entry into records vs. guessed fields, with hover tooltips on the pencil/revise icons - Request detail: adopt PageHeader, two-column layout with a sidebar for record metadata and linked records, gated to the P2 tier as before - Split request titles into a short generated title (used as chrome) and the verbatim prompt (shown in full in the sidebar) - Fix the Requests list/detail title mismatch by sourcing both from the same generated title instead of a separately re-derived cart summary Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…tions Request detail: - Merge the agent line and stage bar into one AI-summary lead card: mark + label, a state-aware sentence with the notable fact highlighted via --ai-gradient, and a new ActivityTrack (bigger nodes, pulsing ring on the current stage, event pins for user/agent activity). - Header now only carries a primary action when one is genuinely owed (Confirm receipt when delivered, Respond when sent back); status badge removed since state already reads from the summary and stage track. - Nudge and Mark urgent moved into the lead card as real outline buttons with icons; completed state keeps button chrome (filled-muted, check icon, "today" label) instead of collapsing to plain text. - Reference column de-carded to a plain labelled list, widened to 200px, aligned to the card's first content line, 8px-base vertical rhythm. Requests list: - Add a "delivered" status (wired end-to-end via REQ-2031: row, detail, and close-window data) so Confirm receipt has somewhere real to go. - Row-level Confirm receipt action for delivered rows, plus a hover-reveal overflow menu for copy link / view PO. - Attention line now summarizes count and opens a filtered view when more than one request needs attention, instead of only ever naming one.
… URLs, inline cart editing Delivery receipt: - Remove the standalone Close Window and /close/$id route; a request that reaches "delivered" now shows that state on its own detail page instead of a second page with different header chrome. - "Confirm receipt" opens a modal (ordered qty, quantity-received stepper with live match/short warning, damaged-items checkbox, optional note) instead of committing silently or navigating away. - Confirming plays the Done screen's check animation (extracted to a shared ConfirmCheck), appends a Communication entry, and — when partial or damaged — states that in the summary and on the stage track. - Linked records (PO/PR chips) migrate from the removed page's data into the sidebar, driven by RequestDetail instead of hardcoded JSX. Decision window — notifications and post-approval states: - Replace the persistent "Approved" banner with a Sonner toast per the in-product notification guidelines; add a global Toaster host. - Add a header Status badge + Approved date field so the state change stays visible once the toast dismisses. - Every element gets a distinct approved-state instead of showing pre-decision copy after the fact: AI summary states the outcome (PO sent, expected delivery), budget/device management restate in present tense, the PO chip becomes a real linked record, a confirmation line + "View order" replaces the decision buttons, and the approval itself (with any note left in the composer) appends to Communication. Real URLs: - Switch the TanStack router from memory to browser history with a basepath, add a Next.js catch-all route (split into a literal page.tsx + sibling [...slug] since Nextra's page-map needs a literal file) so reloading or sharing a deep link works instead of 404ing. - Make the Buy flow's Bridge/Selection phases addressable via /buy?phase=..., with instant seeding (bypassing the scripted stream) for deep links and reloads; Review and the Done screen seed the same way when reached with an empty cart. - Fix a stray re-render (router state updates a tick before BuyFlow unmounts on its way to /review) that was silently resetting the conversation, breaking Review's Back button. Review screen — inline cart editing: - Remove "Edit cart" (it navigated away to change a number already on screen); line items become the cart itself — quantity stepper, unit price, remove control, live-recalculating totals. - Add "Add items from the catalog" as a drawer over Review instead of a navigation; removing the last item leaves an empty state with the add link and disables submit, without navigating away. - Fix the cart pricing bug: the drawer, header cart pill, and add-to-cart toast all priced off the browse-time list/EPP filter instead of the fixed EPP price the cart actually charges, so opening the cart could make the same order look like it got more expensive. Bump @tanstack/react-router to 1.170.18 (apollo-vertex only). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…f to Details New /home route: a composer identical to Buy's Intake (same AiChatInput, Teams-resume band, starter chips), plus a tiered "Your requests" list (P1 factual status line, P2 appends an agent-voice line and the AI caveat) with a single uniform stage icon per row. Added above Buy in the sidebar nav and as the app's default landing. Submitting (typed text, Enter, or the laptops chip) seeds the conversation via sendCatalogRequest and navigates to /buy?phase=bridge, so Details' Request row and Need by popover reflect the real typed text instead of the canonical demo default. The other two chips route to a plain /buy — they don't have an addressable Details step yet. AiChatEmptySuggestions gained additive label/value support so chips can show a short label while still submitting the full sentence; Buy's own chips now share the same STARTER_SUGGESTIONS constant. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…g under React 19 framer-motion registers every motion.* component via a useInsertionEffect that can end up scheduling a state update; React 19 warns on that timing regardless of effect. This is an open upstream issue (react/react#24160, motiondivision/motion#2668), not something in our own code, and every animation/interaction tested behaves correctly despite it. Adds a dev-only console.error filter for that one exact message, mounted once at the root layout, guarded against double-patching under Fast Refresh. Everything else still logs normally. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… to Decision Window Request Window's header overflow menu gets an "Approver view (demo)" action for in-flight requests with a named approver — jumps to /decision/$id with the same request id so the two screens agree on which request is open. Decision Window's own header/menu structure was reworked alongside it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…emory-write receipt
Shelf's thread gets a new "note" entry kind rendering a receipt chip
("Saved to Design Contractor spec · preferences updated") through
AiChatMessage, same treatment as the dock's own P2 correction save.
AiChatMessage gained an assistantMarkdownClassName override to support
it, and Alert gained a "success" status variant (outline + tinted).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…rank exit/enter animation Request Envelope: each field's provenance label opens a "Where this came from" popover (source, context, lock reason, and change actions, varying by whether the field is owned/team/policy/inferred). Need by's popover quotes the live request text instead of a static string. Ship-to and need-by now propagate through conversation state into Review and the Done screen instead of stopping at Bridge. Match Carousel: re-rank now runs as a full exit-then-enter cycle (old cards fade out/down staggered, new cards fade in/up staggered) instead of physically repositioning cards, fixing the AI-pick badge/thumbnail layout bugs and animation jank that came with the old FLIP approach. AiGlow gets its own opacity animation to stop it flashing on mount, a tuned CARD_EASE curve, and a measured min-height on the card list so the escalation strip below doesn't jump during the gap. Product Detail Overlay: switched from a right-edge sliding panel to a centered large dialog with a blurred backdrop. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…er list Replace the binary requester/buyer seat toggle and the request window's "Approver view (demo)" affordance with a single "Prototype persona" section in the user popover, listing Requester, Buyer, and Approver by name and role. Switching from a request's own detail page to the approver lands on that same request's decision view when one exists, instead of always resetting to a fresh queue. Adds an Approvals route for the new approver persona's own queue, reusing the My Requests list primitives against DECISION_DETAILS. homeRoute is typed against the registered route tree (RoutePaths) so a bogus route fails at compile time, which pulled in @tanstack/router-core as a direct dependency. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Approving in Decision Window writes a request status the requester's own surfaces read: the stage bar advances past Approval (P1) or past Ordering (P2), the activity feed and Home's row subtitle gain an insert-only entry, and the Home stage icon updates. cardState itself stays untouched, so the fix is scoped to isApproved checks at exactly four call sites rather than rippling into the header action or suggested replies. Stage bar labels now derive from stage state instead of being fixed strings: past tense with the actual date once done, present tense with an expected date while active, base verb with no date while upcoming, since there's no real basis to project when Ordered or Received will happen. The approval date is a single shared constant (REQ_2052_APPROVED_DATE) so the stage bar and Decision Window can't disagree on when it happened, and the AI summary's delivery claim is derived from the catalog record's own supplier lead time rather than a fabricated calendar projection. REQ-2052's need-by moves to Aug 1 (contractors start Aug 3, so the old Aug 28 date left 25 days of dead time after they'd already need the laptops). View order no longer navigates away from the decision: the PO renders in a Sheet in place, reading id as a plain prop instead of via useParams. The route stays registered for the request window's own Linked records chip. The PO's ship-to now derives from the same DecisionDetail the rest of the page reads, replacing a third hand-authored copy that had drifted to the wrong city. Print CSS is scoped to a class toggled only for the PO's own Print action and cleared on unmount, so it can no longer hijack printing of an unrelated page while mounted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ader Reuses the same reset sequence (clear the cart, reset the conversation, navigate to /buy) and button markup BuyScaffold's own header already uses, rather than a second differently-behaved entry point. Requester surface only, not added to Approvals. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… Dialog
Replaces the hand-rolled overlay (its own focus trap, Esc handler, and an
absolute-positioned scrim that could only cover the main column, never the
rail sidebar) with the registry Dialog primitive, the same one
MatchCarousel already uses correctly. DialogPortal plus a fixed inset-0
overlay gives a flat, full-viewport scrim and the primitive owns focus
trap and Esc/outside-click, removing the duplicate implementations.
Restructures the dialog's content: a header row with supplier identity and
a single close X, a two-column body (fixed image column, then title/price/
actions), and the source-and-availability strip promoted to a four-column
row that fits without scrolling. Removes the AI-pick callout that repeated
the product's own title back at itself, that signal already lives on the
shelf card where the comparison actually happens. Collapses the action
buttons into one row (stepper, primary) with compare/ask as quiet text
actions beneath, and relabels the primary to match the shelf cards' own
"Add {qty}" wording.
Type hierarchy and spacing in the spec breakdown now use three consistent
levels (section heading, group label, row label/value) snapped to real
type-scale and spacing tokens, with a fixed label column so values align
down the page. Ports and Coverage values switch from middot to comma
separators, which reads better at this density and frees up column width.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
"Why not this?" becomes "Compare with my pick" on the alternate shelf cards. The "Not finding what you're looking for?" row drops its own AI mark, which moves onto the Ask AI button instead of a generic message icon, so the AI mark consistently signals the agent hand-off rather than sitting next to plain static copy. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ricing
Each cart line now shows the struck list price beside the EPP unit price
("$2,199 $1,849 each, EPP"), matching the pattern the shelf cards and the
product detail dialog already use, so the summary's list-price total has
a visible derivation instead of appearing from nowhere. The remove control
moves next to the quantity stepper instead of the far right of the row.
CartSummary gains showSavingsRow and showSavingsCaption props rather than
hardcoding Review's own treatment: Review now shows just the Total line
with a quiet "EPP pricing saved $X against list" caption underneath,
dropping the separate List price and EPP savings rows, while the cart
drawer elsewhere keeps its existing breakdown untouched via the same
props' defaults. The remaining "Subtotal" label reads "List price" instead,
a running total wasn't what it was, this is a reference figure.
"Add items from the catalog" is hidden on Review's non-empty state, not
removed, the empty-cart state's own trigger keeps the drawer reachable.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…uthored copy The Approver popover's rule (zone 2) now names no role, since the routed-to title varies by cost center (Design Director, Brand Director, Product Design Lead) and that zone never recomputes; the routed-to name and title live entirely in the derived context (zone 3) instead. The Cost center popover now opens in both the unchanged and changed states, reading the same overridden state and revert() function the row's own controls use, where it previously lost its trigger entirely once changed. Alternates in both states are derived from the COST_TO_APPROVER map's own keys rather than authored, so they can't list the value already selected. The Need by popover no longer claims no date was mentioned while the header shows a hard date: it now cites the Fusion Event and derives Aug 1 from the contractors' Aug 3 start, still built from live intake text. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
| ([entry]) => { | ||
| if (entry) setToolbarStuck(!entry.isIntersecting); | ||
| }, | ||
| { root, threshold: 0 }, |
| @@ -0,0 +1,70 @@ | |||
| import { motion } from "framer-motion"; | |||
| import type { ReactNode } from "react"; | |||
| import { cn } from "@/lib/utils"; | |||
| // just overwrite this one, since entries upsert by step. | ||
| const { addStepEntry } = useAssistantThread(); | ||
| useEffect(() => { | ||
| const changedCount = Object.values(overridden).filter(Boolean).length; |
| ([entry]) => { | ||
| if (entry) setToolbarStuck(!entry.isIntersecting); | ||
| }, | ||
| { root, threshold: 0 }, |
| @@ -0,0 +1,70 @@ | |||
| import { motion } from "framer-motion"; | |||
| import type { ReactNode } from "react"; | |||
| import { cn } from "@/lib/utils"; | |||
| // just overwrite this one, since entries upsert by step. | ||
| const { addStepEntry } = useAssistantThread(); | ||
| useEffect(() => { | ||
| const changedCount = Object.values(overridden).filter(Boolean).length; |
📊 Coverage + size by packagePer-package bundle size on this PR (no JS/TS source changes detected under
"Coverage" is each package's own |
Storybook visual diff✅ No stories are affected by this PR's changes; nothing to compare. Logs Updated (PT): Aug 05, 2026, 03:00:41 PM |
There was a problem hiding this comment.
Pull request overview
This PR builds out the Guided Buying v3 prototype within the Apollo Vertex app, expanding the end-to-end procurement demo flow (Home → Buy → Catalog → Review → Requests → Approvals/Decision) and adding shared state so persona actions visibly affect request status across surfaces.
Changes:
- Adds new Guided Buying prototype routes/mounting strategy (full-screen client app mounted outside the docs layout) and expands shell extensibility for persona/seat switching.
- Introduces Workbench + Approvals queue surfaces and shared request state (notes, urgent flags, approvals, receipts) to close the requester ↔ buyer ↔ approver loop.
- Polishes catalog UX (filters/toolbar, cart + review flows, product detail dialog, rail behaviors) and extends registry primitives (alerts, AI chat UI, shell menu items).
Reviewed changes
Copilot reviewed 101 out of 102 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/apollo-vertex/templates/guided-buying/workbench/WorkbenchList.tsx | Adds Workbench landing with stat cards, search/filters, and escalation queue table. |
| apps/apollo-vertex/templates/guided-buying/workbench/Workbench.tsx | Hosts list/detail views and persists in-session decisions across open/close. |
| apps/apollo-vertex/templates/guided-buying/TierToggle.tsx | Adds P1/P2 tier toggle UI. |
| apps/apollo-vertex/templates/guided-buying/tier-context.tsx | Adds persisted tier context (localStorage). |
| apps/apollo-vertex/templates/guided-buying/requests/RequestsProvider.tsx | Adds shared cross-seat request state (threads, urgent, submitted rows, receipts, approval status overrides). |
| apps/apollo-vertex/templates/guided-buying/requests/requests-context.ts | Defines requests context contract and hook guard. |
| apps/apollo-vertex/templates/guided-buying/requests/RecordEntry.tsx | Adds shared record entry renderer for communications/activity-style lists. |
| apps/apollo-vertex/templates/guided-buying/requests/ReceiptModal.tsx | Adds receipt confirmation dialog with quantity/damage/note input. |
| apps/apollo-vertex/templates/guided-buying/requests/PORecord.tsx | Renders PO record (standalone + embedded) with print-scoped styling and ship-to derived from request data. |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequests.tsx | Adds My Requests list host component. |
| apps/apollo-vertex/templates/guided-buying/requests/Approvals.tsx | Adds Approver queue table and navigation into Decision pages. |
| apps/apollo-vertex/templates/guided-buying/requests/ActivityTrack.tsx | Adds request activity stage track with derived date/status semantics. |
| apps/apollo-vertex/templates/guided-buying/P2.tsx | Conditional render helper for P2 tier content. |
| apps/apollo-vertex/templates/guided-buying/P1.tsx | Conditional render helper for P1 tier content. |
| apps/apollo-vertex/templates/guided-buying/JourneyBar.tsx | Adds unified horizontal progress indicator used by multiple flows. |
| apps/apollo-vertex/templates/guided-buying/ConfirmCheck.tsx | Adds success animation (framer-motion) shared across completion moments. |
| apps/apollo-vertex/templates/guided-buying/catalog/variants.ts | Adds catalog variant registry for switching between visual variants. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/useRail.ts | Adds session-persisted assistant rail open/collapse preference. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/use-content-overflow.ts | Adds hook to detect overflow for conditional footer border treatment. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/types.ts | Adds catalog/request types (items, filters, pricing basis, etc.). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Toolbar.tsx | Adds catalog toolbar with search, filters, layout toggle, sort, compare, and pinned cart affordance. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/TeamsResumeCard.tsx | Adds Intake “resume from Teams” band card. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/StepIndicator.tsx | Adds slim intake/selection/review/track progress nav. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServicesBridge.tsx | Adds services sourcing bridge (RFQ handoff) and routing CTA. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServiceBridge.tsx | Adds contract/service bridge and handoff into configurator. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ScanRow.tsx | Adds scannable row layout for catalog items with compare/cart/detail affordances. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RecommendationCard.tsx | Adds “best match” hero recommendation card with AI gradient framing. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RailDock.tsx | Adds docked assistant rail container (expanded vs launcher). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/QuantityStepper.tsx | Adds shared controlled quantity stepper component. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductImage.tsx | Adds resilient product image/logo renderer with graceful fallbacks. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetailOverlay.tsx | Ports product detail to Dialog primitive to ensure full-viewport scrim and focus behavior. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetail.tsx | Reworks product detail layout, actions, and spec breakdown. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductCard.tsx | Adds card layout for catalog items with keyboard interaction support. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/price-basis-context.ts | Adds shared price basis context for consistent pricing display. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/NotInCatalogBanner.tsx | Adds off-catalog banner affordance for prototype routing paths. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/IntentHeader.tsx | Adds Selection hero intent + agent note header. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/GuidedBuy.tsx | Renders the guided Buy surface from tool-call parts (latest assistant turn). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FlowPhaseBar.tsx | Wraps JourneyBar as a step/phase progress indicator for Buy flow. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FlowFooter.tsx | Introduces a shared fixed footer bar and registration hook for steps. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FiltersControl.tsx | Adds filters popover panel with live-apply behavior. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FilterChips.tsx | Adds active-filter chip row with per-chip removal and clear-all. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/conversation-context.ts | Extends conversation context contract for routing, overrides, deep-link seeding, and actions. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ChatRail.tsx | Adds docked assistant rail UI for ambient catalog help. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartSummary.tsx | Adds shared cart totals (subtotal/total, savings breakdown/caption, item count). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartProvider.tsx | Adds cart state provider lifted above router for cross-route sharing. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartLine.tsx | Adds cart line renderer (editable in drawer, read-only on Review). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartDrawer.tsx | Adds cart drawer surface (Sheet) with review submit and approval limit cue. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/cart-context.ts | Adds cart context contract and hook guard. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/assistant-thread-context.tsx | Adds persistent assistant “thread” store (step entries, Q&A, notes). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/AddItemsDrawer.tsx | Adds Review “add items” drawer for lightweight top-off flow. |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV2.tsx | Adds Catalog variant 2 (vendor logo tiles). |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV1.tsx | Adds Catalog variant 1 (product photo tiles). |
| apps/apollo-vertex/templates/guided-buying/catalog/Catalog.tsx | Adds Catalog page host and cold-vs-scoped rendering selection. |
| apps/apollo-vertex/templates/guided-buying/AutopilotFab.tsx | Adds contextual Autopilot FAB popover (currently feature-flag hidden). |
| apps/apollo-vertex/templates/guided-buying/AutopilotChatProvider.tsx | Adds persistent scripted Autopilot thread provider above router. |
| apps/apollo-vertex/templates/guided-buying/autopilot-chat-context.ts | Adds Autopilot chat context contract and hook guard. |
| apps/apollo-vertex/registry/shell/shell.tsx | Extends shell API for user override, user click, header slot, and extra user menu items. |
| apps/apollo-vertex/registry/shell/shell-user-provider.tsx | Adds user override support (demo seats) layered over auth user. |
| apps/apollo-vertex/registry/shell/shell-user-profile.tsx | Adds optional “switch user” affordance + injected menu items + avatar styling override. |
| apps/apollo-vertex/registry/shell/shell-user-profile-menu-items.tsx | Adds “Switch user” menu item and hook for injecting additional items. |
| apps/apollo-vertex/registry/shell/shell-sidebar.tsx | Plumbs user click/additional menu items/avatar styling through sidebar to user profile. |
| apps/apollo-vertex/registry/shell/shell-layout.tsx | Adds optional header slot and propagates user/menu/avatar customizations. |
| apps/apollo-vertex/registry/shell/group-membership-guard.tsx | Minor import ordering adjustment. |
| apps/apollo-vertex/registry/card/card.tsx | Tweaks selected glow opacity. |
| apps/apollo-vertex/registry/alert/alert.tsx | Adds success status styling variants. |
| apps/apollo-vertex/registry/ai-glow/ai-glow.tsx | Tweaks AI glow opacity defaults. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx | Replaces top overlay fade with mask-image approach for background-agnostic fade. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx | Adds assistant markdown class override support. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx | Makes message actions hover/focus-revealed only (reduces persistent noise). |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx | Adds embedded mode + improves empty-submit focus behavior + padding tweaks. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-suggestions.tsx | Supports labeled suggestions while submitting full values. |
| apps/apollo-vertex/package.json | Updates router dependency version and adds router-core dependency used for route path typing. |
| apps/apollo-vertex/locales/en.json | Adds Guided Buying nav/persona-related i18n keys. |
| apps/apollo-vertex/app/layout.tsx | Adds known-warning suppression component to app layout. |
| apps/apollo-vertex/app/guided-buying/page.tsx | Adds Guided Buying entry page. |
| apps/apollo-vertex/app/guided-buying/guided-buying-mount.tsx | Mounts Guided Buying shell into a separate client root attached to body. |
| apps/apollo-vertex/app/guided-buying/[...slug]/page.tsx | Adds catch-all route for deep links and static param enumeration. |
| apps/apollo-vertex/app/experiment/guided-buying/page.mdx | Adds experiment landing page linking to the prototype in a new tab. |
| apps/apollo-vertex/app/experiment/_meta.ts | Adds experiment nav metadata for Guided Buying. |
| apps/apollo-vertex/app/_meta.ts | Hides Guided Buying from the main docs nav. |
| apps/apollo-vertex/app/_components/suppress-known-warnings.tsx | Adds dev-only console.error suppression for a known React 19 / framer-motion warning. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (1)
apps/apollo-vertex/templates/guided-buying/workbench/WorkbenchList.tsx:79
- The Status filter is applied against the seed row status (
r.status), but the rendered status is overridden by in-sessiondecisions. After making a decision, the row badge updates but the row will still be filtered as "Awaiting" (and won’t appear under Approved/Rejected/etc). Filter against the same effective status you render.
| "all", | ||
| ); | ||
|
|
||
| const stats = workbenchStats(); |
| <TableRow | ||
| key={row.id} | ||
| onClick={() => { | ||
| if (openable) onOpen(row.id); | ||
| }} | ||
| className={cn( | ||
| "h-[52px]", | ||
| openable && "cursor-pointer hover:bg-muted/50", | ||
| )} | ||
| > |
| <TableRow | ||
| key={row.id} | ||
| onClick={() => | ||
| void navigate({ | ||
| to: "/decision/$id", | ||
| params: { id: row.id }, | ||
| }) | ||
| } | ||
| className="h-[52px] cursor-pointer hover:bg-muted/50" | ||
| > |
| useEffect(() => { | ||
| const el = ref.current; | ||
| if (!el) return; | ||
| const check = () => setOverflowing(el.scrollHeight > el.clientHeight + 1); | ||
| check(); | ||
| const observer = new ResizeObserver(check); | ||
| observer.observe(el); | ||
| return () => observer.disconnect(); | ||
| }, []); |
| @@ -37,8 +38,10 @@ | |||
| "baseline_agent_version": "Baseline agent version", | |||
| "baseline_updated_successfully": "Baseline updated", | |||
| "business_user": "Business user", | |||
| "buy": "Buy", | |||
| "cancel": "Cancel", | |||
| "card_component": "Card Component", | |||
| "catalog": "Catalog", | |||
registry/shell/shell-text.tsx failed with TS2590 (union type too complex to represent) because ValidKeys (lib/react-i18next.d.ts, keyof typeof en) was already large enough that adding the "approvals" key for the new persona nav item pushed it over TypeScript's complexity ceiling. A same-size swap (removing one key while adding one) still failed, this wasn't about count alone, en.json was already right at the edge. Removed 38 keys confirmed to have zero references anywhere in the app (source, mdx docs, and other config, checked directly, not just grepped once) rather than touching the shared typed-translation mechanism itself. Net result is smaller than the previously-working baseline, with real headroom this time, and the two errors this caused (this one, plus a cascading TS2353 in MatchCarousel.tsx that only appeared once this one did) are both gone locally with the exact CI command. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
CI's Build check (Next's own TypeScript pass) reported this once the
locales fix cleared the union-complexity error it had been masking:
transition={{ ..., exit: {...} }} isn't a real framer-motion shape, exit
timing belongs on the exit prop's own object, matching the pattern
BuyScaffold.tsx already uses. Same duration/ease/delay values, just moved
to where the type actually expects them. Pre-existing code, not something
introduced this session, just uncovered once the other error stopped
crowding it out.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Summary
Guided Buying prototype build-out: a requester/buyer/approver demo of an
AI-assisted procurement flow (Home → Buy → Catalog → Review → Requests →
Decision/Approvals), built on Apollo Vertex components throughout.
Recent work on this branch:
(Requester/Buyer/Approver), replacing a binary seat toggle and a
standalone "Approver view (demo)" affordance. Adds an Approvals queue
for the approver persona.
status the requester's stage bar, activity feed, and Home row actually
reflect, instead of approval changing nothing visible. Stage bar labels
and dates now derive from stage state rather than being fixed strings.
navigating away, and its ship-to is derived from the same request data
the rest of the page reads instead of a third, drifted copy.
(fixing a scrim that couldn't cover the rail sidebar) and reworked its
layout, type hierarchy, and spacing.
copy from live state instead of authored strings that could go stale
when a selection changed.
order summary pricing/labels, shelf card relabeling.
Test plan
requester's stage bar, activity feed, and Home row update
grid, confirm the scrim covers the full viewport
center / need by
🤖 Generated with Claude Code