diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
index 70bf26b..92fae9e 100644
--- a/webui/src/web-components/demo/mock-git-data-service.ts
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -10,6 +10,8 @@
 export class MockGitDataService implements GitDataService {
   constructor() {
     console.log("MockGitDataService instance created");
+    // Setup mock push endpoints when service is created
+    setupMockPushEndpoints();
   }
 
   // Mock commit history
@@ -573,3 +575,70 @@
     ];
   }
 }
+
+// Mock HTTP endpoints for push demo
+export function setupMockPushEndpoints() {
+  // Mock the git/pushinfo endpoint
+  const originalFetch = window.fetch;
+
+  window.fetch = async (url: RequestInfo | URL, init?: RequestInit) => {
+    const urlString = typeof url === "string" ? url : url.toString();
+
+    // Mock pushinfo endpoint
+    if (urlString.includes("/git/pushinfo")) {
+      await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate network delay
+
+      return new Response(
+        JSON.stringify({
+          hash: "abc123456789",
+          subject: "Implement new file picker UI",
+          remotes: [
+            {
+              name: "origin",
+              url: "https://github.com/boldsoftware/bold.git",
+              display_name: "boldsoftware/bold",
+              is_github: true,
+            },
+            {
+              name: "upstream",
+              url: "https://github.com/anotheruser/bold.git",
+              display_name: "anotheruser/bold",
+              is_github: true,
+            },
+          ],
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    // Mock push endpoint
+    if (urlString.includes("/git/push")) {
+      await new Promise((resolve) => setTimeout(resolve, 1500)); // Simulate push delay
+
+      const body = init?.body ? JSON.parse(init.body as string) : {};
+      const isDryRun = body.dry_run || false;
+
+      const mockOutput = isDryRun
+        ? `To https://github.com/boldsoftware/bold.git\n   abc1234..def5678  ${body.branch || "main"} -> ${body.branch || "main"} (dry-run)`
+        : `To https://github.com/boldsoftware/bold.git\n   abc1234..def5678  ${body.branch || "main"} -> ${body.branch || "main"}\n\nCreate a pull request for '${body.branch || "main"}' on GitHub by visiting:\n  https://github.com/boldsoftware/bold/pull/new/${body.branch || "main"}`;
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          output: mockOutput,
+          dry_run: isDryRun,
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    // Fall back to original fetch for other requests
+    return originalFetch(url, init);
+  };
+}
diff --git a/webui/src/web-components/demo/sketch-push-button.demo.html b/webui/src/web-components/demo/sketch-push-button.demo.html
new file mode 100644
index 0000000..41f750b
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-push-button.demo.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Push Button Demo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        margin: 0;
+        padding: 20px;
+        background-color: #f9fafb;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="max-w-4xl mx-auto">
+      <h1 class="text-2xl font-bold mb-8 text-gray-800">
+        Push Button Component Demo
+      </h1>
+
+      <div class="bg-white rounded-lg shadow-lg p-6">
+        <sketch-push-button-demo></sketch-push-button-demo>
+      </div>
+    </div>
+
+    <script type="module" src="./sketch-push-button.demo.ts"></script>
+  </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-push-button.demo.ts b/webui/src/web-components/demo/sketch-push-button.demo.ts
new file mode 100644
index 0000000..9b54c01
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-push-button.demo.ts
@@ -0,0 +1,47 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { MockGitDataService } from "./mock-git-data-service.js";
+import "../sketch-push-button.js";
+
+@customElement("sketch-push-button-demo")
+export class SketchPushButtonDemo extends LitElement {
+  @state()
+  private _gitDataService = new MockGitDataService();
+
+  protected createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`
+      <div
+        class="p-4 bg-white rounded-lg shadow-sm border border-gray-200 max-w-md mx-auto"
+      >
+        <h2 class="text-lg font-semibold mb-4">Push Button Demo</h2>
+
+        <div class="mb-4">
+          <p class="text-sm text-gray-600 mb-2">
+            Test the push button component:
+          </p>
+          <sketch-push-button></sketch-push-button>
+        </div>
+
+        <div class="text-xs text-gray-500">
+          <p>Click the push button to test:</p>
+          <ul class="list-disc list-inside mt-1">
+            <li>Modal opens with git information</li>
+            <li>Input fields can be disabled during loading</li>
+            <li>Buttons show individual spinners</li>
+            <li>No full modal overwrite during operations</li>
+          </ul>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-push-button-demo": SketchPushButtonDemo;
+  }
+}
diff --git a/webui/src/web-components/sketch-app-shell-base.ts b/webui/src/web-components/sketch-app-shell-base.ts
index 3e3dbe3..3ddc183 100644
--- a/webui/src/web-components/sketch-app-shell-base.ts
+++ b/webui/src/web-components/sketch-app-shell-base.ts
@@ -15,6 +15,7 @@
 import "./sketch-monaco-view";
 import "./sketch-network-status";
 import "./sketch-call-status";
+import "./sketch-push-button";
 import "./sketch-terminal";
 import "./sketch-timeline";
 import "./sketch-view-mode-select";
@@ -156,6 +157,7 @@
     this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
     this._handleMutlipleChoiceSelected =
       this._handleMutlipleChoiceSelected.bind(this);
+    this._handlePushRebaseRequest = this._handlePushRebaseRequest.bind(this);
     this._handleStopClick = this._handleStopClick.bind(this);
     this._handleEndClick = this._handleEndClick.bind(this);
     this._handleNotificationsToggle =
@@ -203,6 +205,10 @@
       "multiple-choice-selected",
       this._handleMutlipleChoiceSelected,
     );
+    window.addEventListener(
+      "push-rebase-request",
+      this._handlePushRebaseRequest,
+    );
 
     // register event listeners
     this.dataManager.addEventListener(
@@ -251,6 +257,10 @@
       "multiple-choice-selected",
       this._handleMutlipleChoiceSelected,
     );
+    window.removeEventListener(
+      "push-rebase-request",
+      this._handlePushRebaseRequest,
+    );
 
     // unregister data manager event listeners
     this.dataManager.removeEventListener(
@@ -770,6 +780,25 @@
     }
   }
 
+  async _handlePushRebaseRequest(e: CustomEvent) {
+    const chatInput = this.querySelector(
+      "sketch-chat-input",
+    ) as SketchChatInput;
+    if (chatInput) {
+      if (chatInput.content && chatInput.content.trim() !== "") {
+        chatInput.content += "\n\n";
+      }
+      chatInput.content += e.detail.message;
+      chatInput.focus();
+      // Adjust textarea height to accommodate new content
+      requestAnimationFrame(() => {
+        if (chatInput.adjustChatSpacing) {
+          chatInput.adjustChatSpacing();
+        }
+      });
+    }
+  }
+
   async _sendChat(e: CustomEvent) {
     console.log("app shell: _sendChat", e);
     e.preventDefault();
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index 2bd9935..bd9524b 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -3,6 +3,7 @@
 import { customElement, property, state } from "lit/decorators.js";
 import { formatNumber } from "../utils";
 import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-push-button";
 
 @customElement("sketch-container-status")
 export class SketchContainerStatus extends SketchTailwindElement {
@@ -645,6 +646,9 @@
           `;
         })()}
 
+        <!-- Push button -->
+        <sketch-push-button class="ml-2"></sketch-push-button>
+
         <!-- Info toggle button -->
         <button
           class="info-toggle ml-2 w-6 h-6 rounded-full flex items-center justify-center ${this
@@ -665,6 +669,7 @@
           class="${this.showDetails
             ? "block"
             : "hidden"} absolute min-w-max top-full z-100 bg-white rounded-lg p-4 shadow-lg mt-1.5"
+          style="left: 50%; transform: translateX(-50%);"
         >
           <!-- Last Commit section moved to main grid -->
 
diff --git a/webui/src/web-components/sketch-push-button.ts b/webui/src/web-components/sketch-push-button.ts
new file mode 100644
index 0000000..b43ca4b
--- /dev/null
+++ b/webui/src/web-components/sketch-push-button.ts
@@ -0,0 +1,537 @@
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
+import type { Remote } from "../types.js";
+
+@customElement("sketch-push-button")
+export class SketchPushButton extends SketchTailwindElement {
+  @state()
+  private _modalOpen = false;
+
+  @state()
+  private _loading = false;
+
+  @state()
+  private _pushingAction: "dry-run" | "push" | null = null;
+
+  @state()
+  private _headCommit: { hash: string; subject: string } | null = null;
+
+  @state()
+  private _remotes: Remote[] = [];
+
+  @state()
+  private _selectedRemote = "";
+
+  @state()
+  private _branch = "";
+
+  @state()
+  private _pushResult: {
+    success: boolean;
+    output: string;
+    error?: string;
+    dry_run: boolean;
+  } | null = null;
+
+  private async _openModal() {
+    this._modalOpen = true;
+    this._loading = true;
+    this._pushResult = null;
+
+    try {
+      // Fetch push info (HEAD commit and remotes)
+      const response = await fetch("./git/pushinfo");
+      if (response.ok) {
+        const data = await response.json();
+        this._headCommit = {
+          hash: data.hash,
+          subject: data.subject,
+        };
+        this._remotes = data.remotes;
+
+        // Auto-select first remote if available
+        if (this._remotes.length > 0) {
+          this._selectedRemote = this._remotes[0].name;
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching git data:", error);
+    } finally {
+      this._loading = false;
+    }
+  }
+
+  private _closeModal() {
+    this._modalOpen = false;
+    this._pushResult = null;
+  }
+
+  private _clickOutsideHandler = (event: MouseEvent) => {
+    if (this._modalOpen && !this.contains(event.target as Node)) {
+      this._closeModal();
+    }
+  };
+
+  // Close the modal when clicking outside
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this._clickOutsideHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._clickOutsideHandler);
+  }
+
+  private async _handlePush(dryRun: boolean = false, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+
+    if (!this._selectedRemote || !this._branch || !this._headCommit) {
+      return;
+    }
+
+    this._loading = true;
+    this._pushingAction = dryRun ? "dry-run" : "push";
+
+    try {
+      const response = await fetch("./git/push", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          remote: this._selectedRemote,
+          branch: this._branch,
+          commit: this._headCommit.hash,
+          dry_run: dryRun,
+        }),
+      });
+
+      if (response.ok) {
+        this._pushResult = await response.json();
+      } else {
+        this._pushResult = {
+          success: false,
+          output: "",
+          error: `HTTP ${response.status}: ${response.statusText}`,
+          dry_run: dryRun,
+        };
+      }
+    } catch (error) {
+      this._pushResult = {
+        success: false,
+        output: "",
+        error: `Network error: ${error}`,
+        dry_run: dryRun,
+      };
+    } finally {
+      this._loading = false;
+      this._pushingAction = null;
+    }
+  }
+
+  private _handleRebase(event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+
+    // Send message to chat asking agent to rebase
+    const message = `fetch and rebase onto ${this._selectedRemote}/${this._branch}; force tag ${this._selectedRemote}/${this._branch} as the new sketch-base`;
+
+    // Dispatch custom event to send message to chat
+    const chatEvent = new CustomEvent("push-rebase-request", {
+      detail: { message },
+      bubbles: true,
+      composed: true,
+    });
+
+    window.dispatchEvent(chatEvent);
+  }
+
+  private _formatRemoteDisplay(remote: Remote): string {
+    return `${remote.display_name} (${remote.name})`;
+  }
+
+  private _renderRemoteDisplay(remote: Remote) {
+    const displayText = this._formatRemoteDisplay(remote);
+    if (remote.is_github) {
+      const githubURL = `https://github.com/${remote.display_name}`;
+      if (githubURL) {
+        return html`<a
+          href="${githubURL}"
+          target="_blank"
+          class="text-blue-600 hover:text-blue-800 underline"
+          >${displayText}</a
+        >`;
+      }
+    }
+    return html`<span>${displayText}</span>`;
+  }
+
+  private _makeLinksClickable(output: string): string {
+    // Regex to match http:// or https:// URLs
+    return output.replace(/(https?:\/\/[^\s]+)/g, (match) => {
+      // Clean up URL (remove trailing punctuation)
+      const cleanURL = match.replace(/[.,!?;]+$/, "");
+      const trailingPunctuation = match.substring(cleanURL.length);
+      return `<a href="${cleanURL}" target="_blank" class="text-blue-600 hover:text-blue-800 underline">${cleanURL}</a>${trailingPunctuation}`;
+    });
+  }
+
+  private _getSelectedRemote(): Remote | null {
+    return this._remotes.find((r) => r.name === this._selectedRemote) || null;
+  }
+
+  private _computeBranchURL(): string {
+    const selectedRemote = this._getSelectedRemote();
+    if (!selectedRemote) {
+      return "";
+    }
+    return `https://github.com/${selectedRemote?.display_name}/tree/${this._branch}`;
+  }
+
+  private _renderRemoteSelection() {
+    if (this._remotes.length === 0) {
+      return html``;
+    }
+
+    if (this._remotes.length === 1) {
+      // Single remote - just show it, no selection needed
+      const remote = this._remotes[0];
+      if (!this._selectedRemote) {
+        this._selectedRemote = remote.name;
+      }
+      return html`
+        <div class="mb-3">
+          <label class="block text-xs font-medium mb-1">Remote:</label>
+          <div class="p-2 bg-gray-50 rounded text-xs text-gray-700">
+            ${this._renderRemoteDisplay(remote)}
+          </div>
+        </div>
+      `;
+    }
+
+    if (this._remotes.length === 2) {
+      // Two remotes - use radio buttons
+      return html`
+        <div class="mb-3">
+          <label class="block text-xs font-medium mb-1">Remote:</label>
+          <div class="space-y-2">
+            ${this._remotes.map(
+              (remote) => html`
+                <label class="flex items-center space-x-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="remote"
+                    .value=${remote.name}
+                    .checked=${remote.name === this._selectedRemote}
+                    ?disabled=${this._loading}
+                    @change=${(e: Event) => {
+                      this._selectedRemote = (
+                        e.target as HTMLInputElement
+                      ).value;
+                    }}
+                    class="text-blue-600 focus:ring-blue-500"
+                  />
+                  <span class="text-xs text-gray-700"
+                    >${this._renderRemoteDisplay(remote)}</span
+                  >
+                </label>
+              `,
+            )}
+          </div>
+        </div>
+      `;
+    }
+
+    // Three or more remotes - use dropdown
+    return html`
+      <div class="mb-3">
+        <label class="block text-xs font-medium mb-1">Remote:</label>
+        <select
+          .value=${this._selectedRemote}
+          ?disabled=${this._loading}
+          @change=${(e: Event) => {
+            this._selectedRemote = (e.target as HTMLSelectElement).value;
+          }}
+          class="w-full p-2 border border-gray-300 rounded text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        >
+          <option value="">Select a remote...</option>
+          ${this._remotes.map(
+            (remote) => html`
+              <option
+                value="${remote.name}"
+                ?selected=${remote.name === this._selectedRemote}
+              >
+                ${this._formatRemoteDisplay(remote)}
+              </option>
+            `,
+          )}
+        </select>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="relative">
+        <!-- Push Button -->
+        <button
+          @click=${this._openModal}
+          class="flex items-center gap-1.5 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
+          title="Push current HEAD to remote"
+        >
+          <svg
+            class="w-4 h-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M12 19V5M5 12l7-7 7 7" />
+          </svg>
+          <span class="max-sm:hidden">Push</span>
+        </button>
+
+        <!-- Overlay Popup -->
+        <div
+          class="${this._modalOpen
+            ? "block"
+            : "hidden"} absolute top-full z-50 bg-white rounded-lg p-4 shadow-lg mt-1.5 border border-gray-200"
+          style="width: 420px; left: 50%; transform: translateX(-50%);"
+        >
+          <div class="flex justify-between items-center mb-3">
+            <h3 class="text-sm font-semibold">Push to Remote</h3>
+            <button
+              @click=${this._closeModal}
+              class="text-gray-500 hover:text-gray-700 transition-colors"
+            >
+              <svg
+                class="w-4 h-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          ${this._loading && !this._headCommit
+            ? html`
+                <div class="text-center py-4">
+                  <div
+                    class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
+                  ></div>
+                  <p class="mt-2 text-gray-600 text-xs">Loading...</p>
+                </div>
+              `
+            : html`
+                <!-- Current HEAD info -->
+                ${this._headCommit
+                  ? html`
+                      <div class="mb-3 p-2 bg-gray-50 rounded">
+                        <p class="text-xs">
+                          <span class="text-gray-600 font-mono"
+                            >${this._headCommit.hash.substring(0, 7)}</span
+                          >
+                          <span class="text-gray-800 ml-2"
+                            >${this._headCommit.subject}</span
+                          >
+                        </p>
+                      </div>
+                    `
+                  : ""}
+
+                <!-- Remote selection -->
+                ${this._renderRemoteSelection()}
+
+                <!-- Branch input -->
+                <div class="mb-3">
+                  <label class="block text-xs font-medium mb-1">Branch:</label>
+                  <input
+                    type="text"
+                    .value=${this._branch}
+                    ?disabled=${this._loading}
+                    @input=${(e: Event) => {
+                      this._branch = (e.target as HTMLInputElement).value;
+                    }}
+                    placeholder="Enter branch name..."
+                    class="w-full p-2 border border-gray-300 rounded text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <!-- Action buttons -->
+                <div class="flex gap-2 mb-3">
+                  <button
+                    @click=${(e: Event) => this._handlePush(true, e)}
+                    ?disabled=${!this._selectedRemote ||
+                    !this._branch ||
+                    !this._headCommit ||
+                    this._loading}
+                    class="flex-1 px-3 py-1.5 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors flex items-center justify-center"
+                  >
+                    ${this._pushingAction === "dry-run"
+                      ? html`
+                          <div
+                            class="animate-spin rounded-full h-3 w-3 border-b border-white mr-1"
+                          ></div>
+                        `
+                      : ""}
+                    Dry Run
+                  </button>
+                  <button
+                    @click=${(e: Event) => this._handlePush(false, e)}
+                    ?disabled=${!this._selectedRemote ||
+                    !this._branch ||
+                    !this._headCommit ||
+                    this._loading}
+                    class="flex-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded text-xs transition-colors flex items-center justify-center"
+                  >
+                    ${this._pushingAction === "push"
+                      ? html`
+                          <div
+                            class="animate-spin rounded-full h-3 w-3 border-b border-white mr-1"
+                          ></div>
+                        `
+                      : ""}
+                    Push
+                  </button>
+                </div>
+
+                <!-- Push result -->
+                ${this._pushResult
+                  ? html`
+                      <div
+                        class="p-3 rounded ${this._pushResult.success
+                          ? "bg-green-50 border border-green-200"
+                          : "bg-red-50 border border-red-200"} relative"
+                      >
+                        ${this._loading
+                          ? html`
+                              <div
+                                class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded"
+                              >
+                                <div
+                                  class="flex items-center text-xs text-gray-600"
+                                >
+                                  <div
+                                    class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"
+                                  ></div>
+                                  Processing...
+                                </div>
+                              </div>
+                            `
+                          : ""}
+
+                        <div class="flex items-center justify-between mb-2">
+                          <p
+                            class="text-xs font-medium ${this._pushResult
+                              .success
+                              ? "text-green-800"
+                              : "text-red-800"}"
+                          >
+                            ${this._pushResult.dry_run ? "Dry Run" : "Push"}
+                            ${this._pushResult.success
+                              ? "Successful"
+                              : "Failed"}
+                          </p>
+                          ${this._pushResult.success &&
+                          !this._pushResult.dry_run
+                            ? (() => {
+                                const branchURL = this._computeBranchURL();
+                                return branchURL
+                                  ? html`
+                                      <a
+                                        href="${branchURL}"
+                                        target="_blank"
+                                        class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-900 hover:bg-gray-800 text-white rounded transition-colors"
+                                      >
+                                        <svg
+                                          class="w-3 h-3"
+                                          viewBox="0 0 24 24"
+                                          fill="currentColor"
+                                        >
+                                          <path
+                                            d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
+                                          />
+                                        </svg>
+                                        Open on GitHub
+                                      </a>
+                                    `
+                                  : "";
+                              })()
+                            : ""}
+                        </div>
+                        ${this._pushResult.output
+                          ? html`
+                              <pre
+                                class="text-xs text-gray-700 whitespace-pre-wrap font-mono mb-2 break-words"
+                                .innerHTML="${this._makeLinksClickable(
+                                  this._pushResult.output,
+                                )}"
+                              ></pre>
+                            `
+                          : ""}
+                        ${this._pushResult.error
+                          ? html`
+                              <p class="text-xs text-red-700 mb-2">
+                                ${this._pushResult.error}
+                              </p>
+                            `
+                          : ""}
+
+                        <div class="flex gap-2 items-center">
+                          ${!this._pushResult.success
+                            ? html`
+                                <button
+                                  @click=${(e: Event) => this._handleRebase(e)}
+                                  class="px-3 py-1 bg-orange-600 hover:bg-orange-700 text-white text-xs rounded transition-colors"
+                                >
+                                  Ask Agent to Rebase
+                                </button>
+                              `
+                            : ""}
+
+                          <button
+                            @click=${(e: Event) => {
+                              e.stopPropagation();
+                              this._closeModal();
+                            }}
+                            class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded transition-colors ml-auto"
+                          >
+                            Close
+                          </button>
+                        </div>
+                      </div>
+                    `
+                  : this._loading
+                    ? html`
+                        <div
+                          class="p-3 rounded bg-gray-50 border border-gray-200"
+                        >
+                          <div class="flex items-center text-xs text-gray-600">
+                            <div
+                              class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"
+                            ></div>
+                            Processing...
+                          </div>
+                        </div>
+                      `
+                    : ""}
+              `}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-push-button": SketchPushButton;
+  }
+}