diff --git a/FRONTEND_UI_UPDATE_PROMPT.md b/FRONTEND_UI_UPDATE_PROMPT.md
new file mode 100644
index 000000000..dc8067ac2
--- /dev/null
+++ b/FRONTEND_UI_UPDATE_PROMPT.md
@@ -0,0 +1,505 @@
+# Frontend UI Update Prompt for Claude 4.5 Sonnet
+
+## Objective
+Update the current vTeam Next.js/React frontend UI (located at `components/frontend`) to match the design and user experience of the static HTML prototype (located at `static-prototype`).
+
+---
+
+## Context
+
+### Current Frontend
+- **Location**: `/Users/abraren/acorn/local/code/vTeam/components/frontend`
+- **Tech Stack**: Next.js 15, React, TypeScript, TailwindCSS, Shadcn/ui, React Query
+- **Architecture**: App Router with Server/Client Components
+
+### Static Prototype Reference
+- **Location**: `/Users/abraren/acorn/local/code/vTeam/static-prototype`
+- **Files**: HTML pages with inline CSS and vanilla JavaScript
+- **Purpose**: Design reference and UX flow demonstration
+
+### Design Guidelines
+- **MUST READ**: `components/frontend/DESIGN_GUIDELINES.md`
+- **MUST READ**: `components/frontend/COMPONENT_PATTERNS.md`
+
+---
+
+## Key Design Changes to Implement
+
+### 1. **Branding & Header**
+**Prototype Reference**: `static-prototype/index.html` (lines 10-54)
+
+**Changes Needed**:
+- Change branding from "vTeam" to **"Ambient Code Platform"**
+- Update header logo/title styling to match prototype
+- Implement user dropdown menu in header with:
+  - User email display
+  - User initials avatar bubble
+  - Dropdown arrow animation
+  - "Integrations" link
+  - "Logout" button
+- Use prototype's header styling: white background, subtle border-bottom
+
+**Current Location**: `components/frontend/src/components/navigation.tsx`
+
+---
+
+### 2. **Terminology Changes**
+**Prototype shows different terminology throughout:**
+
+| Current Term | New Term (Prototype) |
+|--------------|---------------------|
+| "Projects" | "Workspaces" |
+| "RFE Workflows" page | Integrated into workspace tabs |
+| Page title on projects list | "Workspaces" |
+| Create button | "New Workspace" |
+
+**Affected Files**:
+- `src/app/projects/page.tsx`
+- `src/components/navigation.tsx`
+- `src/components/page-header.tsx`
+- All project-related page titles and descriptions
+
+---
+
+### 3. **Projects/Workspaces List Page**
+**Prototype Reference**: `static-prototype/index.html`
+
+**Changes Needed**:
+
+#### Header Section
+- Title: "Workspaces"
+- Description: "Select a workspace or create a new one to get started"
+- Actions: "Refresh" button + "New Workspace" button
+
+#### Table Design
+- **Columns**: Name, Description, Sessions, Created, Actions
+- **Special column**: "Sessions" shows:
+  - Total session count
+  - Badge with running session count (if any) with spinner icon
+  - Example: `4` + `<Badge>1 Running</Badge>`
+- **Actions column**: Single delete button (trash icon)
+- **Name column**: Link styled in blue (`#1e40af`)
+- Clean white card with subtle borders
+
+#### Modal for Creation
+- **Modal Title**: "Create New Workspace"
+- **Fields**:
+  - Workspace Name (with validation message)
+  - Display Name
+  - Description (textarea)
+- Pre-filled with auto-incrementing defaults (e.g., `demo-user-workspace-1`)
+- Modal styling matches prototype's clean design
+
+**Current Location**: `src/app/projects/page.tsx`
+
+---
+
+### 4. **Workspace Detail Page (Project Detail)**
+**Prototype Reference**: `static-prototype/projects/sample-workspace/page.html`
+
+**Major Redesign Needed**:
+
+#### Layout
+- **Left Sidebar Navigation** (vertical menu with icons):
+  - Sessions (star icon) - Active by default
+  - Sharing (users icon) - Previously "Permissions"
+  - Workspace Settings (settings icon)
+  
+#### Breadcrumbs
+- Format: `Workspaces / {workspace-name}`
+- Located above page title
+
+#### Page Header
+- Show workspace name as title
+- Show workspace description below title
+
+#### Main Content Area - Tabbed Interface
+The prototype shows different content sections that switch via sidebar navigation:
+
+**A. Sessions Tab (Default)**
+- Title: "Agentic Sessions"
+- Actions: Refresh + "New Session" button
+- Table columns:
+  - Session Name (with description underneath)
+  - Status (badge with icon: Running/Completed)
+  - Mode (interactive/headless)
+  - Model (e.g., claude-3.5-sonnet)
+  - Created (relative time)
+- Clickable rows that navigate to session detail
+- Status badges with SVG icons (spinning loader for "Running", checkmark for "Completed")
+
+**B. Sharing Tab** (Previously "Permissions")
+- Title: "Sharing"
+- Description: "Users and groups with access to this workspace and their roles"
+- Table columns:
+  - Users/Groups (name + subtitle)
+  - Type (User/Group badge)
+  - Role (Admin/View badge)
+  - Actions (delete button)
+- Action: "Grant Permission" button
+
+**C. Workspace Settings Tab**
+Multiple cards with different settings sections:
+
+1. **General Settings Card**
+   - Display Name (editable)
+   - Workspace Name (read-only with help text)
+   - Description (textarea)
+   - "Save Changes" button
+
+2. **Runner Secrets Card**
+   - Runner Secret dropdown selector
+   - Anthropic API Key (required field with asterisk)
+   - Additional Secrets section:
+     - Dynamic key/value pairs
+     - "Add Secret" button
+     - Grid layout: Key | Value | Delete button
+   - "Save Secrets" button
+
+3. **Resource Limits Card**
+   - Max Concurrent Sessions
+   - Max RFE Workspaces
+   - Storage Limit (GB)
+   - "Update Limits" button
+
+4. **API Keys Card** (embedded in settings)
+   - Table of API keys
+   - Columns: Name, Created, Last Used, Role, Actions
+   - Actions: Refresh + "Create Key" button
+
+**Current Locations**:
+- `src/app/projects/[name]/page.tsx`
+- `src/app/projects/[name]/layout.tsx`
+- `src/app/projects/[name]/permissions/page.tsx`
+- `src/app/projects/[name]/settings/page.tsx`
+
+---
+
+### 5. **Session Creation Modal**
+**Prototype Reference**: `static-prototype/projects/sample-workspace/page.html` (lines 698-776)
+
+**Features to Implement**:
+
+#### Basic Configuration
+- **Model Dropdown**:
+  - Claude Sonnet 3.7 (default)
+  - Claude Opus 4.1
+  - Claude Opus 4
+  - Claude Sonnet 4
+  - Claude Haiku 3.5
+
+#### Headless-Specific Field
+- **Agentic Prompt** textarea (only shown for headless mode)
+- Help text: "Provide detailed instructions for the AI to execute without user interaction"
+
+#### Advanced Settings (Collapsible Accordion)
+- **Button**: "Change Default Model Settings" with chevron
+- **Fields when expanded**:
+  - Temperature (0.0 - 2.0, step 0.1)
+  - Timeout (60-1800 seconds)
+  - Max Output Tokens (100-8000)
+  - **Bring Your Own Key section**:
+    - Anthropic API Key input (password field)
+    - "Save key for future sessions" checkbox
+    - Help text: "Optional: Use your own Anthropic API key for this session"
+
+#### Modal Actions
+- Cancel button
+- "Create Session" button
+
+**Implementation**:
+- Create new component: `src/components/session-config-dialog.tsx`
+- Use Shadcn Dialog component
+- Use Accordion component for advanced settings
+- Integrate with session creation flow
+
+---
+
+### 6. **Sessions List Page**
+**Prototype Reference**: `static-prototype/projects/sample-workspace/sessions/page.html`
+
+**Design**:
+- Breadcrumbs: `Workspaces / {workspace-name} / Sessions`
+- Title: "Agentic Sessions"
+- Description: "AI-powered coding sessions for your project"
+- Left sidebar with workspace navigation
+- Table with sessions (same as on workspace detail page)
+
+**Current Location**: `src/app/projects/[name]/sessions/page.tsx`
+
+---
+
+### 7. **Visual Design System**
+
+#### Colors (from `static-prototype/styles.css`)
+```css
+Primary Blue: #1e40af (links, primary buttons)
+Hover Blue: #1d4ed8
+Background: #f8fafc (page background)
+Card Background: white
+Borders: #e2e8f0
+Text Primary: #333
+Text Secondary: #64748b
+Text Muted: #374151
+Success Green: #166534 (background: #dcfce7)
+Warning Yellow: #92400e (background: #fef3c7)
+Error Red: #991b1b (background: #fee2e2)
+Info Blue: #1e40af (background: #dbeafe)
+```
+
+#### Typography
+- Font Family: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
+- Page Title: `2rem`, `font-weight: bold`
+- Card Title: `1.25rem`, `font-weight: 600`
+- Body: `1rem`, `line-height: 1.6`
+
+#### Spacing & Layout
+- Container: `max-width: 1200px`, centered
+- Card Border Radius: `0.5rem`
+- Button Border Radius: `0.375rem`
+- Standard Padding: Card header/content `1.5rem`
+
+#### Buttons
+- **Primary**: Blue background (`#1e40af`), white text
+- **Secondary**: White background, gray border (`#d1d5db`), gray text
+- **Icons**: Inline SVG, 14-16px size
+- **Hover States**: Subtle background color changes
+
+#### Tables
+- Header Background: `#f8fafc`
+- Border: `#e2e8f0`
+- Row Hover: `#f8fafc`
+- Cell Padding: `0.75rem`
+
+#### Badges
+- Border Radius: `9999px` (pill shape)
+- Padding: `0.25rem 0.75rem`
+- Font Size: `0.75rem`, `font-weight: 500`
+- With inline SVG icons (12px)
+
+#### Modals
+- Backdrop: `rgba(0, 0, 0, 0.5)`
+- Content: White, rounded corners, shadow
+- Max Width: `500-600px`
+- Close button: `×` character
+
+---
+
+## Implementation Guidelines
+
+### Architecture Requirements
+
+1. **Follow Existing Patterns**:
+   - Use `type` over `interface` (per COMPONENT_PATTERNS.md)
+   - No `any` types allowed
+   - Use Shadcn/ui components as foundation
+   - Maintain Server/Client Component separation
+   - Use React Query for all data fetching
+
+2. **File Organization**:
+   - Keep single-use components colocated with pages
+   - Reusable components go in `src/components/`
+   - Follow existing directory structure
+
+3. **Component Standards**:
+   - Loading states: Use `loading.tsx` with Skeleton components
+   - Error states: Use `error.tsx` with Error boundary
+   - Empty states: Use `EmptyState` component
+   - Forms: Use Shadcn Form components with validation
+
+4. **Data Fetching**:
+   - Use existing React Query hooks from `src/services/queries/`
+   - Create new query hooks if needed following same pattern
+   - Use API service layer from `src/services/api/`
+
+---
+
+## Step-by-Step Implementation Plan
+
+### Phase 1: Global Changes
+1. Update branding from "vTeam" to "Ambient Code Platform"
+2. Update navigation component with user dropdown
+3. Change "Projects" terminology to "Workspaces" everywhere
+4. Update color scheme to match prototype
+
+### Phase 2: Workspaces List Page
+1. Update page title and description
+2. Modify table columns to match prototype
+3. Add "Sessions" column with running count
+4. Update create workspace modal
+5. Style improvements to match prototype
+
+### Phase 3: Workspace Detail Page
+1. Restructure layout with sidebar navigation
+2. Implement tabbed interface (Sessions/Sharing/Settings)
+3. Update breadcrumbs format
+4. Move content to appropriate tabs
+
+### Phase 4: Sessions Management
+1. Create session configuration modal component
+2. Add model selection dropdown
+3. Implement advanced settings accordion
+4. Add BYOK (Bring Your Own Key) section
+5. Update session creation flow
+
+### Phase 5: Settings & Permissions
+1. Rename "Permissions" to "Sharing"
+2. Restructure settings page with multiple cards
+3. Add Runner Secrets configuration
+4. Add Resource Limits section
+5. Move API Keys to settings page
+
+### Phase 6: Polish & Testing
+1. Fine-tune spacing and colors
+2. Verify all interactions work
+3. Test responsive behavior
+4. Ensure accessibility standards
+5. Validate with design guidelines
+
+---
+
+## Critical Requirements
+
+### DO:
+✅ Use Shadcn/ui components exclusively
+✅ Follow DESIGN_GUIDELINES.md strictly
+✅ Maintain TypeScript strict typing (no `any`)
+✅ Use React Query for data fetching
+✅ Implement proper loading/error states
+✅ Use Tailwind CSS classes
+✅ Keep existing API integration working
+✅ Preserve functionality while updating UI
+✅ Use semantic HTML
+✅ Ensure accessibility (ARIA labels, keyboard navigation)
+
+### DON'T:
+❌ Create custom UI components from scratch
+❌ Use `any` types
+❌ Break existing API integrations
+❌ Remove error handling
+❌ Ignore loading states
+❌ Skip empty states
+❌ Use inline styles (use Tailwind classes)
+❌ Create new API endpoints (use existing backend)
+
+---
+
+## Testing Checklist
+
+After implementation, verify:
+
+- [ ] All pages render without errors
+- [ ] Branding updated throughout
+- [ ] Terminology consistent ("Workspaces" not "Projects")
+- [ ] User dropdown works in header
+- [ ] Workspace list shows correct columns
+- [ ] Session count displays properly
+- [ ] Create workspace modal functions
+- [ ] Workspace detail page has sidebar navigation
+- [ ] Settings page has all sections
+- [ ] Sharing page displays correctly
+- [ ] Session creation modal works
+- [ ] All forms validate properly
+- [ ] Delete confirmations work
+- [ ] Loading states display
+- [ ] Error states display
+- [ ] Empty states display
+- [ ] Responsive design works
+- [ ] Colors match prototype
+- [ ] Typography matches prototype
+- [ ] Icons display correctly
+- [ ] Badges styled correctly
+- [ ] Tables styled correctly
+- [ ] Buttons work and are styled correctly
+
+---
+
+## Reference Files
+
+### Must Read Before Starting:
+1. `/Users/abraren/acorn/local/code/vTeam/components/frontend/DESIGN_GUIDELINES.md`
+2. `/Users/abraren/acorn/local/code/vTeam/components/frontend/COMPONENT_PATTERNS.md`
+3. `/Users/abraren/acorn/local/code/vTeam/static-prototype/README.md`
+
+### Key Prototype Files:
+- `/Users/abraren/acorn/local/code/vTeam/static-prototype/index.html` - Workspaces list
+- `/Users/abraren/acorn/local/code/vTeam/static-prototype/styles.css` - Design system
+- `/Users/abraren/acorn/local/code/vTeam/static-prototype/projects/sample-workspace/page.html` - Workspace detail
+- `/Users/abraren/acorn/local/code/vTeam/static-prototype/projects/sample-workspace/sessions/page.html` - Sessions list
+
+### Current Frontend Structure:
+```
+components/frontend/src/
+├── app/
+│   ├── projects/
+│   │   ├── page.tsx                    # Main workspaces list
+│   │   ├── new/page.tsx               # Create workspace
+│   │   └── [name]/
+│   │       ├── page.tsx               # Workspace detail
+│   │       ├── layout.tsx             # Workspace layout
+│   │       ├── sessions/page.tsx      # Sessions list
+│   │       ├── permissions/page.tsx   # Permissions (→ Sharing)
+│   │       └── settings/page.tsx      # Settings
+├── components/
+│   ├── ui/                            # Shadcn components
+│   ├── navigation.tsx                 # Header navigation
+│   ├── page-header.tsx               # Page headers
+│   ├── breadcrumbs.tsx               # Breadcrumbs
+│   └── ...                           # Other components
+├── services/
+│   ├── api/                          # API client layer
+│   └── queries/                      # React Query hooks
+└── types/                            # TypeScript types
+```
+
+---
+
+## Success Criteria
+
+The implementation is complete when:
+
+1. **Visual Consistency**: Frontend UI matches static prototype design
+2. **Terminology**: All "Projects" references changed to "Workspaces"
+3. **Branding**: "Ambient Code Platform" used throughout
+4. **Functionality**: All existing features work with new UI
+5. **Code Quality**: Follows all guidelines in DESIGN_GUIDELINES.md
+6. **Type Safety**: No TypeScript errors, no `any` types
+7. **User Experience**: Smooth interactions, proper loading/error states
+8. **Responsive**: Works on desktop and mobile
+9. **Accessible**: Keyboard navigation, ARIA labels, semantic HTML
+
+---
+
+## Questions to Consider
+
+Before starting, review:
+- What existing API endpoints are available? (Check `src/services/api/`)
+- What data types are defined? (Check `src/types/`)
+- What React Query hooks exist? (Check `src/services/queries/`)
+- What Shadcn components are installed? (Check `src/components/ui/`)
+- What's the current routing structure? (Check `src/app/`)
+
+---
+
+## Getting Started
+
+1. **Read the design guidelines**: Start with DESIGN_GUIDELINES.md and COMPONENT_PATTERNS.md
+2. **Explore the prototype**: Open static-prototype/index.html in a browser
+3. **Review current frontend**: Familiarize yourself with the existing structure
+4. **Plan your approach**: Break down work into small, testable changes
+5. **Test incrementally**: Verify each change before moving to the next
+6. **Commit frequently**: Make atomic commits for easy rollback
+
+---
+
+## Additional Resources
+
+- **Shadcn/ui Docs**: https://ui.shadcn.com/
+- **Next.js App Router**: https://nextjs.org/docs/app
+- **React Query**: https://tanstack.com/query/latest
+- **Tailwind CSS**: https://tailwindcss.com/docs
+
+---
+
+Good luck! Remember: **Preserve functionality while updating the UI** - this is a visual refresh, not a rewrite.
+
diff --git a/PHASE_4_IMPLEMENTATION_SUMMARY.md b/PHASE_4_IMPLEMENTATION_SUMMARY.md
new file mode 100644
index 000000000..94c8aa0d6
--- /dev/null
+++ b/PHASE_4_IMPLEMENTATION_SUMMARY.md
@@ -0,0 +1,186 @@
+# Phase 4 Implementation Summary
+
+## Overview
+Successfully implemented Phase 4: Advanced Session Configuration with collapsible settings and BYOK (Bring Your Own Key) functionality.
+
+## ✅ Completed Features
+
+### 1. **Enhanced Model Selection** (Phase 4.2)
+- **Location**: `components/frontend/src/app/projects/[name]/sessions/new/model-configuration.tsx`
+- **Changes**:
+  - Reordered model dropdown to match prototype specification
+  - Default model: **Claude Sonnet 3.7**
+  - Available models in order:
+    1. Claude Sonnet 3.7 (default)
+    2. Claude Opus 4.1
+    3. Claude Opus 4
+    4. Claude Sonnet 4
+    5. Claude Haiku 3.5
+
+### 2. **Advanced Settings Accordion** (Phase 4.3)
+- **Location**: `components/frontend/src/app/projects/[name]/sessions/new/model-configuration.tsx`
+- **Implementation**:
+  - Created collapsible accordion with "Change Default Model Settings" button
+  - Moved temperature, timeout, and max tokens inside accordion
+  - Accordion expands/collapses smoothly using Radix UI primitives
+  
+#### Advanced Settings Fields:
+- **Temperature**: 0.0 - 2.0 (step 0.1)
+  - Description: "Controls randomness (0.0 - 2.0)"
+  - Default: 0.7
+  
+- **Timeout**: 60 - 1800 seconds
+  - Description: "Session timeout (60-1800 seconds)"
+  - Default: 300 seconds
+  
+- **Max Output Tokens**: 100 - 8000
+  - Description: "Maximum response length (100-8000)"
+  - Default: 4000
+
+### 3. **Bring Your Own Key (BYOK) Section** (Phase 4.3)
+- **Location**: Inside Advanced Settings Accordion
+- **Features**:
+  - **Anthropic API Key Input**:
+    - Type: Password field for security
+    - Placeholder: `sk-ant-api03-...`
+    - Optional field (not required)
+    - Help text: "Optional: Use your own Anthropic API key for this session"
+  
+  - **Save Key Checkbox**:
+    - Label: "Save key for future sessions (encrypted)"
+    - Allows users to persist their API key for reuse
+    - Default: unchecked
+
+### 4. **Form Schema Updates**
+- **Location**: `components/frontend/src/app/projects/[name]/sessions/new/page.tsx`
+- **New Fields Added**:
+  ```typescript
+  anthropicApiKey: z.string().optional().default(""),
+  saveApiKeyForFuture: z.boolean().default(false),
+  ```
+- **Default Values**:
+  ```typescript
+  anthropicApiKey: "",
+  saveApiKeyForFuture: false,
+  ```
+
+### 5. **New Shadcn Component Created**
+- **File**: `components/frontend/src/components/ui/accordion.tsx`
+- **Dependencies**: 
+  - Installed `@radix-ui/react-accordion` (v1.x)
+  - Uses Radix UI primitives for accessible accordion behavior
+- **Features**:
+  - Smooth expand/collapse animations
+  - Keyboard navigation support
+  - Chevron icon that rotates when expanded
+  - Fully accessible (ARIA compliant)
+
+## 📁 Files Modified
+
+1. **model-configuration.tsx** - Complete redesign with accordion
+2. **page.tsx** (sessions/new) - Added BYOK fields to schema
+3. **accordion.tsx** - New Shadcn UI component (created)
+
+## 🎨 UI/UX Improvements
+
+### Before:
+- All model configuration fields always visible
+- Cluttered interface with many inputs
+- No clear separation between basic and advanced settings
+
+### After:
+- Clean, focused interface with just Model selection visible by default
+- Advanced settings hidden in collapsible accordion
+- Clear "Change Default Model Settings" button with chevron indicator
+- BYOK section properly separated with visual divider
+- Progressive disclosure - users only see what they need
+
+## 🔧 Technical Implementation Details
+
+### Accordion Structure:
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="advanced-settings">
+    <AccordionTrigger>Change Default Model Settings</AccordionTrigger>
+    <AccordionContent>
+      {/* Temperature & Timeout in grid */}
+      {/* Max Tokens */}
+      {/* BYOK Section with divider */}
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Form Integration:
+- All fields properly integrated with React Hook Form
+- Validation maintained for all inputs
+- Type-safe with Zod schema
+- Values persist across accordion open/close
+
+## 🎯 Matches Prototype Specification
+
+### Prototype Requirements Met:
+- ✅ Model dropdown with exact models in specified order
+- ✅ "Change Default Model Settings" collapsible button
+- ✅ Temperature field (0.0 - 2.0, step 0.1)
+- ✅ Timeout field (60-1800 seconds)
+- ✅ Max Output Tokens (100-8000)
+- ✅ BYOK section with password field
+- ✅ "Save key for future sessions" checkbox
+- ✅ Proper help text and descriptions
+- ✅ Clean visual separation with border-top divider
+
+## 📊 Testing Checklist
+
+To test the implementation:
+
+1. **Navigate to session creation**:
+   ```
+   /projects/[name]/sessions/new
+   ```
+
+2. **Verify Model Selection**:
+   - [ ] Model dropdown appears at top
+   - [ ] Claude Sonnet 3.7 is default
+   - [ ] All 5 models are available in correct order
+
+3. **Test Accordion Behavior**:
+   - [ ] "Change Default Model Settings" button is visible
+   - [ ] Click expands the accordion smoothly
+   - [ ] Chevron icon rotates when expanded
+   - [ ] Click again collapses the accordion
+
+4. **Verify Advanced Settings Fields**:
+   - [ ] Temperature input works (0.0 - 2.0, step 0.1)
+   - [ ] Timeout input works (60 - 1800 seconds)
+   - [ ] Max Tokens input works (100 - 8000)
+
+5. **Test BYOK Section**:
+   - [ ] API key input is type="password" (masked)
+   - [ ] Placeholder shows "sk-ant-api03-..."
+   - [ ] Checkbox for "Save key for future sessions" works
+   - [ ] Help text displays correctly
+
+6. **Form Submission**:
+   - [ ] Form submits with all values
+   - [ ] BYOK fields are optional (can be empty)
+   - [ ] Validation works as expected
+
+## 🚀 Next Steps (Optional Enhancements)
+
+Potential future improvements:
+- Backend integration for storing encrypted API keys
+- Validation for Anthropic API key format
+- Key testing functionality
+- Session history showing which used BYOK
+- API key rotation/expiration warnings
+
+## 📝 Notes
+
+- The accordion component uses Radix UI primitives for best-in-class accessibility
+- All styling uses Tailwind CSS classes for consistency
+- Form validation maintained with Zod schemas
+- Follows existing codebase patterns and conventions
+- No breaking changes to existing functionality
+- Fully backwards compatible
+
diff --git a/components/backend/Dockerfile.dev b/components/backend/Dockerfile.dev
index 731cbfee9..79a601c7b 100644
--- a/components/backend/Dockerfile.dev
+++ b/components/backend/Dockerfile.dev
@@ -3,17 +3,25 @@ FROM golang:1.24-alpine
 
 WORKDIR /app
 
-# Install git and build dependencies
-RUN apk add --no-cache git build-base
+# Install git, build dependencies, and tools for oc rsync
+RUN apk add --no-cache git build-base tar rsync
 
 # Set environment variables  
 ENV AGENTS_DIR=/app/agents
 ENV CGO_ENABLED=0
 ENV GOOS=linux
 
+# Copy go mod and sum files
+COPY go.mod go.sum ./
+
+# Download dependencies
+RUN go mod download
+
+# Copy the source code
+COPY . .
+
 # Expose port
 EXPOSE 8080
 
 # Simple development mode - just run the Go app directly
-# Note: Source code will be mounted as volume at runtime
-CMD ["sh", "-c", "while [ ! -f main.go ]; do echo 'Waiting for source sync...'; sleep 2; done && go run ."]
+CMD ["go", "run", "."]
diff --git a/components/frontend/.gitignore b/components/frontend/.gitignore
index 3eb22dfc0..c9d206bd2 100644
--- a/components/frontend/.gitignore
+++ b/components/frontend/.gitignore
@@ -60,4 +60,7 @@ jspm_packages/
 
 # TypeScript
 *.tsbuildinfo
-next-env.d.ts
\ No newline at end of file
+next-env.d.ts
+
+# Previous frontend
+previous-frontend/
\ No newline at end of file
diff --git a/components/frontend/Dockerfile.dev b/components/frontend/Dockerfile.dev
index 3c90fcb04..d1ffe9f2a 100644
--- a/components/frontend/Dockerfile.dev
+++ b/components/frontend/Dockerfile.dev
@@ -3,16 +3,24 @@ FROM node:20-alpine
 
 WORKDIR /app
 
-# Install dependencies for building native modules
-RUN apk add --no-cache libc6-compat python3 make g++
+# Install dependencies for building native modules and tools for oc rsync
+RUN apk add --no-cache libc6-compat python3 make g++ tar rsync
 
 # Set NODE_ENV to development
 ENV NODE_ENV=development
 ENV NEXT_TELEMETRY_DISABLED=1
 
+# Copy package files
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
 # Expose port
 EXPOSE 3000
 
-# Install dependencies when container starts (source mounted as volume)
 # Run Next.js in development mode
-CMD ["sh", "-c", "npm ci && npm run dev"]
+CMD ["npm", "run", "dev"]
diff --git a/components/frontend/README.md b/components/frontend/README.md
index c92748388..a5988e42e 100644
--- a/components/frontend/README.md
+++ b/components/frontend/README.md
@@ -92,11 +92,15 @@ In production, put an OAuth/ingress proxy in front of the app to set these heade
 ### Environment variables
 - `BACKEND_URL` (default: `http://localhost:8080/api`)
   - Used by server-side API routes to reach the backend.
+- `FEEDBACK_URL` (optional)
+  - URL for the feedback link in the masthead. If not set, the link will not appear.
 - Optional dev helpers: `OC_USER`, `OC_EMAIL`, `OC_TOKEN`, `ENABLE_OC_WHOAMI=1`
 
 You can also put these in a `.env.local` file in this folder:
 ```
 BACKEND_URL=http://localhost:8080/api
+# Optional: URL for feedback link in masthead
+# FEEDBACK_URL=https://forms.example.com/feedback
 # Optional dev helpers
 # OC_USER=your.name
 # OC_EMAIL=your.name@example.com
diff --git a/components/frontend/package-lock.json b/components/frontend/package-lock.json
index 8ae804d01..5b38164b9 100644
--- a/components/frontend/package-lock.json
+++ b/components/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/resolvers": "^5.2.1",
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -1046,6 +1047,37 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -1126,6 +1158,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -2170,6 +2232,7 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.2.tgz",
       "integrity": "sha512-CLABiR+h5PYfOWr/z+vWFt5VsOA2ekQeRQBFSKlcoW6Ndx/f8rfyVmq4LbgOM4GG2qtxAxjLYLOpCNTYm4uKzw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.90.2"
       },
@@ -2286,6 +2349,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
       "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2296,6 +2360,7 @@
       "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -2352,6 +2417,7 @@
       "integrity": "sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.44.0",
         "@typescript-eslint/types": "8.44.0",
@@ -2875,6 +2941,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3877,6 +3944,7 @@
       "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4051,6 +4119,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7276,6 +7345,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7285,6 +7355,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -7297,6 +7368,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
       "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -8236,6 +8308,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8415,6 +8488,7 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/components/frontend/package.json b/components/frontend/package.json
index df5f50ae9..68ff0792e 100644
--- a/components/frontend/package.json
+++ b/components/frontend/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.1",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
diff --git a/components/frontend/src/app/api/projects/[name]/rfe-workflows/[id]/sessions/link/route.ts b/components/frontend/src/app/api/projects/[name]/rfe-workflows/[id]/sessions/link/route.ts
new file mode 100644
index 000000000..5de001521
--- /dev/null
+++ b/components/frontend/src/app/api/projects/[name]/rfe-workflows/[id]/sessions/link/route.ts
@@ -0,0 +1,19 @@
+import { BACKEND_URL } from '@/lib/config'
+import { buildForwardHeadersAsync } from '@/lib/auth'
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ name: string; id: string }> },
+) {
+  const { name, id } = await params
+  const headers = await buildForwardHeadersAsync(request)
+  const body = await request.text()
+  const resp = await fetch(`${BACKEND_URL}/projects/${encodeURIComponent(name)}/rfe-workflows/${encodeURIComponent(id)}/sessions/link`, {
+    method: 'POST',
+    headers,
+    body,
+  })
+  const data = await resp.text()
+  return new Response(data, { status: resp.status, headers: { 'Content-Type': 'application/json' } })
+}
+
diff --git a/components/frontend/src/app/globals.css b/components/frontend/src/app/globals.css
index b77c4d606..2080a0957 100644
--- a/components/frontend/src/app/globals.css
+++ b/components/frontend/src/app/globals.css
@@ -52,7 +52,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.5 0.22 264);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -71,7 +71,7 @@
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: oklch(0.5 0.22 264);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
@@ -86,8 +86,8 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.6 0.2 264);
+  --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
diff --git a/components/frontend/src/app/integrations/IntegrationsClient.tsx b/components/frontend/src/app/integrations/IntegrationsClient.tsx
index 657447dcd..4d81fea81 100644
--- a/components/frontend/src/app/integrations/IntegrationsClient.tsx
+++ b/components/frontend/src/app/integrations/IntegrationsClient.tsx
@@ -1,73 +1,32 @@
 'use client'
 
 import React from 'react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { useGitHubStatus, useDisconnectGitHub } from '@/services/queries'
-import { successToast, errorToast } from '@/hooks/use-toast'
+import { GitHubConnectionCard } from '@/components/github-connection-card'
+import { PageHeader } from '@/components/page-header'
 
 type Props = { appSlug?: string }
 
 export default function IntegrationsClient({ appSlug }: Props) {
-  const { data: status, isLoading, refetch } = useGitHubStatus()
-  const disconnectMutation = useDisconnectGitHub()
-
-  const handleConnect = () => {
-    if (!appSlug) return
-    const setupUrl = new URL('/integrations/github/setup', window.location.origin)
-    const redirectUri = encodeURIComponent(setupUrl.toString())
-    const url = `https://github.com/apps/${appSlug}/installations/new?redirect_uri=${redirectUri}`
-    window.location.href = url
-  }
-
-  const handleDisconnect = async () => {
-    disconnectMutation.mutate(undefined, {
-      onSuccess: () => {
-        successToast('GitHub disconnected successfully')
-        refetch()
-      },
-      onError: (error) => {
-        errorToast(error instanceof Error ? error.message : 'Failed to disconnect GitHub')
-      },
-    })
-  }
-
-  const handleManage = () => {
-    window.open('https://github.com/settings/installations', '_blank')
-  }
-
   return (
-    <div className="max-w-3xl mx-auto p-6 space-y-6">
-      <h1 className="text-2xl font-semibold">Integrations</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>GitHub</CardTitle>
-          <CardDescription>Connect GitHub to enable forks, PRs, and repo browsing</CardDescription>
-        </CardHeader>
-        <CardContent className="flex items-center justify-between gap-4">
-          <div className="text-sm">
-            {status?.installed ? (
-              <div>
-                Connected{status.githubUserId ? ` as ${status.githubUserId}` : ''}
-                {status.updatedAt ? (
-                  <span className="text-gray-500"> · updated {new Date(status.updatedAt).toLocaleString()}</span>
-                ) : null}
-              </div>
-            ) : (
-              <div>Not connected</div>
-            )}
-          </div>
-          <div className="flex gap-2">
-            <Button variant="ghost" onClick={handleManage} disabled={isLoading || disconnectMutation.isPending}>Manage in GitHub</Button>
-            {status?.installed ? (
-              <Button variant="destructive" onClick={handleDisconnect} disabled={isLoading || disconnectMutation.isPending}>Disconnect</Button>
-            ) : (
-              <Button onClick={handleConnect} disabled={isLoading || !appSlug}>Connect</Button>
-            )}
+    <div className="min-h-screen bg-[#f8fafc]">
+      {/* Sticky header */}
+      <div className="sticky top-0 z-20 bg-white border-b">
+        <div className="container mx-auto px-6 py-6">
+          <PageHeader
+            title="Integrations"
+            description="Connect Ambient Code Platform with your favorite tools and services"
+          />
+        </div>
+      </div>
+
+      <div className="container mx-auto p-0">
+        {/* Content */}
+        <div className="px-6 pt-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <GitHubConnectionCard appSlug={appSlug} showManageButton={true} />
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/components/frontend/src/app/layout.tsx b/components/frontend/src/app/layout.tsx
index 7da9cd6ae..d8ff51f21 100644
--- a/components/frontend/src/app/layout.tsx
+++ b/components/frontend/src/app/layout.tsx
@@ -21,14 +21,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   const wsBase = env.BACKEND_URL.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:')
+  const feedbackUrl = env.FEEDBACK_URL
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <meta name="backend-ws-base" content={wsBase} />
       </head>
-      <body className={`${inter.className} min-h-screen flex flex-col`}>
+      <body className={`${inter.className} min-h-screen flex flex-col`} suppressHydrationWarning>
         <QueryProvider>
-          <Navigation />
+          <Navigation feedbackUrl={feedbackUrl} />
           <main className="flex-1 bg-background overflow-auto">{children}</main>
           <VersionFooter />
           <Toaster />
diff --git a/components/frontend/src/app/page.tsx b/components/frontend/src/app/page.tsx
index 8e1efe49c..ff947ecfc 100644
--- a/components/frontend/src/app/page.tsx
+++ b/components/frontend/src/app/page.tsx
@@ -16,7 +16,7 @@ export default function HomeRedirect() {
       <div className="flex items-center justify-center h-64">
         <div className="text-center">
           <Loader2 className="mx-auto h-8 w-8 animate-spin mb-4" />
-          <p className="text-muted-foreground">Redirecting to RFE Wokspaces...</p>
+          <p className="text-muted-foreground">Redirecting to Workspaces...</p>
         </div>
       </div>
     </div>
diff --git a/components/frontend/src/app/projects/[name]/layout.tsx b/components/frontend/src/app/projects/[name]/layout.tsx
index aebc81ab7..3b7d26697 100644
--- a/components/frontend/src/app/projects/[name]/layout.tsx
+++ b/components/frontend/src/app/projects/[name]/layout.tsx
@@ -1,57 +1,5 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Home, KeyRound, Settings, Users, Sparkles, ArrowLeft, GitBranch } from "lucide-react";
-
 export default function ProjectSectionLayout({ children }: { children: React.ReactNode; params: Promise<{ name: string }> }) {
-  const pathname = usePathname();
-
-  const base = pathname?.split("/").slice(0, 3).join("/") || "/projects";
-  // base is /projects/[name]
-
-  const items = [
-    { href: base, label: "Overview", icon: Home },
-    { href: `${base}/rfe`, label: "RFE Workspaces", icon: GitBranch },
-    { href: `${base}/sessions`, label: "Sessions", icon: Sparkles },
-    { href: `${base}/keys`, label: "Keys", icon: KeyRound },
-    { href: `${base}/permissions`, label: "Permissions", icon: Users },
-    { href: `${base}/settings`, label: "Settings", icon: Settings },
-  ];
-
-  return (
-    <div className="container mx-auto p-0 h-full">
-      <div className="flex h-full">
-        <aside className="w-56 shrink-0 border-r p-4 sticky top-16 self-start max-h-[calc(100vh-4rem)]">
-          <div className="mb-3">
-            <Link href="/projects">
-              <Button variant="ghost" size="sm" className="w-full justify-start">
-                <ArrowLeft className="w-4 h-4 mr-2" />
-                Back to Projects
-              </Button>
-            </Link>
-          </div>
-          <div className="space-y-1">
-            {items.map((item) => {
-              const isActive = pathname === item.href || (item.href !== base && pathname?.startsWith(item.href));
-              const Icon = item.icon;
-              return (
-                <Link key={item.href} href={item.href}>
-                  <Button variant={isActive ? "secondary" : "ghost"} className={cn("w-full justify-start", isActive && "font-semibold")}> 
-                    <Icon className="w-4 h-4 mr-2" />
-                    {item.label}
-                  </Button>
-                </Link>
-              );
-            })}
-          </div>
-        </aside>
-        <section className="flex-1 p-6 overflow-y-auto max-h-[calc(100vh-4rem)]">{children}</section>
-      </div>
-    </div>
-  );
+  return <>{children}</>;
 }
 
 
diff --git a/components/frontend/src/app/projects/[name]/page.tsx b/components/frontend/src/app/projects/[name]/page.tsx
index 10ad504c7..7a1d327d3 100644
--- a/components/frontend/src/app/projects/[name]/page.tsx
+++ b/components/frontend/src/app/projects/[name]/page.tsx
@@ -1,116 +1,114 @@
 'use client';
 
-import { useCallback } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { formatDistanceToNow } from 'date-fns';
-import { RefreshCw } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { useParams, useSearchParams } from 'next/navigation';
+import { Star, Settings, Users, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { ProjectSubpageHeader } from '@/components/project-subpage-header';
-import { ErrorMessage } from '@/components/error-message';
+import { PageHeader } from '@/components/page-header';
 import { Breadcrumbs } from '@/components/breadcrumbs';
 
-import { useProject } from '@/services/queries';
+import { SessionsSection } from '@/components/workspace-sections/sessions-section';
+import { SharingSection } from '@/components/workspace-sections/sharing-section';
+import { SettingsSection } from '@/components/workspace-sections/settings-section';
+import { useProject } from '@/services/queries/use-projects';
+
+type Section = 'sessions' | 'sharing' | 'settings';
 
 export default function ProjectDetailsPage() {
   const params = useParams();
-  const router = useRouter();
+  const searchParams = useSearchParams();
   const projectName = params?.name as string;
+  
+  // Fetch project data for display name and description
+  const { data: project, isLoading: projectLoading } = useProject(projectName);
+  
+  // Initialize active section from query parameter or default to 'sessions'
+  const initialSection = (searchParams.get('section') as Section) || 'sessions';
+  const [activeSection, setActiveSection] = useState<Section>(initialSection);
 
-  // React Query hook replaces all manual state management
-  const { data: project, isLoading, error, refetch } = useProject(projectName);
+  // Update active section when query parameter changes
+  useEffect(() => {
+    const sectionParam = searchParams.get('section') as Section;
+    if (sectionParam && ['sessions', 'sharing', 'settings'].includes(sectionParam)) {
+      setActiveSection(sectionParam);
+    }
+  }, [searchParams]);
 
-  const handleRefresh = useCallback(() => {
-    refetch();
-  }, [refetch]);
+  const navItems = [
+    { id: 'sessions' as Section, label: 'Sessions', icon: Star },
+    { id: 'sharing' as Section, label: 'Sharing', icon: Users },
+    { id: 'settings' as Section, label: 'Workspace Settings', icon: Settings },
+  ];
 
   // Loading state
-  if (!projectName || (isLoading && !project)) {
+  if (!projectName || projectLoading) {
     return (
       <div className="container mx-auto p-6">
         <div className="flex items-center justify-center h-64">
           <RefreshCw className="animate-spin h-8 w-8" />
-          <span className="ml-2">Loading project...</span>
+          <span className="ml-2">Loading workspace...</span>
         </div>
       </div>
     );
   }
 
-  // Error state (no project loaded)
-  if (error && !project) {
-    return (
-      <div className="container mx-auto p-6">
-        <Card className="border-red-200 bg-red-50">
-          <CardContent className="pt-6">
-            <p className="text-red-700">{error instanceof Error ? error.message : 'Failed to load project'}</p>
-            <div className="mt-4 flex gap-4">
-              <Button onClick={() => router.push('/projects')} variant="outline">
-                Back to Projects
-              </Button>
-              <Button onClick={handleRefresh}>Try Again</Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (!project) return null;
-
   return (
-    <div className="container mx-auto p-6">
-      <Breadcrumbs
-        items={[
-          { label: 'Projects', href: '/projects' },
-          { label: project.displayName || project.name },
-        ]}
-        className="mb-4"
-      />
-      <ProjectSubpageHeader
-        title={<>{project.displayName || project.name}</>}
-        description={<>{projectName}</>}
-        actions={
-          <Button variant="outline" onClick={handleRefresh} disabled={isLoading}>
-            <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-            Refresh
-          </Button>
-        }
-      />
-
-      {/* Error state (with project loaded) */}
-      {error && project && (
-        <div className="px-6">
-          <ErrorMessage error={error} onRetry={handleRefresh} />
+    <div className="min-h-screen bg-[#f8fafc]">
+      {/* Sticky header */}
+      <div className="sticky top-0 z-20 bg-white border-b">
+        <div className="container mx-auto px-6 py-4">
+          <Breadcrumbs
+            items={[
+              { label: 'Workspaces', href: '/projects' },
+              { label: projectName },
+            ]}
+            className="mb-4"
+          />
+          <PageHeader
+            title={project?.displayName || projectName}
+            description={project?.description || 'Workspace details and configuration'}
+          />
         </div>
-      )}
+      </div>
+
+      <div className="container mx-auto p-0">
+        {/* Content */}
+        <div className="px-6 pt-4 flex gap-6">
+          {/* Sidebar Navigation */}
+          <aside className="w-56 shrink-0">
+            <Card>
+              <CardHeader>
+                <CardTitle>Workspace</CardTitle>
+              </CardHeader>
+              <CardContent className="px-4 pb-4 pt-2">
+                <div className="space-y-1">
+                  {navItems.map((item) => {
+                    const isActive = activeSection === item.id;
+                    const Icon = item.icon;
+                    return (
+                      <Button
+                        key={item.id}
+                        variant={isActive ? "secondary" : "ghost"}
+                        className={cn("w-full justify-start", isActive && "font-semibold")}
+                        onClick={() => setActiveSection(item.id)}
+                      >
+                        <Icon className="w-4 h-4 mr-2" />
+                        {item.label}
+                      </Button>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+          </aside>
 
-      <div className="pt-2">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          {/* Project Info */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Project Information</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label className="text-sm font-medium">Description</Label>
-                <p className="text-sm text-muted-foreground">
-                  {project.description || 'No description provided'}
-                </p>
-              </div>
-              <div>
-                <Label className="text-sm font-medium">Created</Label>
-                <p className="text-sm text-muted-foreground">
-                  {project.creationTimestamp &&
-                    formatDistanceToNow(new Date(project.creationTimestamp), {
-                      addSuffix: true,
-                    })}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
+          {/* Main Content */}
+          {activeSection === 'sessions' && <SessionsSection projectName={projectName} />}
+          {activeSection === 'sharing' && <SharingSection projectName={projectName} />}
+          {activeSection === 'settings' && <SettingsSection projectName={projectName} />}
         </div>
       </div>
     </div>
diff --git a/components/frontend/src/app/projects/[name]/permissions/error.tsx b/components/frontend/src/app/projects/[name]/permissions/error.tsx
deleted file mode 100644
index 9ad3cc608..000000000
--- a/components/frontend/src/app/projects/[name]/permissions/error.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { AlertCircle } from 'lucide-react';
-
-export default function PermissionsError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    console.error('Permissions page error:', error);
-  }, [error]);
-
-  return (
-    <div className="container mx-auto p-6">
-      <Card className="max-w-lg mx-auto mt-12">
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <AlertCircle className="h-5 w-5 text-destructive" />
-            <CardTitle>Failed to load permissions</CardTitle>
-          </div>
-          <CardDescription>
-            {error.message || 'An unexpected error occurred while loading permissions.'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={reset}>Try again</Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/components/frontend/src/app/projects/[name]/permissions/loading.tsx b/components/frontend/src/app/projects/[name]/permissions/loading.tsx
deleted file mode 100644
index 843fdcf6a..000000000
--- a/components/frontend/src/app/projects/[name]/permissions/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { TableSkeleton } from '@/components/skeletons';
-
-export default function PermissionsLoading() {
-  return <TableSkeleton rows={6} columns={4} />;
-}
diff --git a/components/frontend/src/app/projects/[name]/permissions/page.tsx b/components/frontend/src/app/projects/[name]/permissions/page.tsx
index 08bc483c3..a07590d5f 100644
--- a/components/frontend/src/app/projects/[name]/permissions/page.tsx
+++ b/components/frontend/src/app/projects/[name]/permissions/page.tsx
@@ -1,404 +1,19 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
-import { useParams } from 'next/navigation';
-import { Eye, Edit, Shield, Users, User as UserIcon, Plus, RefreshCw, Loader2, Trash2, Info } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { ProjectSubpageHeader } from '@/components/project-subpage-header';
-import { ErrorMessage } from '@/components/error-message';
-import { DestructiveConfirmationDialog } from '@/components/confirmation-dialog';
-import { Breadcrumbs } from '@/components/breadcrumbs';
-
-import { useProject, useProjectPermissions, useAddProjectPermission, useRemoveProjectPermission } from '@/services/queries';
-import { successToast, errorToast } from '@/hooks/use-toast';
-import type { PermissionRole, SubjectType } from '@/types/project';
-
-const ROLE_DEFINITIONS = {
-  view: {
-    label: 'View',
-    description: 'Can see sessions and duplicate to their own project',
-    permissions: ['sessions:read', 'sessions:duplicate'] as const,
-    color: 'bg-blue-100 text-blue-800',
-    icon: Eye,
-  },
-  edit: {
-    label: 'Edit',
-    description: 'Can create sessions in the project',
-    permissions: ['sessions:read', 'sessions:create', 'sessions:duplicate'] as const,
-    color: 'bg-green-100 text-green-800',
-    icon: Edit,
-  },
-  admin: {
-    label: 'Admin',
-    description: 'Full project management access',
-    permissions: ['*'] as const,
-    color: 'bg-purple-100 text-purple-800',
-    icon: Shield,
-  },
-} as const;
-
-type GrantPermissionForm = {
-  subjectType: SubjectType;
-  subjectName: string;
-  role: PermissionRole;
-};
+import { useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
 
 export default function PermissionsPage() {
   const params = useParams();
+  const router = useRouter();
   const projectName = params?.name as string;
 
-  // React Query hooks replace all manual state management
-  const { data: project } = useProject(projectName);
-  const { data: permissions = [], isLoading, error, refetch } = useProjectPermissions(projectName);
-  const addPermissionMutation = useAddProjectPermission();
-  const removePermissionMutation = useRemoveProjectPermission();
-
-  // Local UI state
-  const [showGrantDialog, setShowGrantDialog] = useState(false);
-  const [grantForm, setGrantForm] = useState<GrantPermissionForm>({
-    subjectType: 'group',
-    subjectName: '',
-    role: 'view',
-  });
-  const [grantError, setGrantError] = useState<string | null>(null);
-  const userRole: PermissionRole | undefined = undefined; // TODO: Fetch from /projects/:name/access
-
-  const [showRevokeDialog, setShowRevokeDialog] = useState(false);
-  const [toRevoke, setToRevoke] = useState<{ subjectType: SubjectType; subjectName: string; role: PermissionRole } | null>(null);
-
-  // Check if user is admin - for now assume admin, or fetch from a separate endpoint
-  // TODO: Implement proper user role fetching from /projects/:name/access
-  const isAdmin = userRole === 'admin' || userRole === undefined; // Default to admin for now
-
-  const handleGrant = useCallback(() => {
-    if (!grantForm.subjectName.trim()) {
-      setGrantError(`${grantForm.subjectType === 'group' ? 'Group' : 'User'} name is required`);
-      return;
-    }
-
-    const key = `${grantForm.subjectType}:${grantForm.subjectName}`.toLowerCase();
-    if (permissions.some((i) => `${i.subjectType}:${i.subjectName}`.toLowerCase() === key)) {
-      setGrantError('This subject already has access to the project');
-      return;
+  // Redirect to main workspace page
+  useEffect(() => {
+    if (projectName) {
+      router.replace(`/projects/${projectName}?section=sharing`);
     }
+  }, [projectName, router]);
 
-    setGrantError(null);
-    addPermissionMutation.mutate(
-      {
-        projectName,
-        permission: {
-          subjectType: grantForm.subjectType,
-          subjectName: grantForm.subjectName,
-          role: grantForm.role,
-        },
-      },
-      {
-        onSuccess: () => {
-          successToast(`Permission granted to ${grantForm.subjectName} successfully`);
-          setShowGrantDialog(false);
-          setGrantForm({ subjectType: 'group', subjectName: '', role: 'view' });
-        },
-        onError: (error) => {
-          const message = error instanceof Error ? error.message : 'Failed to grant permission';
-          setGrantError(message);
-          errorToast(message);
-        },
-      }
-    );
-  }, [grantForm, permissions, projectName, addPermissionMutation]);
-
-  const handleRevoke = useCallback(() => {
-    if (!toRevoke) return;
-
-    removePermissionMutation.mutate(
-      {
-        projectName,
-        subjectType: toRevoke.subjectType,
-        subjectName: toRevoke.subjectName,
-      },
-      {
-        onSuccess: () => {
-          successToast(`Permission revoked from ${toRevoke.subjectName} successfully`);
-          setShowRevokeDialog(false);
-          setToRevoke(null);
-        },
-        onError: (error) => {
-          errorToast(error instanceof Error ? error.message : 'Failed to revoke permission');
-        },
-      }
-    );
-  }, [toRevoke, projectName, removePermissionMutation]);
-
-  const emptyState = useMemo(
-    () => (
-      <div className="text-center py-8">
-        <Users className="w-8 h-8 text-muted-foreground mx-auto mb-2" />
-        <p className="text-sm text-muted-foreground mb-4">No users or groups have access yet</p>
-        {isAdmin && (
-          <Button onClick={() => setShowGrantDialog(true)} size="sm">
-            <Plus className="w-4 h-4 mr-2" />
-            Grant First Permission
-          </Button>
-        )}
-      </div>
-    ),
-    [isAdmin]
-  );
-
-  if (!projectName || (isLoading && permissions.length === 0)) {
-    return (
-      <div className="container mx-auto p-6">
-        <div className="flex items-center justify-center h-64">
-          <RefreshCw className="animate-spin h-8 w-8" />
-          <span className="ml-2">Loading permissions...</span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container mx-auto p-6">
-      <Breadcrumbs
-        items={[
-          { label: 'Projects', href: '/projects' },
-          { label: projectName, href: `/projects/${projectName}` },
-          { label: 'Permissions' },
-        ]}
-        className="mb-4"
-      />
-      <ProjectSubpageHeader
-        title={<>Permissions</>}
-        description={<>Manage user and group access for {project?.displayName || projectName}</>}
-        actions={
-          <>
-            <Button variant="outline" onClick={() => refetch()} disabled={isLoading}>
-              <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-              Refresh
-            </Button>
-            {isAdmin && (
-              <Button onClick={() => setShowGrantDialog(true)}>
-                <Plus className="w-4 h-4 mr-2" />
-                Grant Permission
-              </Button>
-            )}
-          </>
-        }
-      />
-
-      {/* Error state */}
-      {error && <ErrorMessage error={error} onRetry={() => refetch()} />}
-
-      {/* Mutation errors */}
-      {addPermissionMutation.isError && (
-        <div className="mb-6">
-          <ErrorMessage error={addPermissionMutation.error} />
-        </div>
-      )}
-      {removePermissionMutation.isError && (
-        <div className="mb-6">
-          <ErrorMessage error={removePermissionMutation.error} />
-        </div>
-      )}
-
-      {!isAdmin && (
-        <Card className="mb-6 border-blue-200 bg-blue-50">
-          <CardContent className="pt-6 flex items-center gap-2">
-            <Info className="w-4 h-4 text-blue-600" />
-            <p className="text-blue-700">
-              You have {userRole || 'view'} access. Only admins can grant or revoke permissions.
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Users className="w-5 h-5" />
-            Permissions
-          </CardTitle>
-          <CardDescription>Users and groups with access to this project and their roles</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {permissions.length > 0 ? (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Subject</TableHead>
-                  <TableHead>Type</TableHead>
-                  <TableHead>Role</TableHead>
-                  {isAdmin && <TableHead className="text-right">Actions</TableHead>}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {permissions.map((p) => {
-                  const roleConfig = ROLE_DEFINITIONS[p.role];
-                  const RoleIcon = roleConfig.icon;
-                  const isRevokingThis =
-                    removePermissionMutation.isPending &&
-                    removePermissionMutation.variables?.subjectName === p.subjectName &&
-                    removePermissionMutation.variables?.subjectType === p.subjectType;
-
-                  return (
-                    <TableRow key={`${p.subjectType}:${p.subjectName}:${p.role}`}>
-                      <TableCell className="font-medium">{p.subjectName}</TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                          {p.subjectType === 'group' ? (
-                            <Users className="w-3 h-3" />
-                          ) : (
-                            <UserIcon className="w-3 h-3" />
-                          )}
-                          {p.subjectType === 'group' ? 'Group' : 'User'}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <Badge className={roleConfig.color} style={{ cursor: 'default' }}>
-                          <RoleIcon className="w-3 h-3 mr-1" />
-                          {roleConfig.label}
-                        </Badge>
-                      </TableCell>
-
-                      {isAdmin && (
-                        <TableCell className="text-right">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => {
-                              setToRevoke(p);
-                              setShowRevokeDialog(true);
-                            }}
-                            disabled={isRevokingThis}
-                          >
-                            {isRevokingThis ? (
-                              <Loader2 className="w-4 h-4 animate-spin" />
-                            ) : (
-                              <Trash2 className="w-4 h-4" />
-                            )}
-                          </Button>
-                        </TableCell>
-                      )}
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          ) : (
-            emptyState
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Grant Permission Dialog */}
-      <Dialog open={showGrantDialog} onOpenChange={setShowGrantDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Grant Permission</DialogTitle>
-            <DialogDescription>Add a user or group to this project with a role</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Subject Type</Label>
-              <Tabs
-                value={grantForm.subjectType}
-                onValueChange={(value) => {
-                  if (addPermissionMutation.isPending) return;
-                  setGrantForm((prev) => ({ ...prev, subjectType: value as SubjectType }));
-                }}
-              >
-                <TabsList className="grid grid-cols-2 w-full">
-                  <TabsTrigger value="group">Group</TabsTrigger>
-                  <TabsTrigger value="user">User</TabsTrigger>
-                </TabsList>
-              </Tabs>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="subjectName">
-                {grantForm.subjectType === 'group' ? 'Group' : 'User'} Name
-              </Label>
-              <Input
-                id="subjectName"
-                placeholder={`Enter ${grantForm.subjectType} name`}
-                value={grantForm.subjectName}
-                onChange={(e) => setGrantForm((prev) => ({ ...prev, subjectName: e.target.value }))}
-                disabled={addPermissionMutation.isPending}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label>Role</Label>
-              <div className="space-y-3">
-                {Object.entries(ROLE_DEFINITIONS).map(([roleKey, roleConfig]) => {
-                  const RoleIcon = roleConfig.icon;
-                  const id = `role-${roleKey}`;
-                  return (
-                    <div key={roleKey} className="flex items-start gap-3">
-                      <input
-                        type="radio"
-                        name="grant-role"
-                        id={id}
-                        className="mt-1 h-4 w-4"
-                        value={roleKey}
-                        checked={grantForm.role === (roleKey as PermissionRole)}
-                        onChange={() => setGrantForm((prev) => ({ ...prev, role: roleKey as PermissionRole }))}
-                        disabled={addPermissionMutation.isPending}
-                      />
-                      <Label htmlFor={id} className="flex-1 cursor-pointer">
-                        <div className="flex items-center gap-2">
-                          <RoleIcon className="w-4 h-4" />
-                          <span className="font-medium">{roleConfig.label}</span>
-                        </div>
-                        <div className="text-sm text-muted-foreground ml-6">{roleConfig.description}</div>
-                      </Label>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-            {grantError && <div className="text-sm text-red-600 bg-red-50 p-2 rounded">{grantError}</div>}
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowGrantDialog(false)}
-              disabled={addPermissionMutation.isPending}
-            >
-              Cancel
-            </Button>
-            <Button onClick={handleGrant} disabled={addPermissionMutation.isPending}>
-              {addPermissionMutation.isPending ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Granting...
-                </>
-              ) : (
-                <>
-                  <Plus className="w-4 h-4 mr-2" />
-                  Grant Permission
-                </>
-              )}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Revoke Permission Dialog */}
-      <DestructiveConfirmationDialog
-        open={showRevokeDialog}
-        onOpenChange={setShowRevokeDialog}
-        onConfirm={handleRevoke}
-        title="Revoke Permission"
-        description={`Are you sure you want to revoke access for "${toRevoke?.subjectName}" (${toRevoke?.subjectType})? They will immediately lose access to this project.`}
-        confirmText="Revoke"
-        loading={removePermissionMutation.isPending}
-      />
-    </div>
-  );
+  return null;
 }
diff --git a/components/frontend/src/app/projects/[name]/rfe/[id]/page.tsx b/components/frontend/src/app/projects/[name]/rfe/[id]/page.tsx
index ea97d2107..2fc068bf3 100644
--- a/components/frontend/src/app/projects/[name]/rfe/[id]/page.tsx
+++ b/components/frontend/src/app/projects/[name]/rfe/[id]/page.tsx
@@ -6,8 +6,11 @@ import { useParams, useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { WorkflowPhase } from "@/types/agentic-session";
-import { ArrowLeft, Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Bot } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import RepoBrowser from "@/components/RepoBrowser";
 import type { GitHubFork } from "@/types";
 import { Breadcrumbs } from "@/components/breadcrumbs";
@@ -16,7 +19,8 @@ import { RfePhaseCards } from "./rfe-phase-cards";
 import { RfeWorkspaceCard } from "./rfe-workspace-card";
 import { RfeHeader } from "./rfe-header";
 import { RfeAgentsCard } from "./rfe-agents-card";
-import { useRfeWorkflow, useRfeWorkflowSessions, useDeleteRfeWorkflow, useRfeWorkflowSeeding, useSeedRfeWorkflow, useUpdateRfeWorkflow, useRepoBlob, useRepoTree, useOpenJiraIssue } from "@/services/queries";
+import { AVAILABLE_AGENTS } from "@/lib/agents";
+import { useRfeWorkflow, useRfeWorkflowSessions, useDeleteRfeWorkflow, useRfeWorkflowSeeding, useSeedRfeWorkflow, useUpdateRfeWorkflow, useRepoBlob, useRepoTree, useOpenJiraIssue, useRfeWorkflowAgents } from "@/services/queries";
 
 export default function ProjectRFEDetailPage() {
   const params = useParams();
@@ -32,6 +36,7 @@ export default function ProjectRFEDetailPage() {
   const seedWorkflowMutation = useSeedRfeWorkflow();
   const updateWorkflowMutation = useUpdateRfeWorkflow();
   const { openJiraForPath } = useOpenJiraIssue(project, id);
+  const { data: repoAgents = AVAILABLE_AGENTS, isLoading: loadingAgents } = useRfeWorkflowAgents(project, id);
 
   // Extract repo info from workflow
   const repo = workflow?.umbrellaRepo?.url.replace(/^https?:\/\/(?:www\.)?github.com\//i, '').replace(/\.git$/i, '') || '';
@@ -200,7 +205,7 @@ export default function ProjectRFEDetailPage() {
         }
       );
     });
-  }, [project, id, updateWorkflowMutation, load, refetchSeeding]);
+  }, [project, id, updateWorkflowMutation, load, refetchSeeding, seedWorkflowMutation]);
 
 
   if (loading) return (
@@ -242,7 +247,7 @@ export default function ProjectRFEDetailPage() {
       <div className="max-w-6xl mx-auto space-y-8">
         <Breadcrumbs
           items={[
-            { label: 'Projects', href: '/projects' },
+            { label: 'Workspaces', href: '/projects' },
             { label: project, href: `/projects/${project}` },
             { label: 'RFE Workspaces', href: `/projects/${project}/rfe` },
             { label: workflow.title },
@@ -255,8 +260,6 @@ export default function ProjectRFEDetailPage() {
           onDelete={deleteWorkflow}
         />
 
-     
-
         <RfeWorkspaceCard
           workflow={workflow}
           workflowWorkspace={workflowWorkspace}
@@ -269,62 +272,140 @@ export default function ProjectRFEDetailPage() {
           updating={updateWorkflowMutation.isPending}
         />
 
-        <RfeAgentsCard
-          projectName={project}
-          workflowId={id}
-          selectedAgents={selectedAgents}
-          onAgentsChange={setSelectedAgents}
-        />
+        {/* Two Column Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Left Column - Tabs */}
+          <div className="lg:col-span-1">
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
+              <TabsList>
+                <TabsTrigger value="overview">Overview</TabsTrigger>
+                <TabsTrigger value="sessions">Sessions</TabsTrigger>
+                {upstreamRepo ? <TabsTrigger value="browser">Repository</TabsTrigger> : null}
+              </TabsList>
 
-        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="sessions">Sessions</TabsTrigger>
-          {upstreamRepo ? <TabsTrigger value="browser">Repository</TabsTrigger> : null}
-          </TabsList>
+              <TabsContent value="overview">
+                <RfePhaseCards
+                  workflow={workflow}
+                  rfeSessions={rfeSessions}
+                  rfeDoc={rfeDoc}
+                  specKitDir={specKitDir}
+                  firstFeaturePath={firstFeaturePath}
+                  projectName={project}
+                  rfeId={id}
+                  workflowWorkspace={workflowWorkspace}
+                  isSeeded={isSeeded}
+                  startingPhase={startingPhase}
+                  publishingPhase={publishingPhase}
+                  selectedAgents={selectedAgents}
+                  onStartPhase={setStartingPhase}
+                  onPublishPhase={setPublishingPhase}
+                  onLoad={async () => { await load(); }}
+                  onLoadSessions={async () => { await loadSessions(); }}
+                  onError={setError}
+                  onOpenJira={openJiraForPath}
+                />
+              </TabsContent>
 
-          <TabsContent value="overview">
-            <RfePhaseCards
-              workflow={workflow}
-              rfeSessions={rfeSessions}
-              rfeDoc={rfeDoc}
-              specKitDir={specKitDir}
-              firstFeaturePath={firstFeaturePath}
-              projectName={project}
-              rfeId={id}
-              workflowWorkspace={workflowWorkspace}
-              isSeeded={isSeeded}
-              startingPhase={startingPhase}
-              publishingPhase={publishingPhase}
-              selectedAgents={selectedAgents}
-              onStartPhase={setStartingPhase}
-              onPublishPhase={setPublishingPhase}
-              onLoad={async () => { await load(); }}
-              onLoadSessions={async () => { await loadSessions(); }}
-              onError={setError}
-              onOpenJira={openJiraForPath}
-            />
-          </TabsContent>
+              <TabsContent value="sessions">
+                <RfeSessionsTable
+                  sessions={rfeSessions}
+                  projectName={project}
+                  rfeId={id}
+                  workspacePath={workflowWorkspace}
+                  workflowId={workflow.id}
+                />
+              </TabsContent>
 
-          <TabsContent value="sessions">
-            <RfeSessionsTable
-              sessions={rfeSessions}
-              projectName={project}
-              rfeId={id}
-              workspacePath={workflowWorkspace}
-              workflowId={workflow.id}
-            />
-          </TabsContent>
+              <TabsContent value="browser">
+                <RepoBrowser
+                  projectName={project}
+                  repoUrl={selectedFork?.url || upstreamRepo}
+                  defaultRef={selectedFork?.default_branch || workflow.branchName || workflow.umbrellaRepo?.branch || "main"}
+                />
+              </TabsContent>
+            </Tabs>
+          </div>
 
-      
-          <TabsContent value="browser">
-            <RepoBrowser
-              projectName={project}
-              repoUrl={selectedFork?.url || upstreamRepo}
-              defaultRef={selectedFork?.default_branch || workflow.branchName || workflow.umbrellaRepo?.branch || "main"}
-            />
-          </TabsContent>
-        </Tabs>
+          {/* Right Column - Agents Accordion */}
+          <div className="lg:col-span-1">
+            <Card>
+              <CardContent className="p-4">
+                <Accordion type="multiple" className="w-full">
+                  <AccordionItem value="agents" className="border-none">
+                    <AccordionTrigger className="text-lg font-semibold hover:no-underline px-0">
+                      <div className="flex items-center gap-2">
+                        <Bot className="h-5 w-5" />
+                        Agents
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="pt-4">
+                      {loadingAgents ? (
+                        <div className="flex items-center justify-center py-8">
+                          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                        </div>
+                      ) : repoAgents.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground">
+                          <Bot className="h-12 w-12 mx-auto mb-2 opacity-50" />
+                          <p>No agents found in repository .claude/agents directory</p>
+                          <p className="text-xs mt-1">Seed the repository to add agent definitions</p>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="grid grid-cols-1 gap-3">
+                            {repoAgents.map((agent) => {
+                              const isSelected = selectedAgents.includes(agent.persona);
+                              return (
+                                <div
+                                  key={agent.persona}
+                                  className={`p-3 rounded-lg border transition-colors ${
+                                    isSelected ? 'bg-primary/5 border-primary' : 'bg-background border-border hover:border-primary/50'
+                                  }`}
+                                >
+                                  <label className="flex items-start gap-3 cursor-pointer">
+                                    <Checkbox
+                                      checked={isSelected}
+                                      onCheckedChange={(checked) => {
+                                        setSelectedAgents(
+                                          checked
+                                            ? [...selectedAgents, agent.persona]
+                                            : selectedAgents.filter(p => p !== agent.persona)
+                                        );
+                                      }}
+                                      className="mt-0.5"
+                                    />
+                                    <div className="flex-1 min-w-0">
+                                      <div className="font-medium text-sm">{agent.name}</div>
+                                      <div className="text-xs text-muted-foreground mt-0.5">{agent.role}</div>
+                                    </div>
+                                  </label>
+                                </div>
+                              );
+                            })}
+                          </div>
+                          {selectedAgents.length > 0 && (
+                            <div className="mt-4 pt-4 border-t">
+                              <div className="text-sm font-medium mb-2">Selected Agents ({selectedAgents.length})</div>
+                              <div className="flex flex-wrap gap-2">
+                                {selectedAgents.map(persona => {
+                                  const agent = repoAgents.find(a => a.persona === persona);
+                                  return agent ? (
+                                    <Badge key={persona} variant="secondary">
+                                      {agent.name}
+                                    </Badge>
+                                  ) : null;
+                                })}
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
 
       </div>
     </div>
diff --git a/components/frontend/src/app/projects/[name]/rfe/new/page.tsx b/components/frontend/src/app/projects/[name]/rfe/new/page.tsx
index 9b6ba76b1..8842618f6 100644
--- a/components/frontend/src/app/projects/[name]/rfe/new/page.tsx
+++ b/components/frontend/src/app/projects/[name]/rfe/new/page.tsx
@@ -157,7 +157,7 @@ export default function ProjectNewRFEWorkflowPage() {
       <div className="max-w-4xl mx-auto">
         <Breadcrumbs
           items={[
-            { label: 'Projects', href: '/projects' },
+            { label: 'Workspaces', href: '/projects' },
             { label: projectName, href: `/projects/${projectName}` },
             { label: 'RFE Workspaces', href: `/projects/${projectName}/rfe` },
             { label: 'New Workspace' },
diff --git a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx
index 3d8eb8162..a688e7dd9 100644
--- a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx
+++ b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx
@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useMemo, useCallback } from "react";
 import Link from "next/link";
-import { formatDistanceToNow } from "date-fns";
-import { ArrowLeft, Square, Trash2, Copy, Play, MoreVertical } from "lucide-react";
+import { formatDistanceToNow, format } from "date-fns";
+import { ArrowLeft, Square, Trash2, Copy, Play, MoreVertical, Bot, Loader2, FolderTree, AlertCircle, Sprout, CheckCircle2, GitBranch, Edit, Info, RefreshCw, Folder, FileText } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 // Custom components
@@ -11,14 +11,23 @@ import OverviewTab from "@/components/session/OverviewTab";
 import MessagesTab from "@/components/session/MessagesTab";
 import WorkspaceTab from "@/components/session/WorkspaceTab";
 import ResultsTab from "@/components/session/ResultsTab";
+import { EditRepositoriesDialog } from "../../rfe/[id]/edit-repositories-dialog";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { CloneSessionDialog } from "@/components/clone-session-dialog";
 import { Breadcrumbs } from "@/components/breadcrumbs";
+import { PageHeader } from "@/components/page-header";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { GitHubConnectionCard } from "@/components/github-connection-card";
 import type { FileTreeNode } from "@/components/file-tree";
 
 import type { SessionMessage } from "@/types";
@@ -40,8 +49,18 @@ import {
   useAllSessionGitHubDiffs,
   useSessionK8sResources,
   useContinueSession,
+  useRfeWorkflow,
+  useRfeWorkflowAgents,
+  useRfeWorkflowSeeding,
+  useSeedRfeWorkflow,
+  useUpdateRfeWorkflow,
+  useCreateRfeWorkflow,
+  useGitHubStatus,
+  useWorkflowArtifacts,
   workspaceKeys,
+  rfeKeys,
 } from "@/services/queries";
+import { useSecretsValues } from "@/services/queries/use-secrets";
 import { successToast, errorToast } from "@/hooks/use-toast";
 import { workspaceApi } from "@/services/api";
 import { useQueryClient } from "@tanstack/react-query";
@@ -55,7 +74,6 @@ export default function ProjectSessionDetailPage({
   const queryClient = useQueryClient();
   const [projectName, setProjectName] = useState<string>("");
   const [sessionName, setSessionName] = useState<string>("");
-  const [activeTab, setActiveTab] = useState<string>("overview");
   const [promptExpanded, setPromptExpanded] = useState(false);
   const [chatInput, setChatInput] = useState("");
   const [backHref, setBackHref] = useState<string | null>(null);
@@ -63,6 +81,16 @@ export default function ProjectSessionDetailPage({
   const [contentPodSpawning, setContentPodSpawning] = useState(false);
   const [contentPodReady, setContentPodReady] = useState(false);
   const [contentPodError, setContentPodError] = useState<string | null>(null);
+  const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
+  const [editRepoDialogOpen, setEditRepoDialogOpen] = useState(false);
+  const [selectedWorkflow, setSelectedWorkflow] = useState<string>("none");
+  const [githubModalOpen, setGithubModalOpen] = useState(false);
+  const [specRepoUrl, setSpecRepoUrl] = useState("https://github.com/org/repo.git");
+  const [baseBranch, setBaseBranch] = useState("main");
+  const [openAccordionItems, setOpenAccordionItems] = useState<string[]>(["workflows"]);
+  const [contextModalOpen, setContextModalOpen] = useState(false);
+  const [contextUrl, setContextUrl] = useState("");
+  const [contextBranch, setContextBranch] = useState("main");
 
   // Extract params
   useEffect(() => {
@@ -77,10 +105,24 @@ export default function ProjectSessionDetailPage({
     });
   }, [params]);
 
+  // Open spec-repository accordion when plan-feature or develop-feature is selected
+  useEffect(() => {
+    if (selectedWorkflow === "plan-feature" || selectedWorkflow === "develop-feature") {
+      setOpenAccordionItems(prev => {
+        if (!prev.includes("spec-repository")) {
+          return [...prev, "spec-repository"];
+        }
+        return prev;
+      });
+    }
+  }, [selectedWorkflow]);
+
   // React Query hooks
   const { data: session, isLoading, error, refetch: refetchSession } = useSession(projectName, sessionName);
   const { data: messages = [] } = useSessionMessages(projectName, sessionName, session?.status?.phase);
   const { data: k8sResources } = useSessionK8sResources(projectName, sessionName);
+  const { data: githubStatus } = useGitHubStatus();
+  const { data: secretsValues } = useSecretsValues(projectName);
   const stopMutation = useStopSession();
   const deleteMutation = useDeleteSession();
   const continueMutation = useContinueSession();
@@ -89,6 +131,27 @@ export default function ProjectSessionDetailPage({
   const pushToGitHubMutation = usePushSessionToGitHub();
   const abandonChangesMutation = useAbandonSessionChanges();
   const writeWorkspaceFileMutation = useWriteWorkspaceFile();
+  
+  // Get RFE workflow ID from session if this is an RFE session
+  const rfeWorkflowId = session?.metadata?.labels?.['rfe-workflow'];
+  const { data: rfeWorkflow, refetch: refetchWorkflow } = useRfeWorkflow(projectName, rfeWorkflowId || '');
+  const { data: repoAgents = [], isLoading: loadingAgents } = useRfeWorkflowAgents(
+    projectName,
+    rfeWorkflowId || ''
+  );
+  const { data: seedingData, isLoading: checkingSeeding, error: seedingQueryError, refetch: refetchSeeding } = useRfeWorkflowSeeding(
+    projectName,
+    rfeWorkflowId || ''
+  );
+  const seedWorkflowMutation = useSeedRfeWorkflow();
+  const updateWorkflowMutation = useUpdateRfeWorkflow();
+  const createWorkflowMutation = useCreateRfeWorkflow();
+  
+  // Fetch artifacts for the spec repository
+  const { data: workflowArtifacts = [], isLoading: artifactsLoading, refetch: refetchArtifacts } = useWorkflowArtifacts(
+    projectName,
+    rfeWorkflowId || ''
+  );
 
   // Workspace state
   const [wsSelectedPath, setWsSelectedPath] = useState<string | undefined>();
@@ -111,7 +174,7 @@ export default function ProjectSessionDetailPage({
     projectName,
     sessionName,
     undefined,
-    { enabled: activeTab === 'workspace' }
+    { enabled: true }
   );
 
   // Update tree when workspace items change
@@ -141,6 +204,16 @@ export default function ProjectSessionDetailPage({
     });
   }, [queryClient]);
 
+  // Handler to refresh spec repository artifacts
+  const handleRefreshArtifacts = useCallback(async () => {
+    if (!rfeWorkflowId) return;
+    // Invalidate artifacts query to force fresh fetch
+    await queryClient.invalidateQueries({
+      queryKey: rfeKeys.artifacts(projectName, rfeWorkflowId),
+    });
+    await refetchArtifacts();
+  }, [queryClient, projectName, rfeWorkflowId, refetchArtifacts]);
+
   // GitHub diff state
   const [busyRepo, setBusyRepo] = useState<Record<number, 'push' | 'abandon' | null>>({});
   
@@ -450,7 +523,6 @@ export default function ProjectSessionDetailPage({
       {
         onSuccess: () => {
           setChatInput("");
-          setActiveTab('messages');
         },
         onError: (err) => errorToast(err instanceof Error ? err.message : "Failed to send message"),
       }
@@ -477,6 +549,67 @@ export default function ProjectSessionDetailPage({
     );
   };
 
+  const handleSeedWorkflow = useCallback(async () => {
+    if (!rfeWorkflowId) return;
+    return new Promise<void>((resolve, reject) => {
+      seedWorkflowMutation.mutate(
+        { projectName, workflowId: rfeWorkflowId },
+        {
+          onSuccess: () => {
+            successToast("Repository seeded successfully");
+            refetchSeeding();
+            resolve();
+          },
+          onError: (err) => {
+            errorToast(err instanceof Error ? err.message : "Failed to seed repository");
+            reject(err);
+          },
+        }
+      );
+    });
+  }, [projectName, rfeWorkflowId, seedWorkflowMutation, refetchSeeding]);
+
+  const handleUpdateRepositories = useCallback(async (data: { umbrellaRepo: { url: string; branch?: string }; supportingRepos: { url: string; branch?: string }[] }) => {
+    if (!rfeWorkflowId) return;
+    return new Promise<void>((resolve, reject) => {
+      updateWorkflowMutation.mutate(
+        {
+          projectName,
+          workflowId: rfeWorkflowId,
+          data: {
+            umbrellaRepo: data.umbrellaRepo,
+            supportingRepos: data.supportingRepos,
+          },
+        },
+        {
+          onSuccess: () => {
+            successToast("Repositories updated successfully");
+            refetchWorkflow();
+            refetchSeeding();
+            seedWorkflowMutation.reset();
+            resolve();
+          },
+          onError: (err) => {
+            errorToast(err instanceof Error ? err.message : "Failed to update repositories");
+            reject(err);
+          },
+        }
+      );
+    });
+  }, [projectName, rfeWorkflowId, updateWorkflowMutation, refetchWorkflow, refetchSeeding, seedWorkflowMutation]);
+
+  // Seeding status from React Query
+  const isSeeded = seedingData?.isSeeded || false;
+  const seedingError = seedWorkflowMutation.error?.message || seedingQueryError?.message;
+  const hasCheckedSeeding = seedingData !== undefined || !!seedingQueryError;
+  const seedingStatus = {
+    checking: checkingSeeding,
+    isSeeded,
+    error: seedingError,
+    hasChecked: hasCheckedSeeding,
+  };
+  const workflowWorkspace = rfeWorkflow?.workspacePath || (rfeWorkflowId ? `/rfe-workflows/${rfeWorkflowId}/workspace` : '');
+
   // Check if session is completed
   const sessionCompleted = (
     session?.status?.phase === 'Completed' ||
@@ -484,14 +617,14 @@ export default function ProjectSessionDetailPage({
     session?.status?.phase === 'Stopped'
   );
 
-  // Auto-spawn content pod when workspace tab clicked on completed session
+  // Auto-spawn content pod on completed session
   // Don't auto-retry if we already encountered an error - user must explicitly retry
   useEffect(() => {
-    if (activeTab === 'workspace' && sessionCompleted && !contentPodReady && !contentPodSpawning && !contentPodError) {
+    if (sessionCompleted && !contentPodReady && !contentPodSpawning && !contentPodError) {
       spawnContentPodAsync();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, sessionCompleted, contentPodReady, contentPodSpawning, contentPodError]);
+  }, [sessionCompleted, contentPodReady, contentPodSpawning, contentPodError]);
 
   const spawnContentPodAsync = async () => {
     if (!projectName || !sessionName) return;
@@ -691,10 +824,12 @@ export default function ProjectSessionDetailPage({
   // Loading state - also check if params are loaded
   if (isLoading || !projectName || !sessionName) {
     return (
-      <div className="container mx-auto p-6">
-        <div className="flex items-center justify-center h-64">
-          <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
-          <span className="ml-2">Loading session...</span>
+      <div className="min-h-screen bg-[#f8fafc]">
+        <div className="container mx-auto p-6">
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+            <span className="ml-2">Loading session...</span>
+          </div>
         </div>
       </div>
     );
@@ -703,258 +838,834 @@ export default function ProjectSessionDetailPage({
   // Error state
   if (error || !session) {
     return (
-      <div className="container mx-auto p-6">
-        <div className="flex items-center mb-6">
-          <Link href={backHref || `/projects/${encodeURIComponent(projectName)}/sessions`}>
-            <Button variant="ghost" size="sm">
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              {backLabel || "Back to Sessions"}
-            </Button>
-          </Link>
+      <div className="min-h-screen bg-[#f8fafc]">
+        <div className="sticky top-0 z-20 bg-white border-b">
+          <div className="container mx-auto px-6 py-4">
+            <Breadcrumbs
+              items={[
+                { label: 'Workspaces', href: '/projects' },
+                { label: projectName, href: `/projects/${projectName}` },
+                { label: 'Sessions', href: `/projects/${projectName}/sessions` },
+                { label: 'Error' },
+              ]}
+              className="mb-4"
+            />
+            <PageHeader
+              title="Session Error"
+              description="Unable to load session"
+            />
+          </div>
+        </div>
+        <div className="container mx-auto p-0">
+          <div className="px-6 pt-6">
+            <Card className="border-red-200 bg-red-50">
+              <CardContent className="pt-6">
+                <p className="text-red-700">Error: {error instanceof Error ? error.message : "Session not found"}</p>
+              </CardContent>
+            </Card>
+          </div>
         </div>
-        <Card className="border-red-200 bg-red-50">
-          <CardContent className="pt-6">
-            <p className="text-red-700">Error: {error instanceof Error ? error.message : "Session not found"}</p>
-          </CardContent>
-        </Card>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto p-6">
-      <Breadcrumbs
-        items={[
-          { label: 'Projects', href: '/projects' },
-          { label: projectName, href: `/projects/${projectName}` },
-          { label: 'Sessions', href: `/projects/${projectName}/sessions` },
-          { label: session.spec.displayName || session.metadata.name },
-        ]}
-        className="mb-4"
-      />
-
-      <div className="space-y-6">
-        {/* Header */}
-        <div className="flex items-start justify-between">
+    <>
+      {rfeWorkflow && (
+        <EditRepositoriesDialog
+          open={editRepoDialogOpen}
+          onOpenChange={setEditRepoDialogOpen}
+          workflow={rfeWorkflow}
+          onSave={async (data) => {
+            await handleUpdateRepositories(data);
+            setEditRepoDialogOpen(false);
+          }}
+          isSaving={updateWorkflowMutation.isPending}
+        />
+      )}
+      <div className="min-h-screen bg-[#f8fafc]">
+        {/* Sticky header */}
+      <div className="sticky top-0 z-20 bg-white border-b">
+        <div className="container mx-auto px-6 py-4">
+          <Breadcrumbs
+            items={[
+              { label: 'Workspaces', href: '/projects' },
+              { label: projectName, href: `/projects/${projectName}` },
+              { label: 'Sessions', href: `/projects/${projectName}/sessions` },
+              { label: session.spec.displayName || session.metadata.name },
+            ]}
+            className="mb-4"
+          />
+          <PageHeader
+            title={
+              <div className="flex items-center gap-2">
+                <span>{session.spec.displayName || session.metadata.name}</span>
+                <Badge className={getPhaseColor(session.status?.phase || "Pending")}>
+                  {session.status?.phase || "Pending"}
+                </Badge>
+              </div>
+            }
+            description={
+              <div>
+                {session.spec.displayName && (
+                  <div className="text-sm text-gray-500">{session.metadata.name}</div>
+                )}
+                <div className="text-xs text-gray-500">
+                  Created {formatDistanceToNow(new Date(session.metadata.creationTimestamp), { addSuffix: true })}
+                </div>
+              </div>
+            }
+            actions={
+              <>
+                {/* Continue button for completed sessions */}
+                {(session.status?.phase === "Completed" || session.status?.phase === "Failed" || session.status?.phase === "Stopped") && (
+                  <Button
+                    onClick={handleContinue}
+                    disabled={continueMutation.isPending}
+                  >
+                    <Play className="w-4 h-4 mr-2" />
+                    {continueMutation.isPending ? "Starting..." : "Continue"}
+                  </Button>
+                )}
+
+                {/* Stop button for active sessions */}
+                {(session.status?.phase === "Pending" || session.status?.phase === "Creating" || session.status?.phase === "Running") && (
+                  <Button
+                    variant="secondary"
+                    onClick={handleStop}
+                    disabled={stopMutation.isPending}
+                  >
+                    <Square className="w-4 h-4 mr-2" />
+                    {stopMutation.isPending ? "Stopping..." : "Stop"}
+                  </Button>
+                )}
+
+                {/* Actions dropdown menu */}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="icon">
+                      <MoreVertical className="w-4 h-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <CloneSessionDialog
+                      session={session}
+                      onSuccess={() => refetchSession()}
+                      trigger={
+                        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                          <Copy className="w-4 h-4 mr-2" />
+                          Clone
+                        </DropdownMenuItem>
+                      }
+                    />
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onClick={handleDelete}
+                      disabled={deleteMutation.isPending}
+                      className="text-red-600"
+                    >
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      {deleteMutation.isPending ? "Deleting..." : "Delete"}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+            }
+          />
+        </div>
+      </div>
+
+      <div className="container mx-auto p-0">
+        <div className="px-6 pt-6">
+        {/* Two Column Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-[40%_1fr] gap-6">
+          {/* Left Column - Accordions */}
           <div>
-            <h1 className="text-2xl font-semibold flex items-center gap-2">
-              <span>{session.spec.displayName || session.metadata.name}</span>
-              <Badge className={getPhaseColor(session.status?.phase || "Pending")}>
-                {session.status?.phase || "Pending"}
-              </Badge>
-            </h1>
-            {session.spec.displayName && (
-              <div className="text-sm text-gray-500">{session.metadata.name}</div>
-            )}
-            <div className="text-xs text-gray-500 mt-1">
-              Created {formatDistanceToNow(new Date(session.metadata.creationTimestamp), { addSuffix: true })}
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            {/* Continue button for completed sessions (converts headless to interactive) */}
-            {(session.status?.phase === "Completed" || session.status?.phase === "Failed" || session.status?.phase === "Stopped") && (
-              <Button
-                onClick={handleContinue}
-                disabled={continueMutation.isPending}
-              >
-                <Play className="w-4 h-4 mr-2" />
-                {continueMutation.isPending ? "Starting..." : "Continue"}
-              </Button>
-            )}
+            <Accordion type="multiple" value={openAccordionItems} onValueChange={setOpenAccordionItems} className="w-full space-y-3">
+              <AccordionItem value="workflows" className="border rounded-lg px-3 bg-white">
+                <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
+                  Workflows
+                </AccordionTrigger>
+                <AccordionContent className="pt-2 pb-3">
+                  <div className="space-y-3">
+                    <div>
+                      <label className="text-sm font-medium mb-1.5 block">Select a Workflow</label>
+                      <Select value={selectedWorkflow} onValueChange={setSelectedWorkflow}>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="None selected" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">None selected</SelectItem>
+                          <SelectItem value="plan-feature">Plan a feature</SelectItem>
+                          <SelectItem value="develop-feature">Develop a feature</SelectItem>
+                          <SelectItem value="bug-fix">Bug fix</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Workflows provide Ambient agents with structured steps to follow toward more complex goals.
+                    </p>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
 
-            {/* Stop button for active sessions */}
-            {(session.status?.phase === "Pending" || session.status?.phase === "Creating" || session.status?.phase === "Running") && (
-              <Button
-                variant="secondary"
-                onClick={handleStop}
-                disabled={stopMutation.isPending}
-              >
-                <Square className="w-4 h-4 mr-2" />
-                {stopMutation.isPending ? "Stopping..." : "Stop"}
-              </Button>
-            )}
+              {/* Only show Spec Repository for plan-feature and develop-feature workflows */}
+              {(selectedWorkflow === "plan-feature" || selectedWorkflow === "develop-feature") && (
+              <AccordionItem value="spec-repository" className="border rounded-lg px-3 bg-white">
+                <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
+                  Spec Repository
+                </AccordionTrigger>
+                <AccordionContent className="pt-2 pb-3">
+                  {!rfeWorkflowId ? (
+                    <div className="text-center py-6">
+                      <FolderTree className="h-10 w-10 mx-auto mb-3 opacity-50 text-muted-foreground" />
+                      <p className="text-sm text-muted-foreground mb-4">
+                        A spec repository is required to store agent config and workflow artifacts.
+                      </p>
+                      <Button onClick={() => setGithubModalOpen(true)}>
+                        Add Spec Repository
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="text-sm text-muted-foreground">Workspace: {workflowWorkspace}</div>
 
-            {/* Actions dropdown menu */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon">
-                  <MoreVertical className="w-4 h-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <CloneSessionDialog
+                      {rfeWorkflow?.branchName && (
+                        <Alert className="border-blue-200 bg-blue-50">
+                          <GitBranch className="h-4 w-4 text-blue-600" />
+                          <AlertTitle className="text-blue-900">Feature Branch</AlertTitle>
+                          <AlertDescription className="text-blue-800">
+                            All modifications will occur on feature branch{' '}
+                            <code className="px-2 py-1 bg-blue-100 text-blue-900 rounded font-semibold">
+                              {rfeWorkflow.branchName}
+                            </code>
+                            {' '}for all supplied repositories.
+                          </AlertDescription>
+                        </Alert>
+                      )}
+
+                      {(rfeWorkflow?.umbrellaRepo || (rfeWorkflow?.supportingRepos || []).length > 0) && (
+                        <div className="space-y-1">
+                          {rfeWorkflow.umbrellaRepo && (
+                            <div className="text-sm space-y-1">
+                              <div>
+                                <span className="font-medium">Spec Repo:</span> {rfeWorkflow.umbrellaRepo.url}
+                              </div>
+                              {rfeWorkflow.umbrellaRepo.branch && (
+                                <div className="ml-4 text-muted-foreground">
+                                  Base branch: <code className="text-xs bg-muted px-1 py-0.5 rounded">{rfeWorkflow.umbrellaRepo.branch}</code>
+                                  {rfeWorkflow.branchName && (
+                                    <span> → Feature branch <code className="text-xs bg-blue-50 text-blue-700 px-1 py-0.5 rounded">{rfeWorkflow.branchName}</code> {isSeeded ? 'set up' : 'will be set up'}</span>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                          {(rfeWorkflow.supportingRepos || []).map(
+                            (r: { url: string; branch?: string }, i: number) => (
+                              <div key={i} className="text-sm space-y-1">
+                                <div>
+                                  <span className="font-medium">Supporting:</span> {r.url}
+                                </div>
+                                {r.branch && (
+                                  <div className="ml-4 text-muted-foreground">
+                                    Base branch: <code className="text-xs bg-muted px-1 py-0.5 rounded">{r.branch}</code>
+                                    {rfeWorkflow.branchName && (
+                                      <span> → Feature branch <code className="text-xs bg-blue-50 text-blue-700 px-1 py-0.5 rounded">{rfeWorkflow.branchName}</code> {isSeeded ? 'set up' : 'will be set up'}</span>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            )
+                          )}
+                        </div>
+                      )}
+
+                      {!isSeeded && !seedingStatus.checking && seedingStatus.hasChecked && rfeWorkflow?.umbrellaRepo && (
+                        <Alert variant="destructive">
+                          <AlertCircle className="h-4 w-4" />
+                          <AlertTitle>Spec Repository Not Seeded</AlertTitle>
+                          <AlertDescription className="mt-2">
+                            <p className="mb-3">
+                              Before you can start working on phases, the spec repository needs to be seeded.
+                              This will:
+                            </p>
+                            <ul className="list-disc list-inside space-y-1 mb-3 text-sm">
+                              <li>Set up the feature branch{rfeWorkflow.branchName && ` (${rfeWorkflow.branchName})`} from the base branch</li>
+                              <li>Add Spec-Kit template files for spec-driven development</li>
+                              <li>Add agent definition files in the .claude directory</li>
+                            </ul>
+                            {seedingError && (
+                              <div className="mb-3 p-2 bg-red-100 border border-red-300 rounded text-sm text-red-800">
+                                <strong>Seeding Failed:</strong> {seedingError}
+                              </div>
+                            )}
+                            <div className="flex gap-2">
+                              <Button
+                                onClick={() => setEditRepoDialogOpen(true)}
+                                disabled={updateWorkflowMutation.isPending}
+                                size="sm"
+                                variant="outline"
+                              >
+                                <Edit className="mr-2 h-4 w-4" />
+                                Edit Repositories
+                              </Button>
+                              <Button onClick={handleSeedWorkflow} disabled={seedWorkflowMutation.isPending || updateWorkflowMutation.isPending} size="sm">
+                                {seedWorkflowMutation.isPending ? (
+                                  <>
+                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                    Seeding Repository...
+                                  </>
+                                ) : (
+                                  <>
+                                    <Sprout className="mr-2 h-4 w-4" />
+                                    {seedingError ? "Retry Seeding" : "Seed Repository"}
+                                  </>
+                                )}
+                              </Button>
+                            </div>
+                          </AlertDescription>
+                        </Alert>
+                      )}
+
+                      {seedingStatus.checking && rfeWorkflow?.umbrellaRepo && (
+                        <div className="flex items-center gap-2 text-gray-600 bg-gray-50 p-3 rounded-lg">
+                          <Loader2 className="h-5 w-5 animate-spin" />
+                          <span className="text-sm">Checking repository seeding status...</span>
+                        </div>
+                      )}
+
+                      {isSeeded && (
+                        <div className="flex items-center justify-between text-green-700 bg-green-50 p-3 rounded-lg">
+                          <div className="flex items-center gap-2">
+                            <CheckCircle2 className="h-5 w-5 text-green-600" />
+                            <span className="text-sm font-medium">Repository seeded and ready</span>
+                          </div>
+                          <Button
+                            onClick={() => setEditRepoDialogOpen(true)}
+                            disabled={updateWorkflowMutation.isPending}
+                            size="sm"
+                            variant="outline"
+                          >
+                            <Edit className="mr-2 h-4 w-4" />
+                            Edit Repositories
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Spec Repository Files - Only show after spec repository is seeded */}
+                  {rfeWorkflowId && isSeeded && (
+                    <div className="mt-4 pt-4 border-t">
+                      <div className="border rounded-md overflow-hidden">
+                        <div className="p-3 border-b flex items-center justify-between bg-gray-50">
+                          <div className="flex items-center gap-2">
+                            <FolderTree className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm font-medium">Files</span>
+                            {!artifactsLoading && (
+                              <span className="text-xs text-muted-foreground">
+                                ({workflowArtifacts.length} {workflowArtifacts.length === 1 ? 'file' : 'files'})
+                              </span>
+                            )}
+                          </div>
+                          <Button 
+                            size="sm" 
+                            variant="outline" 
+                            onClick={handleRefreshArtifacts} 
+                            disabled={artifactsLoading}
+                            className="h-8"
+                          >
+                            <RefreshCw className={`h-4 w-4 ${artifactsLoading ? 'animate-spin' : ''}`} />
+                          </Button>
+                        </div>
+                        <div className="p-3">
+                          {artifactsLoading ? (
+                            <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                              <Loader2 className="animate-spin h-4 w-4 mr-2" /> Loading files...
+                            </div>
+                          ) : workflowArtifacts.length === 0 ? (
+                            <div className="flex flex-col items-center justify-center h-32 text-center text-sm text-muted-foreground">
+                              <FolderTree className="h-10 w-10 mb-2 opacity-50" />
+                              <p className="font-medium">No files yet</p>
+                              <p className="text-xs mt-1">Files will appear here as agents create artifacts</p>
+                            </div>
+                          ) : (
+                            <div className="space-y-1">
+                              {workflowArtifacts.map((artifact) => {
+                                const isDirectory = artifact.type === 'tree';
+                                const Icon = isDirectory ? Folder : FileText;
+                                const iconColor = isDirectory ? 'text-yellow-600' : 'text-blue-500';
+                                
+                                return (
+                                  <div
+                                    key={artifact.path}
+                                    className="flex items-center gap-2 p-2 rounded hover:bg-gray-50 text-sm"
+                                  >
+                                    <Icon className={`h-4 w-4 ${iconColor} flex-shrink-0`} />
+                                    <div className="flex-1 min-w-0">
+                                      <div className="font-medium truncate">{artifact.name}</div>
+                                      {artifact.path !== artifact.name && (
+                                        <div className="text-xs text-muted-foreground truncate">{artifact.path}</div>
+                                      )}
+                                    </div>
+                                    {!isDirectory && artifact.size > 0 && (
+                                      <div className="text-xs text-muted-foreground flex-shrink-0">
+                                        {(artifact.size / 1024).toFixed(1)} KB
+                                      </div>
+                                    )}
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+              )}
+
+              <AccordionItem value="agents" className="border rounded-lg px-3 bg-white">
+                <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
+                  Agents
+                </AccordionTrigger>
+                <AccordionContent className="pt-2 pb-3">
+                  {loadingAgents ? (
+                    <div className="flex items-center justify-center py-6">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : !rfeWorkflowId || repoAgents.length === 0 ? (
+                    <div className="text-center py-6 text-muted-foreground">
+                      <Bot className="h-10 w-10 mx-auto mb-2 opacity-50" />
+                      <p className="text-sm">No agents found in repository .claude/agents directory</p>
+                      <p className="text-xs mt-1">Seed the repository to add agent definitions</p>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="grid grid-cols-1 gap-2">
+                        {repoAgents.map((agent) => {
+                          const isSelected = selectedAgents.includes(agent.persona);
+                          return (
+                            <div
+                              key={agent.persona}
+                              className={`p-2 rounded border transition-colors ${
+                                isSelected ? 'bg-primary/5 border-primary' : 'bg-background border-border hover:border-primary/50'
+                              }`}
+                            >
+                              <label className="flex items-start gap-2 cursor-pointer">
+                                <Checkbox
+                                  checked={isSelected}
+                                  onCheckedChange={(checked) => {
+                                    setSelectedAgents(
+                                      checked
+                                        ? [...selectedAgents, agent.persona]
+                                        : selectedAgents.filter(p => p !== agent.persona)
+                                    );
+                                  }}
+                                  className="mt-0.5"
+                                />
+                                <div className="flex-1 min-w-0">
+                                  <div className="font-medium text-sm">{agent.name}</div>
+                                  <div className="text-xs text-muted-foreground">{agent.role}</div>
+                                </div>
+                              </label>
+                            </div>
+                          );
+                        })}
+                      </div>
+                      {selectedAgents.length > 0 && (
+                        <div className="mt-3 pt-3 border-t">
+                          <div className="text-sm font-medium mb-1.5">Selected Agents ({selectedAgents.length})</div>
+                          <div className="flex flex-wrap gap-1.5">
+                            {selectedAgents.map(persona => {
+                              const agent = repoAgents.find(a => a.persona === persona);
+                              return agent ? (
+                                <Badge key={persona} variant="secondary" className="text-xs">
+                                  {agent.name}
+                                </Badge>
+                              ) : null;
+                            })}
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="context" className="border rounded-lg px-3 bg-white">
+                <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
+                  Context
+                </AccordionTrigger>
+                <AccordionContent className="pt-2 pb-3">
+                  {!rfeWorkflowId || !rfeWorkflow?.supportingRepos || rfeWorkflow.supportingRepos.length === 0 ? (
+                    <div className="text-center py-6">
+                      <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-3">
+                        <FolderTree className="h-8 w-8 text-gray-400" />
+                      </div>
+                      <p className="text-sm font-medium text-gray-900 mb-1">No associated repositories configured</p>
+                      <p className="text-xs text-muted-foreground mb-4">Add context from external sources</p>
+                      <Button onClick={() => setContextModalOpen(true)} disabled={!rfeWorkflowId}>
+                        Add Repository
+                      </Button>
+                      {!rfeWorkflowId && (
+                        <p className="text-xs text-muted-foreground mt-2">Configure a spec repository first</p>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="space-y-2">
+                        {rfeWorkflow.supportingRepos.map((repo, index) => (
+                          <div key={index} className="flex items-start gap-2 p-2 rounded border bg-gray-50 hover:bg-gray-100 transition-colors">
+                            <GitBranch className="h-4 w-4 text-gray-600 mt-0.5 flex-shrink-0" />
+                            <div className="flex-1 min-w-0">
+                              <div className="text-sm font-medium truncate">{repo.url}</div>
+                              {repo.branch && (
+                                <div className="text-xs text-muted-foreground">
+                                  Branch: <code className="text-xs bg-white px-1 py-0.5 rounded">{repo.branch}</code>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                      <Button onClick={() => setContextModalOpen(true)} variant="outline" className="w-full" size="sm">
+                        Add Another Repository
+                      </Button>
+                    </div>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="artifacts" className="border rounded-lg px-3 bg-white">
+                <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
+                  Artifacts
+                </AccordionTrigger>
+                <AccordionContent className="pt-2 pb-3">
+                  <ResultsTab result={null} meta={null} />
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="session-details" className="border rounded-lg px-3 bg-white">
+                <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
+                  Session Details
+                </AccordionTrigger>
+                <AccordionContent className="pt-2 pb-3">
+                  <div className="space-y-3 text-sm">
+                    <div className="flex flex-col gap-2">
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Status:</span>
+                        <span className={`text-gray-900 font-semibold ${getPhaseColor(session.status?.phase || "Pending")}`}>
+                          {session.status?.phase || "Pending"}
+                        </span>
+                      </div>
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Model:</span>
+                        <span className="text-gray-900">{session.spec.llmSettings.model}</span>
+                      </div>
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Temperature:</span>
+                        <span className="text-gray-900">{session.spec.llmSettings.temperature}</span>
+                      </div>
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Mode:</span>
+                        <span className="text-gray-900">{session.spec?.interactive ? "Interactive" : "Headless"}</span>
+                      </div>
+                      {session.status?.startTime && (
+                        <div className="flex items-baseline gap-2">
+                          <span className="font-semibold text-gray-700">Started:</span>
+                          <span className="text-gray-900">{format(new Date(session.status.startTime), "PPp")}</span>
+                        </div>
+                      )}
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Duration:</span>
+                        <span className="text-gray-900">{typeof durationMs === "number" ? `${durationMs}ms` : "-"}</span>
+                      </div>
+                      {k8sResources?.pvcName && (
+                        <div className="flex items-baseline gap-2">
+                          <span className="font-semibold text-gray-700">PVC:</span>
+                          <span className="text-gray-900 font-mono text-xs">{k8sResources.pvcName}</span>
+                        </div>
+                      )}
+                      {k8sResources?.pvcSize && (
+                        <div className="flex items-baseline gap-2">
+                          <span className="font-semibold text-gray-700">PVC Size:</span>
+                          <span className="text-gray-900">{k8sResources.pvcSize}</span>
+                        </div>
+                      )}
+                      {session.status?.jobName && (
+                        <div className="flex items-baseline gap-2">
+                          <span className="font-semibold text-gray-700">K8s Job:</span>
+                          <span className="text-gray-900 font-mono text-xs">{session.status.jobName}</span>
+                        </div>
+                      )}
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Messages:</span>
+                        <span className="text-gray-900">{messages.length}</span>
+                      </div>
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-semibold text-gray-700">Session prompt:</span>
+                        <button
+                          onClick={() => setPromptExpanded(!promptExpanded)}
+                          className="text-blue-600 hover:underline"
+                        >
+                          {promptExpanded ? "hide" : "view"}
+                        </button>
+                      </div>
+                      {promptExpanded && session.spec.prompt && (
+                        <div className="mt-2 p-3 bg-gray-50 rounded border border-gray-200">
+                          <p className="whitespace-pre-wrap text-sm text-gray-800">{session.spec.prompt}</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+
+          {/* Right Column - Messages (Always Visible) */}
+          <div>
+            <Card>
+              <CardContent className="p-3">
+                <MessagesTab
                   session={session}
-                  onSuccess={() => refetchSession()}
-                  trigger={
-                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                      <Copy className="w-4 h-4 mr-2" />
-                      Clone
-                    </DropdownMenuItem>
-                  }
+                  streamMessages={streamMessages}
+                  chatInput={chatInput}
+                  setChatInput={setChatInput}
+                  onSendChat={() => Promise.resolve(sendChat())}
+                  onInterrupt={() => Promise.resolve(handleInterrupt())}
+                  onEndSession={() => Promise.resolve(handleEndSession())}
+                  onGoToResults={() => {}}
+                  onContinue={handleContinue}
                 />
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={handleDelete}
-                  disabled={deleteMutation.isPending}
-                  className="text-red-600"
-                >
-                  <Trash2 className="w-4 h-4 mr-2" />
-                  {deleteMutation.isPending ? "Deleting..." : "Delete"}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </CardContent>
+            </Card>
           </div>
         </div>
+        </div>
+      </div>
+    </div>
+
+    {/* Add Spec Repository Modal */}
+    <Dialog open={githubModalOpen} onOpenChange={setGithubModalOpen}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Add spec repository</DialogTitle>
+          <DialogDescription>
+            Set the spec repo and optional supporting repos. Base branch is the branch from which the feature branch will be set up. All modifications will be made to the feature branch.
+          </DialogDescription>
+        </DialogHeader>
+        
+        {!githubStatus?.installed && !secretsValues?.some(secret => secret.key === 'GIT_TOKEN' && secret.value) && (
+          <div className="mb-4">
+            <GitHubConnectionCard appSlug="ambient-code-vteam" showManageButton={false} />
+          </div>
+        )}
 
-        {/* Stats */}
-        <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
-          <Card className="py-4">
-            <CardContent>
-              <div className="text-xs text-muted-foreground">Duration</div>
-              <div className="text-lg font-semibold">{typeof durationMs === "number" ? `${durationMs} ms` : "-"}</div>
-            </CardContent>
-          </Card>
-          <Card className="py-4">
-            <CardContent>
-              <div className="text-xs text-muted-foreground">Messages</div>
-              <div className="text-lg font-semibold">{messages.length}</div>
-            </CardContent>
-          </Card>
-          <Card className="py-4">
-            <CardContent>
-              <div className="text-xs text-muted-foreground">Agents</div>
-              <div className="text-lg font-semibold">{subagentStats.uniqueCount > 0 ? subagentStats.uniqueCount : "-"}</div>
-            </CardContent>
-          </Card>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="spec-repo-url">Spec Repo URL</Label>
+            <Input
+              id="spec-repo-url"
+              placeholder="https://github.com/org/repo.git"
+              value={specRepoUrl}
+              onChange={(e) => setSpecRepoUrl(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              The spec repository contains your feature specifications, planning documents, and agent configurations for this RFE workspace
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="base-branch">Base Branch</Label>
+            <Input
+              id="base-branch"
+              placeholder="main"
+              value={baseBranch}
+              onChange={(e) => setBaseBranch(e.target.value)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Supporting Repositories (optional)</Label>
+            <Button variant="outline" className="w-full">
+              Add supporting repo
+            </Button>
+          </div>
         </div>
 
-        {/* Tabs */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="messages">Messages</TabsTrigger>
-            <TabsTrigger value="workspace">Workspace</TabsTrigger>
-            <TabsTrigger value="results">Results</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-6">
-            <OverviewTab
-              session={session}
-              promptExpanded={promptExpanded}
-              setPromptExpanded={setPromptExpanded}
-              latestLiveMessage={latestLiveMessage as SessionMessage | null}
-              diffTotals={diffTotals}
-              k8sResources={k8sResources}
-              onPush={async (idx) => {
-                  const repo = session.spec.repos?.[idx];
-                  if (!repo) return;
-                
-                setBusyRepo((b) => ({ ...b, [idx]: 'push' }));
-                  const folder = deriveRepoFolderFromUrl(repo.input.url);
-                const repoPath = `/sessions/${sessionName}/workspace/${folder}`;
-                
-                pushToGitHubMutation.mutate(
-                  { projectName, sessionName, repoIndex: idx, repoPath },
-                  {
-                    onSuccess: () => {
-                      refetchDiffs();
-                      successToast('Changes pushed to GitHub');
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setGithubModalOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={async () => {
+              if (!specRepoUrl.trim() || !projectName || !sessionName) return;
+              
+              // Generate a unique branch name based on session name
+              const timestamp = Date.now();
+              const branchName = `feature/${sessionName}-${timestamp}`;
+              
+              try {
+                // Create the workflow
+                const result = await createWorkflowMutation.mutateAsync({
+                  projectName,
+                  data: {
+                    title: `Workflow for ${sessionName}`,
+                    description: `Auto-generated workflow for session ${sessionName}`,
+                    branchName,
+                    umbrellaRepo: {
+                      url: specRepoUrl.trim(),
+                      branch: baseBranch.trim() || 'main',
                     },
-                    onError: (err) => errorToast(err instanceof Error ? err.message : 'Failed to push changes'),
-                    onSettled: () => setBusyRepo((b) => ({ ...b, [idx]: null })),
-                  }
-                );
-              }}
-              onAbandon={async (idx) => {
-                  const repo = session.spec.repos?.[idx];
-                  if (!repo) return;
+                    supportingRepos: [],
+                  },
+                });
                 
-                setBusyRepo((b) => ({ ...b, [idx]: 'abandon' }));
-                  const folder = deriveRepoFolderFromUrl(repo.input.url);
-                const repoPath = `/sessions/${sessionName}/workspace/${folder}`;
+                // Link the session to the workflow
+                const { linkSessionToWorkflow } = await import('@/services/api/rfe');
+                await linkSessionToWorkflow(projectName, result.id, sessionName);
                 
-                abandonChangesMutation.mutate(
-                  { projectName, sessionName, repoIndex: idx, repoPath },
-                  {
-                    onSuccess: () => {
-                      refetchDiffs();
-                      successToast('Changes abandoned');
-                    },
-                    onError: (err) => errorToast(err instanceof Error ? err.message : 'Failed to abandon changes'),
-                    onSettled: () => setBusyRepo((b) => ({ ...b, [idx]: null })),
-                  }
-                );
-              }}
-              busyRepo={busyRepo}
-              buildGithubCompareUrl={buildGithubCompareUrl}
-              onRefreshDiff={handleRefreshDiff}
+                successToast('Spec repository configured successfully');
+                setGithubModalOpen(false);
+                
+                // Refresh the session to get the updated workflow ID
+                await refetchSession();
+                await refetchWorkflow();
+              } catch (err) {
+                errorToast(err instanceof Error ? err.message : 'Failed to configure repository');
+              }
+            }}
+            disabled={!specRepoUrl.trim() || createWorkflowMutation.isPending}
+          >
+            {createWorkflowMutation.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              'Save Configuration'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    {/* Add Context Modal */}
+    <Dialog open={contextModalOpen} onOpenChange={setContextModalOpen}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Add Context</DialogTitle>
+          <DialogDescription>
+            Add external context sources to enhance agent understanding
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="context-url">Repository URL</Label>
+            <Input
+              id="context-url"
+              placeholder="https://github.com/org/repo"
+              value={contextUrl}
+              onChange={(e) => setContextUrl(e.target.value)}
             />
-          </TabsContent>
-
-          <TabsContent value="messages">
-            <MessagesTab
-              session={session}
-              streamMessages={streamMessages}
-              chatInput={chatInput}
-              setChatInput={setChatInput}
-              onSendChat={() => Promise.resolve(sendChat())}
-              onInterrupt={() => Promise.resolve(handleInterrupt())}
-              onEndSession={() => Promise.resolve(handleEndSession())}
-              onGoToResults={() => setActiveTab('results')}
-              onContinue={handleContinue}
+            <p className="text-xs text-muted-foreground">
+              Currently supports GitHub repositories for code context
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="context-branch">Branch (optional)</Label>
+            <Input
+              id="context-branch"
+              placeholder="main"
+              value={contextBranch}
+              onChange={(e) => setContextBranch(e.target.value)}
             />
-          </TabsContent>
+            <p className="text-xs text-muted-foreground">
+              Leave empty to use the default branch
+            </p>
+          </div>
 
-          <TabsContent value="workspace">
-            {sessionCompleted && !contentPodReady ? (
-              <Card className="p-8">
-                <div className="text-center space-y-4">
-                  {contentPodSpawning ? (
-                    <>
-                      <div className="flex items-center justify-center">
-                        <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
-                      </div>
-                      <p className="text-sm font-medium">Starting workspace viewer...</p>
-                      <p className="text-xs text-gray-500">This may take up to 30 seconds</p>
-                    </>
-                  ) : (
-                    <>
-                      <p className="text-sm text-gray-600">
-                        Session has completed. To view and edit your workspace files, please start a workspace viewer.
-                      </p>
-                      <Button onClick={spawnContentPodAsync}>
-                        Start Workspace Viewer
-                      </Button>
-                    </>
-                  )}
-                </div>
-              </Card>
+          <Alert className="border-blue-200 bg-blue-50">
+            <Info className="h-4 w-4 text-blue-600" />
+            <AlertDescription className="text-blue-800 text-sm">
+              Google Drive and Jira support coming soon
+            </AlertDescription>
+          </Alert>
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setContextUrl("");
+              setContextBranch("main");
+              setContextModalOpen(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={async () => {
+              if (!contextUrl.trim() || !rfeWorkflowId) return;
+              
+              try {
+                // Get existing supporting repos
+                const existingSupportingRepos = rfeWorkflow?.supportingRepos || [];
+                
+                // Add new repository
+                const newRepo = {
+                  url: contextUrl.trim(),
+                  ...(contextBranch.trim() && { branch: contextBranch.trim() })
+                };
+                
+                // Update workflow with new supporting repos
+                await updateWorkflowMutation.mutateAsync({
+                  projectName,
+                  workflowId: rfeWorkflowId,
+                  data: {
+                    supportingRepos: [...existingSupportingRepos, newRepo],
+                  },
+                });
+                
+                successToast('Context repository added successfully');
+                setContextUrl("");
+                setContextBranch("main");
+                setContextModalOpen(false);
+                
+                // Refresh workflow data
+                await refetchWorkflow();
+              } catch (err) {
+                errorToast(err instanceof Error ? err.message : 'Failed to add context repository');
+              }
+            }}
+            disabled={!contextUrl.trim() || !rfeWorkflowId || updateWorkflowMutation.isPending}
+          >
+            {updateWorkflowMutation.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Adding...
+              </>
             ) : (
-              <WorkspaceTab
-                session={session}
-                wsLoading={wsLoading}
-                wsUnavailable={wsUnavailable}
-                wsTree={wsTree}
-                wsSelectedPath={wsSelectedPath}
-                wsFileContent={wsFileContent}
-                onRefresh={handleRefreshWorkspace}
-                onSelect={onWsSelect}
-                onToggle={onWsToggle}
-                onSave={writeWsFile}
-                setWsFileContent={setWsFileContent}
-                k8sResources={k8sResources}
-                contentPodError={contentPodError}
-                onRetrySpawn={spawnContentPodAsync}
-              />
+              'Add'
             )}
-          </TabsContent>
-
-          <TabsContent value="results">
-            <ResultsTab result={null} meta={null} />
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+    </>
   );
 }
 
diff --git a/components/frontend/src/app/projects/[name]/sessions/error.tsx b/components/frontend/src/app/projects/[name]/sessions/error.tsx
deleted file mode 100644
index 29ce50d08..000000000
--- a/components/frontend/src/app/projects/[name]/sessions/error.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { AlertCircle } from 'lucide-react';
-
-export default function SessionsError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    console.error('Sessions page error:', error);
-  }, [error]);
-
-  return (
-    <div className="container mx-auto p-6">
-      <Card className="max-w-lg mx-auto mt-12">
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <AlertCircle className="h-5 w-5 text-destructive" />
-            <CardTitle>Failed to load sessions</CardTitle>
-          </div>
-          <CardDescription>
-            {error.message || 'An unexpected error occurred while loading sessions.'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={reset}>Try again</Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/components/frontend/src/app/projects/[name]/sessions/loading.tsx b/components/frontend/src/app/projects/[name]/sessions/loading.tsx
deleted file mode 100644
index edec2cda6..000000000
--- a/components/frontend/src/app/projects/[name]/sessions/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { TableSkeleton } from '@/components/skeletons';
-
-export default function SessionsLoading() {
-  return <TableSkeleton rows={10} columns={5} />;
-}
diff --git a/components/frontend/src/app/projects/[name]/sessions/new/model-configuration.tsx b/components/frontend/src/app/projects/[name]/sessions/new/model-configuration.tsx
index b5b7fe945..640693aa9 100644
--- a/components/frontend/src/app/projects/[name]/sessions/new/model-configuration.tsx
+++ b/components/frontend/src/app/projects/[name]/sessions/new/model-configuration.tsx
@@ -4,10 +4,12 @@ import { Control } from "react-hook-form";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const models = [
-  { value: "claude-opus-4-1", label: "Claude Opus 4.1" },
   { value: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+  { value: "claude-opus-4-1", label: "Claude Opus 4.1" },
   { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
 ];
 
@@ -19,100 +21,157 @@ type ModelConfigurationProps = {
 export function ModelConfiguration({ control }: ModelConfigurationProps) {
   return (
     <div className="space-y-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={control}
-          name="model"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Model</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a model" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {models.map((m) => (
-                    <SelectItem key={m.value} value={m.value}>
-                      {m.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={control}
-          name="temperature"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Temperature</FormLabel>
+      {/* Model Selection */}
+      <FormField
+        control={control}
+        name="model"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Model</FormLabel>
+            <Select onValueChange={field.onChange} defaultValue={field.value}>
               <FormControl>
-                <Input
-                  type="number"
-                  step="0.1"
-                  min="0"
-                  max="2"
-                  {...field}
-                  onChange={(e) => field.onChange(parseFloat(e.target.value))}
-                />
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a model" />
+                </SelectTrigger>
               </FormControl>
-              <FormDescription>Controls randomness (0.0 - 2.0)</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
+              <SelectContent>
+                {models.map((m) => (
+                  <SelectItem key={m.value} value={m.value}>
+                    {m.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={control}
-          name="maxTokens"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Max Output Tokens</FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  step="100"
-                  min="100"
-                  max="8000"
-                  {...field}
-                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+      {/* Advanced Settings Accordion */}
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="advanced-settings" className="border rounded-md">
+          <AccordionTrigger className="px-4 hover:no-underline">
+            <span className="text-sm font-medium">Change Default Model Settings</span>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-4 pt-2">
+              {/* Temperature and Timeout */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormField
+                  control={control}
+                  name="temperature"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Temperature</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          step="0.1"
+                          min="0"
+                          max="2"
+                          {...field}
+                          onChange={(e) => field.onChange(parseFloat(e.target.value))}
+                        />
+                      </FormControl>
+                      <FormDescription>Controls randomness (0.0 - 2.0)</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
-              </FormControl>
-              <FormDescription>Maximum response length (100-8000)</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
 
-        <FormField
-          control={control}
-          name="timeout"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Timeout (seconds)</FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  step="60"
-                  min="60"
-                  max="1800"
-                  {...field}
-                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+                <FormField
+                  control={control}
+                  name="timeout"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Timeout (seconds)</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          step="60"
+                          min="60"
+                          max="1800"
+                          {...field}
+                          onChange={(e) => field.onChange(parseInt(e.target.value))}
+                        />
+                      </FormControl>
+                      <FormDescription>Session timeout (60-1800 seconds)</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
-              </FormControl>
-              <FormDescription>Session timeout (60-1800 seconds)</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
+              </div>
+
+              {/* Max Output Tokens */}
+              <FormField
+                control={control}
+                name="maxTokens"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Max Output Tokens</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        step="100"
+                        min="100"
+                        max="8000"
+                        {...field}
+                        onChange={(e) => field.onChange(parseInt(e.target.value))}
+                      />
+                    </FormControl>
+                    <FormDescription>Maximum response length (100-8000)</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Bring Your Own Key Section */}
+              <div className="pt-4 border-t">
+                <FormField
+                  control={control}
+                  name="anthropicApiKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Bring Your Own Key</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="sk-ant-api03-..."
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Optional: Use your own Anthropic API key for this session
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={control}
+                  name="saveApiKeyForFuture"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 mt-3">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel className="text-sm font-normal">
+                          Save key for future sessions (encrypted)
+                        </FormLabel>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 }
diff --git a/components/frontend/src/app/projects/[name]/sessions/new/page.tsx b/components/frontend/src/app/projects/[name]/sessions/new/page.tsx
index d84d5c4da..5ff0ea215 100644
--- a/components/frontend/src/app/projects/[name]/sessions/new/page.tsx
+++ b/components/frontend/src/app/projects/[name]/sessions/new/page.tsx
@@ -43,6 +43,9 @@ const formSchema = z
     autoPushOnComplete: z.boolean().default(false),
     // storage paths are not user-configurable anymore
     agentPersona: z.string().optional(),
+    // BYOK fields
+    anthropicApiKey: z.string().optional().default(""),
+    saveApiKeyForFuture: z.boolean().default(false),
   })
   .superRefine((data, ctx) => {
     const isInteractive = Boolean(data.interactive);
@@ -87,7 +90,7 @@ export default function NewProjectSessionPage({ params }: { params: Promise<{ na
     resolver: zodResolver(formSchema),
     defaultValues: {
       prompt: "",
-      model: "claude-3-7-sonnet-latest",
+      model: "claude-sonnet-4-5",
       temperature: 0.7,
       maxTokens: 4000,
       timeout: 300,
@@ -96,6 +99,8 @@ export default function NewProjectSessionPage({ params }: { params: Promise<{ na
       agentPersona: "",
       repos: [],
       mainRepoIndex: 0,
+      anthropicApiKey: "",
+      saveApiKeyForFuture: false,
     },
   });
 
@@ -193,7 +198,7 @@ export default function NewProjectSessionPage({ params }: { params: Promise<{ na
     <div className="container mx-auto p-6">
       <Breadcrumbs
         items={[
-          { label: 'Projects', href: '/projects' },
+          { label: 'Workspaces', href: '/projects' },
           { label: projectName, href: `/projects/${projectName}` },
           { label: 'Sessions', href: `/projects/${projectName}/sessions` },
           { label: 'New Session' },
diff --git a/components/frontend/src/app/projects/[name]/sessions/page.tsx b/components/frontend/src/app/projects/[name]/sessions/page.tsx
index 5cbec04bf..e0cfa4892 100644
--- a/components/frontend/src/app/projects/[name]/sessions/page.tsx
+++ b/components/frontend/src/app/projects/[name]/sessions/page.tsx
@@ -1,320 +1,19 @@
 'use client';
 
-import Link from 'next/link';
-import { useParams } from 'next/navigation';
-import { formatDistanceToNow } from 'date-fns';
-import { Plus, RefreshCw, MoreVertical, Square, Trash2, ArrowRight, Brain } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { ProjectSubpageHeader } from '@/components/project-subpage-header';
-import { EmptyState } from '@/components/empty-state';
-import { ErrorMessage } from '@/components/error-message';
-import { SessionPhaseBadge } from '@/components/status-badge';
-import { Breadcrumbs } from '@/components/breadcrumbs';
-
-import { useSessions, useStopSession, useDeleteSession, useContinueSession } from '@/services/queries';
-import { successToast, errorToast } from '@/hooks/use-toast';
+import { useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
 
 export default function ProjectSessionsListPage() {
   const params = useParams();
+  const router = useRouter();
   const projectName = params?.name as string;
 
-  // React Query hooks replace all manual state management
-  const { data: sessions = [], isLoading, error, refetch } = useSessions(projectName);
-  const stopSessionMutation = useStopSession();
-  const deleteSessionMutation = useDeleteSession();
-  const continueSessionMutation = useContinueSession();
-
-  const handleStop = async (sessionName: string) => {
-    stopSessionMutation.mutate(
-      { projectName, sessionName },
-      {
-        onSuccess: () => {
-          successToast(`Session "${sessionName}" stopped successfully`);
-        },
-        onError: (error) => {
-          errorToast(error instanceof Error ? error.message : 'Failed to stop session');
-        },
-      }
-    );
-  };
-
-
-  const handleDelete = async (sessionName: string) => {
-    if (!confirm(`Delete agentic session "${sessionName}"? This action cannot be undone.`)) return;
-    deleteSessionMutation.mutate(
-      { projectName, sessionName },
-      {
-        onSuccess: () => {
-          successToast(`Session "${sessionName}" deleted successfully`);
-        },
-        onError: (error) => {
-          errorToast(error instanceof Error ? error.message : 'Failed to delete session');
-        },
-      }
-    );
-  };
-
-  const handleContinue = async (sessionName: string) => {
-    continueSessionMutation.mutate(
-      { projectName, parentSessionName: sessionName },
-      {
-        onSuccess: () => {
-          successToast(`Session "${sessionName}" restarted successfully`);
-        },
-        onError: (error) => {
-          errorToast(error instanceof Error ? error.message : 'Failed to restart session');
-        },
-      }
-    );
-  };
-
-  // Loading state
-  if (!projectName || (isLoading && sessions.length === 0)) {
-    return (
-      <div className="container mx-auto p-6">
-        <div className="flex items-center justify-center h-64">
-          <RefreshCw className="animate-spin h-8 w-8" />
-          <span className="ml-2">Loading sessions...</span>
-        </div>
-      </div>
-    );
-  }
-
-  // Sort sessions by creation time (newest first)
-  const sortedSessions = [...sessions].sort((a, b) => {
-    const aTime = a?.metadata?.creationTimestamp ? new Date(a.metadata.creationTimestamp).getTime() : 0;
-    const bTime = b?.metadata?.creationTimestamp ? new Date(b.metadata.creationTimestamp).getTime() : 0;
-    return bTime - aTime;
-  });
-
-  return (
-    <div className="space-y-4">
-      <Breadcrumbs
-        items={[
-          { label: 'Projects', href: '/projects' },
-          { label: projectName, href: `/projects/${projectName}` },
-          { label: 'Sessions' },
-        ]}
-        className="mb-4"
-      />
-      <ProjectSubpageHeader
-        title={<>Agentic Sessions</>}
-        description={<>Sessions scoped to this project</>}
-        actions={
-          <>
-            <Link href={`/projects/${encodeURIComponent(projectName)}/sessions/new`}>
-              <Button>
-                <Plus className="w-4 h-4 mr-2" />
-                New Session
-              </Button>
-            </Link>
-            <Button variant="outline" onClick={() => refetch()} disabled={isLoading}>
-              <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-              Refresh
-            </Button>
-          </>
-        }
-      />
-
-      {/* Error state */}
-      {error && <ErrorMessage error={error} onRetry={() => refetch()} />}
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Agentic Sessions ({sessions?.length || 0})</CardTitle>
-          <CardDescription>Sessions scoped to this project</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {sessions.length === 0 ? (
-            <EmptyState
-              icon={Brain}
-              title="No sessions found"
-              description="Create your first agentic session"
-              action={{
-                label: 'Create Session',
-                onClick: () => (window.location.href = `/projects/${encodeURIComponent(projectName)}/sessions/new`),
-              }}
-            />
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="min-w-[180px]">Name</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Mode</TableHead>
-                    <TableHead className="hidden md:table-cell">Model</TableHead>
-                    <TableHead className="hidden lg:table-cell">Created</TableHead>
-                    <TableHead className="hidden xl:table-cell">Cost</TableHead>
-                    <TableHead className="w-[50px]">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {sortedSessions.map((session) => {
-                    const sessionName = session.metadata.name;
-                    const phase = session.status?.phase || 'Pending';
-                    const isActionPending =
-                      (stopSessionMutation.isPending && stopSessionMutation.variables?.sessionName === sessionName) ||
-                      (deleteSessionMutation.isPending && deleteSessionMutation.variables?.sessionName === sessionName);
-
-                    return (
-                      <TableRow key={session.metadata?.uid || session.metadata?.name}>
-                        <TableCell className="font-medium min-w-[180px]">
-                          <Link
-                            href={`/projects/${projectName}/sessions/${session.metadata.name}`}
-                            className="text-blue-600 hover:underline hover:text-blue-800 transition-colors block"
-                          >
-                            <div>
-                              <div className="font-medium">{session.spec.displayName || session.metadata.name}</div>
-                              {session.spec.displayName && (
-                                <div className="text-xs text-gray-500 font-normal">{session.metadata.name}</div>
-                              )}
-                            </div>
-                          </Link>
-                        </TableCell>
-                        <TableCell>
-                          <SessionPhaseBadge phase={phase} />
-                        </TableCell>
-                        <TableCell>
-                          <span className="text-xs px-2 py-1 rounded border bg-gray-50">
-                            {session.spec?.interactive ? 'Interactive' : 'Headless'}
-                          </span>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          <span className="text-sm text-gray-600 truncate max-w-[120px] block">
-                            {session.spec.llmSettings.model}
-                          </span>
-                        </TableCell>
-                        <TableCell className="hidden lg:table-cell">
-                          {session.metadata?.creationTimestamp &&
-                            formatDistanceToNow(new Date(session.metadata.creationTimestamp), { addSuffix: true })}
-                        </TableCell>
-                        <TableCell className="hidden xl:table-cell">
-                          {session.status?.total_cost_usd ? (
-                            <span className="text-sm font-mono">${session.status.total_cost_usd.toFixed(4)}</span>
-                          ) : (
-                            <span className="text-sm text-gray-400">—</span>
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          {isActionPending ? (
-                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" disabled>
-                              <RefreshCw className="h-4 w-4 animate-spin" />
-                            </Button>
-                          ) : (
-                            <SessionActions
-                              sessionName={sessionName}
-                              phase={phase}
-                              onStop={handleStop}
-                              onContinue={handleContinue}
-                              onDelete={handleDelete}
-                            />
-                          )}
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-// Session actions component extracted for clarity
-type SessionActionsProps = {
-  sessionName: string;
-  phase: string;
-  onStop: (sessionName: string) => void;
-  onContinue: (sessionName: string) => void;
-  onDelete: (sessionName: string) => void;
-};
-
-function SessionActions({ sessionName, phase, onStop, onContinue, onDelete }: SessionActionsProps) {
-  type RowAction = {
-    key: string;
-    label: string;
-    onClick: () => void;
-    icon: React.ReactNode;
-    className?: string;
-  };
-
-  const actions: RowAction[] = [];
-
-  if (phase === 'Pending' || phase === 'Creating' || phase === 'Running') {
-    actions.push({
-      key: 'stop',
-      label: 'Stop',
-      onClick: () => onStop(sessionName),
-      icon: <Square className="h-4 w-4" />,
-      className: 'text-orange-600',
-    });
-  }
-
-  // Allow continue for all completed sessions (converts headless to interactive)
-  if (phase === 'Completed' || phase === 'Failed' || phase === 'Stopped' || phase === 'Error') {
-    actions.push({
-      key: 'continue',
-      label: 'Continue',
-      onClick: () => onContinue(sessionName),
-      icon: <ArrowRight className="h-4 w-4" />,
-      className: 'text-green-600',
-    });
-  }
-
-  // Delete is always available except when Creating
-  if (phase !== 'Creating') {
-    actions.push({
-      key: 'delete',
-      label: 'Delete',
-      onClick: () => onDelete(sessionName),
-      icon: <Trash2 className="h-4 w-4" />,
-      className: 'text-red-600',
-    });
-  }
-
-  // Single action: show as button
-  if (actions.length === 1) {
-    const action = actions[0];
-    return (
-      <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={action.onClick}>
-        {action.icon}
-      </Button>
-    );
-  }
-
-  // No actions: show disabled button
-  if (actions.length === 0) {
-    return (
-      <Button variant="ghost" size="sm" className="h-8 w-8 p-0" disabled>
-        <MoreVertical className="h-4 w-4" />
-      </Button>
-    );
-  }
+  // Redirect to main workspace page (sessions is the default view)
+  useEffect(() => {
+    if (projectName) {
+      router.replace(`/projects/${projectName}`);
+    }
+  }, [projectName, router]);
 
-  // Multiple actions: show dropdown
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-          <MoreVertical className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {actions.map((action) => (
-          <DropdownMenuItem key={action.key} onClick={action.onClick} className={action.className}>
-            {action.label}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+  return null;
 }
diff --git a/components/frontend/src/app/projects/[name]/settings/error.tsx b/components/frontend/src/app/projects/[name]/settings/error.tsx
deleted file mode 100644
index 84ba3e418..000000000
--- a/components/frontend/src/app/projects/[name]/settings/error.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { AlertCircle } from 'lucide-react';
-
-export default function SettingsError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    console.error('Settings page error:', error);
-  }, [error]);
-
-  return (
-    <div className="container mx-auto p-6">
-      <Card className="max-w-lg mx-auto mt-12">
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <AlertCircle className="h-5 w-5 text-destructive" />
-            <CardTitle>Failed to load settings</CardTitle>
-          </div>
-          <CardDescription>
-            {error.message || 'An unexpected error occurred while loading settings.'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={reset}>Try again</Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/components/frontend/src/app/projects/[name]/settings/loading.tsx b/components/frontend/src/app/projects/[name]/settings/loading.tsx
deleted file mode 100644
index 775621468..000000000
--- a/components/frontend/src/app/projects/[name]/settings/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { FormSkeleton } from '@/components/skeletons';
-
-export default function SettingsLoading() {
-  return <FormSkeleton fields={6} />;
-}
diff --git a/components/frontend/src/app/projects/[name]/settings/page.tsx b/components/frontend/src/app/projects/[name]/settings/page.tsx
index bd29a87b5..39584ddfd 100644
--- a/components/frontend/src/app/projects/[name]/settings/page.tsx
+++ b/components/frontend/src/app/projects/[name]/settings/page.tsx
@@ -1,479 +1,19 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { ProjectSubpageHeader } from "@/components/project-subpage-header";
-import { Breadcrumbs } from "@/components/breadcrumbs";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { RefreshCw, Save, Loader2, Info } from "lucide-react";
-import { Plus, Trash2, Eye, EyeOff } from "lucide-react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { successToast, errorToast } from "@/hooks/use-toast";
-import { useProject, useUpdateProject } from "@/services/queries/use-projects";
-import { useSecretsList, useSecretsConfig, useSecretsValues, useUpdateSecretsConfig, useUpdateSecrets } from "@/services/queries/use-secrets";
-import { useMemo } from "react";
+import { useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
 
-export default function ProjectSettingsPage({ params }: { params: Promise<{ name: string }> }) {
-  const [projectName, setProjectName] = useState<string>("");
-  const [formData, setFormData] = useState({ displayName: "", description: "" });
-  const [secretName, setSecretName] = useState<string>("");
-  const [secrets, setSecrets] = useState<Array<{ key: string; value: string }>>([]);
-  const [mode, setMode] = useState<"existing" | "new">("existing");
-  const [showValues, setShowValues] = useState<Record<number, boolean>>({});
-  const [anthropicApiKey, setAnthropicApiKey] = useState<string>("");
-  const [showAnthropicKey, setShowAnthropicKey] = useState<boolean>(false);
-  const [gitUserName, setGitUserName] = useState<string>("");
-  const [gitUserEmail, setGitUserEmail] = useState<string>("");
-  const [gitToken, setGitToken] = useState<string>("");
-  const [showGitToken, setShowGitToken] = useState<boolean>(false);
-  const [jiraUrl, setJiraUrl] = useState<string>("");
-  const [jiraProject, setJiraProject] = useState<string>("");
-  const [jiraEmail, setJiraEmail] = useState<string>("");
-  const [jiraToken, setJiraToken] = useState<string>("");
-  const [showJiraToken, setShowJiraToken] = useState<boolean>(false);
-  const FIXED_KEYS = useMemo(() => ["ANTHROPIC_API_KEY","GIT_USER_NAME","GIT_USER_EMAIL","GIT_TOKEN","JIRA_URL","JIRA_PROJECT","JIRA_EMAIL","JIRA_API_TOKEN"] as const, []);
+export default function ProjectSettingsPage() {
+  const params = useParams();
+  const router = useRouter();
+  const projectName = params?.name as string;
 
-  // React Query hooks
-  const { data: project, isLoading: projectLoading, refetch: refetchProject } = useProject(projectName);
-  const { data: secretsList } = useSecretsList(projectName);
-  const { data: secretsConfig } = useSecretsConfig(projectName);
-  const { data: secretsValues } = useSecretsValues(projectName);
-  const updateProjectMutation = useUpdateProject();
-  const updateSecretsConfigMutation = useUpdateSecretsConfig();
-  const updateSecretsMutation = useUpdateSecrets();
-
-  // Extract projectName from params
-  useEffect(() => {
-    params.then(({ name }) => setProjectName(name));
-  }, [params]);
-
-  // Sync project data to form
-  useEffect(() => {
-    if (project) {
-      setFormData({ displayName: project.displayName || "", description: project.description || "" });
-    }
-  }, [project]);
-
-  // Sync secrets config to state
+  // Redirect to main workspace page
   useEffect(() => {
-    if (secretsConfig) {
-      if (secretsConfig.secretName) {
-        setSecretName(secretsConfig.secretName);
-        setMode("existing");
-      } else {
-        setSecretName("ambient-runner-secrets");
-        setMode("new");
-      }
+    if (projectName) {
+      router.replace(`/projects/${projectName}?section=settings`);
     }
-  }, [secretsConfig]);
-
-  // Sync secrets values to state
-  useEffect(() => {
-    if (secretsValues) {
-      const byKey: Record<string, string> = Object.fromEntries(secretsValues.map(s => [s.key, s.value]));
-      setAnthropicApiKey(byKey["ANTHROPIC_API_KEY"] || "");
-      setGitUserName(byKey["GIT_USER_NAME"] || "");
-      setGitUserEmail(byKey["GIT_USER_EMAIL"] || "");
-      setGitToken(byKey["GIT_TOKEN"] || "");
-      setJiraUrl(byKey["JIRA_URL"] || "");
-      setJiraProject(byKey["JIRA_PROJECT"] || "");
-      setJiraEmail(byKey["JIRA_EMAIL"] || "");
-      setJiraToken(byKey["JIRA_API_TOKEN"] || "");
-      setSecrets(secretsValues.filter(s => !FIXED_KEYS.includes(s.key as typeof FIXED_KEYS[number])));
-    }
-  }, [secretsValues, FIXED_KEYS]);
-
-  const handleRefresh = () => {
-    void refetchProject();
-  };
-
-  const handleSave = () => {
-    if (!project) return;
-    updateProjectMutation.mutate(
-      {
-        name: projectName,
-        data: {
-          displayName: formData.displayName.trim(),
-          description: formData.description.trim() || undefined,
-          annotations: project.annotations || {},
-        },
-      },
-      {
-        onSuccess: () => {
-          successToast("Project settings updated successfully!");
-        },
-        onError: (error) => {
-          const message = error instanceof Error ? error.message : "Failed to update project";
-          errorToast(message);
-        },
-      }
-    );
-  };
-
-  const handleSaveSecrets = () => {
-    if (!projectName) return;
-
-    const name = secretName.trim() || "ambient-runner-secrets";
-
-    // First update config
-    updateSecretsConfigMutation.mutate(
-      { projectName, secretName: name },
-      {
-        onSuccess: () => {
-          // Then update secrets values
-          const data: Record<string, string> = {};
-          if (anthropicApiKey) data["ANTHROPIC_API_KEY"] = anthropicApiKey;
-          if (gitUserName) data["GIT_USER_NAME"] = gitUserName;
-          if (gitUserEmail) data["GIT_USER_EMAIL"] = gitUserEmail;
-          if (gitToken) data["GIT_TOKEN"] = gitToken;
-          if (jiraUrl) data["JIRA_URL"] = jiraUrl;
-          if (jiraProject) data["JIRA_PROJECT"] = jiraProject;
-          if (jiraEmail) data["JIRA_EMAIL"] = jiraEmail;
-          if (jiraToken) data["JIRA_API_TOKEN"] = jiraToken;
-          for (const { key, value } of secrets) {
-            if (!key) continue;
-            if (FIXED_KEYS.includes(key as typeof FIXED_KEYS[number])) continue;
-            data[key] = value ?? "";
-          }
-
-          updateSecretsMutation.mutate(
-            {
-              projectName,
-              secrets: Object.entries(data).map(([key, value]) => ({ key, value })),
-            },
-            {
-              onSuccess: () => {
-                successToast("Secrets saved successfully!");
-              },
-              onError: (error) => {
-                const message = error instanceof Error ? error.message : "Failed to save secrets";
-                errorToast(message);
-              },
-            }
-          );
-        },
-        onError: (error) => {
-          const message = error instanceof Error ? error.message : "Failed to save secret config";
-          errorToast(message);
-        },
-      }
-    );
-  };
-
-  const addSecretRow = () => {
-    setSecrets((prev) => [...prev, { key: "", value: "" }]);
-  };
-
-  const removeSecretRow = (idx: number) => {
-    setSecrets((prev) => prev.filter((_, i) => i !== idx));
-  };
-
-  return (
-    <div className="container mx-auto p-6 max-w-4xl">
-      <Breadcrumbs
-        items={[
-          { label: 'Projects', href: '/projects' },
-          { label: projectName, href: `/projects/${projectName}` },
-          { label: 'Settings' },
-        ]}
-        className="mb-4"
-      />
-      <ProjectSubpageHeader
-        title={<>Project Settings</>}
-        description={<>{projectName}</>}
-        actions={
-          <Button variant="outline" onClick={handleRefresh} disabled={projectLoading}>
-            <RefreshCw className={`w-4 h-4 mr-2 ${projectLoading ? "animate-spin" : ""}`} />
-            Refresh
-          </Button>
-        }
-      />
-
-      {/* Only show project metadata editor on OpenShift */}
-      {project?.isOpenShift ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>Edit Project</CardTitle>
-            <CardDescription>Rename display name or update description</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="displayName">Display Name</Label>
-              <Input
-                id="displayName"
-                value={formData.displayName}
-                onChange={(e) => setFormData((prev) => ({ ...prev, displayName: e.target.value }))}
-                placeholder="My Awesome Project"
-                maxLength={100}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
-              <Textarea
-                id="description"
-                value={formData.description}
-                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
-                placeholder="Describe the purpose and goals of this project..."
-                maxLength={500}
-                rows={3}
-              />
-            </div>
-            <div className="flex gap-3 pt-2">
-              <Button onClick={handleSave} disabled={updateProjectMutation.isPending || projectLoading || !project}>
-                {updateProjectMutation.isPending ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    Saving...
-                  </>
-                ) : (
-                  <>
-                    <Save className="w-4 h-4 mr-2" />
-                    Save Changes
-                  </>
-                )}
-              </Button>
-              <Button variant="outline" onClick={handleRefresh} disabled={updateProjectMutation.isPending || projectLoading}>
-                <RefreshCw className={`w-4 h-4 mr-2 ${projectLoading ? "animate-spin" : ""}`} />
-                Reset
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      ) : (
-        <Alert>
-          <Info className="h-4 w-4" />
-          <AlertDescription>
-            Running on vanilla Kubernetes. Project display name and description editing is not available.
-            The project namespace is: <strong>{projectName}</strong>
-          </AlertDescription>
-        </Alert>
-      )}
-
-      <div className="h-6" />
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Runner Secrets</CardTitle>
-          <CardDescription>
-            Configure the Secret and manage key/value pairs used by project runners.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <div className="flex items-center justify-between gap-3">
-              <div>
-                <Label>Runner Secret</Label>
-                <div className="text-sm text-muted-foreground">Using: {secretName || "ambient-runner-secrets"}</div>
-              </div>
-            </div>
-            <Tabs value={mode} onValueChange={(v) => setMode(v as typeof mode)}>
-              <TabsList>
-                <TabsTrigger value="existing">Use existing</TabsTrigger>
-                <TabsTrigger value="new">Create new</TabsTrigger>
-              </TabsList>
-              <TabsContent value="existing">
-                <div className="flex gap-2 items-center pt-2">
-                  {(secretsList?.items?.length ?? 0) > 0 && (
-                    <Select
-                      value={secretName}
-                      onValueChange={setSecretName}
-                    >
-                      <SelectTrigger className="w-80">
-                        <SelectValue placeholder="Select a secret..." />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {secretsList?.items?.map((s) => (
-                          <SelectItem key={s.name} value={s.name}>{s.name}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                </div>
-                {(secretsList?.items?.length ?? 0) === 0 ? (
-                  <div className="mt-2 text-sm text-amber-600">No runner secrets found in this project. Use the &quot;Create new&quot; tab to create one.</div>
-                ) : (!secretName ? (
-                  <div className="mt-2 text-sm text-muted-foreground">No secret selected. You can still add key/value pairs below and Save; they will be written to the default secret name.</div>
-                ) : null)}
-              </TabsContent>
-              <TabsContent value="new">
-                <div className="flex gap-2 items-center pt-2">
-                  <Input
-                    id="secretName"
-                    value={secretName}
-                    onChange={(e) => setSecretName(e.target.value)}
-                    placeholder="ambient-runner-secrets"
-                    maxLength={253}
-                  />
-                </div>
-              </TabsContent>
-            </Tabs>
-          </div>
-
-          {(mode === "new" || (mode === "existing" && !!secretName)) && (
-            <div className="pt-2 space-y-2">
-              <div className="flex items-center justify-between">
-                <Label>Key/Value Pairs</Label>
-                <Button variant="outline" onClick={addSecretRow}>
-                  <Plus className="w-4 h-4 mr-2" /> Add Row
-                </Button>
-              </div>
-              <div className="space-y-2">
-                {secrets.length === 0 && (
-                  <div className="text-sm text-muted-foreground">No keys configured.</div>
-                )}
-                {secrets.map((item, idx) => (
-                    <div key={idx} className="flex gap-2 items-center">
-                      <Input
-                        value={item.key}
-                        onChange={(e) =>
-                          setSecrets((prev) => prev.map((it, i) => (i === idx ? { ...it, key: e.target.value } : it)))
-                        }
-                        placeholder="KEY"
-                        className="w-1/3"
-                      />
-                      <div className="flex-1 flex items-center gap-2">
-                        <Input
-                          type={showValues[idx] ? "text" : "password"}
-                          value={item.value}
-                          onChange={(e) =>
-                            setSecrets((prev) => prev.map((it, i) => (i === idx ? { ...it, value: e.target.value } : it)))
-                          }
-                          placeholder="value"
-                          className="flex-1"
-                        />
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          onClick={() => setShowValues((prev) => ({ ...prev, [idx]: !prev[idx] }))}
-                          aria-label={showValues[idx] ? "Hide value" : "Show value"}
-                        >
-                          {showValues[idx] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                        </Button>
-                      </div>
-                      <Button variant="ghost" onClick={() => removeSecretRow(idx)} aria-label="Remove row">
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
-                  ))}
-              </div>
-              <div className="pt-4 space-y-3 border-t">
-                <div className="pt-3">
-                  <Label className="text-base font-semibold">Anthropic API Key (Optional)</Label>
-                  <div className="text-xs text-muted-foreground mb-3">Your Anthropic API key for Claude Code runner</div>
-                  <div className="flex items-center gap-2">
-                    <Input
-                      id="anthropicApiKey"
-                      type={showAnthropicKey ? "text" : "password"}
-                      placeholder="sk-ant-..."
-                      value={anthropicApiKey}
-                      onChange={(e) => setAnthropicApiKey(e.target.value)}
-                      className="flex-1"
-                    />
-                    <Button type="button" variant="ghost" onClick={() => setShowAnthropicKey((v) => !v)} aria-label={showAnthropicKey ? "Hide key" : "Show key"}>
-                      {showAnthropicKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-              <div className="pt-4 space-y-3 border-t">
-                <div className="pt-3">
-                  <Label className="text-base font-semibold">Git Integration (Optional)</Label>
-                  <div className="text-xs text-muted-foreground mb-3">Configure Git credentials for repository operations (clone, commit, push)</div>
-                  <div className="text-xs text-blue-600 bg-blue-50 border border-blue-200 rounded p-2 mb-3">
-                    <strong>Note:</strong> These fields are only needed if you have not connected a GitHub Application. When GitHub App integration is configured, it will be used automatically and these fields will serve as a fallback.
-                  </div>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                  <div className="space-y-1">
-                    <Label htmlFor="gitUserName">Git User Name</Label>
-                    <Input id="gitUserName" placeholder="Your Name" value={gitUserName} onChange={(e) => setGitUserName(e.target.value)} />
-                  </div>
-                  <div className="space-y-1">
-                    <Label htmlFor="gitUserEmail">Git User Email</Label>
-                    <Input id="gitUserEmail" placeholder="you@example.com" value={gitUserEmail} onChange={(e) => setGitUserEmail(e.target.value)} />
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="gitToken">GitHub API Token</Label>
-                  <div className="flex items-center gap-2">
-                    <Input
-                      id="gitToken"
-                      type={showGitToken ? "text" : "password"}
-                      placeholder="ghp_... or glpat-..."
-                      value={gitToken}
-                      onChange={(e) => setGitToken(e.target.value)}
-                      className="flex-1"
-                    />
-                    <Button type="button" variant="ghost" onClick={() => setShowGitToken((v) => !v)} aria-label={showGitToken ? "Hide token" : "Show token"}>
-                      {showGitToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                    </Button>
-                  </div>
-                  <div className="text-xs text-muted-foreground">GitHub personal access token or fine-grained token for git operations and API access</div>
-                </div>
-                <div className="text-xs text-muted-foreground">Git credentials will be saved with keys: GIT_USER_NAME, GIT_USER_EMAIL, GIT_TOKEN</div>
-              </div>
-              <div className="pt-4 space-y-3 border-t">
-                <div className="pt-3">
-                  <Label className="text-base font-semibold">Jira Integration (Optional)</Label>
-                  <div className="text-xs text-muted-foreground mb-3">Configure Jira integration for issue management</div>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                  <div className="space-y-1">
-                    <Label htmlFor="jiraUrl">Jira Base URL</Label>
-                    <Input id="jiraUrl" placeholder="https://your-domain.atlassian.net" value={jiraUrl} onChange={(e) => setJiraUrl(e.target.value)} />
-                  </div>
-                  <div className="space-y-1">
-                    <Label htmlFor="jiraProject">Jira Project Key</Label>
-                    <Input id="jiraProject" placeholder="ABC" value={jiraProject} onChange={(e) => setJiraProject(e.target.value)} />
-                  </div>
-                  <div className="space-y-1">
-                    <Label htmlFor="jiraEmail">Jira Email/Username</Label>
-                    <Input id="jiraEmail" placeholder="you@example.com" value={jiraEmail} onChange={(e) => setJiraEmail(e.target.value)} />
-                  </div>
-                  <div className="space-y-1">
-                    <Label htmlFor="jiraToken">Jira API Token</Label>
-                    <div className="flex items-center gap-2">
-                      <Input id="jiraToken" type={showJiraToken ? "text" : "password"} placeholder="token" value={jiraToken} onChange={(e) => setJiraToken(e.target.value)} />
-                      <Button type="button" variant="ghost" onClick={() => setShowJiraToken((v) => !v)} aria-label={showJiraToken ? "Hide token" : "Show token"}>
-                        {showJiraToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-                <div className="text-xs text-muted-foreground">Jira credentials will be saved with keys: JIRA_URL, JIRA_PROJECT, JIRA_EMAIL, JIRA_API_TOKEN</div>
-              </div>
-            </div>
-          )}
+  }, [projectName, router]);
 
-          <div className="pt-2">
-            <Button
-              onClick={handleSaveSecrets}
-              disabled={
-                updateSecretsConfigMutation.isPending ||
-                updateSecretsMutation.isPending ||
-                (mode === "existing" && ((secretsList?.items?.length ?? 0) === 0 || !secretName))
-              }
-            >
-              {(updateSecretsConfigMutation.isPending || updateSecretsMutation.isPending) ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Saving Secrets
-                </>
-              ) : (
-                <>
-                  <Save className="w-4 h-4 mr-2" />
-                  Save Secrets
-                </>
-              )}
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
\ No newline at end of file
+  return null;
+}
diff --git a/components/frontend/src/app/projects/new/page.tsx b/components/frontend/src/app/projects/new/page.tsx
deleted file mode 100644
index fa8837957..000000000
--- a/components/frontend/src/app/projects/new/page.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { CreateProjectRequest } from "@/types/project";
-import { ArrowLeft, Save, Loader2, Info } from "lucide-react";
-import { successToast, errorToast } from "@/hooks/use-toast";
-import { Breadcrumbs } from "@/components/breadcrumbs";
-import { useCreateProject } from "@/services/queries";
-import { useClusterInfo } from "@/hooks/use-cluster-info";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-
-export default function NewProjectPage() {
-  const router = useRouter();
-  const createProjectMutation = useCreateProject();
-  const { isOpenShift, isLoading: clusterLoading } = useClusterInfo();
-  const [error, setError] = useState<string | null>(null);
-  const [formData, setFormData] = useState<CreateProjectRequest>({
-    name: "",
-    displayName: "",
-    description: "",
-  });
-
-  const [nameError, setNameError] = useState<string | null>(null);
-
-  const validateProjectName = (name: string) => {
-    // Validate name pattern: ^[a-z0-9]([-a-z0-9]*[a-z0-9])?$
-    const namePattern = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/;
-
-    if (!name) {
-      return "Project name is required";
-    }
-
-    if (name.length > 63) {
-      return "Project name must be 63 characters or less";
-    }
-
-    if (!namePattern.test(name)) {
-      return "Project name must be lowercase alphanumeric with hyphens (cannot start or end with hyphen)";
-    }
-
-    return null;
-  };
-
-  const handleNameChange = (name: string) => {
-    setFormData(prev => ({ ...prev, name }));
-    setNameError(validateProjectName(name));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    // Validate required fields
-    const nameValidationError = validateProjectName(formData.name);
-    if (nameValidationError) {
-      setNameError(nameValidationError);
-      return;
-    }
-
-    setError(null);
-
-    // Prepare the request payload
-    const payload: CreateProjectRequest = {
-      name: formData.name,
-      // Only include displayName and description on OpenShift
-      ...(isOpenShift && formData.displayName?.trim() && { displayName: formData.displayName.trim() }),
-      ...(isOpenShift && formData.description?.trim() && { description: formData.description.trim() }),
-    };
-
-    createProjectMutation.mutate(payload, {
-      onSuccess: (project) => {
-        successToast(`Project "${formData.displayName || formData.name}" created successfully`);
-        router.push(`/projects/${encodeURIComponent(project.name)}`);
-      },
-      onError: (err) => {
-        const message = err instanceof Error ? err.message : "Failed to create project";
-        setError(message);
-        errorToast(message);
-      },
-    });
-  };
-
-  return (
-    <div className="container mx-auto p-6 max-w-2xl">
-      <Breadcrumbs
-        items={[
-          { label: 'Projects', href: '/projects' },
-          { label: 'New Project' },
-        ]}
-        className="mb-4"
-      />
-      <div className="flex items-center gap-4 mb-6">
-        <Link href="/projects">
-          <Button variant="ghost" size="sm">
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back to Projects
-          </Button>
-        </Link>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Create New Project</CardTitle>
-          <CardDescription>
-            Create a new Ambient AI project with custom settings and resource configurations
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Cluster info banner */}
-            {!clusterLoading && !isOpenShift && (
-              <Alert>
-                <Info className="h-4 w-4" />
-                <AlertDescription>
-                  Running on vanilla Kubernetes. Display name and description fields are not available.
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {/* Basic Information */}
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold">Basic Information</h3>
-
-              <div className="space-y-2">
-                <Label htmlFor="name">Project Name *</Label>
-                <Input
-                  id="name"
-                  value={formData.name}
-                  onChange={(e) => handleNameChange(e.target.value)}
-                  placeholder="my-research-project"
-                  className={nameError ? "border-red-500" : ""}
-                />
-                {nameError && (
-                  <p className="text-sm text-red-600">{nameError}</p>
-                )}
-                <p className="text-sm text-gray-600">
-                  Lowercase alphanumeric with hyphens. Will be used as the Kubernetes namespace.
-                </p>
-              </div>
-
-              {/* OpenShift-only fields */}
-              {isOpenShift && (
-                <>
-                  <div className="space-y-2">
-                    <Label htmlFor="displayName">Display Name</Label>
-                    <Input
-                      id="displayName"
-                      value={formData.displayName}
-                      onChange={(e) => setFormData(prev => ({ ...prev, displayName: e.target.value }))}
-                      placeholder="My Research Project"
-                      maxLength={100}
-                    />
-                    <p className="text-sm text-gray-600">
-                      Human-readable name for the project (max 100 characters). Defaults to project name if empty.
-                    </p>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="description">Description</Label>
-                    <Textarea
-                      id="description"
-                      value={formData.description}
-                      onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-                      placeholder="Description of the project purpose and goals..."
-                      maxLength={500}
-                      rows={3}
-                    />
-                    <p className="text-sm text-gray-600">
-                      Optional description (max 500 characters)
-                    </p>
-                  </div>
-                </>
-              )}
-            </div>
-
-            {/* Resource quota inputs removed */}
-
-            {error && (
-              <div className="p-4 bg-red-50 border border-red-200 rounded-md">
-                <p className="text-red-700">{error}</p>
-              </div>
-            )}
-
-            <div className="flex gap-4 pt-4">
-              <Button type="submit" disabled={createProjectMutation.isPending || !!nameError}>
-                {createProjectMutation.isPending ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    Creating...
-                  </>
-                ) : (
-                  <>
-                    <Save className="w-4 h-4 mr-2" />
-                    Create Project
-                  </>
-                )}
-              </Button>
-              <Link href="/projects">
-                <Button type="button" variant="outline" disabled={createProjectMutation.isPending}>
-                  Cancel
-                </Button>
-              </Link>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/components/frontend/src/app/projects/page.tsx b/components/frontend/src/app/projects/page.tsx
index 32558d600..41f1e3744 100644
--- a/components/frontend/src/app/projects/page.tsx
+++ b/components/frontend/src/app/projects/page.tsx
@@ -26,12 +26,14 @@ import { PageHeader } from '@/components/page-header';
 import { EmptyState } from '@/components/empty-state';
 import { ErrorMessage } from '@/components/error-message';
 import { DestructiveConfirmationDialog } from '@/components/confirmation-dialog';
+import { CreateWorkspaceDialog } from '@/components/create-workspace-dialog';
 import { successToast, errorToast } from '@/hooks/use-toast';
 import type { Project } from '@/types/api';
 
 export default function ProjectsPage() {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
 
   // React Query hooks
   const { data: projects = [], isLoading, error, refetch } = useProjects();
@@ -56,11 +58,11 @@ export default function ProjectsPage() {
 
     deleteProjectMutation.mutate(projectToDelete.name, {
       onSuccess: () => {
-        successToast(`Project "${projectToDelete.displayName || projectToDelete.name}" deleted successfully`);
+        successToast(`Workspace "${projectToDelete.displayName || projectToDelete.name}" deleted successfully`);
         closeDeleteDialog();
       },
       onError: (error) => {
-        errorToast(error instanceof Error ? error.message : 'Failed to delete project');
+        errorToast(error instanceof Error ? error.message : 'Failed to delete workspace');
       },
     });
   };
@@ -71,22 +73,45 @@ export default function ProjectsPage() {
       <div className="container mx-auto p-6">
         <div className="flex items-center justify-center h-64">
           <RefreshCw className="h-8 w-8 animate-spin" />
-          <span className="ml-2">Loading projects...</span>
+          <span className="ml-2">Loading workspaces...</span>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto p-0">
+    <div className="min-h-screen bg-[#f8fafc]">
       {/* Sticky header */}
-      <div className="sticky top-0 z-20 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-        <div className="px-6 py-4">
+      <div className="sticky top-0 z-20 bg-white border-b">
+        <div className="container mx-auto px-6 py-6">
           <PageHeader
-            title="Projects"
-            description="Manage your Ambient AI projects and configurations"
-            actions={
-              <>
+            title="Workspaces"
+            description="Select or create a workspace to get started"
+          />
+        </div>
+      </div>
+
+      <div className="container mx-auto p-0">
+        {/* Error state */}
+        {error && (
+          <div className="px-6 pt-4">
+            <ErrorMessage error={error} onRetry={() => refetch()} />
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="px-6 pt-4">
+        <Card>
+          <CardHeader>
+            <div className="flex items-start justify-between">
+              <div>
+                <CardTitle>Workspaces</CardTitle>
+                <CardDescription>
+                  Configure and manage workspace settings, resource limits, and access
+                  controls
+                </CardDescription>
+              </div>
+              <div className="flex gap-2">
                 <Button
                   variant="outline"
                   onClick={handleRefreshClick}
@@ -97,44 +122,22 @@ export default function ProjectsPage() {
                   />
                   Refresh
                 </Button>
-                <Link href="/projects/new">
-                  <Button>
-                    <Plus className="w-4 h-4 mr-2" />
-                    New Project
-                  </Button>
-                </Link>
-              </>
-            }
-          />
-        </div>
-      </div>
-
-      {/* Error state */}
-      {error && (
-        <div className="px-6 pt-4">
-          <ErrorMessage error={error} onRetry={() => refetch()} />
-        </div>
-      )}
-
-      {/* Content */}
-      <div className="px-6 pt-4">
-        <Card>
-          <CardHeader>
-            <CardTitle>Ambient Projects</CardTitle>
-            <CardDescription>
-              Configure and manage project settings, resource limits, and access
-              controls
-            </CardDescription>
+                <Button onClick={() => setShowCreateDialog(true)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  New Workspace
+                </Button>
+              </div>
+            </div>
           </CardHeader>
           <CardContent>
             {projects.length === 0 ? (
               <EmptyState
                 icon={FolderOpen}
-                title="No projects found"
-                description="Get started by creating your first project"
+                title="No workspaces found"
+                description="Get started by creating your first workspace"
                 action={{
-                  label: 'Create Project',
-                  onClick: () => (window.location.href = '/projects/new'),
+                  label: 'Create Workspace',
+                  onClick: () => setShowCreateDialog(true),
                 }}
               />
             ) : (
@@ -146,6 +149,9 @@ export default function ProjectsPage() {
                       <TableHead className="hidden md:table-cell">
                         Description
                       </TableHead>
+                      <TableHead className="hidden sm:table-cell">
+                        Sessions
+                      </TableHead>
                       <TableHead className="hidden lg:table-cell">
                         Created
                       </TableHead>
@@ -178,6 +184,11 @@ export default function ProjectsPage() {
                             {project.description || '—'}
                           </span>
                         </TableCell>
+                        <TableCell className="hidden sm:table-cell">
+                          <div className="flex items-center gap-2">
+                            <span className="text-muted-foreground">—</span>
+                          </div>
+                        </TableCell>
                         <TableCell className="hidden lg:table-cell">
                           {project.creationTimestamp &&
                             formatDistanceToNow(
@@ -205,16 +216,23 @@ export default function ProjectsPage() {
         </Card>
       </div>
 
-      {/* Delete confirmation dialog */}
-      <DestructiveConfirmationDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={confirmDelete}
-        title="Delete project"
-        description={`Are you sure you want to delete project "${projectToDelete?.name}"? This will permanently remove the project and all related resources. This action cannot be undone.`}
-        confirmText="Delete"
-        loading={deleteProjectMutation.isPending}
-      />
+        {/* Delete confirmation dialog */}
+        <DestructiveConfirmationDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          onConfirm={confirmDelete}
+          title="Delete workspace"
+          description={`Are you sure you want to delete workspace "${projectToDelete?.name}"? This will permanently remove the workspace and all related resources. This action cannot be undone.`}
+          confirmText="Delete"
+          loading={deleteProjectMutation.isPending}
+        />
+
+        {/* Create workspace dialog */}
+        <CreateWorkspaceDialog
+          open={showCreateDialog}
+          onOpenChange={setShowCreateDialog}
+        />
+      </div>
     </div>
   );
 }
diff --git a/components/frontend/src/components/breadcrumbs.tsx b/components/frontend/src/components/breadcrumbs.tsx
index fe6428c28..5c7e567de 100644
--- a/components/frontend/src/components/breadcrumbs.tsx
+++ b/components/frontend/src/components/breadcrumbs.tsx
@@ -29,9 +29,11 @@ export function Breadcrumbs({
   showHome = true,
   separator = <ChevronRight className="h-4 w-4" />,
 }: BreadcrumbsProps) {
-  const allItems: BreadcrumbItem[] = showHome
-    ? [{ label: 'Home', href: '/', icon: <Home className="h-4 w-4" /> }, ...items]
-    : items;
+  // Temporarily hiding Home from breadcrumbs
+  // const allItems: BreadcrumbItem[] = showHome
+  //   ? [{ label: 'Home', href: '/', icon: <Home className="h-4 w-4" /> }, ...items]
+  //   : items;
+  const allItems: BreadcrumbItem[] = items;
 
   return (
     <nav aria-label="Breadcrumb" className={cn('flex items-center space-x-1 text-sm', className)}>
@@ -75,9 +77,11 @@ export function Breadcrumbs({
  * Compact breadcrumbs that collapse middle items on mobile
  */
 export function CompactBreadcrumbs({ items, className, showHome = true }: BreadcrumbsProps) {
-  const allItems: BreadcrumbItem[] = showHome
-    ? [{ label: 'Home', href: '/', icon: <Home className="h-4 w-4" /> }, ...items]
-    : items;
+  // Temporarily hiding Home from breadcrumbs
+  // const allItems: BreadcrumbItem[] = showHome
+  //   ? [{ label: 'Home', href: '/', icon: <Home className="h-4 w-4" /> }, ...items]
+  //   : items;
+  const allItems: BreadcrumbItem[] = items;
 
   // On mobile, show first, last, and ellipsis if there are many items
   const shouldCollapse = allItems.length > 3;
diff --git a/components/frontend/src/components/create-session-dialog.tsx b/components/frontend/src/components/create-session-dialog.tsx
new file mode 100644
index 000000000..f5e470d6e
--- /dev/null
+++ b/components/frontend/src/components/create-session-dialog.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import type { CreateAgenticSessionRequest } from "@/types/agentic-session";
+import { useCreateSession } from "@/services/queries/use-sessions";
+import { successToast, errorToast } from "@/hooks/use-toast";
+
+const models = [
+  { value: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+  { value: "claude-opus-4-1", label: "Claude Opus 4.1" },
+  { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
+];
+
+const formSchema = z.object({
+  model: z.string().min(1, "Please select a model"),
+  temperature: z.number().min(0).max(2),
+  maxTokens: z.number().min(100).max(8000),
+  timeout: z.number().min(60).max(1800),
+  anthropicApiKey: z.string().optional(),
+  saveApiKeyForFuture: z.boolean(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+type CreateSessionDialogProps = {
+  projectName: string;
+  trigger: React.ReactNode;
+  onSuccess?: () => void;
+};
+
+export function CreateSessionDialog({
+  projectName,
+  trigger,
+  onSuccess,
+}: CreateSessionDialogProps) {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const createSessionMutation = useCreateSession();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      model: "claude-sonnet-4-5",
+      temperature: 0.7,
+      maxTokens: 4000,
+      timeout: 300,
+      anthropicApiKey: "",
+      saveApiKeyForFuture: false,
+    },
+  });
+
+  const onSubmit = async (values: FormValues) => {
+    if (!projectName) return;
+
+    const request: CreateAgenticSessionRequest = {
+      interactive: true,
+      prompt: "Interactive session - prompt will be provided by user",
+      llmSettings: {
+        model: values.model,
+        temperature: values.temperature,
+        maxTokens: values.maxTokens,
+        timeout: values.timeout,
+      },
+    };
+
+    // Add API key if provided
+    if (values.anthropicApiKey && values.anthropicApiKey.trim()) {
+      request.anthropicApiKey = values.anthropicApiKey;
+      if (values.saveApiKeyForFuture) {
+        request.saveApiKeyForFuture = true;
+      }
+    }
+
+    createSessionMutation.mutate(
+      { projectName, data: request },
+      {
+        onSuccess: (session) => {
+          const sessionName = session.metadata.name;
+          successToast(`Session "${sessionName}" created successfully`);
+          setOpen(false);
+          form.reset();
+          router.push(`/projects/${encodeURIComponent(projectName)}/sessions/${sessionName}`);
+          onSuccess?.();
+        },
+        onError: (error) => {
+          errorToast(error.message || "Failed to create session");
+        },
+      }
+    );
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      form.reset();
+    }
+  };
+
+  const handleTriggerClick = () => {
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <div onClick={handleTriggerClick}>{trigger}</div>
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="w-full max-w-3xl min-w-[650px]">
+          <DialogHeader>
+            <DialogTitle>Create Session</DialogTitle>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              {/* Model Selection */}
+              <FormField
+                control={form.control}
+                name="model"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormLabel>Model</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select a model" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {models.map((m) => (
+                          <SelectItem key={m.value} value={m.value}>
+                            {m.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Advanced Settings Accordion */}
+              <Accordion type="single" collapsible className="w-full">
+                <AccordionItem value="advanced-settings" className="border rounded-md">
+                  <AccordionTrigger className="px-4 py-3 hover:no-underline">
+                    <span className="text-sm font-medium">Change Default Model Settings</span>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-4 pb-4">
+                    <div className="space-y-6 pt-4">
+                      {/* Temperature and Timeout */}
+                      <div className="grid grid-cols-2 gap-4">
+                        <FormField
+                          control={form.control}
+                          name="temperature"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Temperature</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  step="0.1"
+                                  min="0"
+                                  max="2"
+                                  {...field}
+                                  onChange={(e) => field.onChange(parseFloat(e.target.value))}
+                                />
+                              </FormControl>
+                              <FormDescription>Controls randomness (0.0 - 2.0)</FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="timeout"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Timeout (seconds)</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  step="60"
+                                  min="60"
+                                  max="1800"
+                                  {...field}
+                                  onChange={(e) => field.onChange(parseInt(e.target.value))}
+                                />
+                              </FormControl>
+                              <FormDescription>Session timeout (60-1800 seconds)</FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+
+                      {/* Max Output Tokens */}
+                      <FormField
+                        control={form.control}
+                        name="maxTokens"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Max Output Tokens</FormLabel>
+                            <FormControl>
+                              <Input
+                                type="number"
+                                step="100"
+                                min="100"
+                                max="8000"
+                                {...field}
+                                onChange={(e) => field.onChange(parseInt(e.target.value))}
+                              />
+                            </FormControl>
+                            <FormDescription>Maximum response length (100-8000)</FormDescription>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      {/* Bring Your Own Key Section */}
+                      <div className="pt-4 border-t">
+                        <FormField
+                          control={form.control}
+                          name="anthropicApiKey"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Bring Your Own Key</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="password"
+                                  placeholder="sk-ant-api03-..."
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormDescription>
+                                Optional: Use your own Anthropic API key for this session
+                              </FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="saveApiKeyForFuture"
+                          render={({ field }) => (
+                            <FormItem className="flex flex-row items-start space-x-3 space-y-0 mt-3">
+                              <FormControl>
+                                <Checkbox
+                                  checked={field.value}
+                                  onCheckedChange={field.onChange}
+                                />
+                              </FormControl>
+                              <div className="space-y-1 leading-none">
+                                <FormLabel className="text-sm font-normal">
+                                  Save key for future sessions (encrypted)
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setOpen(false)}
+                  disabled={createSessionMutation.isPending}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={createSessionMutation.isPending}>
+                  {createSessionMutation.isPending && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  Create Session
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
diff --git a/components/frontend/src/components/create-workspace-dialog.tsx b/components/frontend/src/components/create-workspace-dialog.tsx
new file mode 100644
index 000000000..9f5e63542
--- /dev/null
+++ b/components/frontend/src/components/create-workspace-dialog.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { CreateProjectRequest } from "@/types/project";
+import { Save, Loader2, Info } from "lucide-react";
+import { successToast, errorToast } from "@/hooks/use-toast";
+import { useCreateProject } from "@/services/queries";
+import { useClusterInfo } from "@/hooks/use-cluster-info";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+type CreateWorkspaceDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function CreateWorkspaceDialog({
+  open,
+  onOpenChange,
+}: CreateWorkspaceDialogProps) {
+  const router = useRouter();
+  const createProjectMutation = useCreateProject();
+  const { isOpenShift, isLoading: clusterLoading } = useClusterInfo();
+  const [error, setError] = useState<string | null>(null);
+  const [formData, setFormData] = useState<CreateProjectRequest>({
+    name: "",
+    displayName: "",
+    description: "",
+  });
+
+  const [nameError, setNameError] = useState<string | null>(null);
+  const [manuallyEditedName, setManuallyEditedName] = useState(false);
+
+  const generateWorkspaceName = (displayName: string): string => {
+    return displayName
+      .toLowerCase()
+      .replace(/\s+/g, "-") // Replace spaces with hyphens
+      .replace(/[^a-z0-9-]/g, "") // Remove invalid characters
+      .replace(/-+/g, "-") // Collapse multiple hyphens
+      .replace(/^-+|-+$/g, "") // Remove leading/trailing hyphens
+      .slice(0, 63); // Truncate to max length
+  };
+
+  const validateProjectName = (name: string) => {
+    // Validate name pattern: ^[a-z0-9]([-a-z0-9]*[a-z0-9])?$
+    const namePattern = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/;
+
+    if (!name) {
+      return "Workspace name is required";
+    }
+
+    if (name.length > 63) {
+      return "Workspace name must be 63 characters or less";
+    }
+
+    if (!namePattern.test(name)) {
+      return "Workspace name must be lowercase alphanumeric with hyphens (cannot start or end with hyphen)";
+    }
+
+    return null;
+  };
+
+  const handleDisplayNameChange = (displayName: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      displayName,
+      // Auto-generate name only if it hasn't been manually edited
+      name: manuallyEditedName ? prev.name : generateWorkspaceName(displayName),
+    }));
+    
+    // Validate the auto-generated name
+    if (!manuallyEditedName) {
+      const generatedName = generateWorkspaceName(displayName);
+      setNameError(validateProjectName(generatedName));
+    }
+  };
+
+  const handleNameChange = (name: string) => {
+    setManuallyEditedName(true);
+    setFormData((prev) => ({ ...prev, name }));
+    setNameError(validateProjectName(name));
+  };
+
+  const resetForm = () => {
+    setFormData({
+      name: "",
+      displayName: "",
+      description: "",
+    });
+    setNameError(null);
+    setError(null);
+    setManuallyEditedName(false);
+  };
+
+  const handleClose = () => {
+    if (!createProjectMutation.isPending) {
+      resetForm();
+      onOpenChange(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate required fields
+    if (isOpenShift && !formData.displayName?.trim()) {
+      setError("Display Name is required");
+      return;
+    }
+
+    const nameValidationError = validateProjectName(formData.name);
+    if (nameValidationError) {
+      setNameError(nameValidationError);
+      return;
+    }
+
+    setError(null);
+
+    // Prepare the request payload
+    const payload: CreateProjectRequest = {
+      name: formData.name,
+      // Only include displayName and description on OpenShift
+      ...(isOpenShift &&
+        formData.displayName?.trim() && {
+          displayName: formData.displayName.trim(),
+        }),
+      ...(isOpenShift &&
+        formData.description?.trim() && {
+          description: formData.description.trim(),
+        }),
+    };
+
+    createProjectMutation.mutate(payload, {
+      onSuccess: (project) => {
+        successToast(
+          `Workspace "${formData.displayName || formData.name}" created successfully`
+        );
+        resetForm();
+        onOpenChange(false);
+        router.push(`/projects/${encodeURIComponent(project.name)}`);
+      },
+      onError: (err) => {
+        const message =
+          err instanceof Error ? err.message : "Failed to create workspace";
+        setError(message);
+        errorToast(message);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="w-[672px] max-w-[90vw] max-h-[90vh] overflow-y-auto">
+        <DialogHeader className="space-y-3">
+          <DialogTitle>Create New Workspace</DialogTitle>
+          <DialogDescription>
+            Set up a new workspace for your team
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-8 pt-2">
+          {/* Cluster info banner */}
+          {!clusterLoading && !isOpenShift && (
+            <Alert>
+              <Info className="h-4 w-4" />
+              <AlertDescription>
+                Running on vanilla Kubernetes. Display name and description
+                fields are not available.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Basic Information */}
+          <div className="space-y-6">
+
+            {/* OpenShift-only fields */}
+            {isOpenShift && (
+              <div className="space-y-2">
+                <Label htmlFor="displayName">Workspace Name *</Label>
+                <Input
+                  id="displayName"
+                  value={formData.displayName}
+                  onChange={(e) => handleDisplayNameChange(e.target.value)}
+                  placeholder="e.g. My Research Workspace"
+                  maxLength={100}
+                />
+              </div>
+            )}
+
+            {/* <div className="space-y-2">
+              <Label htmlFor="name">Workspace Name *</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => handleNameChange(e.target.value)}
+                placeholder="my-research-workspace"
+                className={nameError ? "border-red-500" : ""}
+              />
+              {nameError && <p className="text-sm text-red-600">{nameError}</p>}
+              <p className="text-sm text-gray-600">
+                {isOpenShift 
+                  ? "Must be lowercase, alphanumeric with hyphens."
+                  : "Lowercase alphanumeric with hyphens."
+                }
+              </p>
+            </div> */}
+
+            {/* OpenShift-only description field */}
+            {isOpenShift && (
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  value={formData.description}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      description: e.target.value,
+                    }))
+                  }
+                  placeholder="Description of the workspace purpose and goals..."
+                  maxLength={500}
+                  rows={3}
+                />
+              </div>
+            )}
+          </div>
+
+          {error && (
+            <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+              <p className="text-red-700">{error}</p>
+            </div>
+          )}
+
+          <DialogFooter className="pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={createProjectMutation.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={createProjectMutation.isPending || !!nameError}
+            >
+              {createProjectMutation.isPending ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Create Workspace
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/components/frontend/src/components/github-connection-card.tsx b/components/frontend/src/components/github-connection-card.tsx
new file mode 100644
index 000000000..e49293107
--- /dev/null
+++ b/components/frontend/src/components/github-connection-card.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import React from 'react'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { useGitHubStatus, useDisconnectGitHub } from '@/services/queries'
+import { successToast, errorToast } from '@/hooks/use-toast'
+
+type Props = { 
+  appSlug?: string
+  showManageButton?: boolean
+}
+
+export function GitHubConnectionCard({ appSlug, showManageButton = true }: Props) {
+  const { data: status, isLoading, refetch } = useGitHubStatus()
+  const disconnectMutation = useDisconnectGitHub()
+
+  const handleConnect = () => {
+    if (!appSlug) return
+    const setupUrl = new URL('/integrations/github/setup', window.location.origin)
+    const redirectUri = encodeURIComponent(setupUrl.toString())
+    const url = `https://github.com/apps/${appSlug}/installations/new?redirect_uri=${redirectUri}`
+    window.location.href = url
+  }
+
+  const handleDisconnect = async () => {
+    disconnectMutation.mutate(undefined, {
+      onSuccess: () => {
+        successToast('GitHub disconnected successfully')
+        refetch()
+      },
+      onError: (error) => {
+        errorToast(error instanceof Error ? error.message : 'Failed to disconnect GitHub')
+      },
+    })
+  }
+
+  const handleManage = () => {
+    window.open('https://github.com/settings/installations', '_blank')
+  }
+
+  return (
+    <Card className="bg-white border border-gray-200 shadow-sm">
+      <div className="p-6">
+        {/* Header section with icon and title */}
+        <div className="flex items-start gap-4 mb-6">
+          <div className="flex-shrink-0 w-16 h-16 bg-gray-900 rounded-lg flex items-center justify-center">
+            <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-xl font-semibold text-gray-900 mb-1">GitHub</h3>
+            <p className="text-gray-600">Connect to GitHub repositories</p>
+          </div>
+        </div>
+
+        {/* Status section */}
+        <div className="mb-4">
+          <div className="flex items-center gap-2 mb-2">
+            <span className={`w-2 h-2 rounded-full ${status?.installed ? 'bg-green-500' : 'bg-gray-400'}`}></span>
+            <span className="text-sm font-medium text-gray-700">
+              {status?.installed ? (
+                <>Connected{status.githubUserId ? ` as ${status.githubUserId}` : ''}</>
+              ) : (
+                'Not Connected'
+              )}
+            </span>
+          </div>
+          <p className="text-gray-600">
+            Connect to GitHub to manage repositories and create pull requests
+          </p>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-3">
+          {status?.installed ? (
+            <>
+              {showManageButton && (
+                <Button 
+                  variant="outline" 
+                  onClick={handleManage} 
+                  disabled={isLoading || disconnectMutation.isPending}
+                >
+                  Manage in GitHub
+                </Button>
+              )}
+              <Button 
+                variant="destructive" 
+                onClick={handleDisconnect} 
+                disabled={isLoading || disconnectMutation.isPending}
+              >
+                Disconnect
+              </Button>
+            </>
+          ) : (
+            <Button 
+              onClick={handleConnect} 
+              disabled={isLoading || !appSlug}
+              className="bg-blue-600 hover:bg-blue-700 text-white"
+            >
+              Connect GitHub
+            </Button>
+          )}
+        </div>
+      </div>
+    </Card>
+  )
+}
+
diff --git a/components/frontend/src/components/navigation.tsx b/components/frontend/src/components/navigation.tsx
index 81cfdbe5a..5af97fd8e 100644
--- a/components/frontend/src/components/navigation.tsx
+++ b/components/frontend/src/components/navigation.tsx
@@ -6,9 +6,11 @@ import { UserBubble } from "@/components/user-bubble";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Plug, LogOut } from "lucide-react";
 
+type NavigationProps = {
+  feedbackUrl?: string;
+};
 
-
-export function Navigation() {
+export function Navigation({ feedbackUrl }: NavigationProps) {
   // const pathname = usePathname();
   // const segments = pathname?.split("/").filter(Boolean) || [];
   const router = useRouter();
@@ -29,6 +31,16 @@ export function Navigation() {
             </Link>
           </div>
           <div className="flex items-center gap-3">
+            {feedbackUrl && (
+              <a 
+                href={feedbackUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Share feedback
+              </a>
+            )}
             <DropdownMenu>
               <DropdownMenuTrigger className="outline-none">
                 <UserBubble />
diff --git a/components/frontend/src/components/session/ResultsTab.tsx b/components/frontend/src/components/session/ResultsTab.tsx
index 68df6f8da..7db5d7cea 100644
--- a/components/frontend/src/components/session/ResultsTab.tsx
+++ b/components/frontend/src/components/session/ResultsTab.tsx
@@ -24,12 +24,12 @@ type Props = {
 };
 
 const ResultsTab: React.FC<Props> = ({ result, meta, components }) => {
-  if (!result && !meta) return <div className="text-sm text-muted-foreground">No results yet</div>;
+  if (!result && !meta) return <div className="text-sm text-muted-foreground">No artifacts yet</div>;
   return (
     <Card>
       <CardHeader>
         <CardTitle>
-          Agent Results
+          Agent Artifacts
         </CardTitle>
       </CardHeader>
       <CardContent>
diff --git a/components/frontend/src/components/session/WorkspaceTab.tsx b/components/frontend/src/components/session/WorkspaceTab.tsx
index dbefb3e02..c59a90408 100644
--- a/components/frontend/src/components/session/WorkspaceTab.tsx
+++ b/components/frontend/src/components/session/WorkspaceTab.tsx
@@ -72,7 +72,7 @@ const WorkspaceTab: React.FC<WorkspaceTabProps> = ({ session, wsLoading, wsUnava
     );
   }
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-0">
+    <div className="grid grid-cols-1 gap-0">
       <div className="border rounded-md overflow-hidden">
         <div className="p-3 border-b flex items-center justify-between">
           <div className="flex-1">
@@ -110,6 +110,7 @@ const WorkspaceTab: React.FC<WorkspaceTabProps> = ({ session, wsLoading, wsUnava
           )}
         </div>
       </div>
+      {/* TODO: Artifact/File Viewer - Temporarily hidden until Artifact Viewer feature is implemented
       <div className="overflow-auto">
         <Card className="m-3">
           <CardContent className="p-4">
@@ -140,6 +141,7 @@ const WorkspaceTab: React.FC<WorkspaceTabProps> = ({ session, wsLoading, wsUnava
           </CardContent>
         </Card>
       </div>
+      */}
     </div>
   );
 };
diff --git a/components/frontend/src/components/ui/accordion.tsx b/components/frontend/src/components/ui/accordion.tsx
new file mode 100644
index 000000000..69e940d83
--- /dev/null
+++ b/components/frontend/src/components/ui/accordion.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+
diff --git a/components/frontend/src/components/ui/card.tsx b/components/frontend/src/components/ui/card.tsx
index d05bbc6c7..652473628 100644
--- a/components/frontend/src/components/ui/card.tsx
+++ b/components/frontend/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-2 rounded-xl border py-6 shadow-sm",
         className
       )}
       {...props}
diff --git a/components/frontend/src/components/ui/separator.tsx b/components/frontend/src/components/ui/separator.tsx
new file mode 100644
index 000000000..9661f9d4a
--- /dev/null
+++ b/components/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}) {
+  return (
+    <div
+      role={decorative ? "none" : "separator"}
+      aria-orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full my-4" : "h-full w-[1px] mx-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
+
diff --git a/components/frontend/src/components/user-bubble.tsx b/components/frontend/src/components/user-bubble.tsx
index 93ca71ba8..29c3b442e 100644
--- a/components/frontend/src/components/user-bubble.tsx
+++ b/components/frontend/src/components/user-bubble.tsx
@@ -29,7 +29,7 @@ export function UserBubble() {
           <AvatarImage alt={me.displayName || initials} />
           <AvatarFallback>{initials || "?"}</AvatarFallback>
         </Avatar>
-        <span className="hidden sm:block text-sm text-muted-foreground">{me.displayName}</span>
+        <span className="hidden sm:block text-sm text-muted-foreground">{me.email || me.username || me.displayName}</span>
       </div>
     </Button>
   );
diff --git a/components/frontend/src/components/workspace-sections/index.ts b/components/frontend/src/components/workspace-sections/index.ts
new file mode 100644
index 000000000..0ca5dd8cc
--- /dev/null
+++ b/components/frontend/src/components/workspace-sections/index.ts
@@ -0,0 +1,4 @@
+export { SessionsSection } from './sessions-section';
+export { SharingSection } from './sharing-section';
+export { SettingsSection } from './settings-section';
+
diff --git a/components/frontend/src/components/workspace-sections/sessions-section.tsx b/components/frontend/src/components/workspace-sections/sessions-section.tsx
new file mode 100644
index 000000000..32b0127f6
--- /dev/null
+++ b/components/frontend/src/components/workspace-sections/sessions-section.tsx
@@ -0,0 +1,284 @@
+'use client';
+
+import { formatDistanceToNow } from 'date-fns';
+import { Plus, RefreshCw, MoreVertical, Square, Trash2, ArrowRight, Brain } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { EmptyState } from '@/components/empty-state';
+import { SessionPhaseBadge } from '@/components/status-badge';
+import { CreateSessionDialog } from '@/components/create-session-dialog';
+
+import { useSessions, useStopSession, useDeleteSession, useContinueSession } from '@/services/queries';
+import { successToast, errorToast } from '@/hooks/use-toast';
+
+type SessionsSectionProps = {
+  projectName: string;
+};
+
+export function SessionsSection({ projectName }: SessionsSectionProps) {
+  const { data: sessions = [], isLoading, error, refetch } = useSessions(projectName);
+  const stopSessionMutation = useStopSession();
+  const deleteSessionMutation = useDeleteSession();
+  const continueSessionMutation = useContinueSession();
+
+  const handleStop = async (sessionName: string) => {
+    stopSessionMutation.mutate(
+      { projectName, sessionName },
+      {
+        onSuccess: () => {
+          successToast(`Session "${sessionName}" stopped successfully`);
+        },
+        onError: (error) => {
+          errorToast(error instanceof Error ? error.message : 'Failed to stop session');
+        },
+      }
+    );
+  };
+
+  const handleDelete = async (sessionName: string) => {
+    if (!confirm(`Delete agentic session "${sessionName}"? This action cannot be undone.`)) return;
+    deleteSessionMutation.mutate(
+      { projectName, sessionName },
+      {
+        onSuccess: () => {
+          successToast(`Session "${sessionName}" deleted successfully`);
+        },
+        onError: (error) => {
+          errorToast(error instanceof Error ? error.message : 'Failed to delete session');
+        },
+      }
+    );
+  };
+
+  const handleContinue = async (sessionName: string) => {
+    continueSessionMutation.mutate(
+      { projectName, parentSessionName: sessionName },
+      {
+        onSuccess: () => {
+          successToast(`Session "${sessionName}" restarted successfully`);
+        },
+        onError: (error) => {
+          errorToast(error instanceof Error ? error.message : 'Failed to restart session');
+        },
+      }
+    );
+  };
+
+  const sortedSessions = [...sessions].sort((a, b) => {
+    const aTime = a?.metadata?.creationTimestamp ? new Date(a.metadata.creationTimestamp).getTime() : 0;
+    const bTime = b?.metadata?.creationTimestamp ? new Date(b.metadata.creationTimestamp).getTime() : 0;
+    return bTime - aTime;
+  });
+
+  return (
+    <Card className="flex-1">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle>Agentic Sessions</CardTitle>
+            <CardDescription>
+              Sessions scoped to this workspace
+            </CardDescription>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => refetch()} disabled={isLoading}>
+              <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+              Refresh
+            </Button>
+            <CreateSessionDialog
+              projectName={projectName}
+              onSuccess={() => refetch()}
+              trigger={
+                <Button>
+                  <Plus className="w-4 h-4 mr-2" />
+                  New Session
+                </Button>
+              }
+            />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {sessions.length === 0 ? (
+          <EmptyState
+            icon={Brain}
+            title="No sessions found"
+            description="Create your first agentic session"
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="min-w-[180px]">Name</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Mode</TableHead>
+                  <TableHead className="hidden md:table-cell">Model</TableHead>
+                  <TableHead className="hidden lg:table-cell">Created</TableHead>
+                  <TableHead className="hidden xl:table-cell">Cost</TableHead>
+                  <TableHead className="w-[50px]">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedSessions.map((session) => {
+                  const sessionName = session.metadata.name;
+                  const phase = session.status?.phase || 'Pending';
+                  const isActionPending =
+                    (stopSessionMutation.isPending && stopSessionMutation.variables?.sessionName === sessionName) ||
+                    (deleteSessionMutation.isPending && deleteSessionMutation.variables?.sessionName === sessionName);
+
+                  return (
+                    <TableRow key={session.metadata?.uid || session.metadata?.name}>
+                      <TableCell className="font-medium min-w-[180px]">
+                        <Link
+                          href={`/projects/${projectName}/sessions/${session.metadata.name}`}
+                          className="text-blue-600 hover:underline hover:text-blue-800 transition-colors block"
+                        >
+                          <div>
+                            <div className="font-medium">{session.spec.displayName || session.metadata.name}</div>
+                            {session.spec.displayName && (
+                              <div className="text-xs text-gray-500 font-normal">{session.metadata.name}</div>
+                            )}
+                          </div>
+                        </Link>
+                      </TableCell>
+                      <TableCell>
+                        <SessionPhaseBadge phase={phase} />
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-xs px-2 py-1 rounded border bg-gray-50">
+                          {session.spec?.interactive ? 'Interactive' : 'Headless'}
+                        </span>
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell">
+                        <span className="text-sm text-gray-600 truncate max-w-[120px] block">
+                          {session.spec.llmSettings.model}
+                        </span>
+                      </TableCell>
+                      <TableCell className="hidden lg:table-cell">
+                        {session.metadata?.creationTimestamp &&
+                          formatDistanceToNow(new Date(session.metadata.creationTimestamp), { addSuffix: true })}
+                      </TableCell>
+                      <TableCell className="hidden xl:table-cell">
+                        {session.status?.total_cost_usd ? (
+                          <span className="text-sm font-mono">${session.status.total_cost_usd.toFixed(4)}</span>
+                        ) : (
+                          <span className="text-sm text-gray-400">—</span>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {isActionPending ? (
+                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0" disabled>
+                            <RefreshCw className="h-4 w-4 animate-spin" />
+                          </Button>
+                        ) : (
+                          <SessionActions
+                            sessionName={sessionName}
+                            phase={phase}
+                            onStop={handleStop}
+                            onContinue={handleContinue}
+                            onDelete={handleDelete}
+                          />
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+type SessionActionsProps = {
+  sessionName: string;
+  phase: string;
+  onStop: (sessionName: string) => void;
+  onContinue: (sessionName: string) => void;
+  onDelete: (sessionName: string) => void;
+};
+
+function SessionActions({ sessionName, phase, onStop, onContinue, onDelete }: SessionActionsProps) {
+  type RowAction = {
+    key: string;
+    label: string;
+    onClick: () => void;
+    icon: React.ReactNode;
+    className?: string;
+  };
+
+  const actions: RowAction[] = [];
+
+  if (phase === 'Pending' || phase === 'Creating' || phase === 'Running') {
+    actions.push({
+      key: 'stop',
+      label: 'Stop',
+      onClick: () => onStop(sessionName),
+      icon: <Square className="h-4 w-4" />,
+      className: 'text-orange-600',
+    });
+  }
+
+  if (phase === 'Completed' || phase === 'Failed' || phase === 'Stopped' || phase === 'Error') {
+    actions.push({
+      key: 'continue',
+      label: 'Continue',
+      onClick: () => onContinue(sessionName),
+      icon: <ArrowRight className="h-4 w-4" />,
+      className: 'text-green-600',
+    });
+  }
+
+  if (phase !== 'Creating') {
+    actions.push({
+      key: 'delete',
+      label: 'Delete',
+      onClick: () => onDelete(sessionName),
+      icon: <Trash2 className="h-4 w-4" />,
+      className: 'text-red-600',
+    });
+  }
+
+  if (actions.length === 1) {
+    const action = actions[0];
+    return (
+      <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={action.onClick}>
+        {action.icon}
+      </Button>
+    );
+  }
+
+  if (actions.length === 0) {
+    return (
+      <Button variant="ghost" size="sm" className="h-8 w-8 p-0" disabled>
+        <MoreVertical className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+          <MoreVertical className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {actions.map((action) => (
+          <DropdownMenuItem key={action.key} onClick={action.onClick} className={action.className}>
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
diff --git a/components/frontend/src/components/workspace-sections/settings-section.tsx b/components/frontend/src/components/workspace-sections/settings-section.tsx
new file mode 100644
index 000000000..3a9ba808b
--- /dev/null
+++ b/components/frontend/src/components/workspace-sections/settings-section.tsx
@@ -0,0 +1,523 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Save, Loader2, Info } from "lucide-react";
+import { Plus, Trash2, Eye, EyeOff } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { successToast, errorToast } from "@/hooks/use-toast";
+import { useProject, useUpdateProject } from "@/services/queries/use-projects";
+import { useSecretsList, useSecretsConfig, useSecretsValues, useUpdateSecretsConfig, useUpdateSecrets } from "@/services/queries/use-secrets";
+import { useMemo } from "react";
+
+type SettingsSectionProps = {
+  projectName: string;
+};
+
+export function SettingsSection({ projectName }: SettingsSectionProps) {
+  const [formData, setFormData] = useState({ displayName: "", description: "" });
+  const [secretName, setSecretName] = useState<string>("");
+  const [secrets, setSecrets] = useState<Array<{ key: string; value: string }>>([]);
+  const [mode, setMode] = useState<"existing" | "new">("existing");
+  const [showValues, setShowValues] = useState<Record<number, boolean>>({});
+  const [anthropicApiKey, setAnthropicApiKey] = useState<string>("");
+  const [showAnthropicKey, setShowAnthropicKey] = useState<boolean>(false);
+  const [gitUserName, setGitUserName] = useState<string>("");
+  const [gitUserEmail, setGitUserEmail] = useState<string>("");
+  const [gitToken, setGitToken] = useState<string>("");
+  const [showGitToken, setShowGitToken] = useState<boolean>(false);
+  const [jiraUrl, setJiraUrl] = useState<string>("");
+  const [jiraProject, setJiraProject] = useState<string>("");
+  const [jiraEmail, setJiraEmail] = useState<string>("");
+  const [jiraToken, setJiraToken] = useState<string>("");
+  const [showJiraToken, setShowJiraToken] = useState<boolean>(false);
+  const FIXED_KEYS = useMemo(() => ["ANTHROPIC_API_KEY","GIT_USER_NAME","GIT_USER_EMAIL","GIT_TOKEN","JIRA_URL","JIRA_PROJECT","JIRA_EMAIL","JIRA_API_TOKEN"] as const, []);
+
+  // React Query hooks
+  const { data: project, isLoading: projectLoading } = useProject(projectName);
+  const { data: secretsList } = useSecretsList(projectName);
+  const { data: secretsConfig } = useSecretsConfig(projectName);
+  const { data: secretsValues } = useSecretsValues(projectName);
+  const updateProjectMutation = useUpdateProject();
+  const updateSecretsConfigMutation = useUpdateSecretsConfig();
+  const updateSecretsMutation = useUpdateSecrets();
+
+  // Sync project data to form
+  useEffect(() => {
+    if (project) {
+      setFormData({ displayName: project.displayName || "", description: project.description || "" });
+    }
+  }, [project]);
+
+  // Sync secrets config to state
+  useEffect(() => {
+    if (secretsConfig) {
+      if (secretsConfig.secretName) {
+        setSecretName(secretsConfig.secretName);
+        setMode("existing");
+      } else {
+        setSecretName("ambient-runner-secrets");
+        setMode("new");
+      }
+    }
+  }, [secretsConfig]);
+
+  // Sync secrets values to state
+  useEffect(() => {
+    if (secretsValues) {
+      const byKey: Record<string, string> = Object.fromEntries(secretsValues.map(s => [s.key, s.value]));
+      setAnthropicApiKey(byKey["ANTHROPIC_API_KEY"] || "");
+      setGitUserName(byKey["GIT_USER_NAME"] || "");
+      setGitUserEmail(byKey["GIT_USER_EMAIL"] || "");
+      setGitToken(byKey["GIT_TOKEN"] || "");
+      setJiraUrl(byKey["JIRA_URL"] || "");
+      setJiraProject(byKey["JIRA_PROJECT"] || "");
+      setJiraEmail(byKey["JIRA_EMAIL"] || "");
+      setJiraToken(byKey["JIRA_API_TOKEN"] || "");
+      setSecrets(secretsValues.filter(s => !FIXED_KEYS.includes(s.key as typeof FIXED_KEYS[number])));
+    }
+  }, [secretsValues, FIXED_KEYS]);
+
+  const handleSave = () => {
+    if (!project) return;
+    updateProjectMutation.mutate(
+      {
+        name: projectName,
+        data: {
+          displayName: formData.displayName.trim(),
+          description: formData.description.trim() || undefined,
+          annotations: project.annotations || {},
+        },
+      },
+      {
+        onSuccess: () => {
+          successToast("Project settings updated successfully!");
+        },
+        onError: (error) => {
+          const message = error instanceof Error ? error.message : "Failed to update project";
+          errorToast(message);
+        },
+      }
+    );
+  };
+
+  const handleSaveSecrets = () => {
+    if (!projectName) return;
+
+    const name = secretName.trim() || "ambient-runner-secrets";
+
+    // First update config
+    updateSecretsConfigMutation.mutate(
+      { projectName, secretName: name },
+      {
+        onSuccess: () => {
+          // Then update secrets values
+          const data: Record<string, string> = {};
+          if (anthropicApiKey) data["ANTHROPIC_API_KEY"] = anthropicApiKey;
+          if (gitUserName) data["GIT_USER_NAME"] = gitUserName;
+          if (gitUserEmail) data["GIT_USER_EMAIL"] = gitUserEmail;
+          if (gitToken) data["GIT_TOKEN"] = gitToken;
+          if (jiraUrl) data["JIRA_URL"] = jiraUrl;
+          if (jiraProject) data["JIRA_PROJECT"] = jiraProject;
+          if (jiraEmail) data["JIRA_EMAIL"] = jiraEmail;
+          if (jiraToken) data["JIRA_API_TOKEN"] = jiraToken;
+          for (const { key, value } of secrets) {
+            if (!key) continue;
+            if (FIXED_KEYS.includes(key as typeof FIXED_KEYS[number])) continue;
+            data[key] = value ?? "";
+          }
+
+          updateSecretsMutation.mutate(
+            {
+              projectName,
+              secrets: Object.entries(data).map(([key, value]) => ({ key, value })),
+            },
+            {
+              onSuccess: () => {
+                successToast("Secrets saved successfully!");
+              },
+              onError: (error) => {
+                const message = error instanceof Error ? error.message : "Failed to save secrets";
+                errorToast(message);
+              },
+            }
+          );
+        },
+        onError: (error) => {
+          const message = error instanceof Error ? error.message : "Failed to save secret config";
+          errorToast(message);
+        },
+      }
+    );
+  };
+
+  const addSecretRow = () => {
+    setSecrets((prev) => [...prev, { key: "", value: "" }]);
+  };
+
+  const removeSecretRow = (idx: number) => {
+    setSecrets((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  return (
+    <div className="flex-1 space-y-6">
+      {/* Only show project metadata editor on OpenShift */}
+      {project?.isOpenShift ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>General Settings</CardTitle>
+            <CardDescription>Basic workspace configuration</CardDescription>
+          </CardHeader>
+          <Separator />
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="displayName">Display Name</Label>
+              <Input
+                id="displayName"
+                value={formData.displayName}
+                onChange={(e) => setFormData((prev) => ({ ...prev, displayName: e.target.value }))}
+                placeholder="My Awesome Workspace"
+                maxLength={100}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="workspaceName">Workspace Name</Label>
+              <Input
+                id="workspaceName"
+                value={projectName}
+                readOnly
+                disabled
+                className="bg-muted/80 text-muted-foreground"
+              />
+              <p className="text-sm text-muted-foreground">Workspace name cannot be changed after creation</p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
+                placeholder="Describe the purpose and goals of this workspace..."
+                maxLength={500}
+                rows={3}
+              />
+            </div>
+            <div className="pt-2">
+              <Button onClick={handleSave} disabled={updateProjectMutation.isPending || projectLoading || !project}>
+                {updateProjectMutation.isPending ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Save className="w-4 h-4 mr-2" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Alert>
+          <Info className="h-4 w-4" />
+          <AlertDescription>
+            Running on vanilla Kubernetes. Project display name and description editing is not available.
+            The project namespace is: <strong>{projectName}</strong>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Runner Secrets</CardTitle>
+          <CardDescription>
+            Configure the Secret and manage key/value pairs used by workspace runners.
+          </CardDescription>
+        </CardHeader>
+        <Separator />
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <Label>Runner Secret</Label>
+                <div className="text-sm text-muted-foreground">Using: {secretName || "ambient-runner-secrets"}</div>
+              </div>
+            </div>
+            <Tabs value={mode} onValueChange={(v) => setMode(v as typeof mode)}>
+              <TabsList>
+                <TabsTrigger value="existing">Use existing</TabsTrigger>
+                <TabsTrigger value="new">Create new</TabsTrigger>
+              </TabsList>
+              <TabsContent value="existing">
+                <div className="flex gap-2 items-center pt-2">
+                  {(secretsList?.items?.length ?? 0) > 0 && (
+                    <Select
+                      value={secretName}
+                      onValueChange={setSecretName}
+                    >
+                      <SelectTrigger className="w-80">
+                        <SelectValue placeholder="Select a secret..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {secretsList?.items?.map((s) => (
+                          <SelectItem key={s.name} value={s.name}>{s.name}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                </div>
+                {(secretsList?.items?.length ?? 0) === 0 ? (
+                  <div className="mt-2 text-sm text-amber-600">No runner secrets found in this project. Use the &quot;Create new&quot; tab to create one.</div>
+                ) : (!secretName ? (
+                  <div className="mt-2 text-sm text-muted-foreground">No secret selected. You can still add key/value pairs below and Save; they will be written to the default secret name.</div>
+                ) : null)}
+              </TabsContent>
+              <TabsContent value="new">
+                <div className="flex gap-2 items-center pt-2">
+                  <Input
+                    id="secretName"
+                    value={secretName}
+                    onChange={(e) => setSecretName(e.target.value)}
+                    placeholder="ambient-runner-secrets"
+                    maxLength={253}
+                  />
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+
+          {(mode === "new" || (mode === "existing" && !!secretName)) && (
+            <div className="pt-2 space-y-4">
+              <div className="space-y-2">
+                <Label>Additional Secrets</Label>
+                <div className="space-y-2">
+                  {secrets.map((item, idx) => (
+                    <div key={idx} className="flex gap-2 items-center">
+                      <Input
+                        value={item.key}
+                        onChange={(e) =>
+                          setSecrets((prev) => prev.map((it, i) => (i === idx ? { ...it, key: e.target.value } : it)))
+                        }
+                        placeholder="KEY"
+                        className="w-1/3"
+                      />
+                      <div className="flex-1 flex items-center gap-2">
+                        <Input
+                          type={showValues[idx] ? "text" : "password"}
+                          value={item.value}
+                          onChange={(e) =>
+                            setSecrets((prev) => prev.map((it, i) => (i === idx ? { ...it, value: e.target.value } : it)))
+                          }
+                          placeholder="value"
+                          className="flex-1"
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          onClick={() => setShowValues((prev) => ({ ...prev, [idx]: !prev[idx] }))}
+                          aria-label={showValues[idx] ? "Hide value" : "Show value"}
+                        >
+                          {showValues[idx] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                        </Button>
+                      </div>
+                      <Button variant="ghost" onClick={() => removeSecretRow(idx)} aria-label="Remove row">
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <Button variant="outline" onClick={addSecretRow}>
+                <Plus className="w-4 h-4 mr-2" /> Add Secret
+              </Button>
+            </div>
+          )}
+
+          {(mode === "new" || (mode === "existing" && !!secretName)) && (
+            <div className="flex gap-3 pt-2">
+              <Button
+                onClick={handleSaveSecrets}
+                disabled={
+                  updateSecretsConfigMutation.isPending ||
+                  updateSecretsMutation.isPending ||
+                  (mode === "existing" && ((secretsList?.items?.length ?? 0) === 0 || !secretName))
+                }
+              >
+                {(updateSecretsConfigMutation.isPending || updateSecretsMutation.isPending) ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Saving Secrets
+                  </>
+                ) : (
+                  <>
+                    <Save className="w-4 h-4 mr-2" />
+                    Save Secrets
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>API Keys</CardTitle>
+          <CardDescription>
+            Configure API keys for your workspace runners.
+          </CardDescription>
+        </CardHeader>
+        <Separator />
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="anthropicApiKey">Anthropic API Key</Label>
+            <div className="text-xs text-muted-foreground mb-2">Your Anthropic API key for Claude Code runner</div>
+            <div className="flex items-center gap-2">
+              <Input
+                id="anthropicApiKey"
+                type={showAnthropicKey ? "text" : "password"}
+                placeholder="sk-ant-..."
+                value={anthropicApiKey}
+                onChange={(e) => setAnthropicApiKey(e.target.value)}
+                className="flex-1"
+              />
+              <Button type="button" variant="ghost" onClick={() => setShowAnthropicKey((v) => !v)} aria-label={showAnthropicKey ? "Hide key" : "Show key"}>
+                {showAnthropicKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </Button>
+            </div>
+          </div>
+          <div className="pt-2">
+            <Button
+              onClick={handleSaveSecrets}
+              disabled={
+                updateSecretsConfigMutation.isPending ||
+                updateSecretsMutation.isPending ||
+                (mode === "existing" && ((secretsList?.items?.length ?? 0) === 0 || !secretName))
+              }
+            >
+              {(updateSecretsConfigMutation.isPending || updateSecretsMutation.isPending) ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Saving Keys
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Save Keys
+                </>
+              )}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Integrations</CardTitle>
+          <CardDescription>
+            Configure external integrations for your workspace runners.
+          </CardDescription>
+        </CardHeader>
+        <Separator />
+        <CardContent className="space-y-6">
+          <div className="space-y-3">
+            <Label className="text-base font-semibold">Git Integration (Optional)</Label>
+            <div className="text-xs text-muted-foreground mb-3">Configure Git credentials for repository operations (clone, commit, push)</div>
+            <div className="text-xs text-blue-600 bg-blue-50 border border-blue-200 rounded p-2 mb-3">
+              <strong>Note:</strong> These fields are only needed if you have not connected a GitHub Application. When GitHub App integration is configured, it will be used automatically and these fields will serve as a fallback.
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="gitUserName">Git User Name</Label>
+                <Input id="gitUserName" placeholder="Your Name" value={gitUserName} onChange={(e) => setGitUserName(e.target.value)} />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="gitUserEmail">Git User Email</Label>
+                <Input id="gitUserEmail" placeholder="you@example.com" value={gitUserEmail} onChange={(e) => setGitUserEmail(e.target.value)} />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="gitToken">GitHub API Token</Label>
+              <div className="flex items-center gap-2">
+                <Input
+                  id="gitToken"
+                  type={showGitToken ? "text" : "password"}
+                  placeholder="ghp_... or glpat-..."
+                  value={gitToken}
+                  onChange={(e) => setGitToken(e.target.value)}
+                  className="flex-1"
+                />
+                <Button type="button" variant="ghost" onClick={() => setShowGitToken((v) => !v)} aria-label={showGitToken ? "Hide token" : "Show token"}>
+                  {showGitToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </Button>
+              </div>
+              <div className="text-xs text-muted-foreground">GitHub personal access token or fine-grained token for git operations and API access</div>
+            </div>
+            <div className="text-xs text-muted-foreground">Git credentials will be saved with keys: GIT_USER_NAME, GIT_USER_EMAIL, GIT_TOKEN</div>
+          </div>
+
+          <div className="pt-4 space-y-3 border-t">
+            <Label className="text-base font-semibold">Jira Integration (Optional)</Label>
+            <div className="text-xs text-muted-foreground mb-3">Configure Jira integration for issue management</div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="jiraUrl">Jira Base URL</Label>
+                <Input id="jiraUrl" placeholder="https://your-domain.atlassian.net" value={jiraUrl} onChange={(e) => setJiraUrl(e.target.value)} />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="jiraProject">Jira Project Key</Label>
+                <Input id="jiraProject" placeholder="ABC" value={jiraProject} onChange={(e) => setJiraProject(e.target.value)} />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="jiraEmail">Jira Email/Username</Label>
+                <Input id="jiraEmail" placeholder="you@example.com" value={jiraEmail} onChange={(e) => setJiraEmail(e.target.value)} />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="jiraToken">Jira API Token</Label>
+                <div className="flex items-center gap-2">
+                  <Input id="jiraToken" type={showJiraToken ? "text" : "password"} placeholder="token" value={jiraToken} onChange={(e) => setJiraToken(e.target.value)} />
+                  <Button type="button" variant="ghost" onClick={() => setShowJiraToken((v) => !v)} aria-label={showJiraToken ? "Hide token" : "Show token"}>
+                    {showJiraToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground">Jira credentials will be saved with keys: JIRA_URL, JIRA_PROJECT, JIRA_EMAIL, JIRA_API_TOKEN</div>
+          </div>
+          <div className="pt-2">
+            <Button
+              onClick={handleSaveSecrets}
+              disabled={
+                updateSecretsConfigMutation.isPending ||
+                updateSecretsMutation.isPending ||
+                (mode === "existing" && ((secretsList?.items?.length ?? 0) === 0 || !secretName))
+              }
+            >
+              {(updateSecretsConfigMutation.isPending || updateSecretsMutation.isPending) ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Saving Integrations
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Save Integrations
+                </>
+              )}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
diff --git a/components/frontend/src/components/workspace-sections/sharing-section.tsx b/components/frontend/src/components/workspace-sections/sharing-section.tsx
new file mode 100644
index 000000000..d1fb7b526
--- /dev/null
+++ b/components/frontend/src/components/workspace-sections/sharing-section.tsx
@@ -0,0 +1,359 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+import { Eye, Edit, Shield, Users, User as UserIcon, Plus, RefreshCw, Loader2, Trash2, Info } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { DestructiveConfirmationDialog } from '@/components/confirmation-dialog';
+
+import { useProjectPermissions, useAddProjectPermission, useRemoveProjectPermission } from '@/services/queries';
+import { successToast, errorToast } from '@/hooks/use-toast';
+import type { PermissionRole, SubjectType } from '@/types/project';
+
+const ROLE_DEFINITIONS = {
+  view: {
+    label: 'View',
+    description: 'Can see sessions and duplicate to their own workspace',
+    permissions: ['sessions:read', 'sessions:duplicate'] as const,
+    color: 'bg-blue-100 text-blue-800',
+    icon: Eye,
+  },
+  edit: {
+    label: 'Edit',
+    description: 'Can create sessions in the workspace',
+    permissions: ['sessions:read', 'sessions:create', 'sessions:duplicate'] as const,
+    color: 'bg-green-100 text-green-800',
+    icon: Edit,
+  },
+  admin: {
+    label: 'Admin',
+    description: 'Full workspace management access',
+    permissions: ['*'] as const,
+    color: 'bg-purple-100 text-purple-800',
+    icon: Shield,
+  },
+} as const;
+
+type GrantPermissionForm = {
+  subjectType: SubjectType;
+  subjectName: string;
+  role: PermissionRole;
+};
+
+type SharingSectionProps = {
+  projectName: string;
+};
+
+export function SharingSection({ projectName }: SharingSectionProps) {
+  const { data: permissions = [], isLoading, error, refetch } = useProjectPermissions(projectName);
+  const addPermissionMutation = useAddProjectPermission();
+  const removePermissionMutation = useRemoveProjectPermission();
+
+  const [showGrantDialog, setShowGrantDialog] = useState(false);
+  const [grantForm, setGrantForm] = useState<GrantPermissionForm>({
+    subjectType: 'group',
+    subjectName: '',
+    role: 'view',
+  });
+  const [grantError, setGrantError] = useState<string | null>(null);
+  const userRole: PermissionRole | undefined = undefined;
+
+  const [showRevokeDialog, setShowRevokeDialog] = useState(false);
+  const [toRevoke, setToRevoke] = useState<{ subjectType: SubjectType; subjectName: string; role: PermissionRole } | null>(null);
+
+  const isAdmin = userRole === 'admin' || userRole === undefined;
+
+  const handleGrant = useCallback(() => {
+    if (!grantForm.subjectName.trim()) {
+      setGrantError(`${grantForm.subjectType === 'group' ? 'Group' : 'User'} name is required`);
+      return;
+    }
+
+    const key = `${grantForm.subjectType}:${grantForm.subjectName}`.toLowerCase();
+    if (permissions.some((i) => `${i.subjectType}:${i.subjectName}`.toLowerCase() === key)) {
+      setGrantError('This subject already has access to the workspace');
+      return;
+    }
+
+    setGrantError(null);
+    addPermissionMutation.mutate(
+      {
+        projectName,
+        permission: {
+          subjectType: grantForm.subjectType,
+          subjectName: grantForm.subjectName,
+          role: grantForm.role,
+        },
+      },
+      {
+        onSuccess: () => {
+          successToast(`Permission granted to ${grantForm.subjectName} successfully`);
+          setShowGrantDialog(false);
+          setGrantForm({ subjectType: 'group', subjectName: '', role: 'view' });
+        },
+        onError: (error) => {
+          const message = error instanceof Error ? error.message : 'Failed to grant permission';
+          setGrantError(message);
+          errorToast(message);
+        },
+      }
+    );
+  }, [grantForm, permissions, projectName, addPermissionMutation]);
+
+  const handleRevoke = useCallback(() => {
+    if (!toRevoke) return;
+
+    removePermissionMutation.mutate(
+      {
+        projectName,
+        subjectType: toRevoke.subjectType,
+        subjectName: toRevoke.subjectName,
+      },
+      {
+        onSuccess: () => {
+          successToast(`Permission revoked from ${toRevoke.subjectName} successfully`);
+          setShowRevokeDialog(false);
+          setToRevoke(null);
+        },
+        onError: (error) => {
+          errorToast(error instanceof Error ? error.message : 'Failed to revoke permission');
+        },
+      }
+    );
+  }, [toRevoke, projectName, removePermissionMutation]);
+
+  const emptyState = useMemo(
+    () => (
+      <div className="text-center py-8">
+        <Users className="w-8 h-8 text-muted-foreground mx-auto mb-2" />
+        <p className="text-sm text-muted-foreground mb-4">No users or groups have access yet</p>
+        {isAdmin && (
+          <Button onClick={() => setShowGrantDialog(true)} size="sm">
+            <Plus className="w-4 h-4 mr-2" />
+            Grant First Permission
+          </Button>
+        )}
+      </div>
+    ),
+    [isAdmin]
+  );
+
+  return (
+    <>
+      {!isAdmin && (
+        <Card className="mb-6 border-blue-200 bg-blue-50">
+          <CardContent className="pt-6 flex items-center gap-2">
+            <Info className="w-4 h-4 text-blue-600" />
+            <p className="text-blue-700">
+              You have {userRole || 'view'} access. Only admins can grant or revoke permissions.
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card className="flex-1">
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle>
+                Sharing
+              </CardTitle>
+              <CardDescription>Users and groups with access to this workspace and their roles</CardDescription>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => refetch()} disabled={isLoading}>
+                <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+                Refresh
+              </Button>
+              {isAdmin && (
+                <Button onClick={() => setShowGrantDialog(true)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Grant Permission
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {permissions.length > 0 ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Subject</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Role</TableHead>
+                  {isAdmin && <TableHead className="text-right">Actions</TableHead>}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {permissions.map((p) => {
+                  const roleConfig = ROLE_DEFINITIONS[p.role];
+                  const RoleIcon = roleConfig.icon;
+                  const isRevokingThis =
+                    removePermissionMutation.isPending &&
+                    removePermissionMutation.variables?.subjectName === p.subjectName &&
+                    removePermissionMutation.variables?.subjectType === p.subjectType;
+
+                  return (
+                    <TableRow key={`${p.subjectType}:${p.subjectName}:${p.role}`}>
+                      <TableCell className="font-medium">{p.subjectName}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                          {p.subjectType === 'group' ? (
+                            <Users className="w-3 h-3" />
+                          ) : (
+                            <UserIcon className="w-3 h-3" />
+                          )}
+                          {p.subjectType === 'group' ? 'Group' : 'User'}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge className={roleConfig.color} style={{ cursor: 'default' }}>
+                          <RoleIcon className="w-3 h-3 mr-1" />
+                          {roleConfig.label}
+                        </Badge>
+                      </TableCell>
+
+                      {isAdmin && (
+                        <TableCell className="text-right">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              setToRevoke(p);
+                              setShowRevokeDialog(true);
+                            }}
+                            disabled={isRevokingThis}
+                          >
+                            {isRevokingThis ? (
+                              <Loader2 className="w-4 h-4 animate-spin" />
+                            ) : (
+                              <Trash2 className="w-4 h-4" />
+                            )}
+                          </Button>
+                        </TableCell>
+                      )}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          ) : (
+            emptyState
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Grant Permission Dialog */}
+      <Dialog open={showGrantDialog} onOpenChange={setShowGrantDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Grant Permission</DialogTitle>
+            <DialogDescription>Add a user or group to this workspace with a role</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>Subject Type</Label>
+              <Tabs
+                value={grantForm.subjectType}
+                onValueChange={(value) => {
+                  if (addPermissionMutation.isPending) return;
+                  setGrantForm((prev) => ({ ...prev, subjectType: value as SubjectType }));
+                }}
+              >
+                <TabsList className="grid grid-cols-2 w-full">
+                  <TabsTrigger value="group">Group</TabsTrigger>
+                  <TabsTrigger value="user">User</TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="subjectName">
+                {grantForm.subjectType === 'group' ? 'Group' : 'User'} Name
+              </Label>
+              <Input
+                id="subjectName"
+                placeholder={`Enter ${grantForm.subjectType} name`}
+                value={grantForm.subjectName}
+                onChange={(e) => setGrantForm((prev) => ({ ...prev, subjectName: e.target.value }))}
+                disabled={addPermissionMutation.isPending}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Role</Label>
+              <div className="space-y-3">
+                {Object.entries(ROLE_DEFINITIONS).map(([roleKey, roleConfig]) => {
+                  const RoleIcon = roleConfig.icon;
+                  const id = `role-${roleKey}`;
+                  return (
+                    <div key={roleKey} className="flex items-start gap-3">
+                      <input
+                        type="radio"
+                        name="grant-role"
+                        id={id}
+                        className="mt-1 h-4 w-4"
+                        value={roleKey}
+                        checked={grantForm.role === (roleKey as PermissionRole)}
+                        onChange={() => setGrantForm((prev) => ({ ...prev, role: roleKey as PermissionRole }))}
+                        disabled={addPermissionMutation.isPending}
+                      />
+                      <Label htmlFor={id} className="flex-1 cursor-pointer">
+                        <div className="flex items-center gap-2">
+                          <RoleIcon className="w-4 h-4" />
+                          <span className="font-medium">{roleConfig.label}</span>
+                        </div>
+                        <div className="text-sm text-muted-foreground ml-6">{roleConfig.description}</div>
+                      </Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {grantError && <div className="text-sm text-red-600 bg-red-50 p-2 rounded">{grantError}</div>}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowGrantDialog(false)}
+              disabled={addPermissionMutation.isPending}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleGrant} disabled={addPermissionMutation.isPending}>
+              {addPermissionMutation.isPending ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Granting...
+                </>
+              ) : (
+                <>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Grant Permission
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Revoke Permission Dialog */}
+      <DestructiveConfirmationDialog
+        open={showRevokeDialog}
+        onOpenChange={setShowRevokeDialog}
+        onConfirm={handleRevoke}
+        title="Revoke Permission"
+        description={`Are you sure you want to revoke access for "${toRevoke?.subjectName}" (${toRevoke?.subjectType})? They will immediately lose access to this workspace.`}
+        confirmText="Revoke"
+        loading={removePermissionMutation.isPending}
+      />
+    </>
+  );
+}
+
diff --git a/components/frontend/src/lib/config.ts b/components/frontend/src/lib/config.ts
index 98100b05d..9761919e7 100644
--- a/components/frontend/src/lib/config.ts
+++ b/components/frontend/src/lib/config.ts
@@ -15,5 +15,4 @@ export function getApiUrl(): string {
   // Server-side: directly call backend
   return BACKEND_URL
 }
-
-export { BACKEND_URL }
\ No newline at end of file
+export { BACKEND_URL }
diff --git a/components/frontend/src/lib/env.ts b/components/frontend/src/lib/env.ts
index 23f40d67e..be1b8a018 100644
--- a/components/frontend/src/lib/env.ts
+++ b/components/frontend/src/lib/env.ts
@@ -18,6 +18,9 @@ type EnvConfig = {
   // Version information (public, optional)
   VTEAM_VERSION?: string;
 
+  // Feedback URL (public, optional)
+  FEEDBACK_URL?: string;
+
   // OpenShift identity (server-side only, optional)
   OC_TOKEN?: string;
   OC_USER?: string;
@@ -58,6 +61,7 @@ export const env: EnvConfig = {
   BACKEND_URL: getEnv('BACKEND_URL', 'http://localhost:8080/api'),
   GITHUB_APP_SLUG: getEnv('GITHUB_APP_SLUG', 'ambient-code-vteam'),
   VTEAM_VERSION: getOptionalEnv('VTEAM_VERSION') || 'latest',
+  FEEDBACK_URL: getOptionalEnv('FEEDBACK_URL'),
   OC_TOKEN: getOptionalEnv('OC_TOKEN'),
   OC_USER: getOptionalEnv('OC_USER'),
   OC_EMAIL: getOptionalEnv('OC_EMAIL'),
@@ -71,6 +75,7 @@ export const env: EnvConfig = {
 export const publicEnv = {
   GITHUB_APP_SLUG: env.GITHUB_APP_SLUG,
   VTEAM_VERSION: env.VTEAM_VERSION,
+  FEEDBACK_URL: env.FEEDBACK_URL,
 };
 
 /**
diff --git a/components/frontend/src/services/api/rfe.ts b/components/frontend/src/services/api/rfe.ts
index f2e0cdf28..12f8937ce 100644
--- a/components/frontend/src/services/api/rfe.ts
+++ b/components/frontend/src/services/api/rfe.ts
@@ -116,16 +116,44 @@ export async function getRfeWorkflowStatus(
 }
 
 /**
- * Get artifacts for an RFE workflow
+ * Get artifacts for an RFE workflow by listing files from the spec repository
+ * This uses the /repo/tree endpoint to list files from the workflow's umbrella repository
  */
 export async function getWorkflowArtifacts(
   projectName: string,
   workflowId: string
 ): Promise<ArtifactFile[]> {
-  const response = await apiClient.get<GetArtifactsResponse>(
-    `/projects/${projectName}/rfe-workflows/${workflowId}/artifacts`
+  // First, get the workflow to retrieve repo URL and branch
+  const workflow = await getRfeWorkflow(projectName, workflowId);
+  
+  if (!workflow.umbrellaRepo?.url || !workflow.branchName) {
+    return [];
+  }
+  
+  // Use the /repo/tree endpoint to list files from the repository
+  const treeResponse = await apiClient.get<{ path: string; entries: Array<{ name: string; type: string; size: number }> }>(
+    `/projects/${projectName}/repo/tree`,
+    {
+      params: {
+        repo: workflow.umbrellaRepo.url,
+        ref: workflow.branchName,
+        path: '', // Root directory
+      }
+    }
   );
-  return response.artifacts;
+  
+  // Convert tree entries to ArtifactFile format
+  // Include both files (blob) and directories (tree)
+  const artifacts: ArtifactFile[] = treeResponse.entries.map(entry => ({
+    path: entry.name,
+    name: entry.name,
+    content: '', // Content not fetched in list view
+    lastModified: new Date().toISOString(), // Not available from tree endpoint
+    size: entry.size || 0,
+    type: entry.type as 'blob' | 'tree', // Preserve type for UI
+  }));
+  
+  return artifacts;
 }
 
 /**
@@ -225,3 +253,18 @@ export async function publishWorkflowPathToJira(
     { path }
   );
 }
+
+/**
+ * Link an existing session to an RFE workflow
+ */
+export async function linkSessionToWorkflow(
+  projectName: string,
+  workflowId: string,
+  sessionName: string,
+  phase?: string
+): Promise<{ message: string; session: string }> {
+  return apiClient.post<{ message: string; session: string }, { existingName: string; phase?: string }>(
+    `/projects/${projectName}/rfe-workflows/${workflowId}/sessions/link`,
+    { existingName: sessionName, phase }
+  );
+}
diff --git a/components/frontend/src/types/api/rfe.ts b/components/frontend/src/types/api/rfe.ts
index 4ef8bb697..74819d4bd 100644
--- a/components/frontend/src/types/api/rfe.ts
+++ b/components/frontend/src/types/api/rfe.ts
@@ -34,6 +34,7 @@ export type ArtifactFile = {
   content: string;
   lastModified: string;
   size: number;
+  type?: 'blob' | 'tree'; // blob = file, tree = directory
   agent?: string;
   phase?: string;
 };
diff --git a/components/frontend/static-prototype/README.md b/components/frontend/static-prototype/README.md
new file mode 100644
index 000000000..47c72bbe0
--- /dev/null
+++ b/components/frontend/static-prototype/README.md
@@ -0,0 +1,95 @@
+# vTeam Static HTML Prototype
+
+This directory contains a static HTML prototype of the vTeam user interface with dummy data. The prototype mirrors the actual application's sitemap and functionality for design and testing purposes.
+
+## 🗂️ Site Structure
+
+```
+static-prototype/
+├── index.html                          # Projects listing page
+├── styles.css                          # Global styles
+├── projects/
+│   ├── new/
+│   │   └── page.html                   # Create new project
+│   └── sample-project/
+│       ├── page.html                   # Project overview
+│       ├── rfe/
+│       │   └── page.html               # RFE Workspaces
+│       ├── sessions/
+│       │   └── page.html               # Agentic Sessions
+│       ├── keys/
+│       │   └── page.html               # API Keys
+│       ├── permissions/
+│       │   └── page.html               # User Permissions
+│       └── settings/
+│           └── page.html               # Project Settings
+└── integrations/
+    └── page.html                       # External Integrations
+```
+
+## 🎨 Features
+
+- **Responsive Design**: Works on desktop, tablet, and mobile devices
+- **Modern UI**: Clean, professional interface with consistent styling
+- **Dummy Data**: Realistic sample data for all sections
+- **Interactive Elements**: Buttons, forms, and navigation (visual only)
+- **Complete Sitemap**: Mirrors the actual vTeam application structure
+
+## 📱 Pages Included
+
+### Main Navigation
+- **Projects** (`index.html`) - List of all projects
+- **Integrations** (`integrations/page.html`) - External service connections
+
+### Project Pages
+- **Project Overview** - Dashboard with stats and recent activity
+- **RFE Workspaces** - Request for Enhancement workspaces
+- **Agentic Sessions** - AI-powered coding sessions
+- **API Keys** - Authentication key management
+- **Permissions** - User and team access control
+- **Settings** - Project configuration
+
+### Forms & Creation
+- **New Project** - Project creation form
+- **Permission Management** - User access forms
+- **Integration Settings** - Service configuration
+
+## 🚀 Usage
+
+1. **Open in Browser**: Simply open `index.html` in any modern web browser
+2. **Navigate**: Click through the links to explore different sections
+3. **Responsive Testing**: Resize browser window to test mobile layouts
+4. **Design Review**: Use for UI/UX reviews and stakeholder demos
+
+## 🎯 Use Cases
+
+- **Design Reviews**: Share with stakeholders for UI feedback
+- **User Testing**: Test navigation and information architecture
+- **Development Reference**: Visual guide for implementing the real application
+- **Documentation**: Screenshots and examples for documentation
+- **Prototyping**: Quick iterations on design concepts
+
+## 📊 Sample Data
+
+The prototype includes realistic dummy data:
+- 3 sample projects with different statuses
+- Multiple RFE workspaces in various phases
+- Agentic sessions with different completion states
+- API keys with different permission levels
+- User permissions with roles and groups
+- Integration status for popular services
+
+## 🔧 Customization
+
+- **Styles**: Edit `styles.css` to modify colors, fonts, and layouts
+- **Content**: Update HTML files to change sample data
+- **Structure**: Add new pages following the existing pattern
+- **Branding**: Replace logo and colors in the header section
+
+## 📝 Notes
+
+- All forms are visual only (no backend functionality)
+- Links navigate between static HTML pages
+- Responsive breakpoints at 768px for mobile
+- Uses system fonts for better performance
+- SVG icons for crisp display at all sizes
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI Feedback - 2025_10_30 15_56 EDT - Notes by Gemini.md b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI Feedback - 2025_10_30 15_56 EDT - Notes by Gemini.md
new file mode 100644
index 000000000..1f68288a7
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI Feedback - 2025_10_30 15_56 EDT - Notes by Gemini.md	
@@ -0,0 +1,55 @@
+Oct 30, 2025
+
+## Chat UI Feedback
+
+Invited [Bob Gregor](mailto:bgregor@redhat.com) [Charles Thao](mailto:cthao@redhat.com) [Michael Clifford](mailto:mcliffor@redhat.com) [Ryan Cook](mailto:rcook@redhat.com) [Jeremy Eder](mailto:jeder@redhat.com) [Gage Krumbach](mailto:gkrumbac@redhat.com) [Sally O'Malley](mailto:somalley@redhat.com) [Dana Gutride](mailto:dgutride@redhat.com) [Andy Braren](mailto:abraren@redhat.com) [Daniel Warner](mailto:dawarner@redhat.com) [Yahav Manor](mailto:ymanor@redhat.com)
+
+Attachments [Chat UI Feedback](https://www.google.com/calendar/event?eid=MWdzaWtqZGxxNnJvajd1M3ZlN25lMG50cDcgZGF3YXJuZXJAcmVkaGF0LmNvbQ) 
+
+Meeting records [Recording](https://drive.google.com/file/d/1DOhw6uHG1dA_oEZ9lZ8pBNp2YutiScbN/view?usp=drive_web) 
+
+### Summary
+
+Participants Gage Krumbach, Dana Gutride, Daniel Warner, Michael Clifford, and Andy Braren discussed API keys, with Dana Gutride suggesting they be tabled until Jira phase two and hidden from the UI for the POC, while Gage Krumbach noted their benefit for user authentication with an MCP server. Daniel Warner detailed changes to project information, sharing features, and session creation, confirming that 'Project Info' will move to the overview page, and presented a core proposal for workflow driving using synced form-based and chat interfaces, which Gage Krumbach liked. The group debated the necessity of a spec repository, with Gage Krumbach suggesting use cases without persistence, and Daniel Warner agreed with Dana Gutride that users should be able to start at later workflow steps if a repository is partially completed. Daniel Warner and Gage Krumbach clarified the difference between the local PVC and remote repository representation, while Michael Clifford and Andy Braren discussed abstracting away the need for users to set up a spec repository by using a default 'umbrella repo' or organization-level agent definitions, which Daniel Warner agreed would provide a better onboarding experience.
+
+### Details
+
+* **API Keys and Jira Integration** Gage Krumbach mentioned that API keys were initially intended for external web hook usage, such as a Jira webhook, to communicate with the ambient back end and kick off jobs. Dana Gutride suggested tabling the discussion of API keys until Jira phase two, recommending hiding the feature from the UI for the Proof of Concept (POC) because the use case is currently confusing. Gage Krumbach added that the keys would be beneficial once they have an MCP server for user authentication.
+
+* **Project Information and Sharing Features** Daniel Warner noted that the "Sharing" feature, previously named "permissions," is mostly unchanged from the current version, though Peter was reportedly confused by the term "permissions". Daniel Warner plans to move "Project Info" back to the overview page to help orient users and confirmed that "Project Settings" remain unchanged. They also explained that the selection to create an interactive or a headless session has been moved out of the form and that they had collapsed some options to provide reasonable defaults and keep users moving.
+
+* **Session Creation and Workflow Driving** Daniel Warner presented a core proposal for driving the workflow using two methods: a form-based approach and a chat interface, both of which would remain synced. Gage Krumbach confirmed that they like the proposed workflow. Daniel Warner moved the 'add spec repository' feature to the top of the form workflow because it is a prerequisite for subsequent actions like creating an RF.
+
+* **Spec Repository and Persistence Requirement** Gage Krumbach questioned whether a spec repository is strictly required, suggesting use cases where a user might only want to run something without persistence, similar to running a workbench without PVC in Roy. Daniel Warner asked how an end user would determine if they need persistence, to which Gage Krumbach replied that the system could track unsaved changes and prompt the user to add a spec repository to save their work. Gage Krumbach also mentioned future possibilities, such as a UX workflow that interacts only with a Figma MCP server and does not require a spec repository.
+
+* **GitHub Integration and Repository Setup** Daniel Warner described the scenario where a user does not have the GitHub app connected and is asked to provide a personal access token to connect and define their spec repository. They highlighted that the chat feature is useful for keeping a log of the workflow and tracking progress, though they noted that the team might choose not to use system messages for every single move. The process requires the user to seed the repository to get started, after which they are ready to select agents.
+
+* **Agent Selection and Workflow Sequencing** Gage Krumbach confirmed that all agents are inherently available because they are using the cloud, and selecting one specifically prompts the system to use it. Daniel Warner presented the command-based design for workflows, and Gage Krumbach emphasized that spec workflows are "very order based," and the system will reject running steps out of order (e.g., running 'plan' before 'specify'). Dana Gutride pointed out that if a repository already has some steps completed, users should be able to start at a later step, which Daniel Warner agreed to incorporate, allowing users to drop in or out of the workflow.
+
+* **File Editing and Developer Experience** Gage Krumbach asked if files within the workspace are editable or read-only. Daniel Warner stated their opinion that files should not be editable within the system for this demo, suggesting users rely on integrated platforms like GitHub for editing as it is more developer-native. Dana Gutride stressed that the ability to edit files against the PBC on the repo, a feature requested by Jeremy, should not be discarded and should be evaluated in context later.
+
+* **Chat Interface and Verbosity Concerns** Daniel Warner explained the chat interface, which initially only offers a 'help' command until a workflow is selected, suggesting a default help mode to encourage user interaction and comfort with the system. Dana Gutride raised concerns about Claude's verbosity, which can be distracting in the chat. Gage Krumbach confirmed that they had already worked on hiding system messages with a debug mode option, and they can make tool calls look more curated.
+
+* **Chat Constraints and Collaboration** Gage Krumbach suggested that the main, workflow-connected session should be more constrained and opinionated, focusing on human actions, while an independent, collaborative session could offer more flexibility with Claude for file iteration. Daniel Warner acknowledged that exposing "raw Claude" would require a system around it, such as a help code prompt, to manage the conversation flow. The chat workflow demonstrates completing an RF by using commands and adding context, resulting in a copy or view option.
+
+* **Git Remote Connection and Repository Representation** Gage Krumbach questioned where the connection to the Git remote is, noting the separation between the local Git environment in the pod and the remote repository. Daniel Warner initially assumed the repository displayed was a reflection of the remote, but Gage Krumbach clarified that the session view represents the local PVC in the pod, whereas the workflow page represents the remote. Gage Krumbach argued that the GitHub relationship is crucial because it allows external users to pull down the experience, but noted that not all PMs or UXers want to use GitHub.
+
+* **Spec Repository Definition and Workflow Requirements** Daniel Warner maintained that connecting to the repo satisfies two requirements: storage and providing the location of the agents. Gage Krumbach suggested that a spec repository is an input type to the workflow, and some workflows, such as one only touching Jira or updating Google Docs, may not need to output or store anything in GitHub. Michael Clifford proposed baking the spec repository into a default 'umbrella repo' to abstract away the need for users to set it up, which would help simplify the experience and accommodate users uncomfortable with GitHub.
+
+* **Decoupling Agent Definitions and User Onboarding** Andy Braren and Michael Clifford discussed the idea of a higher entity (like a workspace or organization) managing agent definitions and configurations, eliminating the need for users to connect a repository in every new session. Daniel Warner liked the idea of zooming out to have organizations, which could be controlled at an admin level, providing a "batteries included" experience. Gage Krumbach noted that users like Anna often want to edit their templates and agents, supporting the need for a customizable, layered approach where users can own a fork of their workflow.
+
+* **Collaboration and Synchronous Collaboration** Gage Krumbach asked how other personas, such as UXers and PMs, would collaborate within the same workflow, which Daniel Warner admitted they had not accommodated in the current design. Gage Krumbach suggested that users collaborate by connecting to the artifact repository, which would act as the controller, while collaborators use a more generic chat session. Andy Braren acknowledged the challenge of synchronous collaboration, especially for PMs and UXers who prefer tools like Google Docs, and raised concerns about potential conflicts and drift if multiple people work on the same artifact.
+
+* **Next Steps and Face-to-Face Meeting** Daniel Warner announced a follow-up session the next day with Sally to gather more feedback and potentially iterate on the design before the face-to-face meeting, which officially starts on Tuesday. Daniel Warner outlined the plan for the face-to-face meeting: having Gage Krumbach focus on a hard engineering problem (like VLM or semantic router) while Daniel Warner leads the workstream on lower-hanging fruit like onboarding.
+
+### Suggested next steps
+
+- [ ] Dana Gutride will table the discussion on API keys for Jira phase two and hide API keys from the UI for the PC until the Jira integration is ready.  
+- [ ] Daniel Warner will move the current overview page back to the overview page.  
+- [ ] Daniel Warner will update the workflow steps to allow users to pick up at any point in the workflow based on the repository's current state and change the steps to status messages.  
+- [ ] Gage Krumbach will be on the work stream for the VLM/Semantic router.  
+- [ ] Daniel Warner and Charles Thao will lead the workstream for lower hanging fruit kind of onboarding next week at the face to face meeting.
+
+*You should review Gemini's notes to make sure they're accurate. [Get tips and learn how Gemini takes notes](https://support.google.com/meet/answer/14754931)*
+
+*Please provide feedback about using Gemini to take notes in a [short survey.](https://google.qualtrics.com/jfe/form/SV_9vK3UZEaIQKKE7A?confid=zH_mXZ8KObclka1X46BlDxIQOAIIigIgABgBCA&detailid=unspecified)*
\ No newline at end of file
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI feedback session 2 - 2025_10_31 14_29 EDT - Notes by Gemini.md b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI feedback session 2 - 2025_10_31 14_29 EDT - Notes by Gemini.md
new file mode 100644
index 000000000..610f2306c
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI feedback session 2 - 2025_10_31 14_29 EDT - Notes by Gemini.md	
@@ -0,0 +1,74 @@
+Oct 31, 2025
+
+## Chat UI feedback session 2
+
+Invited [Bill Murdock](mailto:bmurdock@redhat.com) [Charles Thao](mailto:cthao@redhat.com) [Ryan Cook](mailto:rcook@redhat.com) [Jeremy Eder](mailto:jeder@redhat.com) [Sally O'Malley](mailto:somalley@redhat.com) [Gage Krumbach](mailto:gkrumbac@redhat.com) [Yahav Manor](mailto:ymanor@redhat.com) [Dana Gutride](mailto:dgutride@redhat.com) [Andy Braren](mailto:abraren@redhat.com) [Daniel Warner](mailto:dawarner@redhat.com) ~~[Bob Gregor](mailto:bgregor@redhat.com)~~ ~~[Michael Clifford](mailto:mcliffor@redhat.com)~~
+
+Attachments [Chat UI feedback session 2](https://www.google.com/calendar/event?eid=MzQyODZ1YThibWNyN2Y3cHFwOTJlbDkxNHEgZGF3YXJuZXJAcmVkaGF0LmNvbQ) 
+
+Meeting records [Transcript](?tab=t.1kef0mivmirr) [Recording](https://drive.google.com/file/d/17OpqYKnDChJ3jIts70L6oC967pztWES_/view?usp=drive_web) 
+
+### Summary
+
+Daniel Warner and Andy Braren discussed utilizing AI for prototype updates, leveraging Claude code to process feedback and generate changes, which Andy Braren aims to make easily accessible. Sally O'Malley reported external interest from IBM's Ana Sailor, which led to a discussion with Dana Gutride about the project's open-source nature and the need to manage its initial user experience while sharing the prototype, which Dana Gutride encouraged as a means to align on changing how people work in Red Hat. The participants, including Daniel Warner, Dana Gutride, and Bill Murdock, clarified IBM's Watsonx orchestration, and Daniel Warner presented multiple UI updates for the project and session views, including removing extraneous tabs and clarifying naming conventions, while Bill Murdock and Sally O'Malley raised concerns about confusing terminology like "headless session." The participants also discussed the necessity of a hosted platform for multi-agent swarm functionality and integrations with business systems, with Gage Krumbach and Daniel Warner noting the importance of a server for swarming and complex business integrations, and Gage Krumbach further detailing the technical hurdles in implementing the changes, particularly regarding Git integration and the shifting structure of the workflow and session pages.
+
+### Details
+
+* **Utilizing AI for Updates** Daniel Warner shared an experiment involving using Claude code to process feedback and meeting notes into a change set and plan for prototype updates. Andy Braren noted they are working to make this type of pipeline, which takes recordings and feedback to rapidly generate updates, easy for everyone. Gage Krumbach mentioned using the Slack MCP to identify stakeholders by reviewing the history ([00:01:01](?tab=t.1kef0mivmirr#heading=h.fmembd9qmred)).
+
+* **External Interest in the Prototype** Sally O'Malley reported that Ana Sailor, a distinguished engineer at IBM, was impressed with the work and asked to record a demonstration to share with their team for potential use. Sally O'Malley made clear that the project is early, open source, and has not yet been tested for code quality ([00:02:06](?tab=t.1kef0mivmirr#heading=h.56l1uydmiauq)). Dana Gutride commented that they would not stand in the way of excitement about the project becoming a movement, but emphasized the need to control the process and ensure a positive initial user experience ([00:04:58](?tab=t.1kef0mivmirr#heading=h.wpeg9w2j58g8)).
+
+* **IBM's Watsonx Orchestration** The discussion addressed IBM's agentic orchestration solutions, with Dana Gutride mentioning uncertainty about the Orchestrate solution being integrated with Watsonx. Daniel Warner confirmed that the Orchestrate project would be separate from other integrated pieces like document ingestion in the Watsonx platform, according to Danielle and Peter ([00:03:04](?tab=t.1kef0mivmirr#heading=h.w85rjpjedcfs)). Bill Murdock clarified that Watsonx is the name for all Watsonx products and that only Watsonx.ai is expected to be coming over ([00:04:06](?tab=t.1kef0mivmirr#heading=h.wyu90do789om)).
+
+* **Prototype Sharing and Goals** Daniel Warner sought confirmation on whether they could post a video of the prototype's functionality, which runs on the ambient code platform, to a large group like in UX. Dana Gutride encouraged sharing, stating that their goal is not to sell something but to change the way people work in Red Hat, and that excitement about the work will help align on what that looks like. Sally O'Malley noted that Ana Sailor was particularly impressed by the Git integration aspects ([00:05:45](?tab=t.1kef0mivmirr#heading=h.rvooapyx2krd)).
+
+* **Git Integration and Collaboration** Dana Gutride emphasized that using Git as the source of truth is crucial for keeping developers connected. Bill Murdock raised a concern about the friction introduced by pushing and pulling to Git for frequent iterations using Claude code ([00:06:53](?tab=t.1kef0mivmirr#heading=h.6pbssnt45dzw)). Dana Gutride agreed about the friction but suggested it is the same friction Git allows for team collaboration, noting that the project should allow for flexibility, from single use to team collaboration without being overly prescriptive ([00:07:50](?tab=t.1kef0mivmirr#heading=h.3bvgrh9xilb9)).
+
+* **Project Page UI Updates** Daniel Warner presented design updates for the project page, including minor visual changes and moving action items closer to the table they modify ([00:09:19](?tab=t.1kef0mivmirr#heading=h.pr0t1nxpnhc)). The most significant change was bringing the running status of projects up to the project page to function as a dashboard and direct attention. Daniel Warner also added default values for project name and display name to ease early user onboarding ([00:10:24](?tab=t.1kef0mivmirr#heading=h.sy5dian98oxv)).
+
+* **User Flow and Context Orientation** To maintain user context and orientation, Daniel Warner explained that after creating a new project, the user would remain on the projects page, and the new project would be added to the table, instead of immediately taking them to the project page. Bill Murdock questioned the need for both display name and project name, which Gage Krumbach clarified is a Kubernetes concept necessary for having an ID separate from the potentially non-unique display name ([00:11:22](?tab=t.1kef0mivmirr#heading=h.mds4yc87jtpz)).
+
+* **Project and Session View Changes** In the project page, sessions were made front and center to drive users to them ([00:12:17](?tab=t.1kef0mivmirr#heading=h.lhpr0v6t829j)). Daniel Warner planned to remove the project information tab and incorporate the details into the project header to better orient the user within the project. Additionally, Daniel Warner intended to remove the workflows tab to clean up the UI, as it created an extraneous second flow for getting into a session ([00:13:25](?tab=t.1kef0mivmirr#heading=h.aw4zrmoipge1)).
+
+* **API Keys and Workflows Management** The API keys section, which had caused early user confusion, was suggested to be put aside until a need for a third-party integration like Jira arises. Andy Braren clarified that while the initiation of a session from a workflows area may not be needed, there is still a need for a place to manage and add workflows available for a project, perhaps within project settings ([00:14:16](?tab=t.1kef0mivmirr#heading=h.ic6ltcudlsca)).
+
+* **Session Creation and Headless Sessions** Daniel Warner moved the choice between creating an interactive or a headless session into a selection menu instead of the form ([00:16:06](?tab=t.1kef0mivmirr#heading=h.b061fum683gv)). To ease onboarding, they collapsed fine-grain model control options into an advanced tab, as these options were adding noise to the view for early users ([00:17:01](?tab=t.1kef0mivmirr#heading=h.rewh79fmk1c)). Bill Murdock and Sally O'Malley raised concerns about the term "headless session" being confusing for new users ([00:17:52](?tab=t.1kef0mivmirr#heading=h.xlnyr5gel9c9)). Gage Krumbach suggested that everything will likely become interactive, with headless capabilities contained within a workflow, making the separate headless session concept unnecessary for initiation ([00:18:45](?tab=t.1kef0mivmirr#heading=h.tgehxhyg8pxi)).
+
+* **Interactive Session Interface** The interactive session includes a familiar chat interface and a form-based workflow sidebar that both remain synced. Daniel Warner noted that in the existing UI, a spec repository is required before most actions, so this is open by default ([00:19:36](?tab=t.1kef0mivmirr#heading=h.7x85vxi9imqu)). Daniel Warner explained that without a selected workflow, users only have generic session capabilities like chatting with Claude and using the help command ([00:20:43](?tab=t.1kef0mivmirr#heading=h.gzcen8rydbgm)).
+
+* **Spec Repository Setup** The current design requires the user to enter their GitHub name and a personal access token to connect and select their spec repository if they haven't been set up by an admin. Sally O'Malley suggested adding a popup description to educate users on what a spec repo is. Bill Murdock proposed handling the repo request through the chat, allowing the bot to intelligently guide the user ([00:21:43](?tab=t.1kef0mivmirr#heading=h.qbl3qx8n6y5s)).
+
+* **Agent Selection and Behavior** The chat interface shows the progress log and can guide the user through the setup process ([00:22:38](?tab=t.1kef0mivmirr#heading=h.9yzx9eo0rfh8)). After seeding the repository, users can select agents. Daniel Warner noted that if no agents are selected, Claude automatically picks agents based on the user's request, a feature Gage Krumbach confirmed ([00:23:38](?tab=t.1kef0mivmirr#heading=h.nj1hqfws8vf3)). Dana Gutride suggested hardcoding this auto-selection behavior and including an info button to educate users that it is happening ([00:24:42](?tab=t.1kef0mivmirr#heading=h.gcu5unaud168)).
+
+* **RF and Spec Kit Workflow Naming** Bill Murdock questioned the initial step of the "create RF workflow," which first creates an RF.md and then a spec.md ([00:25:53](?tab=t.1kef0mivmirr#heading=h.quug5sev6xg5)). Sally O'Malley suggested renaming RF.md to Idea.md ([00:26:46](?tab=t.1kef0mivmirr#heading=h.a8ebdew4o2pz)). Dana Gutride noted that RF (Request for Feature) is an organizational standard for Product Managers (PMs), while specification (Spec) is needed for engineering ([00:27:42](?tab=t.1kef0mivmirr#heading=h.kg0xq3ra3ye1)). The consensus was that PMs should focus on iterating on the idea/RF, and that there is a need to distinguish the RF workflow from the specification process for developers ([00:29:38](?tab=t.1kef0mivmirr#heading=h.rb1f2bqrltsy)).
+
+* **Workflow Customization and User Types** Gage Krumbach emphasized that there are two types of users: power users who run specific commands, and "workflow runners," such as PMs, who should be taken through a guided journey by the platform ([00:33:45](?tab=t.1kef0mivmirr#heading=h.1f96jkltiqdu)). The broader consensus shifted towards the need for a generic platform where users can define and run whatever workflows they desire, with the current create RF workflow serving as an illustrative example ([00:37:06](?tab=t.1kef0mivmirr#heading=h.hucdv8eoywsg)) ([00:39:05](?tab=t.1kef0mivmirr#heading=h.c4r1zvi0t45x)).
+
+* **Artifact Interaction and Iteration** Daniel Warner confirmed that when a file artifact is created in the current design, it opens in a new window, which could be the GitHub editor, for manual editing. Bill Murdock expressed a preference for interactive iteration on the artifact within the session, rather than manual editing ([00:41:09](?tab=t.1kef0mivmirr#heading=h.3nzhtajabw6q)) ([00:42:57](?tab=t.1kef0mivmirr#heading=h.7tejs9nhzkgb)). Sally O'Malley clarified that iterating on the artifact is possible through the chat interface while the session is alive ([00:43:43](?tab=t.1kef0mivmirr#heading=h.ukbjutwrcfxv)).
+
+* **Local vs. Hosted Platform** Bill Murdock expressed a desire for a local, blank slate redesign ([00:45:36](?tab=t.1kef0mivmirr#heading=h.f3idc0zd7flm)). Gage Krumbach argued that a hosted agent or workflow service is necessary, especially because PMs do not use tools like Cursor, and for the swarm use case which involves collaboration and context switching across multiple projects ([00:46:28](?tab=t.1kef0mivmirr#heading=h.hjml4z5xd57v)) ([00:50:13](?tab=t.1kef0mivmirr#heading=h.lmbtrlmi1yjl)). Andy Braren agreed that local use cases, potentially to handle personal context or privacy, have a place, and that lighter local setups, possibly using Kind clusters instead of CRC, are being pursued ([00:47:28](?tab=t.1kef0mivmirr#heading=h.sneigyjr3dat)).
+
+* **Multi-Agent Swarm and Business Integrations** Gage Krumbach highlighted that the swarming aspect, where multiple agents and users collaborate on a flow, is a main end goal, which is why a server is required ([00:49:15](?tab=t.1kef0mivmirr#heading=h.xooxulpi5wge)). Daniel Warner emphasized that the multi-agent setup and necessary integrations with business systems like Jira contribute to the necessity of a hosted solution that lives on a cluster ([00:54:04](?tab=t.1kef0mivmirr#heading=h.cqui21mxifc9)).
+
+* **Future of Workspaces and Platform Development** Andy Braren suggested that collaboration on artifacts and easier context switching via an agentic inbox or tabs are future augmentations ([00:52:21](?tab=t.1kef0mivmirr#heading=h.zhyhrazem56h)). The need for another level of organizational hierarchy, like a "workspace" or " team," was also suggested for PMs to collectively manage their workflows ([00:52:59](?tab=t.1kef0mivmirr#heading=h.4lcg4vl6rof3)). Andy Braren and Sally O'Malley agreed to aim to implement the current design in the next week, suggesting an accelerated path forward for the prototype's real components ([00:57:28](?tab=t.1kef0mivmirr#heading=h.7her7idmbsuv)).
+
+* **Upcoming Project Structure and Travel Plans** Sally O'Malley confirmed that the team will be present on Monday, though Gage Krumbach mentioned they would be traveling for half of the day and working on the plane. Daniel Warner shared their impression from a conversation with Bob that the team would be split into different projects, with a core group including Daniel Warner, Andy Braren, and Bob likely working on a specific project ([00:57:28](?tab=t.1kef0mivmirr#heading=h.7her7idmbsuv)). Gage Krumbach identified multiple workstreams, including one focused on the UX flow and another, "bring your own plugin," that Michael and Daniel Warner are involved in ([00:58:22](?tab=t.1kef0mivmirr#heading=h.pt6bg3neq2ot)).
+
+* **Technical Changes and Frontend Work** When Sally O'Malley asked if the changes to achieve Daniel Warner's demo were mostly front-end, Gage Krumbach explained that there is a fundamental technical challenge because the "workflow page" has been removed and merged into "session pages," requiring bridging the technical gap between the GitHub remote representation and the workspace representation. Gage Krumbach noted that while they hope to avoid visual changes, resolving the underlying technical complexity is the biggest task, alongside quick fixes and more fundamental changes ([00:59:31](?tab=t.1kef0mivmirr#heading=h.1c0ri5rr58iq)). Daniel Warner asked the team if they preferred a fork or push access to share the branch with the static prototype demo, and Sally O'Malley and Gage Krumbach indicated that a fork branch should be fine, but Sally O'Malley also suggested pushing to the main branch ([01:00:36](?tab=t.1kef0mivmirr#heading=h.ruumis91jypr)).
+
+* **AI-Assisted Code Implementation** The team discussed using an AI model to implement the static HTML prototype into the existing codebase. Andy Braren suggested trying this approach next week if the APIs are available, which Gage Krumbach thought would be successful ([01:01:34](?tab=t.1kef0mivmirr#heading=h.kcn9qtdokczq)). Sally O'Malley questioned if Opus is the best model for this, to which Gage Krumbach suggested that any max model would do fine and that better prompting is more critical than a bigger model. Daniel Warner was highly optimistic about this approach if the work was broken up, especially since the front-end framework (shad CN or similar) seems straightforward and compatible with Claude ([01:02:19](?tab=t.1kef0mivmirr#heading=h.ibij613pn9h)).
+
+* **Fundamental Technical Hurdles for Implementation** Gage Krumbach expressed the need to whiteboard complex inner workings because of two key challenges: the pod spin-up time and the Git integration. They noted that the current demo leans towards a constantly running cloud code session, which fundamentally changes things, and the necessary Git integration is not currently present and requires careful work to avoid losing features. The speakers concluded the main portion of the meeting, with Gage Krumbach, Daniel Warner, and Bill Murdock exchanging thanks ([01:03:17](?tab=t.1kef0mivmirr#heading=h.dbpzl365c3zr)).
+
+### Suggested next steps
+
+- [ ] Daniel Warner will send the video later today or write it up in Slack about the cool experiment taking feedback and meeting notes to have Claude code munch it into a change set and a plan.  
+- [ ] Daniel Warner will work on a second prototype, using existing work, based on the discussion, and aim to have it ready for next week's meeting.  
+- [ ] Daniel Warner will run the plan to update the prototype and record the progress.  
+- [ ] Gage Krumbach will share the document related to the workstreams.  
+- [ ] Daniel Warner will make his branch with the prototype available by pushing a branch to the main project.  
+- [ ] Andy Braren, Gage Krumbach, Sally O'Malley, and Daniel Warner will try next week to use Claude to compare the code bases and figure out the implementation using the available APIs.
+
+*You should review Gemini's notes to make sure they're accurate. [Get tips and learn how Gemini takes notes](https://support.google.com/meet/answer/14754931)*
+
+*Please provide feedback about using Gemini to take notes in a [short survey.](https://google.qualtrics.com/jfe/form/SV_9vK3UZEaIQKKE7A?confid=G25WoVgp4zGUAB4vwFWNDxITOAIIigIgABgBCA&detailid=unspecified)*
\ No newline at end of file
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI feedback session 2 - 2025_10_31 14_29 EDT - transcript.md b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI feedback session 2 - 2025_10_31 14_29 EDT - transcript.md
new file mode 100644
index 000000000..d79f2bd17
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/Chat UI feedback session 2 - 2025_10_31 14_29 EDT - transcript.md	
@@ -0,0 +1,856 @@
+Oct 31, 2025
+
+## Chat UI feedback session 2 \- Transcript
+
+### 00:00:00
+
+   
+**Daniel Warner:** so good. Oh my gosh, I look like um in the afterlife over here.  
+**Andy Braren:** speaking to us from the end. Yeah.  
+**Daniel Warner:** There we go. I think that's better.  
+**Andy Braren:** Nice.  
+**Daniel Warner:** I've got a I've got a cool experiment going now. I'll I'll send you the video later today, Andy. Actually, I'll send it to everybody or I'll just write it up in Slack, which is like taking all this feedback and the meeting notes and having Claude code munch it into a change set and then a plan.  
+**Andy Braren:** Sweet.  
+**Daniel Warner:** And I haven't I haven't let it rip yet to to update the prototype because I wanted to make sure Sally got her two cents in before we do that. But um but I have high hopes.  
+**Andy Braren:** Awesome.  
+**Daniel Warner:** Yeah.  
+**Andy Braren:** Trying to do the same and make that an easy pipeline for everyone because we're doing that for mass and stuff too. Just grab the recordings, take the feedback, turn into rapid updates. It's awesome.  
+**Daniel Warner:** Yeah, that's awesome.  
+   
+ 
+
+### 00:01:01
+
+   
+**Gage Krumbach:** I've been doing that with the Slack MCP. I just did one now where I looked at all our history identifying the stakeholders. It just completed like an hour ago.  
+**Daniel Warner:** Yeah, I gota I got to hook up that Slack MCP.  
+**Gage Krumbach:** It's cool.  
+**Daniel Warner:** I tried a while ago and that we didn't have permissions to do it, but Which  
+**Gage Krumbach:** Yeah, you have to do it kind of key way, but do what you got to do.  
+**Andy Braren:** Yeah, thanks for passing that along, Gage. I haven't tried it yet, but yeah, sounds good. It's still not official. Like, it still requires uh yeah, doing something in dev tools and using the web version.  
+**Gage Krumbach:** Yeah, I talked to someone from Slack and they said the official one won't be until uh 2026, sometime mid 2026\. So,  
+**Sally O'Malley:** Hey.  
+**Andy Braren:** Yeah.  
+**Daniel Warner:** Hey, Sally.  
+**Sally O'Malley:** Hi. Um, before we get started, can I mention something? I I know.  
+**Daniel Warner:** This is a very very structured meeting.  
+**Sally O'Malley:** I'm like, of course, I'm going to I um I just got off a call once a month.  
+   
+ 
+
+### 00:02:06
+
+   
+**Sally O'Malley:** I meet with Ana Sailor. She is in IBM. Uh she's a distinguished engineer in IBM, but we just met at at Summit one year.  
+**Dana Gutride:** We're not  
+**Sally O'Malley:** And so, um Dana, this is going to be pertinent to you, too. I just got off a call with my friend, her name's Ana Sailor, and uh she's a distinguished engineer at IBM and uh she works on all things agents and policy and Oscale and um security. And anyways, um I was showing her what I've been working on and she was blown away and she made me stop so that she could record it and I'm hoping this is okay with you.  
+**Daniel Warner:** Beautiful.  
+**Sally O'Malley:** Is it? And then she wants to show it to her team and she wants them to start using it. This this just just happened. I did not mean for this to happen. I just have to and I told her that we only use it for open source. It's so early. I'm like we haven't tested how good the code is or anything like so yeah that happened.  
+   
+ 
+
+### 00:03:04
+
+   
+**Sally O'Malley:** Just wanted to let you know.  
+**Dana Gutride:** All right.  
+**Sally O'Malley:** I I told her like Yeah. Yeah.  
+**Dana Gutride:** Yeah, I mean IBM has I I know their orchestrate solution is not coming over with Watson X from what I've heard. So it's not clear and Daniel maybe you've actually Bill and Daniel maybe you've heard more. So like the agentic orchestration that IBM has I haven't heard any information on that that coming over as part of the uh you know what's coming back.  
+**Daniel Warner:** Yeah. No, I asked about that explicitly and um Watson the the orchestrate project is going to be separate from the other pieces that they're trying to integrate now with the like document ingestion and all that. Um I can't remember what what the name of that Watsonx platform is. Might just be Watsonx. Um that's separate from orchestrate. At least that's what Danielle said and what Peter said.  
+**Dana Gutride:** Yeah.  
+**Bill Murdock:** No, Watson X is the name for everything together like all the Watsonx products. So, it couldn't be Watson X, but I don't know what you're talking about either.  
+   
+ 
+
+### 00:04:06
+
+   
+**Daniel Warner:** Orchestrate not coming over.  
+**Bill Murdock:** Sorry.  
+**Daniel Warner:** Yeah.  
+**Bill Murdock:** Orchestra is not coming over, but I think lots of other Watsonx stuff isn't coming over either.  
+**Daniel Warner:** Yeah.  
+**Sally O'Malley:** What?  
+**Bill Murdock:** Like Watsonx data, Watsonx gov. I don't think it's coming over. As far as I know, it's just Watsonx.ai.  
+**Sally O'Malley:** Do you want me to have her reach out to you before she shows it to her team?  
+**Dana Gutride:** I don't care. I mean, we just can't make it available right now because of like all the cloud stuff, right? Like, we're just we're too dependent on I think I think we would love to have other people pick it up, right?  
+**Sally O'Malley:** That's what I told I told her. Yeah. And but like I think she was thinking they would just run it themselves. I mean it is an open-source project right.  
+**Dana Gutride:** This this is a weird time because if we move this like I I mean Jeremy and I like we'll probably talk, but there's this thing that happens when people get excited about something and you can't stop it when it becomes a movement.  
+   
+ 
+
+### 00:04:58
+
+   
+**Sally O'Malley:** Okay. Okay.  
+**Dana Gutride:** So, I'm not going to get in the way and I think we would be it would be a mistake to stop it, but like trying to control it is really difficult, but we need to make sure that we don't lose people at the same time, which is why I've been like on this discipline kick with with us.  
+**Sally O'Malley:** Yeah.  
+**Dana Gutride:** So, yeah, I don't want to get in the way, right?  
+**Sally O'Malley:** Mhm.  
+**Dana Gutride:** This is why we're trying to do it in the open, but we've got to figure out like like let's get that that first five minutes of using this to be like heavenly, right? And then Yeah.  
+**Sally O'Malley:** Yep. I told Yeah. I told her. Yeah. Yeah. All right.  
+**Dana Gutride:** But yeah, that's cool.  
+**Sally O'Malley:** Cool. I I think it's it's totally fine.  
+**Daniel Warner:** All right.  
+**Sally O'Malley:** Yep.  
+**Daniel Warner:** I actually have a I have a related question for you then, Dana, which is so I took the the feedback that we that I've gotten on this prototype from Slack and from the session yesterday and sort of used Claude code to munchge it into a plan.  
+   
+ 
+
+### 00:05:45
+
+   
+**Daniel Warner:** Um, and I'm going to just run the plan. Um, and I'm recording my progress as I go because I thought that it would be of interest to several groups. Is it is it a problem for me to because I go through some of the functionality in this in on ambient code platform. Is it a problem if I post that to a large group like in UX or should I No. Okay.  
+**Dana Gutride:** No, we we are like we want to lead or at least facilitate the way where other people can use this as much as possible, you know. Yeah. I I think that's this is like our goal is not to build like not to sell something that everyone loves, right? Our goal is to change the way people work in Red Hat, right? And and if people are excited about what we're doing, then that's going to help us align on what that looks like. Right? This is just a means like a fun way of getting there.  
+**Sally O'Malley:** She was Yeah, she was blown away by things I didn't even think she like I didn't I as she was getting excited about I was like wow this is really cool like all of the git stuff all of the git integration and like it's just uh we've yeah we have a lot going on in this project but um yes  
+   
+ 
+
+### 00:06:53
+
+   
+**Dana Gutride:** Yeah. Yeah. Git is like that's why I Jira like Yeah, we'll get there. I don't I don't personally care about Jira, but but having Git as a source source of truth is going to be the thing that keeps developers connected.  
+**Sally O'Malley:** do you see my checklist in Jira. Did you look at it?  
+**Dana Gutride:** Yeah, I saw you. I s  
+**Sally O'Malley:** It's amazing. But I did fail gave G after this meeting. We'll let's stay on and like get your PR merge.  
+**Gage Krumbach:** Yeah.  
+**Sally O'Malley:** All right.  
+**Bill Murdock:** I I mean get stuff has pros and cons though because like it it's really nice if you're just using clawed code to be able to like make a change, test it, make a change, test it, make a change,  
+**Daniel Warner:** All right. So,  
+**Bill Murdock:** test it, make a change, test it. If you have to push it to get and pull it from git every time, that's that's friction.  
+**Dana Gutride:** Oh yeah, I agree. I but I think the friction is the same friction that git allows for with a team, right?  
+   
+ 
+
+### 00:07:50
+
+   
+**Dana Gutride:** As soon as you need to collaborate with other people, you need get in the room, right? If you're but but when you don't build like there's no friction requirement. If you just want to use spec locally, then then that's fine. But I I think like it it allows however engaged as you need to be from like single all the way through. And I don't think we need to be prescriptive in that. I think teams will pick it up and use it the way they they organize.  
+**Bill Murdock:** Yeah, I'm just saying that it'd be nice if there was a way to be have an integrated both where you can you can iterate locally as much as you want and then automatically push it to get with one click or something like that.  
+**Dana Gutride:** Yeah, I think a Yeah, but that makes that's not that's not going to be hard to do.  
+**Bill Murdock:** Um, I don't know how we get there yet.  
+**Dana Gutride:** Just the same way like sometimes you do a git and init locally and you start with your own git repo and then you don't even have a repository on GitHub yet until you're ready or sometimes you start with a repo and then like I think that that flow will work for us.  
+   
+ 
+
+### 00:08:43
+
+   
+**Dana Gutride:** We're not going to be Yeah, we'll work through that.  
+**Bill Murdock:** Yeah, but I think it's a little hard because like Ambient Code Platform is running out on a cloud somewhere and it's got to push all the stuff back to your local hard drive, I guess, to um Yeah, sounds  
+**Daniel Warner:** Cool.  
+**Dana Gutride:** I think that's that's a good one to work on.  
+**Bill Murdock:** good.  
+**Sally O'Malley:** I don't know.  
+**Daniel Warner:** So, I will just I'll walk through the flow. Um, and you guys can just offer up feedback. I don't know, Bill and Sally if you guys if you watch the video, but I think it's helpful.  
+**Bill Murdock:** I I watched I watched the video but I did not watch the recording of yesterday's session.  
+**Daniel Warner:** Yeah.  
+**Bill Murdock:** I didn't have time for that. Sorry.  
+**Daniel Warner:** Okay. I'll I'll point out what's going to change. I'm I'm doing the thing that irritates me, which is presenting designs where we already have feedback on it, but I wanted before I made any changes, I wanted to make sure everybody felt like, you know, everyone got ample  
+   
+ 
+
+### 00:09:19
+
+   
+**Bill Murdock:** Sounds good.  
+**Daniel Warner:** opportunity to chime in. Yep.  
+**Bill Murdock:** Yeah, I felt like I had a bunch of changes, but hopefully they're already in. So, so you'll go over them as you go. That sounds  
+**Daniel Warner:** All right. Cool. So, um, so this is the projects page. Um, not much has changed on this page. uh reorganize a things a little or not reorganize but just clean things up a little bit, added in some dividers, visual changes, that type of stuff. But it's the same just like super basic theme. Um the integrations um tab or navigation item I pulled out of the the user menu, but Gage has already had some feedback on that um that that it doesn't really make sense for it to be there. we got to move it back into the the user menu to sort of like reinforce the idea that it's like scoped to users. Um the action items I just brought them down a little bit closer to the table that they modify um as opposed to having them up here in sort of like more of a global space.  
+   
+ 
+
+### 00:10:24
+
+   
+**Daniel Warner:** Um, and the I guess the the most major change here is I brought the running status for projects that have running sessions in them um up to the projects page just so that it could function a little bit more like a dashboard and give people an insight into like what they may more urgently need to look at because it's it's running or or it's in process. So don't even know if that's possible, but I think it would be helpful um in just in terms of like directing attention. So in this case like uh you can create a new project. Um one small usability upgrade but I think an important one is just putting in default values for the project name and and display name. Um this is like this is just for early users for ease of onboarding that type of stuff. I watched two sessions in a row where the person like had to take multiple runs at this forum in order to get it going. So I figure two clicks to create a project and we're off to the races.  
+   
+ 
+
+### 00:11:22
+
+   
+**Daniel Warner:** Um, so instead of taking you directly to the project page, which is what happens now in the UI, we stay on this page. Um, and and the new project is is added to the table. Um, I did that because for the same reason those same two sessions there, the people were like scrolling around. They were trying to parse sort of like where they were. um it wasn't evident to them that they had entered into a project um or that they had entered into a session for that matter. So um just trying to help the user keep context and keep them oriented. So create a new project and then if you want to go and look at a project you just click on it same as you do now.  
+**Bill Murdock:** Do we really need Sorry to interrupt, but do we really need both display name and project name?  
+**Daniel Warner:** Um, so yeah, it's a pattern that ex  
+**Bill Murdock:** I'm not sure I understand why we have one of each.  
+**Gage Krumbach:** It's a Kubernetes thing. So if you people want to see the Kubernetes name, it's the ID.  
+   
+ 
+
+### 00:12:17
+
+   
+**Gage Krumbach:** So you can have things that have the same display name. So it's good to have the ID.  
+**Bill Murdock:** Okay, I guess fair.  
+**Daniel Warner:** that exists on everything that I've worked so far at Red Hat, which I've not been here long, but the projects that I've been on all involve that. And I assume that it is just what Gage said, which is like it's specific to like Kubernetes-based projects and probably has like value in terms of like the admin or setup or whatever. Um anyway, so now you're on the project page and not a ton has changed here. um the the sessions have been sort of like put front and center um because from seeing the the onboarding that people are going through like we're really trying to drive them to a session. So I wanted to make that more prominent in the project view. So here we are on the projects view and the sessions are front and center. Um, now you know, Gage's initial feedback, I know you kind of walked it back, but I I think it I think your first impression was right, which is like it's not immediately apparent here that I'm at the project level.  
+   
+ 
+
+### 00:13:25
+
+   
+**Daniel Warner:** So, I think um what I'm going to do is and like Jeremy had suggested in Slack to um just ditch this product in project information tab and I'm just going to bring some of this information into the project header to make it make it sort of like really say okay you're in a project. um the workflows tab. Uh Dana suggested yesterday just pulling this out um because it sort of it creates sort of a second flow for getting into a session and it just feels extraneous at this point. So I think to clean things up, we'll probably remove the workflows tab as well.  
+**Bill Murdock:** So what hap So how do you get into a a session?  
+**Daniel Warner:** Uh we'll get into that.  
+**Bill Murdock:** You just go into sessions. Okay, cool. Sorry.  
+**Daniel Warner:** No, no, no. I I'll get there. I'm just walking through this Right.  
+**Bill Murdock:** This is just a different way to get into sessions is going away. It's not you're going to get there. Okay, cool.  
+   
+ 
+
+### 00:14:16
+
+   
+**Daniel Warner:** Right. Um and so API keys, uh this caused a little bit of confusion with some of the early users and yesterday, um I can't remember who suggested it, but basically saying like until we have like a full-fledged Jira integration or some other thirdparty integration, we don't really need this API key se uh section. So we can like put it to the side and then once we have something to offer people like okay give Jira you know an API key so that it can access this workflow um then then we'll add it back in. Yeah, Bill.  
+**Bill Murdock:** Uh, I guess I was just confused by what it's trying to do.  
+**Daniel Warner:** Yeah, Andy.  
+**Andy Braren:** Yeah, one clarification work on your workflows point. I remember that discussion from yesterday. I think Danny, your point, we also discussed like moving that workflows area or something and making it like a workflow management area potentially. Um maybe it's within project settings or whatever, but like having some place to manage and add or whatever the workflows that are available to you inside this particular project is probably still a need, but the need for initiation  
+   
+ 
+
+### 00:15:09
+
+   
+**Dana Gutride:** Yeah, I think so.  
+**Andy Braren:** from that workflows area probably isn't needed. I think that's what we Yeah.  
+**Daniel Warner:** Okay.  
+**Bill Murdock:** Do we really need separate concept of workflow in session? I don't know. Maybe. Yeah, I guess.  
+**Daniel Warner:** Yeah.  
+**Dana Gutride:** Yeah, these are like the core things other teams will bring to do their to do their type of work, which we're hearing a lot of request for those already.  
+**Gage Krumbach:** Yeah.  
+**Sally O'Malley:** What do you think about calling it like a generic session versus a workflow? Like because a workflow is a more structured session. So, but you said you you're going to move the workflows into the sessions. You're going to walk through that part.  
+**Daniel Warner:** Yeah. Yeah. I I am.  
+**Sally O'Malley:** Okay.  
+**Daniel Warner:** So, I'll just I'll cover one more thing and then we'll we'll get into the sessions here, which is sharing. This used to be called permissions. Now, it's called sharing. Just to try and clarify what that is.  
+   
+ 
+
+### 00:16:06
+
+   
+**Daniel Warner:** Um, nothing else has changed in this view. Yeah. page.  
+**Gage Krumbach:** Uh, sorry it was on the workflow stuff. If we come back to it, we can talk about it.  
+**Daniel Warner:** All right. So, here's where here's where you land. Sessions are front and center. Um, you can click into a session by clicking on any one of these or you can create a new session similar to the way that you can do now, except I moved the choice of creating an interactive session or a headless session into this into the select instead of the form. So if you choose interactive session, it follows the same pattern as creating a project which is um you just sort of like have reasonable defaults here and you can choose to create a session and it creates it in the table. It doesn't take you strictly straight to the session view. Um also uh I did collapse a lot of the options around like fine grain model control into like an advanced tab type of situation.  
+   
+ 
+
+### 00:17:01
+
+   
+**Daniel Warner:** Um, this is really just to to ease onboarding. You know, I didn't want to like remove any of the functionality. I just um the these things are like were not even addressed by the early users and they just kind of were adding noise to the view. So, I I just wrapped them up for now. So, you create a session. Uh, okay. We got hands up here. Sorry. Like my like it's really hard for me to see the chat window. So, also feel free to just cut me off and chime in, but  
+**Bill Murdock:** Yeah, sounds good. Sally's first.  
+**Sally O'Malley:** Okay. So, uh um what I'm what I'm worried about, first of all, like this is awesome and you're like clearly a UX expert. So, um but what I'm concerned about is that the user is going to go into the sessions and they're not going to know that there are um like that's that's not the cool thing. The cool thing is like the RF where you have your repos all laid out for you.  
+   
+ 
+
+### 00:17:52
+
+   
+**Sally O'Malley:** But may I I don't think I'm asking my question right, but um instead of like a new session up there, could we have like new our a new workspace um plus or a new session? Could we add a tab there for like new work workspace or workflow?  
+**Daniel Warner:** um yeah the I'll I'll show you let let me show you where the workflows are in the in the structure and if and if you think that it you know it's still sort of like problematic then yeah we  
+**Sally O'Malley:** Okay.  
+**Daniel Warner:** can I can suggest some other other ways to to structure it but I think I think I have it pretty close and I and it it you still do get the idea of generic session and and I'll show you that in a second. Uh, Bill Yeah.  
+**Bill Murdock:** Yeah, I agree with Sally, but we'll see how that turns out. But also, I just find like there's a button for interactive session and a but button for headless section. I don't understand what those are. And like as a new user, why would I understand what those are?  
+   
+ 
+
+### 00:18:45
+
+   
+**Sally O'Malley:** God, a lot of people don't know what headlift means. Yeah.  
+**Daniel Warner:** What would your impression be, Bill, as to what these  
+**Bill Murdock:** Um, my guess is that like interactive session means I can do something and a headless session is just going to happen and I have no involvement with it. But like why would I kick off a session that I don't have any involvement with and can't control and doesn't do anything with me? Uh, Gage, you're on mute.  
+**Gage Krumbach:** I think headless goes away. It's still a concept that's used within workflows, but if you're going to kick off something, everything I mean, even with our new update, you start a headless session and you restart it, it turns interactive.  
+**Sally O'Malley:** Sure.  
+**Gage Krumbach:** I think everything will just be interactive, but have headless capabilities when within a workflow. So,  
+**Daniel Warner:** Okay.  
+**Bill Murdock:** Sounds reasonable to me. Dan, sounds good. Thanks. All right. Uh, let's go on. Daniel Goodmore.  
+**Daniel Warner:** So, so this we enter into the interactive session and this is where things get a little bit juicier.  
+   
+ 
+
+### 00:19:36
+
+   
+**Sally O'Malley:** Woo\!  
+**Daniel Warner:** Um, so here, you know, we have the chat interface, which everybody's familiar with that at this point. And you also have um the this is what what I've been referring to it as like the formbbased workflow where you can drive the whole thing from this this sidebar if you want. You don't have to go into the chat. Um, but they both they both stay synced. So, you know, no matter where you start, um, you can continue in the other space. Um so real quick um in the formbbased side of things like in this the order of these things might change um there was a lot of discussion yesterday about exactly when and where and how and what type of repository you need to add but in the existing UI um you really need to add a spec repository before you can do anything. So that's why I have this open by default so that you come here and you're either chatting. So like at this point you could chat um you don't have a lot available to you because you haven't selected a workflow yet.  
+   
+ 
+
+### 00:20:43
+
+   
+**Daniel Warner:** So you have like this is what I was thinking would be kind of like Sally's idea of a of a just a generic session, right? So you can use that you can use help um the help command uh and I mean you can give it you can give it a prompt as well. Um but you know this would enable you to sort of like chat with you know Claude plus whatever we have for our our system prompt and sort of like walk you through the process of getting set up. Um there are no agents available at this point because there's no there's no spec repository seated. um that's in the chat. So here you go. Add a we'll drive the workflow first in in the formbbased one. So add a spec repo. Um in you know in this demo this user is not has not been set up by their admin to be connected with the GitHub app or um or or or any of the other or or like have been created a project with its own permissions.  
+   
+ 
+
+### 00:21:43
+
+   
+**Daniel Warner:** So they need to enter their GitHub name and uh their GitHub personal access token. More to the point. Save that personal access token connects to GitHub and you can select your um your spec repository. So here we select our spec repo.  
+**Sally O'Malley:** I could see I could see a little popup of like what is a spec repo and then a little description of what the spec repo is there.  
+**Daniel Warner:** Definitely. I think like the education in terms of like that type of development flow is something that we're going to have to like really highlight and seed through this whole thing.  
+**Bill Murdock:** Yeah, it feels like it might be better handled through the chat instead. Get the chatbot to ask for the repo and you paste it in and then the hopefully the chatbot can be a little smarter than requiring you to put at the end because it can figure out what it's missing or whatever. I don't know.  
+**Daniel Warner:** Oh yeah, buckle up. Buckle up, Bill.  
+**Bill Murdock:** Yeah, fair enough.  
+**Daniel Warner:** I can see it.  
+   
+ 
+
+### 00:22:38
+
+   
+**Daniel Warner:** So in this case, you save configuration, you have your spec repo, um, but you still need to seed it. And you can see that the like the chat is keeping up with you here. So it's like providing a log of your progress, but also just as as Bill suggested, it's also like capable of walk, you know, holding your hand through the process as well.  
+**Sally O'Malley:** Oh, cool.  
+**Daniel Warner:** So no matter where you seed it from, um, the same thing's going to happen. So like see this repository and uh it's just brings up you know the the flat file list showing you like what's in it like the the key the key piece is like um how like to your earlier point  
+**Bill Murdock:** Yeah, that's nice.  
+**Daniel Warner:** um Sally like how do they know what a spec repo is and how to how to set it up and all that stuff like this just assumes that one exists which is a little bit of a gap but I think I think we we can work around that.  
+**Sally O'Malley:** But um if an empty repo will turn into a spec repo if you just provide a an empty GitHub repo when you seed it that's when it becomes the spec repo.  
+   
+ 
+
+### 00:23:38
+
+   
+**Bill Murdock:** Yeah, it would be nice if you don't already have one if it would make one for you, but that's one more feature.  
+**Daniel Warner:** Right.  
+**Sally O'Malley:** That's that's what seating does though.  
+**Bill Murdock:** Well, now you have to still create the repo.  
+**Sally O'Malley:** Ah, gotcha. Yeah.  
+**Andy Braren:** Yeah, that makes sense.  
+**Daniel Warner:** Cool. So, I'm like I'm I'm kind of leaning hard now on um the the setup of this in like a kind of suggest step by step, but this is also like another potential gap. So, because now the user can go and select agents um if the if the repository is not seated, I didn't show you this, I should have. It just says like you need a seated repository before you can view your agents. And like actually here now you have agents in the chat as well. Um, so, so here you can select your agent or agents that you want to include.  
+**Sally O'Malley:** Oh, nice. That's so cool.  
+**Daniel Warner:** Um, I brought this up yesterday. Gage said it already works this way, which is basically like if you don't select any agents, then Claude will just pick agents for you based on like what you're asking for and and what the context is.  
+   
+ 
+
+### 00:24:42
+
+   
+**Daniel Warner:** So, um, I I'll just remove that for now or or I'll I'll put this as a a message more than a choice. So, okay.  
+**Sally O'Malley:** Well, yeah, because that that means you're not selecting any. So, not it still feels like you're selecting something. So, I kind of like it.  
+**Daniel Warner:** Okay. Okay.  
+**Gage Krumbach:** If you don't select anything, it's still got the possibility of using agents. Unless if you don't select something, then we inject like a don't use any agents kind of prompt.  
+**Daniel Warner:** All right.  
+**Sally O'Malley:** Do we?  
+**Gage Krumbach:** No, I'm Yeah, it's like selecting them says please do use them.  
+**Sally O'Malley:** Oh.  
+**Gage Krumbach:** Not selecting them still can use them. It's just it's a black box. Who knows what happens in there?  
+**Dana Gutride:** Yeah, there this isn't they are I'm noticing with every version that comes out from cloud code they are changing how they address the discoverability and also observability of what agents are doing. So I think this is maybe fine like we just hardcode this and disable it so people say oh I guess it's going to and then they'll ask and be like yeah and we put an info button next to it say yeah it's always automatically selecting them and then it this is pretty useful for people to know that it's happening.  
+   
+ 
+
+### 00:25:53
+
+   
+**Dana Gutride:** So, however you want to represent this as a way of train like teaching them because they will ask like oh you know like I think it's going to be a point of contention if we don't at least hint  
+**Sally O'Malley:** Oh yeah.  
+**Dana Gutride:** that this is happening for them.  
+**Daniel Warner:** Cool. So, you have Okay, so you have your agent selected.  
+**Bill Murdock:** So, so what? Go ahead.  
+**Daniel Warner:** Now, you're getting into workflows finally, right? And again, I should have showed you this when it was in its disabled state, but um if you don't have a spec repo seated, you can still look at the workflows, but they're like disabled. Um but here No,  
+**Bill Murdock:** So before we move on, this create RF workflow has like first thing it does is create an RF.md and then it creates a spec MD. That seems like just the IIA here seems really weird. Is that already been changed or is is is this the current RF IIA?  
+**Sally O'Malley:** That's That's Yeah, that's what it is now.  
+**Bill Murdock:** No, I mean is it already changed in Daniel's design based on the feedback from yesterday?  
+   
+ 
+
+### 00:26:46
+
+   
+**Dana Gutride:** Yeah.  
+**Daniel Warner:** no, that's some one thing that we didn't talk about which is yeah in the first step you create an RF.md. So now is your job done like or why do you have to go on to specify?  
+**Sally O'Malley:** I I think that can be fixed by just renaming RF.mmd to idea MD.  
+**Daniel Warner:** Yeah. Yeah.  
+**Bill Murdock:** Yeah. And then and then rename this workflow to to to um specify or something like that or create specification.  
+**Daniel Warner:** Right. Right.  
+**Bill Murdock:** Yeah, that sounds like it would address my concern. Exactly.  
+**Dana Gutride:** Yeah.  
+**Daniel Warner:** It's it's a good point. So, um uh I the way I have it set up here is like you can run these commands like at any point, but um Gage pointed out yesterday that no, these steps are like dependent on each other. So you like based on your repo, if you don't have an RFMD, then you're not going to be able to run specify.  
+**Sally O'Malley:** Uh the first two those are the only two that aren't dependent.  
+   
+ 
+
+### 00:27:42
+
+   
+**Sally O'Malley:** You can run specify without an RFD for reasons but u the other ones are dependent on it.  
+**Daniel Warner:** Okay. All right. So here we go. Like run this command. And um I realized yesterday that this needs to be like a status here in order to be able to truly drive this workflow completely from the form. Then this like message here needs to become a status message creating RF.md. Um but you can see in the chat the the agents were called the RF was generated um or is being generated and Right.  
+**Sally O'Malley:** Can you enable streaming or does it do that?  
+**Dana Gutride:** Yeah, Daniel.  
+**Sally O'Malley:** Oh, sorry.  
+**Dana Gutride:** Yeah. No, no, I I just want to share something. So, so the RF this idea is a is an organizational standard we have, right? Spec is separate and and we've conflated those and maybe we shouldn't. So, so we need PMS to bring RFS in a certain format. The specification is needed for engineering after that.  
+**Sally O'Malley:** Mhm.  
+   
+ 
+
+### 00:28:42
+
+   
+**Dana Gutride:** mix mixing those two things like and engineering is gonna probably always need some type of specification in the future and maybe we need to separate that because because like even listening to Kristoff yesterday I don't think he got it like the the value of this and he has this idea that what he's already creating for engineering is valuable um and I have I have data to show that it's not so but that's going to be like but I'm wondering that by by mixing spec kit and the RF gener generation if we've if we've if we keep confusing this because that idea phase is critical for PM.  
+**Sally O'Malley:** Yeah.  
+**Dana Gutride:** You don't need that as a developer.  
+**Sally O'Malley:** Yes.  
+**Dana Gutride:** You if you go to a spec kit yourself and you give it enough information, you're going to get a decent spec out of it.  
+**Daniel Warner:** Mhm.  
+**Sally O'Malley:** Mhm.  
+**Daniel Warner:** Right.  
+**Gage Krumbach:** Um, can I add something?  
+**Daniel Warner:** So even more distinction u RF workflow  
+**Dana Gutride:** Yeah.  
+**Sally O'Malley:** I I feel like that that that begs for the RF to MD to mirror a Jira card.  
+   
+ 
+
+### 00:29:38
+
+   
+**Sally O'Malley:** Then a Jira RF the RF to MD should mirror I know we're not talking about Jira. I can see see that from your face.  
+**Dana Gutride:** I hate Jira, but  
+**Gage Krumbach:** So I think the ideal use the ideal flow for like Kristoff or a PM would be all they do is iterate on an idea like our very very initial demo which is like hey I made this RF and it's great and then we have a workflow that goes from start to finish all the way to task. No one even touches specify. It's just like first step in the workflow rest of spec kit. No one touches it and then it goes to a repo and then developers who don't want to work on a UI platform just go to the repository grab it and use that to develop or if they want they come to the platform and then start another workflow that's like all right start implementing off this task list or whatever else.  
+**Sally O'Malley:** Ah, so so you're thinking uh the PM starts the RF. You're you're frozen for some reason.  
+   
+ 
+
+### 00:30:41
+
+   
+**Sally O'Malley:** Maybe it's me, but the PM um is it Lee? Oh, the PM starts an RF and then clicks a button and is like, "Okay, now just create the PC."  
+**Dana Gutride:** So I  
+**Andy Braren:** That's  
+**Sally O'Malley:** and then tells the engineers about it. And so an engineer's job starts with taking this uh this PM PO and start like iterating on that. I think that's I mean that's exactly what you just said, but I'm going to repeat it because it's kind of cool.  
+**Gage Krumbach:** Yeah, I mean, yeah, Dana is hitting the nail on the head.  
+**Sally O'Malley:** Yeah.  
+**Gage Krumbach:** I don't think we need to teach them spec kit. That's why they're getting confused.  
+**Sally O'Malley:** No. Yeah. So they do they they they do their idea and then they have a button that says now create the PC.  
+**Dana Gutride:** No. Yeah, but we need to teach our we do need to teach the engineer spec kit or whatever we land on because the specification is what's going to create enough context for us to actually have a viable code  
+   
+ 
+
+### 00:31:23
+
+   
+**Bill Murdock:** Makes sense. And  
+**Dana Gutride:** artifact by the end of the day.  
+**Gage Krumbach:** Yeah, 100% agree.  
+**Sally O'Malley:** Maybe just add an option to auto auto um advance through spec kit for a PM, but it it stops along the way.  
+**Dana Gutride:** Yep.  
+**Sally O'Malley:** It's you have to be watching it and like it's not just like hit a button and it's done. It won't finish.  
+**Daniel Warner:** I wonder.  
+**Gage Krumbach:** Thanks, D.  
+**Daniel Warner:** Bye.  
+**Bill Murdock:** So, So  
+**Sally O'Malley:** Okay.  
+**Daniel Warner:** Um, I wonder al uh Sally, the person that that you talked to at IBM, did they were they familiar with Speck Kit?  
+**Sally O'Malley:** They weren't, but um they totally got it.  
+**Daniel Warner:** Okay.  
+**Sally O'Malley:** But she's a she's an engineer. Yeah.  
+**Daniel Warner:** Because the what the way I was thinking from from my perspective, not a developer, keep in mind, but like I was like, this seems like an like a great way to try and use specit whereas like setting it up for myself on my own project seemed like something I didn't really want to do um or that I would have to section off a lot of time in order to try.  
+   
+ 
+
+### 00:32:25
+
+   
+**Sally O'Malley:** Oh, totally. Yeah.  
+**Daniel Warner:** So I think there is like a good educational piece in terms of like this is spec kit it's set up you can run it very easily from this this yeah all right so  
+**Sally O'Malley:** Mhm. I mean it is just pushing a button and reading.  
+**Bill Murdock:** So, did we just reach a conclusion about RFS then? Because, sorry, I got pulled away like three times. Um, where did we land on whether we're doing RF and how we're doing them?  
+**Sally O'Malley:** Oops.  
+**Daniel Warner:** I mean the the the concept consensus seems to be that there there's some confusion around what it means to generate an RF. So, a product manager needs to be able to generate and iterate on an RF and and so like incorporating some of this spec kit stuff is not appropriate in this case, but like the the actual tactical solution to  
+**Bill Murdock:** Cut it.  
+**Daniel Warner:** that, I don't know, change some of the words, change some of the display. We got to figure out something that works.  
+**Bill Murdock:** So tactically you could just remove the word RF alto together like you have ID8 produce idea just like we were saying earlier but then like if you want to then sell this to the PMs as an RFP generator what do you tell them to do uh gauge  
+   
+ 
+
+### 00:33:45
+
+   
+**Gage Krumbach:** you tell them to just type in the chat. I think we take away all these I think there's two users. The power user can run specific commands. So we have this display um for just like emulating cloud code. But then you have the workflow runner which just says all right we're running through our steps. Hey Kristoff, you need to put something in here. And like okay I'm going to do some things. Hey Kristoff, what do you think about this? It's supposed to be they're asking them questions, follow-ups and getting them out of them. they're taking them down a journey.  
+**Sally O'Malley:** Yeah.  
+**Gage Krumbach:** Whereas this um is for power users. It feels more like okay, I got to run this and then there's more to spec kit. There's like clarify. It's like I got to run clarify. It's like there's a lot more to it and you can be much more powerful with it. But you're the goal is to get what you want out of the PM, not necessarily teach them to be a power user.  
+   
+ 
+
+### 00:34:35
+
+   
+**Bill Murdock:** No, that makes sense. But if we don't take the concept of RF out of here, are we pointing to a particular artifact and saying this is the one you should use as your RF or are we just saying here's here's a million artifacts. Go pick which one you want to use for your RF.  
+**Gage Krumbach:** I I think we need to stop thinking of specific flows. It's going to be generic. This RF concept, it's just the one we're focusing on now. I was talking to Michael before and it's like we need to have I think we should start thinking of two use cases side by side to sort of keep us in this more generic loop because if we keep on cycling down just everything is just like this RF um flow it's not because another team might have a different feature flow than ours. So we need I I guess saying like we should step back and think I don't know like microcopy things like these can all change to make it more clear on what steps are what but I think like the  
+   
+ 
+
+### 00:35:24
+
+   
+**Sally O'Malley:** Mhm.  
+**Gage Krumbach:** core foundational like how a user interacts with the workflow how a user interacts with cloud code is the important bit  
+**Sally O'Malley:** Mhm.  
+**Daniel Warner:** and and I'm going to just jump in real quick, Andy, before you go. Sorry. Which is that I like I think when Sally suggested that this RF look more like the thing that goes in for a Jira Strat or whatever. I think that's like that could go a long way. Not that we want to be married to Jira. doesn't have to look exactly like a Jira thing, but it just should look like an RF that you can then copy and paste and take to some other workflow. So, that could alleviate it too. Sorry, Andy.  
+**Bill Murdock:** Makes sense. But it's not going to be an RFP anymore, right? Sorry, Andy. Go ahead.  
+**Andy Braren:** It would be right. That's what Narf has, right? It would just be in the Jira formats.  
+**Bill Murdock:** No, we specifically said it's going to be an idea file and it's going to be you can do whatever you want with it.  
+   
+ 
+
+### 00:36:17
+
+   
+**Bill Murdock:** Like it's not going to be a thing you have to stick into your RF description. You could stick it into an epic description or a story description or email it as a memo. It's just ideas.  
+**Gage Krumbach:** Yeah, it's all artifacts at the end of the day. It's just data that the model output that we are using to develop Well,  
+**Andy Braren:** Yeah.  
+**Bill Murdock:** Yeah. And we could have an artifact that we call IRF if we want or we don't have to if we don't want to. And I think that was the debate I was trying to get to is are we is there going to be an artifact that we call RF or not? Um and if so, what what would it where in this flow would it arrive? And I think Gage was saying we may not even have flows like this at all.  
+**Gage Krumbach:** it's it's very dependent on the team. A team might really want RFS. Like they love that idea. RFS are great for them, but then one team's like, "No, we just work on everything is a architectural diagram for us. We  
+   
+ 
+
+### 00:37:06
+
+   
+**Gage Krumbach:** don't even do design documents." So, it's ultimately up to how the team structures things. They might not use Jira. They might use GitHub. So they'll have different integrations. So like look at I guess like look at this order more of just how a user works through a set of flows rather than always going to be going through a certain flow because I I I think it becomes generic in the end and these things get customizable. Sorry Andy I cut you off.  
+**Andy Braren:** No, good. You have a thought, Bill, before I jump in. Um, I agree.  
+**Bill Murdock:** Uh, yes. So, Andy, go ahead.  
+**Andy Braren:** I think there's certain microcopy that we're seeing in lefth hand side that's confusing us a little bit but I totally think that ultimately um Rory product management should own the create RF workflow and it's shared across all the PMs they're all using it and they can decide you know what the final step here should be create something that's called RFMD that's fine whatever it'll be properly formatted in Jira format whatever they decide the important thing is that create RF is the very first use case and the very first workflow that we're helping PM to sort of make and define um will take care of the back end specit infrastructure what what steps are required but  
+   
+ 
+
+### 00:38:15
+
+   
+**Andy Braren:** ultimately like yeah I think PM owns that workflow they can determine these uh they maybe together with with us on engineering can figure out what are the steps to get there and this interface just helps them walk through those steps by steps it's almost like a like a checklist kind of a things they have to do but the final output of which can be and probably should be for you to make it more understandable RF to MD that they can very easily just copy paste into whatever work other tools they want I guess um  
+**Bill Murdock:** You're suggesting that this is something that like the user would create. The workflow is something user would create. So the like ambient code platform wouldn't have an RF creation workflow. It would have a general purpose workflow editor and some some users might create a RF workflow if they wanted to.  
+**Andy Braren:** Yeah, I think that's where we're going next.  
+**Bill Murdock:** That seems like  
+**Andy Braren:** Yeah, it and that's I think that's part of the thing that confuses us all about this effort like kind of initially pitches is oh it's an RF builder and that's all it'll be.  
+   
+ 
+
+### 00:39:05
+
+   
+**Andy Braren:** No, I think our mindset's shifting toward we're making a generic platform to run uh help users and help internal teams run whatever workflows they desire. Um, augmented by by AI, augmented AI, like that's a project name, right? So, I think that's sort of where we're going and this workflow. This create RF1 is the very first stab at that.  
+**Bill Murdock:** Yeah, it makes sense. And that microcopy on this one needs work, but once it gets settled out, then it will be a decent illustrative example, I guess.  
+**Andy Braren:** Totally agree with that. Yeah. Yes.  
+**Sally O'Malley:** Uh yeah, I think a really important thing to do is just um define or understand what the difference is between uh RF.mmd and spec. MD, not not the naming, but like what's what's the difference in those two steps? Cuz that's a bit confusing. Um, even I I mean, I know what the difference is, but it I could see where that could be really confusing because it's like uh you take the RF and then you just what further um refine it into a another a more refined RF is what a spec is.  
+   
+ 
+
+### 00:40:11
+
+   
+**Sally O'Malley:** But and and these are the fir these are the two phases though that we are focused on for this first pilot. Am I right? I'm right about that.  
+**Daniel Warner:** Yes. And I think that's why, you know, I mean that that's what we sort of like agreed on right at the outset, which is why I sort of like cut it off there. But, you know, I think this conversation just highlights like, all right, what's what's the what's the desired end state here for a product manager? Like, what's the thing that that we want them to do? Like, do they do is this good enough that they have their their these sort of artifacts or do we need to be have something more explicit?  
+**Bill Murdock:** Well, they definitely need to iterate, but this UI lets them do that too, right?  
+**Daniel Warner:** It it does if you're driving the whole thing through the form like it's a little harder to iterate on the actual file. Um you probably would have to do that like on the file level which which you can do.  
+   
+ 
+
+### 00:41:09
+
+   
+**Daniel Warner:** So once the the files are created I just I realized in watching the video yesterday that you guys aren't seeing what I'm seeing. So when I click on these files they're opening in a in a window.  
+**Bill Murdock:** another window. Okay, gotcha. Oh, and then you manual edit. I don't want to manually edit. I want to go into the session and say, "No, drop the stuff about um wagg 2.1. I  
+**Daniel Warner:** Right, right, right.  
+**Bill Murdock:** don't think that's appropriate for this. Um, yeah.  
+**Daniel Warner:** So that that would be Yeah, that would be the chatbased workflow, right? Which is like yeah like okay I want to yeah remove these dependencies or whatever and you can iterate in that way.  
+**Andy Braren:** we talked sorry I think we we talked about this a little bit yesterday too that you know the ability to view the actual artifact inside this interface may or may not be helpful.  
+**Daniel Warner:** Um  
+**Andy Braren:** I know it's a it's a potential rabbit hole, but I I also sort of lean toward even looking at like um I don't know what cursor and other tools or or in cloud's web interface or open AI's interface is starting to get to.  
+   
+ 
+
+### 00:42:08
+
+   
+**Andy Braren:** Uh there's a convention or a pattern starting to emerge where there is sort of like an artifact browser or viewer or something that like appears in the right hand side. Maybe this evolves into that where there's, you know, um after you generate artifacts, you can click on one of them, one of the things that's been generated and then see that preview or see potentially even the live PR or code or whatever files like on the right hand side potentially. Um I imagine it's getting to that point eventually, but for now, for initially, I think just being able to click on one of those artifacts and have it open somewhere is okay, but I think artifact viewers probably are in our future eventually is my guess, my hunch.  
+**Bill Murdock:** Yeah, artifact yours is nice, but I think it's much more urgent to have iteration interactive iteration on the artifact.  
+**Andy Braren:** that'll be supported regardless I think it's an interface but seeing the artifact together alongside you iterating on it actively I think that'd be the next thing that we support  
+**Bill Murdock:** Well, yeah, that's fair.  
+   
+ 
+
+### 00:42:57
+
+   
+**Bill Murdock:** But and Daniel, you were saying that that this is not something supported in the short term, right? That iterating on the artifact is not something in your design.  
+**Daniel Warner:** Not not not on in like a I'm editing the text type of situation. I was thinking that these like the results of the workflow would right now I just have them opening in another window, but I would say like they would open in either like the GitHub editor, right? go go to where the file lives and you can edit it there. Um because especially since you can also like add other agents to help you out or whatever.  
+**Bill Murdock:** Yeah, and that's that's also useful, but it's not the same as being able to tell the bot I want something different and having it in update. Yeah, exactly.  
+**Daniel Warner:** Um there  
+**Bill Murdock:** Casey, can you review this and suggest any edits? Yeah, exactly.  
+**Sally O'Malley:** But that that's already possible though that it does that.  
+**Andy Braren:** That should  
+**Sally O'Malley:** There's Yeah.  
+**Bill Murdock:** But but in Daniel's design, it doesn't, right?  
+   
+ 
+
+### 00:43:43
+
+   
+**Sally O'Malley:** No, it does. Uh it's just the the through the session through chat you can say, "Oh, it'll it'll tell you, oh, I've created RFA. MD." And then you go to the chat and be like, "Well, I want to change it." And it'll be like, "Okay, what do you want?" It does that.  
+**Bill Murdock:** and then it will save it as RFMD.  
+**Sally O'Malley:** Yeah. Yeah. I mean, we you you could tell it to rename it, too.  
+**Bill Murdock:** Yeah, that makes sense. And that solves the problem. I I guess I thought Daniel was telling me that it won't his design won't do that, but uh  
+**Daniel Warner:** No, no. Like, so like yeah, the idea is to be able to drive like a more interactive workflow through the chat.  
+**Sally O'Malley:** Yeah, as long as the session's alive and running, it will  
+**Daniel Warner:** So you go through all the same steps. Um, you know, you guys you guys get it, but and then you could continue to iterate on the artifact um in the chat.  
+   
+ 
+
+### 00:44:31
+
+   
+**Bill Murdock:** Yeah. Okay, that's what I was asking for. Thanks,  
+**Daniel Warner:** So now it's seated. So now you can create your RF.  
+**Sally O'Malley:** And so did you do all of this by changing the front end and like the back end and the are pretty much Oh, cool.  
+**Daniel Warner:** So that's how I started, but it was just going way too slow. So this is just static HTML and JavaScript. Um um correct.  
+**Bill Murdock:** See, the responses are hardcoded, right? You're not actually calling Claude. Yeah, it makes sense.  
+**Daniel Warner:** They're they're generated, but they're not I'm not calling Claude in any real way. Um so, but like that's what maybe since because honestly I wanted to get it out fast. I wanted to do a couple iterations before we meet next week and just see if like take your temperature, see like is this look like a good direction or not. But now that it seems like, you know, yeah, there's some there's some still some big issues with it, but there, you know, there's enough here that people are responding positively to that we can start to actually make real pieces.  
+   
+ 
+
+### 00:45:36
+
+   
+**Daniel Warner:** And in my the next prototype, I'll I'll work with what we got already.  
+**Bill Murdock:** Yeah, I think it's a good incremental update. I guess I would prefer a more of a blank slate kind of start over, but um I see the downsides of blank slate start over. Like in particular, I really want something that just runs on my computer, but uh I know that's not everybody's wish.  
+**Daniel Warner:** Yeah, I get that. I mean, to to your first point, when I came into this team, they were already hauling ass. So, I figured I'm not gonna, you know, I didn't want to be the one to be like, let's let's take a step back.  
+**Andy Braren:** What  
+**Daniel Warner:** Um, and I think that there was enough, you know, the direction was was was already there. Things were already happening. So, it just didn't feel like the right time. And I think that and I and also I did see a path from where they were to where it needed to be in order to like start onboarding users.  
+   
+ 
+
+### 00:46:28
+
+   
+**Daniel Warner:** So, um, that was that for this for the second piece. What was your second point, Bill?  
+**Bill Murdock:** Um, I think my my point was just like I would want to do a blank slate redesign that runs on the computer and not on a server.  
+**Daniel Warner:** Oh, and then running locally.  
+**Bill Murdock:** Yeah.  
+**Daniel Warner:** That's something that I that I did not really think through and not completely sure how that would work. gauge.  
+**Gage Krumbach:** I think yeah I mean going blank slate to do that it's already built with local in mind things are it depends on the workflow you're working with and like how you want to do this eventually we will have an MCP server or a CLI or whatever you can go locally and kick off jobs from your local cloud code or your local cursor Um it it's at the end of the day this thing is a hosted like  
+**Daniel Warner:** He  
+**Gage Krumbach:** like agent service or workflow service where you can run through workflows you run through agents um and because PMs don't have cursor they don't want to touch cursor that yeah I mean if everybody just was a developer  
+   
+ 
+
+### 00:47:28
+
+   
+**Bill Murdock:** Yeah, but if you could just push all those agents in the cursor, then why do you need a hosted something or other? I don't know. I know. I maybe I think if this did this all well, I think PMs would be willing to download your server and start using it.  
+**Gage Krumbach:** then yes we would probably just be working all within a GitHub repo when things would be easier, but that's just not the case. That  
+**Bill Murdock:** But it's possible I'm wrong. Uh Andy  
+**Andy Braren:** uh to to our conversation in Slack about privacy in that element. I think there's eventually um eventually need to have like a local environment even for PMs or something usable by other roles that might even include like personal context or things they wouldn't want to have in a posted platform. So I agree with you Bill. I feel like the local use case there is something there eventually. Um and this might be sort of a tangent but I I maybe Gage or Sally can answer this. Um, is that really a hard requirement to have a full-blown CRC uh like a Open Shift local running locally?  
+   
+ 
+
+### 00:48:31
+
+   
+**Andy Braren:** I mean, it can just be a few containers and whatever, right? Right now it's just the overhead's super high.  
+**Sally O'Malley:** That's what I Yeah.  
+**Andy Braren:** Yeah.  
+**Sally O'Malley:** Yeah. We were thinking, Michael and I were talking about this yesterday. I wonder if we could um just run a pod. Uh the operator is very Kubernetes specific, but um other than that, I think we could just run things in containers and pod in a pod.  
+**Gage Krumbach:** There's we we've been actively trying to get it to run Kubernetes native too.  
+**Sally O'Malley:** Yeah.  
+**Andy Braren:** Cuz  
+**Gage Krumbach:** So kind clusters should work where like you just do kind and then a script and then it should be good and then you don't have to have that. It's a lot lighter than CRC. CRC is pretty heavy.  
+**Sally O'Malley:** Yeah, the difference is yeah, CRC is Open Shift specific and so if we had things in there that like only run on Open Shift like we did um until a few days ago, then Kind wouldn't work. But now I think Kind would work and it's much easier.  
+   
+ 
+
+### 00:49:15
+
+   
+**Gage Krumbach:** Yeah.  
+**Bill Murdock:** Yeah, it kind of sounds good for like developers developing the thing, but uh in terms of a user experience be nice just just like be in cursor or something along those lines.  
+**Sally O'Malley:** Yeah.  
+**Bill Murdock:** U you said something about the swarm use case. Do you mean like multiple people trying to collaborate?  
+**Gage Krumbach:** Um, sorry.  
+**Daniel Warner:** multiple agents.  
+**Gage Krumbach:** Um, the swarm case is is probably one of the main sort of end goals for this. It's like, yes, we get the processes for closed down. Now imagine a world where you have bots scraping Jira, pulling Jiraas um and then sending them out to workflows and agents then coming back and then iterating. And then you have the same thing for UX research jobs. did the same thing for RFS being refined and then it's kind of what like people like power users that use agent today agents today at cursor or cloud code to kind of just like bounce around between projects and like answer question answer question like I'll have four projects over yeah and that's what we want like PMs to be doing is jumping it's context switching but like you're putting in it's like hey answer this question okay great  
+   
+ 
+
+### 00:50:13
+
+   
+**Sally O'Malley:** That's what I do. Yeah. I've got like five different projects going at the same time. Yeah.  
+**Gage Krumbach:** let me go do some work for you hey answer this do some work for you. You're adding like your value is that human in the loop and that's what we're doing all these steps. Now we're just trying to bring that from developers to everybody.  
+**Andy Braren:** Yeah.  
+**Bill Murdock:** Yeah, but I don't see the relationship between that and having to run on a server.  
+**Andy Braren:** Sorry. Go ahead, Bill.  
+**Bill Murdock:** But maybe I'm missing it.  
+**Gage Krumbach:** It's it the swarming aspect is like otherwise you're going to have to be running all these yourself on your own machine. like somewhere is gonna have to run that like it's I don't know. I mean I guess we could make it.  
+**Bill Murdock:** for a minute, but like the computer is very light on this because all the work is being done by Clyde.  
+**Gage Krumbach:** Yeah. But then there's also the collaboration aspect. It's like okay I started this and now okay well someone's going to pick it up from me.  
+   
+ 
+
+### 00:51:14
+
+   
+**Gage Krumbach:** Maybe we have four PMs in the room and they're all working on the same RF for a reason and they're answering questions or maybe it's like PM UX and engineer and they're all answering different questions for the same session or whatever.  
+**Bill Murdock:** Yeah, that makes sense. And if it was all just the same artifact, that's fine because that's in GitHub. But if it was the same session, then then you you'd either need to put the session into GitHub, too, or you would need to um some other way of sharing sessions.  
+**Gage Krumbach:** Yeah. I mean it's more of like a generic concept.  
+**Bill Murdock:** Yeah, that's  
+**Gage Krumbach:** It's not like not technically I don't know if it's always going to be get up or it's going to be some other means but like that concept of collaborating on some agentic flow is kind of what I'm talking about.  
+**Bill Murdock:** Yeah, that makes sense too. Andy.  
+**Andy Braren:** uh two things. So the first uh when we get into like collaborate uh collaboration artifacts together between different people or groups and things I think it's sort of a next step uh because yeah you could go into GitHub but there might be a need to have even collaboration with on a textbased artifact or the RF inside this tool and we'll get that as a natural you know next request from the PMS we're building this tool for.  
+   
+ 
+
+### 00:52:21
+
+   
+**Andy Braren:** Otherwise, their current workflow very likely for Kristoff and others will be great, just copy this, paste into Jer or paste into a Google doc where they can collaborate with other PMs and refining text and whatever. And once they do that, the fact that that's now in an external system and where you'll have control of the data or the actual original artifact, it's kind of a problem for the future steps of this this process. Um, so that's a I think it's a problem a next problem for us to solve after we nail this. Um, the second thing around the the swarms and whatnot, I agree with Bill. I feel like you could have swarm running locally or just a bunch of pods or something that spin up or containers that ultimately call different external APIs for actual work to be done. Um, yeah, tabs are something around here and we can make it easier and to to your point like there is another emerging pattern around like aentic inboxes or something or like a not that we all love inboxes but  
+**Bill Murdock:** or tabs.  
+   
+ 
+
+### 00:52:59
+
+   
+**Bill Murdock:** You could have tabs in a interface or thing. Yeah.  
+**Andy Braren:** another like list of all right you have these five different projects across different things are happening and you're needed as a human for a review on these five things. click each one very easily dive into an area, look at the artifact, provide feedback, pull back out of your inbox, go back into another one, and you make that context switching easier than even what this interface shows. So, that's another augmentation in a phase two. I kind of see um the last thing I want to say, sorry Sally, to your point about workspaces in the chat, another conversation we had yesterday that you weren't here for, but um what we described earlier about those workflows being managed by the PM team of Open Shift AI somewhere somehow um that might necessitate the need for another level in this organizational hierarchy of a workspace or a team or whatever the heck we call that thing, but there needs to be some arbback grouping of like, all right, the PM's going to edit there uh you workflow workflow RF feed-workflow MD or whatever the file format that is to to define and work in that collectively.  
+   
+ 
+
+### 00:54:04
+
+   
+**Andy Braren:** Um so those things be being on the maybe in our phase two or or feature enhancements.  
+**Sally O'Malley:** Yeah.  
+**Andy Braren:** But um yeah Daniel  
+**Daniel Warner:** Um, yeah, actually I think a lot of it what I was going to say has been covered, but I guess just to put a kind of a fine point on like the multi- aent aspect of this is that you know while you you know as a developer you're working with with Claude and you're working or you're working in cursor And the cursor agent is great and it's great at managing sub agents and it's really effective and all that stuff, but you know there there there is a a point in time in the not too distant future where the a multi- aent setup is not going to be um able to be contained like just within cloud code or or um or or cursor and and I and especially not for people who aren't developers. Right. So developers will live locally I think for a lot longer than most people. But for but for for a lot of people it's like okay if I want to use like a multi- aent setup what do I have to do and rather than building out like a local sort of like desktop experience it does make sense I think in my opinion to have something that's hosted that's living on a cluster that has all the resources it needs to to spin up agents ad hoc based on on the tasks that  
+   
+ 
+
+### 00:55:34
+
+   
+**Daniel Warner:** you're giving it. Um but but any that that was just that was my sort of like highlevel thought like um it's going to be tough to compete with with cursor and claude at this point. Um but as things evolve I think it's going to make a lot more sense. Um, and also the and I think this was covered as well, but like the just the integrations with business systems, you know, like I I know that that is possible through like, you know, cursor MCP stuff. And I'm not sure how cloud code uses MCP because I haven't done it yet, but like um you know, having all of the the context available like Andy's always talking about of like changes that are happening in Jira or changes that are happening in other like pro project and product management stuff. Being able to just access that at con as context also really sort of like contributes to the idea of this as like a hosted solution that that lives in a cluster. And anyway, that's that's more my opinion than anything else.  
+   
+ 
+
+### 00:56:32
+
+   
+**Daniel Warner:** But it's I I mean I just recently switched to cloud code from cursor and that experience is unreal.  
+**Bill Murdock:** Yeah, those are good points. I They don't make me happy because I want the local thing, but I I understand and I I see why the other people don't like what I like. Yeah, fair.  
+**Daniel Warner:** It's it's it's so good. So like it's going to be tough to compete with that for developers in the short term. Um anyway, okay, we're just about at 3:30, so unless anybody has any parting thoughts, I think we could probably wrap it there.  
+**Bill Murdock:** Thanks everybody.  
+**Daniel Warner:** Thanks.  
+**Sally O'Malley:** One one one thing is like how far away are we from having something that looks more like this than where we are? Is this next week we'll have it do you think? Or you know that's what I'm wondering.  
+**Andy Braren:** I was going to propose it actually the same idea like can we just try to make this work next week? That'd be awesome if so.  
+**Sally O'Malley:** Yeah.  
+   
+ 
+
+### 00:57:28
+
+   
+**Sally O'Malley:** Like Monday we're all here.  
+**Andy Braren:** Yeah.  
+**Sally O'Malley:** Are you all traveling Monday?  
+**Gage Krumbach:** I'm traveling half Monday, but I'll work on the plane.  
+**Sally O'Malley:** Yeah.  
+**Daniel Warner:** So, I like I talked to to Bob a little bit about that real quick after our call yesterday and I think just based on from what he said on the call and what he said after like there's gonna we're going to be split up into like different projects and probably the project that like Andy, me, him, maybe one or two other people are working on is going to be this. Um, so I I don't know. I don't want to put words in his mouth, but that was the impression that I got.  
+**Sally O'Malley:** Do you anticipate it being all front end changes?  
+**Gage Krumbach:** So, so y'all see this?  
+**Sally O'Malley:** Gage, you know more about like the interaction. Yeah.  
+**Gage Krumbach:** I think um this is what was merged. I wasn't part of the merging, so I'm kind of just seeing this. You have a number on your name and that name goes here.  
+   
+ 
+
+### 00:58:22
+
+   
+**Gage Krumbach:** Um first work stream getting started. So, I think this is I believe this is more of like the UX flow kind of workstream. And then there's two other like um bring your own plugin which is Michael is on that one and some others. Daniel, you're on that one too. Um so I don't know. I I also assume we're going to be in the same room so I don't know how like cohesive these work streams are. Um, I I'm on this one. So, I plan on doing a lot of uh I probably will I want to do like generic workflow stuff. I don't know what this says, but I think I I want to get that to work because I think that opens up a lot of use cases, makes things visible. Um, but this is yeah, this is the doc. I'll share it if people want to look at it more.  
+**Sally O'Malley:** Yeah. Oh, but yeah, one more qu the the question that I had. Do you anticipate like to get to what Daniel's showing, is that mostly frontend changes because Mhm.  
+   
+ 
+
+### 00:59:31
+
+   
+**Gage Krumbach:** Um, well, I think there's a fundamental difference where you might have noticed there's no workflow page anymore. It's there's no like session workflow page. It's all session pages. So, I think we need to like technically think through how that works. Daniel, I know you said you were um didn't didn't uh there was like a disconnect.  
+**Sally O'Malley:** Yeah.  
+**Gage Krumbach:** I don't think like the remote was as clear as it could have been in the old design. So, like the workflow page now is just a representation of the remote GitHub whereas the session page is a representation of the workspace. like here it's kind of merged and we need to sort of at least technically bridge that gap again. Um may like hopefully we don't have to do it visually so things just feel seamless but technically I think that's the biggest thing. Otherwise it is just a lot of uh quick fixes as well as some more fundamental changes. But yeah and that's at least from my impression of looking at the mocks and trying to translate it.  
+   
+ 
+
+### 01:00:36
+
+   
+**Gage Krumbach:** That's what it sounds like.  
+**Daniel Warner:** Cool. Um, oh, I do have one quick question. Sorry to keep expanding this, which is like, so like I I do have a branch with this prototype on it. Should I just make a fork and then share that or do you guys want to give me push access to this thing?  
+**Sally O'Malley:** Uh, you have a branch of V team.  
+**Daniel Warner:** Yep. Yeah.  
+**Sally O'Malley:** That's fine, right?  
+**Gage Krumbach:** I'm like for this for this demo is what you're saying and you're I'm confused.  
+**Daniel Warner:** Yeah.  
+**Gage Krumbach:** You say you want to like merge this demo into P team.  
+**Daniel Warner:** No, no, I don't need to merge it, but just to make it available to you. Like I could I could just make my own fork and then you send you a link to that or do you want me to just, you know, push a branch to the project and there?  
+**Sally O'Malley:** Yeah, do the main one.  
+**Gage Krumbach:** Yeah.  
+**Daniel Warner:** Yeah.  
+**Sally O'Malley:** I either way works. Um I don't I don't know.  
+   
+ 
+
+### 01:01:34
+
+   
+**Gage Krumbach:** Yeah.  
+**Sally O'Malley:** Um uh yeah, I've I usually I always push a a fork. I always create a fork and and push a branch to a fork, but and and I I'm curious to know like how far Cloud would go if you gave it the HTML and was like like use this  
+**Daniel Warner:** Okay.  
+**Gage Krumbach:** Is this just running like mock data, Daniel?  
+**Daniel Warner:** All four. Yeah. Yep. It's all It's all just a static prototype.  
+**Gage Krumbach:** Okay.  
+**Daniel Warner:** Yep.  
+**Gage Krumbach:** Yeah. And I think like our fork branch is probably fine. Yeah.  
+**Sally O'Malley:** HTML and make make this work, you know, in this codebase.  
+**Daniel Warner:** Yeah, it's worth trying to shove that through a couple times and see if we could just make it happen.  
+**Sally O'Malley:** I wonder how Yeah.  
+**Daniel Warner:** Yeah.  
+**Gage Krumbach:** I should be pretty successful.  
+**Andy Braren:** Maybe we should try that next week. Yeah, if the APIs are available, we can just compare the code bases and whatever and have it just figure it out. That'd be sweet.  
+   
+ 
+
+### 01:02:19
+
+   
+**Sally O'Malley:** Yeah. Do you think that Opus would be is is the best model to use for coding? Is it I I Yeah.  
+**Gage Krumbach:** I think I think any max model would do fine. Just the screenshots in and tell it to make a plan and go there. Go from there. Um find the diffs. It's It's I think it's more of like better prompting that would get you there than just bigger models.  
+**Sally O'Malley:** Yeah, because this is a complic this is a complicated thing to orchestrate. It's it's the the codebase is complicated. There's there's Python, there's TypeScript, there's Go. And so I really I want to make this happen as fast as possible. And um maybe  
+**Daniel Warner:** I I actually now that I'm thinking about it like I actually would have high hopes for that approach. I don't think we could just shove it all through at once, but if we broke it up, you know, and say like, you know, update whatever the pro project page to be like this because it's all that like um that uh I can't remember the name of the front-end framework that you used shad CN or something like that, you know, seems very straightforward and claude knows its way around it pretty possible.  
+   
+ 
+
+### 01:03:17
+
+   
+**Gage Krumbach:** Yeah. Yeah.  
+**Sally O'Malley:** Yeah. Yeah.  
+**Daniel Warner:** Yeah.  
+**Gage Krumbach:** Yeah. just I I'd like to whiteboard some of the complex inner workings a bit because there's two things in there like how fast the pod spins up which is just not possible with how we do it. It kind of like leans itself leans itself towards a a constantly running cloud code session which seems cool and but it changes fundamentally things and also just like how that getit integration works because that's not fundamentally there that we would need to sort of work through just so it doesn't go off and just lose features.  
+**Sally O'Malley:** Yeah.  
+**Gage Krumbach:** But otherwise, I think it's a great idea.  
+**Daniel Warner:** Okay.  
+**Gage Krumbach:** This has been great.  
+**Daniel Warner:** Yeah. Thanks for the the the great session and um I'll see you all you all next week.  
+**Gage Krumbach:** Thanks for the demos. Those are awesome.  
+**Daniel Warner:** Yeah, my pleasure. All right. Bye.  
+**Andy Braren:** think it is.  
+**Gage Krumbach:** Sally, do you want to stay on it? Okay, we'll see. If not, we'll just pick up a new one.  
+**Andy Braren:** It is recording. Stop that. But yeah. Yeah. Whatever. All right.  
+   
+ 
+
+### Transcription ended after 01:04:53
+
+*This editable transcript was computer generated and might contain errors. People can also change the text after it was created.*
\ No newline at end of file
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/curated_feedback.md b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/curated_feedback.md
new file mode 100644
index 000000000..8c52f631e
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/curated_feedback.md
@@ -0,0 +1,499 @@
+# vTeam Platform Feedback
+
+Early feedback from the Ambient Code Platform team.
+
+---
+
+## IMPORTANT: Scope Constraint for AI Agents
+
+**CRITICAL INSTRUCTION FOR CLAUDE CODE AND CURSOR:**
+
+**ALL changes related to this feedback MUST be constrained to the static prototype ONLY.**
+
+- **Working Directory**: `static-prototype/`
+- **DO NOT modify**: `components/frontend/`, `components/backend/`, `components/operator/`, or any production code
+- **Scope**: This feedback is for design exploration and prototyping only
+- **Purpose**: Iterate on UX/UI concepts before implementing in production
+
+When implementing feedback items:
+1. All file paths mentioned refer to their equivalent locations in `static-prototype/`
+2. Make changes to HTML/CSS/JS prototype files only
+3. Do NOT create or modify TypeScript, Go, or Kubernetes resources
+4. Focus on visual design, layout, and user flow changes
+5. Document prototype changes in `static-prototype/CHANGELOG.md` or similar
+
+**Example Path Mapping**:
+- Feedback mentions: `components/frontend/src/app/projects/[name]/layout.tsx`
+- Actually modify: `static-prototype/[equivalent-html-file].html`
+
+If you need to make production changes based on this feedback, create a separate issue or task list and consult with the team first.
+
+---
+
+## Resources
+
+**Video Walkthrough**: https://drive.google.com/file/d/18O98fAN1alz2XuZWBr9L9MrlXB5NxwIO/view?usp=sharing
+
+**Meeting Notes (Gemini)**: [Chat UI Feedback - 2025_10_30 15_56 EDT - Notes by Gemini.md](./Chat%20UI%20Feedback%20-%202025_10_30%2015_56%20EDT%20-%20Notes%20by%20Gemini.md)
+
+**Version 1 Prototype Feedback**: [my_notes.txt](./my_notes.txt)
+
+**Session 2 Notes (Gemini)**: [Chat UI feedback session 2 - 2025_10_31 14_29 EDT - Notes by Gemini.md](./Chat%20UI%20feedback%20session%202%20-%202025_10_31%2014_29%20EDT%20-%20Notes%20by%20Gemini.md)
+
+**Session 2 Transcript**: [Chat UI feedback session 2 - 2025_10_31 14_29 EDT - transcript.md](./Chat%20UI%20feedback%20session%202%20-%202025_10_31%2014_29%20EDT%20-%20transcript.md)
+
+---
+
+## Feedback Status Guide
+
+- **Actionable**: Should be addressed
+- **Ignore**: Explicitly marked to skip
+- **Needs Clarification**: Requires more information
+
+---
+
+## Security & Permissions
+
+### [Actionable] GitHub Integration Access Control (Gage)
+**Issue**: Moving GitHub integration out of user's own access opens us up to situations where a user may now get to see repos they don't have actual access to.
+
+**Component**: `components/backend/handlers/github.go`, `components/frontend/src/app/integrations/`
+
+**Action Required**:
+- Review OAuth scope implementation
+- Ensure repository access respects user's GitHub permissions
+- Add RBAC checks for repository visibility
+
+---
+
+## UX & Terminology
+
+### [Actionable] Session vs Workflow Confusion (Gage)
+**Issue**: Confused a bit on the role of a session and workflow - it looks like sessions ARE workflows.
+
+**Component**: Documentation, Frontend UI labels
+
+**Action Required**:
+- Clarify terminology in documentation
+- Update UI labels for consistency
+- Consider renaming or better differentiation
+
+### [Ignore] Workflow as Collection of Sessions (Gage)
+**Status**: IGNORE - Design decision already made
+
+**Note**: Today workflows are a collection of sessions in part so other people can collaborate on a single workflow.
+
+### [Actionable] API Keys Navigation (Jeremy Eder / Version 1 Feedback)
+**Issue**: We have API keys on the left sidebar and then fields for other API keys in the settings tab. I know they have different uses, but isn't it confusing?
+
+**Additional Context**: Hide API keys from the project view for now until we have Jira integration.
+
+**Component**: `components/frontend/src/app/projects/[name]/layout.tsx` (sidebar), Settings page
+
+**Action Required**:
+- Hide API keys from project view navigation until Jira integration is implemented
+- When re-introduced, rename one section to be more specific (e.g., "API Keys" → "Service Keys" or "Integration Keys")
+- Add clarifying descriptions to both sections
+- Consider consolidating if they serve similar purposes
+
+### [Actionable] Project Information Tab (Jeremy Eder / Version 1 Feedback)
+**Issue**: Project information - either drop it or put something useful there. Maybe we create a metrics tab or something instead.
+
+**Additional Context**: Move Project info to overview page.
+
+**Component**: `components/frontend/src/app/projects/[name]/page.tsx`
+
+**Action Required**:
+- Move existing project information content to the overview page
+- Evaluate current project info page content
+- Option 1: Add useful metrics (session count, cost analytics, activity timeline)
+- Option 2: Remove tab entirely if no valuable content (preferred after moving to overview)
+- Recommended: Consolidate into overview page with metrics/analytics dashboard
+
+### [Ignore] Chat Interface Complexity (Jeremy Eder)
+**Status**: IGNORE - Too subjective, needs user testing first
+
+**Note**: Chat interface - I'm torn. I think we are surfacing too much detail overall. There are too many choices.
+
+### [Actionable] "Associated Repository" Terminology (Jeremy Eder)
+**Issue**: What does "associated repository" mean? I need a clearer word used there.
+
+**Component**: Frontend session creation forms, documentation
+
+**Action Required**:
+- Replace "Associated Repository" with clearer term
+- Suggestions: "Source Repository", "Code Repository", "Git Repository", "Working Repository"
+- Update all instances in UI and docs
+
+### [Actionable] Remove "Headless Session" Terminology (Session 2 - Bill Murdock, Sally O'Malley, Gage Krumbach)
+**Issue**: The term "headless session" is confusing for new users. They don't understand what it means or why they would choose it.
+
+**Timestamp**: 00:17:52 - 00:18:45
+
+**Component**: Session creation UI
+
+**Action Required**:
+- Remove "Headless Session" as a separate session type
+- All sessions should be interactive by default
+- Headless capabilities should be contained within workflows, not exposed as a session creation choice
+- Note: When a headless session is restarted, it already becomes interactive, so this simplifies the UX
+
+### [Actionable] Rename "RF.md" to "Idea.md" (Session 2 - Sally O'Malley, Bill Murdock)
+**Issue**: The "RF" (Request for Feature) terminology is confusing and too prescriptive. Users don't understand what RF means.
+
+**Timestamp**: 00:26:46
+
+**Component**: Workflow artifacts, UI labels
+
+**Action Required**:
+- Rename `RF.md` to `Idea.md` throughout the UI
+- Update workflow step descriptions to use "Idea" instead of "RF"
+- Consider renaming the workflow from "Create RF" to "Create Specification" or similar
+- Make the artifact format more generic so it can be used in various contexts (Jira, email, epic description, etc.)
+
+### [Actionable] Add Spec Repo Education Tooltip (Session 2 - Sally O'Malley)
+**Issue**: Users don't understand what a "spec repo" is or why they need one.
+
+**Timestamp**: 00:22:38
+
+**Component**: Session creation UI, spec repo configuration
+
+**Action Required**:
+- Add tooltip or popup with "What is a spec repo?" explanation
+- Educate users on the spec repo concept before requiring them to set one up
+- Consider inline help text in the form
+
+### [Actionable] Move Integrations to User Menu (Session 2 - Gage Krumbach)
+**Issue**: Integrations should be in the user dropdown menu to reinforce that it's user-scoped, not project-scoped.
+
+**Timestamp**: 00:10:24
+
+**Component**: Navigation structure
+
+**Action Required**:
+- Move "Integrations" from main navigation to user dropdown menu
+- This reinforces that integrations are per-user settings, not per-project
+
+### [Actionable] Improve Agent Selection UI (Session 2 - Dana Gutride, Gage Krumbach)
+**Issue**: The agent selection UI looks like users must make a choice, but Claude auto-selects agents anyway.
+
+**Timestamp**: 00:24:42
+
+**Component**: Agent selection interface
+
+**Action Required**:
+- Hardcode "Auto-select agents" as the default behavior
+- Add an info button explaining that Claude automatically picks agents based on context
+- Don't make it look like a required choice
+- Consider disabling the selection and just showing "Agents will be automatically selected based on your request"
+
+### [Actionable] Live Markdown Rendering (Jeremy Eder)
+**Issue**: Is it possible to render the markdown in the status pane live, as it's being generated?
+
+**Component**: `components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx`
+
+**Action Required**:
+- Implement streaming markdown renderer
+- Use WebSocket updates from backend
+- Progressive rendering as content arrives
+- Consider using React Markdown with streaming support
+
+**References**:
+- WebSocket implementation: `components/backend/websocket/websocket_messaging.go`
+- Session status updates
+
+### [Needs Clarification] Task Popup Suggestions (Jeremy Eder)
+**Issue**: I like how the chat had popups. I wonder if we can keep raising popups of the next most likely task. These popups give us the opportunity to gain advantages from prompt templating like what SpecKit is doing in the background.
+
+**Component**: New feature - AI-powered task suggestions
+
+**Action Required**:
+- Research SpecKit prompt templating approach
+- Design popup/modal component for task suggestions
+- Integrate with Claude API for next-task predictions
+- Create prompt templates for common workflows
+
+**Status**: Needs product/design review before implementation
+
+---
+
+## Navigation & Layout
+
+### [Actionable] Remove Workflows from Project Page (Session 1)
+**Issue**: Remove Workflows from the project page.
+
+**Component**: `components/frontend/src/app/projects/[name]/layout.tsx`
+
+**Action Required**:
+- Remove "Workflows" from sidebar navigation items
+- Verify no broken links remain
+- Update any documentation referencing this section
+
+**Implementation**:
+```tsx
+// File: components/frontend/src/app/projects/[name]/layout.tsx
+// Remove this item from the items array:
+// { href: `${base}/workflows`, label: "Workflows", icon: WorkflowIcon }
+```
+
+---
+
+## Workflow Behavior & UX
+
+### [Actionable] Workflow Step Dependencies (Version 1 Feedback)
+**Issue**: Each step in a workflow depends on the successful completion of the step before it. For example, if the /spec command needs /ideate to have successfully run. A successful run of a step is determined by whether or not it generated an artifact. For example, if there is no rfe.md generated then /spec is disabled.
+
+**Component**: Workflow step logic, RFE workflow implementation
+
+**Action Required**:
+- Implement sequential step dependency validation
+- Add artifact existence checks before enabling subsequent steps
+- Disable steps that depend on missing artifacts
+- Provide clear visual feedback on why a step is disabled
+- Example dependency chain:
+  - `/ideate` must complete and generate `rfe.md`
+  - `/spec` requires `rfe.md` to exist before it can run
+  - `/plan` requires spec artifacts before it can run
+- Display artifact status indicators for each step
+
+### [Actionable] Workflow Status Message Updates (Version 1 Feedback)
+**Issue**: The workflow descriptions in each step should change to status messages when the step is running. For example, when a user runs /ideate then 'Create or update rfe.md file' should become 'Generating rfe.md'.
+
+**Component**: Workflow UI, step status display
+
+**Action Required**:
+- Implement dynamic status message updates during execution
+- Replace static descriptions with active status messages when running
+- Examples:
+  - Before: "Create or update rfe.md file"
+  - During: "Generating rfe.md..."
+  - After: "Generated rfe.md" (with timestamp)
+- Use progressive verb forms during execution ("Generating", "Creating", "Analyzing")
+- Add visual indicators (spinner, progress bar) alongside status messages
+- Persist completion messages after step finishes
+
+### [Actionable] Separate RFE and Specification Workflows (Session 2 - Dana Gutride, Gage Krumbach)
+**Issue**: The current workflow conflates RFE (for PMs) and Specification (for engineers). These should be distinct workflows for different user types.
+
+**Timestamp**: 00:27:42 - 00:31:23
+
+**Component**: Workflow design, user flows
+
+**Action Required**:
+- **PM Workflow**: Focus on iterating on ideas/RFEs
+  - PMs should primarily work on the "Idea" (formerly RF.md)
+  - After PM completes idea, they trigger a "Generate Specification" workflow
+  - PM workflow should be a guided journey with prompts and questions, not manual commands
+- **Engineer Workflow**: Starts from a completed specification
+  - Engineers receive the spec.md output from the PM workflow
+  - Engineers can then run spec kit commands themselves if needed
+  - Engineers are "power users" who can run specific commands
+- Create clear handoff point between PM idea generation and engineering specification
+- Don't teach PMs spec kit - they just iterate on ideas
+- Engineers need to understand spec kit for refinement
+
+**User Types Identified**:
+1. **Power Users** (Engineers): Run specific commands, need full control
+2. **Workflow Runners** (PMs): Taken through guided journey, don't need command-level access
+
+### [Actionable] Bot-Guided Repo Setup (Session 2 - Bill Murdock)
+**Issue**: The form-based spec repo setup is cumbersome. The chatbot should guide users through this process.
+
+**Timestamp**: 00:21:43
+
+**Component**: Spec repo configuration, chat interface
+
+**Action Required**:
+- Move spec repo setup into chat-based flow
+- Let the chatbot ask for GitHub username and personal access token through conversation
+- Bot can intelligently guide the user: "I need access to your GitHub repos. Please provide your GitHub username and a personal access token"
+- Bot can be smarter about validation (e.g., not requiring `.git` suffix)
+- Reduce friction compared to traditional form fields
+
+---
+
+## Workflow Design Philosophy
+
+### [Actionable] Generic Workflow Platform Approach (Session 2 - Andy Braren, Gage Krumbach, Bill Murdock)
+**Issue**: The platform is being designed too specifically around RFE creation. It should be a generic workflow platform.
+
+**Timestamp**: 00:37:06 - 00:39:05
+
+**Component**: Overall platform design philosophy
+
+**Action Required**:
+- Stop positioning this as an "RFE builder"
+- Position as a **generic workflow platform** where teams can define and run whatever workflows they want
+- The "Create RFE" workflow is just the first example/use case
+- Teams should be able to:
+  - Define their own workflow steps
+  - Customize artifact names and formats
+  - Use different integrations (not just Jira)
+  - Adapt the platform to their team's processes
+- Ensure UI and documentation reflect this generic, flexible approach
+- Consider creating a workflow editor/builder for future phases
+
+**Design Principle**:
+> "We're making a generic platform to help users and help internal teams run whatever workflows they desire, augmented by AI. The RF workflow is just the first stab at that."
+
+---
+
+## Open Questions & Discussion Items
+
+### [Needs Clarification] File Editing in UI (Version 1 Feedback)
+**Question**: Do we need file editing in the Ambient Code UI for MVP?
+
+**Context**: Determining scope for MVP release
+
+**Discussion Points**:
+- What types of files would users need to edit?
+- Can users edit artifacts (rfe.md, spec.md, etc.) directly in the UI?
+- Is read-only view sufficient for MVP?
+- Should editing be delegated to external editors/IDEs?
+- What's the expected workflow: view → edit externally → re-upload?
+
+**Status**: Needs product/design review
+
+### [Needs Clarification] Artifact Storage Architecture (Version 1 Feedback)
+**Question**: Can we abstract the idea of a spec repo for artifacts and config, or can we have a default storage area on the container we are running in?
+
+**Context**: Determining artifact storage strategy
+
+**Discussion Points**:
+- Current approach uses separate "spec repo" for artifacts
+- Alternative: Default storage on job container filesystem
+- Pros of spec repo: Version control, collaboration, persistence
+- Pros of container storage: Simpler setup, no git dependency
+- Hybrid approach: Default to container, optional git sync
+- Impact on artifact sharing across sessions
+- Impact on artifact versioning and history
+
+**Status**: Needs architecture review
+
+### [Needs Clarification] Collaboration Features (Version 1 Feedback)
+**Question**: How should collaboration work in workflows?
+
+**Context**: Multi-user workflow participation
+
+**Discussion Points**:
+- Can multiple users work on the same workflow simultaneously?
+- How are conflicts resolved when multiple users edit artifacts?
+- Do we need real-time collaboration (like Google Docs)?
+- Is async collaboration (like GitHub PRs) sufficient?
+- How do permissions work for shared workflows?
+- Should workflows be owned by projects or individual users?
+
+**Status**: Needs product/design review
+
+### [Needs Clarification] Artifact Iteration Through Chat (Session 2 - Bill Murdock, Sally O'Malley)
+**Question**: Can users iterate on generated artifacts through chat instead of manual file editing?
+
+**Timestamp**: 00:41:09 - 00:43:43
+
+**Context**: User workflow preference
+
+**Resolution**: This already works! Users can iterate on artifacts (RF.md, spec.md) through the chat interface while the session is alive.
+
+**Action**:
+- Ensure this capability is prominently documented
+- Make it clear in the UI that artifacts can be refined through conversation
+- Example: After RF.md is generated, user can say "Remove the stuff about WAGG 2.1, I don't think that's appropriate"
+
+**Status**: Feature exists, needs documentation/visibility
+
+### [Future Enhancement] Artifact Viewer in Right Sidebar (Session 2 - Andy Braren)
+**Issue**: It would be helpful to preview generated artifacts without leaving the interface.
+
+**Timestamp**: 00:42:08
+
+**Context**: Emerging pattern in Claude web interface, Cursor, and other AI tools
+
+**Proposal**:
+- Add artifact browser/viewer in right-hand sidebar
+- After generating artifacts, users can click on one to see preview
+- Could show live PR, code files, or markdown preview
+- Follows pattern emerging in modern AI interfaces
+
+**Priority**: Future enhancement, not MVP
+
+**Status**: Document for future consideration
+
+### [Future Enhancement] Auto-Create Spec Repo (Session 2 - Bill Murdock)
+**Issue**: Requiring users to manually create a spec repo adds friction.
+
+**Timestamp**: 00:23:38
+
+**Proposal**:
+- If user doesn't already have a spec repo, the system could create one for them
+- Currently: User must create empty GitHub repo, then seed it
+- Future: System creates the repo and seeds it in one step
+
+**Priority**: Nice to have, not MVP critical
+
+**Status**: Document for future consideration
+
+### [Future Enhancement] Workspace/Team Hierarchy (Session 2 - Andy Braren)
+**Issue**: Need another organizational level above projects for PM teams to collectively manage workflows.
+
+**Timestamp**: 00:52:59 - 00:54:04
+
+**Context**: PM teams need shared workflow definitions
+
+**Proposal**:
+- Add "Workspace" or "Team" level above projects
+- PM team could collectively own and edit the "Create RFE" workflow definition
+- Workflows defined at workspace level are available to all projects in that workspace
+- Enables team-wide workflow management
+
+**Priority**: Phase 2 feature
+
+**Status**: Document for future architecture planning
+
+---
+
+## Summary of Actionable Items
+
+**High Priority** (Session 2 additions marked with 🆕):
+1. Remove Workflows from project page navigation (Version 1)
+2. Hide API Keys from project view until Jira integration (Version 1)
+3. Move Project Info to overview page (Version 1)
+4. Implement workflow step dependencies based on artifact generation (Version 1)
+5. Add dynamic status messages for workflow steps (Version 1)
+6. 🆕 Remove "Headless Session" option - all sessions are interactive (Session 2)
+7. 🆕 Rename "RF.md" to "Idea.md" throughout UI (Session 2)
+8. 🆕 Add spec repo education tooltip/popup (Session 2)
+9. 🆕 Move Integrations to user menu (Session 2)
+10. 🆕 Improve agent selection UI - show auto-select as default (Session 2)
+11. 🆕 Separate RFE and Specification workflows for different user types (Session 2)
+12. GitHub integration access control review
+
+**Medium Priority**:
+13. 🆕 Bot-guided repo setup through chat (Session 2)
+14. 🆕 Generic workflow platform positioning (Session 2)
+15. Clarify "Associated Repository" terminology
+16. Session vs Workflow terminology clarity
+17. Project Information tab content evaluation (after moving to overview)
+18. Live markdown rendering implementation
+
+**Low Priority / Needs Discussion**:
+19. Task popup suggestions (requires design review)
+20. File editing in UI for MVP (requires product review)
+21. Artifact storage architecture (requires architecture review)
+22. Collaboration features design (requires product review)
+
+**Future Enhancements** (Document but defer):
+23. 🆕 Artifact viewer in right sidebar (Session 2)
+24. 🆕 Auto-create spec repo (Session 2)
+25. 🆕 Workspace/Team hierarchy above projects (Session 2)
+
+---
+
+## Notes for AI Agents
+
+When implementing changes:
+- Follow vTeam frontend standards in `components/frontend/DESIGN_GUIDELINES.md`
+- Use Shadcn UI components only
+- Ensure TypeScript strict mode compliance (no `any` types)
+- Add loading and error states for all new features
+- Update tests and documentation
+- Follow the backend standards in `CLAUDE.md` for Go changes
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/my_notes.txt b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/my_notes.txt
new file mode 100644
index 000000000..852e4b138
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/my_notes.txt
@@ -0,0 +1,18 @@
+Feedback on Version 1 of the Ambient Code prototype
+
+Actionable
+
+- Hide workflows from the project view
+- Hide API keys from the project view for now until we have Jira integration
+- Move Project info to overview page
+- Each step in a workflow depends on the successful completion of the step before it. For example if the /spec command needs /ideate to have successfully run. A successful run of a step is determined by weather or not it generated an artifact. For example if there is no rfe.md generated then /spec is disabled.
+- The workflow descriptions in each step should change to status messages when the step is running. For example when a user runs /ideate then ‘Create or update rfe.md file’ should become ‘Generating rfe.md’
+
+Needs further discussion
+
+- Open question: File editing the ambient code UI, do we need it for MVP?
+- Open question: Can we abstract the idea of a spec repo for artifacts and config or can we have a default storage area on the container we are running in?
+- Open question: Collaboration
+
+
+
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/plan.md b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/plan.md
new file mode 100644
index 000000000..949907362
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/plan.md
@@ -0,0 +1,766 @@
+# Static Prototype Update Plan
+
+This plan outlines concrete changes to the static prototype HTML files to address actionable feedback from curated_feedback.md.
+
+**Last Updated**: After Session 2 feedback integration
+
+**New Updates from Session 2**: Updates 8-13 added below
+
+## Files to Modify
+
+### Core Project Pages
+- `static-prototype/projects/sample-project/page.html` - Main project page with sidebar navigation
+- `static-prototype/projects/sample-project/info/page.html` - Project information page
+- `static-prototype/projects/sample-project/rfe/page.html` - RFE Workspaces page (workflow page)
+- `static-prototype/projects/sample-project/sessions/page.html` - Sessions list page
+- `static-prototype/projects/sample-project/keys/page.html` - API Keys page
+- `static-prototype/projects/sample-project/permissions/page.html` - Permissions page
+- `static-prototype/projects/sample-project/settings/page.html` - Settings page
+
+### Individual RFE/Workflow Pages (examples)
+- `static-prototype/projects/sample-project/create-api-tests/page.html`
+- `static-prototype/projects/sample-project/implement-login-flow/page.html`
+- Other workflow instance pages
+
+---
+
+## Update 1: Remove Workflows from Sidebar Navigation
+
+**Priority**: High
+
+**Files**: All project pages (page.html, sessions/page.html, rfe/page.html, keys/page.html, permissions/page.html, settings/page.html, info/page.html)
+
+**Changes**:
+1. In each file's sidebar (`<aside class="project-sidebar">`), remove the "Workflows" navigation item
+2. Remove this block:
+   ```html
+   <li><a href="../rfe/page.html">
+       <svg>...</svg>
+       Workflows
+   </a></li>
+   ```
+3. Update active states to ensure remaining nav items work correctly
+
+**Note**: The actual RFE workspace pages can remain for now, just remove from navigation.
+
+---
+
+## Update 2: Hide API Keys from Sidebar Navigation
+
+**Priority**: High
+
+**Files**: All project pages (page.html, sessions/page.html, rfe/page.html, keys/page.html, permissions/page.html, settings/page.html, info/page.html)
+
+**Changes**:
+1. In each file's sidebar, comment out or remove the "API Keys" navigation item
+2. Remove this block:
+   ```html
+   <li><a href="../keys/page.html">
+       <svg>...</svg>
+       API Keys
+   </a></li>
+   ```
+3. Add HTML comment indicating it will return when Jira integration is implemented
+
+**Note**: The keys/page.html file itself can remain, just hidden from navigation.
+
+---
+
+## Update 3: Move Project Info to Overview Page
+
+**Priority**: High
+
+**Files**:
+- `static-prototype/projects/sample-project/page.html` (overview page)
+- `static-prototype/projects/sample-project/info/page.html` (project info page)
+
+**Changes**:
+
+### In page.html (overview):
+1. Add a new section in the main content area
+2. Copy relevant project information content from info/page.html
+3. Add project metadata display:
+   - Project name
+   - Description
+   - Created date
+   - Owner
+   - Any other relevant project details
+4. Consider adding a stats/metrics section (placeholder for future):
+   - Total sessions
+   - Active workflows
+   - Recent activity
+
+### In info/page.html:
+1. Add deprecation notice at top of page
+2. Redirect users to overview page
+3. Or simply add content indicating this has moved to Overview
+
+---
+
+## Update 4: Remove Project Information from Sidebar Navigation
+
+**Priority**: High
+
+**Files**: All project pages (rfe/page.html, sessions/page.html, keys/page.html, permissions/page.html, settings/page.html)
+
+**Changes**:
+1. Remove "Project Information" navigation item from sidebar
+2. Remove this block:
+   ```html
+   <li><a href="../info/page.html">
+       <svg>...</svg>
+       Project Information
+   </a></li>
+   ```
+
+**Note**: After Update 3, this navigation item is redundant since info moved to overview.
+
+---
+
+## Update 5: Add Workflow Step Dependencies (Visual Only)
+
+**Priority**: High
+
+**Files**: Individual workflow pages (create-api-tests/page.html, implement-login-flow/page.html, etc.)
+
+**Changes**:
+
+1. For each workflow step in the step list, add visual indicators:
+   - **Completed steps**: Green checkmark icon, normal text
+   - **Current available step**: Blue highlight, enabled button
+   - **Locked steps** (missing dependencies): Gray out, add lock icon, disable button
+
+2. Add tooltip or help text explaining why step is locked:
+   ```html
+   <div class="step-item locked" title="Requires rfe.md from previous step">
+       <div class="step-icon">🔒</div>
+       <div class="step-content">
+           <h4>/spec - Create Specification</h4>
+           <p class="step-status">Waiting for /ideate to complete</p>
+       </div>
+       <button class="btn btn-secondary" disabled>Run</button>
+   </div>
+   ```
+
+3. Add artifact status badges next to each step:
+   ```html
+   <div class="artifact-status">
+       <span class="badge badge-success">✓ rfe.md</span>
+   </div>
+   ```
+
+4. Example dependency chain to implement:
+   - `/ideate` → must generate `rfe.md`
+   - `/spec` → requires `rfe.md`, generates `spec.md`
+   - `/plan` → requires `spec.md`, generates `plan.md`
+   - `/tasks` → requires `plan.md`, generates `tasks.md`
+
+---
+
+## Update 6: Add Dynamic Status Messages to Workflow Steps
+
+**Priority**: High
+
+**Files**: Individual workflow pages (create-api-tests/page.html, implement-login-flow/page.html, etc.)
+
+**Changes**:
+
+1. Add multiple status message states for each step (use CSS classes to toggle visibility):
+
+   ```html
+   <div class="step-item" data-step-status="pending">
+       <div class="step-content">
+           <h4>/ideate - Ideation</h4>
+
+           <!-- Pending state -->
+           <p class="step-description" data-status="pending">
+               Create or update rfe.md file
+           </p>
+
+           <!-- Running state -->
+           <p class="step-description" data-status="running" style="display: none;">
+               <span class="spinner"></span> Generating rfe.md...
+           </p>
+
+           <!-- Completed state -->
+           <p class="step-description" data-status="completed" style="display: none;">
+               ✓ Generated rfe.md <span class="timestamp">2 minutes ago</span>
+           </p>
+       </div>
+   </div>
+   ```
+
+2. Add CSS for status indicators:
+   - Pending: Normal gray text
+   - Running: Blue text with spinner animation
+   - Completed: Green text with checkmark and timestamp
+
+3. Add example workflow states to demonstrate:
+   - Create one workflow page showing pending state
+   - Create one workflow page showing running state (with "Generating..." messages)
+   - Create one workflow page showing completed state (with checkmarks and timestamps)
+
+4. Use progressive verb forms for running states:
+   - "Generating rfe.md..."
+   - "Creating specification..."
+   - "Analyzing requirements..."
+   - "Building task list..."
+
+---
+
+## Update 7: Consolidated Sidebar Navigation Order
+
+**Priority**: Medium
+
+**After all changes, the final sidebar navigation should be:**
+
+```html
+<aside class="project-sidebar">
+    <ul>
+        <li><a href="../sessions/page.html">Sessions</a></li>
+        <li><a href="../page.html" class="active">Overview</a></li>
+        <!-- Workflows - REMOVED -->
+        <!-- API Keys - REMOVED (until Jira integration) -->
+        <!-- Project Information - REMOVED (moved to Overview) -->
+        <li><a href="../permissions/page.html">Sharing</a></li>
+        <li><a href="../settings/page.html">Settings</a></li>
+    </ul>
+</aside>
+```
+
+**Clean and simple**: Sessions, Overview, Sharing, Settings
+
+---
+
+## Update 8: Remove "Headless Session" Option (Session 2)
+
+**Priority**: High
+
+**Source**: Session 2 feedback (00:17:52 - 00:18:45)
+
+**Files**:
+- Any session creation pages/forms
+- New session modal/dialog components
+
+**Changes**:
+
+1. Remove the "Headless Session" vs "Interactive Session" choice from session creation UI
+2. All sessions should be created as interactive by default
+3. Remove any toggle, radio buttons, or dropdown that lets users choose session type
+4. Update UI text to simply say "New Session" instead of "New Interactive Session"
+
+**Example - Before**:
+```html
+<select name="session-type">
+    <option value="interactive">Interactive Session</option>
+    <option value="headless">Headless Session</option>
+</select>
+```
+
+**Example - After**:
+```html
+<!-- Session type selection removed entirely -->
+<h3>Create New Session</h3>
+<p>Start an interactive session with Claude</p>
+```
+
+**Rationale**: Users don't understand what "headless" means. Headless capabilities should be contained within workflows, not exposed as a session creation choice.
+
+---
+
+## Update 9: Rename "RF.md" to "Idea.md" (Session 2)
+
+**Priority**: High
+
+**Source**: Session 2 feedback (00:26:46)
+
+**Files**: Individual workflow pages showing artifacts
+
+**Changes**:
+
+1. Replace all instances of "RF.md" with "Idea.md" in workflow UIs
+2. Update workflow step titles:
+   - Old: "Create RF" → New: "Create Idea" or "Ideation"
+   - Old: "Update RF.md" → New: "Update Idea.md"
+3. Update artifact listings and file previews
+4. Update any workflow descriptions that mention "RF"
+
+**Example Changes**:
+```html
+<!-- Before -->
+<h4>/ideate - Create RF</h4>
+<p>Create or update RF.md file</p>
+<div class="artifact">
+    <a href="#">RF.md</a>
+</div>
+
+<!-- After -->
+<h4>/ideate - Ideation</h4>
+<p>Create or update Idea.md file</p>
+<div class="artifact">
+    <a href="#">Idea.md</a>
+</div>
+```
+
+**Rationale**: "RF" (Request for Feature) is organizational jargon that's confusing. "Idea" is more generic and can be used in various contexts (Jira cards, emails, epics, etc.).
+
+---
+
+## Update 10: Add Spec Repo Education Tooltip (Session 2)
+
+**Priority**: High
+
+**Source**: Session 2 feedback (00:22:38)
+
+**Files**: Any pages with spec repo configuration (session creation, settings)
+
+**Changes**:
+
+1. Add an info icon (ⓘ) or help icon next to "Spec Repository" label
+2. On hover or click, show tooltip/popup explaining what a spec repo is
+3. Add inline help text under the spec repo input field
+
+**Example Implementation**:
+```html
+<label for="spec-repo">
+    Spec Repository
+    <button class="info-icon" onclick="showSpecRepoHelp()">
+        <svg><!-- info icon --></svg>
+    </button>
+</label>
+
+<div id="spec-repo-help" class="tooltip" style="display: none;">
+    <h4>What is a Spec Repository?</h4>
+    <p>A spec repository is where workflow artifacts (ideas, specifications, plans) are stored.
+    It's a GitHub repository that serves as version-controlled storage for all your workflow outputs.</p>
+    <p>You can use an existing empty repository or create a new one specifically for this purpose.</p>
+</div>
+
+<input type="text" id="spec-repo" placeholder="username/my-spec-repo">
+<small class="help-text">The GitHub repository where artifacts will be stored</small>
+```
+
+**CSS Addition**:
+```css
+.info-icon {
+    background: none;
+    border: none;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 0.25rem;
+}
+
+.info-icon:hover {
+    color: #374151;
+}
+
+.tooltip {
+    position: absolute;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    z-index: 1000;
+}
+```
+
+---
+
+## Update 11: Move Integrations to User Menu (Session 2)
+
+**Priority**: High
+
+**Source**: Session 2 feedback (00:10:24)
+
+**Files**:
+- `static-prototype/projects/sample-project/page.html` (and all other pages with main navigation)
+- User dropdown menu component
+
+**Changes**:
+
+1. Remove "Integrations" from main top navigation bar
+2. Add "Integrations" to user dropdown menu (next to logout)
+
+**Example - Before**:
+```html
+<nav class="nav">
+    <a href="../../index.html">Projects</a>
+    <a href="../../integrations/page.html">Integrations</a>
+</nav>
+```
+
+**Example - After**:
+```html
+<!-- Main nav - Integrations removed -->
+<nav class="nav">
+    <a href="../../index.html">Projects</a>
+</nav>
+
+<!-- User dropdown menu - Integrations added -->
+<div class="user-dropdown-menu">
+    <div class="menu-section">
+        <a href="../../integrations/page.html">
+            <svg><!-- settings icon --></svg>
+            Integrations
+        </a>
+    </div>
+    <div class="menu-section">
+        <button onclick="logout()">
+            <svg><!-- logout icon --></svg>
+            Logout
+        </button>
+    </div>
+</div>
+```
+
+**Rationale**: Integrations are user-scoped settings (GitHub tokens, etc.), not project-scoped. Placing them in the user menu reinforces this.
+
+---
+
+## Update 12: Improve Agent Selection UI (Session 2)
+
+**Priority**: High
+
+**Source**: Session 2 feedback (00:24:42)
+
+**Files**: Session pages with agent selection interface
+
+**Changes**:
+
+1. Change agent selection from appearing like a required choice to showing it's automatic
+2. Add info button explaining auto-selection behavior
+3. Disable the selection UI and show default message
+
+**Example - Before**:
+```html
+<label>Select Agents</label>
+<select name="agents" multiple>
+    <option value="">-- Select agents --</option>
+    <option value="pm">Product Manager</option>
+    <option value="architect">Architect</option>
+    <option value="engineer">Staff Engineer</option>
+</select>
+```
+
+**Example - After**:
+```html
+<div class="agent-selection-info">
+    <label>
+        Agent Selection
+        <button class="info-icon" onclick="showAgentInfo()">
+            <svg><!-- info icon --></svg>
+        </button>
+    </label>
+    <div class="auto-select-message">
+        <svg class="check-icon"><!-- checkmark --></svg>
+        <span>Agents automatically selected based on your request</span>
+    </div>
+    <div id="agent-info-tooltip" class="tooltip" style="display: none;">
+        <p>Claude automatically chooses the most appropriate agents based on your prompt and workflow context.
+        You don't need to manually select them.</p>
+    </div>
+</div>
+```
+
+**CSS Addition**:
+```css
+.agent-selection-info {
+    margin: 1rem 0;
+}
+
+.auto-select-message {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: #f0fdf4;
+    border: 1px solid #86efac;
+    border-radius: 0.375rem;
+    color: #166534;
+    font-size: 0.875rem;
+}
+
+.check-icon {
+    width: 16px;
+    height: 16px;
+    color: #16a34a;
+}
+```
+
+---
+
+## Update 13: Rename Workflow to Reflect Generic Platform (Session 2)
+
+**Priority**: Medium
+
+**Source**: Session 2 feedback (00:37:06 - 00:39:05)
+
+**Files**: All pages that reference workflows
+
+**Changes**:
+
+1. Update page titles and descriptions to reflect generic workflow capability
+2. Avoid overly prescriptive language like "RFE Builder"
+3. Show workflows as examples, not the only use case
+
+**Example - Before**:
+```html
+<h1>RFE Workflow Builder</h1>
+<p>Create and manage Request for Enhancement workflows</p>
+```
+
+**Example - After**:
+```html
+<h1>Workflow Management</h1>
+<p>Create and run custom AI-powered workflows tailored to your team's processes</p>
+
+<div class="workflow-examples">
+    <h3>Example Workflows</h3>
+    <ul>
+        <li>Product Idea Refinement (PM workflow)</li>
+        <li>Specification Generation (Engineering workflow)</li>
+        <li>Architecture Review</li>
+        <li>Custom workflows defined by your team</li>
+    </ul>
+</div>
+```
+
+**Key Messaging Changes**:
+- "RFE Builder" → "Workflow Platform"
+- "Create RFE" → "Create Idea" or "Product Refinement Workflow"
+- Emphasize customization and team-specific workflows
+- Show RFE as one example among many possible workflows
+
+---
+
+## CSS Additions Needed
+
+Add to `static-prototype/styles.css`:
+
+```css
+/* Locked step styling */
+.step-item.locked {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.step-item.locked button {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+/* Status message states */
+.step-description[data-status="running"] {
+    color: #3b82f6;
+    font-weight: 500;
+}
+
+.step-description[data-status="completed"] {
+    color: #10b981;
+}
+
+/* Spinner animation */
+.spinner {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #3b82f6;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Artifact status badges */
+.artifact-status {
+    margin-top: 0.5rem;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+    font-weight: 500;
+}
+
+.badge-success {
+    background-color: #d1fae5;
+    color: #065f46;
+}
+
+.badge-warning {
+    background-color: #fef3c7;
+    color: #92400e;
+}
+
+/* Timestamp styling */
+.timestamp {
+    color: #6b7280;
+    font-size: 0.75rem;
+    font-weight: 400;
+}
+```
+
+---
+
+## Testing Checklist
+
+After making changes:
+
+1. **Navigation**:
+   - [ ] Verify "Workflows" removed from all sidebars
+   - [ ] Verify "API Keys" removed from all sidebars
+   - [ ] Verify "Project Information" removed from all sidebars
+   - [ ] Verify remaining nav items work and highlight correctly
+
+2. **Overview Page**:
+   - [ ] Project information visible on overview page
+   - [ ] Project metadata displays correctly
+   - [ ] Layout is clean and organized
+
+3. **Workflow Steps**:
+   - [ ] Locked steps show lock icon and are disabled
+   - [ ] Status messages change appropriately (pending → running → completed)
+   - [ ] Artifact badges display correctly
+   - [ ] Dependency chain is visually clear
+
+4. **Visual Consistency**:
+   - [ ] All pages use consistent sidebar navigation
+   - [ ] All styling is consistent across pages
+   - [ ] No broken links remain
+
+---
+
+## Out of Scope for This Plan
+
+The following feedback items are NOT included because they require further discussion, backend implementation, or are unclear:
+
+### Requires Backend/Infrastructure Changes:
+- **Live markdown rendering** - Requires WebSocket implementation (not feasible in static prototype)
+- **Bot-guided repo setup** - Requires actual chat AI integration (Session 2 feedback)
+- **GitHub integration access control** - Backend security concern, not prototype change
+- **Artifact storage architecture** - Needs architecture review
+- **Separate RFE and Specification workflows** - Requires workflow engine changes (Session 2 feedback)
+
+### Needs Product/Design Decision:
+- **Task popup suggestions** - Needs product/design review first
+- **File editing in UI** - Open question for MVP scope
+- **Collaboration features** - Needs product/design review
+- **Session vs Workflow terminology** - Needs terminology decision first
+- **"Associated Repository" renaming** - Needs terminology decision on exact wording
+
+### Future Enhancements (Documented but Deferred):
+- **Artifact viewer in right sidebar** - Phase 2 feature (Session 2)
+- **Auto-create spec repo** - Nice to have (Session 2)
+- **Workspace/Team hierarchy** - Phase 2 organizational feature (Session 2)
+- **Artifact iteration through chat** - Feature already exists, needs documentation (Session 2)
+
+These items should be addressed separately after decisions are made or in future phases.
+
+---
+
+## Implementation Order
+
+### Phase 1 - Navigation Cleanup (High Priority)
+**Updates**: 1, 2, 4, 7, 11
+- Remove "Workflows" from sidebar
+- Remove "API Keys" from sidebar
+- Remove "Project Information" from sidebar
+- Move "Integrations" to user menu
+- Final consolidated navigation structure
+
+**Estimated Time**: 30 minutes
+
+### Phase 2 - Content Consolidation (High Priority)
+**Updates**: 3
+- Move project info to overview page
+
+**Estimated Time**: 45 minutes
+
+### Phase 3 - Session 2 UX Improvements (High Priority)
+**Updates**: 8, 9, 10, 12
+- Remove "Headless Session" option
+- Rename "RF.md" to "Idea.md"
+- Add spec repo education tooltips
+- Improve agent selection UI
+
+**Estimated Time**: 1 hour
+
+### Phase 4 - Workflow Enhancements (High Priority)
+**Updates**: 5, 6
+- Add workflow step dependencies (visual)
+- Add dynamic status messages
+
+**Estimated Time**: 1.5 hours
+
+### Phase 5 - Messaging & Polish (Medium Priority)
+**Updates**: 13, CSS
+- Update to generic workflow platform messaging
+- Add all CSS for new components
+- Final testing and cleanup
+
+**Estimated Time**: 1 hour
+
+**Total Estimated Effort**: 4.5-5 hours for a developer familiar with the prototype structure.
+
+---
+
+## Updated Testing Checklist
+
+After making changes:
+
+### 1. Navigation (Updates 1, 2, 4, 7, 11)
+- [ ] "Workflows" removed from all project sidebars
+- [ ] "API Keys" removed from all project sidebars
+- [ ] "Project Information" removed from all sidebars
+- [ ] "Integrations" moved to user dropdown menu
+- [ ] Remaining nav items work and highlight correctly
+- [ ] Final sidebar shows: Sessions, Overview, Sharing, Settings
+
+### 2. Overview Page (Update 3)
+- [ ] Project information visible on overview page
+- [ ] Project metadata displays correctly
+- [ ] Layout is clean and organized
+
+### 3. Session Creation (Update 8)
+- [ ] "Headless Session" option removed
+- [ ] Session creation just says "New Session"
+- [ ] No confusing session type terminology
+
+### 4. Workflow Artifacts (Update 9)
+- [ ] All "RF.md" references changed to "Idea.md"
+- [ ] Workflow step titles updated ("Ideation" not "Create RF")
+- [ ] Artifact listings show "Idea.md"
+
+### 5. Educational Elements (Update 10, 12)
+- [ ] Spec repo has info tooltip explaining what it is
+- [ ] Agent selection shows "auto-select" message
+- [ ] Info buttons work and display helpful content
+- [ ] Tooltips are positioned correctly
+
+### 6. Workflow Steps (Updates 5, 6)
+- [ ] Locked steps show lock icon and are disabled
+- [ ] Status messages change: pending → running → completed
+- [ ] Artifact badges display correctly
+- [ ] Dependency chain is visually clear
+- [ ] Spinner animations work for running states
+- [ ] Timestamps show on completed states
+
+### 7. Generic Platform Messaging (Update 13)
+- [ ] No "RFE Builder" language remains
+- [ ] Workflows shown as examples, not prescriptive
+- [ ] Generic platform positioning is clear
+
+### 8. Visual Consistency
+- [ ] All pages use consistent sidebar navigation
+- [ ] All styling is consistent across pages
+- [ ] New tooltips and info icons match design system
+- [ ] No broken links remain
+- [ ] All CSS additions work correctly
diff --git a/components/frontend/static-prototype/design_path/prototype_version_1_feedback/slack_feedback.txt b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/slack_feedback.txt
new file mode 100644
index 000000000..5e614c201
--- /dev/null
+++ b/components/frontend/static-prototype/design_path/prototype_version_1_feedback/slack_feedback.txt
@@ -0,0 +1,30 @@
+# Feedback in Slack on version 1
+
+
+## Early feedback from Slack
+
+Gage
+
+-- moving github integration out of your own access opens us up to situations where a user may now get to see repos they dont have actual access to
+-- confused a bit on the role of a session and workflow it looks like sessions are workflows
+
+-- *ignore*  today workflows are a collection of sessions in part so other people can collaborate on a single workflow
+
+
+Jeremy Eder
+
+-- we have API keys on the left and then fields for other API keys in the settings tab. i know they have different uses, but isnt it confusing.?
+-- project information either drop it or put something useful there, maybe we create a metrics tab or something instead.
+-- *ignore*chat interface...im torn. i think we are surfacing too much detail overall. there are too many choices.
+-- what does associated repository mean? i need a clearer word used there.
+-- is it possible to render the markdown in the status pane live, as its being generated?
+-- i like how the chat had popups. i wonder if we can do  keep raising popups of the next most likely task. these popups give us the opportunity to gain advantages from prompt templating like what speckit is doing in the background.
+
+
+## Resources
+
+Video Walkthrough Session 1
+https://drive.google.com/file/d/18O98fAN1alz2XuZWBr9L9MrlXB5NxwIO/view?usp=sharing
+
+Video Walkthrough Session 2
+https://drive.google.com/file/d/17OpqYKnDChJ3jIts70L6oC967pztWES_/view?usp=sharing
\ No newline at end of file
diff --git a/components/frontend/static-prototype/index.html b/components/frontend/static-prototype/index.html
new file mode 100644
index 000000000..d5089eafa
--- /dev/null
+++ b/components/frontend/static-prototype/index.html
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ambient Code Platform - Workspaces</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <h1 class="page-title">Workspaces</h1>
+            <p class="page-description">Select a workspace or create a new one to get started</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+        <div class="card">
+            <div class="card-header">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h2 class="card-title">Workspaces</h2>
+                    <div style="display: flex; gap: 0.5rem;">
+                        <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                                <path d="M21 3v5h-5"/>
+                                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                                <path d="M3 21v-5h5"/>
+                            </svg>
+                            Refresh
+                        </button>
+                        <button onclick="openNewProjectModal()" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M12 5v14"/>
+                                <path d="M5 12h14"/>
+                            </svg>
+                            New Workspace
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="card-content">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Description</th>
+                            <th>Sessions</th>
+                            <th>Created</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <a href="projects/sample-workspace/page.html" style="color: #1e40af; text-decoration: none; font-weight: 500;">
+                                    sample-workspace
+                                </a>
+                            </td>
+                            <td>A sample workspace for demonstration purposes</td>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                                    <span style="font-weight: 500;">4</span>
+                                    <span class="badge badge-info" style="font-size: 0.75rem; white-space: nowrap;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; margin-right: 0.25rem;"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>1 Running</span>
+                                </div>
+                            </td>
+                            <td>2 days ago</td>
+                            <td>
+                                <button onclick="openDeleteModal(this)" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #000000;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 6h18"/>
+                                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+                                        <path d="M8 6V4c0-1 1-2 2-2h4c0-1 1-2 2-2v2"/>
+                                        <line x1="10" y1="11" x2="10" y2="17"/>
+                                        <line x1="14" y1="11" x2="14" y2="17"/>
+                                    </svg>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="projects/ai-assistant/page.html" style="color: #1e40af; text-decoration: none; font-weight: 500;">
+                                    ai-assistant
+                                </a>
+                            </td>
+                            <td>AI-powered coding assistant workspace</td>
+                            <td>
+                                <span style="font-weight: 500;">7</span>
+                            </td>
+                            <td>1 week ago</td>
+                            <td>
+                                <button onclick="openDeleteModal(this)" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #000000;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 6h18"/>
+                                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+                                        <path d="M8 6V4c0-1 1-2 2-2h4c0-1 1-2 2-2v2"/>
+                                        <line x1="10" y1="11" x2="10" y2="17"/>
+                                        <line x1="14" y1="11" x2="14" y2="17"/>
+                                    </svg>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a href="projects/web-platform/page.html" style="color: #1e40af; text-decoration: none; font-weight: 500;">
+                                    web-platform
+                                </a>
+                            </td>
+                            <td>Modern web platform workspace with microservices</td>
+                            <td>
+                                <span style="font-weight: 500;">12</span>
+                            </td>
+                            <td>2 weeks ago</td>
+                            <td>
+                                <button onclick="openDeleteModal(this)" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #000000;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 6h18"/>
+                                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+                                        <path d="M8 6V4c0-1 1-2 2-2h4c0-1 1-2 2-2v2"/>
+                                        <line x1="10" y1="11" x2="10" y2="17"/>
+                                        <line x1="14" y1="11" x2="14" y2="17"/>
+                                    </svg>
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+
+    <!-- New Workspace Modal -->
+    <div id="newProjectModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Create New Workspace</h2>
+                <button onclick="closeNewProjectModal()" class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p style="color: #64748b; margin-bottom: 1.5rem;">Set up a new workspace for your team</p>
+                <form onsubmit="createProject(event)">
+                    <div class="form-group">
+                        <label class="form-label" for="modal-name">Workspace Name *</label>
+                        <input type="text" id="modal-name" class="form-input" value="demo-user-workspace-1" required>
+                        <small style="color: #64748b; font-size: 0.875rem;">Must be lowercase, alphanumeric with hyphens</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="modal-displayName">Display Name *</label>
+                        <input type="text" id="modal-displayName" class="form-input" value="Demo User Workspace 1" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="modal-description">Description</label>
+                        <textarea id="modal-description" class="form-input form-textarea" placeholder="Brief description of your workspace..."></textarea>
+                    </div>
+
+                    <div style="display: flex; gap: 1rem; margin-top: 2rem; justify-content: flex-end;">
+                        <button type="button" onclick="closeNewProjectModal()" class="btn btn-secondary">Cancel</button>
+                        <button type="submit" class="btn btn-primary">Create Workspace</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Delete Workspace Modal -->
+    <div id="deleteProjectModal" class="modal" style="display: none;">
+        <div class="modal-content" style="max-width: 400px;">
+            <div class="modal-header">
+                <div style="display: flex; align-items: center; gap: 0.75rem;">
+                    <div style="width: 40px; height: 40px; background: #fef2f2; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2">
+                            <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
+                        </svg>
+                    </div>
+                    <h2 style="margin: 0;">Delete workspace</h2>
+                </div>
+                <button onclick="closeDeleteModal()" class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p style="color: #64748b; margin-bottom: 1.5rem; line-height: 1.6;">
+                    Are you sure you want to delete workspace "<span id="deleteProjectName" style="font-weight: 500;"></span>"? This will permanently remove the workspace and all related resources. This action cannot be undone.
+                </p>
+                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
+                    <button type="button" onclick="closeDeleteModal()" class="btn btn-secondary">Cancel</button>
+                    <button type="button" onclick="confirmDelete()" class="btn" style="background: #dc2626; color: white; border: 1px solid #dc2626;">Delete</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Counter for workspace numbering
+        let projectCounter = 1;
+
+        function openNewProjectModal() {
+            // Update form with current counter values
+            document.getElementById('modal-name').value = `demo-user-workspace-${projectCounter}`;
+            document.getElementById('modal-displayName').value = `Demo User Workspace ${projectCounter}`;
+
+            document.getElementById('newProjectModal').style.display = 'flex';
+            document.body.style.overflow = 'hidden'; // Prevent background scrolling
+
+            // Focus on first input for better UX
+            setTimeout(() => {
+                document.getElementById('modal-name').focus();
+                document.getElementById('modal-name').select();
+            }, 100);
+        }
+
+        function closeNewProjectModal() {
+            document.getElementById('newProjectModal').style.display = 'none';
+            document.body.style.overflow = 'auto'; // Restore scrolling
+
+            // Reset form to current counter values
+            document.getElementById('modal-name').value = `demo-user-workspace-${projectCounter}`;
+            document.getElementById('modal-displayName').value = `Demo User Workspace ${projectCounter}`;
+            document.getElementById('modal-description').value = '';
+        }
+
+        // Flag to prevent multiple submissions
+        let isCreatingProject = false;
+
+        function createProject(event) {
+            event.preventDefault(); // Prevent form submission
+
+            // Prevent multiple submissions
+            if (isCreatingProject) {
+                return;
+            }
+            isCreatingProject = true;
+            
+            // Get form values
+            const projectName = document.getElementById('modal-name').value;
+            const displayName = document.getElementById('modal-displayName').value;
+            const description = document.getElementById('modal-description').value || 'No description provided';
+            
+            // Validate required fields
+            if (!projectName || !displayName) {
+                alert('Please fill in all required fields');
+                isCreatingProject = false;
+                return;
+            }
+            
+            // Get the table body
+            const tbody = document.querySelector('.table tbody');
+            
+            // Create new row
+            const newRow = document.createElement('tr');
+            newRow.innerHTML = `
+                <td>
+                    <a href="projects/${projectName}/page.html" style="color: #1e40af; text-decoration: none; font-weight: 500;">
+                        ${projectName}
+                    </a>
+                </td>
+                <td>${description}</td>
+                <td>
+                    <span style="font-weight: 500;">0</span>
+                </td>
+                <td>Just now</td>
+                <td>
+                    <button onclick="openDeleteModal('${projectName}')" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #000000;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 6h18"/>
+                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+                            <path d="M8 6V4c0-1 1-2 2-2h4c0-1 1-2 2-2v2"/>
+                            <line x1="10" y1="11" x2="10" y2="17"/>
+                            <line x1="14" y1="11" x2="14" y2="17"/>
+                        </svg>
+                    </button>
+                </td>
+            `;
+            
+            // Insert at the top of the table
+            tbody.insertBefore(newRow, tbody.firstChild);
+            
+            // Increment counter for next project
+            projectCounter++;
+            
+            // Close modal
+            closeNewProjectModal();
+            
+            // Reset the flag
+            isCreatingProject = false;
+            
+            // Optional: Show success message
+            // alert('Project "' + displayName + '" created successfully!');
+        }
+
+        // Variables for delete functionality
+        let projectToDelete = null;
+        let rowToDelete = null;
+
+        function openDeleteModal(buttonElement) {
+            // Find the project name from the row
+            const row = buttonElement.closest('tr');
+            const projectLink = row.querySelector('a');
+            const projectName = projectLink.textContent.trim();
+            
+            // Store references for deletion
+            projectToDelete = projectName;
+            rowToDelete = row;
+            
+            // Update modal content
+            document.getElementById('deleteProjectName').textContent = projectName;
+            
+            // Show modal
+            document.getElementById('deleteProjectModal').style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeDeleteModal() {
+            document.getElementById('deleteProjectModal').style.display = 'none';
+            document.body.style.overflow = 'auto';
+            projectToDelete = null;
+            rowToDelete = null;
+        }
+
+        function confirmDelete() {
+            if (rowToDelete) {
+                // Remove the row from the table
+                rowToDelete.remove();
+            }
+            closeDeleteModal();
+        }
+
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+
+        // Close modal when clicking outside of it
+        window.onclick = function(event) {
+            const newProjectModal = document.getElementById('newProjectModal');
+            const deleteModal = document.getElementById('deleteProjectModal');
+            
+            if (event.target === newProjectModal) {
+                closeNewProjectModal();
+            } else if (event.target === deleteModal) {
+                closeDeleteModal();
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/integrations/page.html b/components/frontend/static-prototype/integrations/page.html
new file mode 100644
index 000000000..b7ab3a411
--- /dev/null
+++ b/components/frontend/static-prototype/integrations/page.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Integrations - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <h1 class="page-title">Integrations</h1>
+            <p class="page-description">Connect Ambient Code Platform with your favorite tools and services</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header">
+                    <div style="display: flex; align-items: center; gap: 1rem;">
+                        <div style="width: 48px; height: 48px; background: #24292e; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                        </div>
+                        <div>
+                            <h3 class="card-title">GitHub</h3>
+                            <p class="card-description">Connect to GitHub repositories</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 1rem;">
+                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+                            <div style="width: 8px; height: 8px; background: #64748b; border-radius: 50%;"></div>
+                            <span style="font-weight: 500; color: #64748b;">Not Connected</span>
+                        </div>
+                        <div style="color: #64748b; font-size: 0.875rem; margin-bottom: 1rem;">
+                            Connect to GitHub to manage repositories and create pull requests
+                        </div>
+                    </div>
+                    <button class="btn btn-primary">Connect GitHub</button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/new/page.html b/components/frontend/static-prototype/projects/new/page.html
new file mode 100644
index 000000000..df43d831c
--- /dev/null
+++ b/components/frontend/static-prototype/projects/new/page.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create New Workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../index.html">Workspaces</a>
+                <span>/</span>
+                <span>New</span>
+            </div>
+            <h1 class="page-title">Create New Workspace</h1>
+            <p class="page-description">Set up a new workspace for your team</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+        <div class="card" style="max-width: 600px;">
+            <div class="card-header">
+                <h2 class="card-title">Workspace Details</h2>
+                <p class="card-description">Provide basic information about your workspace</p>
+            </div>
+            <div class="card-content">
+                <form>
+                    <div class="form-group">
+                        <label class="form-label" for="name">Workspace Name *</label>
+                        <input type="text" id="name" class="form-input" placeholder="my-awesome-workspace" required>
+                        <small style="color: #64748b; font-size: 0.875rem;">Must be lowercase, alphanumeric with hyphens</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="displayName">Display Name *</label>
+                        <input type="text" id="displayName" class="form-input" placeholder="My Awesome Workspace" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="description">Description</label>
+                        <textarea id="description" class="form-input form-textarea" placeholder="Brief description of your workspace..."></textarea>
+                    </div>
+
+                    <div style="display: flex; gap: 1rem; margin-top: 2rem;">
+                        <button type="submit" class="btn btn-primary">Create Workspace</button>
+                        <a href="../../index.html" class="btn btn-secondary">Cancel</a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/create-api-tests/page.html b/components/frontend/static-prototype/projects/sample-workspace/create-api-tests/page.html
new file mode 100644
index 000000000..973d0d583
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/create-api-tests/page.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>create-api-tests - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+    <style>
+        .chat-container {
+            height: 70vh;
+            display: flex;
+            flex-direction: column;
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+        }
+        
+        .chat-messages {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        
+        .message {
+            margin-bottom: 1rem;
+            display: flex;
+            gap: 0.75rem;
+        }
+        
+        .message-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 500;
+            font-size: 0.875rem;
+            flex-shrink: 0;
+        }
+        
+        .user-avatar {
+            background: #64748b;
+            color: white;
+        }
+        
+        .ai-avatar {
+            background: #1e40af;
+            color: white;
+        }
+        
+        .message-content {
+            flex: 1;
+            background: #f8fafc;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+        }
+        
+        .message-header {
+            font-weight: 500;
+            margin-bottom: 0.25rem;
+            font-size: 0.875rem;
+        }
+        
+        .chat-input {
+            padding: 1rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+        
+        .session-status {
+            background: #f0fdf4;
+            border: 1px solid #10b981;
+            border-radius: 0.375rem;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>create-api-tests</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <h1 class="page-title">Interactive Session: create-api-tests</h1>
+                    <span class="badge badge-success" style="white-space: nowrap;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                            <path d="M20 6L9 17l-5-5"/>
+                        </svg>
+                        Completed
+                    </span>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                        </svg>
+                        Clone
+                    </button>
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7,10 12,15 17,10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Export
+                    </button>
+                </div>
+            </div>
+            <p class="page-description">Write comprehensive API tests for authentication endpoints • claude-3.5-sonnet • Completed 30 minutes ago</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+
+        <div class="chat-container">
+            <div class="chat-messages">
+                <div class="message">
+                    <div class="message-avatar user-avatar">DU</div>
+                    <div class="message-content">
+                        <div class="message-header">You</div>
+                        <div>Write comprehensive API tests for the authentication endpoints we created</div>
+                    </div>
+                </div>
+                
+                <div class="message">
+                    <div class="message-avatar ai-avatar">AI</div>
+                    <div class="message-content">
+                        <div class="message-header">Claude</div>
+                        <div>I'll create comprehensive API tests for your authentication endpoints. Let me start with testing the registration, login, and token validation endpoints...</div>
+                    </div>
+                </div>
+
+                <div class="message">
+                    <div class="message-avatar user-avatar">DU</div>
+                    <div class="message-content">
+                        <div class="message-header">You</div>
+                        <div>Make sure to test edge cases like invalid emails and weak passwords</div>
+                    </div>
+                </div>
+                
+                <div class="message">
+                    <div class="message-avatar ai-avatar">AI</div>
+                    <div class="message-content">
+                        <div class="message-header">Claude</div>
+                        <div>Excellent point! I'll include comprehensive edge case testing including invalid email formats, weak passwords, duplicate registrations, and malformed requests. Here are the test suites...</div>
+                    </div>
+                </div>
+
+                <div class="message">
+                    <div class="message-avatar user-avatar">DU</div>
+                    <div class="message-content">
+                        <div class="message-header">You</div>
+                        <div>Perfect! Also add tests for JWT token expiration and refresh</div>
+                    </div>
+                </div>
+                
+                <div class="message">
+                    <div class="message-avatar ai-avatar">AI</div>
+                    <div class="message-content">
+                        <div class="message-header">Claude</div>
+                        <div>Done! I've added comprehensive JWT testing including token expiration, refresh token flow, and invalid token handling. All tests are now complete and passing. ✅</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="chat-input">
+                <input type="text" placeholder="Session completed - no new messages" disabled style="flex: 1; background: #f8fafc; color: #64748b;">
+                <button class="btn btn-secondary" disabled>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 2L11 13"/>
+                        <path d="M22 2l-7 20-4-9-9-4z"/>
+                    </svg>
+                    Send
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/implement-login-flow/page.html b/components/frontend/static-prototype/projects/sample-workspace/implement-login-flow/page.html
new file mode 100644
index 000000000..03c6369da
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/implement-login-flow/page.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>implement-login-flow - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+    <style>
+        .chat-container {
+            height: 70vh;
+            display: flex;
+            flex-direction: column;
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+        }
+        
+        .chat-messages {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        
+        .message {
+            margin-bottom: 1rem;
+            display: flex;
+            gap: 0.75rem;
+        }
+        
+        .message-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 500;
+            font-size: 0.875rem;
+            flex-shrink: 0;
+        }
+        
+        .user-avatar {
+            background: #64748b;
+            color: white;
+        }
+        
+        .ai-avatar {
+            background: #1e40af;
+            color: white;
+        }
+        
+        .message-content {
+            flex: 1;
+            background: #f8fafc;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+        }
+        
+        .message-header {
+            font-weight: 500;
+            margin-bottom: 0.25rem;
+            font-size: 0.875rem;
+        }
+        
+        .chat-input {
+            padding: 1rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+        
+        .session-status {
+            background: #f0f9ff;
+            border: 1px solid #0ea5e9;
+            border-radius: 0.375rem;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>implement-login-flow</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <h1 class="page-title">Interactive Session: implement-login-flow</h1>
+                    <span class="badge badge-info" style="white-space: nowrap;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; margin-right: 0.25rem;">
+                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                        </svg>
+                        Running
+                    </span>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                        </svg>
+                        Clone
+                    </button>
+                    <button onclick="stopSession()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; color: #dc2626; border-color: #dc2626;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                            <line x1="9" y1="9" x2="15" y2="15"/>
+                            <line x1="15" y1="9" x2="9" y2="15"/>
+                        </svg>
+                        Stop
+                    </button>
+                </div>
+            </div>
+            <p class="page-description">Create user login and registration endpoints • claude-3.5-sonnet • Started 4 hours ago</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+
+        <div class="chat-container">
+            <div class="chat-messages">
+                <div class="message">
+                    <div class="message-avatar user-avatar">DU</div>
+                    <div class="message-content">
+                        <div class="message-header">You</div>
+                        <div>Create user login and registration endpoints with proper validation and security</div>
+                    </div>
+                </div>
+                
+                <div class="message">
+                    <div class="message-avatar ai-avatar">AI</div>
+                    <div class="message-content">
+                        <div class="message-header">Claude</div>
+                        <div>I'll help you create secure login and registration endpoints. Let me start by setting up the user model with proper password hashing and validation...</div>
+                    </div>
+                </div>
+
+                <div class="message">
+                    <div class="message-avatar user-avatar">DU</div>
+                    <div class="message-content">
+                        <div class="message-header">You</div>
+                        <div>Make sure to include JWT token generation and email validation</div>
+                    </div>
+                </div>
+                
+                <div class="message">
+                    <div class="message-avatar ai-avatar">AI</div>
+                    <div class="message-content">
+                        <div class="message-header">Claude</div>
+                        <div>Absolutely! I'll implement JWT token generation for authentication and comprehensive email validation. Here's the updated user model with bcrypt password hashing and JWT integration...</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="chat-input">
+                <input type="text" placeholder="Type your message..." style="flex: 1;">
+                <button class="btn btn-primary">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 2L11 13"/>
+                        <path d="M22 2l-7 20-4-9-9-4z"/>
+                    </svg>
+                    Send
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Session control functions
+        function stopSession() {
+            // Update status badge
+            const statusBadge = document.querySelector('.badge-info');
+            if (statusBadge) {
+                statusBadge.className = 'badge';
+                statusBadge.style.background = '#f1f5f9';
+                statusBadge.style.color = '#64748b';
+                statusBadge.innerHTML = `
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <line x1="9" y1="9" x2="15" y2="15"/>
+                        <line x1="15" y1="9" x2="9" y2="15"/>
+                    </svg>
+                    Stopped
+                `;
+            }
+            
+            // Update page description
+            const description = document.querySelector('.page-description');
+            if (description) {
+                description.textContent = 'Create user login and registration endpoints • claude-3.5-sonnet • Stopped just now';
+            }
+            
+            // Disable chat input
+            const chatInput = document.querySelector('.chat-input input');
+            const sendButton = document.querySelector('.chat-input button');
+            if (chatInput && sendButton) {
+                chatInput.disabled = true;
+                chatInput.placeholder = 'Session stopped - no new messages';
+                chatInput.style.background = '#f8fafc';
+                chatInput.style.color = '#64748b';
+                sendButton.disabled = true;
+            }
+            
+            // Change Stop button to Export
+            const stopButton = document.querySelector('[onclick="stopSession()"]');
+            if (stopButton) {
+                stopButton.onclick = null;
+                stopButton.style.color = '';
+                stopButton.style.borderColor = '';
+                stopButton.innerHTML = `
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                        <polyline points="7,10 12,15 17,10"/>
+                        <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                    Export
+                `;
+            }
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/info/page.html b/components/frontend/static-prototype/projects/sample-workspace/info/page.html
new file mode 100644
index 000000000..5e339fcfd
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/info/page.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project Information - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>Project Information</span>
+            </div>
+            <div class="page-header-content">
+                <div class="page-header-left">
+                    <h1 class="page-title">Project Information</h1>
+                    <p class="page-description">View detailed information about this project</p>
+                </div>
+                <div class="page-actions">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 20h9"/>
+                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+                        </svg>
+                        Edit Project
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <ul>
+                    <li><a href="../page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9,22 9,12 15,12 15,22"/>
+                        </svg>
+                        Overview
+                    </a></li>
+                    <li><a href="page.html" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 16v-4"/>
+                            <path d="M12 8h.01"/>
+                        </svg>
+                        Project Information
+                    </a></li>
+                    <li><a href="../rfe/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 3v12"/>
+                            <circle cx="18" cy="6" r="3"/>
+                            <circle cx="6" cy="15" r="3"/>
+                            <path d="M18 9a9 9 0 0 1-9 9"/>
+                        </svg>
+                        Workflows
+                    </a></li>
+                    <li><a href="../sessions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="../keys/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                        </svg>
+                        API Keys
+                    </a></li>
+                    <li><a href="../permissions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="../settings/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Project Information</h3>
+                        </div>
+                        <div class="card-content">
+                            <div style="margin-bottom: 1rem;">
+                                <strong>Created:</strong> 2 days ago
+                            </div>
+                            <div>
+                                <strong>Status:</strong> 
+                                <span class="badge badge-success">Active</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Quick Stats</h3>
+                        </div>
+                        <div class="card-content">
+                            <div style="margin-bottom: 1rem;">
+                                <strong>RFE Workspaces:</strong> 3
+                            </div>
+                            <div style="margin-bottom: 1rem;">
+                                <strong>Active Sessions:</strong> 2
+                            </div>
+                            <div style="margin-bottom: 1rem;">
+                                <strong>API Keys:</strong> 1
+                            </div>
+                            <div>
+                                <strong>Team Members:</strong> 5
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/keys/page.html b/components/frontend/static-prototype/projects/sample-workspace/keys/page.html
new file mode 100644
index 000000000..4d7f33097
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/keys/page.html
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Keys - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>Keys</span>
+            </div>
+            <div class="page-header-content">
+                <div class="page-header-left">
+                    <h1 class="page-title">API Keys</h1>
+                    <p class="page-description">Manage API keys for external integrations and services</p>
+                </div>
+                <div class="page-actions">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 5v14"/>
+                            <path d="M5 12h14"/>
+                        </svg>
+                        Create API Key
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <ul>
+                    <li><a href="../page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9,22 9,12 15,12 15,22"/>
+                        </svg>
+                        Overview
+                    </a></li>
+                    <li><a href="../info/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 16v-4"/>
+                            <path d="M12 8h.01"/>
+                        </svg>
+                        Project Information
+                    </a></li>
+                    <li><a href="../rfe/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 3v12"/>
+                            <circle cx="18" cy="6" r="3"/>
+                            <circle cx="6" cy="15" r="3"/>
+                            <path d="M18 9a9 9 0 0 1-9 9"/>
+                        </svg>
+                        Workflows
+                    </a></li>
+                    <li><a href="../sessions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="page.html" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                        </svg>
+                        API Keys
+                    </a></li>
+                    <li><a href="../permissions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="../settings/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+                <div class="card">
+                    <div class="card-header">
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <div>
+                                <h3 class="card-title">API Keys</h3>
+                                <p class="card-description">API keys provide secure access to external services and integrations</p>
+                            </div>
+                            <div style="display: flex; gap: 0.5rem;">
+                                <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                                        <path d="M21 3v5h-5"/>
+                                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                                        <path d="M3 21v-5h5"/>
+                                    </svg>
+                                    Refresh
+                                </button>
+                                <button class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M12 5v14"/>
+                                        <path d="M5 12h14"/>
+                                    </svg>
+                                    Create Key
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Created</th>
+                                    <th>Last Used</th>
+                                    <th>Role</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div style="font-weight: 500;">Production API Key</div>
+                                        <div style="font-size: 0.875rem; color: #64748b;">For production deployments and CI/CD</div>
+                                    </td>
+                                    <td>1 week ago</td>
+                                    <td>2 hours ago</td>
+                                    <td><span class="badge badge-success">Admin</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div style="font-weight: 500;">Development Key</div>
+                                        <div style="font-size: 0.875rem; color: #64748b;">For local development and testing</div>
+                                    </td>
+                                    <td>2 weeks ago</td>
+                                    <td>1 day ago</td>
+                                    <td><span class="badge badge-success">Admin</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div style="font-weight: 500;">Monitoring Key</div>
+                                        <div style="font-size: 0.875rem; color: #64748b;">Read-only access for monitoring tools</div>
+                                    </td>
+                                    <td>3 days ago</td>
+                                    <td>Never</td>
+                                    <td><span class="badge badge-success">Admin</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/optimize-queries/headless.html b/components/frontend/static-prototype/projects/sample-workspace/optimize-queries/headless.html
new file mode 100644
index 000000000..f1b9dbd34
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/optimize-queries/headless.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>optimize-queries - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+    <style>
+        .session-container {
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+        
+        .log-container {
+            height: 60vh;
+            overflow-y: auto;
+            background: #1a1a1a;
+            color: #e5e5e5;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.4;
+        }
+        
+        .log-line {
+            padding: 0.25rem 1rem;
+            border-bottom: 1px solid #333;
+            white-space: pre-wrap;
+        }
+        
+        .log-timestamp {
+            color: #64748b;
+            margin-right: 0.5rem;
+        }
+        
+        .log-level-info {
+            color: #3b82f6;
+        }
+        
+        .log-level-success {
+            color: #10b981;
+        }
+        
+        .log-level-warning {
+            color: #f59e0b;
+        }
+        
+        .progress-bar {
+            background: #e2e8f0;
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 1rem;
+        }
+        
+        .progress-fill {
+            background: #10b981;
+            height: 100%;
+            width: 100%;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>optimize-queries</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <h1 class="page-title">Headless Session: optimize-queries</h1>
+                    <span class="badge badge-success" style="white-space: nowrap;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                            <path d="M20 6L9 17l-5-5"/>
+                        </svg>
+                        Completed
+                    </span>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                        </svg>
+                        Clone
+                    </button>
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7,10 12,15 17,10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Export
+                    </button>
+                </div>
+            </div>
+            <p class="page-description">Optimize database queries for better performance • claude-3.5-sonnet • Completed 2 hours ago</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Session Configuration</h3>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Task:</strong> Optimize database queries for better performance
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Model:</strong> claude-3.5-sonnet
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Mode:</strong> Headless
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Duration:</strong> 18 minutes
+                    </div>
+                    <div>
+                        <strong>Status:</strong> 
+                        <span class="badge badge-success" style="white-space: nowrap;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                                <path d="M20 6L9 17l-5-5"/>
+                            </svg>
+                            Completed
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Performance Results</h3>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 1rem;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                            <span>Query Optimization</span>
+                            <span style="font-weight: 500; color: #10b981;">100%</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
+                        </div>
+                    </div>
+                    <div style="font-size: 0.875rem; color: #64748b;">
+                        <div style="margin-bottom: 0.25rem;">✓ Analyzed slow queries</div>
+                        <div style="margin-bottom: 0.25rem;">✓ Added database indexes</div>
+                        <div style="margin-bottom: 0.25rem;">✓ Optimized JOIN operations</div>
+                        <div style="margin-bottom: 0.25rem;">✓ Reduced query time by 75%</div>
+                        <div>✓ Updated documentation</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card" style="margin-top: 1.5rem;">
+            <div class="card-header">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h3 class="card-title">Execution Log</h3>
+                    <button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7,10 12,15 17,10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Download
+                    </button>
+                </div>
+            </div>
+            <div class="card-content" style="padding: 0;">
+                <div class="log-container">
+                    <div class="log-line">
+                        <span class="log-timestamp">14:15:30</span>
+                        <span class="log-level-info">[INFO]</span> Session started: Optimize database queries for better performance
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:15:32</span>
+                        <span class="log-level-info">[INFO]</span> Analyzing database query performance
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:16:15</span>
+                        <span class="log-level-warning">[WARNING]</span> Found 5 slow queries without proper indexing
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:16:45</span>
+                        <span class="log-level-info">[INFO]</span> Creating optimized database indexes
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:18:22</span>
+                        <span class="log-level-success">[SUCCESS]</span> Database indexes created successfully
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:19:10</span>
+                        <span class="log-level-info">[INFO]</span> Optimizing JOIN operations and subqueries
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:21:35</span>
+                        <span class="log-level-success">[SUCCESS]</span> Query performance improved by 75%
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:22:15</span>
+                        <span class="log-level-info">[INFO]</span> Updating query documentation
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">14:23:48</span>
+                        <span class="log-level-success">[SUCCESS]</span> Database optimization completed successfully
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/page.html b/components/frontend/static-prototype/projects/sample-workspace/page.html
new file mode 100644
index 000000000..af7c4813f
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/page.html
@@ -0,0 +1,1059 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../index.html">Workspaces</a>
+                <span>/</span>
+                <span>sample-workspace</span>
+            </div>
+            <h1 class="page-title">sample-workspace</h1>
+            <p class="page-description">A sample workspace for demonstration purposes</p>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <h3 style="padding: 1rem 1.5rem; margin: 0; font-size: 0.875rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Workspace</h3>
+                <ul>
+                    <li><a href="#" onclick="showSessions(); return false;" id="sessions-nav" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="#" onclick="showPermissions(); return false;" id="permissions-nav">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="#" onclick="showSettings(); return false;" id="settings-nav">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Workspace Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+
+                <!-- Sessions Content -->
+                <div id="sessions-content">
+                    <div class="card">
+                        <div class="card-header">
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <h3 class="card-title">Agentic Sessions</h3>
+                                <div style="display: flex; gap: 0.5rem;">
+                                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                                            <path d="M21 3v5h-5"/>
+                                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                                            <path d="M3 21v-5h5"/>
+                                        </svg>
+                                        Refresh
+                                    </button>
+                                    <button onclick="createSession('interactive')" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 5v14"/>
+                                            <path d="M5 12h14"/>
+                                        </svg>
+                                        New Session
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-content">
+                            <table class="table">
+                                <thead>
+                                    <tr>
+                                        <th>Session Name</th>
+                                        <th>Status</th>
+                                        <th>Mode</th>
+                                        <th>Model</th>
+                                        <th>Created</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr onclick="window.location.href='implement-login-flow/page.html'" style="cursor: pointer;">
+                                        <td>
+                                            <div>
+                                                <div style="color: #1e40af; font-weight: 500;">implement-login-flow</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">Create user login and registration endpoints</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-info" style="white-space: nowrap;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; margin-right: 0.25rem;"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>Running</span></td>
+                                        <td>interactive</td>
+                                        <td>claude-3.5-sonnet</td>
+                                        <td>4 hours ago</td>
+                                    </tr>
+                                    <tr onclick="window.location.href='setup-database/headless.html'" style="cursor: pointer;">
+                                        <td>
+                                            <div>
+                                                <div style="color: #1e40af; font-weight: 500;">setup-database</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">Initialize PostgreSQL database with user tables</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-success" style="white-space: nowrap;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;"><path d="M20 6L9 17l-5-5"/></svg>Completed</span></td>
+                                        <td>headless</td>
+                                        <td>claude-3.5-sonnet</td>
+                                        <td>1 day ago</td>
+                                    </tr>
+                                    <tr onclick="window.location.href='create-api-tests/page.html'" style="cursor: pointer;">
+                                        <td>
+                                            <div>
+                                                <div style="color: #1e40af; font-weight: 500;">create-api-tests</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">Write comprehensive API tests for authentication endpoints</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-success" style="white-space: nowrap;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;"><path d="M20 6L9 17l-5-5"/></svg>Completed</span></td>
+                                        <td>interactive</td>
+                                        <td>claude-3.5-sonnet</td>
+                                        <td>30 minutes ago</td>
+                                    </tr>
+                                    <tr onclick="window.location.href='optimize-queries/headless.html'" style="cursor: pointer;">
+                                        <td>
+                                            <div>
+                                                <div style="color: #1e40af; font-weight: 500;">optimize-queries</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">Optimize database queries for better performance</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-success" style="white-space: nowrap;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;"><path d="M20 6L9 17l-5-5"/></svg>Completed</span></td>
+                                        <td>headless</td>
+                                        <td>claude-3.5-sonnet</td>
+                                        <td>2 hours ago</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Workflows Content -->
+                <div id="workflows-content" style="display: none;">
+                    <div class="grid grid-2">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">📝 Create RFE</h3>
+                            </div>
+                            <div class="card-content">
+                                <p style="color: #64748b; margin-bottom: 1rem;">Ideate and specify your request for enhancement with a structured workflow that guides you through the RFE creation process.</p>
+                                <div style="margin-bottom: 1rem;">
+                                    <strong>Workflow Steps:</strong>
+                                    <ul style="margin-top: 0.5rem; padding-left: 1.5rem; color: #64748b;">
+                                        <li>Ideate - Create or update rfe.md file</li>
+                                        <li>Specify - Create or update spec.md file</li>
+                                    </ul>
+                                </div>
+                                <div style="position: relative;">
+                                    <button onclick="toggleRFESessionDropdown()" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 5v14"/>
+                                            <path d="M5 12h14"/>
+                                        </svg>
+                                        New Session
+                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="rfe-session-dropdown-arrow">
+                                            <path d="M6 9l6 6 6-6"/>
+                                        </svg>
+                                    </button>
+                                    <div id="rfeSessionDropdownMenu" style="display: none; position: absolute; left: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 180px; z-index: 1000; margin-top: 0.25rem;">
+                                        <div style="padding: 0.25rem;">
+                                            <button onclick="createSession('interactive')" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                                </svg>
+                                                <div style="font-weight: 500;">Interactive Session</div>
+                                            </button>
+                                            <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                            <button onclick="createSession('headless')" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <circle cx="12" cy="12" r="3"/>
+                                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                                                </svg>
+                                                <div style="font-weight: 500;">Headless Session</div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">🏗️ Create Feature (Spec Kit)</h3>
+                            </div>
+                            <div class="card-content">
+                                <p style="color: #64748b; margin-bottom: 1rem;">Complete feature development workflow from specification to implementation with comprehensive planning and task breakdown.</p>
+                                <div style="margin-bottom: 1rem;">
+                                    <strong>Workflow Steps:</strong>
+                                    <ul style="margin-top: 0.5rem; padding-left: 1.5rem; color: #64748b;">
+                                        <li>Ideate - Create or update rfe.md file</li>
+                                        <li>Specify - Create or update spec.md file</li>
+                                        <li>Plan - Generate implementation plan</li>
+                                        <li>Tasks - Break down into tasks</li>
+                                        <li>Implement - Execute implementation</li>
+                                    </ul>
+                                </div>
+                                <div style="position: relative;">
+                                    <button onclick="toggleSpecKitSessionDropdown()" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 5v14"/>
+                                            <path d="M5 12h14"/>
+                                        </svg>
+                                        New Session
+                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="speckit-session-dropdown-arrow">
+                                            <path d="M6 9l6 6 6-6"/>
+                                        </svg>
+                                    </button>
+                                    <div id="speckitSessionDropdownMenu" style="display: none; position: absolute; left: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 180px; z-index: 1000; margin-top: 0.25rem;">
+                                        <div style="padding: 0.25rem;">
+                                            <button onclick="createSession('interactive')" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                                </svg>
+                                                <div style="font-weight: 500;">Interactive Session</div>
+                                            </button>
+                                            <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                            <button onclick="createSession('headless')" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <circle cx="12" cy="12" r="3"/>
+                                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                                                </svg>
+                                                <div style="font-weight: 500;">Headless Session</div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Workspace Information Content -->
+                <div id="project-info-content" style="display: none;">
+                    <div class="grid grid-2">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Workspace Information</h3>
+                            </div>
+                            <div class="card-content">
+                                <div style="margin-bottom: 1rem;">
+                                    <strong>Created:</strong> 2 days ago
+                                </div>
+                                <div>
+                                    <strong>Status:</strong> 
+                                    <span class="badge badge-success">Active</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Quick Stats</h3>
+                            </div>
+                            <div class="card-content">
+                                <div style="margin-bottom: 1rem;">
+                                    <strong>RFE Workspaces:</strong> 3
+                                </div>
+                                <div style="margin-bottom: 1rem;">
+                                    <strong>Active Sessions:</strong> 2
+                                </div>
+                                <div style="margin-bottom: 1rem;">
+                                    <strong>API Keys:</strong> 1
+                                </div>
+                                <div>
+                                    <strong>Team Members:</strong> 5
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Permissions Content -->
+                <div id="permissions-content" style="display: none;">
+                    <div class="card">
+                        <div class="card-header">
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <div>
+                                    <h3 class="card-title">Sharing</h3>
+                                    <p class="card-description">Users and groups with access to this project and their roles</p>
+                                </div>
+                                <div style="display: flex; gap: 0.5rem;">
+                                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                                            <path d="M21 3v5h-5"/>
+                                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                                            <path d="M3 21v-5h5"/>
+                                        </svg>
+                                        Refresh
+                                    </button>
+                                    <button class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 5v14"/>
+                                            <path d="M5 12h14"/>
+                                        </svg>
+                                        Grant Permission
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-content">
+                            <table class="table">
+                                <thead>
+                                    <tr>
+                                        <th>Users/Groups</th>
+                                        <th>Type</th>
+                                        <th>Role</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            <div>
+                                                <div style="font-weight: 500;">john.doe@company.com</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">Project Owner</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-info">User</span></td>
+                                        <td><span class="badge badge-success">Admin</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div>
+                                                <div style="font-weight: 500;">development-team</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">5 members</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-warning">Group</span></td>
+                                        <td><span class="badge badge-success">View</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div>
+                                                <div style="font-weight: 500;">sarah.admin@company.com</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">Senior Developer</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-info">User</span></td>
+                                        <td><span class="badge badge-success">Admin</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div>
+                                                <div style="font-weight: 500;">qa-team</div>
+                                                <div style="font-size: 0.875rem; color: #64748b;">3 members</div>
+                                            </div>
+                                        </td>
+                                        <td><span class="badge badge-warning">Group</span></td>
+                                        <td><span class="badge badge-success">View</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Settings Content -->
+                <div id="settings-content" style="display: none;">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">General Settings</h3>
+                            <p class="card-description">Basic workspace configuration</p>
+                        </div>
+                        <div class="card-content">
+                            <form>
+                                <div class="form-group">
+                                    <label class="form-label">Display Name</label>
+                                    <input type="text" class="form-input" value="Sample Workspace">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Workspace Name</label>
+                                    <input type="text" class="form-input" value="sample-workspace" readonly>
+                                    <small style="color: #64748b; font-size: 0.875rem;">Workspace name cannot be changed after creation</small>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Description</label>
+                                    <textarea class="form-input form-textarea">A sample workspace for demonstration purposes</textarea>
+                                </div>
+                                <button type="submit" class="btn btn-primary">Save Changes</button>
+                            </form>
+                        </div>
+                    </div>
+
+                    <div class="card" style="margin-top: 1.5rem;">
+                        <div class="card-header">
+                            <h3 class="card-title">Runner Secrets</h3>
+                            <p class="card-description">Configure the Secret and manage key/value pairs used by workspace runners.</p>
+                        </div>
+                        <div class="card-content">
+                            <form>
+                                <div class="form-group">
+                                    <label class="form-label">Runner Secret</label>
+                                    <select class="form-input">
+                                        <option value="ambient-runner-secret">using ambient-runner-secret</option>
+                                        <option value="create-new">create new runner secret</option>
+                                    </select>
+                                </div>
+
+                                <div class="form-group">
+                                    <label class="form-label">Anthropic API Key <span style="color: #dc2626;">*</span></label>
+                                    <input type="password" class="form-input" placeholder="sk-ant-api03-..." required>
+                                    <small style="color: #64748b; font-size: 0.875rem;">Required for running agentic sessions</small>
+                                </div>
+
+                                <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0;">
+                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                                        <h4 style="font-weight: 500; margin: 0;">Additional Secrets</h4>
+                                        <button type="button" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M12 5v14"/>
+                                                <path d="M5 12h14"/>
+                                            </svg>
+                                            Add Secret
+                                        </button>
+                                    </div>
+
+                                    <div id="secrets-list">
+                                        <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: start;">
+                                            <div>
+                                                <input type="text" class="form-input" placeholder="Key" value="GITHUB_TOKEN">
+                                            </div>
+                                            <div>
+                                                <input type="password" class="form-input" placeholder="Value" value="ghp_xxxxxxxxxxxx">
+                                            </div>
+                                            <button type="button" style="background: none; border: none; cursor: pointer; padding: 0.5rem; color: #000000; margin-top: 0.125rem;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </div>
+
+                                        <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: start;">
+                                            <div>
+                                                <input type="text" class="form-input" placeholder="Key" value="DATABASE_URL">
+                                            </div>
+                                            <div>
+                                                <input type="password" class="form-input" placeholder="Value" value="postgresql://...">
+                                            </div>
+                                            <button type="button" style="background: none; border: none; cursor: pointer; padding: 0.5rem; color: #000000; margin-top: 0.125rem;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">Save Secrets</button>
+                            </form>
+                        </div>
+                    </div>
+
+                    <div class="card" style="margin-top: 1.5rem;">
+                        <div class="card-header">
+                            <h3 class="card-title">Resource Limits</h3>
+                            <p class="card-description">Configure resource limits for sessions and workspaces</p>
+                        </div>
+                        <div class="card-content">
+                            <form>
+                                <div class="form-group">
+                                    <label class="form-label">Max Concurrent Sessions</label>
+                                    <input type="number" class="form-input" value="5" min="1" max="20">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Max RFE Workspaces</label>
+                                    <input type="number" class="form-input" value="10" min="1" max="50">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Storage Limit (GB)</label>
+                                    <input type="number" class="form-input" value="50" min="1" max="500">
+                                </div>
+                                <button type="submit" class="btn btn-primary">Update Limits</button>
+                            </form>
+                        </div>
+                    </div>
+
+                    <div class="card" style="margin-top: 1.5rem;">
+                        <div class="card-header">
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <div>
+                                    <h3 class="card-title">API Keys</h3>
+                                    <p class="card-description">API keys provide secure access to external services and integrations</p>
+                                </div>
+                                <div style="display: flex; gap: 0.5rem;">
+                                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                                            <path d="M21 3v5h-5"/>
+                                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                                            <path d="M3 21v-5h5"/>
+                                        </svg>
+                                        Refresh
+                                    </button>
+                                    <button class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 5v14"/>
+                                            <path d="M5 12h14"/>
+                                        </svg>
+                                        Create Key
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-content">
+                            <table class="table">
+                                <thead>
+                                    <tr>
+                                        <th>Name</th>
+                                        <th>Created</th>
+                                        <th>Last Used</th>
+                                        <th>Role</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            <div style="font-weight: 500;">Production API Key</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">For production deployments and CI/CD</div>
+                                        </td>
+                                        <td>1 week ago</td>
+                                        <td>2 hours ago</td>
+                                        <td><span class="badge badge-success">Admin</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div style="font-weight: 500;">Development Key</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">For local development and testing</div>
+                                        </td>
+                                        <td>2 weeks ago</td>
+                                        <td>1 day ago</td>
+                                        <td><span class="badge badge-success">Admin</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <div style="font-weight: 500;">Monitoring Key</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Read-only access for monitoring tools</div>
+                                        </td>
+                                        <td>3 days ago</td>
+                                        <td>Never</td>
+                                        <td><span class="badge badge-success">Admin</span></td>
+                                        <td>
+                                            <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M3 6h18"/>
+                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                    <line x1="10" y1="11" x2="10" y2="17"/>
+                                                    <line x1="14" y1="11" x2="14" y2="17"/>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Session Configuration Modal -->
+    <div id="sessionConfigModal" class="modal" style="display: none;">
+        <div class="modal-content" style="max-width: 600px;">
+            <div class="modal-header">
+                <h2 id="sessionConfigTitle">Configure Session</h2>
+                <button onclick="closeSessionConfigModal()" class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <form onsubmit="event.preventDefault(); confirmCreateSession(); return false;">
+                    <div class="form-group">
+                        <label class="form-label" for="session-model">Model</label>
+                        <select id="session-model" class="form-input">
+                            <option value="claude-sonnet-3.7" selected>Claude Sonnet 3.7</option>
+                            <option value="claude-opus-4.1">Claude Opus 4.1</option>
+                            <option value="claude-opus-4">Claude Opus 4</option>
+                            <option value="claude-sonnet-4">Claude Sonnet 4</option>
+                            <option value="claude-haiku-3.5">Claude Haiku 3.5</option>
+                        </select>
+                    </div>
+
+                    <!-- Agentic Prompt (Headless only) -->
+                    <div id="agentic-prompt-section" class="form-group" style="display: none;">
+                        <label class="form-label" for="agentic-prompt">Agentic Prompt</label>
+                        <textarea id="agentic-prompt" class="form-input form-textarea" placeholder="Describe the task you want the AI to perform autonomously..." style="min-height: 120px;"></textarea>
+                        <small style="color: #64748b; font-size: 0.875rem;">Provide detailed instructions for the AI to execute without user interaction</small>
+                    </div>
+
+                    <!-- Advanced Settings Accordion -->
+                    <div style="margin-top: 1.5rem;">
+                        <button type="button" onclick="toggleAdvancedSettings()" style="width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.375rem; cursor: pointer; font-weight: 500;">
+                            <span>Change Default Model Settings</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="advanced-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="advanced-settings" style="display: none; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 0.375rem 0.375rem; padding: 1rem; background: white;">
+                            <div class="grid grid-2">
+                                <div class="form-group">
+                                    <label class="form-label" for="session-temperature">Temperature</label>
+                                    <input type="number" id="session-temperature" class="form-input" value="0.7" min="0" max="2" step="0.1">
+                                    <small style="color: #64748b; font-size: 0.875rem;">Controls randomness (0.0 - 2.0)</small>
+                                </div>
+
+                                <div class="form-group">
+                                    <label class="form-label" for="session-timeout">Timeout (seconds)</label>
+                                    <input type="number" id="session-timeout" class="form-input" value="300" min="60" max="1800">
+                                    <small style="color: #64748b; font-size: 0.875rem;">Session timeout (60-1800 seconds)</small>
+                                </div>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="session-max-tokens">Max Output Tokens</label>
+                                <input type="number" id="session-max-tokens" class="form-input" value="4000" min="100" max="8000">
+                                <small style="color: #64748b; font-size: 0.875rem;">Maximum response length (100-8000)</small>
+                            </div>
+
+                            <!-- Bring Your Own Key Section -->
+                            <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0;">
+                                <div class="form-group">
+                                    <label class="form-label" for="anthropic-key">Bring Your Own Key</label>
+                                    <input type="password" id="anthropic-key" class="form-input" placeholder="sk-ant-api03-...">
+                                    <small style="color: #64748b; font-size: 0.875rem;">Optional: Use your own Anthropic API key for this session</small>
+                                </div>
+                                <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
+                                    <input type="checkbox" id="save-key" style="margin: 0;">
+                                    <label for="save-key" style="font-size: 0.875rem; color: #64748b; margin: 0;">Save key for future sessions (encrypted)</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; gap: 1rem; margin-top: 2rem; justify-content: flex-end;">
+                        <button type="button" onclick="closeSessionConfigModal()" class="btn btn-secondary">Cancel</button>
+                        <button type="submit" class="btn btn-primary">Create Session</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function showSessions() {
+            // Show sessions, hide others
+            document.getElementById('sessions-content').style.display = 'block';
+            document.getElementById('workflows-content').style.display = 'none';
+            document.getElementById('project-info-content').style.display = 'none';
+            document.getElementById('permissions-content').style.display = 'none';
+            document.getElementById('settings-content').style.display = 'none';
+            
+            // Update navigation active states
+            document.getElementById('sessions-nav').classList.add('active');
+            document.getElementById('workflows-nav').classList.remove('active');
+            document.getElementById('project-info-nav').classList.remove('active');
+            document.getElementById('permissions-nav').classList.remove('active');
+            document.getElementById('settings-nav').classList.remove('active');
+        }
+
+        function showWorkflows() {
+            // Show workflows, hide others
+            document.getElementById('sessions-content').style.display = 'none';
+            document.getElementById('workflows-content').style.display = 'block';
+            document.getElementById('project-info-content').style.display = 'none';
+            document.getElementById('permissions-content').style.display = 'none';
+            document.getElementById('settings-content').style.display = 'none';
+            
+            // Update navigation active states
+            document.getElementById('sessions-nav').classList.remove('active');
+            document.getElementById('workflows-nav').classList.add('active');
+            document.getElementById('project-info-nav').classList.remove('active');
+            document.getElementById('permissions-nav').classList.remove('active');
+            document.getElementById('settings-nav').classList.remove('active');
+        }
+
+        function showProjectInfo() {
+            // Show project info, hide others
+            document.getElementById('sessions-content').style.display = 'none';
+            document.getElementById('workflows-content').style.display = 'none';
+            document.getElementById('project-info-content').style.display = 'block';
+            document.getElementById('permissions-content').style.display = 'none';
+            document.getElementById('settings-content').style.display = 'none';
+            
+            // Update navigation active states
+            document.getElementById('sessions-nav').classList.remove('active');
+            document.getElementById('workflows-nav').classList.remove('active');
+            document.getElementById('project-info-nav').classList.add('active');
+            document.getElementById('permissions-nav').classList.remove('active');
+            document.getElementById('settings-nav').classList.remove('active');
+        }
+
+        function showPermissions() {
+            // Show permissions, hide others
+            document.getElementById('sessions-content').style.display = 'none';
+            document.getElementById('workflows-content').style.display = 'none';
+            document.getElementById('project-info-content').style.display = 'none';
+            document.getElementById('permissions-content').style.display = 'block';
+            document.getElementById('settings-content').style.display = 'none';
+
+            // Update navigation active states
+            document.getElementById('sessions-nav').classList.remove('active');
+            document.getElementById('workflows-nav').classList.remove('active');
+            document.getElementById('project-info-nav').classList.remove('active');
+            document.getElementById('permissions-nav').classList.add('active');
+            document.getElementById('settings-nav').classList.remove('active');
+        }
+
+        function showSettings() {
+            // Show settings, hide others
+            document.getElementById('sessions-content').style.display = 'none';
+            document.getElementById('workflows-content').style.display = 'none';
+            document.getElementById('project-info-content').style.display = 'none';
+            document.getElementById('permissions-content').style.display = 'none';
+            document.getElementById('settings-content').style.display = 'block';
+            
+            // Update navigation active states
+            document.getElementById('sessions-nav').classList.remove('active');
+            document.getElementById('workflows-nav').classList.remove('active');
+            document.getElementById('project-info-nav').classList.remove('active');
+            document.getElementById('permissions-nav').classList.remove('active');
+            document.getElementById('settings-nav').classList.add('active');
+        }
+
+        // RFE workflow session dropdown functionality
+        function toggleRFESessionDropdown() {
+            const dropdown = document.getElementById('rfeSessionDropdownMenu');
+            const arrow = document.getElementById('rfe-session-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        // Spec Kit workflow session dropdown functionality
+        function toggleSpecKitSessionDropdown() {
+            const dropdown = document.getElementById('speckitSessionDropdownMenu');
+            const arrow = document.getElementById('speckit-session-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        // Counter for session numbering
+        let sessionCounter = 1;
+
+        // Store session type for modal
+        let pendingSessionType = null;
+
+        function createSession(sessionType) {
+            // Store session type and show configuration modal
+            pendingSessionType = sessionType;
+            openSessionConfigModal();
+        }
+
+        function openSessionConfigModal() {
+            document.getElementById('sessionConfigModal').style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+
+            // Update modal title
+            const modalTitle = document.getElementById('sessionConfigTitle');
+            if (modalTitle) {
+                modalTitle.textContent = 'Create Session';
+            }
+
+            // Show/hide agentic prompt section based on session type
+            const agenticPromptSection = document.getElementById('agentic-prompt-section');
+            if (agenticPromptSection) {
+                if (pendingSessionType === 'headless') {
+                    agenticPromptSection.style.display = 'block';
+                } else {
+                    agenticPromptSection.style.display = 'none';
+                }
+            }
+        }
+
+        function closeSessionConfigModal() {
+            document.getElementById('sessionConfigModal').style.display = 'none';
+            document.body.style.overflow = 'auto';
+            pendingSessionType = null;
+            
+            // Reset advanced settings to closed
+            document.getElementById('advanced-settings').style.display = 'none';
+            document.getElementById('advanced-arrow').style.transform = 'rotate(0deg)';
+        }
+
+        function toggleAdvancedSettings() {
+            const advancedSettings = document.getElementById('advanced-settings');
+            const arrow = document.getElementById('advanced-arrow');
+            const isOpen = advancedSettings.style.display === 'block';
+            
+            if (isOpen) {
+                advancedSettings.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                advancedSettings.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function confirmCreateSession() {
+            try {
+                if (!pendingSessionType) {
+                    console.log('No pending session type');
+                    closeSessionConfigModal();
+                    return;
+                }
+
+                // Get configuration values
+                const model = document.getElementById('session-model').value;
+                const temperature = document.getElementById('session-temperature').value;
+                const maxTokens = document.getElementById('session-max-tokens').value;
+                const timeout = document.getElementById('session-timeout').value;
+
+                // Generate session name
+                const sessionName = `session-${sessionCounter}`;
+                sessionCounter++;
+
+                // Get the sessions table body
+                const tbody = document.querySelector('#sessions-content .table tbody');
+
+                if (!tbody) {
+                    console.error('Sessions table body not found');
+                    closeSessionConfigModal();
+                    return;
+                }
+
+                // Create new row
+                const newRow = document.createElement('tr');
+                const sessionUrl = pendingSessionType === 'interactive' ? `${sessionName}/page.html` : `${sessionName}/headless.html`;
+
+                newRow.onclick = function() {
+                    window.location.href = sessionUrl;
+                };
+                newRow.style.cursor = 'pointer';
+
+                newRow.innerHTML = `
+                    <td>
+                        <div>
+                            <div style="color: #1e40af; font-weight: 500;">${sessionName}</div>
+                            <div style="font-size: 0.875rem; color: #64748b;">${pendingSessionType.charAt(0).toUpperCase() + pendingSessionType.slice(1)} session</div>
+                        </div>
+                    </td>
+                    <td><span class="badge" style="background: #f1f5f9; color: #64748b; white-space: nowrap;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>Created</span></td>
+                    <td>${pendingSessionType}</td>
+                    <td>${model}</td>
+                    <td>Just now</td>
+                `;
+
+                // Insert at the top of the table
+                tbody.insertBefore(newRow, tbody.firstChild);
+
+                // Make sure we're showing the sessions view
+                showSessions();
+            } catch (error) {
+                console.error('Error creating session:', error);
+            } finally {
+                // Always close modal
+                closeSessionConfigModal();
+            }
+        }
+
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', function(event) {
+            // Handle user dropdown
+            const userDropdown = document.querySelector('.user-dropdown');
+            if (userDropdown && !userDropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+
+            // Handle RFE workflow dropdown
+            const rfeDropdownButton = document.querySelector('[onclick="toggleRFESessionDropdown()"]');
+            const rfeDropdownMenu = document.getElementById('rfeSessionDropdownMenu');
+            if (rfeDropdownButton && rfeDropdownMenu && !rfeDropdownButton.parentElement.contains(event.target)) {
+                rfeDropdownMenu.style.display = 'none';
+                document.getElementById('rfe-session-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+
+            // Handle Spec Kit workflow dropdown
+            const speckitDropdownButton = document.querySelector('[onclick="toggleSpecKitSessionDropdown()"]');
+            const speckitDropdownMenu = document.getElementById('speckitSessionDropdownMenu');
+            if (speckitDropdownButton && speckitDropdownMenu && !speckitDropdownButton.parentElement.contains(event.target)) {
+                speckitDropdownMenu.style.display = 'none';
+                document.getElementById('speckit-session-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/permissions/page.html b/components/frontend/static-prototype/projects/sample-workspace/permissions/page.html
new file mode 100644
index 000000000..b6c91c929
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/permissions/page.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Permissions - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>Permissions</span>
+            </div>
+            <div class="page-header-content">
+                <div class="page-header-left">
+                    <h1 class="page-title">Permissions</h1>
+                    <p class="page-description">Manage user and team access to this project</p>
+                </div>
+                <div class="page-actions">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 5v14"/>
+                            <path d="M5 12h14"/>
+                        </svg>
+                        Grant Permission
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <ul>
+                    <li><a href="../page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9,22 9,12 15,12 15,22"/>
+                        </svg>
+                        Overview
+                    </a></li>
+                    <li><a href="../info/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 16v-4"/>
+                            <path d="M12 8h.01"/>
+                        </svg>
+                        Project Information
+                    </a></li>
+                    <li><a href="../rfe/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 3v12"/>
+                            <circle cx="18" cy="6" r="3"/>
+                            <circle cx="6" cy="15" r="3"/>
+                            <path d="M18 9a9 9 0 0 1-9 9"/>
+                        </svg>
+                        Workflows
+                    </a></li>
+                    <li><a href="../sessions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="../keys/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                        </svg>
+                        API Keys
+                    </a></li>
+                    <li><a href="page.html" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="../settings/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+                <div class="card">
+                    <div class="card-header">
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <div>
+                                <h3 class="card-title">Sharing</h3>
+                                <p class="card-description">Users and groups with access to this project and their roles</p>
+                            </div>
+                            <div style="display: flex; gap: 0.5rem;">
+                                <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                                        <path d="M21 3v5h-5"/>
+                                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                                        <path d="M3 21v-5h5"/>
+                                    </svg>
+                                    Refresh
+                                </button>
+                                <button class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M12 5v14"/>
+                                        <path d="M5 12h14"/>
+                                    </svg>
+                                    Grant Permission
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Users/Groups</th>
+                                    <th>Type</th>
+                                    <th>Role</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">john.doe@company.com</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Project Owner</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-info">User</span></td>
+                                    <td><span class="badge badge-success">Admin</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">development-team</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">5 members</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-warning">Group</span></td>
+                                    <td><span class="badge badge-success">View</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">sarah.admin@company.com</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Senior Developer</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-info">User</span></td>
+                                    <td><span class="badge badge-success">Admin</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">qa-team</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">3 members</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-warning">Group</span></td>
+                                    <td><span class="badge badge-success">View</span></td>
+                                    <td>
+                                        <button style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: #000000;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/rfe/page.html b/components/frontend/static-prototype/projects/sample-workspace/rfe/page.html
new file mode 100644
index 000000000..81987f1d4
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/rfe/page.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RFE Workspaces - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>RFE Workspaces</span>
+            </div>
+            <div class="page-header-content">
+                <div class="page-header-left">
+                    <h1 class="page-title">RFE Workspaces</h1>
+                    <p class="page-description">Manage your Request for Enhancement workspaces</p>
+                </div>
+                <div class="page-actions">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 5v14"/>
+                            <path d="M5 12h14"/>
+                        </svg>
+                        New RFE Workspace
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <ul>
+                    <li><a href="../sessions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="../page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9,22 9,12 15,12 15,22"/>
+                        </svg>
+                        Overview
+                    </a></li>
+                    <li><a href="../info/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 16v-4"/>
+                            <path d="M12 8h.01"/>
+                        </svg>
+                        Project Information
+                    </a></li>
+                    <li><a href="page.html" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 3v12"/>
+                            <circle cx="18" cy="6" r="3"/>
+                            <circle cx="6" cy="15" r="3"/>
+                            <path d="M18 9a9 9 0 0 1-9 9"/>
+                        </svg>
+                        Workflows
+                    </a></li>
+                    <li><a href="../keys/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                        </svg>
+                        API Keys
+                    </a></li>
+                    <li><a href="../permissions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="../settings/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+                <div class="grid grid-3">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">User Authentication System</h3>
+                            <span class="badge badge-info">Planning</span>
+                        </div>
+                        <div class="card-content">
+                            <p style="color: #64748b; margin-bottom: 1rem;">Implement secure user authentication with JWT tokens and role-based access control.</p>
+                            <div style="margin-bottom: 0.5rem;">
+                                <strong>Repository:</strong> github.com/company/auth-service
+                            </div>
+                            <div style="margin-bottom: 0.5rem;">
+                                <strong>Branch:</strong> feature/user-auth
+                            </div>
+                            <div style="margin-bottom: 1rem;">
+                                <strong>Created:</strong> 2 hours ago
+                            </div>
+                            <div style="display: flex; gap: 0.5rem;">
+                                <button class="btn btn-primary" style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">View Details</button>
+                                <button class="btn btn-secondary" style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">Edit</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">API Gateway</h3>
+                            <span class="badge badge-warning">In Progress</span>
+                        </div>
+                        <div class="card-content">
+                            <p style="color: #64748b; margin-bottom: 1rem;">Central API gateway for microservices with rate limiting and request routing.</p>
+                            <div style="margin-bottom: 0.5rem;">
+                                <strong>Repository:</strong> github.com/company/api-gateway
+                            </div>
+                            <div style="margin-bottom: 0.5rem;">
+                                <strong>Branch:</strong> feature/gateway-v2
+                            </div>
+                            <div style="margin-bottom: 1rem;">
+                                <strong>Created:</strong> 1 day ago
+                            </div>
+                            <div style="display: flex; gap: 0.5rem;">
+                                <button class="btn btn-primary" style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">View Details</button>
+                                <button class="btn btn-secondary" style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">Edit</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Database Migration Tool</h3>
+                            <span class="badge badge-success">Completed</span>
+                        </div>
+                        <div class="card-content">
+                            <p style="color: #64748b; margin-bottom: 1rem;">Automated database migration and versioning system for production deployments.</p>
+                            <div style="margin-bottom: 0.5rem;">
+                                <strong>Repository:</strong> github.com/company/db-migrator
+                            </div>
+                            <div style="margin-bottom: 0.5rem;">
+                                <strong>Branch:</strong> main
+                            </div>
+                            <div style="margin-bottom: 1rem;">
+                                <strong>Created:</strong> 3 days ago
+                            </div>
+                            <div style="display: flex; gap: 0.5rem;">
+                                <button class="btn btn-primary" style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">View Details</button>
+                                <button class="btn btn-secondary" style="font-size: 0.875rem; padding: 0.375rem 0.75rem;">Edit</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/session-1/headless.html b/components/frontend/static-prototype/projects/sample-workspace/session-1/headless.html
new file mode 100644
index 000000000..9edf4e635
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/session-1/headless.html
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>session-1 (Headless) - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+    <style>
+        .session-container {
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+        
+        .session-header {
+            background: #f8fafc;
+            padding: 1rem;
+            border-bottom: 1px solid #e2e8f0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .session-info {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        
+        .session-status {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .log-container {
+            height: 60vh;
+            overflow-y: auto;
+            background: #1a1a1a;
+            color: #e5e5e5;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.4;
+        }
+        
+        .log-line {
+            padding: 0.25rem 1rem;
+            border-bottom: 1px solid #333;
+            white-space: pre-wrap;
+        }
+        
+        .log-timestamp {
+            color: #64748b;
+            margin-right: 0.5rem;
+        }
+        
+        .log-level-info {
+            color: #3b82f6;
+        }
+        
+        .log-level-success {
+            color: #10b981;
+        }
+        
+        .log-level-warning {
+            color: #f59e0b;
+        }
+        
+        .progress-bar {
+            background: #e2e8f0;
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 1rem;
+        }
+        
+        .progress-fill {
+            background: #1e40af;
+            height: 100%;
+            width: 65%;
+            border-radius: 4px;
+            transition: width 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>session-1 (Headless)</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <h1 class="page-title">Headless Session: session-1</h1>
+                    <span class="badge badge-info" style="white-space: nowrap;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; margin-right: 0.25rem;">
+                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                        </svg>
+                        Running
+                    </span>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                        </svg>
+                        Clone
+                    </button>
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; color: #dc2626; border-color: #dc2626;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                            <line x1="9" y1="9" x2="15" y2="15"/>
+                            <line x1="15" y1="9" x2="9" y2="15"/>
+                        </svg>
+                        Stop
+                    </button>
+                </div>
+            </div>
+            <p class="page-description">Automated AI execution with real-time logs • claude-3.5-sonnet • Started just now</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Session Configuration</h3>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Task:</strong> Create user authentication system
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Model:</strong> claude-3.5-sonnet
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Mode:</strong> Headless
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Timeout:</strong> 30 minutes
+                    </div>
+                    <div>
+                        <strong>Status:</strong> 
+                        <span class="badge badge-info" style="white-space: nowrap;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; margin-right: 0.25rem;">
+                                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                            </svg>
+                            Running
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Progress</h3>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 1rem;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                            <span>Overall Progress</span>
+                            <span style="font-weight: 500;">65%</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
+                        </div>
+                    </div>
+                    <div style="font-size: 0.875rem; color: #64748b;">
+                        <div style="margin-bottom: 0.25rem;">✓ Repository cloned</div>
+                        <div style="margin-bottom: 0.25rem;">✓ Dependencies installed</div>
+                        <div style="margin-bottom: 0.25rem;">⏳ Creating authentication models</div>
+                        <div style="margin-bottom: 0.25rem;">⏸️ Writing tests</div>
+                        <div>⏸️ Documentation update</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card" style="margin-top: 1.5rem;">
+            <div class="card-header">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h3 class="card-title">Execution Log</h3>
+                    <button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                </div>
+            </div>
+            <div class="card-content" style="padding: 0;">
+                <div class="log-container">
+                    <div class="log-line">
+                        <span class="log-timestamp">13:45:23</span>
+                        <span class="log-level-info">[INFO]</span> Session started with task: Create user authentication system
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:45:24</span>
+                        <span class="log-level-info">[INFO]</span> Cloning repository from https://github.com/company/auth-service.git
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:45:28</span>
+                        <span class="log-level-success">[SUCCESS]</span> Repository cloned successfully
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:45:29</span>
+                        <span class="log-level-info">[INFO]</span> Installing dependencies...
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:46:15</span>
+                        <span class="log-level-success">[SUCCESS]</span> Dependencies installed successfully
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:46:16</span>
+                        <span class="log-level-info">[INFO]</span> Analyzing existing codebase structure
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:46:22</span>
+                        <span class="log-level-info">[INFO]</span> Creating User model with authentication fields
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:46:35</span>
+                        <span class="log-level-warning">[WORKING]</span> Implementing password hashing and validation...
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:46:42</span>
+                        <span class="log-level-info">[INFO]</span> Adding JWT token generation methods
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">13:47:01</span>
+                        <span class="log-level-info">[INFO]</span> Creating authentication middleware
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card" style="margin-top: 1.5rem;">
+            <div class="card-header">
+                <h3 class="card-title">Session Actions</h3>
+            </div>
+            <div class="card-content">
+                <div style="display: flex; gap: 1rem;">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="6" y="4" width="4" height="16"/>
+                            <rect x="14" y="4" width="4" height="16"/>
+                        </svg>
+                        Pause Session
+                    </button>
+                    <button class="btn btn-secondary" style="color: #dc2626; border-color: #dc2626;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                            <line x1="9" y1="9" x2="15" y2="15"/>
+                            <line x1="15" y1="9" x2="9" y2="15"/>
+                        </svg>
+                        Stop Session
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7,10 12,15 17,10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Download Logs
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+
+        // Simulate log updates (in real app, this would be WebSocket updates)
+        setInterval(function() {
+            const logContainer = document.querySelector('.log-container');
+            const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
+            const messages = [
+                '[INFO] Processing authentication logic...',
+                '[INFO] Updating database schema...',
+                '[SUCCESS] Model validation completed',
+                '[INFO] Running security checks...'
+            ];
+            const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+            const logLevel = randomMessage.includes('[SUCCESS]') ? 'log-level-success' : 
+                           randomMessage.includes('[WARNING]') ? 'log-level-warning' : 'log-level-info';
+            
+            const newLogLine = document.createElement('div');
+            newLogLine.className = 'log-line';
+            newLogLine.innerHTML = `<span class="log-timestamp">${timestamp}</span><span class="${logLevel}">${randomMessage}</span>`;
+            
+            logContainer.appendChild(newLogLine);
+            logContainer.scrollTop = logContainer.scrollHeight;
+        }, 3000);
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/session-1/page.html b/components/frontend/static-prototype/projects/sample-workspace/session-1/page.html
new file mode 100644
index 000000000..53100742f
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/session-1/page.html
@@ -0,0 +1,2692 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>session-1 - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+    <style>
+        .chat-container {
+            height: 70vh;
+            display: flex;
+            flex-direction: column;
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+        }
+        
+        .chat-messages {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        
+        .message {
+            margin-bottom: 1rem;
+            display: flex;
+            gap: 0.75rem;
+        }
+        
+        .message-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 500;
+            font-size: 0.875rem;
+            flex-shrink: 0;
+        }
+        
+        .user-avatar {
+            background: #64748b;
+            color: white;
+        }
+        
+        .ai-avatar {
+            background: #1e40af;
+            color: white;
+        }
+        
+        .message-content {
+            flex: 1;
+            background: #f8fafc;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+        }
+        
+        .message-header {
+            font-weight: 500;
+            margin-bottom: 0.25rem;
+            font-size: 0.875rem;
+        }
+        
+        .chat-input {
+            padding: 1rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+        
+        .chat-input input {
+            flex: 1;
+            padding: 0.5rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+        }
+        
+        .session-status {
+            background: #f0f9ff;
+            border: 1px solid #0ea5e9;
+            border-radius: 0.375rem;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>session-1</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <h1 class="page-title">Interactive Session: session-1</h1>
+                    <span class="badge badge-info" style="white-space: nowrap;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; margin-right: 0.25rem;">
+                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                        </svg>
+                        Running
+                    </span>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                        </svg>
+                        Clone
+                    </button>
+                    <button onclick="stopSession()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem; color: #dc2626; border-color: #dc2626;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                            <line x1="9" y1="9" x2="15" y2="15"/>
+                            <line x1="15" y1="9" x2="9" y2="15"/>
+                        </svg>
+                        Stop
+                    </button>
+                </div>
+            </div>
+            <p class="page-description">Real-time AI coding session • claude-3.5-sonnet • Started just now</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+        <div style="display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; height: 75vh;">
+            <!-- Left Column: Accordions -->
+            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <!-- Workflow Accordion -->
+                <div class="accordion-item">
+                    <button onclick="toggleAccordion('workflow')" class="accordion-header">
+                        <span>Workflows</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="workflow-arrow" style="transform: rotate(180deg);">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="workflow-content" class="accordion-content" style="display: block;">
+                        <div style="padding: 1rem;">
+                            <div class="form-group">
+                                <label class="form-label" style="font-size: 0.875rem;">Select a Workflow</label>
+                                <select id="workflow-type" class="form-input" style="font-size: 0.875rem;" onchange="updateWorkflowPhases()">
+                                    <option value="default" selected>None selected</option>
+                                    <option value="create-rfe">Plan a feature</option>
+                                    <option value="create-feature">Develop Feature</option>
+                                </select>
+                            </div>
+
+                            <!-- Help text when None is selected -->
+                            <div id="workflow-help-text" style="margin-top: 1rem; font-size: 0.875rem; color: #64748b;">
+                                <div>Workflows provide a structured processes for Ambient Code Platform agents to follow and achieve complex goals.</div>
+                            </div>
+
+                            <!-- RFE Phases (shown when Create RFE is selected) -->
+                            <div id="rfe-phases" style="display: none; margin-top: 1rem;">
+                                <!-- Repository requirement message -->
+                                <div id="rfe-repo-requirement" style="padding: 1rem; text-align: center;">
+                                    <div style="color: #64748b; font-size: 0.875rem;">
+                                        A spec repository is required to store artifacts for this workflow.
+                                    </div>
+                                </div>
+
+                                <div style="font-size: 0.875rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; overflow: hidden;">
+                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: white;">
+                                        <span style="font-size: 1.25rem;">💡</span>
+                                        <div style="flex: 1;">
+                                            <div class="workflow-step-name" style="font-weight: 500; color: #9ca3af;">Ideate</div>
+                                            <div class="workflow-step-filename" style="font-size: 0.75rem; color: #cbd5e1;">Create or update rfe.md file</div>
+                                        </div>
+                                        <button class="btn btn-secondary workflow-step-button" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; opacity: 0.5; cursor: not-allowed;" disabled title="Run the /ideate command" onclick="runIdeateCommand()">/ideate</button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Spec Kit Phases (shown when Create Feature is selected) -->
+                            <div id="spec-kit-phases" style="display: none; margin-top: 1rem;">
+                                <!-- Repository requirement message -->
+                                <div id="spec-kit-repo-requirement" style="padding: 1rem; text-align: center;">
+                                    <div style="color: #64748b; font-size: 0.875rem;">
+                                        A spec repository is required to store artifacts for this workflow.
+                                    </div>
+                                </div>
+
+                                <div style="font-size: 0.875rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; overflow: hidden;">
+                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid #e2e8f0; background: white;">
+                                        <span style="font-size: 1.25rem;">💡</span>
+                                        <div style="flex: 1;">
+                                            <div class="workflow-step-name" style="font-weight: 500; color: #9ca3af;">Ideate</div>
+                                            <div class="workflow-step-filename" style="font-size: 0.75rem; color: #cbd5e1;">Create or update rfe.md file</div>
+                                        </div>
+                                        <button class="btn btn-secondary workflow-step-button" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; opacity: 0.5; cursor: not-allowed;" disabled title="Run the /ideate command" onclick="runIdeateCommand()">/ideate</button>
+                                    </div>
+
+                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid #e2e8f0; background: white;">
+                                        <span style="font-size: 1.25rem;">📝</span>
+                                        <div style="flex: 1;">
+                                            <div class="workflow-step-name" style="font-weight: 500; color: #9ca3af;">Specify</div>
+                                            <div class="workflow-step-filename" style="font-size: 0.75rem; color: #cbd5e1;">Create or update spec.md file</div>
+                                        </div>
+                                        <button class="btn btn-secondary workflow-step-button" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; opacity: 0.5; cursor: not-allowed;" disabled title="Run the /specify command" onclick="runSpecifyCommand()">/specify</button>
+                                    </div>
+
+                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid #e2e8f0; background: white;">
+                                        <span style="font-size: 1.25rem;">📋</span>
+                                        <div style="flex: 1;">
+                                            <div class="workflow-step-name" style="font-weight: 500; color: #9ca3af;">Plan</div>
+                                            <div class="workflow-step-filename" style="font-size: 0.75rem; color: #cbd5e1;">plan.md</div>
+                                        </div>
+                                        <button class="btn btn-secondary workflow-step-button" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; opacity: 0.5; cursor: not-allowed;" disabled title="Run the /plan command">/plan</button>
+                                    </div>
+
+                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid #e2e8f0; background: white;">
+                                        <span style="font-size: 1.25rem;">✅</span>
+                                        <div style="flex: 1;">
+                                            <div class="workflow-step-name" style="font-weight: 500; color: #9ca3af;">Tasks</div>
+                                            <div class="workflow-step-filename" style="font-size: 0.75rem; color: #cbd5e1;">tasks.md</div>
+                                        </div>
+                                        <button class="btn btn-secondary workflow-step-button" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; opacity: 0.5; cursor: not-allowed;" disabled title="Run the /tasks command">/tasks</button>
+                                    </div>
+
+                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: white;">
+                                        <span style="font-size: 1.25rem;">🏗️</span>
+                                        <div style="flex: 1;">
+                                            <div class="workflow-step-name" style="font-weight: 500; color: #9ca3af;">Implement</div>
+                                            <div class="workflow-step-filename" style="font-size: 0.75rem; color: #cbd5e1;">implement</div>
+                                        </div>
+                                        <button class="btn btn-secondary workflow-step-button" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; opacity: 0.5; cursor: not-allowed;" disabled title="Run the /implement command">/implement</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Spec Repository Accordion -->
+                <div class="accordion-item">
+                    <button onclick="toggleAccordion('spec-repository')" class="accordion-header">
+                        <span>Spec Repository</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="spec-repository-arrow">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="spec-repository-content" class="accordion-content" style="display: none;">
+                        <div style="padding: 1rem; text-align: center;">
+                            <div style="color: #64748b; font-size: 0.875rem; margin-bottom: 1rem;">
+                                A spec repository is required to store agent config and workflow artifacts.
+                            </div>
+                            <button onclick="openGitCredentialsModal()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                                    <path d="M12 5v14"/>
+                                    <path d="M5 12h14"/>
+                                </svg>
+                                Add Spec Repository
+                            </button>
+                        </div>
+
+                        <!-- Hidden content (will show after Git configuration) -->
+                        <div id="repository-details" style="display: none; padding: 1rem;">
+                            <!-- Spec Repo URL and Base Branch -->
+                            <div style="margin-bottom: 1.5rem;">
+                                <div class="form-group" style="margin-bottom: 1rem;">
+                                    <label class="form-label" style="font-size: 0.875rem;">Spec Repo URL</label>
+                                    <div style="color: #64748b; font-size: 0.75rem; margin-bottom: 0.5rem;">The spec repository is where workflow artifacts are stored.</div>
+                                    <input type="text" class="form-input" placeholder="https://github.com/org/repo.git" style="font-size: 0.875rem;">
+                                </div>
+
+                                <div style="display: grid; grid-template-columns: 1fr auto; gap: 1rem;">
+                                    <div style="flex: 1;">
+                                        <div class="form-group" style="margin-bottom: 0;">
+                                            <label class="form-label" style="font-size: 0.875rem;">Spec repo base branch</label>
+                                            <input type="text" class="form-input" value="main" style="font-size: 0.875rem;">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Action Buttons -->
+                            <div style="display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.5rem;">
+                                <button onclick="cancelRepositoryConfig()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Cancel</button>
+                                <button onclick="saveRepositoryConfig()" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Save</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Agents Accordion -->
+                <div class="accordion-item" id="agents-accordion">
+                    <button onclick="toggleAccordion('agents')" class="accordion-header" id="agents-accordion-button">
+                        <span style="display: flex; align-items: center; gap: 0.5rem;">
+                            <span>Agents</span>
+                            <span id="agents-count-badge" class="badge" style="background: #10b981; color: white; display: none;">0</span>
+                        </span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="agents-arrow">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="agents-content" class="accordion-content" style="display: none;">
+                        <!-- Message shown when no repository is seeded -->
+                        <div id="agents-repo-requirement" style="padding: 1rem; text-align: center;">
+                            <div style="color: #64748b; font-size: 0.875rem;">
+                                A spec repository is required to store agent config.
+                            </div>
+                        </div>
+
+                        <!-- Agent list (hidden until repository is seeded) -->
+                        <div id="agents-list" style="display: none; padding: 1rem; font-size: 0.875rem;">
+                            <!-- Dynamic selection option -->
+                            <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 0.375rem;">
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem;">
+                                    <input type="checkbox" id="dynamic-agent-selection" style="cursor: pointer;">
+                                    <span style="color: #374151;"><strong>Let ACP dynamically select agents</strong></span>
+                                </label>
+                            </div>
+
+                            <hr style="border: none; border-top: 1px solid #e2e8f0; margin: 0.75rem 0;">
+
+                            <div style="margin-bottom: 0.75rem; color: #64748b; font-size: 0.75rem;">
+                                Select specific agents to include in this session
+                            </div>
+
+                            <div style="display: flex; flex-direction: column; gap: 0.25rem; max-height: 300px; overflow-y: auto; padding-right: 0.5rem;">
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Archie</strong> - Architect</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Aria</strong> - UX Architect</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Casey</strong> - Content Strategist</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Dan</strong> - Senior Director</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Diego</strong> - Program Manager</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Emma</strong> - Engineering Manager</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Felix</strong> - UX Feature Lead</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Jack</strong> - Delivery Owner</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Lee</strong> - Team Lead</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Neil</strong> - Test Engineer</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Olivia</strong> - Product Owner</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Parker</strong> - Product Manager</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Phoenix</strong> - PXE Specialist</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Ryan</strong> - UX Researcher</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Sam</strong> - Scrum Master</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Stella</strong> - Staff Engineer</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Steve</strong> - UX Designer</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Taylor</strong> - Team Member</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Terry</strong> - Technical Writer</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Tessa</strong> - Writing Manager</span>
+                                </label>
+                                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; font-size: 0.8125rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
+                                    <input type="checkbox" style="cursor: pointer;" onchange="updateAgentCountBadge()">
+                                    <span style="color: #374151;"><strong>Uma</strong> - UX Team Lead</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Associated Repositories Accordion -->
+                <div class="accordion-item">
+                    <button onclick="toggleAccordion('associated-repositories')" class="accordion-header">
+                        <span>Context</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="associated-repositories-arrow">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="associated-repositories-content" class="accordion-content" style="display: none;">
+                        <div style="padding: 1rem; text-align: center;">
+                            <div style="color: #64748b; font-size: 0.875rem; margin-bottom: 1rem;">
+                                No associated repositories configured
+                            </div>
+                            <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                                    <path d="M12 5v14"/>
+                                    <path d="M5 12h14"/>
+                                </svg>
+                                Add Repository
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Results Accordion -->
+                <div class="accordion-item">
+                    <button onclick="toggleAccordion('results')" class="accordion-header">
+                        <span>Results</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="results-arrow">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="results-content" class="accordion-content" style="display: none;">
+                        <div style="padding: 1rem; font-size: 0.875rem; color: #64748b; text-align: center;">
+                            No results yet
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Session Details Accordion -->
+                <div class="accordion-item">
+                    <button onclick="toggleAccordion('session-details')" class="accordion-header">
+                        <span>Session Details</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="session-details-arrow">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="session-details-content" class="accordion-content" style="display: none;">
+                        <div style="padding: 1rem; font-size: 0.875rem; color: #64748b;">
+                            <div style="margin-bottom: 0.5rem;"><strong>Model:</strong> claude-3.5-sonnet</div>
+                            <div style="margin-bottom: 0.5rem;"><strong>Mode:</strong> Interactive</div>
+                            <div style="margin-bottom: 0.5rem;"><strong>Started:</strong> Just now</div>
+                            <div style="margin-bottom: 0.5rem;"><strong>Duration:</strong> 342567ms</div>
+                            <div style="margin-bottom: 0.5rem;"><strong>K8s Job:</strong> agentic-session-1760582922-job</div>
+                            <div style="margin-bottom: 0.5rem;"><strong>Messages:</strong> <span id="message-count">1</span></div>
+                            <div><strong>Session prompt:</strong> <a href="#" onclick="viewSessionPrompt(); return false;" style="color: #1e40af; text-decoration: underline; cursor: pointer;">view</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column: Chat -->
+            <div class="chat-container">
+                <div class="chat-messages" id="chat-messages">
+                    <div class="message">
+                        <div class="message-avatar ai-avatar">ACP</div>
+                        <div class="message-content">
+                            <div class="message-header">ACP</div>
+                            <div id="welcome-message"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="chat-input" style="position: relative;">
+                    <!-- Command Popover -->
+                    <div id="command-popover" style="display: none; position: absolute; bottom: 100%; left: 0; background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 250px; margin-bottom: 0.5rem; overflow: hidden;">
+                        <div style="padding: 0.5rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc;">
+                            <div style="font-size: 0.75rem; font-weight: 500; color: #64748b;">COMMANDS</div>
+                        </div>
+                        <div onclick="selectCommand('help')" style="padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #e2e8f0;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
+                            <div>
+                                <div style="font-weight: 500; font-size: 0.875rem; color: #374151;">/help</div>
+                                <div style="font-size: 0.75rem; color: #64748b;">Guidance for using ACP</div>
+                            </div>
+                        </div>
+                        <div id="workflow-commands-container">
+                            <div id="no-workflow-message" style="padding: 1rem; text-align: center; color: #64748b; font-size: 0.875rem;">
+                                No workflow-specific commands available
+                            </div>
+                            <div id="command-ideate" onclick="selectCommand('ideate')" style="display: none; padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; align-items: center; gap: 0.75rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
+                                <div>
+                                    <div style="font-weight: 500; font-size: 0.875rem; color: #374151;">/ideate</div>
+                                    <div style="font-size: 0.75rem; color: #64748b;">Start ideation phase</div>
+                                </div>
+                            </div>
+                            <div id="command-specify" onclick="selectCommand('specify')" style="display: none; padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; align-items: center; gap: 0.75rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
+                                <div>
+                                    <div style="font-weight: 500; font-size: 0.875rem; color: #374151;">/specify</div>
+                                    <div style="font-size: 0.75rem; color: #64748b;">Create specifications</div>
+                                </div>
+                            </div>
+                            <div id="command-plan" onclick="selectCommand('plan')" style="display: none; padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; align-items: center; gap: 0.75rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
+                                <div>
+                                    <div style="font-weight: 500; font-size: 0.875rem; color: #374151;">/plan</div>
+                                    <div style="font-size: 0.75rem; color: #64748b;">Generate implementation plan</div>
+                                </div>
+                            </div>
+                            <div id="command-tasks" onclick="selectCommand('tasks')" style="display: none; padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; align-items: center; gap: 0.75rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
+                                <div>
+                                    <div style="font-weight: 500; font-size: 0.875rem; color: #374151;">/tasks</div>
+                                    <div style="font-size: 0.75rem; color: #64748b;">Break down into tasks</div>
+                                </div>
+                            </div>
+                            <div id="command-implement" onclick="selectCommand('implement')" style="display: none; padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; align-items: center; gap: 0.75rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
+                                <div>
+                                    <div style="font-weight: 500; font-size: 0.875rem; color: #374151;">/implement</div>
+                                    <div style="font-size: 0.75rem; color: #64748b;">Execute implementation</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Agent Popover -->
+                    <div id="agent-popover" style="display: none; position: absolute; bottom: 100%; left: 0; background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 300px; max-height: 400px; margin-bottom: 0.5rem; overflow: hidden;">
+                        <div style="padding: 0.5rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc;">
+                            <div style="font-size: 0.75rem; font-weight: 500; color: #64748b;">AGENTS</div>
+                        </div>
+                        <div id="agent-popover-content" style="overflow-y: auto; max-height: 350px;">
+                            <!-- Content will be dynamically populated -->
+                        </div>
+                    </div>
+
+                    <input type="text" id="chat-input-field" placeholder="/ for commands, # for agents" style="flex: 1;" oninput="handleChatInput(event)" onkeypress="handleKeyPress(event)">
+                    <button class="btn btn-primary" onclick="sendMessage()">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M22 2L11 13"/>
+                            <path d="M22 2l-7 20-4-9-9-4z"/>
+                        </svg>
+                        Send
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Git Credentials Modal -->
+    <div id="gitCredentialsModal" class="modal" style="display: none;">
+        <div class="modal-content" style="max-width: 600px;">
+            <div class="modal-header">
+                <div>
+                    <h2>Connect to GitHub</h2>
+                    <p style="font-size: 0.875rem; color: #64748b; margin-top: 0.25rem;">You can modify or remove these credentials anytime in project settings</p>
+                </div>
+                <button onclick="closeGitCredentialsModal()" class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
+                    <div class="form-group">
+                        <label class="form-label" for="git-user-name">Git User Name</label>
+                        <input type="text" id="git-user-name" class="form-input" placeholder="your-github-username">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="git-user-email">Git User Email</label>
+                        <input type="email" id="git-user-email" class="form-input" placeholder="your-email@example.com">
+                    </div>
+                </div>
+                
+                <div class="form-group" style="margin-bottom: 1rem;">
+                    <label class="form-label" for="github-token">GitHub API Token</label>
+                    <div style="position: relative;">
+                        <input type="password" id="github-token" class="form-input" placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" style="padding-right: 3rem;">
+                        <button type="button" onclick="togglePasswordVisibility()" style="position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                <circle cx="12" cy="12" r="3"/>
+                            </svg>
+                        </button>
+                    </div>
+                    <small style="color: #64748b; font-size: 0.875rem;">GitHub personal access token or fine-grained token for git operations and API access</small>
+                </div>
+                
+                <div style="font-size: 0.875rem; color: #64748b; margin-bottom: 1.5rem;">
+                    Git credentials will be saved with keys: GIT_USER_NAME, GIT_USER_EMAIL, GIT_TOKEN
+                </div>
+                
+                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
+                    <button type="button" onclick="closeGitCredentialsModal()" class="btn btn-secondary">Cancel</button>
+                    <button type="button" onclick="saveGitCredentials()" class="btn btn-primary">Save Configuration</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global variable to track selected workflow
+        var selectedWorkflow = null;
+
+        // Global variable to track if repository is seeded
+        var isRepositorySeeded = false;
+
+        // Function to show workflow commands based on selected workflow
+        function showWorkflowCommands(workflowType) {
+            selectedWorkflow = workflowType;
+
+            var noWorkflowMessage = document.getElementById('no-workflow-message');
+            var commandIdeate = document.getElementById('command-ideate');
+            var commandSpecify = document.getElementById('command-specify');
+            var commandPlan = document.getElementById('command-plan');
+            var commandTasks = document.getElementById('command-tasks');
+            var commandImplement = document.getElementById('command-implement');
+
+            if (!workflowType || workflowType === 'default') {
+                // No workflow selected - show message, hide commands
+                if (noWorkflowMessage) noWorkflowMessage.style.display = 'block';
+                if (commandIdeate) commandIdeate.style.display = 'none';
+                if (commandSpecify) commandSpecify.style.display = 'none';
+                if (commandPlan) commandPlan.style.display = 'none';
+                if (commandTasks) commandTasks.style.display = 'none';
+                if (commandImplement) commandImplement.style.display = 'none';
+            } else if (workflowType === 'create-rfe') {
+                // RFE workflow - show ideate only
+                if (noWorkflowMessage) noWorkflowMessage.style.display = 'none';
+                if (commandIdeate) commandIdeate.style.display = 'flex';
+                if (commandSpecify) commandSpecify.style.display = 'none';
+                if (commandPlan) commandPlan.style.display = 'none';
+                if (commandTasks) commandTasks.style.display = 'none';
+                if (commandImplement) commandImplement.style.display = 'none';
+            } else if (workflowType === 'create-feature') {
+                // Spec Kit workflow - show all commands
+                if (noWorkflowMessage) noWorkflowMessage.style.display = 'none';
+                if (commandIdeate) commandIdeate.style.display = 'flex';
+                if (commandSpecify) commandSpecify.style.display = 'flex';
+                if (commandPlan) commandPlan.style.display = 'flex';
+                if (commandTasks) commandTasks.style.display = 'flex';
+                if (commandImplement) commandImplement.style.display = 'flex';
+            }
+        }
+
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Session control functions
+        function stopSession() {
+            // Update status badge
+            const statusBadge = document.querySelector('.badge-info');
+            if (statusBadge) {
+                statusBadge.className = 'badge';
+                statusBadge.style.background = '#f1f5f9';
+                statusBadge.style.color = '#64748b';
+                statusBadge.innerHTML = `
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <line x1="9" y1="9" x2="15" y2="15"/>
+                        <line x1="15" y1="9" x2="9" y2="15"/>
+                    </svg>
+                    Stopped
+                `;
+            }
+            
+            // Update page description
+            const description = document.querySelector('.page-description');
+            if (description) {
+                description.textContent = 'Real-time AI coding session • claude-3.5-sonnet • Stopped just now';
+            }
+            
+            // Disable chat input
+            const chatInput = document.querySelector('.chat-input input');
+            const sendButton = document.querySelector('.chat-input button');
+            if (chatInput && sendButton) {
+                chatInput.disabled = true;
+                chatInput.placeholder = 'Session stopped - no new messages';
+                chatInput.style.background = '#f8fafc';
+                chatInput.style.color = '#64748b';
+                sendButton.disabled = true;
+            }
+            
+            // Change Stop button to Export
+            const stopButton = document.querySelector('[onclick="stopSession()"]');
+            if (stopButton) {
+                stopButton.onclick = null;
+                stopButton.style.color = '';
+                stopButton.style.borderColor = '';
+                stopButton.innerHTML = `
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                        <polyline points="7,10 12,15 17,10"/>
+                        <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                    Export
+                `;
+            }
+        }
+
+        // Accordion toggle function
+        function toggleAccordion(accordionName) {
+            // Check if the accordion is disabled (for agents)
+            const button = document.getElementById(`${accordionName}-accordion-button`);
+            if (button && button.disabled) {
+                return; // Don't toggle if disabled
+            }
+
+            const content = document.getElementById(`${accordionName}-content`);
+            const arrow = document.getElementById(`${accordionName}-arrow`);
+
+            if (content && arrow) {
+                const isOpen = content.style.display === 'block';
+
+                if (isOpen) {
+                    content.style.display = 'none';
+                    arrow.style.transform = 'rotate(0deg)';
+                } else {
+                    content.style.display = 'block';
+                    arrow.style.transform = 'rotate(180deg)';
+                }
+            }
+        }
+
+        // Enable the Agents accordion after repository is seeded
+        function enableAgentsAccordion() {
+            // Hide the requirement message
+            const agentsRepoRequirement = document.getElementById('agents-repo-requirement');
+            if (agentsRepoRequirement) {
+                agentsRepoRequirement.style.display = 'none';
+            }
+
+            // Show the agent list
+            const agentsList = document.getElementById('agents-list');
+            if (agentsList) {
+                agentsList.style.display = 'block';
+            }
+        }
+
+        // Enable workflow step buttons after repository is seeded
+        function enableWorkflowSteps() {
+            const workflowButtons = document.querySelectorAll('.workflow-step-button');
+            workflowButtons.forEach(button => {
+                button.disabled = false;
+                button.style.opacity = '1';
+                button.style.cursor = 'pointer';
+            });
+
+            // Change step names from gray to black
+            const stepNames = document.querySelectorAll('.workflow-step-name');
+            stepNames.forEach(name => {
+                name.style.color = '#374151';
+            });
+
+            // Change filenames from light gray to darker gray
+            const fileNames = document.querySelectorAll('.workflow-step-filename');
+            fileNames.forEach(filename => {
+                filename.style.color = '#64748b';
+            });
+        }
+
+        // Update workflow phases based on selected workflow type
+        function updateWorkflowPhases() {
+            const workflowType = document.getElementById('workflow-type').value;
+            const rfePhases = document.getElementById('rfe-phases');
+            const specKitPhases = document.getElementById('spec-kit-phases');
+            const helpText = document.getElementById('workflow-help-text');
+
+            // Hide all phases and help text first
+            rfePhases.style.display = 'none';
+            specKitPhases.style.display = 'none';
+            if (helpText) helpText.style.display = 'none';
+
+            // Show appropriate content based on selection
+            if (workflowType === 'default') {
+                // Show help text for None/Default
+                if (helpText) helpText.style.display = 'block';
+            } else if (workflowType === 'create-rfe') {
+                rfePhases.style.display = 'block';
+            } else if (workflowType === 'create-feature') {
+                specKitPhases.style.display = 'block';
+            }
+
+            // Update command popover to show appropriate commands
+            showWorkflowCommands(workflowType);
+        }
+
+        // Show Add Repository form in chat
+        function showAddRepositoryForm() {
+            const chatMessages = document.querySelector('.chat-messages');
+            
+            const gitIntegrationCard = document.createElement('div');
+            gitIntegrationCard.style.cssText = 'margin-bottom: 1rem; background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.5rem; max-width: 600px; opacity: 0; transition: opacity 0.3s ease-in;';
+            
+            gitIntegrationCard.innerHTML = `
+                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem;">Connect to spec repository</h3>
+                
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
+                    <div class="form-group">
+                        <label class="form-label" style="font-size: 0.875rem;">Git User Name</label>
+                        <input type="text" class="form-input" value="Daniel-Warner-X" style="font-size: 0.875rem;">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" style="font-size: 0.875rem;">Git User Email</label>
+                        <input type="email" class="form-input" value="dan@danielwarner.net" style="font-size: 0.875rem;">
+                    </div>
+                </div>
+                
+                <div class="form-group" style="margin-bottom: 1rem;">
+                    <label class="form-label" style="font-size: 0.875rem;">GitHub API Token</label>
+                    <div style="position: relative;">
+                        <input type="password" class="form-input" value="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" style="font-size: 0.875rem; padding-right: 3rem;">
+                        <button style="position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                <circle cx="12" cy="12" r="3"/>
+                            </svg>
+                        </button>
+                    </div>
+                    <small style="color: #64748b; font-size: 0.75rem;">GitHub personal access token or fine-grained token for git operations and API access</small>
+                </div>
+                
+                <div style="font-size: 0.75rem; color: #64748b; margin-bottom: 1rem;">
+                    Git credentials will be saved with keys: GIT_USER_NAME, GIT_USER_EMAIL, GIT_TOKEN
+                </div>
+                
+                <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                    <button onclick="closeGitIntegration(this)" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Cancel</button>
+                    <button onclick="saveGitIntegration(this)" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Save Configuration</button>
+                </div>
+            `;
+            
+            chatMessages.appendChild(gitIntegrationCard);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // Fade in the card
+            setTimeout(() => {
+                gitIntegrationCard.style.opacity = '1';
+            }, 50);
+        }
+
+        function closeGitIntegration(button) {
+            const card = button.closest('div[style*="max-width: 600px"]');
+            if (card) {
+                card.remove();
+            }
+        }
+
+        function saveGitIntegration(button) {
+            const card = button.closest('div[style*="max-width: 600px"]');
+            if (card) {
+                // Show success message
+                card.innerHTML = `
+                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f0fdf4; border: 1px solid #10b981; border-radius: 0.375rem;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
+                            <path d="M20 6L9 17l-5-5"/>
+                        </svg>
+                        <div>
+                            <div style="font-weight: 500; color: #166534;">Git Integration Configured</div>
+                            <div style="font-size: 0.875rem; color: #64748b;">Repository credentials saved successfully</div>
+                        </div>
+                    </div>
+                `;
+                
+                setTimeout(() => {
+                    card.remove();
+                }, 3000);
+            }
+        }
+
+        // Typing animation for welcome message
+        function typeMessage(element, text, speed = 15, callback) {
+            let index = 0;
+            element.textContent = '';
+
+            function type() {
+                if (index < text.length) {
+                    element.textContent += text.charAt(index);
+                    index++;
+                    setTimeout(type, speed);
+                } else if (callback) {
+                    callback();
+                }
+            }
+
+            type();
+        }
+
+        // Show workflow suggestion cards
+        function showWorkflowCards() {
+            const chatMessages = document.getElementById('chat-messages');
+
+            const cardsContainer = document.createElement('div');
+            cardsContainer.style.cssText = 'display: flex; gap: 1rem; margin-top: 1rem; margin-bottom: 1.5rem; padding: 0 1rem; opacity: 0; transition: opacity 0.3s ease-in;';
+            cardsContainer.id = 'workflow-cards';
+            
+            cardsContainer.innerHTML = `
+                <div style="flex: 1; background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.borderColor='#1e40af'; this.style.boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1)'" onmouseout="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'" onclick="selectWorkflow('rfe')">
+                    <div style="font-weight: 500; color: #374151; margin-bottom: 0.25rem;"><span style="font-size: 1.25rem; margin-right: 0.5rem;">📝</span>Plan a feature</div>
+                    <div style="font-size: 0.75rem; color: #64748b;">Ideate and specify your request for enhancement</div>
+                </div>
+
+                <div style="flex: 1; background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.borderColor='#1e40af'; this.style.boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1)'" onmouseout="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'" onclick="selectWorkflow('feature')">
+                    <div style="font-weight: 500; color: #374151; margin-bottom: 0.25rem;"><span style="font-size: 1.25rem; margin-right: 0.5rem;">🏗️</span>Develop Feature</div>
+                    <div style="font-size: 0.75rem; color: #64748b;">Complete feature development from spec to implementation</div>
+                </div>
+            `;
+            
+            chatMessages.appendChild(cardsContainer);
+            
+            // Fade in the cards
+            setTimeout(() => {
+                cardsContainer.style.opacity = '1';
+            }, 50);
+        }
+
+        // Handle workflow selection from cards
+        function selectWorkflow(workflowType) {
+            // Set the workflow dropdown
+            const workflowDropdown = document.getElementById('workflow-type');
+            if (workflowDropdown) {
+                if (workflowType === 'rfe') {
+                    workflowDropdown.value = 'create-rfe';
+                } else if (workflowType === 'feature') {
+                    workflowDropdown.value = 'create-feature';
+                }
+                updateWorkflowPhases();
+                
+                // Open the workflow accordion
+                const workflowContent = document.getElementById('workflow-content');
+                const workflowArrow = document.getElementById('workflow-arrow');
+                if (workflowContent && workflowArrow) {
+                    workflowContent.style.display = 'block';
+                    workflowArrow.style.transform = 'rotate(180deg)';
+                }
+            }
+            
+            // Remove the workflow cards
+            const cards = document.getElementById('workflow-cards');
+            if (cards) {
+                cards.style.opacity = '0';
+                setTimeout(() => {
+                    cards.remove();
+                    
+                    // Show system message about workflow selection
+                    const chatMessages = document.getElementById('chat-messages');
+                    const systemMessage = document.createElement('div');
+                    systemMessage.style.cssText = 'text-align: center; padding: 0.5rem; margin: 1rem 0;';
+                    
+                    const workflowName = workflowType === 'rfe' ? 'Create RFE workflow' : 'Create feature with spec-kit workflow';
+                    systemMessage.innerHTML = `
+                        <div style="display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #64748b;">
+                            ${workflowName} selected
+                        </div>
+                    `;
+                    
+                    chatMessages.appendChild(systemMessage);
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                    
+                    // Show repository requirement message after system message
+                    setTimeout(() => {
+                        showRepositoryRequirement();
+                    }, 500);
+                }, 300);
+            }
+        }
+
+        // Show repository requirement message in chat
+        function showRepositoryRequirement() {
+            const chatMessages = document.getElementById('chat-messages');
+            
+            // Add ACP message about repository requirement
+            const repoMessage = document.createElement('div');
+            repoMessage.className = 'message';
+            repoMessage.innerHTML = `
+                <div class="message-avatar ai-avatar">ACP</div>
+                <div class="message-content">
+                    <div class="message-header">ACP</div>
+                    <div id="repo-requirement-message"></div>
+                    <div id="repo-action-button" style="opacity: 0; transition: opacity 0.3s ease-in; margin-top: 1rem;"></div>
+                </div>
+            `;
+            
+            chatMessages.appendChild(repoMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // Type the message
+            const messageElement = document.getElementById('repo-requirement-message');
+            const messageText = "This workflow requires a spec repository to store generated artifacts.";
+
+            typeMessage(messageElement, messageText, 10, function() {
+                // Show Add Repository button after typing completes
+                setTimeout(() => {
+                    const buttonContainer = document.getElementById('repo-action-button');
+                    if (buttonContainer) {
+                        buttonContainer.innerHTML = `
+                            <button onclick="openGitCredentialsModal()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                                    <path d="M12 5v14"/>
+                                    <path d="M5 12h14"/>
+                                </svg>
+                                Add Repository
+                            </button>
+                        `;
+                        
+                        // Fade in the button
+                        setTimeout(() => {
+                            buttonContainer.style.opacity = '1';
+                        }, 50);
+                    }
+                }, 1000);
+            });
+        }
+
+        // Show Git Integration form inside ACP message
+        function showGitIntegrationInMessage() {
+            const container = document.getElementById('git-integration-container');
+            if (!container) return;
+            
+            container.innerHTML = `
+                <div style="background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.5rem;">
+                    <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem;">Connect to spec repository</h3>
+                    
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
+                        <div class="form-group">
+                            <label class="form-label" style="font-size: 0.875rem;">Git User Name</label>
+                            <input type="text" class="form-input" value="Daniel-Warner-X" style="font-size: 0.875rem;">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" style="font-size: 0.875rem;">Git User Email</label>
+                            <input type="email" class="form-input" value="dan@danielwarner.net" style="font-size: 0.875rem;">
+                        </div>
+                    </div>
+                    
+                    <div class="form-group" style="margin-bottom: 1rem;">
+                        <label class="form-label" style="font-size: 0.875rem;">GitHub API Token</label>
+                        <div style="position: relative;">
+                            <input type="password" class="form-input" value="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" style="font-size: 0.875rem; padding-right: 3rem;">
+                            <button style="position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2">
+                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                    <circle cx="12" cy="12" r="3"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <small style="color: #64748b; font-size: 0.75rem;">GitHub personal access token or fine-grained token for git operations and API access</small>
+                    </div>
+                    
+                    <div style="font-size: 0.75rem; color: #64748b; margin-bottom: 1rem;">
+                        Git credentials will be saved with keys: GIT_USER_NAME, GIT_USER_EMAIL, GIT_TOKEN
+                    </div>
+                    
+                    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                        <button onclick="cancelGitIntegrationInMessage()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Cancel</button>
+                        <button onclick="saveGitIntegrationInMessage()" class="btn btn-primary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Save Configuration</button>
+                    </div>
+                </div>
+            `;
+            
+            // Fade in the card
+            setTimeout(() => {
+                container.style.opacity = '1';
+            }, 50);
+            
+            // Scroll to show the card
+            const chatMessages = document.querySelector('.chat-messages');
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        function cancelGitIntegrationInMessage() {
+            const container = document.getElementById('git-integration-container');
+            if (container) {
+                container.style.opacity = '0';
+                setTimeout(() => {
+                    container.innerHTML = '';
+                }, 500);
+            }
+        }
+
+        function saveGitIntegrationInMessage() {
+            const container = document.getElementById('git-integration-container');
+            if (container) {
+                container.innerHTML = `
+                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f0fdf4; border: 1px solid #10b981; border-radius: 0.375rem;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
+                            <path d="M20 6L9 17l-5-5"/>
+                        </svg>
+                        <div>
+                            <div style="font-weight: 500; color: #166534;">Git Integration Configured</div>
+                            <div style="font-size: 0.875rem; color: #64748b;">Repository credentials saved successfully</div>
+                        </div>
+                    </div>
+                `;
+                
+                // Show repository details in the accordion
+                const repoDetails = document.getElementById('repository-details');
+                if (repoDetails) {
+                    repoDetails.style.display = 'block';
+                }
+            }
+        }
+
+        // Git Credentials Modal functions
+        function openGitCredentialsModal() {
+            // Hide the Add Repository button in chat if it exists
+            const repoActionButton = document.getElementById('repo-action-button');
+            if (repoActionButton) {
+                repoActionButton.style.opacity = '0';
+                setTimeout(() => {
+                    repoActionButton.style.display = 'none';
+                }, 500);
+            }
+            
+            document.getElementById('gitCredentialsModal').style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeGitCredentialsModal() {
+            document.getElementById('gitCredentialsModal').style.display = 'none';
+            document.body.style.overflow = 'auto';
+        }
+
+        function togglePasswordVisibility() {
+            const tokenInput = document.getElementById('github-token');
+            if (tokenInput.type === 'password') {
+                tokenInput.type = 'text';
+            } else {
+                tokenInput.type = 'password';
+            }
+        }
+
+        function saveGitCredentials() {
+            const modalBody = document.querySelector('#gitCredentialsModal .modal-body');
+            
+            // Show loading state
+            modalBody.innerHTML = `
+                <div style="text-align: center; padding: 3rem 2rem;">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1e40af" stroke-width="2" style="animation: spin 1s linear infinite; margin: 0 auto 1rem;">
+                        <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                    </svg>
+                    <div style="font-weight: 500; font-size: 1rem; color: #374151; margin-bottom: 0.5rem;">Connecting to GitHub</div>
+                    <div style="font-size: 0.875rem; color: #64748b;">Verifying credentials...</div>
+                </div>
+            `;
+            
+            // After 5 seconds, show spec repository configuration
+            setTimeout(() => {
+                showSpecRepoConfig();
+            }, 5000);
+        }
+
+        function showSpecRepoConfig() {
+            const modalBody = document.querySelector('#gitCredentialsModal .modal-body');
+            const modalTitle = document.querySelector('#gitCredentialsModal h2');
+            
+            // Update modal title
+            if (modalTitle) {
+                modalTitle.textContent = 'Configure Spec Repository';
+            }
+            
+            // Show spec repository form
+            modalBody.innerHTML = `
+                <div class="form-group" style="margin-bottom: 1rem;">
+                    <label class="form-label" for="spec-repo-url">Spec Repo URL</label>
+                    <input type="text" id="spec-repo-url" class="form-input" placeholder="https://github.com/org/repo.git">
+                    <small style="color: #64748b; font-size: 0.875rem;">The spec repository is where workflow artifacts are stored.</small>
+                </div>
+                
+                <div class="form-group" style="margin-bottom: 1.5rem;">
+                    <label class="form-label" for="spec-base-branch">Base Branch</label>
+                    <input type="text" id="spec-base-branch" class="form-input" value="main">
+                </div>
+                
+                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
+                    <button type="button" onclick="closeGitCredentialsModal()" class="btn btn-secondary">Cancel</button>
+                    <button type="button" onclick="saveSpecRepoConfig()" class="btn btn-primary">Save Configuration</button>
+                </div>
+            `;
+        }
+
+        function saveSpecRepoConfig() {
+            // Get the spec repo URL
+            const specRepoUrl = document.getElementById('spec-repo-url').value;
+            
+            // Extract repo name from URL (e.g., "org/repo" from "https://github.com/org/repo.git")
+            let repoName = specRepoUrl;
+            if (specRepoUrl) {
+                const match = specRepoUrl.match(/github\.com\/([^\/]+\/[^\/\.]+)/);
+                if (match) {
+                    repoName = match[1];
+                } else {
+                    // Try to extract from URL without .git extension
+                    const parts = specRepoUrl.replace('.git', '').split('/');
+                    if (parts.length >= 2) {
+                        repoName = parts[parts.length - 2] + '/' + parts[parts.length - 1];
+                    }
+                }
+            }
+            
+            // Show system message for repository configuration
+            const chatMessages = document.getElementById('chat-messages');
+            const repoConfigMessage = document.createElement('div');
+            repoConfigMessage.style.cssText = 'text-align: center; padding: 0.5rem; margin: 1rem 0;';
+            repoConfigMessage.innerHTML = `
+                <div style="display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #64748b;">
+                    Spec repository selected
+                </div>
+            `;
+            chatMessages.appendChild(repoConfigMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // After a brief delay, show ACP message about seeding
+            setTimeout(() => {
+                const seedPromptMessage = document.createElement('div');
+                seedPromptMessage.className = 'message';
+                seedPromptMessage.innerHTML = `
+                    <div class="message-avatar ai-avatar">ACP</div>
+                    <div class="message-content">
+                        <div class="message-header">ACP</div>
+                        <div id="seed-prompt-message"></div>
+                        <div id="seed-button-container" style="opacity: 0; transition: opacity 0.3s ease-in; margin-top: 1rem;"></div>
+                    </div>
+                `;
+                
+                chatMessages.appendChild(seedPromptMessage);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                
+                // Type the seed prompt message
+                const seedMessageElement = document.getElementById('seed-prompt-message');
+                const seedMessageText = "Seed this repository to get started.";
+
+                typeMessage(seedMessageElement, seedMessageText, 10, function() {
+                    // Show Seed Repository button after typing completes
+                    setTimeout(() => {
+                        const seedButtonContainer = document.getElementById('seed-button-container');
+                        if (seedButtonContainer) {
+                            seedButtonContainer.innerHTML = `
+                                <button onclick="seedRepositoryFromChat()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Seed Repository</button>
+                            `;
+                            
+                            // Fade in the button
+                            setTimeout(() => {
+                                seedButtonContainer.style.opacity = '1';
+                            }, 50);
+                        }
+                    }, 500);
+                });
+            }, 1000);
+
+            // Update Spec Repository accordion only
+            const specRepoAccordionContainer = document.getElementById('repository-details');
+
+            if (specRepoAccordionContainer) {
+                const accordionContent = `
+                    <div style="margin-bottom: 0.5rem;">
+                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
+                                <path d="M20 6L9 17l-5-5"/>
+                            </svg>
+                            <strong style="color: #374151;">${repoName || 'Repository selected'}</strong>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #64748b; margin-bottom: 0.5rem;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
+                                <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
+                            </svg>
+                            Seed this repository to get started.
+                        </div>
+                    </div>
+                    <button onclick="seedRepositoryFromAccordion()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">Seed Repository</button>
+                `;
+                specRepoAccordionContainer.innerHTML = `
+                    <div style="padding: 1rem;">
+                        ${accordionContent}
+                    </div>
+                `;
+            }
+            
+            // Close modal
+            closeGitCredentialsModal();
+            
+            // Show repository details in the Spec Repository accordion
+            const notConnectedMessage = document.querySelector('#spec-repository-content > div:first-child');
+            
+            if (specRepoAccordionContainer && notConnectedMessage) {
+                notConnectedMessage.style.display = 'none';
+                specRepoAccordionContainer.style.display = 'block';
+            }
+        }
+
+        // Seed repository from chat button
+        function seedRepositoryFromChat() {
+            // Remove the seed button completely (keeping the message)
+            const seedButtonContainer = document.getElementById('seed-button-container');
+            if (seedButtonContainer) {
+                seedButtonContainer.style.opacity = '0';
+                setTimeout(() => {
+                    seedButtonContainer.remove();
+                }, 300);
+            }
+
+            // Call the regular seed function which will handle all the updates
+            seedRepository();
+        }
+
+        // Seed repository from Spec Repository accordion
+        function seedRepositoryFromAccordion() {
+            const chatMessages = document.getElementById('chat-messages');
+            const specRepoAccordionContainer = document.getElementById('repository-details');
+
+            // Remove the seed button from chat if it exists
+            const seedButtonContainer = document.getElementById('seed-button-container');
+            if (seedButtonContainer) {
+                seedButtonContainer.style.opacity = '0';
+                setTimeout(() => {
+                    seedButtonContainer.remove();
+                }, 300);
+            }
+
+            // Get current repo name from accordion
+            const repoNameElement = specRepoAccordionContainer ? specRepoAccordionContainer.querySelector('strong') : null;
+            const repoName = repoNameElement ? repoNameElement.textContent : 'Repository selected';
+
+            // Update to show seeding in progress in accordion
+            const seedingContent = `
+                <div style="padding: 1rem;">
+                    <div style="margin-bottom: 0.5rem;">
+                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
+                                <path d="M20 6L9 17l-5-5"/>
+                            </svg>
+                            <strong style="color: #374151;">${repoName}</strong>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #64748b;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" style="animation: spin 1s linear infinite;">
+                                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                            </svg>
+                            Seeding repository...
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            if (specRepoAccordionContainer) {
+                specRepoAccordionContainer.innerHTML = seedingContent;
+            }
+            
+            // After 3 seconds, show seeded state
+            setTimeout(() => {
+                // Show system message
+                const seedCompleteMessage = document.createElement('div');
+                seedCompleteMessage.style.cssText = 'text-align: center; padding: 0.5rem; margin: 1rem 0;';
+                seedCompleteMessage.innerHTML = `
+                    <div style="display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #64748b;">
+                        Spec repository seeded
+                    </div>
+                `;
+                chatMessages.appendChild(seedCompleteMessage);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                // Mark repository as seeded
+                isRepositorySeeded = true;
+
+                // Enable the Agents accordion
+                enableAgentsAccordion();
+
+                // Enable workflow step buttons
+                enableWorkflowSteps();
+
+                // Hide repository requirement messages in workflows
+                const rfeRepoRequirement = document.getElementById('rfe-repo-requirement');
+                const specKitRepoRequirement = document.getElementById('spec-kit-repo-requirement');
+                if (rfeRepoRequirement) {
+                    rfeRepoRequirement.style.display = 'none';
+                }
+                if (specKitRepoRequirement) {
+                    specKitRepoRequirement.style.display = 'none';
+                }
+
+                const seededContent = `
+                    <div style="padding: 1rem;">
+                        <div style="margin-bottom: 1rem;">
+                            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
+                                    <path d="M20 6L9 17l-5-5"/>
+                                </svg>
+                                <strong style="color: #374151;">${repoName}</strong>
+                            </div>
+                        </div>
+
+                        <!-- File list -->
+                        <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.375rem; padding: 0.75rem; font-family: monospace; font-size: 0.75rem;">
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>.DS_Store</span>
+                                <span>8.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>.claude/</span>
+                                <span>0.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>.cursor/</span>
+                                <span>0.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>.specify/</span>
+                                <span>0.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>LICENSE</span>
+                                <span>1.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>README.md</span>
+                                <span>0.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>ascii-dan.txt</span>
+                                <span>4.5K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>dist/</span>
+                                <span>0.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>img/</span>
+                                <span>0.0K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>index-minimal-site.html</span>
+                                <span>3.7K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>index-scrolling-site.html</span>
+                                <span>16.4K</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;">
+                                <span>video/</span>
+                                <span>0.0K</span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                
+                if (specRepoAccordionContainer) {
+                    specRepoAccordionContainer.innerHTML = seededContent;
+                }
+            }, 3000);
+        }
+
+        // Seed repository (called from Spec Repository accordion)
+        function seedRepository() {
+            // This function is no longer used from workflow accordion
+            // Redirect to seedRepositoryFromAccordion
+            seedRepositoryFromAccordion();
+        }
+
+        // Repository configuration functions
+        function cancelRepositoryConfig() {
+            // Close the accordion
+            const repositoriesContent = document.getElementById('spec-repository-content');
+            const repositoriesArrow = document.getElementById('spec-repository-arrow');
+            
+            if (repositoriesContent && repositoriesArrow) {
+                repositoriesContent.style.display = 'none';
+                repositoriesArrow.style.transform = 'rotate(0deg)';
+            }
+        }
+
+        function saveRepositoryConfig() {
+            // Here you would save the repository configuration
+            // For now, just show a success message and close the accordion
+            
+            // Close the accordion
+            const repositoriesContent = document.getElementById('spec-repository-content');
+            const repositoriesArrow = document.getElementById('spec-repository-arrow');
+            
+            if (repositoriesContent && repositoriesArrow) {
+                repositoriesContent.style.display = 'none';
+                repositoriesArrow.style.transform = 'rotate(0deg)';
+            }
+            
+            // Optional: Show success message in chat
+            // You could add an ACP message here confirming the repository was configured
+        }
+
+        // Available commands
+        const commands = ['help', 'ideate', 'specify', 'plan', 'tasks', 'implement'];
+
+        // Handle chat input for commands/context/agents
+        function handleChatInput(event) {
+            const input = event.target;
+            const value = input.value;
+            const commandPopover = document.getElementById('command-popover');
+            const agentPopover = document.getElementById('agent-popover');
+
+            // Show agent popover when # is typed
+            if (value === '#' || value.startsWith('#')) {
+                commandPopover.style.display = 'none';
+
+                var agentPopoverContent = document.getElementById('agent-popover-content');
+
+                if (!isRepositorySeeded) {
+                    // Show message that repository needs to be seeded
+                    agentPopoverContent.innerHTML =
+                        '<div style="padding: 1rem; text-align: center; color: #64748b; font-size: 0.875rem;">' +
+                            'Add a seeded spec repository to this session to use agents.' +
+                        '</div>';
+                } else {
+                    // Show agent list
+                    var agents = [
+                        { name: 'Archie', role: 'Architect' },
+                        { name: 'Aria', role: 'UX Architect' },
+                        { name: 'Casey', role: 'Content Strategist' },
+                        { name: 'Dan', role: 'Senior Director' },
+                        { name: 'Diego', role: 'Program Manager' },
+                        { name: 'Emma', role: 'Engineering Manager' },
+                        { name: 'Felix', role: 'UX Feature Lead' },
+                        { name: 'Jack', role: 'Delivery Owner' },
+                        { name: 'Lee', role: 'Team Lead' },
+                        { name: 'Neil', role: 'Test Engineer' },
+                        { name: 'Olivia', role: 'Product Owner' },
+                        { name: 'Parker', role: 'Product Manager' },
+                        { name: 'Phoenix', role: 'PXE Specialist' },
+                        { name: 'Ryan', role: 'UX Researcher' },
+                        { name: 'Sam', role: 'Scrum Master' },
+                        { name: 'Stella', role: 'Staff Engineer' },
+                        { name: 'Steve', role: 'UX Designer' },
+                        { name: 'Taylor', role: 'Team Member' },
+                        { name: 'Terry', role: 'Technical Writer' },
+                        { name: 'Tessa', role: 'Writing Manager' },
+                        { name: 'Uma', role: 'UX Team Lead' }
+                    ];
+
+                    var searchText = value.substring(1).toLowerCase();
+                    var agentHtml = '';
+
+                    for (var i = 0; i < agents.length; i++) {
+                        var agent = agents[i];
+                        var agentNameLower = agent.name.toLowerCase();
+
+                        // Filter agents based on search text
+                        if (searchText === '' || agentNameLower.indexOf(searchText) === 0) {
+                            agentHtml +=
+                                '<div onclick="selectAgent(\'' + agent.name + '\')" style="padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #e2e8f0;" onmouseover="this.style.background=\'#f8fafc\'" onmouseout="this.style.background=\'white\'">' +
+                                    '<div>' +
+                                        '<div style="font-weight: 500; font-size: 0.875rem; color: #374151;">' + agent.name + '</div>' +
+                                        '<div style="font-size: 0.75rem; color: #64748b;">' + agent.role + '</div>' +
+                                    '</div>' +
+                                '</div>';
+                        }
+                    }
+
+                    if (agentHtml === '') {
+                        agentHtml = '<div style="padding: 1rem; text-align: center; color: #64748b; font-size: 0.875rem;">No agents found</div>';
+                    }
+
+                    agentPopoverContent.innerHTML = agentHtml;
+                }
+
+                agentPopover.style.display = 'block';
+                return;
+            } else {
+                agentPopover.style.display = 'none';
+            }
+
+            // Show command popover when / is typed
+            if (value === '/' || value.startsWith('/')) {
+                // Get the text after the slash
+                const searchText = value.substring(1).toLowerCase();
+
+                // Determine which commands should be available based on workflow
+                var availableCommands = ['help']; // help is always available
+
+                if (selectedWorkflow === 'create-rfe') {
+                    availableCommands.push('ideate', 'specify');
+                } else if (selectedWorkflow === 'create-feature') {
+                    availableCommands.push('ideate', 'specify', 'plan', 'tasks', 'implement');
+                }
+
+                // Filter and show matching commands
+                const commandItems = commandPopover.querySelectorAll('div[onclick^="selectCommand"]');
+                let visibleCount = 0;
+
+                commandItems.forEach(function(item) {
+                    const onclickAttr = item.getAttribute('onclick');
+                    if (!onclickAttr) return;
+
+                    const match = onclickAttr.match(/'([^']+)'/);
+                    if (!match) return;
+
+                    const commandName = match[1];
+
+                    // Check if command is available for current workflow and matches search
+                    if (availableCommands.indexOf(commandName) !== -1 && commandName.startsWith(searchText)) {
+                        item.style.display = 'flex';
+                        visibleCount++;
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+
+                // Handle the no-workflow message visibility
+                var noWorkflowMessage = document.getElementById('no-workflow-message');
+                if (noWorkflowMessage) {
+                    if (!selectedWorkflow || selectedWorkflow === 'default') {
+                        noWorkflowMessage.style.display = 'block';
+                    } else {
+                        noWorkflowMessage.style.display = 'none';
+                    }
+                }
+
+                // Show popover if there are matching commands or the no-workflow message
+                if (visibleCount > 0 || (!selectedWorkflow || selectedWorkflow === 'default')) {
+                    commandPopover.style.display = 'block';
+                } else {
+                    commandPopover.style.display = 'none';
+                }
+            } else {
+                commandPopover.style.display = 'none';
+            }
+        }
+
+        // Select a command from the popover
+        function selectCommand(command) {
+            const input = document.getElementById('chat-input-field');
+            const commandPopover = document.getElementById('command-popover');
+
+            // Set the input value to the command
+            input.value = '/' + command + ' ';
+            commandPopover.style.display = 'none';
+
+            // Focus back on input
+            input.focus();
+        }
+
+        // Select an agent from the popover
+        function selectAgent(agentName) {
+            const input = document.getElementById('chat-input-field');
+            const agentPopover = document.getElementById('agent-popover');
+
+            // Set the input value to the agent name
+            input.value = '#' + agentName + ' ';
+            agentPopover.style.display = 'none';
+
+            // Focus back on input
+            input.focus();
+        }
+
+        // Close popovers when clicking outside
+        document.addEventListener('click', function(event) {
+            const commandPopover = document.getElementById('command-popover');
+            const agentPopover = document.getElementById('agent-popover');
+            const chatInput = document.getElementById('chat-input-field');
+
+            // Don't close if clicking on the input field itself
+            if (event.target === chatInput) {
+                return;
+            }
+
+            if (commandPopover && chatInput &&
+                !commandPopover.contains(event.target)) {
+                commandPopover.style.display = 'none';
+            }
+
+            if (agentPopover && chatInput &&
+                !agentPopover.contains(event.target)) {
+                agentPopover.style.display = 'none';
+            }
+        });
+
+        // Initialize welcome message on page load
+        window.addEventListener('DOMContentLoaded', function() {
+            const welcomeElement = document.getElementById('welcome-message');
+            const welcomeText = "Welcome to the Ambient Code Platform. I'm here to help you with coding tasks, answer questions, and collaborate on your project. Use the /help command at any time for guidance. Type your message below or select a workflow to get started.";
+            
+            if (welcomeElement) {
+                setTimeout(() => {
+                    typeMessage(welcomeElement, welcomeText, 10, function() {
+                        // Show workflow cards after typing completes
+                        setTimeout(() => {
+                            showWorkflowCards();
+                        }, 300);
+                    });
+                }, 300);
+            }
+        });
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+
+        // Run /ideate command
+        function runIdeateCommand() {
+            const chatMessages = document.getElementById('chat-messages');
+
+            // Update the workflow step to show spinner and status
+            const workflowStepFilename = document.querySelector('#rfe-phases .workflow-step-filename');
+            if (workflowStepFilename) {
+                workflowStepFilename.innerHTML = `
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite; display: inline; vertical-align: middle; margin-right: 0.25rem;">
+                        <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                    </svg>
+                    creating RFE...
+                `;
+            }
+
+            // Get selected agents
+            const selectedAgents = [];
+            const agentCheckboxes = document.querySelectorAll('#agents-list input[type="checkbox"]:not(#dynamic-agent-selection)');
+            agentCheckboxes.forEach(checkbox => {
+                if (checkbox.checked) {
+                    const label = checkbox.parentElement.querySelector('span');
+                    const agentText = label.textContent;
+                    const agentName = agentText.split(' - ')[0];
+                    const agentRole = agentText.split(' - ')[1];
+                    selectedAgents.push({ name: agentName, role: agentRole });
+                }
+            });
+
+            // Show system message about collaboration
+            const systemMessage = document.createElement('div');
+            systemMessage.style.cssText = 'text-align: center; padding: 0.5rem; margin: 1rem 0;';
+            systemMessage.innerHTML = `
+                <div style="display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #64748b;">
+                    Selected agents are collaborating on an rfe.md file based on the associated repositories and provided context.
+                </div>
+            `;
+
+            chatMessages.appendChild(systemMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Show agent contributions if there are selected agents
+            if (selectedAgents.length > 0) {
+                showAgentContributions(selectedAgents, 0, () => {
+                    // After all agents have contributed, show RFE content
+                    showRFEContent();
+                });
+            } else {
+                // No agents selected, just show RFE content
+                setTimeout(() => {
+                    showRFEContent();
+                }, 500);
+            }
+        }
+
+        // Show agent contributions one by one
+        function showAgentContributions(agents, index, callback) {
+            if (index >= agents.length) {
+                callback();
+                return;
+            }
+
+            const agent = agents[index];
+            const chatMessages = document.getElementById('chat-messages');
+
+            setTimeout(function() {
+                const agentMessage = document.createElement('div');
+                agentMessage.className = 'message';
+                agentMessage.innerHTML =
+                    '<div class="message-avatar" style="background: #10b981; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.875rem; flex-shrink: 0;">' + agent.name.substring(0, 2).toUpperCase() + '</div>' +
+                    '<div class="message-content" style="flex: 1; background: #f0fdf4; padding: 0.75rem; border-radius: 0.5rem;">' +
+                        '<div class="message-header">' + agent.name + ' (' + agent.role + ')</div>' +
+                        '<div id="agent-' + index + '-message"></div>' +
+                    '</div>';
+
+                chatMessages.appendChild(agentMessage);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                // Update message count
+                updateMessageCount();
+
+                // Type out agent's contribution
+                const messageElement = document.getElementById('agent-' + index + '-message');
+                const contributions = {
+                    'Archie': 'I will focus on the system architecture and technical patterns for the dashboard redesign.',
+                    'Aria': 'I will design the user experience strategy and journey mapping for AI platform engineers.',
+                    'Parker': 'I will ensure the redesign aligns with market strategy and delivers business value.',
+                    'Uma': 'I will oversee the design quality and maintain consistency with our design system.',
+                    'Felix': 'I will work on component design and accessibility implementation for the new interface.',
+                    'Steve': 'I will create visual designs and prototypes for the proposed directions.',
+                    'Ryan': 'I will analyze user insights and validate design decisions with research data.',
+                    'Olivia': 'I will define acceptance criteria and prioritize features for the sprint.',
+                    'Emma': 'I will coordinate the team and ensure we balance technical excellence with delivery timelines.',
+                    'Lee': 'I will facilitate sprint planning and coordinate cross-team dependencies.',
+                    'Taylor': 'I will focus on pragmatic implementation and code quality for the frontend.',
+                    'Stella': 'I will provide technical leadership and bridge the architecture to implementation.',
+                    'Diego': 'I will manage the documentation roadmap and content strategy.',
+                    'Terry': 'I will create user-centered documentation for the new dashboard features.',
+                    'Tessa': 'I will coordinate documentation standards and content quality.',
+                    'Casey': 'I will develop the information architecture and content taxonomy.',
+                    'Dan': 'I will validate strategic alignment with company growth pillars.',
+                    'Sam': 'I will facilitate the agile process and remove impediments.',
+                    'Jack': 'I will track cross-team dependencies and manage delivery milestones.',
+                    'Phoenix': 'I will assess customer impact and plan for smooth upgrade paths.',
+                    'Neil': 'I will ensure testability and verify implementation matches requirements.'
+                };
+
+                const contribution = contributions[agent.name] || 'I will contribute my expertise as ' + agent.role + ' to this RFE.';
+
+                typeMessage(messageElement, contribution, 10, function() {
+                    // Move to next agent
+                    showAgentContributions(agents, index + 1, callback);
+                });
+            }, 300);
+        }
+
+        // Show RFE content
+        function showRFEContent() {
+            const chatMessages = document.getElementById('chat-messages');
+
+            const rfeMessage = document.createElement('div');
+            rfeMessage.className = 'message';
+            rfeMessage.innerHTML =
+                '<div class="message-avatar ai-avatar">ACP</div>' +
+                '<div class="message-content">' +
+                    '<div class="message-header">ACP</div>' +
+                    '<div id="rfe-content" style="white-space: pre-wrap; font-family: monospace; font-size: 0.875rem;"></div>' +
+                    '<div id="rfe-actions" style="display: none; margin-top: 1rem; display: flex; gap: 0.5rem;"></div>' +
+                '</div>';
+
+            chatMessages.appendChild(rfeMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Update message count
+            updateMessageCount();
+
+            // Type out the RFE content
+            const rfeContentElement = document.getElementById('rfe-content');
+            var rfeContent = '# RFE: Visual Redesign of Red Hat OpenShift AI (RHOAI) 3.0 Dashboard\n\n' +
+'## Executive Summary\n\n' +
+'This Request for Enhancement (RFE) proposes three distinct visual redesign directions for the Red Hat OpenShift AI (RHOAI) 3.0 dashboard to address the core challenge faced by AI Platform Engineers like Paula: efficiently finding and evaluating production-ready AI models among thousands of options.\n\n' +
+'The current dashboard, while functional, presents a traditional enterprise interface that does not leverage modern AI-centric design patterns or optimize for the unique workflows of AI practitioners. This redesign focuses on transforming the user experience from a data-heavy administrative interface to an intelligent, task-oriented platform that accelerates model discovery and deployment decisions.\n\n' +
+'## Current State Analysis\n\n' +
+'### Existing Architecture\n' +
+'- Framework: React with TypeScript, PatternFly React components\n' +
+'- Navigation: Traditional sidebar navigation with hierarchical structure\n' +
+'- Layout: Standard enterprise dashboard with card-based model catalog\n' +
+'- Feature Management: Comprehensive feature flag system supporting MVP mode vs full feature set\n' +
+'- Components: Heavy use of PatternFly components (Cards, Tables, Forms, Modals, Dropdowns)\n\n' +
+'### Current User Journey Pain Points\n' +
+'1. Cognitive Overload: Thousands of models presented in basic card/table format\n' +
+'2. Inefficient Filtering: Multiple separate filter interfaces without visual feedback\n' +
+'3. Limited Comparison: No side-by-side model comparison capabilities\n' +
+'4. Static Information: Performance metrics buried in text rather than visual indicators\n' +
+'5. Context Switching: Frequent navigation between catalog, registry, and deployment sections\n\n' +
+'### Technical Foundation\n' +
+'- PatternFly Integration: Extensive use of existing components provides solid accessibility foundation\n' +
+'- Feature Flags: Robust system for MVP/full feature mode switching\n' +
+'- State Management: Context API for global state, component-level state for UI interactions\n' +
+'- Routing: React Router with dynamic route generation based on feature flags\n\n' +
+'## User Persona: Paula - AI Platform Engineer\n\n' +
+'Primary Goal: Find production-ready AI models that balance performance, cost, and specific use case requirements\n\n' +
+'Key Workflows:\n' +
+'1. Model Discovery: Search through thousands of models using multiple criteria\n' +
+'2. Performance Evaluation: Compare latency, throughput, accuracy, and resource requirements\n' +
+'3. Compatibility Assessment: Verify model compatibility with existing infrastructure\n' +
+'4. Deployment Planning: Understand deployment requirements and costs\n' +
+'5. Monitoring Setup: Configure monitoring and alerting for deployed models\n\n' +
+'Success Metrics:\n' +
+'- Time to find relevant models reduced by 60%\n' +
+'- Improved task completion rates for model selection workflows\n' +
+'- Reduced cognitive load when comparing multiple models\n' +
+'- Increased user satisfaction with filtering and search capabilities\n\n' +
+'---\n\n' +
+'# Design Direction 1: AI-First Visual Intelligence\n\n' +
+'## Philosophy\n' +
+'Treat AI models as visual, interactive objects rather than data rows. Transform the dashboard into an intelligent visual workspace where data visualization, interactive filtering, and AI-powered recommendations create an intuitive model discovery experience.\n\n' +
+'## User Journey: Paula Model Discovery Workflow\n\n' +
+'### 1. Landing Experience\n' +
+'Paula arrives at a Visual Model Universe - a dynamic, interactive visualization showing all available models as nodes in a network graph, clustered by use case, provider, and performance characteristics.\n\n' +
+'### 2. Intelligent Filtering\n' +
+'She uses Visual Filter Sliders to narrow down options:\n' +
+'- Latency requirement: Drag slider to <100ms\n' +
+'- Cost threshold: Visual budget indicator shows real-time cost implications\n' +
+'- Hardware compatibility: Interactive hardware requirement visualization\n\n' +
+'### 3. AI-Powered Recommendations\n' +
+'The Recommendation Engine surfaces relevant models based on her query with confidence scores and reasoning.\n\n' +
+'### 4. Visual Comparison\n' +
+'Paula selects 3-4 models for Side-by-Side Visual Comparison with interactive performance charts, compatibility matrices, and deployment requirement visualizations.\n\n' +
+'### 5. Workflow Integration\n' +
+'She connects her selected model to MCP servers and agents using the Visual Workflow Builder - a drag-and-drop interface showing data flow and dependencies.';
+
+            typeMessage(rfeContentElement, rfeContent, 5, function() {
+                // Scroll to bottom after typing completes
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                // Restore the workflow step description
+                const workflowStepFilename = document.querySelector('#rfe-phases .workflow-step-filename');
+                if (workflowStepFilename) {
+                    workflowStepFilename.innerHTML = 'Create or update rfe.md file';
+                }
+
+                // Show action buttons
+                const actionsDiv = document.getElementById('rfe-actions');
+                if (actionsDiv) {
+                    actionsDiv.style.display = 'flex';
+                    actionsDiv.innerHTML =
+                        '<button onclick="copyRFEContent()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">' +
+                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">' +
+                                '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>' +
+                                '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>' +
+                            '</svg>' +
+                            'Copy' +
+                        '</button>' +
+                        '<button onclick="viewRFEContent()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">' +
+                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">' +
+                                '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>' +
+                                '<circle cx="12" cy="12" r="3"/>' +
+                            '</svg>' +
+                            'View' +
+                        '</button>';
+                }
+
+                // Add result to Results accordion
+                addResultToAccordion('rfe.md was created');
+
+                // Add file to repository file list
+                addFileToRepository('rfe.md', '12.3K');
+            });
+        }
+
+        // Update message count in Session Details
+        function updateMessageCount() {
+            const chatMessages = document.getElementById('chat-messages');
+            if (chatMessages) {
+                const messageCount = chatMessages.querySelectorAll('.message').length;
+                const messageCountSpan = document.getElementById('message-count');
+                if (messageCountSpan) {
+                    messageCountSpan.textContent = messageCount;
+                }
+            }
+        }
+
+        // Add file to Spec Repository file list
+        function addFileToRepository(filename, filesize) {
+            const repoDetails = document.getElementById('repository-details');
+            if (!repoDetails) {
+                console.log('repository-details not found');
+                return;
+            }
+
+            // Find the file list container (the div with gray background)
+            const fileListContainer = repoDetails.querySelector('div[style*="background: #f8fafc"]');
+            if (!fileListContainer) {
+                console.log('file list container not found');
+                return;
+            }
+
+            // Check if file already exists in the list
+            const existingFiles = fileListContainer.querySelectorAll('div[style*="display: flex"]');
+            for (var i = 0; i < existingFiles.length; i++) {
+                if (existingFiles[i].textContent.includes(filename)) {
+                    console.log('File already exists: ' + filename);
+                    return; // File already exists, don't add duplicate
+                }
+            }
+
+            // Create new file entry
+            const fileEntry = document.createElement('div');
+            fileEntry.style.cssText = 'display: flex; justify-content: space-between; padding: 0.25rem 0; color: #64748b;';
+
+            // Make rfe.md and spec.md clickable
+            var filenameHtml = filename;
+            if (filename === 'rfe.md') {
+                filenameHtml = '<a href="#" onclick="viewRFEContent(); return false;" style="color: #64748b; text-decoration: none; cursor: pointer;">' + filename + '</a>';
+            } else if (filename === 'spec.md') {
+                filenameHtml = '<a href="#" onclick="viewSpecContent(); return false;" style="color: #64748b; text-decoration: none; cursor: pointer;">' + filename + '</a>';
+            }
+
+            fileEntry.innerHTML = '<span>' + filenameHtml + '</span><span>' + filesize + '</span>';
+
+            // Find the LICENSE file (first non-directory file) and insert before it
+            var insertBeforeElement = null;
+            var allDivs = fileListContainer.querySelectorAll('div[style*="display: flex"]');
+            for (var j = 0; j < allDivs.length; j++) {
+                var spanText = allDivs[j].querySelector('span').textContent;
+                if (spanText === 'LICENSE' || (spanText.indexOf('/') === -1 && spanText.indexOf('.') !== -1)) {
+                    insertBeforeElement = allDivs[j];
+                    break;
+                }
+            }
+
+            if (insertBeforeElement) {
+                fileListContainer.insertBefore(fileEntry, insertBeforeElement);
+            } else {
+                fileListContainer.appendChild(fileEntry);
+            }
+
+            console.log('Added file to repository: ' + filename);
+        }
+
+        // Add result to Results accordion
+        function addResultToAccordion(message) {
+            const resultsContent = document.getElementById('results-content');
+            if (resultsContent) {
+                // Check if "No results yet" message exists and remove it
+                const noResultsMsg = resultsContent.querySelector('div[style*="text-align: center"]');
+                if (noResultsMsg && noResultsMsg.textContent.trim() === 'No results yet') {
+                    resultsContent.innerHTML = '';
+                }
+
+                // Get or create the results list
+                let resultsList = resultsContent.querySelector('div[style*="padding: 1rem"]');
+                if (!resultsList) {
+                    resultsContent.innerHTML = '<div style="padding: 1rem; font-size: 0.875rem; color: #64748b;"></div>';
+                    resultsList = resultsContent.querySelector('div');
+                }
+
+                // Add new result item with clickable filename
+                const resultItem = document.createElement('div');
+                resultItem.style.cssText = 'margin-bottom: 0.5rem;';
+
+                // Make rfe.md or spec.md clickable
+                var messageWithLink = message;
+                if (message.includes('rfe.md')) {
+                    messageWithLink = message.replace('rfe.md', '<a href="#" onclick="viewRFEContent(); return false;" style="color: #1e40af; text-decoration: underline; cursor: pointer;">rfe.md</a>');
+                } else if (message.includes('spec.md')) {
+                    messageWithLink = message.replace('spec.md', '<a href="#" onclick="viewSpecContent(); return false;" style="color: #1e40af; text-decoration: underline; cursor: pointer;">spec.md</a>');
+                }
+
+                resultItem.innerHTML = '✅ ' + messageWithLink;
+                resultsList.appendChild(resultItem);
+            }
+        }
+
+        // Copy RFE content to clipboard
+        function copyRFEContent() {
+            const rfeContent = document.getElementById('rfe-content').textContent;
+            navigator.clipboard.writeText(rfeContent).then(function() {
+                alert('RFE content copied to clipboard!');
+            }).catch(function(err) {
+                console.error('Failed to copy: ', err);
+            });
+        }
+
+        // View RFE content in new window or modal
+        function viewRFEContent() {
+            const rfeContent = document.getElementById('rfe-content').textContent;
+            const newWindow = window.open('', 'RFE Content', 'width=800,height=600');
+            newWindow.document.write('<html><head><title>RFE Content</title>');
+            newWindow.document.write('<style>body { font-family: monospace; white-space: pre-wrap; padding: 2rem; }</style>');
+            newWindow.document.write('</head><body>');
+            newWindow.document.write(rfeContent);
+            newWindow.document.write('</body></html>');
+            newWindow.document.close();
+        }
+
+        // Run /specify command
+        function runSpecifyCommand() {
+            const chatMessages = document.getElementById('chat-messages');
+
+            // Get selected agents
+            const selectedAgents = [];
+            const agentCheckboxes = document.querySelectorAll('#agents-list input[type="checkbox"]:not(#dynamic-agent-selection)');
+            agentCheckboxes.forEach(function(checkbox) {
+                if (checkbox.checked) {
+                    const label = checkbox.parentElement.querySelector('span');
+                    const agentText = label.textContent;
+                    const agentName = agentText.split(' - ')[0];
+                    const agentRole = agentText.split(' - ')[1];
+                    selectedAgents.push({ name: agentName, role: agentRole });
+                }
+            });
+
+            // Show system message about collaboration
+            const systemMessage = document.createElement('div');
+            systemMessage.style.cssText = 'text-align: center; padding: 0.5rem; margin: 1rem 0;';
+            systemMessage.innerHTML =
+                '<div style="display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #64748b;">' +
+                    'Selected agents are collaborating on a spec.md file based on the associated repositories and provided context.' +
+                '</div>';
+
+            chatMessages.appendChild(systemMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Show agent contributions if there are selected agents
+            if (selectedAgents.length > 0) {
+                showSpecifyAgentContributions(selectedAgents, 0, function() {
+                    // After all agents have contributed, show spec content
+                    showSpecContent();
+                });
+            } else {
+                // No agents selected, just show spec content
+                setTimeout(function() {
+                    showSpecContent();
+                }, 500);
+            }
+        }
+
+        // Show agent contributions for /specify command
+        function showSpecifyAgentContributions(agents, index, callback) {
+            if (index >= agents.length) {
+                callback();
+                return;
+            }
+
+            const agent = agents[index];
+            const chatMessages = document.getElementById('chat-messages');
+
+            setTimeout(function() {
+                const agentMessage = document.createElement('div');
+                agentMessage.className = 'message';
+                agentMessage.innerHTML =
+                    '<div class="message-avatar" style="background: #10b981; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.875rem; flex-shrink: 0;">' + agent.name.substring(0, 2).toUpperCase() + '</div>' +
+                    '<div class="message-content" style="flex: 1; background: #f0fdf4; padding: 0.75rem; border-radius: 0.5rem;">' +
+                        '<div class="message-header">' + agent.name + ' (' + agent.role + ')</div>' +
+                        '<div id="spec-agent-' + index + '-message"></div>' +
+                    '</div>';
+
+                chatMessages.appendChild(agentMessage);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                // Update message count
+                updateMessageCount();
+
+                // Type out agent's contribution for spec
+                const messageElement = document.getElementById('spec-agent-' + index + '-message');
+                const contributions = {
+                    'Archie': 'I will define the technical architecture and system components for the specification.',
+                    'Aria': 'I will map out the complete user journey and interaction patterns.',
+                    'Parker': 'I will ensure the spec aligns with product strategy and market needs.',
+                    'Uma': 'I will establish design standards and component specifications.',
+                    'Felix': 'I will detail the accessibility requirements and component behavior.',
+                    'Steve': 'I will specify the visual design requirements and interface patterns.',
+                    'Ryan': 'I will incorporate user research findings into the requirements.',
+                    'Olivia': 'I will define clear acceptance criteria for each requirement.',
+                    'Emma': 'I will ensure the spec is technically feasible and resource-appropriate.',
+                    'Lee': 'I will break down the requirements into implementable components.',
+                    'Taylor': 'I will review the spec for implementation clarity and practicality.',
+                    'Stella': 'I will validate the technical approach and identify potential issues.',
+                    'Diego': 'I will outline the documentation requirements for this feature.',
+                    'Terry': 'I will ensure user documentation needs are captured in the spec.',
+                    'Tessa': 'I will define content structure and information architecture needs.',
+                    'Casey': 'I will specify the content strategy and taxonomy requirements.',
+                    'Dan': 'I will validate alignment with strategic business objectives.',
+                    'Sam': 'I will ensure the spec supports our agile development process.',
+                    'Jack': 'I will identify dependencies and delivery milestones.',
+                    'Phoenix': 'I will assess upgrade impact and customer migration paths.',
+                    'Neil': 'I will define testing requirements and quality criteria.'
+                };
+
+                const contribution = contributions[agent.name] || 'I will contribute my expertise as ' + agent.role + ' to this specification.';
+
+                typeMessage(messageElement, contribution, 10, function() {
+                    // Move to next agent
+                    showSpecifyAgentContributions(agents, index + 1, callback);
+                });
+            }, 300);
+        }
+
+        // Show spec content
+        function showSpecContent() {
+            const chatMessages = document.getElementById('chat-messages');
+
+            const specMessage = document.createElement('div');
+            specMessage.className = 'message';
+            specMessage.innerHTML =
+                '<div class="message-avatar ai-avatar">ACP</div>' +
+                '<div class="message-content">' +
+                    '<div class="message-header">ACP</div>' +
+                    '<div id="spec-content" style="white-space: pre-wrap; font-family: monospace; font-size: 0.875rem;"></div>' +
+                    '<div id="spec-actions" style="display: none; margin-top: 1rem; display: flex; gap: 0.5rem;"></div>' +
+                '</div>';
+
+            chatMessages.appendChild(specMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Update message count
+            updateMessageCount();
+
+            // Type out the spec content
+            const specContentElement = document.getElementById('spec-content');
+            var specContent = '# Feature Specification: RHOAI 3.0 Dashboard Redesign\n\n' +
+'## Overview\n\n' +
+'This specification defines the requirements for redesigning the Red Hat OpenShift AI (RHOAI) 3.0 dashboard to improve model discovery and deployment workflows for AI Platform Engineers.\n\n' +
+'## User Stories\n\n' +
+'### Primary User Story\n' +
+'As an AI Platform Engineer, I want to quickly find and evaluate production-ready AI models so that I can make informed deployment decisions without cognitive overload.\n\n' +
+'### Supporting User Stories\n' +
+'- As a user, I want to filter models by performance metrics so that I can find models that meet my latency requirements.\n' +
+'- As a user, I want to compare multiple models side-by-side so that I can make data-driven selection decisions.\n' +
+'- As a user, I want visual representations of model performance so that I can quickly assess model capabilities.\n' +
+'- As a user, I want AI-powered recommendations so that I can discover relevant models I might have missed.\n\n' +
+'## Functional Requirements\n\n' +
+'### FR-1: Advanced Model Filtering\n' +
+'The system shall provide interactive filtering capabilities including:\n' +
+'- Latency range slider with real-time results\n' +
+'- Cost threshold controls with budget indicators\n' +
+'- Hardware compatibility selection\n' +
+'- Use case category filtering\n' +
+'- Multi-criteria combination support\n\n' +
+'### FR-2: Model Comparison Interface\n' +
+'The system shall enable users to:\n' +
+'- Select up to 4 models for comparison\n' +
+'- View side-by-side performance metrics\n' +
+'- Compare deployment requirements\n' +
+'- Export comparison data\n\n' +
+'### FR-3: Visual Data Representation\n' +
+'The system shall display:\n' +
+'- Performance radar charts for model capabilities\n' +
+'- Compatibility matrices with visual indicators\n' +
+'- Cost visualization with budget tracking\n' +
+'- Deployment status with real-time updates\n\n' +
+'### FR-4: AI Recommendations\n' +
+'The system shall provide:\n' +
+'- Context-aware model suggestions\n' +
+'- Confidence scores for recommendations\n' +
+'- Reasoning explanations for suggestions\n' +
+'- Learning from user selections\n\n' +
+'## Non-Functional Requirements\n\n' +
+'### NFR-1: Performance\n' +
+'- Initial page load: < 2 seconds\n' +
+'- Filter response time: < 300ms\n' +
+'- Support 5000+ models without degradation\n\n' +
+'### NFR-2: Accessibility\n' +
+'- WCAG 2.1 AA compliance required\n' +
+'- Keyboard navigation for all features\n' +
+'- Screen reader support with ARIA labels\n' +
+'- High contrast mode support\n\n' +
+'### NFR-3: Usability\n' +
+'- 60% reduction in model discovery time\n' +
+'- 4.5/5 minimum user satisfaction score\n' +
+'- 80% feature adoption rate\n\n' +
+'## Technical Specifications\n\n' +
+'### Technology Stack\n' +
+'- Frontend: React 18+ with TypeScript\n' +
+'- UI Framework: PatternFly React components\n' +
+'- Charts: Recharts library\n' +
+'- State Management: React Context API\n' +
+'- Build Tool: Webpack 5\n\n' +
+'### Browser Support\n' +
+'- Chrome/Edge: Latest 2 versions\n' +
+'- Firefox: Latest 2 versions\n' +
+'- Safari: Latest 2 versions\n\n' +
+'## Acceptance Criteria\n\n' +
+'### AC-1: Filter Functionality\n' +
+'Given a user on the dashboard\n' +
+'When they adjust filter controls\n' +
+'Then results update within 300ms\n' +
+'And filter state persists across sessions\n\n' +
+'### AC-2: Model Comparison\n' +
+'Given a user has selected multiple models\n' +
+'When they click compare\n' +
+'Then a side-by-side view displays all metrics\n' +
+'And they can export the comparison as PDF or CSV\n\n' +
+'### AC-3: Accessibility Compliance\n' +
+'Given any dashboard feature\n' +
+'When tested with accessibility tools\n' +
+'Then it passes WCAG 2.1 AA compliance\n' +
+'And all interactions work via keyboard\n\n' +
+'## Dependencies\n' +
+'- Backend API for model metadata\n' +
+'- Real-time metrics streaming service\n' +
+'- Authentication and authorization system\n' +
+'- Analytics and telemetry infrastructure';
+
+            typeMessage(specContentElement, specContent, 5, function() {
+                // Scroll to bottom after typing completes
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                // Show action buttons
+                const actionsDiv = document.getElementById('spec-actions');
+                if (actionsDiv) {
+                    actionsDiv.style.display = 'flex';
+                    actionsDiv.innerHTML =
+                        '<button onclick="copySpecContent()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">' +
+                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">' +
+                                '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>' +
+                                '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>' +
+                            '</svg>' +
+                            'Copy' +
+                        '</button>' +
+                        '<button onclick="viewSpecContent()" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">' +
+                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">' +
+                                '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>' +
+                                '<circle cx="12" cy="12" r="3"/>' +
+                            '</svg>' +
+                            'View' +
+                        '</button>';
+                }
+
+                // Add result to Results accordion
+                addResultToAccordion('spec.md was created');
+
+                // Add file to repository file list
+                addFileToRepository('spec.md', '8.7K');
+            });
+        }
+
+        // Copy spec content to clipboard
+        function copySpecContent() {
+            const specContent = document.getElementById('spec-content').textContent;
+            navigator.clipboard.writeText(specContent).then(function() {
+                alert('Spec content copied to clipboard!');
+            }).catch(function(err) {
+                console.error('Failed to copy: ', err);
+            });
+        }
+
+        // View spec content in new window
+        function viewSpecContent() {
+            const specContent = document.getElementById('spec-content').textContent;
+            const newWindow = window.open('', 'Spec Content', 'width=800,height=600');
+            newWindow.document.write('<html><head><title>Spec Content</title>');
+            newWindow.document.write('<style>body { font-family: monospace; white-space: pre-wrap; padding: 2rem; }</style>');
+            newWindow.document.write('</head><body>');
+            newWindow.document.write(specContent);
+            newWindow.document.write('</body></html>');
+            newWindow.document.close();
+        }
+
+        // View session prompt in new window
+        function viewSessionPrompt() {
+            var promptContent = 'IMPORTANT: The result of this interactive chat session MUST produce rfe.md at the workspace root. The rfe.md should be formatted as markdown in the following way:\n\n' +
+'# Feature Title\n\n' +
+'**Feature Overview:**  \n' +
+'*An elevator pitch (value statement) that describes the Feature in a clear, concise way. ie: Executive Summary of the user goal or problem that is being solved, why does this matter to the user? The "What & Why"...* \n\n' +
+'* Text\n\n' +
+'**Goals:**\n\n' +
+'*Provide high-level goal statement, providing user context and expected user outcome(s) for this Feature. Who benefits from this Feature, and how? What is the difference between today\'s current state and a world with this Feature?*\n\n' +
+'* Text\n\n' +
+'**Out of Scope:**\n\n' +
+'*High-level list of items or personas that are out of scope.*\n\n' +
+'* Text\n\n' +
+'**Requirements:**\n\n' +
+'*A list of specific needs, capabilities, or objectives that a Feature must deliver to satisfy the Feature. Some requirements will be flagged as MVP. If an MVP gets shifted, the Feature shifts. If a non MVP requirement slips, it does not shift the feature.*\n\n' +
+'* Text\n\n' +
+'**Done - Acceptance Criteria:**\n\n' +
+'*Acceptance Criteria articulates and defines the value proposition - what is required to meet the goal and intent of this Feature. The Acceptance Criteria provides a detailed definition of scope and the expected outcomes - from a users point of view*\n\n' +
+'* Text\n\n' +
+'**Use Cases - i.e. User Experience & Workflow:**\n\n' +
+'*Include use case diagrams, main success scenarios, alternative flow scenarios.*\n\n' +
+'* Text\n\n' +
+'**Documentation Considerations:**\n\n' +
+'*Provide information that needs to be considered and planned so that documentation will meet customer needs. If the feature extends existing functionality, provide a link to its current documentation..*\n\n' +
+'* Text\n\n' +
+'**Questions to answer:**\n\n' +
+'*Include a list of refinement / architectural questions that may need to be answered before coding can begin.*\n\n' +
+'* Text\n\n' +
+'**Background & Strategic Fit:**\n\n' +
+'*Provide any additional context is needed to frame the feature.*\n\n' +
+'* Text\n\n' +
+'**Customer Considerations**\n\n' +
+'*Provide any additional customer-specific considerations that must be made when designing and delivering the Feature.*\n\n' +
+'* Text';
+
+            const newWindow = window.open('', 'Session Prompt', 'width=800,height=600');
+            newWindow.document.write('<html><head><title>Session Prompt</title>');
+            newWindow.document.write('<style>body { font-family: monospace; white-space: pre-wrap; padding: 2rem; }</style>');
+            newWindow.document.write('</head><body>');
+            newWindow.document.write(promptContent);
+            newWindow.document.write('</body></html>');
+            newWindow.document.close();
+        }
+
+        // Handle Enter key press in chat input
+        function handleKeyPress(event) {
+            if (event.key === 'Enter' || event.keyCode === 13) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+
+        // Send user message to chat
+        function sendMessage() {
+            var inputField = document.getElementById('chat-input-field');
+            var messageText = inputField.value.trim();
+
+            // Don't send empty messages
+            if (!messageText) {
+                return;
+            }
+
+            var chatMessages = document.getElementById('chat-messages');
+
+            // Create user message element
+            var userMessage = document.createElement('div');
+            userMessage.className = 'message';
+            userMessage.innerHTML =
+                '<div class="message-avatar user-avatar">DU</div>' +
+                '<div class="message-content">' +
+                    '<div class="message-header">demo-user@redhat.com</div>' +
+                    '<div>' + escapeHtml(messageText) + '</div>' +
+                '</div>';
+
+            chatMessages.appendChild(userMessage);
+
+            // Update message count
+            updateMessageCount();
+
+            // Clear input field
+            inputField.value = '';
+
+            // Scroll to bottom of chat
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // ACP responds after a short delay
+            setTimeout(function() {
+                showACPResponse(messageText);
+            }, 800);
+        }
+
+        // Update agent count badge
+        function updateAgentCountBadge() {
+            var agentCheckboxes = document.querySelectorAll('#agents-list input[type="checkbox"]:not(#dynamic-agent-selection)');
+            var checkedCount = 0;
+
+            agentCheckboxes.forEach(function(checkbox) {
+                if (checkbox.checked) {
+                    checkedCount++;
+                }
+            });
+
+            var badge = document.getElementById('agents-count-badge');
+            if (badge) {
+                badge.textContent = checkedCount;
+                if (checkedCount > 0) {
+                    badge.style.display = 'inline-block';
+                } else {
+                    badge.style.display = 'none';
+                }
+            }
+        }
+
+        // Add agent to session
+        function addAgentToSession(agentName) {
+            var chatMessages = document.getElementById('chat-messages');
+
+            // Find and check the agent's checkbox in the accordion
+            var agentCheckboxes = document.querySelectorAll('#agents-list input[type="checkbox"]:not(#dynamic-agent-selection)');
+            var agentInfo = null;
+
+            agentCheckboxes.forEach(function(checkbox) {
+                var label = checkbox.parentElement.querySelector('span');
+                var agentText = label.textContent;
+                var name = agentText.split(' - ')[0].trim();
+                var role = agentText.split(' - ')[1].trim();
+
+                if (name.toLowerCase() === agentName.toLowerCase()) {
+                    checkbox.checked = true;
+                    agentInfo = { name: name, role: role };
+                }
+            });
+
+            if (!agentInfo) {
+                // Agent not found
+                return;
+            }
+
+            // Update agent count badge
+            updateAgentCountBadge();
+
+            // Show system message about agent being added
+            var systemMessage = document.createElement('div');
+            systemMessage.style.cssText = 'text-align: center; padding: 0.5rem; margin: 1rem 0;';
+            systemMessage.innerHTML =
+                '<div style="display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; color: #64748b;">' +
+                    agentInfo.name + ' has been added to the session' +
+                '</div>';
+            chatMessages.appendChild(systemMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Show agent participation message after a delay
+            setTimeout(function() {
+                showAgentParticipation(agentInfo);
+            }, 800);
+        }
+
+        // Show agent participation message
+        function showAgentParticipation(agent) {
+            var chatMessages = document.getElementById('chat-messages');
+
+            var agentMessage = document.createElement('div');
+            agentMessage.className = 'message';
+            agentMessage.innerHTML =
+                '<div class="message-avatar" style="background: #10b981; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.875rem; flex-shrink: 0;">' + agent.name.substring(0, 2).toUpperCase() + '</div>' +
+                '<div class="message-content" style="flex: 1; background: #f0fdf4; padding: 0.75rem; border-radius: 0.5rem;">' +
+                    '<div class="message-header">' + agent.name + ' (' + agent.role + ')</div>' +
+                    '<div id="agent-participation-' + agent.name + '"></div>' +
+                '</div>';
+
+            chatMessages.appendChild(agentMessage);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Update message count
+            updateMessageCount();
+
+            // Agent participation messages
+            var participationMessages = {
+                'Archie': 'I\'m ready to provide architectural guidance and technical leadership.',
+                'Aria': 'I\'ll help with user experience strategy and journey mapping.',
+                'Casey': 'I can assist with content strategy and information architecture.',
+                'Dan': 'I\'m here to ensure alignment with strategic business objectives.',
+                'Diego': 'I\'ll manage the documentation roadmap and coordinate content strategy.',
+                'Emma': 'I\'m ready to coordinate the team and balance technical excellence with delivery.',
+                'Felix': 'I can help with component design and accessibility implementation.',
+                'Jack': 'I\'ll track dependencies and manage delivery milestones.',
+                'Lee': 'I\'m here to facilitate sprint planning and coordinate technical work.',
+                'Neil': 'I\'ll ensure testability and verify implementation matches requirements.',
+                'Olivia': 'I can define acceptance criteria and prioritize features.',
+                'Parker': 'I\'m ready to align this work with product strategy and market needs.',
+                'Phoenix': 'I\'ll assess customer impact and plan for smooth upgrade paths.',
+                'Ryan': 'I can provide user research insights and validate design decisions.',
+                'Sam': 'I\'m here to facilitate the agile process and remove impediments.',
+                'Stella': 'I\'ll provide technical leadership and bridge architecture to implementation.',
+                'Steve': 'I can create visual designs and prototypes.',
+                'Taylor': 'I\'m ready to focus on pragmatic implementation and code quality.',
+                'Terry': 'I\'ll create user-centered documentation for this work.',
+                'Tessa': 'I can coordinate documentation standards and content quality.',
+                'Uma': 'I\'m here to ensure design quality and maintain design system consistency.'
+            };
+
+            var message = participationMessages[agent.name] || 'I\'m ready to contribute my expertise to this session.';
+
+            // Type out the agent's participation message
+            var messageElement = document.getElementById('agent-participation-' + agent.name);
+            typeMessage(messageElement, message, 15, function() {
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            });
+        }
+
+        // Show ACP response message
+        function showACPResponse(userMessage) {
+            var chatMessages = document.getElementById('chat-messages');
+
+            // Check if user message contains agent mention (#AgentName)
+            var agentMatch = userMessage.match(/#(\w+)/);
+            if (agentMatch) {
+                var agentName = agentMatch[1];
+                addAgentToSession(agentName);
+                return;
+            }
+
+            // Check if user message starts with /ideate
+            if (userMessage.toLowerCase().indexOf('/ideate') === 0) {
+                // Run the ideate command workflow
+                runIdeateCommand();
+                return;
+            }
+
+            // Check if user message starts with /specify
+            if (userMessage.toLowerCase().indexOf('/specify') === 0) {
+                // Run the specify command workflow
+                runSpecifyCommand();
+                return;
+            }
+
+            var responseText;
+
+            // Check if user message starts with /help
+            if (userMessage.toLowerCase().indexOf('/help') === 0) {
+                responseText = 'Get started by selecting a workflow. This will provide a structured process for agent collaboration.';
+            } else {
+                // Array of helpful responses
+                var responses = [
+                    'I understand. Let me help you with that.',
+                    'That\'s a great question. Based on the current workflow, I recommend starting with the ideate phase.',
+                    'I can assist with that. Would you like me to guide you through the process?',
+                    'Good thinking. Let\'s break that down into manageable steps.',
+                    'I\'m here to help. Let me know if you need any clarification on the workflow.',
+                    'That makes sense.',
+                    'Excellent. I can help coordinate the agents to work on that together.',
+                    'I see what you\'re asking. Let me provide some guidance on that.',
+                    'Understood.',
+                    'That\'s within scope.'
+                ];
+
+                // Pick a random response
+                var randomIndex = Math.floor(Math.random() * responses.length);
+                responseText = responses[randomIndex];
+            }
+
+            // Create unique ID for this response
+            var uniqueId = 'acp-response-' + Date.now();
+
+            // Create ACP message element
+            var acpMessage = document.createElement('div');
+            acpMessage.className = 'message';
+            acpMessage.innerHTML =
+                '<div class="message-avatar ai-avatar">ACP</div>' +
+                '<div class="message-content">' +
+                    '<div class="message-header">ACP</div>' +
+                    '<div id="' + uniqueId + '"></div>' +
+                '</div>';
+
+            chatMessages.appendChild(acpMessage);
+
+            // Update message count
+            updateMessageCount();
+
+            // Scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Type out the response
+            var responseElement = document.getElementById(uniqueId);
+            typeMessage(responseElement, responseText, 15, function() {
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            });
+        }
+
+        // Escape HTML to prevent XSS
+        function escapeHtml(text) {
+            var div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/sessions/page.html b/components/frontend/static-prototype/projects/sample-workspace/sessions/page.html
new file mode 100644
index 000000000..cf2dc0034
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/sessions/page.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sessions - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>Sessions</span>
+            </div>
+            <div class="page-header-content">
+                <div class="page-header-left">
+                    <h1 class="page-title">Agentic Sessions</h1>
+                    <p class="page-description">AI-powered coding sessions for your project</p>
+                </div>
+                <div class="page-actions">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 5v14"/>
+                            <path d="M5 12h14"/>
+                        </svg>
+                        New Session
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <ul>
+                    <li><a href="page.html" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="../page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9,22 9,12 15,12 15,22"/>
+                        </svg>
+                        Overview
+                    </a></li>
+                    <li><a href="../info/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 16v-4"/>
+                            <path d="M12 8h.01"/>
+                        </svg>
+                        Project Information
+                    </a></li>
+                    <li><a href="../rfe/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 3v12"/>
+                            <circle cx="18" cy="6" r="3"/>
+                            <circle cx="6" cy="15" r="3"/>
+                            <path d="M18 9a9 9 0 0 1-9 9"/>
+                        </svg>
+                        Workflows
+                    </a></li>
+                    <li><a href="../keys/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                        </svg>
+                        API Keys
+                    </a></li>
+                    <li><a href="../permissions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="../settings/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title">Agentic Sessions</h3>
+                    </div>
+                    <div class="card-content">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Session Name</th>
+                                    <th>Status</th>
+                                    <th>Model</th>
+                                    <th>Started</th>
+                                    <th>Duration</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">implement-login-flow</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Create user login and registration endpoints</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-success">Completed</span></td>
+                                    <td>claude-3.5-sonnet</td>
+                                    <td>4 hours ago</td>
+                                    <td>23 minutes</td>
+                                    <td>
+                                        <button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">View</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">setup-database</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Initialize PostgreSQL database with user tables</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-error">Failed</span></td>
+                                    <td>claude-3.5-sonnet</td>
+                                    <td>1 day ago</td>
+                                    <td>12 minutes</td>
+                                    <td>
+                                        <button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">View</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">create-api-tests</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Write comprehensive API tests for authentication endpoints</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-warning">Running</span></td>
+                                    <td>claude-3.5-sonnet</td>
+                                    <td>30 minutes ago</td>
+                                    <td>30 minutes</td>
+                                    <td>
+                                        <button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">View</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div>
+                                            <div style="font-weight: 500;">optimize-queries</div>
+                                            <div style="font-size: 0.875rem; color: #64748b;">Optimize database queries for better performance</div>
+                                        </div>
+                                    </td>
+                                    <td><span class="badge badge-info">Pending</span></td>
+                                    <td>claude-3.5-sonnet</td>
+                                    <td>-</td>
+                                    <td>-</td>
+                                    <td>
+                                        <button class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">Start</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/settings/page.html b/components/frontend/static-prototype/projects/sample-workspace/settings/page.html
new file mode 100644
index 000000000..46fad4db0
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/settings/page.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>Settings</span>
+            </div>
+            <div class="page-header-content">
+                <div class="page-header-left">
+                    <h1 class="page-title">Project Settings</h1>
+                    <p class="page-description">Configure project settings and preferences</p>
+                </div>
+                <div class="page-actions">
+                    <button class="btn btn-secondary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                            <path d="M3 21v-5h5"/>
+                        </svg>
+                        Refresh
+                    </button>
+                    <button class="btn btn-primary">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 5v14"/>
+                            <path d="M5 12h14"/>
+                        </svg>
+                        Save Settings
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <main class="container">
+        <div class="project-layout">
+            <aside class="project-sidebar">
+                <ul>
+                    <li><a href="../page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9,22 9,12 15,12 15,22"/>
+                        </svg>
+                        Overview
+                    </a></li>
+                    <li><a href="../info/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 16v-4"/>
+                            <path d="M12 8h.01"/>
+                        </svg>
+                        Project Information
+                    </a></li>
+                    <li><a href="../rfe/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 3v12"/>
+                            <circle cx="18" cy="6" r="3"/>
+                            <circle cx="6" cy="15" r="3"/>
+                            <path d="M18 9a9 9 0 0 1-9 9"/>
+                        </svg>
+                        Workflows
+                    </a></li>
+                    <li><a href="../sessions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Sessions
+                    </a></li>
+                    <li><a href="../keys/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                        </svg>
+                        API Keys
+                    </a></li>
+                    <li><a href="../permissions/page.html">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        Sharing
+                    </a></li>
+                    <li><a href="page.html" class="active">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        Settings
+                    </a></li>
+                </ul>
+            </aside>
+
+            <div class="main-content">
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title">General Settings</h3>
+                        <p class="card-description">Basic project configuration</p>
+                    </div>
+                    <div class="card-content">
+                        <form>
+                            <div class="form-group">
+                                <label class="form-label">Project Name</label>
+                                <input type="text" class="form-input" value="sample-workspace" readonly>
+                                <small style="color: #64748b; font-size: 0.875rem;">Project name cannot be changed after creation</small>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Display Name</label>
+                                <input type="text" class="form-input" value="Sample Project">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Description</label>
+                                <textarea class="form-input form-textarea">A sample project for demonstration purposes</textarea>
+                            </div>
+                            <button type="submit" class="btn btn-primary">Save Changes</button>
+                        </form>
+                    </div>
+                </div>
+
+                <div class="card" style="margin-top: 1.5rem;">
+                    <div class="card-header">
+                        <h3 class="card-title">Runner Secrets</h3>
+                        <p class="card-description">Configure the Secret and manage key/value pairs used by workspace runners.</p>
+                    </div>
+                    <div class="card-content">
+                        <form>
+                            <div class="form-group">
+                                <label class="form-label">Runner Secret</label>
+                                <select class="form-input">
+                                    <option value="ambient-runner-secret">using ambient-runner-secret</option>
+                                    <option value="create-new">create new runner secret</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label class="form-label">Anthropic API Key <span style="color: #dc2626;">*</span></label>
+                                <input type="password" class="form-input" placeholder="sk-ant-api03-..." required>
+                                <small style="color: #64748b; font-size: 0.875rem;">Required for running agentic sessions</small>
+                            </div>
+
+                            <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0;">
+                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                                    <h4 style="font-weight: 500; margin: 0;">Additional Secrets</h4>
+                                    <button type="button" class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M12 5v14"/>
+                                            <path d="M5 12h14"/>
+                                        </svg>
+                                        Add Secret
+                                    </button>
+                                </div>
+
+                                <div id="secrets-list">
+                                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: start;">
+                                        <div>
+                                            <input type="text" class="form-input" placeholder="Key" value="GITHUB_TOKEN">
+                                        </div>
+                                        <div>
+                                            <input type="password" class="form-input" placeholder="Value" value="ghp_xxxxxxxxxxxx">
+                                        </div>
+                                        <button type="button" style="background: none; border: none; cursor: pointer; padding: 0.5rem; color: #000000; margin-top: 0.125rem;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </div>
+
+                                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: start;">
+                                        <div>
+                                            <input type="text" class="form-input" placeholder="Key" value="DATABASE_URL">
+                                        </div>
+                                        <div>
+                                            <input type="password" class="form-input" placeholder="Value" value="postgresql://...">
+                                        </div>
+                                        <button type="button" style="background: none; border: none; cursor: pointer; padding: 0.5rem; color: #000000; margin-top: 0.125rem;">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 6h18"/>
+                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                                <line x1="10" y1="11" x2="10" y2="17"/>
+                                                <line x1="14" y1="11" x2="14" y2="17"/>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">Save Secrets</button>
+                        </form>
+                    </div>
+                </div>
+
+                <div class="card" style="margin-top: 1.5rem;">
+                    <div class="card-header">
+                        <h3 class="card-title">Resource Limits</h3>
+                        <p class="card-description">Configure resource limits for sessions and workspaces</p>
+                    </div>
+                    <div class="card-content">
+                        <form>
+                            <div class="form-group">
+                                <label class="form-label">Max Concurrent Sessions</label>
+                                <input type="number" class="form-input" value="5" min="1" max="20">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Max RFE Workspaces</label>
+                                <input type="number" class="form-input" value="10" min="1" max="50">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Storage Limit (GB)</label>
+                                <input type="number" class="form-input" value="50" min="1" max="500">
+                            </div>
+                            <button type="submit" class="btn btn-primary">Update Limits</button>
+                        </form>
+                    </div>
+                </div>
+
+                <div class="card" style="margin-top: 1.5rem; border-color: #fecaca;">
+                    <div class="card-header" style="background: #fef2f2; border-bottom-color: #fecaca;">
+                        <h3 class="card-title" style="color: #dc2626;">Danger Zone</h3>
+                        <p class="card-description" style="color: #991b1b;">Irreversible and destructive actions</p>
+                    </div>
+                    <div class="card-content">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                            <div>
+                                <div style="font-weight: 500; margin-bottom: 0.25rem;">Archive Project</div>
+                                <div style="color: #64748b; font-size: 0.875rem;">Archive this project to make it read-only</div>
+                            </div>
+                            <button class="btn btn-secondary">Archive</button>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #e2e8f0;">
+                            <div>
+                                <div style="font-weight: 500; margin-bottom: 0.25rem; color: #dc2626;">Delete Project</div>
+                                <div style="color: #64748b; font-size: 0.875rem;">Permanently delete this project and all its data</div>
+                            </div>
+                            <button class="btn btn-secondary" style="color: #dc2626; border-color: #dc2626;">Delete</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/projects/sample-workspace/setup-database/headless.html b/components/frontend/static-prototype/projects/sample-workspace/setup-database/headless.html
new file mode 100644
index 000000000..25f775a06
--- /dev/null
+++ b/components/frontend/static-prototype/projects/sample-workspace/setup-database/headless.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>setup-database - sample-workspace - Ambient Code Platform</title>
+    <link rel="stylesheet" href="../../../styles.css">
+    <style>
+        .session-container {
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+        
+        .log-container {
+            height: 60vh;
+            overflow-y: auto;
+            background: #1a1a1a;
+            color: #e5e5e5;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.4;
+        }
+        
+        .log-line {
+            padding: 0.25rem 1rem;
+            border-bottom: 1px solid #333;
+            white-space: pre-wrap;
+        }
+        
+        .log-timestamp {
+            color: #64748b;
+            margin-right: 0.5rem;
+        }
+        
+        .log-level-info {
+            color: #3b82f6;
+        }
+        
+        .log-level-success {
+            color: #10b981;
+        }
+        
+        .log-level-error {
+            color: #ef4444;
+        }
+        
+        .progress-bar {
+            background: #e2e8f0;
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 1rem;
+        }
+        
+        .progress-fill {
+            background: #10b981;
+            height: 100%;
+            width: 100%;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="../../../index.html" class="logo">Ambient Code Platform</a>
+                <div style="display: flex; align-items: center; gap: 2rem;">
+                    
+                    <div class="user-dropdown" style="position: relative;">
+                        <button onclick="toggleUserDropdown()" class="user-dropdown-trigger" style="display: flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.875rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s;">
+                            <div style="width: 24px; height: 24px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.75rem;">
+                                DU
+                            </div>
+                            <span>demo-user@redhat.com</span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s;" id="user-dropdown-arrow">
+                                <path d="M6 9l6 6 6-6"/>
+                            </svg>
+                        </button>
+                        <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 0.25rem;">
+                            <div style="padding: 0.75rem; border-bottom: 1px solid #e2e8f0;">
+                                <div style="font-weight: 500; color: #374151; font-size: 0.875rem;">demo-user@redhat.com</div>
+                                <div style="color: #64748b; font-size: 0.75rem;">Demo User</div>
+                            </div>
+                            <div style="padding: 0.25rem;">
+                                <a href="../../../integrations/page.html" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s; display: block; text-decoration: none;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem; vertical-align: middle;">
+                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                        <path d="M2 17l10 5 10-5"/>
+                                        <path d="M2 12l10 5 10-5"/>
+                                    </svg>
+                                    Integrations
+                                </a>
+                                <hr style="margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;">
+                                <button onclick="logout()" style="width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; color: #374151; font-size: 0.875rem; transition: background-color 0.2s;">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.5rem;">
+                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                        <polyline points="16,17 21,12 16,7"/>
+                                        <line x1="21" y1="12" x2="9" y2="12"/>
+                                    </svg>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="page-header">
+        <div class="container">
+            <div class="breadcrumbs">
+                <a href="../../../index.html">Workspaces</a>
+                <span>/</span>
+                <a href="../page.html">sample-workspace</a>
+                <span>/</span>
+                <span>setup-database</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <h1 class="page-title">Headless Session: setup-database</h1>
+                    <span class="badge badge-success" style="white-space: nowrap;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                            <path d="M20 6L9 17l-5-5"/>
+                        </svg>
+                        Completed
+                    </span>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                        </svg>
+                        Clone
+                    </button>
+                    <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7,10 12,15 17,10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Export
+                    </button>
+                </div>
+            </div>
+            <p class="page-description">Initialize PostgreSQL database with user tables • claude-3.5-sonnet • Completed 1 day ago</p>
+        </div>
+    </div>
+
+    <main class="container" style="margin-top: 2rem;">
+
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Session Configuration</h3>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Task:</strong> Initialize PostgreSQL database with user tables
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Model:</strong> claude-3.5-sonnet
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Mode:</strong> Headless
+                    </div>
+                    <div style="margin-bottom: 0.75rem;">
+                        <strong>Duration:</strong> 12 minutes
+                    </div>
+                    <div>
+                        <strong>Status:</strong> 
+                        <span class="badge badge-success" style="white-space: nowrap;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+                                <path d="M20 6L9 17l-5-5"/>
+                            </svg>
+                            Completed
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Results Summary</h3>
+                </div>
+                <div class="card-content">
+                    <div style="margin-bottom: 1rem;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                            <span>Overall Progress</span>
+                            <span style="font-weight: 500; color: #10b981;">100%</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
+                        </div>
+                    </div>
+                    <div style="font-size: 0.875rem; color: #64748b;">
+                        <div style="margin-bottom: 0.25rem;">✓ Database schema created</div>
+                        <div style="margin-bottom: 0.25rem;">✓ User table with constraints</div>
+                        <div style="margin-bottom: 0.25rem;">✓ Password hashing implemented</div>
+                        <div style="margin-bottom: 0.25rem;">✓ Migration scripts generated</div>
+                        <div>✓ Initial data seeded</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card" style="margin-top: 1.5rem;">
+            <div class="card-header">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h3 class="card-title">Execution Log</h3>
+                    <button class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7,10 12,15 17,10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Download
+                    </button>
+                </div>
+            </div>
+            <div class="card-content" style="padding: 0;">
+                <div class="log-container">
+                    <div class="log-line">
+                        <span class="log-timestamp">12:30:15</span>
+                        <span class="log-level-info">[INFO]</span> Session started: Initialize PostgreSQL database with user tables
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:30:16</span>
+                        <span class="log-level-info">[INFO]</span> Analyzing existing database structure
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:30:22</span>
+                        <span class="log-level-info">[INFO]</span> Creating users table schema
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:31:05</span>
+                        <span class="log-level-success">[SUCCESS]</span> Users table created with proper constraints
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:31:08</span>
+                        <span class="log-level-info">[INFO]</span> Adding password hashing utilities
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:31:45</span>
+                        <span class="log-level-success">[SUCCESS]</span> Password hashing implemented with bcrypt
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:32:12</span>
+                        <span class="log-level-info">[INFO]</span> Creating database migration scripts
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:33:01</span>
+                        <span class="log-level-success">[SUCCESS]</span> Migration scripts generated
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:33:15</span>
+                        <span class="log-level-info">[INFO]</span> Seeding initial user data
+                    </div>
+                    <div class="log-line">
+                        <span class="log-timestamp">12:33:28</span>
+                        <span class="log-level-success">[SUCCESS]</span> Database initialization completed successfully
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // User dropdown functionality
+        function toggleUserDropdown() {
+            const dropdown = document.getElementById('userDropdownMenu');
+            const arrow = document.getElementById('user-dropdown-arrow');
+            const isOpen = dropdown.style.display === 'block';
+            
+            if (isOpen) {
+                dropdown.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                dropdown.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function logout() {
+            // Close dropdown first
+            document.getElementById('userDropdownMenu').style.display = 'none';
+            document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            
+            // Simulate logout (in real app, this would redirect to login page)
+            alert('Logged out successfully!');
+        }
+
+        // Close dropdown when clicking outside of it
+        document.addEventListener('click', function(event) {
+            const dropdown = document.querySelector('.user-dropdown');
+            if (!dropdown.contains(event.target)) {
+                document.getElementById('userDropdownMenu').style.display = 'none';
+                document.getElementById('user-dropdown-arrow').style.transform = 'rotate(0deg)';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/components/frontend/static-prototype/rfe.md b/components/frontend/static-prototype/rfe.md
new file mode 100644
index 000000000..387d4720f
--- /dev/null
+++ b/components/frontend/static-prototype/rfe.md
@@ -0,0 +1,1092 @@
+# RFE: Visual Redesign of Red Hat OpenShift AI (RHOAI) 3.0 Dashboard
+
+## Executive Summary
+
+This Request for Enhancement (RFE) proposes three distinct visual redesign directions for the Red Hat OpenShift AI (RHOAI) 3.0 dashboard to address the core challenge faced by AI Platform Engineers like Paula: **efficiently finding and evaluating production-ready AI models among thousands of options**.
+
+The current dashboard, while functional, presents a traditional enterprise interface that doesn't leverage modern AI-centric design patterns or optimize for the unique workflows of AI practitioners. This redesign focuses on transforming the user experience from a data-heavy administrative interface to an intelligent, task-oriented platform that accelerates model discovery and deployment decisions.
+
+## Current State Analysis
+
+### Existing Architecture
+- **Framework**: React with TypeScript, PatternFly React components
+- **Navigation**: Traditional sidebar navigation with hierarchical structure
+- **Layout**: Standard enterprise dashboard with card-based model catalog
+- **Feature Management**: Comprehensive feature flag system supporting MVP mode vs full feature set
+- **Components**: Heavy use of PatternFly components (Cards, Tables, Forms, Modals, Dropdowns)
+
+### Current User Journey Pain Points
+1. **Cognitive Overload**: Thousands of models presented in basic card/table format
+2. **Inefficient Filtering**: Multiple separate filter interfaces without visual feedback
+3. **Limited Comparison**: No side-by-side model comparison capabilities
+4. **Static Information**: Performance metrics buried in text rather than visual indicators
+5. **Context Switching**: Frequent navigation between catalog, registry, and deployment sections
+
+### Technical Foundation
+- **PatternFly Integration**: Extensive use of existing components provides solid accessibility foundation
+- **Feature Flags**: Robust system for MVP/full feature mode switching
+- **State Management**: Context API for global state, component-level state for UI interactions
+- **Routing**: React Router with dynamic route generation based on feature flags
+
+## User Persona: Paula - AI Platform Engineer
+
+**Primary Goal**: Find production-ready AI models that balance performance, cost, and specific use case requirements
+
+**Key Workflows**:
+1. **Model Discovery**: Search through thousands of models using multiple criteria
+2. **Performance Evaluation**: Compare latency, throughput, accuracy, and resource requirements
+3. **Compatibility Assessment**: Verify model compatibility with existing infrastructure
+4. **Deployment Planning**: Understand deployment requirements and costs
+5. **Monitoring Setup**: Configure monitoring and alerting for deployed models
+
+**Success Metrics**:
+- Time to find relevant models reduced by 60%
+- Improved task completion rates for model selection workflows
+- Reduced cognitive load when comparing multiple models
+- Increased user satisfaction with filtering and search capabilities
+
+---
+
+# Design Direction 1: "AI-First Visual Intelligence"
+
+## Philosophy
+Treat AI models as visual, interactive objects rather than data rows. Transform the dashboard into an intelligent visual workspace where data visualization, interactive filtering, and AI-powered recommendations create an intuitive model discovery experience.
+
+## User Journey: Paula's Model Discovery Workflow
+
+### 1. Landing Experience
+Paula arrives at a **Visual Model Universe** - a dynamic, interactive visualization showing all available models as nodes in a network graph, clustered by use case, provider, and performance characteristics.
+
+### 2. Intelligent Filtering
+She uses **Visual Filter Sliders** to narrow down options:
+- Latency requirement: Drag slider to <100ms
+- Cost threshold: Visual budget indicator shows real-time cost implications
+- Hardware compatibility: Interactive hardware requirement visualization
+
+### 3. AI-Powered Recommendations
+The **Recommendation Engine** surfaces relevant models based on her query: "Customer service chatbot, production-ready, <100ms latency" with confidence scores and reasoning.
+
+### 4. Visual Comparison
+Paula selects 3-4 models for **Side-by-Side Visual Comparison** with interactive performance charts, compatibility matrices, and deployment requirement visualizations.
+
+### 5. Workflow Integration
+She connects her selected model to MCP servers and agents using the **Visual Workflow Builder** - a drag-and-drop interface showing data flow and dependencies.
+
+## Key UI Components
+
+### 1. Visual Model Universe
+```
+┌─────────────────────────────────────────────────────────┐
+│ ○ Interactive Network Graph                             │
+│   ├── Nodes: Models (size = popularity, color = type)  │
+│   ├── Clusters: Auto-grouped by ML similarity          │
+│   ├── Zoom/Pan: Smooth navigation with mini-map        │
+│   └── Search Overlay: Highlights matching nodes        │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 2. Smart Filter Panel
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🎛️ Visual Performance Sliders                          │
+│   ├── Latency: [====●----] <100ms (23 models)         │
+│   ├── Accuracy: [======●--] >95% (45 models)          │
+│   ├── Cost/Hour: [$●--------] <$2.50 (67 models)      │
+│   └── Hardware: [GPU Memory Visualization]             │
+│                                                         │
+│ 🎯 Use Case Tags (Visual Bubbles)                      │
+│   ├── [NLP] [Computer Vision] [Code Generation]        │
+│   └── [Multimodal] [Reasoning] [Translation]           │
+│                                                         │
+│ 🤖 AI Recommendations                                   │
+│   ├── "Based on your criteria, try granite-7b-code"    │
+│   └── Confidence: ████████░░ 85%                       │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 3. Enhanced Model Cards
+```
+┌─────────────────────────────────────────────────────────┐
+│ 📊 granite-7b-code:1.1                    [⭐ 4.8/5]   │
+│ ├── Performance Radar Chart                            │
+│ │   ├── Speed: ████████░░                             │
+│ │   ├── Accuracy: ██████░░░░                          │
+│ │   └── Efficiency: ████████░░                        │
+│ ├── Compatibility Badges                               │
+│ │   ├── ✅ CUDA 12.0  ✅ 16GB RAM  ⚠️ Requires A100    │
+│ ├── Live Deployment Status                             │
+│ │   └── 🟢 23 active deployments, avg 45ms latency     │
+│ └── Quick Actions: [Compare] [Deploy] [Details]        │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 4. Multi-Model Comparison View
+```
+┌─────────────────────────────────────────────────────────┐
+│ 📈 Performance Comparison (3 models selected)          │
+│ ├── Overlay Chart: Latency vs Accuracy                 │
+│ │   ├── Model A: ● (45ms, 94%)                        │
+│ │   ├── Model B: ● (78ms, 97%)                        │
+│ │   └── Model C: ● (23ms, 89%)                        │
+│ ├── Specification Matrix                               │
+│ │   ├──────────────┬─────────┬─────────┬─────────┐     │
+│ │   │ Metric       │ Model A │ Model B │ Model C │     │
+│ │   ├──────────────┼─────────┼─────────┼─────────┤     │
+│ │   │ Parameters   │ 7B      │ 13B     │ 3B      │     │
+│ │   │ Memory       │ 16GB    │ 32GB    │ 8GB     │     │
+│ │   │ Cost/Hour    │ $2.40   │ $4.80   │ $1.20   │     │
+│ │   └──────────────┴─────────┴─────────┴─────────┘     │
+│ └── Recommendation: Model C best for your use case     │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 5. Visual Workflow Builder
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🔄 AI Workflow Designer                                 │
+│ ├── [Model] ──→ [MCP Server] ──→ [Agent] ──→ [Output]  │
+│ │     │            │              │           │        │
+│ │   granite-7b   GitHub MCP    Customer     Response   │
+│ │                              Service                  │
+│ ├── Drag & Drop Components                              │
+│ ├── Real-time Validation                               │
+│ └── Performance Prediction: ~67ms end-to-end          │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Information Architecture
+
+```
+RHOAI Dashboard (AI-First Visual Intelligence)
+├── Visual Model Universe (landing page)
+│   ├── Interactive Network Graph (main visualization)
+│   ├── Smart Filter Panel (left sidebar)
+│   │   ├── Visual Performance Sliders
+│   │   ├── Use Case Tag Cloud
+│   │   └── AI Recommendation Engine
+│   ├── Model Detail Overlay (contextual)
+│   └── Quick Action Toolbar (bottom)
+├── Comparison Workspace
+│   ├── Multi-Model Performance Charts
+│   ├── Specification Matrix
+│   └── Deployment Cost Calculator
+├── Workflow Builder
+│   ├── Visual Pipeline Designer
+│   ├── Component Library
+│   └── Performance Simulator
+└── Deployment Dashboard
+    ├── Live Status Visualization
+    ├── Performance Monitoring Charts
+    └── Alert Management
+```
+
+## Visual Design Language
+
+### Color Palette
+- **Primary**: Deep Blue (#0066CC) - Trust, intelligence
+- **Secondary**: Vibrant Teal (#17A2B8) - Innovation, technology
+- **Accent**: Warm Orange (#FF6B35) - Energy, action
+- **Success**: Green (#28A745) - Deployed, healthy
+- **Warning**: Amber (#FFC107) - Attention needed
+- **Error**: Red (#DC3545) - Critical issues
+- **Neutral**: Grays (#F8F9FA to #343A40) - Background, text
+
+### Typography
+- **Headers**: Red Hat Display (Bold, 24-32px)
+- **Body**: Red Hat Text (Regular, 14-16px)
+- **Code/Metrics**: Red Hat Mono (Regular, 12-14px)
+- **Emphasis**: Red Hat Text (Medium, 16-18px)
+
+### Spacing & Layout
+- **Grid**: 8px base unit, 24px component spacing
+- **Cards**: 16px padding, 8px border radius, subtle shadows
+- **Interactive Elements**: 44px minimum touch target
+- **Whitespace**: Generous spacing for visual breathing room
+
+### Animation & Interaction
+- **Micro-interactions**: 200ms ease-in-out transitions
+- **Loading States**: Skeleton screens with shimmer effects
+- **Hover States**: Subtle elevation and color changes
+- **Focus States**: High-contrast outlines for accessibility
+
+## Technical Considerations
+
+### PatternFly Integration (80% Reuse Target)
+- **Reuse**: Card, Button, Form, Select, Modal, Tooltip, Progress, Label
+- **Extend**: Custom chart components using Recharts with PatternFly theming
+- **New Components**: 
+  - `ModelUniverseGraph` (D3.js-based network visualization)
+  - `VisualFilterPanel` (Custom sliders with real-time feedback)
+  - `ModelComparisonMatrix` (Interactive specification table)
+  - `WorkflowBuilder` (Drag-and-drop pipeline designer)
+  - `PerformanceRadarChart` (Model capability visualization)
+
+### React Architecture
+```
+src/
+├── components/
+│   ├── ai-hub/
+│   │   ├── ModelUniverse/
+│   │   │   ├── NetworkGraph.tsx
+│   │   │   ├── FilterPanel.tsx
+│   │   │   └── ModelCard.tsx
+│   │   ├── Comparison/
+│   │   │   ├── ComparisonView.tsx
+│   │   │   └── PerformanceChart.tsx
+│   │   └── Workflow/
+│   │       ├── WorkflowBuilder.tsx
+│   │       └── ComponentLibrary.tsx
+│   └── shared/
+│       ├── Charts/
+│       └── Visualizations/
+├── hooks/
+│   ├── useModelRecommendations.ts
+│   ├── useVisualFilters.ts
+│   └── useWorkflowValidation.ts
+└── utils/
+    ├── chartHelpers.ts
+    └── performanceCalculations.ts
+```
+
+### Performance Optimizations
+- **Virtual Scrolling**: React-window for large model lists (5,000+ items)
+- **Lazy Loading**: Code splitting for heavy visualization components
+- **Memoization**: React.memo for expensive chart re-renders
+- **Debouncing**: 300ms debounce for filter inputs
+- **Caching**: React Query with 5-minute cache for model data
+
+### Data Management
+- **GraphQL API**: Flexible queries for model metadata and performance metrics
+- **Real-time Updates**: WebSocket connections for live deployment status
+- **Optimistic Updates**: Immediate UI feedback for user actions
+- **Progressive Loading**: Initial 50 models, infinite scroll for more
+
+## Accessibility Features
+
+### Keyboard Navigation
+- **Tab Order**: Filter panel → Model cards → Action buttons → Comparison view
+- **Shortcuts**: 
+  - `/` to focus search
+  - `Cmd+K` for command palette
+  - `Escape` to close modals/overlays
+  - Arrow keys for graph navigation
+
+### Screen Reader Support
+- **ARIA Labels**: Comprehensive labeling for all interactive elements
+- **Live Regions**: Announce filter results and recommendations
+- **Alternative Text**: Detailed descriptions for all charts and visualizations
+- **Data Tables**: Accessible alternatives for all visual comparisons
+
+### Visual Accessibility
+- **High Contrast**: WCAG AA compliant color ratios (4.5:1 minimum)
+- **Focus Indicators**: 2px high-contrast outlines
+- **Text Scaling**: Support up to 200% zoom without horizontal scrolling
+- **Motion Reduction**: Respect `prefers-reduced-motion` settings
+
+## Mobile/Responsive Design
+
+### Breakpoints
+- **Mobile**: 320px - 767px (Stacked layout, touch-optimized)
+- **Tablet**: 768px - 1023px (Hybrid layout, collapsible panels)
+- **Desktop**: 1024px+ (Full layout, multi-panel views)
+
+### Mobile Adaptations
+- **Navigation**: Collapsible hamburger menu
+- **Filters**: Bottom sheet modal for filter panel
+- **Cards**: Full-width stacked layout
+- **Comparison**: Swipeable carousel for model comparison
+- **Touch Targets**: Minimum 44px for all interactive elements
+
+## Performance Impact Assessment
+
+### Rendering Optimizations
+- **Canvas Rendering**: Use HTML5 Canvas for network graphs with >1000 nodes
+- **WebGL**: Hardware acceleration for complex visualizations
+- **Virtual DOM**: Minimize re-renders with React.memo and useMemo
+- **Intersection Observer**: Lazy load off-screen model cards
+
+### Bundle Size Impact
+- **Estimated Addition**: +150KB gzipped for visualization libraries
+- **Code Splitting**: Lazy load heavy components (WorkflowBuilder, NetworkGraph)
+- **Tree Shaking**: Import only used chart components
+- **CDN Assets**: Serve large datasets from CDN with compression
+
+### Memory Management
+- **Cleanup**: Proper cleanup of D3.js event listeners and timers
+- **Garbage Collection**: Avoid memory leaks in long-running visualizations
+- **Data Pagination**: Limit in-memory model data to 500 items max
+
+---
+
+# Design Direction 2: "Enterprise Command Center"
+
+## Philosophy
+Transform the dashboard into a mission-critical control center optimized for power users who need dense information display, advanced filtering capabilities, and efficient bulk operations. Emphasize data density, customization, and keyboard-driven workflows.
+
+## User Journey: Paula's Power User Workflow
+
+### 1. Customizable Dashboard Landing
+Paula arrives at her **Personalized Command Center** with customizable widgets showing her most relevant data: recent deployments, model performance alerts, and saved filter sets.
+
+### 2. Advanced Search & Filtering
+She uses the **Command Palette** (Cmd+K) to quickly execute complex queries: "Show GPU models under $3/hour with >95% accuracy deployed in last 30 days"
+
+### 3. Bulk Operations
+Paula selects multiple models using **Batch Selection** and performs bulk actions: compare specifications, export data, or queue for deployment testing.
+
+### 4. Real-time Monitoring
+The **Live Monitoring Dashboard** shows real-time metrics for all deployed models with customizable alerts and drill-down capabilities.
+
+### 5. Efficient Navigation
+She navigates using **Keyboard Shortcuts** and **Breadcrumb Navigation** without touching the mouse, maintaining focus on critical tasks.
+
+## Key UI Components
+
+### 1. Customizable Dashboard Widgets
+```
+┌─────────────────────────────────────────────────────────┐
+│ 📊 Command Center Dashboard (Drag & Drop Layout)        │
+│ ├─────────────────┬─────────────────┬─────────────────┤ │
+│ │ 🎯 Quick Filters │ 📈 Performance  │ 🚨 Alerts       │ │
+│ │ ├─ Production    │ │ ┌─ Latency ──┐ │ │ ⚠️  Model A   │ │
+│ │ ├─ <100ms       │ │ │ ████████░░ │ │ │    High CPU   │ │
+│ │ ├─ GPU Ready    │ │ └─ Accuracy ─┘ │ │ 🔴 Model B    │ │
+│ │ └─ [23 models]  │ │               │ │    Offline    │ │
+│ ├─────────────────┼─────────────────┼─────────────────┤ │
+│ │ 📋 Recent Models│ 💰 Cost Monitor │ 🔧 Quick Actions│ │
+│ │ ├─ granite-7b   │ │ This Month:   │ │ ├─ Deploy     │ │
+│ │ ├─ llama-3.1    │ │ $2,847 / $5K  │ │ ├─ Compare    │ │
+│ │ └─ mistral-7b   │ │ ████████░░░░░ │ │ └─ Export     │ │
+│ └─────────────────┴─────────────────┴─────────────────┘ │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 2. Advanced Command Palette
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🔍 Command Palette (Cmd+K)                             │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ > deploy granite-7b to production                   │ │
+│ └─────────────────────────────────────────────────────┘ │
+│ 📋 Suggestions:                                         │
+│ ├── 🚀 Deploy model to production            Cmd+D     │
+│ ├── 📊 Compare selected models               Cmd+C     │
+│ ├── 📁 Export model specifications           Cmd+E     │
+│ ├── 🔍 Filter by latency <100ms             /lat<100  │
+│ ├── 📈 Show performance dashboard            Cmd+P     │
+│ └── ⚙️  Open model settings                  Cmd+,     │
+│                                                         │
+│ 🕐 Recent Actions:                                      │
+│ ├── Deployed llama-3.1-8b (2 min ago)                 │
+│ └── Compared 3 models (5 min ago)                      │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 3. Dense Information Table
+```
+┌─────────────────────────────────────────────────────────┐
+│ 📋 Model Registry (Advanced Table View)                │
+│ ├── 🔍 [Search] 🎛️ [Filters] 📊 [Columns] 💾 [Save]    │
+│ ├─────┬──────────────┬─────────┬─────────┬─────────────┤
+│ │ ☐   │ Model Name   │ Latency │ Accuracy│ Status      │
+│ ├─────┼──────────────┼─────────┼─────────┼─────────────┤
+│ │ ☑   │ granite-7b   │ 45ms ⚡ │ 94% ✅  │ 🟢 Active   │
+│ │ ☑   │ llama-3.1-8b │ 67ms    │ 96% ✅  │ 🟡 Warning │
+│ │ ☐   │ mistral-7b   │ 23ms ⚡ │ 89%     │ 🟢 Active   │
+│ │ ☐   │ gpt-oss-120b │ 156ms   │ 97% ✅  │ 🔴 Error    │
+│ ├─────┴──────────────┴─────────┴─────────┴─────────────┤
+│ │ 📊 Bulk Actions: [Compare] [Deploy] [Export] [Delete]│
+│ │ 📈 Selected: 2 models | Total: 1,247 models         │
+│ └─────────────────────────────────────────────────────┘
+└─────────────────────────────────────────────────────────┘
+```
+
+### 4. Multi-Panel Comparison View
+```
+┌─────────────────────────────────────────────────────────┐
+│ 📊 Split-Screen Comparison (2/3/4 panel layout)        │
+│ ├─────────────────────┬─────────────────────────────────┤
+│ │ 🏷️  granite-7b-code │ 🏷️  llama-3.1-8b-instruct     │
+│ │ ├─ Latency: 45ms    │ ├─ Latency: 67ms               │
+│ │ ├─ Accuracy: 94%    │ ├─ Accuracy: 96%               │
+│ │ ├─ Memory: 16GB     │ ├─ Memory: 24GB                │
+│ │ ├─ Cost: $2.40/hr   │ ├─ Cost: $3.60/hr              │
+│ │ └─ GPU: A100        │ └─ GPU: A100/H100              │
+│ ├─────────────────────┼─────────────────────────────────┤
+│ │ 📈 Performance Chart│ 📈 Performance Chart           │
+│ │ ┌─ Latency Trend ─┐ │ ┌─ Latency Trend ─────────────┐│
+│ │ │ ████████████░░░ │ │ │ ████████░░░░░░░░░░░░░░░░░░░ ││
+│ │ └─ Last 24h ──────┘ │ └─ Last 24h ──────────────────┘│
+│ └─────────────────────┴─────────────────────────────────┤
+│ 🔄 Sync Scroll: ☑ | Export: [PDF] [CSV] | Add Panel: +│
+└─────────────────────────────────────────────────────────┘
+```
+
+### 5. Real-Time Monitoring Dashboard
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🖥️  Live Deployment Monitor                            │
+│ ├─────────────────────┬─────────────────────────────────┤
+│ │ 🎯 Status Overview  │ 📊 Performance Metrics         │
+│ │ ├─ 🟢 Healthy: 23   │ ├─ Avg Latency: 67ms           │
+│ │ ├─ 🟡 Warning: 3    │ ├─ Throughput: 1.2K req/s      │
+│ │ ├─ 🔴 Critical: 1   │ ├─ Error Rate: 0.02%           │
+│ │ └─ 🔵 Total: 27     │ └─ SLA Compliance: 99.8%       │
+│ ├─────────────────────┴─────────────────────────────────┤
+│ │ 🚨 Active Alerts                                      │
+│ │ ├─ ⚠️  granite-7b: High CPU usage (85%)              │
+│ │ ├─ 🔴 llama-3.1: Connection timeout (3 failures)     │
+│ │ └─ 🟡 mistral-7b: Memory usage above threshold        │
+│ ├─────────────────────────────────────────────────────┤
+│ │ 📈 Historical Performance (Zoomable Timeline)        │
+│ │ ┌─ Response Time ─────────────────────────────────────┐│
+│ │ │     ╭─╮                                           ││
+│ │ │ ╭───╯ ╰─╮     ╭─╮                                ││
+│ │ │ ╯       ╰─────╯ ╰─╮                              ││
+│ │ │                   ╰──────────────────────────────││
+│ │ └─ 1h    6h    12h   24h   7d ──────────────────────┘│
+└─────────────────────────────────────────────────────────┘
+```
+
+## Information Architecture
+
+```
+RHOAI Dashboard (Enterprise Command Center)
+├── Customizable Dashboard (landing page)
+│   ├── Widget Grid (main content - drag-and-drop)
+│   │   ├── Model List Widget (configured queries)
+│   │   ├── Performance Charts Widget (selected models)
+│   │   ├── Deployment Status Widget (live monitoring)
+│   │   ├── Cost Monitor Widget (budget tracking)
+│   │   └── Quick Filters Widget (saved filter sets)
+│   ├── Top Toolbar
+│   │   ├── Command Palette (Cmd+K)
+│   │   ├── Search Bar (/ to focus)
+│   │   ├── Layout Selector (saved layouts dropdown)
+│   │   └── Settings (dashboard configuration)
+│   └── Status Bar (bottom)
+│       ├── System Status
+│       ├── Active Filters Count
+│       └── Keyboard Shortcuts Help
+├── Advanced Model Catalog
+│   ├── Dense Table View (default)
+│   │   ├── Sortable/Filterable Columns
+│   │   ├── Bulk Selection & Actions
+│   │   └── Inline Quick Actions
+│   ├── Saved Queries Sidebar
+│   │   ├── Predefined Filters
+│   │   ├── Custom Query Builder
+│   │   └── Recent Searches
+│   └── Export & Reporting
+│       ├── CSV/Excel Export
+│       ├── PDF Reports
+│       └── Scheduled Reports
+├── Multi-Panel Comparison
+│   ├── Split-Screen Layout (2/3/4 panels)
+│   ├── Synchronized Navigation
+│   ├── Diff Highlighting
+│   └── Export Comparison Reports
+└── Live Monitoring Center
+    ├── Real-time Metrics Dashboard
+    ├── Alert Management System
+    ├── Historical Performance Analytics
+    └── SLA Monitoring & Reporting
+```
+
+## Visual Design Language
+
+### Color Palette (Professional/High-Contrast)
+- **Primary**: Navy Blue (#1F2937) - Authority, reliability
+- **Secondary**: Steel Blue (#374151) - Professional, technical
+- **Accent**: Electric Blue (#3B82F6) - Action, focus
+- **Success**: Forest Green (#059669) - Healthy, operational
+- **Warning**: Amber (#D97706) - Attention, caution
+- **Error**: Crimson (#DC2626) - Critical, urgent
+- **Neutral**: Cool Grays (#F9FAFB to #111827) - Background hierarchy
+
+### Typography (Information Dense)
+- **Headers**: Red Hat Display (Bold, 18-24px) - Compact hierarchy
+- **Body**: Red Hat Text (Regular, 13-14px) - Dense readability
+- **Code/Data**: Red Hat Mono (Regular, 11-12px) - Technical precision
+- **Labels**: Red Hat Text (Medium, 12-13px) - Clear identification
+
+### Layout Principles
+- **Information Density**: Maximize data per screen real estate
+- **Scannable Hierarchy**: Clear visual hierarchy for rapid scanning
+- **Consistent Spacing**: 4px/8px grid for tight, organized layout
+- **Functional Grouping**: Related data clustered with subtle borders
+
+### Interaction Patterns
+- **Keyboard-First**: All actions accessible via keyboard shortcuts
+- **Hover Details**: Rich tooltips with additional context
+- **Contextual Menus**: Right-click menus for power user actions
+- **Bulk Operations**: Multi-select with batch action capabilities
+
+## Technical Considerations
+
+### PatternFly Integration (85% Reuse Target)
+- **Heavy Reuse**: Table, Toolbar, Dropdown, Modal, Form, Button, Card
+- **Enhanced Components**:
+  - `AdvancedTable` (sortable, filterable, bulk selection)
+  - `CommandPalette` (fuzzy search, keyboard navigation)
+  - `DashboardWidget` (drag-and-drop, resizable)
+  - `MultiPanelLayout` (split-screen comparison)
+  - `MonitoringChart` (real-time data visualization)
+
+### React Architecture
+```
+src/
+├── components/
+│   ├── command-center/
+│   │   ├── Dashboard/
+│   │   │   ├── DashboardGrid.tsx
+│   │   │   ├── Widget.tsx
+│   │   │   └── WidgetLibrary.tsx
+│   │   ├── CommandPalette/
+│   │   │   ├── CommandPalette.tsx
+│   │   │   └── CommandRegistry.ts
+│   │   ├── AdvancedTable/
+│   │   │   ├── DataTable.tsx
+│   │   │   ├── BulkActions.tsx
+│   │   │   └── ColumnManager.tsx
+│   │   └── Monitoring/
+│   │       ├── MetricsDashboard.tsx
+│   │       ├── AlertManager.tsx
+│   │       └── PerformanceChart.tsx
+│   └── shared/
+│       ├── KeyboardShortcuts/
+│       └── ExportManager/
+├── hooks/
+│   ├── useKeyboardShortcuts.ts
+│   ├── useBulkOperations.ts
+│   ├── useRealTimeMetrics.ts
+│   └── useDashboardLayout.ts
+└── utils/
+    ├── commandRegistry.ts
+    ├── exportHelpers.ts
+    └── keyboardNavigation.ts
+```
+
+### Performance Optimizations
+- **Virtual Scrolling**: Handle tables with 10,000+ rows efficiently
+- **Memoized Calculations**: Cache expensive sorting/filtering operations
+- **Debounced Updates**: 150ms debounce for real-time search
+- **Lazy Widget Loading**: Load dashboard widgets on demand
+- **Efficient Re-renders**: Minimize table re-renders with React.memo
+
+### Data Management
+- **Real-time WebSockets**: Live metrics and alert updates
+- **Optimistic UI**: Immediate feedback for bulk operations
+- **Background Sync**: Periodic data refresh without UI interruption
+- **Offline Capability**: Cache critical data for offline viewing
+
+## Accessibility Features
+
+### Keyboard Navigation Excellence
+- **Tab Order**: Logical flow through dense interface elements
+- **Shortcuts**: Comprehensive keyboard shortcuts for all actions
+  - `Cmd+K`: Command palette
+  - `Cmd+F`: Advanced search
+  - `Cmd+A`: Select all in current view
+  - `Space`: Toggle selection
+  - `Enter`: Execute primary action
+  - `Escape`: Cancel/close current operation
+
+### Screen Reader Optimization
+- **Table Navigation**: Proper table headers and navigation
+- **Live Regions**: Announce real-time updates and alerts
+- **Descriptive Labels**: Detailed ARIA labels for complex widgets
+- **Status Announcements**: Clear feedback for bulk operations
+
+### Visual Accessibility
+- **High Contrast Mode**: Enhanced contrast ratios (7:1 for text)
+- **Focus Management**: Clear focus indicators throughout interface
+- **Text Scaling**: Support 200% zoom with horizontal scrolling
+- **Color Independence**: Information conveyed beyond color alone
+
+## Mobile/Responsive Design
+
+### Responsive Strategy
+- **Desktop-First**: Optimized for desktop power users
+- **Tablet Adaptation**: Collapsible panels, touch-friendly controls
+- **Mobile Fallback**: Essential functions only, simplified interface
+
+### Mobile Adaptations
+- **Navigation**: Collapsible command center with essential widgets
+- **Tables**: Horizontal scroll with sticky columns
+- **Comparison**: Stacked layout with swipe navigation
+- **Monitoring**: Simplified metric cards with drill-down
+
+## Performance Impact Assessment
+
+### Rendering Performance
+- **Table Virtualization**: Handle large datasets without performance degradation
+- **Chart Optimization**: Canvas rendering for real-time metrics
+- **Memory Management**: Efficient cleanup of real-time subscriptions
+- **Bundle Splitting**: Lazy load monitoring and comparison components
+
+### Data Processing
+- **Client-side Filtering**: Fast filtering for large datasets
+- **Incremental Updates**: Efficient real-time data updates
+- **Background Processing**: Web Workers for heavy calculations
+- **Caching Strategy**: Intelligent caching for frequently accessed data
+
+---
+
+# Design Direction 3: "Conversational AI Assistant"
+
+## Philosophy
+Transform the primary interface into a natural language conversation where an AI assistant helps users discover, evaluate, and deploy models through intelligent dialogue. Minimize traditional UI elements in favor of contextual, conversation-driven interactions.
+
+## User Journey: Paula's Conversational Workflow
+
+### 1. Natural Language Query
+Paula starts with a conversational query: "I need a production-ready model for customer service chatbots that responds in under 100ms and costs less than $3 per hour"
+
+### 2. Intelligent Clarification
+The AI assistant asks clarifying questions: "What type of customer inquiries will this handle? Do you need multilingual support? Any specific compliance requirements?"
+
+### 3. Smart Recommendations
+Based on the conversation, the assistant presents 3-4 tailored recommendations with explanations: "Based on your requirements, I recommend granite-7b-code because it excels at structured responses with 45ms average latency..."
+
+### 4. Guided Comparison
+Paula asks: "How does granite-7b compare to llama-3.1 for my use case?" The assistant provides a contextual comparison with visual aids.
+
+### 5. Deployment Assistance
+The assistant guides through deployment: "I can help you deploy granite-7b. Would you like me to configure it for your customer service environment?"
+
+## Key UI Components
+
+### 1. Conversational Interface
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🤖 RHOAI Assistant                            🎤 🔊 ⚙️  │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ 👤 I need a production model for customer service   │ │
+│ │    chatbots under 100ms latency                     │ │
+│ └─────────────────────────────────────────────────────┘ │
+│                                                         │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ 🤖 I can help you find the perfect model! Let me    │ │
+│ │    ask a few questions to narrow down the options:  │ │
+│ │                                                     │ │
+│ │    • What type of customer inquiries? (FAQ, tech   │ │
+│ │      support, sales, etc.)                         │ │
+│ │    • Do you need multilingual support?             │ │
+│ │    • Any specific compliance requirements?          │ │
+│ │                                                     │ │
+│ │    💡 Quick suggestions:                           │ │
+│ │    [FAQ Support] [Tech Support] [Sales Inquiries]  │ │
+│ └─────────────────────────────────────────────────────┘ │
+│                                                         │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ Type your message... 🎤                            │ │
+│ └─────────────────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 2. Contextual Model Cards
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🤖 Based on your needs, here are my top 3 recommendations:│
+│                                                         │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ 🥇 granite-7b-code:1.1                    [Deploy] │ │
+│ │ ├── ⚡ 45ms avg latency (✅ meets your <100ms req)  │ │
+│ │ ├── 💰 $2.40/hour (✅ under your $3 budget)        │ │
+│ │ ├── 🎯 94% accuracy on customer service tasks       │ │
+│ │ ├── 🏆 Why I recommend this: Excellent balance of   │ │
+│ │ │   speed and accuracy, proven in production       │ │
+│ │ └── [Tell me more] [Compare with others] [Deploy]   │ │
+│ └─────────────────────────────────────────────────────┘ │
+│                                                         │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ 🥈 llama-3.1-8b-instruct                  [Deploy] │ │
+│ │ ├── ⚡ 67ms avg latency (✅ meets requirement)      │ │
+│ │ ├── 💰 $3.60/hour (⚠️ slightly over budget)        │ │
+│ │ ├── 🎯 96% accuracy (higher than granite-7b)       │ │
+│ │ └── 🏆 Why consider: Better accuracy, multilingual  │ │
+│ └─────────────────────────────────────────────────────┘ │
+│                                                         │
+│ 💬 Would you like me to explain why I ranked these     │
+│    models this way, or shall we dive deeper into one?  │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 3. Smart Comparison View
+```
+┌─────────────────────────────────────────────────────────┐
+│ 👤 "How does granite-7b compare to llama-3.1?"         │
+│                                                         │
+│ 🤖 Great question! Here's how they stack up for your   │
+│    customer service use case:                           │
+│                                                         │
+│ ┌─────────────────────┬─────────────────────────────────┤
+│ │ 🏷️  granite-7b-code │ 🏷️  llama-3.1-8b-instruct     │
+│ ├─────────────────────┼─────────────────────────────────┤
+│ │ ⚡ Speed: 45ms      │ ⚡ Speed: 67ms                  │
+│ │ 🎯 Accuracy: 94%    │ 🎯 Accuracy: 96%               │
+│ │ 💰 Cost: $2.40/hr   │ 💰 Cost: $3.60/hr              │
+│ │ 🌍 Languages: EN    │ 🌍 Languages: 50+              │
+│ │ 📊 Production: ✅   │ 📊 Production: ✅              │
+│ └─────────────────────┴─────────────────────────────────┘
+│                                                         │
+│ 💡 My recommendation: If you only need English and want │
+│    to stay under budget, go with granite-7b. If you    │
+│    might expand internationally or need the highest     │
+│    accuracy, llama-3.1 is worth the extra cost.        │
+│                                                         │
+│ 🎯 Quick actions:                                       │
+│ [Deploy granite-7b] [Deploy llama-3.1] [See more options]│
+└─────────────────────────────────────────────────────────┘
+```
+
+### 4. Guided Deployment Wizard
+```
+┌─────────────────────────────────────────────────────────┐
+│ 👤 "Let's deploy granite-7b for my customer service"    │
+│                                                         │
+│ 🤖 Perfect choice! I'll guide you through the setup.   │
+│    I've pre-configured everything based on our         │
+│    conversation:                                        │
+│                                                         │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ 🚀 Deployment Configuration                         │ │
+│ │ ├── Model: granite-7b-code:1.1                     │ │
+│ │ ├── Environment: Production                         │ │
+│ │ ├── Instance: A100 GPU (recommended for <100ms)    │ │
+│ │ ├── Scaling: Auto-scale 1-5 instances              │ │
+│ │ ├── Monitoring: Customer service metrics enabled   │ │
+│ │ └── Budget Alert: $3/hour threshold                 │ │
+│ └─────────────────────────────────────────────────────┘ │
+│                                                         │
+│ 💬 Everything look good? I can also:                   │
+│ • Set up A/B testing with llama-3.1                   │
+│ • Configure custom monitoring for your KPIs           │
+│ • Create alerts for latency spikes                    │
+│                                                         │
+│ [Deploy Now] [Customize Settings] [Schedule Deployment] │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 5. Voice Interface Integration
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🎤 Voice Assistant Active                    🔊 Speaking │
+│ ┌─────────────────────────────────────────────────────┐ │
+│ │ 🌊 ████████████████████████████████████████████████ │ │
+│ │    "Show me models with latency under fifty         │ │
+│ │     milliseconds for text generation"               │ │
+│ └─────────────────────────────────────────────────────┘ │
+│                                                         │
+│ 🤖 I found 12 models matching your criteria. The top   │
+│    performers are granite-7b at 45ms, mistral-7b at   │
+│    23ms, and claude-3-haiku at 38ms. Would you like    │
+│    me to show you the details or compare them?         │
+│                                                         │
+│ 🎯 Voice Commands:                                      │
+│ • "Show details" - Display model specifications        │
+│ • "Compare all three" - Side-by-side comparison        │
+│ • "Deploy granite" - Start deployment process          │
+│ • "Filter by cost" - Add cost filtering               │
+│                                                         │
+│ [🎤 Hold to Speak] [⌨️ Switch to Text] [🔇 Mute Voice] │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 6. Contextual Help & Learning
+```
+┌─────────────────────────────────────────────────────────┐
+│ 🤖 I notice you often look for models under 100ms      │
+│    latency. Here are some tips to help you find them   │
+│    faster:                                              │
+│                                                         │
+│ 💡 Pro Tips:                                           │
+│ • Use "fast models" as a shortcut for <100ms filter   │
+│ • Try "production ready + fast" for pre-vetted options│
+│ • Ask "what's the fastest model for [use case]"       │
+│                                                         │
+│ 📚 Would you like me to:                               │
+│ • Create a saved search for your common criteria?      │
+│ • Set up alerts for new fast models?                   │
+│ • Show you advanced filtering techniques?              │
+│                                                         │
+│ 🎯 Quick Actions:                                       │
+│ [Create Saved Search] [Set Up Alerts] [Learn More]     │
+│                                                         │
+│ 💬 You can also say things like:                       │
+│ • "Find me something like granite-7b but faster"       │
+│ • "What's new in the model catalog this week?"         │
+│ • "Help me optimize costs for my current deployments"  │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Information Architecture
+
+```
+RHOAI Dashboard (Conversational AI Assistant)
+├── Main Conversation Interface
+│   ├── Chat History (persistent, searchable)
+│   ├── Message Input (text + voice)
+│   ├── Quick Action Buttons (contextual)
+│   └── Voice Controls (always available)
+├── Contextual Overlays (triggered by conversation)
+│   ├── Model Detail Cards
+│   ├── Comparison Views
+│   ├── Deployment Wizards
+│   └── Performance Charts
+├── Smart Suggestions Panel (adaptive)
+│   ├── Conversation Starters
+│   ├── Follow-up Questions
+│   ├── Related Actions
+│   └── Learning Resources
+├── Traditional Fallback Navigation (collapsible)
+│   ├── Model Catalog (simplified)
+│   ├── Deployments (status only)
+│   └── Settings (voice preferences)
+└── Assistant Personality & Learning
+    ├── User Preference Learning
+    ├── Context Memory (session + long-term)
+    ├── Expertise Areas (model types, use cases)
+    └── Conversation History Analysis
+```
+
+## Visual Design Language
+
+### Color Palette (Conversational/Friendly)
+- **Primary**: Warm Blue (#2563EB) - Trustworthy, intelligent
+- **Secondary**: Soft Purple (#7C3AED) - Creative, innovative
+- **Accent**: Vibrant Green (#10B981) - Positive, helpful
+- **Assistant**: Cool Gray (#6B7280) - Neutral, professional
+- **User**: Warm Gray (#374151) - Personal, human
+- **Success**: Emerald (#059669) - Achievement, completion
+- **Warning**: Amber (#F59E0B) - Caution, attention
+- **Error**: Rose (#F43F5E) - Issues, problems
+
+### Typography (Conversational)
+- **Headers**: Red Hat Display (Medium, 20-28px) - Friendly authority
+- **Body/Chat**: Red Hat Text (Regular, 15-16px) - Readable conversation
+- **Assistant**: Red Hat Text (Regular, 15px) - Consistent, clear
+- **User**: Red Hat Text (Medium, 15px) - Slightly emphasized
+- **Code/Data**: Red Hat Mono (Regular, 13-14px) - Technical precision
+
+### Layout Principles
+- **Conversation Flow**: Chronological, chat-like interface
+- **Contextual Density**: Information appears when relevant
+- **Breathing Room**: Generous spacing for comfortable reading
+- **Focus Management**: Single conversation thread with contextual overlays
+
+### Interaction Patterns
+- **Natural Language**: Primary interaction through conversation
+- **Voice Integration**: Seamless voice input and output
+- **Contextual Actions**: Buttons appear based on conversation context
+- **Progressive Disclosure**: Information revealed as needed
+
+## Technical Considerations
+
+### PatternFly Integration (60% Reuse Target)
+- **Selective Reuse**: Card, Modal, Button, Form components for overlays
+- **Custom Components**:
+  - `ConversationInterface` (chat-like message flow)
+  - `VoiceInput` (speech recognition integration)
+  - `ContextualOverlay` (smart information display)
+  - `SmartSuggestions` (AI-powered recommendations)
+  - `ConversationMemory` (context persistence)
+
+### React Architecture
+```
+src/
+├── components/
+│   ├── conversation/
+│   │   ├── ChatInterface/
+│   │   │   ├── MessageThread.tsx
+│   │   │   ├── MessageInput.tsx
+│   │   │   └── VoiceControls.tsx
+│   │   ├── Assistant/
+│   │   │   ├── AIResponse.tsx
+│   │   │   ├── SmartSuggestions.tsx
+│   │   │   └── ContextualCards.tsx
+│   │   ├── Voice/
+│   │   │   ├── SpeechRecognition.tsx
+│   │   │   ├── TextToSpeech.tsx
+│   │   │   └── VoiceCommands.tsx
+│   │   └── Overlays/
+│   │       ├── ModelDetails.tsx
+│   │       ├── ComparisonView.tsx
+│   │       └── DeploymentWizard.tsx
+│   └── shared/
+│       ├── NaturalLanguage/
+│       └── ContextManager/
+├── hooks/
+│   ├── useConversation.ts
+│   ├── useVoiceInterface.ts
+│   ├── useAIAssistant.ts
+│   └── useContextMemory.ts
+├── services/
+│   ├── nlpService.ts
+│   ├── voiceService.ts
+│   ├── aiAssistant.ts
+│   └── conversationMemory.ts
+└── utils/
+    ├── speechProcessing.ts
+    ├── contextAnalysis.ts
+    └── intentRecognition.ts
+```
+
+### AI/ML Integration
+- **Natural Language Processing**: Intent recognition and entity extraction
+- **Conversation Management**: Context tracking and memory
+- **Voice Processing**: Speech-to-text and text-to-speech
+- **Recommendation Engine**: ML-powered model suggestions
+- **Learning System**: User preference adaptation
+
+### Performance Optimizations
+- **Streaming Responses**: Real-time AI response generation
+- **Voice Processing**: Local speech recognition when possible
+- **Context Caching**: Efficient conversation memory management
+- **Lazy Loading**: Load overlays and detailed views on demand
+- **Offline Capability**: Basic conversation when network limited
+
+## Accessibility Features
+
+### Voice Interface Accessibility
+- **Multiple Input Methods**: Voice, text, and traditional navigation
+- **Voice Feedback**: Audio confirmation of actions
+- **Speech Rate Control**: Adjustable speaking speed
+- **Voice Commands**: Comprehensive voice control vocabulary
+
+### Screen Reader Excellence
+- **Conversation Flow**: Proper reading order for chat interface
+- **Live Regions**: Announce new messages and responses
+- **Rich Descriptions**: Detailed descriptions of visual elements
+- **Alternative Navigation**: Traditional navigation always available
+
+### Motor Accessibility
+- **Voice Primary**: Reduce need for precise mouse/touch input
+- **Large Touch Targets**: 44px minimum for all interactive elements
+- **Keyboard Alternatives**: Full keyboard navigation support
+- **Dwell Clicking**: Support for eye-tracking and dwell interfaces
+
+## Mobile/Responsive Design
+
+### Mobile-First Approach
+- **Touch Optimized**: Large touch targets, swipe gestures
+- **Voice Primary**: Emphasize voice input on mobile devices
+- **Simplified UI**: Minimal chrome, focus on conversation
+- **Offline Capability**: Basic functionality without network
+
+### Responsive Adaptations
+- **Mobile**: Full-screen conversation interface
+- **Tablet**: Split view with conversation + contextual panels
+- **Desktop**: Multi-panel layout with traditional fallback options
+
+### Cross-Platform Voice
+- **Native Integration**: Use platform voice APIs when available
+- **Consistent Experience**: Same conversation across all devices
+- **Sync Capability**: Conversation history syncs across devices
+
+## Performance Impact Assessment
+
+### AI/ML Processing
+- **Edge Computing**: Local processing for basic NLP when possible
+- **Cloud Integration**: Advanced AI features through API calls
+- **Caching Strategy**: Cache common responses and user preferences
+- **Progressive Enhancement**: Graceful degradation when AI unavailable
+
+### Voice Processing
+- **Browser APIs**: Use native Web Speech API when supported
+- **Fallback Options**: Text input always available
+- **Bandwidth Optimization**: Compress voice data for transmission
+- **Local Processing**: Client-side voice recognition when possible
+
+### Memory Management
+- **Conversation Pruning**: Limit conversation history length
+- **Context Compression**: Efficient storage of conversation context
+- **Cleanup**: Proper cleanup of voice processing resources
+- **Background Processing**: Handle AI responses without blocking UI
+
+---
+
+# Implementation Recommendations
+
+## Phased Rollout Strategy
+
+### Phase 1: Foundation (Months 1-3)
+- **Direction 2 (Command Center)**: Implement as primary interface
+  - Lowest risk, builds on existing patterns
+  - Immediate productivity gains for power users
+  - Establishes advanced filtering and bulk operations
+
+### Phase 2: Visual Enhancement (Months 4-6)
+- **Direction 1 (Visual Intelligence)**: Add visual components
+  - Implement model visualization and comparison tools
+  - Add performance charts and recommendation engine
+  - Enhance with interactive filtering
+
+### Phase 3: AI Integration (Months 7-9)
+- **Direction 3 (Conversational)**: Introduce AI assistant
+  - Start with basic natural language queries
+  - Add voice interface capabilities
+  - Implement learning and personalization
+
+## Technical Implementation Priority
+
+### High Priority (Must Have)
+1. **Advanced Filtering System** (All Directions)
+2. **Model Comparison Interface** (Directions 1 & 2)
+3. **Real-time Performance Monitoring** (Direction 2)
+4. **Responsive Design Foundation** (All Directions)
+
+### Medium Priority (Should Have)
+1. **Visual Model Cards** (Direction 1)
+2. **Command Palette** (Direction 2)
+3. **Basic AI Recommendations** (Direction 3)
+4. **Customizable Dashboards** (Direction 2)
+
+### Low Priority (Nice to Have)
+1. **Network Graph Visualization** (Direction 1)
+2. **Voice Interface** (Direction 3)
+3. **Workflow Builder** (Direction 1)
+4. **Advanced AI Learning** (Direction 3)
+
+## Success Metrics & KPIs
+
+### User Experience Metrics
+- **Task Completion Time**: 60% reduction in model discovery time
+- **User Satisfaction**: >4.5/5 rating for new interface
+- **Feature Adoption**: >80% usage of new filtering capabilities
+- **Error Reduction**: 50% fewer user errors in model selection
+
+### Technical Performance Metrics
+- **Page Load Time**: <2 seconds for initial dashboard load
+- **Filter Response Time**: <300ms for filter operations
+- **Accessibility Score**: WCAG 2.1 AA compliance (100%)
+- **Mobile Performance**: <3 seconds load time on 3G networks
+
+### Business Impact Metrics
+- **Model Deployment Efficiency**: 40% faster deployment workflows
+- **User Retention**: Increased daily active users
+- **Support Ticket Reduction**: 30% fewer UI-related support requests
+- **Training Time**: 50% reduction in new user onboarding time
+
+## Risk Mitigation
+
+### Technical Risks
+- **Performance Impact**: Implement progressive loading and virtualization
+- **Browser Compatibility**: Provide fallbacks for advanced features
+- **Accessibility Regression**: Comprehensive testing throughout development
+- **Data Security**: Ensure all new features maintain security standards
+
+### User Adoption Risks
+- **Change Management**: Provide optional traditional interface during transition
+- **Training Requirements**: Create comprehensive documentation and tutorials
+- **Feature Complexity**: Implement progressive disclosure of advanced features
+- **Feedback Integration**: Establish user feedback loops for continuous improvement
+
+## Conclusion
+
+These three design directions offer distinct approaches to solving Paula's core challenge of efficiently finding and evaluating AI models. Each direction can be implemented independently or combined to create a comprehensive solution that serves different user preferences and workflows.
+
+The **Enterprise Command Center** approach provides immediate value with minimal risk, while the **AI-First Visual Intelligence** direction offers innovative visualization capabilities. The **Conversational AI Assistant** represents the future of human-computer interaction for complex technical tasks.
+
+By implementing these designs with a focus on accessibility, performance, and user experience, RHOAI 3.0 can transform from a traditional enterprise dashboard into a modern, intelligent platform that accelerates AI adoption and deployment across organizations.
\ No newline at end of file
diff --git a/components/frontend/static-prototype/styles.css b/components/frontend/static-prototype/styles.css
new file mode 100644
index 000000000..d73bfb2ad
--- /dev/null
+++ b/components/frontend/static-prototype/styles.css
@@ -0,0 +1,527 @@
+/* vTeam Static Prototype Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f8fafc;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Header */
+.header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #000000;
+  text-decoration: none;
+}
+
+.nav {
+  display: flex;
+  gap: 2rem;
+}
+
+.nav a {
+  text-decoration: none;
+  color: #64748b;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.nav a:hover, .nav a.active {
+  color: #1e40af;
+}
+
+/* Page Header */
+.page-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 2rem 0;
+}
+
+.page-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+}
+
+.page-header-left {
+  flex: 1;
+}
+
+.page-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.page-description {
+  color: #64748b;
+  font-size: 1rem;
+}
+
+.page-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.page-actions .btn {
+  min-width: 140px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+/* Buttons */
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #1e40af;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #1d4ed8;
+}
+
+.btn-secondary {
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover {
+  background: #f9fafb;
+}
+
+/* Cards */
+.card {
+  background: white;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.card-description {
+  color: #64748b;
+}
+
+.card-content {
+  padding: 1.5rem;
+}
+
+/* Tables */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  text-align: left;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.table th {
+  font-weight: 600;
+  color: #374151;
+  background: #f8fafc;
+}
+
+.table tr:hover {
+  background: #f8fafc;
+}
+
+/* Status badges */
+.badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge-success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.badge-warning {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.badge-error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.badge-info {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+/* Tabs */
+.tabs {
+  margin-top: 2rem;
+}
+
+.tab-list {
+  display: flex;
+  border-bottom: 1px solid #e2e8f0;
+  margin-bottom: 1.5rem;
+}
+
+.tab-button {
+  padding: 0.75rem 1rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #64748b;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+}
+
+.tab-button.active {
+  color: #1e40af;
+  border-bottom-color: #1e40af;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Grid layouts */
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+@media (max-width: 768px) {
+  .grid-2,
+  .grid-3 {
+    grid-template-columns: 1fr;
+  }
+  
+  .page-header-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .page-actions {
+    justify-content: flex-start;
+  }
+  
+  .nav {
+    display: none;
+  }
+}
+
+/* Breadcrumbs */
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.breadcrumbs a {
+  color: #1e40af;
+  text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+  text-decoration: underline;
+}
+
+/* Project sidebar */
+.project-layout {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.project-sidebar {
+  background: white;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+  padding: 1rem;
+  height: fit-content;
+}
+
+.project-sidebar ul {
+  list-style: none;
+}
+
+.project-sidebar li {
+  margin-bottom: 0.5rem;
+}
+
+.project-sidebar a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  color: #64748b;
+  text-decoration: none;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+}
+
+.project-sidebar a:hover,
+.project-sidebar a.active {
+  background: #f1f5f9;
+  color: #1e40af;
+}
+
+@media (max-width: 768px) {
+  .project-layout {
+    grid-template-columns: 1fr;
+  }
+  
+  .project-sidebar {
+    order: 2;
+  }
+}
+
+/* Empty states */
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: #64748b;
+}
+
+.empty-state h3 {
+  margin-bottom: 0.5rem;
+  color: #374151;
+}
+
+/* Animations */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Form styles */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+}
+
+select.form-input,
+.form-input select {
+  padding-right: 2.5rem !important;
+}
+
+select {
+  padding-right: 2.5rem;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #1e40af;
+  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* Modal styles */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 0.5rem;
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #64748b;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-close:hover {
+  color: #374151;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+/* User dropdown styles */
+.user-dropdown-trigger:hover {
+  background-color: #f1f5f9 !important;
+}
+
+.user-dropdown-menu button:hover {
+  background-color: #f1f5f9 !important;
+}
+
+/* Session dropdown styles */
+#sessionDropdownMenu button:hover {
+  background-color: #f1f5f9 !important;
+}
+
+/* Accordion styles */
+.accordion-item {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.accordion-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: white;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #374151;
+  transition: background-color 0.2s;
+  text-align: left;
+}
+
+.accordion-header:hover {
+  background: #f8fafc;
+}
+
+.accordion-header svg {
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.accordion-content {
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+  overflow: hidden;
+}
diff --git a/components/manifests/overlays/local-dev/build-configs.yaml b/components/manifests/overlays/local-dev/build-configs.yaml
index 8d5999d59..de4f4ec40 100644
--- a/components/manifests/overlays/local-dev/build-configs.yaml
+++ b/components/manifests/overlays/local-dev/build-configs.yaml
@@ -25,7 +25,7 @@ spec:
   strategy:
     type: Docker
     dockerStrategy:
-      dockerfilePath: Dockerfile
+      dockerfilePath: Dockerfile.dev
   output:
     to:
       kind: ImageStreamTag
@@ -43,7 +43,7 @@ spec:
   strategy:
     type: Docker
     dockerStrategy:
-      dockerfilePath: Dockerfile
+      dockerfilePath: Dockerfile.dev
   output:
     to:
       kind: ImageStreamTag
diff --git a/components/scripts/local-dev/crc-start.sh b/components/scripts/local-dev/crc-start.sh
index f1a805210..52754ac8d 100755
--- a/components/scripts/local-dev/crc-start.sh
+++ b/components/scripts/local-dev/crc-start.sh
@@ -275,9 +275,12 @@ apply_rbac() {
   log "Creating frontend authentication..."
   oc apply -f "${MANIFESTS_DIR}/frontend-auth.yaml" -n "$PROJECT_NAME"
   
-  # Wait for token secret to be populated
+  # Wait for token secret to be populated (service account tokens are auto-created)
   log "Waiting for frontend auth token to be created..."
-  oc wait --for=condition=complete secret/frontend-auth-token --timeout=60s -n "$PROJECT_NAME" || true
+  until oc get secret/frontend-auth-token -n "$PROJECT_NAME" -o jsonpath='{.data.token}' 2>/dev/null | grep -q .; do
+    sleep 1
+  done
+  log "Frontend auth token created successfully"
 }
 
 apply_operator_rbac() {