kenaz 0.3.22 → 0.3.24

package/core/dev/design/PHASE4_DESIGN.md

@@ -1,559 +0,0 @@
-# Phase 4 UI/UX Design Specification
-## Multi-Project Support & Claude Code Login Flow
-
----
-
-## 1. Design Overview
-
-### 1.1 Design Goals
-- Seamlessly integrate multi-project management into the existing Dashboard
-- Simplify session creation by automatically using the current project's directory
-- Provide a clear, trustworthy login experience for Claude Code authentication
-- Maintain consistency with the established HUD/Tech design language
-
-### 1.2 Design Principles
-1. **Simplicity First**: Reduce cognitive load by removing unnecessary inputs
-2. **Context Awareness**: Sessions automatically follow project context
-3. **Visual Consistency**: Leverage existing design tokens and components
-4. **Progressive Disclosure**: Show advanced options only when needed
-
-### 1.3 Existing Design Language Reference
-| Element | Value |
-|---------|-------|
-| Primary Accent | `#00FFFF` (Cyan) |
-| Background Dark | `#030712` |
-| Surface | `#0a1628` |
-| Border | `rgba(0, 255, 255, 0.3)` |
-| Font Display | Orbitron, Rajdhani |
-| Font Tech | JetBrains Mono, Fira Code |
-| Font Mono | Share Tech Mono |
-| Border Radius | 4px (hud-card) |
-| Corner Decorations | 16x16px cyan borders |
-
----
-
-## 2. Project Selector Component
-
-### 2.1 Current State (Implemented)
-The Project Selector is already implemented with the following features:
-- Dropdown trigger in header (min-width: 200px)
-- Project list with name and path display
-- Current project indicator (checkmark)
-- Delete project functionality (double-click confirm)
-- "Add New Project" action button
-
-### 2.2 Design Refinements
-
-#### Visual Hierarchy
-```
-┌─────────────────────────────────────────┐
-│ [📁] PROJECT_NAME          [▼]          │  ← Trigger (cyan border on open)
-└─────────────────────────────────────────┘
-         ↓ (dropdown, width: 300px)
-┌─────────────────────────────────────────┐
-│ ┃ 📁 KenazAI                    ✓   🗑  │  ← Selected (cyan left border)
-│     C:\Users\Wei\Desktop\Project\...    │
-│─────────────────────────────────────────│
-│   📁 Another Project                 🗑  │
-│     D:\Projects\another                 │
-│─────────────────────────────────────────│
-│ ╔═══════════════════════════════════════╗
-│ ║ ➕ Add New Project                    ║  ← CTA area
-│ ╚═══════════════════════════════════════╝
-└─────────────────────────────────────────┘
-```
-
-#### States
-| State | Visual Treatment |
-|-------|------------------|
-| Default | `border-cyan-400/30`, text slate-400 |
-| Hover | `border-cyan-400/50`, text cyan-400 |
-| Open | `border-cyan-400`, shadow glow, text cyan-400 |
-| Selected Item | Cyan left border (2px), bg cyan-400/10 |
-
-### 2.3 Interaction Flow
-1. Click trigger → Open dropdown
-2. Click project → Select & close
-3. Click delete → First click shows confirm state (red bg), second click deletes
-4. Click "Add New Project" → Open NewProjectDialog
-5. Click outside → Close dropdown
-
----
-
-## 3. New Project Dialog
-
-### 3.1 Current State (Implemented)
-The dialog is implemented with:
-- Project name input (optional, auto-generated from path)
-- Project directory input with autocomplete
-- Pipeline path input (default: `dev/pipeline`)
-- Directory validation with visual feedback
-
-### 3.2 No Changes Required
-The current implementation meets all requirements. The design is:
-- Clear form structure
-- Good validation feedback (checkmark/alert icons)
-- Recent directories support
-- Keyboard navigation (arrow keys, Tab completion)
-
----
-
-## 4. NewSessionDialog Simplification
-
-### 4.1 Current State
-```
-┌─────────────────────────────────────────┐
-│ New Claude Code Session                 │
-│─────────────────────────────────────────│
-│ Session Name                            │
-│ [________________________________]      │
-│                                         │
-│ Working Directory *                     │  ← TO BE REMOVED
-│ [________________________________] [📁] │
-│                                         │
-│ Model                                   │
-│ [Claude Sonnet (Default)    ▼]          │
-│                                         │
-│              [Cancel] [Create Session]  │
-└─────────────────────────────────────────┘
-```
-
-### 4.2 Simplified Design
-
-#### Option A: Extreme Simplification (Recommended)
-```
-┌─────────────────────────────────────────┐
-│ New Session                        [✕]  │
-│─────────────────────────────────────────│
-│                                         │
-│  📁 Project: KenazAI                    │  ← Read-only info badge
-│     C:\Users\Wei\Desktop\Project\...    │
-│                                         │
-│  ─────────────────────────────────────  │
-│                                         │
-│  Session Name                           │
-│  [________________________________]     │
-│   Optional - auto-generated if empty    │
-│                                         │
-│  Model                                  │
-│  [Claude Sonnet (Default)    ▼]         │
-│                                         │
-│              [Cancel] [Create Session]  │
-└─────────────────────────────────────────┘
-```
-
-#### Key Changes
-1. **Remove Working Directory input entirely**
-2. **Add read-only project info badge** showing current project name and path
-3. **Reduce dialog width** from 460px to 400px
-4. **Simplify header** from "New Claude Code Session" to "New Session"
-
-#### Project Info Badge Component
-```tsx
-<div className="flex items-start gap-2 p-3 bg-cyan-400/5 border border-cyan-400/20 rounded">
-  <FolderOpen className="w-4 h-4 text-cyan-400 flex-shrink-0 mt-0.5" />
-  <div className="min-w-0">
-    <div className="font-tech text-xs text-cyan-400 uppercase tracking-wider">
-      {currentProject.name}
-    </div>
-    <div className="font-mono text-[10px] text-slate-500 truncate">
-      {currentProject.path}
-    </div>
-  </div>
-</div>
-```
-
-#### Interaction Flow (Simplified)
-```
-┌────────────────────┐
-│ [+ New Session]    │
-└────────────────────┘
-         ↓
-┌────────────────────────────────────┐
-│ Dialog opens with:                 │
-│ • Project info (read-only)         │
-│ • Session name (optional)          │
-│ • Model selector (default: Sonnet) │
-└────────────────────────────────────┘
-         ↓
-┌────────────────────────────────────┐
-│ Click "Create Session"             │
-│ → Uses currentProject.path as dir  │
-│ → Creates session immediately      │
-└────────────────────────────────────┘
-```
-
-### 4.3 Component Changes Required
-
-```typescript
-// Before
-interface NewSessionDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (data: { name: string; workingDir: string; model: string }) => void;
-  isLoading?: boolean;
-  error?: string;
-  defaultWorkingDir?: string;  // ← Remove this
-}
-
-// After
-interface NewSessionDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (data: { name: string; model: string }) => void;  // No workingDir
-  isLoading?: boolean;
-  error?: string;
-  projectName: string;      // ← Add for display
-  projectPath: string;      // ← Add for display
-}
-```
-
----
-
-## 5. Login Flow UI
-
-### 5.1 Current State (Implemented)
-The LoginPrompt component handles four states:
-1. **Idle**: Warning banner + Login button
-2. **Starting**: Loading spinner + message
-3. **Pending**: Instructions + polling status
-4. **Error**: Error message + Retry button
-5. **Success**: Success message + auto-redirect
-
-### 5.2 Design Refinements
-
-#### 5.2.1 Idle State Enhancement
-Current design is adequate. Minor suggestions:
-- Consider adding Claude logo or brand element
-- Make the warning message more welcoming, less alarming
-
-```
-Before: "Not Logged In" (amber warning)
-After:  "Welcome to Kenaz Dashboard" (softer tone)
-```
-
-Proposed copy:
-```
-┌─────────────────────────────────────────┐
-│ 🔑 AUTHENTICATION REQUIRED              │
-│─────────────────────────────────────────│
-│ Connect your Claude account to unlock   │
-│ all Dashboard features.                 │
-│                                         │
-│ • Create and manage sessions            │
-│ • Monitor API usage                     │
-│ • Access Claude Code CLI                │
-│                                         │
-│ ┌─────────────────────────────────────┐ │
-│ │     🔐 Login to Claude Code         │ │
-│ └─────────────────────────────────────┘ │
-└─────────────────────────────────────────┘
-```
-
-#### 5.2.2 Pending State - Step Indicator
-Add visual progress indicator:
-```
-┌─────────────────────────────────────────┐
-│ ⟡ AWAITING AUTHENTICATION               │
-│─────────────────────────────────────────│
-│                                         │
-│  Step 1: Browser window opened    [✓]   │
-│  Step 2: Login to Anthropic       [○]   │
-│  Step 3: Return here              [○]   │
-│                                         │
-│     ⟳ Checking status... (12)           │
-│                                         │
-│         [Cancel]                        │
-└─────────────────────────────────────────┘
-```
-
-#### 5.2.3 Success State - Visual Feedback
-Add a brief animation before transitioning:
-```
-┌─────────────────────────────────────────┐
-│            ✓ LOGIN SUCCESSFUL           │
-│                                         │
-│    Welcome back, user@example.com       │
-│                                         │
-│        Loading dashboard...             │
-└─────────────────────────────────────────┘
-```
-
----
-
-## 6. Logged-In State Display
-
-### 6.1 Current State
-When logged in, CliStatusPanel shows:
-- Status indicator (online/offline)
-- CLI Version
-- Model
-- Account email
-- Rate limit bar
-- Refresh/Settings/Logout buttons
-
-### 6.2 Design Refinements
-
-#### 6.2.1 Account Section Enhancement
-Add user avatar placeholder and better visual hierarchy:
-```
-┌─────────────────────────────────────────┐
-│ 💻 CLAUDE CODE STATUS                   │
-│─────────────────────────────────────────│
-│                                         │
-│ Status     ●──────────────── CONNECTED  │
-│                                         │
-│ ┌─────────────────────────────────────┐ │
-│ │ 👤  user@example.com                │ │  ← Account card
-│ │     Claude Pro Plan                 │ │
-│ └─────────────────────────────────────┘ │
-│                                         │
-│ Version    v1.2.3                       │
-│ Model      Claude Sonnet                │
-│                                         │
-│ API USAGE                               │
-│ ████████░░░░░░░░░░░░  40% (40/100)     │
-│                                         │
-│ [🔄 Refresh] [⚙️] [🚪 Logout]           │
-└─────────────────────────────────────────┘
-```
-
-#### 6.2.2 Account Card Component
-```tsx
-<div className="flex items-center gap-3 p-3 bg-cyan-400/5 border border-cyan-400/20 rounded">
-  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400/30 to-blue-500/30
-                  flex items-center justify-center border border-cyan-400/30">
-    <User className="w-4 h-4 text-cyan-400" />
-  </div>
-  <div className="min-w-0 flex-1">
-    <div className="font-tech text-xs text-slate-200 truncate">
-      {account}
-    </div>
-    <div className="font-mono text-[10px] text-slate-500">
-      Claude Pro Plan
-    </div>
-  </div>
-</div>
-```
-
-#### 6.2.3 Logout Button Position
-Move logout button to account card for better association:
-```
-┌─────────────────────────────────────────┐
-│ 👤  user@example.com          [Logout]  │
-│     Claude Pro Plan                     │
-└─────────────────────────────────────────┘
-```
-
----
-
-## 7. Component Specifications
-
-### 7.1 Color Tokens
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--cyan-primary` | `#00FFFF` | Accent, borders, text |
-| `--cyan-hover` | `rgba(0,255,255,0.5)` | Hover states |
-| `--cyan-glow` | `rgba(0,255,255,0.3)` | Shadow glow |
-| `--success` | `#00FF88` | Success states |
-| `--warning` | `#FFB800` | Warning states |
-| `--error` | `#FF5555` | Error states |
-| `--surface` | `#0a1628` | Card backgrounds |
-| `--background` | `#030712` | Page background |
-
-### 7.2 Typography Scale
-| Element | Font | Size | Weight | Case |
-|---------|------|------|--------|------|
-| Panel Title | Display | 14px | 600 | UPPERCASE |
-| Label | Tech | 10px | 400 | UPPERCASE |
-| Body | Mono | 12px | 400 | Normal |
-| Small | Mono | 10px | 400 | Normal |
-| Button | Tech | 12px | 500 | UPPERCASE |
-
-### 7.3 Spacing
-| Token | Value |
-|-------|-------|
-| `gap-sm` | 8px |
-| `gap-md` | 12px |
-| `gap-lg` | 16px |
-| `padding-card` | 16px |
-| `padding-button` | 8px 16px |
-
-### 7.4 Animation
-| Animation | Duration | Easing |
-|-----------|----------|--------|
-| Hover transition | 200ms | ease |
-| Dialog open | 150ms | ease-out |
-| Glow pulse | 2s | ease-in-out |
-| Spinner | 1s | linear |
-
----
-
-## 8. Implementation Checklist
-
-### 8.1 NewSessionDialog Simplification
-- [ ] Remove `workingDir` state and input field
-- [ ] Remove `useDirectoryAutocomplete` and `useRecentDirectories` hooks
-- [ ] Add `projectName` and `projectPath` props
-- [ ] Add project info badge component
-- [ ] Update `onSubmit` to not include `workingDir`
-- [ ] Update parent component (SessionManager) to pass project context
-- [ ] Reduce dialog width to 400px
-
-### 8.2 Login Flow Enhancement (Optional)
-- [ ] Update idle state copy for softer tone
-- [ ] Add step indicator to pending state
-- [ ] Add account display to success state
-- [ ] Add subtle entrance animation
-
-### 8.3 Logged-In State Enhancement (Optional)
-- [ ] Create AccountCard component
-- [ ] Move logout button to account area
-- [ ] Add plan type display (if available from API)
-
----
-
-## 9. Wireframes (ASCII)
-
-### 9.1 Dashboard Header with Project Selector
-```
-┌────────────────────────────────────────────────────────────────────────────────────────┐
-│  🔥 KENAZ DASHBOARD                                                                    │
-│  Multi-Agent Command Center                                                            │
-│                                                    [📁 KenazAI ▼] [📺 Terminal] [● ON] │
-└────────────────────────────────────────────────────────────────────────────────────────┘
-```
-
-### 9.2 Session Manager with Simplified New Session
-```
-┌──────────────────────────────────┐
-│ 🔌 SESSIONS                      │
-│──────────────────────────────────│
-│ ┌────────────────────────────┐   │
-│ │ ● Session 1 (main)         │   │
-│ │   claude-sonnet            │   │
-│ └────────────────────────────┘   │
-│ ┌────────────────────────────┐   │
-│ │ ○ Session 2                │   │
-│ │   claude-opus              │   │
-│ └────────────────────────────┘   │
-│                                  │
-│   [+ New Session]                │
-└──────────────────────────────────┘
-```
-
-### 9.3 CLI Status Panel - Not Logged In
-```
-┌──────────────────────────────────┐
-│ 💻 CLAUDE CODE STATUS            │
-│──────────────────────────────────│
-│                                  │
-│  ⚠ AUTHENTICATION REQUIRED       │
-│                                  │
-│  Connect your Claude account     │
-│  to unlock all features.         │
-│                                  │
-│  ┌────────────────────────────┐  │
-│  │  🔐 Login to Claude Code   │  │
-│  └────────────────────────────┘  │
-│                                  │
-└──────────────────────────────────┘
-```
-
-### 9.4 CLI Status Panel - Logged In
-```
-┌──────────────────────────────────┐
-│ 💻 CLAUDE CODE STATUS            │
-│──────────────────────────────────│
-│ Status    ● CONNECTED            │
-│──────────────────────────────────│
-│ ┌────────────────────────────┐   │
-│ │ 👤 user@example.com   [↗]  │   │
-│ │    Claude Pro              │   │
-│ └────────────────────────────┘   │
-│──────────────────────────────────│
-│ Version   v1.2.3                 │
-│ Model     claude-sonnet          │
-│──────────────────────────────────│
-│ API USAGE                        │
-│ ████████░░░░░  60%               │
-│ 60/100 requests this hour        │
-│──────────────────────────────────│
-│ [🔄 Refresh] [⚙️]                │
-└──────────────────────────────────┘
-```
-
----
-
-## 10. Responsive Considerations
-
-### 10.1 Breakpoints
-| Breakpoint | Width | Adjustments |
-|------------|-------|-------------|
-| Desktop | ≥1200px | Full 3-column layout |
-| Tablet | 768-1199px | 2-column, collapsible panels |
-| Mobile | <768px | Single column, tabs |
-
-### 10.2 Project Selector on Small Screens
-- Reduce trigger min-width to 150px
-- Show only project name, hide path in trigger
-- Full-width dropdown on mobile
-
-### 10.3 Dialog Responsiveness
-- Dialog max-width: 90vw on mobile
-- Reduce padding on mobile
-- Stack buttons vertically on very small screens
-
----
-
-## Appendix A: Component Dependencies
-
-```
-ProjectSelector
-├── useProject (context)
-├── ChevronDown, FolderOpen, Plus, Trash2, Check (icons)
-└── hud-card (CSS class)
-
-NewSessionDialog (Simplified)
-├── useProject (context) ← NEW dependency
-├── X, Loader2 (icons)
-└── cn (utility)
-
-LoginPrompt
-├── KeyRound, AlertCircle, Loader2, ExternalLink, CheckCircle2 (icons)
-├── cn (utility)
-└── fetch API
-
-CliStatusPanel
-├── usePolling (hook)
-├── useCliSettings (hook)
-├── StatusIndicator, RateLimitBar, InfoRow, ErrorMessage (sub-components)
-├── SettingsDialog, LoginPrompt (dialogs)
-└── fetchCliStatus (API)
-```
-
----
-
-## Appendix B: API Contracts
-
-### Session Creation (Updated)
-```typescript
-// Request
-POST /api/cli/session
-{
-  name?: string,        // Optional session name
-  model: string,        // Model selection
-  projectId: string     // Current project ID (NEW)
-}
-
-// The API should:
-// 1. Look up project path from projectId
-// 2. Use project path as working directory
-// 3. Create session with specified model
-```
-
----
-
-*Document Version: 1.0*
-*Created: 2026-01-30*
-*Author: Designer Agent (TASK_020)*