Guided Buying: v1 (preserved)#911
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
This PR introduces a full “Guided Buying” prototype inside the Apollo Vertex app, wiring together a scripted Buy → Catalog → Review/Track experience plus requester/buyer queue views (My Requests / Workbench), and adds shell support for demo “seat” switching.
Changes:
- Added Guided Buying prototype surfaces (Buy flow, Catalog selection, Review/Track, Workbench, My Requests) with mocked state/context.
- Added shared session state for requests (threads + urgent flags) and workbench decisions.
- Updated Apollo Shell user plumbing to allow a caller-supplied identity (“seat”) and a “Switch user” menu action; also includes small UI tweaks in registry components.
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 with stats, search/filters, and escalation table. |
| apps/apollo-vertex/templates/guided-buying/workbench/Workbench.tsx | Workbench host toggling between list and detail with decision persistence. |
| apps/apollo-vertex/templates/guided-buying/requests/RequestsProvider.tsx | Shared requester/buyer request state (threads + urgent flags). |
| apps/apollo-vertex/templates/guided-buying/requests/requests-context.ts | Requests context types + hook guard. |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequestsList.tsx | Requester list view (stats + filter/search + table). |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequests.tsx | Host for list + slide-over request panel (deep-link support). |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequestPanel.tsx | Slide-over request detail panel with timeline + follow-ups. |
| apps/apollo-vertex/templates/guided-buying/requests/data.ts | Mock request rows/details + derived stats. |
| apps/apollo-vertex/templates/guided-buying/GuidedBuyingShell.tsx | Full prototype shell with in-memory routing + seat-based nav. |
| apps/apollo-vertex/templates/guided-buying/catalog/variants.ts | Catalog variant registry (v1/v2). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/useRail.ts | Session-persisted assistant rail open/collapse preference. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/types.ts | Catalog types for items/filters/requests/specs. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Toolbar.tsx | Catalog toolbar (search/filter/sort/layout/compare/cart). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/StepIndicator.tsx | Step indicator for Intake → Selection → Review → Track. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServicesBridge.tsx | Services sourcing bridge + CTA routing to My Requests. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServiceBridge.tsx | Service-under-contract bridge + CTA to configurator. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ScanRow.tsx | Row-style catalog result rendering + add/compare actions. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Review.tsx | Review & submit page for cart + routing summary. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RequestEnvelope.tsx | Bridge “inferred envelope” UI with editable pickers + routing line. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RecommendationCard.tsx | Featured “best match” recommendation promo card. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RailDock.tsx | Assistant rail dock container (panel vs launcher). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/QuantityStepper.tsx | Shared quantity stepper component. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductImage.tsx | Product image/logo rendering with fallbacks. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetailOverlay.tsx | Focus-trapped overlay shell for product detail. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetail.tsx | Product detail content (pricing/specs/cart/compare actions). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductCard.tsx | Tile-style catalog card rendering. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/price-basis-context.ts | Context for active price basis (EPP vs list). |
| 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 + CTAs (review/workbench). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/IntentHeader.tsx | Selection hero header for restated request + agent note. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/GuidedBuy.tsx | Renders structured tool surfaces for latest assistant turn. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FiltersControl.tsx | Filters popover (brands/categories/price/stock/EPP). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FilterChips.tsx | Active filter chips row with per-chip removal. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ConversationProvider.tsx | Scripted conversation engine + tool-call parts. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/conversation-context.ts | Conversation context contract for Buy/Catalog/Workbench routing. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CompareView.tsx | Full-screen comparison table view. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ChatRail.tsx | Ambient assistant rail UI for Catalog. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CatalogSubmitted.tsx | Track (“submitted”) destination with recap + exit actions. |
| 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 context provider (quantities, open state). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartLine.tsx | Cart line item (editable vs read-only). |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartDrawer.tsx | Cart drawer (Sheet) with approval cue and review CTA. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/cart-context.ts | Cart context types + hook guard. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/BuyScaffold.tsx | Persistent Buy header frame + cart integration. |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/BuyFlow.tsx | Buy entry flow orchestration + transitions + starters. |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV2.tsx | Catalog variant 2 (logo mode) wrapper. |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV1.tsx | Catalog variant 1 (photo mode) wrapper. |
| apps/apollo-vertex/templates/guided-buying/catalog/Catalog.tsx | Catalog page host with cold vs resolved state. |
| apps/apollo-vertex/templates/guided-buying/AutopilotFab.tsx | Context-aware FAB mini-chat (currently hidden via flag). |
| apps/apollo-vertex/templates/guided-buying/AutopilotChatProvider.tsx | Provider for the FAB’s persistent mini-thread. |
| apps/apollo-vertex/templates/guided-buying/autopilot-chat-context.ts | FAB chat context types + hook guard. |
| apps/apollo-vertex/registry/shell/shell.tsx | ApolloShell: add user override + switch-user handler plumb-through. |
| apps/apollo-vertex/registry/shell/shell-user-provider.tsx | Allow userOverride to replace auth user in UserContext. |
| apps/apollo-vertex/registry/shell/shell-user-profile.tsx | Plumb “switch user” handler into dropdown menu items. |
| apps/apollo-vertex/registry/shell/shell-user-profile-menu-items.tsx | Add “Switch user” menu item when handler provided. |
| apps/apollo-vertex/registry/shell/shell-sidebar.tsx | Pass onUserClick down to UserProfile. |
| apps/apollo-vertex/registry/shell/shell-layout.tsx | Thread onUserClick through layout → sidebar. |
| apps/apollo-vertex/registry/card/card.tsx | Reduce selected gradient opacity. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx | Replace top fade overlay with mask-image-based fade. |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx | Hide message actions until hover/focus (including latest). |
| apps/apollo-vertex/next-env.d.ts | Adjusted generated routes type import path. |
| apps/apollo-vertex/locales/en.json | Add English labels for Guided Buying nav + “Switch user”. |
| apps/apollo-vertex/app/guided-buying/page.tsx | Mount prototype into a separate React root attached to body. |
| apps/apollo-vertex/app/experiment/guided-buying/page.mdx | Docs entry with link to open the prototype in a new tab. |
| apps/apollo-vertex/app/experiment/_meta.ts | Add experiment navigation entry for Guided Buying. |
| apps/apollo-vertex/app/_meta.ts | Hide guided-buying page from primary docs nav. |
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
+47
to
+48
| /** Make the identity chip a button (e.g. switch seats) instead of a menu. */ | ||
| onUserClick?: () => void; |
Comment on lines
+19
to
23
| "buy": "Buy", | ||
| "cancel": "Cancel", | ||
| "card_component": "Card Component", | ||
| "catalog": "Catalog", | ||
| "changes_apply_instantly": "Changes apply instantly", |
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.