loop: add todo checklist
This should improve Sketch's executive function and user communication.
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 584f827..307686d 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -742,6 +742,67 @@
}
}
+@customElement("sketch-tool-card-todo-write")
+export class SketchToolCardTodoWrite extends LitElement {
+ @property() toolCall: ToolCall;
+ @property() open: boolean;
+
+ static styles = css`
+ .summary-text {
+ font-style: italic;
+ color: #666;
+ }
+ `;
+
+ render() {
+ const inputData = JSON.parse(this.toolCall?.input || "{}");
+ const tasks = inputData.tasks || [];
+
+ // Generate circles based on task status
+ const circles = tasks.map(task => {
+ switch(task.status) {
+ case 'completed': return '●'; // full circle
+ case 'in-progress': return '◐'; // half circle
+ case 'queued':
+ default: return '○'; // empty circle
+ }
+ }).join(' ');
+
+ return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+ <span slot="summary" class="summary-text">
+ ${circles}
+ </span>
+ <div slot="result">
+ <pre>${this.toolCall?.result_message?.tool_result}</pre>
+ </div>
+ </sketch-tool-card>`;
+ }
+}
+
+@customElement("sketch-tool-card-todo-read")
+export class SketchToolCardTodoRead extends LitElement {
+ @property() toolCall: ToolCall;
+ @property() open: boolean;
+
+ static styles = css`
+ .summary-text {
+ font-style: italic;
+ color: #666;
+ }
+ `;
+
+ render() {
+ return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+ <span slot="summary" class="summary-text">
+ Read todo list
+ </span>
+ <div slot="result">
+ <pre>${this.toolCall?.result_message?.tool_result}</pre>
+ </div>
+ </sketch-tool-card>`;
+ }
+}
+
@customElement("sketch-tool-card-generic")
export class SketchToolCardGeneric extends LitElement {
@property() toolCall: ToolCall;
@@ -790,6 +851,8 @@
"sketch-tool-card-title": SketchToolCardTitle;
"sketch-tool-card-precommit": SketchToolCardPrecommit;
"sketch-tool-card-multiple-choice": SketchToolCardMultipleChoice;
+ "sketch-tool-card-todo-write": SketchToolCardTodoWrite;
+ "sketch-tool-card-todo-read": SketchToolCardTodoRead;
// TODO: We haven't implemented this for browser tools.
}
}