diff --git a/__LOCAL_LLMs/dashboard/docs/RICH_FEATURES_PRD.md b/__LOCAL_LLMs/dashboard/docs/RICH_FEATURES_PRD.md new file mode 100644 index 00000000..10786f6a --- /dev/null +++ b/__LOCAL_LLMs/dashboard/docs/RICH_FEATURES_PRD.md @@ -0,0 +1,680 @@ +# Rich LLM Interaction Features — Product Requirements Document + +> **Local LLM Workspace** — Evolving Mission Control from a model management dashboard into a full-featured local AI workspace. +> Last updated: Feb 20, 2026 +> +> See also: [DASHBOARD_PRD.md](DASHBOARD_PRD.md) · [DASHBOARD_ROADMAP.md](DASHBOARD_ROADMAP.md) + +--- + +## 1. Vision + +Mission Control today is a **model management dashboard** — load, unload, prompt, compare. The next evolution transforms it into a **local AI workspace** — a ChatGPT-class interface that runs entirely on your Mac, with zero cloud dependencies, full privacy, and the power to orchestrate multiple local models for different tasks. + +**Core thesis:** The friction of local LLMs isn't the models — it's the UX. ChatGPT wins because it reduces 10 decisions to 1 click. We bring that same zero-friction experience to local models, with the bonus of complete privacy, no rate limits, and the ability to hot-swap between 20+ models instantly. + +### What Changes + +| Today (v3) | Tomorrow (v4) | +| ---------------------------- | ------------------------------------------------------ | +| Single prompt textarea | Persistent, named conversations with branching | +| Manual model selection | Smart model router picks the best model for the task | +| Blank canvas every time | Quick Actions launch pre-built workflows in 1 click | +| One system prompt | Custom Agents with personality, tools, and constraints | +| Chat history lost on refresh | Full conversation library with search and folders | +| No automation | Scheduled tasks run prompts on cron and save results | +| Text-only input | Multi-modal: voice (Whisper), vision, files, URLs | +| Single model per chat | Multi-model orchestration (chain, race, vote) | + +--- + +## 2. Information Architecture + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ Sidebar (240px, collapsible) │ +│ ┌─────────────────────┐ │ +│ │ + New Conversation │ │ +│ │ Quick Actions ▸ │ ← 1-click task launchers │ +│ │ My Agents ▸ │ ← custom GPTs / personas │ +│ ├─────────────────────┤ │ +│ │ ⏱ Scheduled Tasks │ ← cron jobs │ +│ │ 📁 Projects │ ← conversation folders │ +│ ├─────────────────────┤ │ +│ │ Today │ │ +│ │ ├ "Debug auth flow" │ ← conversation list │ +│ │ └ "Explain monads" │ │ +│ │ Yesterday │ │ +│ │ └ "API schema gen" │ │ +│ ├─────────────────────┤ │ +│ │ 🎛 Mission Control │ ← current dashboard (models, sys) │ +│ │ ⚙ Settings │ │ +│ └─────────────────────┘ │ +│ │ +│ ┌──────────────────────────────────────────────────────────┐ │ +│ │ [Model selector] [Agent badge] [Conversation title] │ │ +│ │ │ │ +│ │ Message thread (scrollable) │ │ +│ │ User: "Review this function for bugs" │ │ +│ │ [attached: auth.ts] │ │ +│ │ │ │ +│ │ Assistant (deepseek-r1:32b): │ │ +│ │ ▸ Show reasoning (142 words) │ │ +│ │ I found 3 issues: ... │ │ +│ │ [👍] [👎] [📋 Copy] [🔄 Regenerate] [🔀 Try other] │ │ +│ │ │ │ +│ │ [📎] [🎤] [🖼] │ Message... │ [Send] │ │ +│ └──────────────────────────────────────────────────────────┘ │ +└─────────────────────────────────────────────────────────────────┘ +``` + +--- + +## 3. Feature Specifications + +### 3.1 Conversations — First-Class Entities + +Conversations become the primary interaction unit — persistent, named, searchable, organized. + +#### Data Model + +```typescript +interface Conversation { + id: string; // crypto.randomUUID() + title: string; // auto-generated, editable + model: string; + agentId?: string; + projectId?: string; + systemPrompt?: string; + messages: Message[]; + createdAt: number; + updatedAt: number; + pinned: boolean; + archived: boolean; + metadata: { + totalTokens: number; + totalPrompts: number; + avgTokPerSec: number; + models: string[]; // all models used + }; +} + +interface Message { + id: string; + role: 'user' | 'assistant' | 'system'; + content: string; + model?: string; + timestamp: number; + attachments?: Attachment[]; + metrics?: { tokensPerSec: number; totalTokens: number; durationMs: number }; + rating?: 'up' | 'down'; + parentId?: string; // for branching + branchIndex?: number; +} + +interface Attachment { + type: 'image' | 'file' | 'audio' | 'url'; + name: string; + data: string; // base64 or text content + mimeType?: string; +} +``` + +#### Lifecycle + +1. **Create** — "New Conversation" button, Quick Action, or Agent launch +2. **Auto-title** — After first response, fast model generates 5-word title +3. **Continue** — Click in sidebar to resume +4. **Branch** — "Regenerate" creates new branch; navigate with `← 1/3 →` +5. **Fork** — New conversation starting at a specific message +6. **Archive/Delete** — Move to archive or permanently remove +7. **Export** — Markdown or JSON + +#### Sidebar Organization + +- **Time-grouped:** Today, Yesterday, Last 7 Days, Last 30 Days, Older +- **Projects:** User-created folders, drag conversations in +- **Pinned:** Starred conversations at top +- **Search:** Full-text across titles and messages +- **Filter:** By model, agent, project, date range + +#### Storage + +- **IndexedDB** via `idb` library (localStorage too small for full history) +- Migration from existing `llm-chat-*` and `llm-inference-log` on first v4 load +- Export: `llm-conversations-backup-{date}.json` + +--- + +### 3.2 Quick Actions — One-Click Task Launchers + +Pre-configured task launchers that set model, system prompt, and input template in one click. + +#### Data Model + +```typescript +interface QuickAction { + id: string; + name: string; + icon: string; + category: 'code' | 'writing' | 'analysis' | 'creative' | 'devops' | 'custom'; + description: string; + modelHint: 'fast' | 'coding' | 'reasoning' | 'chat' | 'vision' | string; + systemPrompt: string; + userTemplate: string; // with {placeholders} + builtin: boolean; + hotkey?: string; + usageCount: number; + lastUsed?: number; +} +``` + +#### Built-in Library (30 actions across 5 categories) + +**Code (8):** + +- **Code Review** — reasoning model, finds bugs/security/perf issues +- **Explain Code** — fast model, breaks down what code does +- **Write Tests** — coding model, generates unit tests +- **Debug Error** — reasoning model, analyzes errors with root cause +- **Refactor** — coding model, improves readability/performance +- **Generate Code** — coding model, production-ready from requirements +- **Regex Builder** — fast model, builds and explains patterns +- **SQL Query** — coding model, optimized queries with index hints + +**Writing (6):** + +- **Summarize** — fast model, bullet-point key takeaways +- **Rewrite** — chat model, clearer and more professional +- **Translate** — chat model, preserves tone and nuance +- **Proofread** — fast model, inline corrections +- **Draft Email** — chat model, professional tone matching +- **Technical Docs** — coding model, with examples and edge cases + +**Analysis (4):** + +- **Deep Think** — reasoning model, step-by-step multi-angle analysis +- **Compare Options** — reasoning model, pros/cons table with recommendation +- **ELI5** — chat model, simplest possible explanation with analogies +- **Fact Check** — reasoning model, identifies accurate vs misleading claims + +**Creative (4):** + +- **Brainstorm** — chat model, quantity and diversity of ideas +- **Role Play** — chat model, stay-in-character responses +- **Story Writer** — chat model, engaging prose with vivid descriptions +- **Name Generator** — fast model, creative names with reasoning + +**DevOps (4):** + +- **Shell Command** — coding model, safe macOS/zsh with warnings +- **Docker/K8s** — coding model, best-practice configs +- **Git Help** — fast model, exact commands with explanations +- **JSON/YAML Tool** — fast model, convert/validate/transform + +Each Quick Action creates a new conversation with pre-filled system prompt and template. + +#### Model Hint Resolution + +Maps to actual models via user-configured defaults: + +```typescript +interface ModelDefaults { + fast: string; // e.g., "qwen2.5:7b" + coding: string; // e.g., "qwen2.5-coder:32b" + reasoning: string; // e.g., "deepseek-r1:32b" + chat: string; // e.g., "llama3.1:8b" + vision: string; // e.g., "llava:13b" +} +``` + +Auto-detection: scan installed models, match by name pattern. User overrides in Settings. + +#### Command Palette + +`Cmd+K` opens a fuzzy-search palette across all Quick Actions, Agents, and recent conversations. Under 100ms response time. + +--- + +### 3.3 Custom Agents — Local GPTs + +Persistent personas with model, system prompt, tools, and constraints. Unlike Quick Actions (one-shot launchers), Agents define behavior across entire conversations. + +#### Data Model + +```typescript +interface Agent { + id: string; + name: string; // "Senior Code Reviewer" + icon: string; + description: string; + model: string; + systemPrompt: string; + temperature?: number; // 0.0–2.0 + tools: AgentTool[]; + welcomeMessage?: string; + examplePrompts: string[]; // shown as clickable chips + constraints?: string[]; + responseFormat?: 'markdown' | 'json' | 'code' | 'plain'; + builtin: boolean; + conversationCount: number; + createdAt: number; +} + +type AgentTool = + | 'file_read' + | 'vision' + | 'voice_input' + | 'web_search' + | 'code_execution' + | 'memory'; +``` + +#### Built-in Agents (10) + +| Agent | Icon | Model | Key Trait | +| -------------------- | ---- | --------- | ------------------------------------------------- | +| **Code Pilot** | `👨‍✈️` | coding | Full-stack: reviews, generates, debugs, explains | +| **Writing Editor** | `📝` | chat | Proofreads, rewrites, tracks style consistency | +| **Deep Thinker** | `🧠` | reasoning | Step-by-step, shows work, math/logic/architecture | +| **Shell Wizard** | `💻` | coding | CLI expert, safe commands, explains flags | +| **Data Analyst** | `📊` | reasoning | SQL, pandas, edge cases, performance | +| **Creative Writer** | `🎨` | chat | Stories, brainstorming, high temperature | +| **Rubber Duck** | `🦆` | fast | Asks questions instead of answering (Socratic) | +| **Translator** | `🌐` | chat | Multi-language, cultural context, tone | +| **API Designer** | `🔌` | coding | REST/GraphQL, OpenAPI specs, examples | +| **Security Auditor** | `🔒` | reasoning | Vulnerability review, OWASP-aware, fixes | + +#### Agent Conversations + +1. System prompt injected (hidden, shown as badge) +2. Welcome message as first assistant message +3. Example prompts as clickable chips below input +4. Model pre-selected (user can override) +5. Badge in header: `🤖 Code Pilot · deepseek-r1:32b` + +#### Agent Editor + +Full-screen editor: icon, name, model, temperature, system prompt (large textarea), welcome message, example prompts (tag input), tool toggles, constraints list. + +--- + +### 3.4 Model Router — Smart Model Selection + +Heuristic-based classifier picks the best model for the task — no LLM call, runs in <5ms. + +````typescript +function classifyTask(input: string): TaskType { + const lower = input.toLowerCase(); + if (/```|function |class |const |import |def |=>/.test(input)) return 'code'; + if (/review|refactor|debug|fix|bug/.test(lower)) return 'code_review'; + if (/error:|traceback|exception|crash/.test(lower)) return 'debugging'; + if (/think.*through|step.by.step|analyze|compare|why/.test(lower)) return 'reasoning'; + if (/calculate|math|equation|proof/.test(lower)) return 'math'; + if (input.length < 60) return 'simple'; + if (/translate|translation/.test(lower)) return 'translation'; + return 'general'; +} +```` + +**UI:** Model chip shows `🤖 Auto` → resolves on send → "Routed to deepseek-r1:32b (reasoning detected)". Click to override. Configurable defaults in Settings. + +--- + +### 3.5 Multi-Modal Input + +Rich input bar replacing the single textarea: + +``` +[📎 Attach] [🎤 Voice] [🖼 Image] │ Message... │ [Send] +``` + +| Input | Behavior | +| ------------------------------------- | ---------------------------------------------- | +| **Code files** (`.ts`, `.py`, etc.) | Read content, syntax-highlighted preview | +| **Text files** (`.md`, `.json`, etc.) | Formatted inline preview | +| **Images** (`.png`, `.jpg`) | Base64, thumbnail, sent to vision model | +| **Audio** (`.wav`, `.mp3`) | Whisper transcription → fills input | +| **Paste code** | Auto-detect language, wrap in fenced block | +| **Paste image** | Clipboard Cmd+V → inline image attachment | +| **Paste error** | Auto-detect stack trace, suggest "Debug Error" | +| **Drag-and-drop** | Drop zone overlay, adds as attachment | + +**Voice:** Click 🎤 or `Cmd+Shift+V` → record → `/api/whisper/transcribe` → fills textarea. + +--- + +### 3.6 Response Enhancements + +#### Per-Message Actions + +``` +[📋 Copy] [🔄 Regenerate ▾] [👍] [👎] + │ + ├─ Regenerate (same model) + ├─ Try with deepseek-r1:32b + └─ Try with qwen2.5-coder:32b +``` + +#### Per-Code-Block Actions + +``` +┌─ typescript ───────────────── [📋 Copy] ─┐ +│ const result = data.filter(x => x.active);│ +└───────────────────────────────────────────┘ +``` + +#### Response Branching + +Regenerate keeps original (dimmed), streams new variant, shows `← 1 of 2 →` navigation. + +#### Streaming Improvements + +- Live `42 tokens · 38.2 tok/s` counter during streaming +- Prominent red ◼ stop button +- Time estimate for long responses + +#### Rating → Model Quality Profile + +👍/👎 per response → aggregate per model → show in model cards: "87% positive on code tasks" + +--- + +### 3.7 Scheduled Tasks (Cron) + +Recurring prompts that run on a schedule, save results. + +```typescript +interface ScheduledTask { + id: string; + name: string; + schedule: string; // cron: "0 9 * * 1-5" + scheduleHuman: string; // "Weekdays at 9:00 AM" + model: string; + prompt: string; + inputSource?: + | { type: 'static' } + | { type: 'file'; path: string } + | { type: 'command'; command: string } + | { type: 'clipboard' }; + outputAction?: + | { type: 'conversation' } + | { type: 'clipboard' } + | { type: 'file'; path: string } + | { type: 'notification' }; + enabled: boolean; + lastRun?: number; + runHistory: Array<{ timestamp: number; durationMs: number; success: boolean; result: string }>; +} +``` + +**Built-in templates:** Morning Brief, Git Diff Summary, Dependency Audit, README Updater, Daily Learning Prompt. + +**Constraints:** Dashboard tab must be open (browser cron). Optional `launchd` background service for macOS. 60s timeout per task. Loads model if needed. + +--- + +### 3.8 Multi-Model Orchestration + +Three modes for using multiple models together: + +**Chain** — Sequential pipeline: model A reasons → model B codes from that reasoning. + +**Race** — Same prompt to N models simultaneously. Show all results with timing. User picks best. + +**Vote** — 3+ models answer, then a synthesizer model produces consensus with disagreement notes. + +Orchestrations can be saved as reusable Quick Actions. + +--- + +### 3.9 Projects — Conversation Organization + +```typescript +interface Project { + id: string; + name: string; + icon: string; + defaultModel?: string; + defaultAgent?: string; + systemContext?: string; // injected into all project conversations + conversationIds: string[]; + pinned: boolean; +} +``` + +- **System context per project** injected into every conversation +- **Default model/agent** per project +- Drag conversations into projects +- `Cmd+P` project switcher +- Project-scoped search + +--- + +## 4. Keyboard Shortcuts + +| Shortcut | Action | +| ------------- | ------------------------------- | +| `Cmd+N` | New conversation | +| `Cmd+K` | Quick Action command palette | +| `Cmd+P` | Project switcher | +| `Cmd+Enter` | Send message | +| `Cmd+Shift+V` | Voice input (hold to record) | +| `Cmd+/` | Toggle sidebar | +| `Cmd+,` | Settings | +| `Cmd+E` | Export conversation | +| `Escape` | Close modal / Cancel generation | +| `Up arrow` | Edit last message (input empty) | +| `R` | Refresh Mission Control | +| `/` | Focus search | +| `?` | Show shortcuts | + +--- + +## 5. Storage Architecture + +### Migration: localStorage → IndexedDB + +``` +IndexedDB (via idb): + conversations, messages, agents, quickActions, projects, scheduledTasks, taskRuns + +localStorage (lightweight settings): + llm-theme, llm-model-defaults, llm-model-sort, llm-auto-load-model, + llm-sidebar-state, llm-last-conversation, llm-model-benchmarks +``` + +Migration on first v4 load: existing `llm-inference-log` and `llm-chat-*` entries → IndexedDB conversations. + +--- + +## 6. Component Architecture (v4) + +``` +src/app/ +├── (workspace)/ # Conversation workspace +│ ├── layout.tsx # Sidebar + content area +│ ├── page.tsx # Home / new conversation +│ ├── c/[id]/page.tsx # Conversation view +│ └── components/ +│ ├── Sidebar.tsx +│ ├── ConversationList.tsx +│ ├── ConversationView.tsx +│ ├── MessageThread.tsx +│ ├── MessageBubble.tsx +│ ├── InputBar.tsx +│ ├── ModelSelector.tsx +│ ├── AgentPicker.tsx +│ ├── QuickActionGrid.tsx +│ ├── CommandPalette.tsx +│ ├── BranchNavigator.tsx +│ └── ScheduledTaskEditor.tsx +├── (mission-control)/ # Current dashboard (preserved) +│ ├── page.tsx +│ └── components/ +├── lib/ +│ ├── db.ts # IndexedDB wrapper +│ ├── types.ts # All interfaces +│ ├── router.ts # Model router +│ ├── cron.ts # Cron parser + scheduler +│ ├── format.ts +│ └── ollama-config.ts +└── api/ # Existing routes (unchanged) +``` + +--- + +## 7. Implementation Phases + +| Phase | Focus | Tasks | Effort | Depends On | +| --------- | -------------------------- | ------------------------------------------------------------------------------- | --------- | ---------- | +| **A** | Conversations + Sidebar | IndexedDB, CRUD, sidebar, thread view, auto-title, branching, export, migration | ~15hr | — | +| **B** | Quick Actions + Cmd+K | Data model, 30 built-in actions, command palette, custom editor, usage tracking | ~10hr | A | +| **C** | Custom Agents | Data model, 10 built-in agents, picker, editor, conversation wiring | ~9hr | A | +| **D** | Model Router + Multi-Modal | Classifier, defaults config, auto UI, rich input bar, file/voice/drag | ~13hr | A | +| **E** | Response Enhancements | Action bars, code-block copy, try-other-model, live metrics, rating | ~7hr | A | +| **F** | Scheduled Tasks | Data model, cron parser, editor, runner, shell input, templates | ~11hr | A | +| **G** | Projects + Orchestration | Projects CRUD, drag-to-project, chain/race/vote modes | ~13hr | A, B | +| **Total** | | **~48 tasks** | **~78hr** | | + +**Critical path:** Phase A is the foundation. B, C, D, E, F can run in parallel after A. + +--- + +## 8. Competitive Differentiation + +| Feature | ChatGPT | Claude | **Local (Ours)** | +| ------------------- | ------------ | ------------ | ------------------------------ | +| Privacy | Cloud | Cloud | **100% local** | +| Cost | $20/mo | $20/mo | **Free** | +| Rate limits | Yes | Yes | **None** | +| Model choice | GPT-4/o/mini | Claude 3/3.5 | **Any Ollama model** | +| Custom GPTs | Yes | No | **Custom Agents** | +| File upload | Yes | Yes | **+ local file system** | +| Voice input | Yes | No | **Whisper.cpp local** | +| Scheduled tasks | No | No | **Cron automation** | +| Multi-model | No | No | **Chain/Race/Vote** | +| Model router | Hidden | Hidden | **Transparent + configurable** | +| Offline | No | No | **Yes** | +| Hot-swap models | No | No | **Instant model switching** | +| Hardware visibility | None | None | **Full system monitoring** | + +**Our unique advantages:** + +1. **Transparency** — see exactly which model, how fast, how much RAM +2. **Orchestration** — chain/race/vote across models (impossible with cloud) +3. **Automation** — scheduled tasks with local file/command integration +4. **Zero friction** — no login, no API keys, no rate limits, no costs +5. **Model diversity** — 20+ models from different families, each with strengths + +--- + +## 9. Success Metrics + +| Metric | Target | Measurement | +| --------------------- | ----------------------------------- | ----------------------------------- | +| Conversation creation | >5/day | Count in IndexedDB | +| Quick Action usage | >50% of conversations start from QA | `usageCount` tracking | +| Agent adoption | 3+ agents in regular use | `conversationCount` per agent | +| Auto-routing accuracy | >80% user satisfaction | Rating on auto-routed conversations | +| Retention | Session >10 min | Timestamp delta | +| Task completion | <3 interactions to useful answer | Message count per conversation | + +--- + +## 10. Open Questions + +1. **Background cron:** Should scheduled tasks require dashboard open, or should we ship a `launchd` daemon? +2. **Code execution:** Sandboxed code runner is high-value but high-risk. Scope for v5? +3. **Web search:** Local web search via SearXNG or similar? Or defer to cloud models? +4. **Persistent memory:** Agent memory across conversations (RAG-style)? Needs vector DB. +5. **Mobile companion:** Minimal mobile UI that sends to Mac over LAN? +6. **Plugin system:** Let users write custom tools in JS? Extension API? + +--- + +## Appendix A: Quick Action Templates (Full Detail) + +### Code Review + +```yaml +name: Code Review +icon: '🔍' +category: code +modelHint: reasoning +systemPrompt: | + You are a senior code reviewer with 15 years of experience. + Review code for: bugs, security vulnerabilities, performance issues, + readability, and maintainability. + Always reference specific lines. Suggest concrete fixes, not just problems. + Rate severity: critical, warning, or suggestion. +userTemplate: | + Review this code: + + {paste or attach file} +``` + +### Debug Error + +```yaml +name: Debug Error +icon: '🐛' +category: code +modelHint: reasoning +systemPrompt: | + You are a debugging expert. Analyze errors systematically: + 1. Read the error message carefully + 2. Identify the root cause (not just symptoms) + 3. Explain why it happened + 4. Provide a concrete fix with code + 5. Suggest how to prevent similar issues +userTemplate: | + I'm getting this error: + + {paste error/traceback} + + In this code: + + {paste relevant code} +``` + +### Deep Think + +```yaml +name: Deep Think +icon: '🧠' +category: analysis +modelHint: reasoning +systemPrompt: | + Think step by step. Show your reasoning process explicitly. + Consider multiple angles before concluding. + If there are tradeoffs, present them as a table. + End with a clear recommendation and confidence level. +userTemplate: | + Think through this problem: + + {describe the problem or question} +``` + +### Shell Command + +```yaml +name: Shell Command +icon: '💻' +category: devops +modelHint: coding +systemPrompt: | + You are a shell scripting expert for macOS with zsh. + Generate safe, well-commented commands. + ALWAYS warn about destructive operations (rm, chmod, etc.). + Explain each flag used. + Prefer built-in tools over installing new ones. +userTemplate: | + Write a shell command to: + + {describe what you want to do} +``` + +--- + +_This PRD is a living document. Update as features are implemented and user feedback arrives._