Hugging Face's logo

Snapkitty
/
hyperkitty-chromium

Model card Files
xet
 Community
SNAPKITTYWEST commited on
Commit
f3a08d8
·
verified ·
1 Parent(s): 5d43b69

Add priv/frontend/index.html

Browse files
Files changed (1) hide show
  1. priv/frontend/index.html +142 -0
priv/frontend/index.html ADDED
@@ -0,0 +1,142 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>HyperKitty Chromium -- Control Center</title>
6
+ <style>
7
+ :root { color-scheme: dark; }
8
+ * { box-sizing: border-box; }
9
+ body {
10
+ margin: 0; background: #0e1116; color: #d8dee9;
11
+ font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
12
+ }
13
+ header {
14
+ display: flex; align-items: center; gap: .75rem;
15
+ padding: .6rem 1rem; background: #151a21; border-bottom: 1px solid #262c36;
16
+ }
17
+ header h1 { font-size: 15px; margin: 0; font-weight: 600; color: #e8ecf1; }
18
+ #status-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
19
+ #status-dot.up { background: #3fb950; }
20
+ #status-dot.down { background: #f85149; }
21
+ nav { display: flex; gap: .25rem; margin-left: 1rem; }
22
+ nav button {
23
+ background: none; border: none; color: #9aa4b2; padding: .4rem .7rem;
24
+ border-radius: 6px; cursor: pointer; font-size: 13px;
25
+ }
26
+ nav button.active { background: #232a35; color: #e8ecf1; }
27
+ main { padding: 1rem; }
28
+ .view { display: none; }
29
+ .view.active { display: block; }
30
+ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
31
+ .card {
32
+ background: #151a21; border: 1px solid #262c36; border-radius: 10px; padding: .9rem;
33
+ }
34
+ .card h3 { margin: 0 0 .4rem; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #8b96a5; }
35
+ .card .big { font-size: 26px; font-weight: 600; color: #e8ecf1; }
36
+ table { width: 100%; border-collapse: collapse; font-size: 13px; }
37
+ th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #1e242d; }
38
+ th { color: #8b96a5; font-weight: 500; }
39
+ .pill {
40
+ display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: 11px;
41
+ background: #232a35; color: #b7c0cc;
42
+ }
43
+ .pill.ok { background: #123a24; color: #6fd992; }
44
+ .pill.err { background: #3a1414; color: #f0908a; }
45
+ #event-log { max-height: 70vh; overflow-y: auto; font-family: ui-monospace, monospace; font-size: 12px; }
46
+ #event-log .row { padding: .2rem .3rem; border-bottom: 1px solid #1a1f27; white-space: pre-wrap; word-break: break-all; }
47
+ #event-log .cat { color: #79c0ff; }
48
+ #event-log .ts { color: #6a7383; }
49
+ input, select, textarea {
50
+ background: #0e1116; border: 1px solid #2a3140; color: #d8dee9; border-radius: 6px; padding: .35rem .5rem;
51
+ font: inherit;
52
+ }
53
+ button.action { background: #2f6feb; border: none; color: white; border-radius: 6px; padding: .4rem .8rem; cursor: pointer; }
54
+ .row-flex { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
55
+ .muted { color: #8b96a5; }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <header>
60
+ <span id="status-dot"></span>
61
+ <h1>HyperKitty Chromium</h1>
62
+ <nav id="nav">
63
+ <button data-view="dashboard" class="active">Dashboard</button>
64
+ <button data-view="agent-console">Agent Console</button>
65
+ <button data-view="browser">Browser</button>
66
+ <button data-view="search">Search</button>
67
+ <button data-view="messages">Messages</button>
68
+ <button data-view="event-stream">Event Stream</button>
69
+ <button data-view="audit">Audit</button>
70
+ </nav>
71
+ </header>
72
+
73
+ <main>
74
+ <section id="view-dashboard" class="view active">
75
+ <div class="grid">
76
+ <div class="card"><h3>System</h3><div class="big" id="dash-status">--</div></div>
77
+ <div class="card"><h3>Active Agents</h3><div class="big" id="dash-agents">0</div></div>
78
+ <div class="card"><h3>Browser Sessions</h3><div class="big" id="dash-sessions">0</div></div>
79
+ <div class="card"><h3>Search Jobs</h3><div class="big" id="dash-jobs">0</div></div>
80
+ <div class="card"><h3>Uptime</h3><div class="big" id="dash-uptime">0s</div></div>
81
+ <div class="card"><h3>Connected Clients</h3><div class="big" id="dash-clients">--</div></div>
82
+ </div>
83
+ <h3 class="muted" style="margin-top:1.2rem">Subsystems</h3>
84
+ <table><thead><tr><th>Subsystem</th><th>Status</th></tr></thead><tbody id="dash-subsystems"></tbody></table>
85
+ </section>
86
+
87
+ <section id="view-agent-console" class="view">
88
+ <div class="row-flex">
89
+ <button class="action" id="agent-create">Create Agent</button>
90
+ <input id="agent-objective-input" placeholder="objective description" size="40">
91
+ <span class="muted">Select an agent below, then assign its objective.</span>
92
+ </div>
93
+ <table><thead><tr><th>Agent</th><th>State</th><th>Actions</th><th>Capabilities</th></tr></thead>
94
+ <tbody id="agents-table"></tbody></table>
95
+ </section>
96
+
97
+ <section id="view-browser" class="view">
98
+ <div class="row-flex">
99
+ <button class="action" id="browser-create">New Session</button>
100
+ </div>
101
+ <table><thead><tr><th>Session</th><th>Status</th><th>Tabs</th><th>Owner Agent</th></tr></thead>
102
+ <tbody id="sessions-table"></tbody></table>
103
+ </section>
104
+
105
+ <section id="view-search" class="view">
106
+ <div class="row-flex">
107
+ <input id="search-query-input" placeholder="search query" size="40">
108
+ <button class="action" id="search-start">Run Search</button>
109
+ </div>
110
+ <table><thead><tr><th>Job</th><th>Stage</th><th>Iteration</th><th>Query</th></tr></thead>
111
+ <tbody id="jobs-table"></tbody></table>
112
+ </section>
113
+
114
+ <section id="view-messages" class="view">
115
+ <div class="row-flex">
116
+ <input id="msg-conversation" placeholder="conversation_id" size="16">
117
+ <input id="msg-sender" placeholder="sender" size="10">
118
+ <input id="msg-recipient" placeholder="recipient" size="10">
119
+ <input id="msg-text" placeholder="message text" size="30">
120
+ <button class="action" id="msg-send">Send</button>
121
+ </div>
122
+ <table><thead><tr><th>Time</th><th>Sender</th><th>Recipient</th><th>Status</th><th>Payload</th></tr></thead>
123
+ <tbody id="messages-table"></tbody></table>
124
+ </section>
125
+
126
+ <section id="view-event-stream" class="view">
127
+ <div id="event-log"></div>
128
+ </section>
129
+
130
+ <section id="view-audit" class="view">
131
+ <div class="row-flex">
132
+ <button class="action" id="audit-refresh">Refresh</button>
133
+ <span class="muted">Immutable execution record, newest first.</span>
134
+ </div>
135
+ <table><thead><tr><th>Event ID</th><th>Category</th><th>Subject</th><th>Operation</th><th>Time</th></tr></thead>
136
+ <tbody id="audit-table"></tbody></table>
137
+ </section>
138
+ </main>
139
+
140
+ <script src="/js/app.js"></script>
141
+ </body>
142
+ </html>