loop: add todo checklist
This should improve Sketch's executive function and user communication.
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 1b27570..6a0f683 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -74,9 +74,9 @@
}
#jump-to-latest {
display: none;
- position: fixed;
- bottom: 100px;
- right: 0;
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
background: rgb(33, 150, 243);
color: white;
border-radius: 8px;
@@ -85,6 +85,7 @@
font-size: x-large;
opacity: 0.5;
cursor: pointer;
+ z-index: 50;
}
#jump-to-latest:hover {
opacity: 1;
@@ -292,29 +293,31 @@
// Check if messages array is empty and render welcome box if it is
if (this.messages.length === 0) {
return html`
- <div id="scroll-container">
- <div class="welcome-box">
- <h2 class="welcome-box-title">How to use Sketch</h2>
- <p class="welcome-box-content">
- Sketch is an agentic coding assistant.
- </p>
+ <div style="position: relative; height: 100%;">
+ <div id="scroll-container">
+ <div class="welcome-box">
+ <h2 class="welcome-box-title">How to use Sketch</h2>
+ <p class="welcome-box-content">
+ Sketch is an agentic coding assistant.
+ </p>
- <p class="welcome-box-content">
- Sketch has created a container with your repo.
- </p>
+ <p class="welcome-box-content">
+ Sketch has created a container with your repo.
+ </p>
- <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.
- </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.
- </p>
+ <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.
+ </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.
+ </p>
+ </div>
</div>
</div>
`;
@@ -325,56 +328,58 @@
this.llmCalls > 0 || (this.toolCalls && this.toolCalls.length > 0);
return html`
- <div id="scroll-container">
- <div class="timeline-container">
- ${repeat(
- this.messages.filter((msg) => !msg.hide_output),
- this.messageKey,
- (message, index) => {
- let previousMessageIndex =
- this.messages.findIndex((m) => m === message) - 1;
- let previousMessage =
- previousMessageIndex >= 0
- ? this.messages[previousMessageIndex]
- : undefined;
-
- // Skip hidden messages when determining previous message
- while (previousMessage && previousMessage.hide_output) {
- previousMessageIndex--;
- previousMessage =
+ <div style="position: relative; height: 100%;">
+ <div id="scroll-container">
+ <div class="timeline-container">
+ ${repeat(
+ this.messages.filter((msg) => !msg.hide_output),
+ this.messageKey,
+ (message, index) => {
+ let previousMessageIndex =
+ this.messages.findIndex((m) => m === message) - 1;
+ let previousMessage =
previousMessageIndex >= 0
? this.messages[previousMessageIndex]
: undefined;
- }
- return html`<sketch-timeline-message
- .message=${message}
- .previousMessage=${previousMessage}
- .open=${false}
- ></sketch-timeline-message>`;
- },
- )}
- ${isThinking
- ? html`
- <div class="thinking-indicator">
- <div class="thinking-bubble">
- <div class="thinking-dots">
- <div class="dot"></div>
- <div class="dot"></div>
- <div class="dot"></div>
+ // Skip hidden messages when determining previous message
+ while (previousMessage && previousMessage.hide_output) {
+ previousMessageIndex--;
+ previousMessage =
+ previousMessageIndex >= 0
+ ? this.messages[previousMessageIndex]
+ : undefined;
+ }
+
+ return html`<sketch-timeline-message
+ .message=${message}
+ .previousMessage=${previousMessage}
+ .open=${false}
+ ></sketch-timeline-message>`;
+ },
+ )}
+ ${isThinking
+ ? html`
+ <div class="thinking-indicator">
+ <div class="thinking-bubble">
+ <div class="thinking-dots">
+ <div class="dot"></div>
+ <div class="dot"></div>
+ <div class="dot"></div>
+ </div>
</div>
</div>
- </div>
- `
- : ""}
+ `
+ : ""}
+ </div>
</div>
- </div>
- <div
- id="jump-to-latest"
- class="${this.scrollingState}"
- @click=${this.scrollToBottom}
- >
- ⇩
+ <div
+ id="jump-to-latest"
+ class="${this.scrollingState}"
+ @click=${this.scrollToBottom}
+ >
+ ⇩
+ </div>
</div>
`;
}