loop: split title tool into title and precommit tools

title wants to be called early, as soon as the topic is clear.
precommit wants to be called late, just before first git commit.

Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
index 8842aee..ae63de0 100644
--- a/webui/src/web-components/sketch-tool-calls.ts
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -111,6 +111,11 @@
           .open=${open}
           .toolCall=${toolCall}
         ></sketch-tool-card-title>`;
+      case "precommit":
+        return html`<sketch-tool-card-precommit
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-precommit>`;
       case "browser_screenshot":
         return html`<sketch-tool-card-screenshot
           .open=${open}
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 0181673..b63e021 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -507,10 +507,57 @@
     return html`
       <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
         <span slot="summary" class="summary-text">
-          Title: "${inputData.title}" | Branch: sketch/${inputData.branch_name}
+          Title: "${inputData.title}"
         </span>
         <div slot="input">
           <div>Set title to: <b>${inputData.title}</b></div>
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+@customElement("sketch-tool-card-precommit")
+export class SketchToolCardPrecommit extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-style: italic;
+    }
+    pre {
+      display: inline;
+      font-family: monospace;
+      background: rgb(236, 236, 236);
+      padding: 2px 4px;
+      border-radius: 2px;
+      margin: 0;
+    }
+  `;
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  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: sketch/${inputData.branch_name}
+        </span>
+        <div slot="input">
           <div>Set branch to: <code>sketch/${inputData.branch_name}</code></div>
         </div>
       </sketch-tool-card>
@@ -692,6 +739,7 @@
     "sketch-tool-card-patch": SketchToolCardPatch;
     "sketch-tool-card-think": SketchToolCardThink;
     "sketch-tool-card-title": SketchToolCardTitle;
+    "sketch-tool-card-precommit": SketchToolCardPrecommit;
     "sketch-tool-card-multiple-choice": SketchToolCardMultipleChoice;
   }
 }