diff --git a/webui/src/fixtures/dummy.ts b/webui/src/fixtures/dummy.ts
index 39148cd..9eeb320 100644
--- a/webui/src/fixtures/dummy.ts
+++ b/webui/src/fixtures/dummy.ts
@@ -358,11 +358,11 @@
       codereview: 1,
       done: 2,
       patch: 1,
-      title: 1,
+
     },
   },
   initial_commit: "a6c5a08a451ef1082774a7affb6af58775e7bc16",
-  title: "Add a line to dummy.txt and commit the change",
+  slug: "add-line-dummy-commit",
   hostname: "MacBook-Pro-9.local",
   session_id: "dummy-session",
   ssh_available: false,
diff --git a/webui/src/types.ts b/webui/src/types.ts
index 713f9f6..81d2d1d 100644
--- a/webui/src/types.ts
+++ b/webui/src/types.ts
@@ -66,7 +66,7 @@
 	message_count: number;
 	total_usage?: CumulativeUsage | null;
 	initial_commit: string;
-	title: string;
+	slug?: string;
 	branch_name?: string;
 	branch_prefix?: string;
 	hostname: string;
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;