# UI/UX Review & Redesign Proposal

## Current State Analysis: "The Unusable Form"

The current "Quick Add" modal (in `index.html`) and the "Planning" tab form suffer from several friction points:

1.  **Context Blindness:** When adding a Trello card, you must first pick a source, then a board, then a list. This is 3+ clicks before you even type the task name.
2.  **Repetitive Data Entry:** Creating multiple related stories (e.g., across 3 repos) requires filling the entire form 3 times.
3.  **No "Smart" Defaults:** The form doesn't remember your last used project, repo, or base image.
4.  **Mobile Friction:** Select dropdowns are native and small, making them hard to use for long lists of repos or boards.
5.  **Information Overload:** The "Task" and "Shopping" tabs in the modal use the same `HandleUnifiedAdd` endpoint but different fields, leading to a "leaky abstraction" in the UI.

---

## 1. Redesign: The "Command Palette" Model

Instead of a traditional form, we should move towards a **Command Palette** style interaction (Ctrl+K).

### Proposed Streamlined Flow:
1.  **Trigger:** `Ctrl+K` opens a search-first modal.
2.  **Type:** User types "doot: fix css in dashboard" or "claudomator: update go version".
3.  **Prefix Detection:**
    *   `d:` or `t:` -> Todoist task.
    *   `tr:` -> Trello card.
    *   `c:` or `s:` -> Claudomator Story (New).
4.  **Contextual Suggestions:** As the user types, the bottom of the modal shows:
    *   "Repo: doot" (detected from prefix or frequency)
    *   "Project: Phase 6"
    *   "Base Image: Go 1.24"

---

## 2. Resource Management Model (Repos, Images, Projects)

The user requested a "better model for management." We should move away from flat strings and toward a **Resource Graph**.

### New SQLite Schema (Internal)
*   **`claudomator_repos`:** `id, name, remote_url, default_branch, local_path`
*   **`claudomator_images`:** `id, name, tag, description (e.g., "Go 1.24 + Node 22")`
*   **`claudomator_projects`:** `id, name, description`
*   **`project_repos`:** Junction table linking projects to multiple repositories.

### Management UI
Instead of hiding these in settings, we should have a **"Library" view** (perhaps a new tab or a sub-section of Planning) where users can:
*   Quick-add a new repo.
*   Toggle which "Base Images" are active for selection.
*   Group repos into "Projects" for batch operations.

---

## 3. UI/UX Recommendations & Plugins

### Recommended Plugins/Libraries
1.  **[Tom Select](https://tom-select.js.org/):** To replace native `<select>`. This allows for:
    *   Searchable dropdowns (essential for 20+ repos).
    *   Custom rendering (show repo icons/logos in the list).
    *   Remote data loading (HTMX-friendly).
2.  **[Alpine.js](https://alpinejs.dev/):** To handle "Local UI State" without page refreshes.
    *   Example: Toggling between "Simple Task" and "Complex Story" modes in the same modal.
    *   Example: Multi-select for repos.
3.  **[Tailwind Forms Plugin](https://github.com/tailwindlabs/tailwindcss-forms):** To make inputs look professional with zero effort.
4.  **[Lucide Icons](https://lucide.dev/):** To replace the emoji-heavy UI with cleaner, more professional SVG icons.

---

## 4. Proposed User Flow for Story Creation

**Goal: From "Idea" to "Running Agent" in < 15 seconds.**

1.  **Open Studio:** User clicks a new "Create Story" button (or `Ctrl+K` then `s`).
2.  **Draft:** User types the goal.
3.  **Auto-Select:** System auto-selects the "Active Project" and its associated "Primary Repo".
4.  **Elaborate (AI):** User hits `Enter`. HTMX swaps the form for a "Thinking..." animation.
5.  **Review Tree:** AI returns a task tree. User can click a task to edit its "Validation Spec".
6.  **Launch:** User hits "Execute". Story moves to `IN_PROGRESS` and appears on the main dashboard.

---

## Next Steps (Deferred to Phase 7)
*   Implement the SQLite migrations for the new Resource Graph.
*   Build the "Story Studio" using Alpine.js + Tom Select.
*   Create the management UI for Repos and Projects.