feat(apollo-vertex): Guided Buying prototype#803
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>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
![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 }, |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?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 a draft “Guided Buying” prototype to apps/apollo-vertex, implementing a scripted end-to-end procurement flow with two “seats” (requester vs buyer) and shared in-session state across Buy → Catalog → Requests → Workbench surfaces, plus small supporting shell/UI tweaks.
Changes:
- Introduces the Guided Buying client app shell + routes (Buy/Catalog/Configure/Requests/Workbench/Review/Track) with mocked conversation and cart state.
- Adds requester “My Requests” + buyer “Workbench” queue UIs, including detail surfaces and shared cross-seat request notes/urgent flags.
- Updates shell identity handling (optional user override + “Switch user” menu item) and a few UI polish tweaks.
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 queue list UI with search/filters + stats cards |
| apps/apollo-vertex/templates/guided-buying/workbench/Workbench.tsx | Workbench host routing list vs detail; decision persistence |
| apps/apollo-vertex/templates/guided-buying/requests/RequestsProvider.tsx | Cross-seat request state (threads, urgent) provider |
| apps/apollo-vertex/templates/guided-buying/requests/requests-context.ts | Requests context + hooks/types |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequestsList.tsx | Requester queue list UI with stats/search/filter |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequests.tsx | My Requests host with slide-over panel |
| apps/apollo-vertex/templates/guided-buying/requests/MyRequestPanel.tsx | Request detail sheet 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-memory TanStack Router shell + seat switching |
| 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 state |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/types.ts | Catalog domain types (items, filters, request, etc.) |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Toolbar.tsx | Catalog toolbar (search, filters, compare, sort, 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/RFQ) bridge beat and CTA |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ServiceBridge.tsx | Contract/service bridge beat and CTA to configurator |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ScanRow.tsx | Row-style catalog result rendering (recommended + actions) |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/Review.tsx | Review & submit page for catalog path |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RequestEnvelope.tsx | Bridge envelope UI with inferred fields + inline pickers |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RecommendationCard.tsx | Featured “best match” promo card |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/RailDock.tsx | Docked assistant rail container (open vs launcher) |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/QuantityStepper.tsx | Shared quantity control component |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductImage.tsx | Product image/logo display with graceful fallback |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetailOverlay.tsx | Focus-trapped detail overlay scaffolding |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductDetail.tsx | Product detail view (pricing, specs, compare/cart actions) |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ProductCard.tsx | Card-style catalog tile rendering |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/price-basis-context.ts | Context for list vs EPP price basis |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/NotInCatalogBanner.tsx | Prototype “not in catalog” banner CTA block |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/MatchCarousel.tsx | In-chat matches grid + review/workbench CTAs |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/IntentHeader.tsx | Selection header with restated request + agent note |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/GuidedBuy.tsx | Renders latest tool-call “surface” under Buy scaffold |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FiltersControl.tsx | Filters popover UI controlling catalog filters |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/FilterChips.tsx | Active filter chip row UI |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ConversationProvider.tsx | Scripted conversation state machine + tool-call outputs |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/conversation-context.ts | Conversation context API + phase/types |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CompareView.tsx | Full-screen compare table overlay |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/ChatRail.tsx | Docked assistant rail contents (mocked Q&A) |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CatalogSubmitted.tsx | Track/finish page after submission |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartSummary.tsx | Shared cart totals component |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartProvider.tsx | Cart state provider across routes |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartLine.tsx | Cart line item rendering (editable/read-only) |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/CartDrawer.tsx | Cart sheet/drawer UI |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/cart-context.ts | Cart context API |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/BuyScaffold.tsx | Shared Buy step frame + animations + cart entry |
| apps/apollo-vertex/templates/guided-buying/catalog/v1/BuyFlow.tsx | Buy front door, scripted step progression + navigation |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV2.tsx | Catalog variant 2 (logo mode) |
| apps/apollo-vertex/templates/guided-buying/catalog/CatalogV1.tsx | Catalog variant 1 (photo mode) |
| apps/apollo-vertex/templates/guided-buying/catalog/Catalog.tsx | Catalog page host (cold vs request-scoped) |
| apps/apollo-vertex/templates/guided-buying/AutopilotFab.tsx | Context-aware (currently hidden) Autopilot FAB mini-chat |
| apps/apollo-vertex/templates/guided-buying/AutopilotChatProvider.tsx | Persisted mini-chat provider for FAB |
| apps/apollo-vertex/templates/guided-buying/autopilot-chat-context.ts | Autopilot mini-chat context API |
| apps/apollo-vertex/registry/shell/shell.tsx | Shell API: optional user override + user click handler |
| apps/apollo-vertex/registry/shell/shell-user-provider.tsx | Supports userOverride and effective auth state |
| apps/apollo-vertex/registry/shell/shell-user-profile.tsx | Plumbs optional “switch user” callback into profile menu |
| apps/apollo-vertex/registry/shell/shell-user-profile-menu-items.tsx | Adds “Switch user” menu item + icon |
| apps/apollo-vertex/registry/shell/shell-sidebar.tsx | Plumbs onUserClick down to user profile |
| apps/apollo-vertex/registry/shell/shell-layout.tsx | Plumbs onUserClick down to sidebar |
| apps/apollo-vertex/registry/card/card.tsx | Adjusts selected gradient glow opacity |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx | Replaces top overlay fade with mask-image fade |
| apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx | Hides message actions until hover/focus (even latest) |
| apps/apollo-vertex/next-env.d.ts | Updates typed routes import path |
| apps/apollo-vertex/locales/en.json | Adds translations for new nav/menu labels |
| apps/apollo-vertex/app/guided-buying/page.tsx | Mounts prototype into a separate React root for fullscreen |
| apps/apollo-vertex/app/experiment/guided-buying/page.mdx | Adds experiment page linking to prototype route |
| apps/apollo-vertex/app/experiment/_meta.ts | Registers experiment nav entry |
| apps/apollo-vertex/app/_meta.ts | Hides /guided-buying from docs nav |
Comment on lines
+82
to
+86
| // Returning from Configure: shift the surface back in from the left, and keep | ||
| // the thread (the ServiceBridge they left) rather than resetting to the hero. | ||
| const fromConfigure = useRouterState({ | ||
| select: (s) => s.location.state.fromConfigure === true, | ||
| }); |
Comment on lines
+87
to
+91
| // The finish line passes resetChat so "Back to Buy" lands on a fresh Intake | ||
| // (the request is already submitted), not the Bridge they came from. | ||
| const resetChat = useRouterState({ | ||
| select: (s) => s.location.state.resetChat === 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", | ||
| )} | ||
| > |
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.
Guided Buying prototype (draft — sharing progress)
A scripted, Apollo-light prototype of an agent-assisted procurement flow in
apps/apollo-vertex. No live LLM; everything is mocked to demo the experience end to end. Sharing with the team for feedback on the direction.The thesis
One buy flow, three use cases along a rising-judgment ladder — and whether a request also lands in someone's Workbench is itself the signal of how much judgment it needed.
Two seats, two surfaces
The bottom-left identity chip swaps between the requester (Marcus Webb) and the buyer (procurement), swapping the queue nav with it.
Requests posted by the requester (notes, urgent flags) surface on the buyer side; the same request reads as "with procurement, awaiting decision" to the requester and "awaiting your decision" to the buyer.
Notes for reviewers
guided-buying.🤖 Generated with Claude Code