webui: Refactor tool calls
diff --git a/webui/src/web-components/sketch-tool-card-title.ts b/webui/src/web-components/sketch-tool-card-title.ts
new file mode 100644
index 0000000..50b3380
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-title.ts
@@ -0,0 +1,45 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+
+@customElement("sketch-tool-card-title")
+export class SketchToolCardTitle 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;
+ }
+ `;
+
+ 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">
+ Title: "${inputData.title}" | Branch: sketch/${inputData.branch_name}
+ </span>
+ <div slot="input">
+ <div>Set title to: <b>${inputData.title}</b></div>
+ <div>Set branch to: <code>sketch/${inputData.branch_name}</code></div>
+ </div>
+ </sketch-tool-card>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-tool-card-title": SketchToolCardTitle;
+ }
+}