all: s/title/slug/, adjust branch handling
There are two intertwined changes here.
First, replace title with slug, and precommit with commit-message-style.
The slug makes enough of a title, and it provides a single human-readable
identifier we can use everywhere.
Second, construct the branch name on the fly instead of storing it,
out of slug, branch prefix, and retryNumber.
This removes some duplicated data, and makes the retry loop
easier to follow and reason about.
diff --git a/webui/src/web-components/DEAR_LLM.md b/webui/src/web-components/DEAR_LLM.md
index d0cf3d7..13fd9d1 100644
--- a/webui/src/web-components/DEAR_LLM.md
+++ b/webui/src/web-components/DEAR_LLM.md
@@ -17,8 +17,8 @@
- **sketch-tool-card-done**
- **sketch-tool-card-patch**
- **sketch-tool-card-take-screenshot**
- - **sketch-tool-card-title**
- - **sketch-tool-card-precommit**
+ - **sketch-tool-card-set-slug**
+ - **sketch-tool-card-commit-message-style**
- **sketch-tool-card-multiple-choice**
- **sketch-tool-card-generic** (fallback for unknown tools)
- All of these specialized components **contain** or **compose with** the base **sketch-tool-card**
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 07c355d..89ebcd5 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -164,7 +164,7 @@
text-overflow: ellipsis;
}
- .chat-title {
+ .slug-title {
margin: 0;
padding: 0;
color: rgba(82, 82, 82, 0.85);
@@ -448,26 +448,26 @@
messages: AgentMessage[] = [];
@property()
- set title(value: string) {
- const oldValue = this._title;
- this._title = value;
- this.requestUpdate("title", oldValue);
- // Update document title when title property changes
+ set slug(value: string) {
+ const oldValue = this._slug;
+ this._slug = value;
+ this.requestUpdate("slug", oldValue);
+ // Update document title when slug property changes
this.updateDocumentTitle();
}
- get title(): string {
- return this._title;
+ get slug(): string {
+ return this._slug;
}
- private _title: string = "";
+ private _slug: string = "";
private dataManager = new DataManager();
@property({ attribute: false })
containerState: State = {
state_version: 2,
- title: "",
+ slug: "",
os: "",
message_count: 0,
hostname: "",
@@ -769,10 +769,10 @@
}
/**
- * Updates the document title based on current title and connection status
+ * Updates the document title based on current slug and connection status
*/
private updateDocumentTitle(): void {
- let docTitle = `sk: ${this.title || "untitled"}`;
+ let docTitle = `sk: ${this.slug || "untitled"}`;
// Add red circle emoji if disconnected
if (this.connectionStatus === "disconnected") {
@@ -856,8 +856,8 @@
)
return;
- // Create a title that includes the sketch title
- const notificationTitle = `Sketch: ${this.title || "untitled"}`;
+ // Create a title that includes the sketch slug
+ const notificationTitle = `Sketch: ${this.slug || "untitled"}`;
// Extract the beginning of the message content (first 100 chars)
const messagePreview = message.content
@@ -937,9 +937,9 @@
}
this.containerState = state;
- this.title = state.title;
+ this.slug = state.slug || "";
- // Update document title when sketch title changes
+ // Update document title when sketch slug changes
this.updateDocumentTitle();
}
@@ -1161,7 +1161,7 @@
<div id="top-banner">
<div class="title-container">
<h1 class="banner-title">sketch</h1>
- <h2 id="chatTitle" class="chat-title">${this.title}</h2>
+ <h2 class="slug-title">${this.slug}</h2>
</div>
<!-- Container status info moved above tabs -->
diff --git a/webui/src/web-components/sketch-container-status.test.ts b/webui/src/web-components/sketch-container-status.test.ts
index eca625b..ded2917 100644
--- a/webui/src/web-components/sketch-container-status.test.ts
+++ b/webui/src/web-components/sketch-container-status.test.ts
@@ -10,7 +10,7 @@
initial_commit: "abcdef1234567890",
message_count: 42,
os: "linux",
- title: "Test Session",
+ slug: "test-session",
total_usage: {
input_tokens: 1000,
output_tokens: 2000,
@@ -76,7 +76,7 @@
hostname: "partial-host",
message_count: 10,
os: "linux",
- title: "Partial Test",
+ slug: "partial-test",
session_id: "partial-session",
ssh_available: false,
total_usage: {
diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
index 792e893..270213e 100644
--- a/webui/src/web-components/sketch-tool-calls.ts
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -1,7 +1,7 @@
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { repeat } from "lit/directives/repeat.js";
-import { ToolCall } from "../types";
+import { State, ToolCall } from "../types";
import "./sketch-tool-card";
import "./sketch-tool-card-take-screenshot";
import "./sketch-tool-card-about-sketch";
@@ -25,6 +25,9 @@
@property()
open: boolean = false;
+ @property()
+ state: State;
+
@state()
expanded: boolean = false;
@@ -124,16 +127,17 @@
.open=${open}
.toolCall=${toolCall}
></sketch-tool-card-think>`;
- case "title":
- return html`<sketch-tool-card-title
+ case "set-slug":
+ return html`<sketch-tool-card-set-slug
.open=${open}
.toolCall=${toolCall}
- ></sketch-tool-card-title>`;
- case "precommit":
- return html`<sketch-tool-card-precommit
+ ></sketch-tool-card-set-slug>`;
+ case "commit-message-style":
+ return html`<sketch-tool-card-commit-message-style
.open=${open}
.toolCall=${toolCall}
- ></sketch-tool-card-precommit>`;
+ .state=${this.state}
+ ></sketch-tool-card-commit-message-style>`;
case "browser_take_screenshot":
return html`<sketch-tool-card-take-screenshot
.open=${open}
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 28edf3c..c12f722 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -563,8 +563,8 @@
}
}
-@customElement("sketch-tool-card-title")
-export class SketchToolCardTitle extends LitElement {
+@customElement("sketch-tool-card-set-slug")
+export class SketchToolCardSetSlug extends LitElement {
@property() toolCall: ToolCall;
@property() open: boolean;
@@ -587,18 +587,18 @@
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
<span slot="summary" class="summary-text">
- Title: "${inputData.title}"
+ Slug: "${inputData.slug}"
</span>
<div slot="input">
- <div>Set title to: <b>${inputData.title}</b></div>
+ <div>Set slug to: <b>${inputData.slug}</b></div>
</div>
</sketch-tool-card>
`;
}
}
-@customElement("sketch-tool-card-precommit")
-export class SketchToolCardPrecommit extends LitElement {
+@customElement("sketch-tool-card-commit-message-style")
+export class SketchToolCardCommitMessageStyle extends LitElement {
@property()
toolCall: ToolCall;
@@ -634,18 +634,8 @@
}
render() {
- const inputData = JSON.parse(this.toolCall?.input || "{}");
return html`
<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
- <span slot="summary" class="summary-text">
- Branch: ${this.state?.branch_prefix}${inputData.branch_name}
- </span>
- <div slot="input">
- <div>
- Set branch to:
- <code>${this.state?.branch_prefix}${inputData.branch_name}</code>
- </div>
- </div>
</sketch-tool-card>
`;
}
@@ -960,8 +950,8 @@
"sketch-tool-card-done": SketchToolCardDone;
"sketch-tool-card-patch": SketchToolCardPatch;
"sketch-tool-card-think": SketchToolCardThink;
- "sketch-tool-card-title": SketchToolCardTitle;
- "sketch-tool-card-precommit": SketchToolCardPrecommit;
+ "sketch-tool-card-set-slug": SketchToolCardSetSlug;
+ "sketch-tool-card-commit-message-style": SketchToolCardCommitMessageStyle;
"sketch-tool-card-multiple-choice": SketchToolCardMultipleChoice;
"sketch-tool-card-todo-write": SketchToolCardTodoWrite;
"sketch-tool-card-todo-read": SketchToolCardTodoRead;