all: fix formatting
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index cc16115..22d4b3f 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -194,48 +194,48 @@
*/
private scrollToBottom(): void {
if (!this.scrollContainer.value) return;
-
+
// Use instant scroll to ensure we reach the exact bottom
this.scrollContainer.value.scrollTo({
top: this.scrollContainer.value.scrollHeight,
behavior: "instant",
});
}
-
+
/**
* Scroll to bottom with retry logic to handle dynamic content
*/
private scrollToBottomWithRetry(): void {
if (!this.scrollContainer.value) return;
-
+
let attempts = 0;
const maxAttempts = 5;
const retryInterval = 50;
-
+
const tryScroll = () => {
if (!this.scrollContainer.value) return;
-
+
const container = this.scrollContainer.value;
const targetScrollTop = container.scrollHeight - container.clientHeight;
-
+
// Scroll to the calculated position
container.scrollTo({
top: targetScrollTop,
behavior: "instant",
});
-
+
attempts++;
-
+
// Check if we're actually at the bottom
const actualScrollTop = container.scrollTop;
const isAtBottom = Math.abs(targetScrollTop - actualScrollTop) <= 1;
-
+
if (!isAtBottom && attempts < maxAttempts) {
// Still not at bottom and we have attempts left, try again
setTimeout(tryScroll, retryInterval);
}
};
-
+
tryScroll();
}
@@ -276,13 +276,13 @@
private _handleScroll(event) {
if (!this.scrollContainer.value) return;
-
+
const container = this.scrollContainer.value;
const isAtBottom =
Math.abs(
- container.scrollHeight - container.clientHeight - container.scrollTop
+ container.scrollHeight - container.clientHeight - container.scrollTop,
) <= 3; // Increased tolerance to 3px for better detection
-
+
if (isAtBottom) {
this.scrollingState = "pinToLatest";
} else {
@@ -350,15 +350,15 @@
<p class="welcome-box-content">
Ask it to implement a task or answer a question in the chat box
- below. It can edit and run your code, all in the container. Sketch
- will create commits in a newly created git branch, which you can
- look at and comment on in the Diff tab. Once you're done, you'll
- find that branch available in your (original) repo.
+ below. It can edit and run your code, all in the container.
+ Sketch will create commits in a newly created git branch, which
+ you can look at and comment on in the Diff tab. Once you're
+ done, you'll find that branch available in your (original) repo.
</p>
<p class="welcome-box-content">
Because Sketch operates a container per session, you can run
- Sketch in parallel to work on multiple ideas or even the same idea
- with different approaches.
+ Sketch in parallel to work on multiple ideas or even the same
+ idea with different approaches.
</p>
</div>
</div>
diff --git a/webui/src/web-components/sketch-todo-panel.ts b/webui/src/web-components/sketch-todo-panel.ts
index d8e34f0..540397b 100644
--- a/webui/src/web-components/sketch-todo-panel.ts
+++ b/webui/src/web-components/sketch-todo-panel.ts
@@ -49,7 +49,12 @@
overflow-y: auto;
padding: 8px;
padding-bottom: 20px; /* Extra bottom padding for better scrolling */
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ sans-serif;
font-size: 12px;
line-height: 1.4;
/* Ensure scrollbar is always accessible */
@@ -102,16 +107,12 @@
border-left: 3px solid #e0e0e0;
}
-
-
.todo-status-icon {
font-size: 14px;
margin-top: 1px;
flex-shrink: 0;
}
-
-
.todo-main {
flex: 1;
min-width: 0;
@@ -124,8 +125,6 @@
word-wrap: break-word;
}
-
-
.todo-header-text {
display: flex;
align-items: center;
@@ -153,8 +152,12 @@
}
@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
`;
@@ -175,21 +178,19 @@
}
}
-
-
private renderTodoItem(item: TodoItem) {
- const statusIcon = {
- queued: '⚪',
- 'in-progress': '🦉',
- completed: '✅'
- }[item.status] || '?';
+ const statusIcon =
+ {
+ queued: "⚪",
+ "in-progress": "🦉",
+ completed: "✅",
+ }[item.status] || "?";
return html`
<div class="todo-item ${item.status}">
<div class="todo-status-icon">${statusIcon}</div>
<div class="todo-main">
<div class="todo-content-text">${item.task}</div>
-
</div>
</div>
`;
@@ -201,7 +202,16 @@
}
const todoIcon = html`
- <svg class="todo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <svg
+ class="todo-icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
<path d="M9 11l3 3L22 4"></path>
<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
</svg>
@@ -217,21 +227,25 @@
`;
} else if (this.error) {
contentElement = html`
- <div class="todo-content error">
- Error: ${this.error}
- </div>
+ <div class="todo-content error">Error: ${this.error}</div>
`;
- } else if (!this.todoList || !this.todoList.items || this.todoList.items.length === 0) {
+ } else if (
+ !this.todoList ||
+ !this.todoList.items ||
+ this.todoList.items.length === 0
+ ) {
contentElement = html`
- <div class="todo-content empty">
- No todos available
- </div>
+ <div class="todo-content empty">No todos available</div>
`;
} else {
const totalCount = this.todoList.items.length;
- const completedCount = this.todoList.items.filter(item => item.status === 'completed').length;
- const inProgressCount = this.todoList.items.filter(item => item.status === 'in-progress').length;
-
+ const completedCount = this.todoList.items.filter(
+ (item) => item.status === "completed",
+ ).length;
+ const inProgressCount = this.todoList.items.filter(
+ (item) => item.status === "in-progress",
+ ).length;
+
contentElement = html`
<div class="todo-header">
<div class="todo-header-text">
@@ -241,14 +255,12 @@
</div>
</div>
<div class="todo-content">
- ${this.todoList.items.map(item => this.renderTodoItem(item))}
+ ${this.todoList.items.map((item) => this.renderTodoItem(item))}
</div>
`;
}
- return html`
- ${contentElement}
- `;
+ return html` ${contentElement} `;
}
}
@@ -256,4 +268,4 @@
interface HTMLElementTagNameMap {
"sketch-todo-panel": SketchTodoPanel;
}
-}
\ No newline at end of file
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
index 556d1be..a1f8ea0 100644
--- a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
@@ -21,9 +21,7 @@
render() {
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 🧹 Clear console logs
- </span>
+ <span slot="summary" class="summary-text"> 🧹 Clear console logs </span>
<div slot="input">
<div>Clear all console logs</div>
</div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-click.ts b/webui/src/web-components/sketch-tool-card-browser-click.ts
index c19114c..9264a64 100644
--- a/webui/src/web-components/sketch-tool-card-browser-click.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-click.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.selector-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -41,9 +41,7 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 🖱️ ${selector}
- </span>
+ <span slot="summary" class="summary-text"> 🖱️ ${selector} </span>
<div slot="input">
<div>Click: <span class="selector-input">${selector}</span></div>
</div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-eval.ts b/webui/src/web-components/sketch-tool-card-browser-eval.ts
index 15fcc16..8a1ec54 100644
--- a/webui/src/web-components/sketch-tool-card-browser-eval.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-eval.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.expression-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -40,7 +40,8 @@
}
// Truncate expression for summary if too long
- const displayExpression = expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
+ const displayExpression =
+ expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
@@ -48,7 +49,9 @@
📱 ${displayExpression}
</span>
<div slot="input">
- <div>Evaluate: <span class="expression-input">${expression}</span></div>
+ <div>
+ Evaluate: <span class="expression-input">${expression}</span>
+ </div>
</div>
<div slot="result">
${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-get-text.ts b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
index b093650..e97bf70 100644
--- a/webui/src/web-components/sketch-tool-card-browser-get-text.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.selector-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -41,11 +41,11 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 📖 ${selector}
- </span>
+ <span slot="summary" class="summary-text"> 📖 ${selector} </span>
<div slot="input">
- <div>Get text from: <span class="selector-input">${selector}</span></div>
+ <div>
+ Get text from: <span class="selector-input">${selector}</span>
+ </div>
</div>
<div slot="result">
${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-navigate.ts b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
index 37efbd1..cc9779e 100644
--- a/webui/src/web-components/sketch-tool-card-browser-navigate.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.url-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -41,9 +41,7 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 🌐 ${url}
- </span>
+ <span slot="summary" class="summary-text"> 🌐 ${url} </span>
<div slot="input">
<div>Navigate to: <span class="url-input">${url}</span></div>
</div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-read-image.ts b/webui/src/web-components/sketch-tool-card-browser-read-image.ts
index 554feee..cdb96cc 100644
--- a/webui/src/web-components/sketch-tool-card-browser-read-image.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-read-image.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.path-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -40,13 +40,11 @@
}
// Show just the filename in summary
- const filename = path.split('/').pop() || path;
+ const filename = path.split("/").pop() || path;
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 🖼️ ${filename}
- </span>
+ <span slot="summary" class="summary-text"> 🖼️ ${filename} </span>
<div slot="input">
<div>Read image: <span class="path-input">${path}</span></div>
</div>
diff --git a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
index 55d080d..8d1debb 100644
--- a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.limit-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -45,7 +45,10 @@
📜 Console logs (${limit})
</span>
<div slot="input">
- <div>Get recent console logs: <span class="limit-input">limit ${limit}</span></div>
+ <div>
+ Get recent console logs:
+ <span class="limit-input">limit ${limit}</span>
+ </div>
</div>
<div slot="result">
${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-resize.ts b/webui/src/web-components/sketch-tool-card-browser-resize.ts
index 0d04091..2d9fde9 100644
--- a/webui/src/web-components/sketch-tool-card-browser-resize.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-resize.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.size-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -43,11 +43,11 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 🖼️ ${width}x${height}
- </span>
+ <span slot="summary" class="summary-text"> 🖼️ ${width}x${height} </span>
<div slot="input">
- <div>Resize to: <span class="size-input">${width}x${height}</span></div>
+ <div>
+ Resize to: <span class="size-input">${width}x${height}</span>
+ </div>
</div>
<div slot="result">
${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
index 4070882..be765d0 100644
--- a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.selector-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -41,11 +41,11 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- 🔄 ${selector}
- </span>
+ <span slot="summary" class="summary-text"> 🔄 ${selector} </span>
<div slot="input">
- <div>Scroll into view: <span class="selector-input">${selector}</span></div>
+ <div>
+ Scroll into view: <span class="selector-input">${selector}</span>
+ </div>
</div>
<div slot="result">
${this.toolCall?.result_message?.tool_result
diff --git a/webui/src/web-components/sketch-tool-card-browser-type.ts b/webui/src/web-components/sketch-tool-card-browser-type.ts
index 1f58eb8..3cddd3f 100644
--- a/webui/src/web-components/sketch-tool-card-browser-type.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-type.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.selector-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -25,7 +25,7 @@
display: inline-block;
word-break: break-all;
}
-
+
.text-input {
font-family: monospace;
background: rgba(0, 100, 0, 0.05);
diff --git a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
index eb3306b..d5fbda9 100644
--- a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
@@ -16,7 +16,7 @@
color: #444;
word-break: break-all;
}
-
+
.selector-input {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
@@ -41,9 +41,7 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- ⏳ ${selector}
- </span>
+ <span slot="summary" class="summary-text"> ⏳ ${selector} </span>
<div slot="input">
<div>Wait for: <span class="selector-input">${selector}</span></div>
</div>