web/index.html


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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<!DOCTYPE html>
<html lang="en">
<head>
  <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 data-panel="tasks">
      <div class="task-list-toolbar">
        <button id="btn-toggle-completed" class="btn-secondary btn-sm"></button>
        <button id="btn-start-next" class="btn-secondary btn-sm">Start Next</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>
      <div class="validate-section">
        <button type="button" id="btn-validate" class="btn-secondary">
          Validate Instructions
        </button>
        <div id="validate-result" hidden></div>
      </div>
      <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 &amp; 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">&#x2715;</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>