-
Notifications
You must be signed in to change notification settings - Fork 18
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (147 loc) · 19.5 KB
/
index.html
File metadata and controls
159 lines (147 loc) · 19.5 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ClawLess — A ClawContainer for AI Agents</title>
<link rel="icon" type="image/png" href="/logo.png" />
<link rel="stylesheet" href="/node_modules/@xterm/xterm/css/xterm.css" />
<link rel="stylesheet" href="/src/style.css" />
</head>
<body>
<!-- Loading overlay -->
<div id="loading-overlay">
<div class="loading-inner">
<div class="claw-logo"><img src="data:image/png;base64,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" alt="ClawContainer" width="64" height="64" class="loading-logo" /></div>
<p style="margin:0 0 4px;font-size:11px;opacity:.6;letter-spacing:.5px">Built by Shreyas Kapale @ Lyzr</p>
<h2>ClawLess</h2>
<p id="loading-status">Booting WebContainer…</p>
<div class="progress-bar"><div id="progress-fill"></div></div>
</div>
</div>
<!-- Main layout -->
<div id="app">
<!-- Header bar -->
<header id="topbar">
<div class="topbar-left">
<span class="logo"><img src="/logo.png" alt="ClawLess" width="20" height="20" class="topbar-logo" /> ClawLess</span>
<span id="container-status" class="status-badge status-booting">booting</span>
<span class="topbar-sep">|</span>
<span class="topbar-gitagent">supports agents built on <a href="https://gitagent.sh" target="_blank" rel="noopener noreferrer">GitAgent</a> standard</span>
</div>
<div class="topbar-center">
<input id="repo-url-input" type="text" placeholder="https://github.com/owner/repo" />
<button id="btn-clone" class="btn-icon" title="Clone Repository"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
<button id="btn-sync" class="btn-icon" title="Sync to Repository" disabled><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></button>
<label class="auto-sync-toggle" title="Auto-sync on file changes">
<input id="auto-sync-checkbox" type="checkbox" />
<span>Auto</span>
</label>
</div>
<div class="topbar-right">
<button id="btn-preview" class="btn-icon" title="Preview (localhost:3333)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></button>
<button id="btn-audit" class="btn-icon" title="Audit Log Viewer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></button>
<button id="btn-config" class="btn-icon" title="API Keys & Config"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
<!-- Cloud Browser disabled for now -->
<button id="btn-cloud-browser" class="btn-icon" title="Cloud Browser (Browserbase)" style="display:none"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></button>
<button id="btn-policy" class="btn-icon" title="Policy / Guardrails"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></button>
</div>
</header>
<!-- Body: filetree | main-content | sidebar -->
<div id="body">
<!-- Always-on file tree -->
<aside id="filetree">
<div class="filetree-header">
<span>WORKSPACE</span>
<button id="btn-refresh-tree" title="Refresh"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></button>
</div>
<div id="filetree-list"></div>
</aside>
<div class="resize-handle resize-h" id="resize-filetree"></div>
<!-- Main content: editor panel + terminal -->
<div id="main-content">
<div id="editor-panel" class="hidden">
<div id="tab-bar"></div>
<div id="editor-container"></div>
<div id="preview-container" class="hidden">
<div id="preview-toolbar">
<button id="preview-back" class="preview-nav-btn" title="Back">←</button>
<button id="preview-forward" class="preview-nav-btn" title="Forward">→</button>
<button id="preview-reload" class="preview-nav-btn" title="Reload">↻</button>
<input id="preview-url" type="text" placeholder="Enter URL…" />
</div>
<div id="preview-viewport">
<div id="preview-loading">Loading…</div>
<iframe id="preview-iframe" allow="microphone; camera; autoplay"></iframe>
</div>
</div>
<div id="audit-container" class="hidden">
<div id="audit-toolbar">
<input id="audit-search" type="text" placeholder="Search logs…" />
<select id="audit-filter-source"><option value="">All Sources</option><option value="boot">boot</option><option value="user">user</option><option value="agent">agent</option><option value="system">system</option><option value="policy">policy</option></select>
<select id="audit-filter-level"><option value="">All Levels</option><option value="info">info</option><option value="warn">warn</option><option value="error">error</option></select>
<select id="audit-filter-event"><option value="">All Events</option><option value="process.spawn">process.spawn</option><option value="process.exit">process.exit</option><option value="file.read">file.read</option><option value="file.write">file.write</option><option value="io.stdout">io.stdout</option><option value="io.stdin">io.stdin</option><option value="env.configure">env.configure</option><option value="server.ready">server.ready</option><option value="status.change">status.change</option><option value="policy.deny">policy.deny</option><option value="policy.load">policy.load</option><option value="boot.mount">boot.mount</option><option value="net.request">net.request</option><option value="net.response">net.response</option><option value="git.clone">git.clone</option><option value="git.push">git.push</option></select>
<input id="audit-date-from" type="datetime-local" title="From" />
<input id="audit-date-to" type="datetime-local" title="To" />
<button id="btn-audit-download" class="btn-icon" title="Download Logs"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
</div>
<div id="audit-log-list"></div>
</div>
<div id="policy-container" class="hidden">
<div class="policy-editor-wrap">
<p class="panel-hint">Define what agents can and cannot do. YAML format.</p>
<textarea id="policy-yaml-editor" spellcheck="false"></textarea>
<div class="policy-actions">
<button id="btn-apply-policy" class="btn-primary">Apply Policy</button>
<button id="btn-reset-policy" class="btn-secondary">Reset to Default</button>
</div>
<div id="policy-message" class="message"></div>
</div>
</div>
<div id="cloud-browser-container" class="hidden">
<div id="cloud-browser-toolbar">
<button id="cloud-browser-reload" class="preview-nav-btn" title="Reload">↻</button>
<input id="cloud-browser-url" type="text" placeholder="Enter URL to browse…" />
<button id="cloud-browser-go" class="btn-primary">Go</button>
<span id="cloud-browser-status"></span>
</div>
<div id="cloud-browser-viewport">
<div id="cloud-browser-loading">Starting cloud browser…</div>
<iframe id="cloud-browser-iframe" credentialless allow="clipboard-read; clipboard-write"></iframe>
</div>
</div>
</div>
<div class="resize-handle resize-v" id="resize-editor-terminal"></div>
<div id="terminal-panel">
<div id="terminal-container"></div>
</div>
</div>
<div class="resize-handle resize-h" id="resize-sidebar"></div>
<!-- Toggleable config/agent sidebar -->
<aside id="sidebar" class="sidebar-hidden">
<!-- Config Panel -->
<section id="config-panel" class="panel">
<h3>Generic API Key</h3>
<label for="provider-select">Provider</label>
<select id="provider-select">
<option value="anthropic">Anthropic</option>
<option value="openai">OpenAI</option>
<option value="google">Google (Gemini)</option>
</select>
<label for="model-select">Model</label>
<select id="model-select"></select>
<div class="env-section">
<label>Environment Variables</label>
<div id="env-rows"></div>
<button id="btn-add-env" class="btn-secondary">+ Add Variable</button>
</div>
<button id="btn-save-config" class="btn-primary">Save & Connect</button>
<div id="config-message" class="message"></div>
</section>
</aside>
</div>
<div id="bottom-bar"><img src="/logo.png" alt="" width="14" height="14" style="vertical-align:middle" /> <span class="bottom-bar-text">ClawLess</span> <span class="bottom-bar-sep">|</span> <span class="bottom-bar-desc">A ClawContainer — serverless AI agent runtime in your browser</span></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>