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

<!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" />
  <link rel="icon" href="data:,">
  <script>
  (function() {
    var I = 5 * 60 * 1000;
    function b() { return Math.floor(Date.now() / I); }
    function u(n) { return "url('https://picsum.photos/1920/1080?random=" + n + "')"; }
    function apply(n) { document.body.style.setProperty('--bg-url', u(n)); }
    function schedule() {
      setTimeout(function() { apply(b()); new Image().src = u(b() + 1); schedule(); }, I - (Date.now() % I));
    }
    document.addEventListener('DOMContentLoaded', function() {
      apply(b());
      new Image().src = u(b() + 1);
      schedule();
    });
  })();
  </script>
</head>
<body class="bg-body">
  <header>
    <h1>Claudomator</h1>
    <div class="header-actions">
      <select id="select-agent" class="agent-selector">
        <option value="auto">Auto</option>
        <option value="claude">Claude</option>
        <option value="gemini">Gemini</option>
        <option value="local">Local</option>
      </select>
      <button id="btn-notifications" class="btn-secondary" title="Enable push notifications">🔔</button>
      <button id="btn-start-next" class="btn-secondary">Start Next</button>
    </div>
    <div id="budget-bar" class="budget-bar"></div>
  </header>
  <nav class="tab-bar">
    <button class="tab active" data-tab="queue" title="Queue">⏳</button>
    <button class="tab" data-tab="interrupted" title="Interrupted">⚠️<span class="tab-count-badge" hidden></span></button>
    <button class="tab" data-tab="ready" title="Ready">✅<span class="tab-count-badge" hidden></span></button>
    <button class="tab" data-tab="running" title="Running">▶️<span class="tab-count-badge" hidden></span></button>
    <button class="tab" data-tab="drops" title="Drops">📁</button>
    <button class="tab" data-tab="stats" title="Stats">📊</button>
    <button class="tab" data-tab="settings" title="Settings">⚙️</button>
  </nav>
  <main id="app">
    <div data-panel="queue">
      <div class="panel-task-list">
        <div class="task-empty">Loading…</div>
      </div>
    </div>
    <div data-panel="interrupted" hidden>
      <div class="panel-task-list"></div>
    </div>
    <div data-panel="ready" hidden>
      <div class="panel-task-list"></div>
      <div class="ready-completed-history"></div>
    </div>
    <div data-panel="running" hidden>
      <div class="running-current"></div>
      <div class="running-history"></div>
    </div>
    <div data-panel="drops" hidden>
      <div class="drops-panel"></div>
    </div>
    <div data-panel="stats" hidden></div>
    <div data-panel="settings" hidden>
      <p class="task-meta" style="padding:1rem">Settings coming soon.</p>
    </div>
  </main>

  <!-- 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 type="module" src="app.js"></script>
</body>
</html>