Guided Buying: v2#912
Draft
petervachon wants to merge 7 commits into
Draft
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>
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Comment on lines
+222
to
+225
| ([entry]) => { | ||
| if (entry) setToolbarStuck(!entry.isIntersecting); | ||
| }, | ||
| { root, threshold: 0 }, |
There was a problem hiding this comment.
Pull request overview
Adds the “Guided Buying: v2” prototype to apollo-vertex, introducing a full guided-buying experience (Buy → Catalog → Review/Track) plus dual-seat queue surfaces (requester “My Requests” and buyer “Workbench”) within the Apollo shell.
Changes:
- Introduces new Guided Buying flows and UI surfaces (Buy scaffolding, catalog selection/detail/compare, review/track outcomes).
- Adds requester/buyer queue experiences with shared session state (requests notes/urgent flags; workbench decisions reflected in the list).
- Extends the shell to support a caller-supplied “seat” identity and an optional “Switch user” action; includes several UI polish tweaks (AI chat masking/actions, card highlight opacity).
Reviewed changes
Copilot reviewed 70 out of 71 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/apollo-vertex/templates/guided-buying/workbench/WorkbenchList.tsx | Workbench landing page: stat cards, filters, queue table. |
| apps/apollo-vertex/templates/guided-buying/workbench/Workbench.tsx | Workbench host: list vs. detail routing and decision persistence. |
| apps/apollo-vertex/templates/guided-buying/requests/RequestsProvider.tsx | Session-scoped shared state between requester/buyer seats (threads/urgent). |
| apps/apollo-vertex/templates/guided-buying/requests/requests-context.ts | Requests context types + hook. |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequestsList.tsx | Requester queue list surface (filters + table). |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequests.tsx | Requester host: list + slide-over panel orchestration. |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequestPanel.tsx | Request detail slide-over with timeline + follow-up actions. |
| apps/apollo-vertex/templates/guided-buying/requests/data.ts | Mock request rows/details + derived stats. |
| apps/apollo-vertex/templates/guided-buying/GuidedBuyingShell.tsx | In-app router + seat switching + providers wiring for the prototype. |
| apps/apollo-vertex/templates/guided-buying/catalog/variants.ts | Registry for Catalog variants (v1/v2). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/useRail.ts | Session-persisted open/collapse preference for the assistant rail. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/types.ts | Catalog domain types (items, filters, request model, etc.). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Toolbar.tsx | Catalog toolbar: search, filters, layout toggle, sort, compare/cart actions. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/StepIndicator.tsx | Buy progress indicator (Intake → Selection → Review → Track). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServicesBridge.tsx | Sourcing (services/RFQ) bridge + handoff to My Requests. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServiceBridge.tsx | Contract/service bridge + CTA to configurator. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ScanRow.tsx | Row-layout catalog item rendering + cart/compare interactions. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Review.tsx | Review & submit surface for catalog path. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RequestEnvelope.tsx | Bridge “request envelope” with inline editable inferred fields. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RecommendationCard.tsx | Featured “best match” recommendation card. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RailDock.tsx | Dock container for assistant rail (panel vs launcher). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/QuantityStepper.tsx | Shared quantity stepper control. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductImage.tsx | Product image/logo rendering with graceful fallback. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetailOverlay.tsx | Scoped overlay for product detail with focus/ESC hygiene. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetail.tsx | Product detail content (pricing, specs, compare/cart actions). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductCard.tsx | Card-layout catalog tile rendering. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/price-basis-context.ts | Context for list vs EPP price basis selection. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/NotInCatalogBanner.tsx | Static off-catalog banner placeholder. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/MatchCarousel.tsx | In-chat matches presentation + CTA(s) to catalog/review/workbench. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/IntentHeader.tsx | Selection hero header (restated request + agent note). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/GuidedBuy.tsx | Structured buy surfaces driven by the latest tool-call parts. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FiltersControl.tsx | Filter popover UI controlling filters state. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FilterChips.tsx | Active filter chips row + per-chip removal. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ConversationProvider.tsx | Scripted conversation state machine powering Buy/Catalog/rail. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/conversation-context.ts | Conversation context types + hook. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CompareView.tsx | Full-screen compare table with add/remove and diff highlighting. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ChatRail.tsx | Ambient assistant rail UI for catalog browsing. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CatalogSubmitted.tsx | Track/finish line screen after submitting a catalog request. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartSummary.tsx | Shared cart totals (items/subtotal/savings). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartProvider.tsx | Cart state provider shared across routes. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartLine.tsx | Cart line rendering (editable vs read-only). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartDrawer.tsx | Cart peek drawer UI + review CTA. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/cart-context.ts | Cart context types + hook. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/BuyScaffold.tsx | Persistent Buy frame (header anchor, back/reset, cart). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/BuyFlow.tsx | Buy route orchestration + transitions into Catalog/Configure. |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV2.tsx | Catalog variant 2 wrapper (logo tiles). |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV1.tsx | Catalog variant 1 wrapper (photo tiles). |
| apps/apollo-vertex/templates/guided-buying/catalog/Catalog.tsx | Catalog host: cold browse vs request-scoped view. |
| apps/apollo-vertex/templates/guided-buying/AutopilotFab.tsx | Context-aware Autopilot FAB (currently feature-flag hidden). |
| apps/apollo-vertex/templates/guided-buying/AutopilotChatProvider.tsx | Cross-surface mini-chat provider for the FAB. |
| apps/apollo-vertex/templates/guided-buying/autopilot-chat-context.ts | FAB chat context types + hook. |
| apps/apollo-vertex/registry/shell/shell.tsx | Shell: support identity override + optional “switch user” action wiring. |
| apps/apollo-vertex/registry/shell/shell-user-provider.tsx | Shell user provider: supports user override. |
| apps/apollo-vertex/registry/shell/shell-user-profile.tsx | User profile menu wiring to surface optional switch action. |
| apps/apollo-vertex/registry/shell/shell-user-profile-menu-items.tsx | Adds optional “Switch user” menu item + translation key. |
| apps/apollo-vertex/registry/shell/shell-sidebar.tsx | Plumbs onUserClick into the sidebar footer user profile. |
| apps/apollo-vertex/registry/shell/shell-layout.tsx | Plumbs onUserClick through layout → sidebar. |
| apps/apollo-vertex/registry/card/card.tsx | Adjusts selected gradient glow opacity. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx | Empty-state spacing tweak + top-edge fade via CSS mask. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx | Message actions become hover/focus-only (including latest message). |
| apps/apollo-vertex/next-env.d.ts | Updates typed routes import path. |
| apps/apollo-vertex/locales/en.json | Adds translations for nav labels and “switch user”. |
| apps/apollo-vertex/app/guided-buying/page.tsx | Mounts the prototype into a separate React root for full-screen isolation. |
| apps/apollo-vertex/app/experiment/guided-buying/page.mdx | Adds experiment docs entry linking to the prototype. |
| apps/apollo-vertex/app/experiment/_meta.ts | Registers “Guided Buying” experiment page. |
| apps/apollo-vertex/app/_meta.ts | Hides /guided-buying from the main docs nav. |
Comment on lines
+68
to
+79
| const stats = workbenchStats(); | ||
| const query = search.trim().toLowerCase(); | ||
|
|
||
| const rows = WORKBENCH_ROWS.filter((r) => { | ||
| if (typeFilter !== "all" && r.type !== typeFilter) return false; | ||
| if (statusFilter !== "all" && r.status !== statusFilter) return false; | ||
| if (query) { | ||
| const hay = `${r.id} ${r.request} ${r.requester}`.toLowerCase(); | ||
| if (!hay.includes(query)) return false; | ||
| } | ||
| return true; | ||
| }); |
Comment on lines
+192
to
+201
| <TableRow | ||
| key={row.id} | ||
| onClick={() => { | ||
| if (openable) onOpen(row.id); | ||
| }} | ||
| className={cn( | ||
| "h-[52px]", | ||
| openable && "cursor-pointer hover:bg-muted/50", | ||
| )} | ||
| > |
Comment on lines
+169
to
+178
| <TableRow | ||
| key={row.id} | ||
| onClick={() => { | ||
| if (openable) onOpen(row.id); | ||
| }} | ||
| className={cn( | ||
| "h-[52px]", | ||
| openable && "cursor-pointer hover:bg-muted/50", | ||
| )} | ||
| > |
Comment on lines
+45
to
+48
| /** Override the sidebar identity (e.g. a demo "seat"). */ | ||
| user?: ShellUser; | ||
| /** Make the identity chip a button (e.g. switch seats) instead of a menu. */ | ||
| onUserClick?: () => void; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.