Skip to content

Commit 0eb1dc2

Browse files
mythzmythz
committed
update ui
1 parent f909967 commit 0eb1dc2

2 files changed

Lines changed: 55 additions & 42 deletions

File tree

‎llms/extensions/browser/ui/index.mjs‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ let ext
55

66
const BrowserPage = {
77
template: `
8-
<div class="flex flex-col h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
8+
<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
99
<!-- Header Bar -->
1010
<div class="flex items-center gap-3 px-4 py-2 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
1111
<div class="flex gap-1">
@@ -25,11 +25,11 @@ const BrowserPage = {
2525
<svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
2626
</button>
2727
</div>
28-
<div class="flex-1 flex items-center gap-2 px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
29-
<div class="ml-1 w-2 h-2 rounded-full flex-shrink-0" :class="isRunning ? 'bg-green-500' : 'bg-gray-400'" :title="isRunning ? 'Browser running' : 'Browser stopped'"></div>
28+
<div class="flex-1 flex items-center gap-2 px-1 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
29+
<div class="ml-2 w-2 h-2 rounded-full flex-shrink-0" :class="isRunning ? 'bg-green-500' : 'bg-gray-400'" :title="isRunning ? 'Browser running' : 'Browser stopped'"></div>
3030
<input type="text" v-model="urlInput" @keyup.enter="navigate" @focus="urlFocused = true" @blur="urlFocused = false" placeholder="Enter URL..."
3131
class="flex-1 bg-transparent border-none text-sm outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400" spellcheck="false" />
32-
<button @click="navigate" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors">Go</button>
32+
<button type="button" @click="navigate" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors">Go</button>
3333
</div>
3434
<div class="flex gap-1">
3535
<button type="button" @click="saveState" :disabled="!isRunning"
@@ -62,7 +62,7 @@ const BrowserPage = {
6262
<button type="button" @click="closeScriptEditor" class="px-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg">&times;</button>
6363
</div>
6464
</div>
65-
<div v-if="hasCodeMirror" ref="scriptEditorRef" id="scriptEditorRef" class="relative flex-1 w-full overflow-hidden" style="min-height: 0"></div>
65+
<div v-if="hasCodeMirror" ref="scriptEditorRef" id="scriptEditorRef" class="relative flex-1 w-full overflow-hidden" style="min-height: 0; max-width: calc(100vw - 323px)"></div>
6666
<textarea v-else v-model="scriptContent" spellcheck="false" class="flex-1 w-full px-4 py-2 bg-gray-900 text-gray-100 font-mono text-sm border-none resize-none outline-none overflow-y-auto" style="min-height: 0"></textarea>
6767
<!-- AI Prompt Bar -->
6868
<div class="flex items-center gap-2 px-2 py-1.5 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
@@ -76,7 +76,7 @@ const BrowserPage = {
7676
</div>
7777
7878
<!-- Status Bar -->
79-
<div class="flex justify-between px-4 py-1.5 text-xs text-gray-500 bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
79+
<div class="flex justify-between px-2 py-1.5 text-xs text-gray-500 bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
8080
<span class="truncate">{{ pageTitle || 'No page loaded' }}</span>
8181
<span v-if="lastUpdate">Last update: {{ timeSinceUpdate }}</span>
8282
</div>
@@ -111,33 +111,12 @@ const BrowserPage = {
111111
</div>
112112
113113
<!-- Sidebar -->
114-
<div class="flex flex-col bg-gray-50 dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 transition-all" :class="sidebarCollapsed ? 'w-8' : 'w-72'">
114+
<div class="flex flex-col bg-gray-50 dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 transition-all overflow-hidden" :class="sidebarCollapsed ? 'w-8' : 'w-72'">
115115
<button type="button" @click="sidebarCollapsed = !sidebarCollapsed" class="w-full p-2 text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-200 dark:border-gray-700 flex">
116116
<span>{{ sidebarCollapsed ? '◀' : '▶' }}</span>
117117
</button>
118118
119-
<div v-if="!sidebarCollapsed" class="flex-1 overflow-y-auto">
120-
<!-- Elements Panel -->
121-
<div class="border-b border-gray-200 dark:border-gray-700">
122-
<div @click="elementsExpanded = !elementsExpanded" class="flex justify-between px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 select-none">
123-
<span>Elements</span>
124-
<span>{{ elementsExpanded ? '▼' : '▶' }}</span>
125-
</div>
126-
<div v-if="elementsExpanded" class="px-3 pb-3">
127-
<div class="flex gap-2 mb-2">
128-
<button type="button" @click="refreshSnapshot" :disabled="!isRunning" class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded disabled:opacity-40 transition-colors">Refresh</button>
129-
</div>
130-
<div class="flex flex-col gap-1 max-h-48 overflow-y-auto">
131-
<div v-for="el in elements" :key="el.ref || el" @click="clickElement(el.ref || el)"
132-
class="flex gap-2 px-2 py-1.5 text-xs bg-gray-100 dark:bg-gray-700 rounded cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
133-
<span class="text-blue-600 dark:text-blue-400 font-mono flex-shrink-0">{{ el.ref || el }}</span>
134-
<span class="text-gray-500 dark:text-gray-400 truncate">{{ el.desc || '' }}</span>
135-
</div>
136-
<div v-if="elements.length === 0" class="py-2 text-center text-xs text-gray-400">No elements. Click Refresh.</div>
137-
</div>
138-
</div>
139-
</div>
140-
119+
<div v-if="!sidebarCollapsed" class="flex-1 overflow-y-auto min-h-0">
141120
<!-- Scripts Panel -->
142121
<div class="border-b border-gray-200 dark:border-gray-700">
143122
<div @click="scriptsExpanded = !scriptsExpanded" class="flex justify-between px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 select-none">
@@ -148,7 +127,7 @@ const BrowserPage = {
148127
<div class="flex gap-2 mb-2">
149128
<button type="button" @click="newScript" class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded transition-colors">+ New</button>
150129
</div>
151-
<div class="flex flex-col gap-1 max-h-48 overflow-y-auto">
130+
<div class="flex flex-col gap-1 overflow-y-auto">
152131
<div v-for="script in scripts" :key="script.name" class="flex gap-1 items-center text-sm">
153132
<button type="button" @click.stop="runScript(script.name)" class="opacity-60 hover:opacity-100 text-green-700 dark:text-green-600" :title="'Run ' + script.name">▶</button>
154133
<div @click.stop="editScript(script)" class="flex justify-between items-center w-full text-xs w-full">
@@ -166,12 +145,39 @@ const BrowserPage = {
166145
</div>
167146
</div>
168147
</div>
148+
149+
<!-- Elements Panel -->
150+
<div class="border-b border-gray-200 dark:border-gray-700">
151+
<div @click="elementsExpanded = !elementsExpanded" class="flex justify-between px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 select-none">
152+
<span>Elements</span>
153+
<span>{{ elementsExpanded ? '▼' : '▶' }}</span>
154+
</div>
155+
<div v-if="elementsExpanded" class="px-3 pb-3">
156+
<div class="flex gap-2 mb-2">
157+
<button type="button" @click="refreshSnapshot" :disabled="!isRunning" class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded disabled:opacity-40 transition-colors">Refresh</button>
158+
</div>
159+
<div class="flex flex-col gap-1 overflow-y-auto">
160+
<div v-for="el in elements" :key="el.ref || el" @click="clickElement(el.ref || el)"
161+
class="flex gap-2 px-2 py-1.5 text-xs bg-gray-100 dark:bg-gray-700 rounded cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
162+
<span class="text-blue-600 dark:text-blue-400 font-mono flex-shrink-0">{{ el.ref || el }}</span>
163+
<span class="text-gray-500 dark:text-gray-400 truncate">{{ el.desc || '' }}</span>
164+
</div>
165+
<div v-if="elements.length === 0" class="py-2 text-center text-xs text-gray-400">No elements. Click Refresh.</div>
166+
</div>
167+
</div>
168+
</div>
169+
169170
</div>
170171
</div>
171172
</div>
172173
173174
<!-- Quick Actions Bar -->
174-
<div class="flex flex-wrap items-center gap-4 px-4 py-2 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
175+
<div class="flex flex-wrap items-center gap-4 pl-1 pr-4 py-2 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
176+
<div class="flex-1 flex gap-2">
177+
<input type="text" v-model="typeText" @keyup.enter="sendType" placeholder="Type text..." :disabled="!isRunning"
178+
class="flex-1 px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg outline-none focus:border-blue-500 disabled:opacity-40" />
179+
<button @click="sendType" :disabled="!isRunning || !typeText" class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 disabled:opacity-40 transition-colors">Send</button>
180+
</div>
175181
<div class="flex gap-1">
176182
<button v-for="key in ['Enter', 'Tab', 'Escape', '↑', '↓']" :key="key" @click="pressKey(key === '↑' ? 'ArrowUp' : key === '↓' ? 'ArrowDown' : key)" :disabled="!isRunning"
177183
class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 rounded disabled:opacity-40 transition-colors">{{ key === 'Escape' ? 'Esc' : key }}</button>
@@ -180,11 +186,6 @@ const BrowserPage = {
180186
<button @click="scroll('up', 300)" :disabled="!isRunning" class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 rounded disabled:opacity-40 transition-colors">▲ Scroll</button>
181187
<button @click="scroll('down', 300)" :disabled="!isRunning" class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 rounded disabled:opacity-40 transition-colors">▼ Scroll</button>
182188
</div>
183-
<div class="flex-1 flex gap-2">
184-
<input type="text" v-model="typeText" @keyup.enter="sendType" placeholder="Type text..." :disabled="!isRunning"
185-
class="flex-1 px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg outline-none focus:border-blue-500 disabled:opacity-40" />
186-
<button @click="sendType" :disabled="!isRunning || !typeText" class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 disabled:opacity-40 transition-colors">Send</button>
187-
</div>
188189
<div class="flex items-center gap-2 text-xs text-gray-500">
189190
<label class="flex items-center gap-1 cursor-pointer">
190191
<input type="checkbox" v-model="autoRefresh" class="rounded" />
@@ -310,6 +311,13 @@ const BrowserPage = {
310311
}
311312
}
312313

314+
function resizeEditor() {
315+
if (scriptEditorRef.value?.clientHeight) {
316+
console.log('setting size', scriptEditorRef.value.clientHeight)
317+
cmEditor.setSize('100%', scriptEditorRef.value.clientHeight)
318+
}
319+
}
320+
313321
// CodeMirror editor initialization
314322
function initCodeMirror() {
315323
if (!hasCodeMirror || !scriptEditorRef.value || cmEditor) return
@@ -328,12 +336,7 @@ const BrowserPage = {
328336
cmEditor.on('change', () => {
329337
scriptContent.value = cmEditor.getValue()
330338
})
331-
nextTick(() => {
332-
if (scriptEditorRef.value?.clientHeight) {
333-
console.log('setting size', scriptEditorRef.value.clientHeight)
334-
cmEditor.setSize('100%', scriptEditorRef.value.clientHeight)
335-
}
336-
})
339+
nextTick(resizeEditor)
337340
}
338341

339342
function destroyCodeMirror() {
@@ -387,6 +390,7 @@ const BrowserPage = {
387390
debugLogResizing = false
388391
document.removeEventListener('mousemove', onMove)
389392
document.removeEventListener('mouseup', onUp)
393+
nextTick(resizeEditor)
390394
}
391395
document.addEventListener('mousemove', onMove)
392396
document.addEventListener('mouseup', onUp)

‎llms/ui/app.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -963,6 +963,12 @@
963963
.w-64 {
964964
width: calc(var(--spacing) * 64);
965965
}
966+
.w-68 {
967+
width: calc(var(--spacing) * 68);
968+
}
969+
.w-69 {
970+
width: calc(var(--spacing) * 69);
971+
}
966972
.w-72 {
967973
width: calc(var(--spacing) * 72);
968974
}
@@ -1020,6 +1026,9 @@
10201026
.max-w-\[1600px\] {
10211027
max-width: 1600px;
10221028
}
1029+
.max-w-\[calc\(100\%-323px\)\] {
1030+
max-width: calc(100% - 323px);
1031+
}
10231032
.max-w-full {
10241033
max-width: 100%;
10251034
}

0 commit comments

Comments
 (0)