Add 5 Non-Obvious UX Innovations: Living CTO Experience#56
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
…gned Reasoning, Build-From-Insight Flow, and Right Insight Rail - AI Thought Stream: real-time feed during analysis showing AI thinking steps - CTO Mode Switch: Strategic/Tactical/Operational dashboard views - Founder-Aligned Reasoning: personalized AI recommendations based on preferences - Build-From-Insight Flow: prominent 'Build This' CTAs on every blueprint - Right Insight Rail: CTO Whisper sidebar with contextual AI commentary Co-authored-by: Cole Collins <DealPatrol@users.noreply.github.com>
…based auth The /api/preview route imported getServerSession from next-auth and authOptions from @/lib/auth, neither of which exist. Replaced with getCurrentAccessToken() (the app's actual cookie-based auth) and lazy-initialized the Anthropic client to match the rest of the codebase. Co-authored-by: Cole Collins <DealPatrol@users.noreply.github.com>
c3c243c to
5227739
Compare
There was a problem hiding this comment.
Pull request overview
This PR introduces several new client-side UX components to make analysis and dashboard experiences feel more “live” (thought stream, CTO modes, founder preference personalization, insight rail), and updates the preview API route to use the app’s cookie-based auth instead of next-auth.
Changes:
- Added new UI components for Thought Stream, CTO Mode switching, Founder Preferences, and Insight Rail; refactored dashboard to a client component.
- Extended the analysis SSE stream with
thoughtevents and displayed them during runs. - Updated
/api/previewauth approach and refactored Anthropic client initialization.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| next-env.d.ts | Updates typed routes import path. |
| components/thought-stream.tsx | New “AI Thought Stream” terminal-style feed UI. |
| components/insight-rail.tsx | New “CTO Whisper” insight sidebar derived from blueprints. |
| components/founder-preferences.tsx | New founder preference persistence + reasoning badges. |
| components/dashboard-client.tsx | New client-side dashboard with CTO modes + prefs panel. |
| components/cto-mode-switch.tsx | New 3-mode dashboard selector with local persistence. |
| components/analysis-detail.tsx | Displays thought stream, insight rail, and “Build This” CTA updates. |
| app/dashboard/page.tsx | Refactors page to render DashboardClient. |
| app/api/preview/route.ts | Switches to cookie-based auth; refactors Anthropic client usage. |
| app/api/analyses/[id]/run/route.ts | Adds SSE thought events during scanning/analyzing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function getAnthropic() { return new Anthropic() } | ||
|
|
| export function useFounderPreferences() { | ||
| const [prefs, setPrefs] = useState<FounderPrefs>(() => { | ||
| if (typeof window === 'undefined') return defaultPrefs | ||
| try { | ||
| const saved = localStorage.getItem(STORAGE_KEY) | ||
| return saved ? JSON.parse(saved) : defaultPrefs | ||
| } catch { | ||
| return defaultPrefs | ||
| } | ||
| }) | ||
|
|
||
| const save = useCallback((next: FounderPrefs) => { | ||
| setPrefs(next) | ||
| localStorage.setItem(STORAGE_KEY, JSON.stringify(next)) | ||
| }, []) |
| <h3 className="font-semibold text-foreground">Your Preferences</h3> | ||
| </div> | ||
| {onClose && ( | ||
| <button onClick={onClose} className="text-muted-foreground hover:text-foreground"> |
| variant={local.stack.includes(tech) ? 'default' : 'outline'} | ||
| className={`cursor-pointer transition-all ${ | ||
| local.stack.includes(tech) | ||
| ? 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30 hover:bg-cyan-500/30' | ||
| : 'hover:border-border/80' | ||
| }`} | ||
| onClick={() => toggleStack(tech)} | ||
| > | ||
| {tech} |
| <button | ||
| key={mode.id} | ||
| onClick={() => setActive(mode.id)} | ||
| className={` | ||
| group relative flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium | ||
| transition-all duration-200 | ||
| ${isActive | ||
| ? 'bg-cyan-500/15 text-cyan-300 shadow-sm shadow-cyan-500/10' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-muted/50' | ||
| } | ||
| `} | ||
| > | ||
| <Icon className={`h-4 w-4 ${isActive ? 'text-cyan-400' : ''}`} /> | ||
| <span className="hidden sm:inline">{mode.label}</span> | ||
| {isActive && ( | ||
| <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap"> | ||
| <span className="text-[10px] text-cyan-400/60 font-mono">{mode.description}</span> | ||
| </div> |
Summary
Implements 5 UX innovations that transform RepoFuse from a dashboard into a "living CTO" experience. Also fixes a build-breaking bug in
app/api/preview/route.tson main.Features Added
1. AI Thought Stream
A real-time feed showing what the AI is analyzing during blueprint generation. During the SSE stream, thought events like "Scanning file tree for repo...", "Evaluating architecture patterns..." appear with animated terminal-style UI.
2. CTO Mode Switch
Three dashboard modes that mirror how real CTOs think:
3. Founder-Aligned Reasoning
The AI tailors decisions based on your preferences (architecture style, priority, stack). Example: "Cole prefers serverless → recommending Vercel + Neon". Preferences persist in localStorage.
4. Build-From-Insight Flow
Every blueprint has a prominent "Build This" button with cyan styling and rocket icon — making the action feel immediate and exciting.
5. Right Insight Rail (CTO Whisper)
Real-time AI commentary sidebar on the analysis detail page showing strategic insights like:
Build Fix
Fixed
app/api/preview/route.tswhich importednext-auth(not installed) andauthOptions(doesn't exist). Replaced with the app's actual cookie-based auth (getCurrentAccessToken) and lazy-initialized Anthropic client.Demo
ux_innovations_demo.mp4
Files Changed
app/api/analyses/[id]/run/route.ts— Addedthoughtevents to SSE streamapp/api/preview/route.ts— Fixed brokennext-authimport → cookie-based authapp/dashboard/page.tsx— Refactored to use new client componentcomponents/analysis-detail.tsx— Integrated ThoughtStream, InsightRail, and FounderReasoningcomponents/thought-stream.tsx— New — Animated AI thought feedcomponents/cto-mode-switch.tsx— New — Three-mode dashboard selectorcomponents/dashboard-client.tsx— New — Client-side dashboard with mode switchingcomponents/founder-preferences.tsx— New — Preferences editor + reasoning enginecomponents/insight-rail.tsx— New — CTO Whisper sidebar