1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
# 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.
|
