Live URL: https://trysquad.ai Updated: Nov 12, 2025 (Phase 3: Empty→Populated States) For: Demo walkthrough + video recording
Access: Open https://trysquad.ai in your browser
Dev Toggle: Press Shift+P to instantly switch between empty/populated states (great for testing/screenshots)
New Feature (Phase 3): All views now show helpful empty states when you first start, then populate when you connect integrations. This creates a storytelling journey for demos.
Best for: Stakeholder presentations, demo videos, showing the complete experience
Steps:
- Start: Open https://trysquad.ai → lands on onboarding
- Step 1: Value prop screen (Multi-Agent, Connected, Observable)
- Step 2: Create workspace (name it anything, e.g., "Acme Corp")
- Step 3: Click GitHub integration button
- Watch "Connecting..." spinner (2 seconds)
- Checkmark appears → Everything populates
- Navigate: Dashboard now shows suggested work, active agents, metrics
- Tour all 6 tabs:
- Dashboard → Suggested work, things in flight, agent stats
- Console → Chat with Director agent
- Editor → Syntax-highlighted code viewer
- Squad Ops V1 → Agent activity monitoring
- Maps → Product Surface Map visualization
- Bridge → Inter-squad communication
Narration Angle: "This is what a new user sees when they first connect Squad to their workspace. Watch as it instantly analyzes and surfaces high-priority work."
Best for: Screenshots, quick walkthroughs, testing
Steps:
- Open https://trysquad.ai
- Navigate to any tab (Dashboard, Console, etc.)
- Press Shift+P → View switches to empty state
- Press Shift+P again → Populated with data
Use Case: Great for showing before/after states or capturing specific screenshots.
What it shows:
- Suggested Work: 3 high-priority tasks AI identified from your GitHub PRs, Slack threads, Jira tickets
- Things in Flight: Active PRs, conversations, tasks (PR #342, Auth flow, RCP-2847)
- Today's Activity: 4 active agents, 12 tasks completed, 3 PRs opened
- Active Squads: Authentication (2 agents), API (1 agent), Frontend (0 agents)
- Observability: Token usage (35.3%), Cost ($2.47), Requests (127), Avg response (1.8s)
Empty state: Helpful messages like "Connect integrations to see AI-powered task recommendations"
What it shows:
- Chat interface: Talk to the Director agent (Engineering Lead)
- Conversation: Example security analysis with receipt creation
- Product Surface Map: Shows active surfaces (Security/Auth, API/User, Frontend/Dashboard)
- Recent Receipts: RCP-2848 (CSRF protection), RCP-2847 (Rate limiting)
- Context Shelf: Connected repositories (3), Slack channels (5), Jira boards (2), Drive folders (4)
Empty state: Single system message explaining what the Director does
What it shows:
- File tree: Browse codebase structure (src/auth/, src/api/, tests/)
- Code viewer: Syntax-highlighted TypeScript with github-dark theme
- Shows rate limiting implementation for token refresh
- Keywords in pink/red, strings in orange, comments in gray
- Active Task: RCP-2847 (Rate limiting for token refresh)
- Related Files: Click to switch between token.ts, rate-limiter.ts, token.test.ts
- Git Changes: Shows +12 -3 lines in token.ts, +45 new lines in rate-limiter.ts
- Terminal: Test results (3/3 passing)
Empty state: "No repositories connected" + "Connect GitHub to browse your codebase"
What it shows:
- Runs list: 4 completed agent runs
- HMAC Webhook Security Implementation
- GPT-5 Scoring Fix + Auto-Finalization
- E2E Interview Tool Calls (15/15 success)
- Import Wizard Autonomous Fix
- Receipt stream: Test receipts, work receipts, HAR receipts, contract checks
- Agent swimlanes: Shows which agents worked on what (TDD phases)
- Engagement timeline: Active → Quiet → Disengaged states
Empty state: "No agent runs yet"
What it shows:
- PSM Tree: Product Surface Map hierarchy
- Voice AI (in-progress)
- ElevenLabs
- Twilio
- Voice Webhook
- Campaign Management (complete)
- Interview Management (complete)
- Slack Operations (complete)
- Voice AI (in-progress)
- State machines: Click any surface to see state transitions
- Receipt tracking: Evidence-based development
Empty state: "No Product Surface Map defined"
What it shows:
- Threads: Organized by state (In Progress, Awaiting Receipts, Resolved)
- Request types:
- RCX: Quick questions
- RFA: Request help
- RFD: Request decisions
- RFC: Propose changes
- FYI: Broadcast updates
- Active thread: Example request for HAR + FIRE receipts from Security Squad
- Squad overview: Telephony Squad info, responsibilities, recent receipts
Empty state: "No cross-squad threads yet"
Fully Interactive:
- Step 3 integrations: Click any tool → "Connecting..." animation → Connected checkmark
- Related Files in Editor: Click to instantly switch files
- Shift+P toggle: Works in all views for demo purposes
- Tab navigation: Click any of the 6 tabs
Static/Mock (Not Interactive):
- Can't send actual messages in Console
- Can't edit code in Editor
- Can't create new squads/workspaces
- Suggested Work items don't drill down
- Pending Actions always shows 3 items (not conditional on empty state)
1. Hook (30 sec) "This is what happens when a new engineering team connects Squad for the first time..."
Show empty Dashboard → emphasize "blank slate"
2. The Journey (1 min)
- Complete onboarding quickly (can speed up in edit)
- Pause on Step 3: "Watch what happens when we connect to GitHub"
- Click GitHub → show 2s connection animation
- Moment of delight: Everything populates instantly
3. Value Prop (1 min)
- Show populated Dashboard: "Squad analyzed our codebase and surfaced 3 high-priority tasks"
- Point out: Agents are already active, observability metrics showing
4. Feature Tour (2.5 min)
- Console: "Chat with the Director to review work"
- Editor: "See exactly what code changed, with full context" (show syntax highlighting)
- Squad Ops: "Monitor agent activity in real-time"
- Maps/Bridge: Quick mentions
5. Close (30 sec)
- Show Shift+P toggle: "And for demos, we can toggle states instantly"
- CTA
Start directly at Dashboard
- Use Shift+P to show empty→populated
- Narrate: "When teams first connect, Squad starts clean and learns their workspace"
- Then show populated state and tour features
- Faster (3-4 min total)
- ⌘T: Workspace launcher (Quick Switch)
- ⌘0: Dashboard
- ⌘1: Console
- ⌘2: Editor
- ⌘3: Squad Ops V1
- Shift+P: Toggle empty/populated (dev mode)
- ESC: Close modals
Q: Why do empty states matter? A: They create a storytelling journey. Instead of showing a pre-populated app, we show the transformation when someone connects their tools. More engaging for demos.
Q: Can I test locally? A: Yes, but production (https://trysquad.ai) is easiest. Changes are live as of Nov 12.
Q: What if something breaks? A: All 6 views Chrome DevTools verified with 0 runtime errors. If Shift+P doesn't work, just reload the page.
Q: Can I customize what data shows? A: No, it's hardcoded mock data. But you can toggle empty/populated with Shift+P.
Q: What's the best flow to show investors? A: Full journey (Option A). The empty→populated transformation is the "wow" moment.
Before Phase 3: App always showed populated data (looked pre-built)
After Phase 3:
- All 6 views have empty states with helpful messages
- Onboarding Step 3 triggers data population
- Shift+P dev toggle for instant testing
- Creates "first-time user" storytelling experience
Why this matters: Makes demos more believable and engaging. Shows the product "learning" the workspace in real-time.
Production: https://trysquad.ai Best Flow: Full journey (start empty → connect GitHub → populate) Dev Tool: Shift+P toggle Views: 6 tabs, all functional, 0 errors Purpose: Interactive demo prototype for stakeholder presentations
Ready to record! 🎬