docs/ui-layout-review.md

# Tiny Scribe UI Layout Review

## Current UI Structure (as of commit c9dbd58)

### Overall Layout
```
┌─────────────────────────────────────────────────────────────────────────┐
│                         📄 Tiny Scribe                                  │
│              AI-Powered Transcript Summarization                        │
└─────────────────────────────────────────────────────────────────────────┘

┌──────────────────────┬──────────────────────────────────────────────────┐
│  LEFT COLUMN (1/3)   │          RIGHT COLUMN (2/3)                      │
│                      │                                                  │
│  [Input & Settings]  │          [Output Display]                        │
└──────────────────────┴──────────────────────────────────────────────────┘
```

---

## LEFT COLUMN (Settings & Input)

### 1. Global Settings Section
```
┌─────────────────────────────────────┐
│ 🌐 Global Settings                  │
├─────────────────────────────────────┤
│ • Output Language: [en / zh-TW]     │
└─────────────────────────────────────┘
```

### 2. Input Content Section
```
┌─────────────────────────────────────┐
│ 📥 Input Content                    │
├─────────────────────────────────────┤
│ [Tabs]                              │
│  ├─ 📄 Upload File                  │
│  │   └─ File upload component       │
│  └─ ✍️ Paste Text                   │
│      └─ Textbox (10-20 lines)       │
└─────────────────────────────────────┘
```

### 3. Mode Selection
```
┌─────────────────────────────────────┐
│ 🎯 Summarization Mode               │
├─────────────────────────────────────┤
│ ○ Standard Mode                     │
│ ○ Advanced Mode (3-Model Pipeline)  │
└─────────────────────────────────────┘
```

### 4A. Standard Mode Settings (visible when Standard selected)
```
┌─────────────────────────────────────┐
│ 📊 Standard Mode                    │
│ Single-model direct summarization   │
├─────────────────────────────────────┤
│ [Nested Tabs for Model Selection]  │
│  ├─ 🤖 Preset Models                │
│  │   ├─ Model Dropdown              │
│  │   └─ Enable Reasoning Checkbox   │
│  └─ 🔧 Custom GGUF                  │
│      ├─ HF Hub Search               │
│      ├─ File Dropdown               │
│      ├─ Load Button                 │
│      └─ Retry Button                │
├─────────────────────────────────────┤
│ 🖥️ Hardware Configuration           │
│  ├─ CPU Thread Preset Dropdown      │
│  └─ Custom Thread Count Slider      │
├─────────────────────────────────────┤
│ 🎛️ Inference Parameters             │
│  ├─ Temperature (0.0-2.0)           │
│  ├─ Max Output Tokens (256-4096)    │
│  ├─ Top P (0.0-1.0)                 │
│  └─ Top K (0-100)                   │
└─────────────────────────────────────┘
```

### 4B. Advanced Mode Settings (visible when Advanced selected)
```
┌─────────────────────────────────────┐
│ 🧠 Advanced Mode (3-Model Pipeline) │
│ Extraction → Deduplication → Synth  │
├─────────────────────────────────────┤
│ 🔍 Stage 1: Extraction              │
│  ├─ Extraction Model Dropdown       │
│  ├─ Context Window Slider (2K-8K)   │
│  ├─ Window Overlap Slider (1-5)     │
│  ├─ Enable Reasoning Checkbox       │
│  └─ [Accordion] Model Details       │
├─────────────────────────────────────┤
│ 🧬 Stage 2: Deduplication           │
│  ├─ Embedding Model Dropdown        │
│  ├─ Similarity Threshold (0.7-0.95) │
│  └─ [Accordion] Model Details       │
├─────────────────────────────────────┤
│ ✨ Stage 3: Synthesis               │
│  ├─ Synthesis Model Dropdown        │
│  ├─ Enable Reasoning Checkbox       │
│  ├─ Max Output Tokens (512-4096)    │
│  ├─ Temperature (0.0-2.0)           │
│  ├─ Top P (0.0-1.0)                 │
│  ├─ Top K (0-100)                   │
│  └─ [Accordion] Model Details       │
├─────────────────────────────────────┤
│ ⚙️ Global Settings                  │
│  ├─ CPU Thread Preset Dropdown      │
│  ├─ Custom Thread Count Slider      │
│  └─ Enable Trace Logging Checkbox   │
└─────────────────────────────────────┘
```

### 5. Debug Tools (collapsed by default)
```
┌─────────────────────────────────────┐
│ 🐛 Debug Tools [Accordion]          │
│  └─ System Prompt (Read-Only)       │
└─────────────────────────────────────┘
```

### 6. Submit Button
```
┌─────────────────────────────────────┐
│      ✨ Generate Summary            │
└─────────────────────────────────────┘
```

---

## RIGHT COLUMN (Output Display)

### 1. Model Information Panel
```
┌─────────────────────────────────────┐
│ 📊 Model Information                │
├─────────────────────────────────────┤
│ Standard Mode:                      │
│  • Shows 1 model spec               │
│                                     │
│ Advanced Mode:                      │
│  • Extraction Model specs           │
│  • Embedding Model specs            │
│  • Synthesis Model specs            │
└─────────────────────────────────────┘
```

### 2. Model Thinking Process
```
┌─────────────────────────────────────┐
│ 🧠 Model Thinking Process           │
├─────────────────────────────────────┤
│ (Textbox - 12-20 lines)             │
│ Real-time reasoning display         │
│                                     │
│ [📋 Copy Thinking]                  │
└─────────────────────────────────────┘
```

### 3. Final Summary
```
┌─────────────────────────────────────┐
│ 📝 Final Summary                    │
├─────────────────────────────────────┤
│ (Markdown output)                   │
│ Summary content appears here        │
│                                     │
│ (Completion metrics if Advanced)    │
│                                     │
│ [📋 Copy Summary] [⬇️ Download]     │
└─────────────────────────────────────┘
```

---

## UI Statistics

**Total UI Code:** 998 lines  
**Components Used:**
- Groups: 7
- Accordions: 4
- Tabs: 2
- Rows: 4
- Columns: 2
- Buttons: 6
- Dropdowns: 8
- Sliders: 13
- Checkboxes: 4
- Radio: 1
- Textboxes: 4
- Markdown: 6

---

## Strengths ✅

1. **Clear Two-Column Layout**
   - Left: Input & Settings
   - Right: Output & Results
   - Good separation of concerns

2. **Single Mode Selector**
   - Radio button to switch between Standard/Advanced
   - No redundant tab system
   - Clean mode switching

3. **Stage-Based Advanced Mode**
   - Clear pipeline flow: Extraction → Dedup → Synthesis
   - Each stage has dedicated section
   - Logical grouping of parameters

4. **Unified Model Information**
   - Single panel in right column
   - Shows 1 model (Standard) or 3 models (Advanced)
   - Updates dynamically

5. **Single Global Language Selector**
   - No duplicates
   - Applies to both modes
   - In Global Settings section

6. **Mode-Specific Parameters**
   - Standard Mode: Simple inference params
   - Advanced Mode: Stage-specific params + global settings
   - No confusion about which params apply where

---

## Potential Issues ⚠️

### 1. **Nested Tabs in Standard Mode**
**Current:**
```
Standard Mode Group
 └─ Tabs (model_tabs)
     ├─ Preset Models
     └─ Custom GGUF
```

**Issue:** Extra nesting level that might not be necessary

**Suggestion:** Consider using an Accordion or Radio button for model source selection instead of nested tabs

---

### 2. **Inconsistent "Global Settings" Naming**
**Current:**
- Section 1: "🌐 Global Settings" (language selector)
- Advanced Mode: "⚙️ Global Settings" (hardware config)

**Issue:** Two sections with same semantic name but different content

**Suggestion:** 
- Rename first one to "Output Settings" or "Language Settings"
- Or consolidate into one global section at top

---

### 3. **Hardware Configuration Duplication**
**Current:**
- Standard Mode has its own hardware config
- Advanced Mode has its own hardware config (in "Global Settings" subsection)

**Issue:** Same control duplicated across modes

**Suggestion:** Move to a true global section that applies to both modes (could be above mode selector)

---

### 4. **Long Left Column in Advanced Mode**
**Current Structure:**
- Stage 1: ~40 lines
- Stage 2: ~25 lines  
- Stage 3: ~60 lines
- Global Settings: ~30 lines
- Total: ~155 lines of settings

**Issue:** Lots of scrolling required in Advanced Mode

**Suggestion:** Consider collapsing stages into accordions or using a more compact layout

---

### 5. **Model Details Accordions in Advanced Mode**
**Current:**
- Each stage has a collapsed "Model Details" accordion
- 3 separate accordions

**Issue:** Redundant with unified Model Information panel in right column

**Suggestion:** Remove individual accordions and rely only on unified panel in right column

---

### 6. **Missing Visual Feedback for Mode Selection**
**Current:**
- Mode radio button at top
- Settings groups show/hide based on selection

**Issue:** No clear visual indicator of which mode is active besides radio button

**Suggestion:** Add visual styling/badge to mode groups (e.g., highlighted border when active)

---

### 7. **Debug Tools Position**
**Current:**
- Located between Submit button and Output column
- In left column after all settings

**Issue:** Might be better positioned elsewhere or combined with other debug features

**Suggestion:** Move to a footer section or integrate with completion info

---

### 8. **Completion Metrics Display**
**Current:**
- Shows inside "Final Summary" section
- Below the summary text

**Issue:** Not clearly separated from summary content

**Suggestion:** Create a dedicated "Generation Metrics" section or improve visual separation

---

### 9. **Input Content Position**
**Current:**
- Near top of left column, before mode selection

**Issue:** Users might want to select mode first, then provide input

**Suggestion:** Consider moving Input Content below Mode Selection

---

### 10. **Multiple Accordions in Advanced Mode**
**Current:**
- 3 "Model Details" accordions (one per stage)
- 1 Debug Tools accordion

**Issue:** Too many collapsible sections might hide important information

**Suggestion:** Reduce accordion usage or make certain ones open by default

---

## Recommended Improvements 🎯

### Priority 1 (High Impact, Low Effort)

1. **Remove Stage-Specific Model Details Accordions**
   - Rely only on unified Model Information panel
   - Reduces clutter in left column
   - Eliminates redundancy

2. **Rename Conflicting "Global Settings"**
   - First section → "Output Settings"
   - Advanced Mode section → "Pipeline Settings"
   - Improves clarity

3. **Add Visual Mode Indicator**
   - Highlight active mode group with colored border
   - Add badge showing "ACTIVE" state
   - Better visual feedback

### Priority 2 (Medium Impact, Medium Effort)

4. **Consolidate Hardware Configuration**
   - Move to single global section above mode selector
   - Applies to both Standard and Advanced modes
   - Reduces duplication

5. **Simplify Standard Mode Model Selection**
   - Replace nested tabs with Radio buttons or Dropdown
   - "Preset Models" vs "Custom GGUF" selection
   - Reduces UI nesting

6. **Improve Completion Metrics Display**
   - Separate section in Final Summary group
   - Clear visual separator (border/background)
   - More prominent typography

### Priority 3 (Lower Impact, Higher Effort)

7. **Optimize Advanced Mode Layout**
   - Consider using collapsible accordions for stages
   - Or use a stepper/wizard UI for pipeline stages
   - Reduce vertical scrolling

8. **Reorganize Input Position**
   - Move Input Content below Mode Selection
   - Logical flow: Mode → Settings → Input → Generate
   - More intuitive workflow

9. **Consolidate Debug Features**
   - Move Debug Tools to footer or separate tab
   - Combine with other developer features
   - Keep main UI focused on user workflow

---

## Proposed Optimal Layout

### Left Column (Top to Bottom)
```
1. Output Settings (language selector)
2. Hardware Configuration (global - applies to both modes)
3. Mode Selection (radio button)
4. Input Content (file upload / paste text tabs)
5. [Mode-Specific Settings - show/hide based on mode]
   - Standard Mode: Model Selection (radio/dropdown) + Inference Params
   - Advanced Mode: Stage 1, 2, 3 sections
6. Submit Button
```

### Right Column (Top to Bottom)
```
1. Model Information (unified panel)
2. Model Thinking Process
3. Final Summary
4. Generation Metrics (separate visual section)
5. Action Buttons (Copy, Download)
```

### Footer
```
Debug Tools (collapsed) + Version Info
```

---

## Summary

**Overall Assessment:** ⭐⭐⭐⭐☆ (4/5)

The UI is well-structured with clear separation between input/settings and output. The recent refactoring improved consistency by:
- Unifying model information display
- Removing duplicate language selectors  
- Organizing Advanced Mode by pipeline stages

**Main Strengths:**
- Clean two-column layout
- Logical stage-based organization for Advanced Mode
- Good use of show/hide for mode switching

**Main Weaknesses:**
- Some redundancy (hardware config, model details accordions)
- Naming conflicts ("Global Settings" used twice)
- Could reduce nesting in Standard Mode
- Long vertical scroll in Advanced Mode

**Recommended Next Steps:**
1. Remove redundant Model Details accordions in Advanced Mode
2. Consolidate hardware configuration into one global section
3. Rename conflicting "Global Settings" sections
4. Add visual feedback for active mode
5. Consider simplifying Standard Mode model selection UI