diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-03-03 21:15:55 +0000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-03-03 21:15:55 +0000 |
| commit | e8d1b80bd504088a7535e6045ab77f1ddd3b3d43 (patch) | |
| tree | b4eca65fc1306be5b56698941018969f90d716f7 /web/index.html | |
| parent | 74cc740398cf2d90804ab19db728c844c2e056b7 (diff) | |
Web UI: tabs, new task modal with AI draft, templates panel
- Tab bar to switch between Tasks and Templates views
- New Task modal with elaborate section ("Draft with AI") that calls
POST /api/tasks/elaborate and pre-fills form fields
- Templates panel listing saved configs with create/edit/delete
- base-path meta tag for sub-path deployments
- filter.test.mjs: contract tests for filterTasks function
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 105 |
1 files changed, 103 insertions, 2 deletions
diff --git a/web/index.html b/web/index.html index cb2b670..6d7f23b 100644 --- a/web/index.html +++ b/web/index.html @@ -4,17 +4,118 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Claudomator</title> + <meta name="base-path" content="/claudomator"> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Claudomator</h1> + <button id="btn-new-task" class="btn-primary">New Task</button> </header> + <nav class="tab-bar"> + <button class="tab active" data-tab="tasks">Tasks</button> + <button class="tab" data-tab="templates">Templates</button> + </nav> <main id="app"> - <div class="task-list"> - <div id="loading">Loading tasks…</div> + <div data-panel="tasks"> + <div class="task-list-toolbar"> + <button id="btn-toggle-completed" class="btn-secondary btn-sm"></button> + </div> + <div class="task-list"> + <div id="loading">Loading tasks…</div> + </div> + </div> + <div data-panel="templates" hidden> + <div class="panel-header"> + <h2>Templates</h2> + <button id="btn-new-template" class="btn-primary">New Template</button> + </div> + <div class="template-list"></div> </div> </main> + + <dialog id="task-modal"> + <form id="task-form" method="dialog"> + <h2>New Task</h2> + <div class="elaborate-section"> + <label>Describe what you want Claude to do + <textarea id="elaborate-prompt" rows="3" + placeholder="e.g. run tests with race detector and check coverage"></textarea> + </label> + <button type="button" id="btn-elaborate" class="btn-secondary"> + Draft with AI ✦ + </button> + <p class="elaborate-hint">Claude will fill in the form fields below. You can edit before submitting.</p> + </div> + <hr class="form-divider"> + <label>Name <input name="name" required></label> + <label>Instructions <textarea name="instructions" rows="6" required></textarea></label> + <label>Working Directory <input name="working_dir" placeholder="/path/to/repo"></label> + <label>Model <input name="model" value="sonnet"></label> + <label>Max Budget (USD) <input name="max_budget_usd" type="number" step="0.01" value="1.00"></label> + <label>Timeout <input name="timeout" value="15m"></label> + <label>Priority + <select name="priority"> + <option value="normal" selected>Normal</option> + <option value="high">High</option> + <option value="low">Low</option> + </select> + </label> + <div class="form-actions"> + <button type="button" id="btn-cancel-task">Cancel</button> + <button type="submit" class="btn-primary">Create & Queue</button> + </div> + </form> + </dialog> + + <dialog id="template-modal"> + <form id="template-form" method="dialog"> + <h2>New Template</h2> + <label>Name <input name="name" required></label> + <label>Description <textarea name="description" rows="2"></textarea></label> + <label>Model <input name="model" value="sonnet"></label> + <label>Instructions <textarea name="instructions" rows="6" required></textarea></label> + <label>Working Directory <input name="working_dir" placeholder="/path/to/repo"></label> + <label>Max Budget (USD) <input name="max_budget_usd" type="number" step="0.01" value="1.00"></label> + <label>Allowed Tools <input name="allowed_tools" placeholder="Bash, Read, Write"></label> + <label>Timeout <input name="timeout" value="15m"></label> + <label>Priority + <select name="priority"> + <option value="normal" selected>Normal</option> + <option value="high">High</option> + <option value="low">Low</option> + </select> + </label> + <label>Tags <input name="tags" placeholder="ci, daily"></label> + <div class="form-actions"> + <button type="button" id="btn-cancel-template">Cancel</button> + <button type="submit" class="btn-primary">Save Template</button> + </div> + </form> + </dialog> + + <!-- Side panel backdrop --> + <div id="task-panel-backdrop" class="panel-backdrop" hidden></div> + + <!-- Task detail side panel --> + <aside id="task-panel" class="task-panel"> + <div class="task-panel-header"> + <h2 id="task-panel-title">Task Details</h2> + <button id="btn-close-panel" class="btn-close-panel" aria-label="Close">✕</button> + </div> + <div id="task-panel-content" class="task-panel-content"></div> + </aside> + + <!-- Execution detail modal --> + <dialog id="logs-modal"> + <h2 id="logs-modal-title">Execution</h2> + <div id="logs-modal-body" class="logs-modal-body"></div> + <div class="form-actions" style="margin-top:1.25rem"> + <span></span> + <button id="btn-close-logs" class="btn-primary">Close</button> + </div> + </dialog> + <script src="app.js" defer></script> </body> </html> |