diff --git a/webui/src/interface-detection.js b/webui/src/interface-detection.js
new file mode 100644
index 0000000..528a3b0
--- /dev/null
+++ b/webui/src/interface-detection.js
@@ -0,0 +1,113 @@
+// Shared interface detection and auto-switching logic
+// Used by both desktop and mobile interfaces
+
+(function () {
+  function detectMobile() {
+    const isMobileScreen = window.innerWidth < 768;
+    const isTouchDevice = "ontouchstart" in window;
+    const isMobileUA =
+      /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent,
+      );
+
+    return isMobileScreen || (isTouchDevice && isMobileUA);
+  }
+
+  function detectDesktop() {
+    const isDesktopScreen = window.innerWidth >= 768;
+    const isNotTouchDevice = !("ontouchstart" in window);
+    const isDesktopUA =
+      !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent,
+      );
+
+    return isDesktopScreen && (isNotTouchDevice || isDesktopUA);
+  }
+
+  function autoRedirectToMobile() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const hasDesktopParam = urlParams.has("d");
+
+    // Respect manual overrides - if ?d is present, stay on desktop
+    if (hasDesktopParam) return;
+
+    // If mobile is detected and no explicit desktop request
+    if (detectMobile() && !hasDesktopParam) {
+      // Add ?m parameter to current URL
+      const url = new URL(window.location);
+      url.searchParams.set("m", "");
+      // Remove any conflicting parameters
+      url.searchParams.delete("d");
+      window.location.href = url.toString();
+    }
+  }
+
+  function autoRedirectToDesktop() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const hasMobileParam = urlParams.has("m");
+
+    // Respect manual overrides - if ?m is present, stay on mobile
+    if (hasMobileParam) return;
+
+    // If we detect desktop conditions
+    if (detectDesktop() && !hasMobileParam) {
+      // Add ?d parameter to current URL
+      const url = new URL(window.location);
+      url.searchParams.set("d", "");
+      // Remove any conflicting parameters
+      url.searchParams.delete("m");
+      window.location.href = url.toString();
+    }
+  }
+
+  function runAutoDetection() {
+    // Determine which detection to run based on current interface
+    // This is determined by checking if we're serving mobile or desktop HTML
+    const isMobileInterface = document.querySelector("mobile-shell") !== null;
+
+    if (isMobileInterface) {
+      autoRedirectToDesktop();
+    } else {
+      autoRedirectToMobile();
+    }
+  }
+
+  // iOS Safari viewport height fix
+  function fixIOSViewportHeight() {
+    // Only apply on iOS Safari
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+    const isSafari =
+      /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+
+    if (isIOS && isSafari) {
+      // Set CSS custom property with actual viewport height
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+      // Update on orientation change
+      window.addEventListener("orientationchange", () => {
+        setTimeout(() => {
+          const vh = window.innerHeight * 0.01;
+          document.documentElement.style.setProperty("--vh", `${vh}px`);
+        }, 100);
+      });
+
+      // Update on resize
+      window.addEventListener("resize", () => {
+        const vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty("--vh", `${vh}px`);
+      });
+    }
+  }
+
+  // Run detection when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      runAutoDetection();
+      fixIOSViewportHeight();
+    });
+  } else {
+    runAutoDetection();
+    fixIOSViewportHeight();
+  }
+})();
diff --git a/webui/src/mobile-app-shell.css b/webui/src/mobile-app-shell.css
new file mode 100644
index 0000000..9196b31
--- /dev/null
+++ b/webui/src/mobile-app-shell.css
@@ -0,0 +1,29 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+  background-color: #ffffff;
+}
+
+/* iOS Safari viewport fix */
+html {
+  height: -webkit-fill-available;
+}
+
+body {
+  display: flex;
+  overflow: hidden;
+  /* Additional iOS Safari height fix */
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+/* Mobile viewport optimizations */
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 16px; /* Prevent iOS zoom */
+  }
+}
diff --git a/webui/src/mobile-app-shell.html b/webui/src/mobile-app-shell.html
new file mode 100644
index 0000000..a610b5d
--- /dev/null
+++ b/webui/src/mobile-app-shell.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
+    />
+    <title>sketch mobile</title>
+    <link rel="stylesheet" href="static/mobile-app-shell.css" />
+    <script src="static/mobile-app-shell.js" async type="module"></script>
+    <script src="static/interface-detection.js"></script>
+  </head>
+  <body>
+    <mobile-shell></mobile-shell>
+  </body>
+</html>
diff --git a/webui/src/mobile-dev.html b/webui/src/mobile-dev.html
new file mode 100644
index 0000000..08ec14d
--- /dev/null
+++ b/webui/src/mobile-dev.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>sketch mobile</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+        background-color: #ffffff;
+      }
+      body {
+        display: flex;
+        overflow: hidden;
+      }
+    </style>
+    <script type="module" src="./web-components/mobile-app-shell.ts"></script>
+  </head>
+  <body>
+    <mobile-shell></mobile-shell>
+  </body>
+</html>
diff --git a/webui/src/sketch-app-shell.html b/webui/src/sketch-app-shell.html
index 702b588..8127fa2 100644
--- a/webui/src/sketch-app-shell.html
+++ b/webui/src/sketch-app-shell.html
@@ -6,6 +6,7 @@
     <title>sketch coding assistant</title>
     <link rel="stylesheet" href="static/sketch-app-shell.css" />
     <script src="static/sketch-app-shell.js" async type="module"></script>
+    <script src="static/interface-detection.js"></script>
   </head>
   <body>
     <sketch-app-shell></sketch-app-shell>
diff --git a/webui/src/web-components/mobile-app-shell.ts b/webui/src/web-components/mobile-app-shell.ts
new file mode 100644
index 0000000..ba5b158
--- /dev/null
+++ b/webui/src/web-components/mobile-app-shell.ts
@@ -0,0 +1,2 @@
+// Mobile app shell entry point
+import "./mobile-shell";
diff --git a/webui/src/web-components/mobile-chat-input.ts b/webui/src/web-components/mobile-chat-input.ts
new file mode 100644
index 0000000..cb55c64
--- /dev/null
+++ b/webui/src/web-components/mobile-chat-input.ts
@@ -0,0 +1,200 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+
+@customElement("mobile-chat-input")
+export class MobileChatInput extends LitElement {
+  @property({ type: Boolean })
+  disabled = false;
+
+  @state()
+  private inputValue = "";
+
+  private textareaRef = createRef<HTMLTextAreaElement>();
+
+  static styles = css`
+    :host {
+      display: block;
+      background-color: #ffffff;
+      border-top: 1px solid #e9ecef;
+      padding: 12px 16px;
+      /* Enhanced iOS safe area support */
+      padding-bottom: max(12px, env(safe-area-inset-bottom));
+      padding-left: max(16px, env(safe-area-inset-left));
+      padding-right: max(16px, env(safe-area-inset-right));
+      /* Prevent iOS Safari from covering the input */
+      position: relative;
+      z-index: 1000;
+    }
+
+    .input-container {
+      display: flex;
+      align-items: flex-end;
+      gap: 12px;
+      max-width: 100%;
+    }
+
+    .input-wrapper {
+      flex: 1;
+      position: relative;
+      min-width: 0;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 40px;
+      max-height: 120px;
+      padding: 12px 16px;
+      border: 1px solid #ddd;
+      border-radius: 20px;
+      font-size: 16px;
+      font-family: inherit;
+      line-height: 1.4;
+      resize: none;
+      outline: none;
+      background-color: #f8f9fa;
+      transition:
+        border-color 0.2s,
+        background-color 0.2s;
+      box-sizing: border-box;
+    }
+
+    textarea:focus {
+      border-color: #007bff;
+      background-color: #ffffff;
+    }
+
+    textarea:disabled {
+      background-color: #e9ecef;
+      color: #6c757d;
+      cursor: not-allowed;
+    }
+
+    textarea::placeholder {
+      color: #6c757d;
+    }
+
+    .send-button {
+      flex-shrink: 0;
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 50%;
+      background-color: #007bff;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      transition:
+        background-color 0.2s,
+        transform 0.1s;
+      outline: none;
+    }
+
+    .send-button:hover:not(:disabled) {
+      background-color: #0056b3;
+    }
+
+    .send-button:active:not(:disabled) {
+      transform: scale(0.95);
+    }
+
+    .send-button:disabled {
+      background-color: #6c757d;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .send-icon {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    /* iOS specific adjustments */
+    @supports (-webkit-touch-callout: none) {
+      textarea {
+        font-size: 16px; /* Prevent zoom on iOS */
+      }
+    }
+  `;
+
+  private handleInput = (e: Event) => {
+    const target = e.target as HTMLTextAreaElement;
+    this.inputValue = target.value;
+    this.adjustTextareaHeight();
+  };
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      this.sendMessage();
+    }
+  };
+
+  private adjustTextareaHeight() {
+    if (this.textareaRef.value) {
+      const textarea = this.textareaRef.value;
+      textarea.style.height = "auto";
+      textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
+    }
+  }
+
+  private sendMessage = () => {
+    const message = this.inputValue.trim();
+    if (message && !this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent("send-message", {
+          detail: { message },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+
+      this.inputValue = "";
+      if (this.textareaRef.value) {
+        this.textareaRef.value.value = "";
+        this.adjustTextareaHeight();
+        this.textareaRef.value.focus();
+      }
+    }
+  };
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    this.adjustTextareaHeight();
+  }
+
+  render() {
+    const canSend = this.inputValue.trim().length > 0 && !this.disabled;
+
+    return html`
+      <div class="input-container">
+        <div class="input-wrapper">
+          <textarea
+            ${ref(this.textareaRef)}
+            .value=${this.inputValue}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+            placeholder="Message Sketch..."
+            ?disabled=${this.disabled}
+            rows="1"
+          ></textarea>
+        </div>
+
+        <button
+          class="send-button"
+          @click=${this.sendMessage}
+          ?disabled=${!canSend}
+          title="Send message"
+        >
+          <svg class="send-icon" viewBox="0 0 24 24">
+            <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+}
diff --git a/webui/src/web-components/mobile-chat.ts b/webui/src/web-components/mobile-chat.ts
new file mode 100644
index 0000000..d634da5
--- /dev/null
+++ b/webui/src/web-components/mobile-chat.ts
@@ -0,0 +1,225 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { AgentMessage } from "../types";
+import { createRef, ref } from "lit/directives/ref.js";
+
+@customElement("mobile-chat")
+export class MobileChat extends LitElement {
+  @property({ type: Array })
+  messages: AgentMessage[] = [];
+
+  @property({ type: Boolean })
+  isThinking = false;
+
+  private scrollContainer = createRef<HTMLDivElement>();
+
+  static styles = css`
+    :host {
+      display: block;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .chat-container {
+      height: 100%;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .message {
+      display: flex;
+      flex-direction: column;
+      max-width: 85%;
+      word-wrap: break-word;
+    }
+
+    .message.user {
+      align-self: flex-end;
+      align-items: flex-end;
+    }
+
+    .message.assistant {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+
+    .message-bubble {
+      padding: 8px 12px;
+      border-radius: 18px;
+      font-size: 16px;
+      line-height: 1.4;
+    }
+
+    .message.user .message-bubble {
+      background-color: #007bff;
+      color: white;
+      border-bottom-right-radius: 6px;
+    }
+
+    .message.assistant .message-bubble {
+      background-color: #f1f3f4;
+      color: #333;
+      border-bottom-left-radius: 6px;
+    }
+
+    .thinking-message {
+      align-self: flex-start;
+      align-items: flex-start;
+      max-width: 85%;
+    }
+
+    .thinking-bubble {
+      background-color: #f1f3f4;
+      padding: 16px;
+      border-radius: 18px;
+      border-bottom-left-radius: 6px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .thinking-text {
+      color: #6c757d;
+      font-style: italic;
+    }
+
+    .thinking-dots {
+      display: flex;
+      gap: 3px;
+    }
+
+    .thinking-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: #6c757d;
+      animation: thinking 1.4s ease-in-out infinite both;
+    }
+
+    .thinking-dot:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+    .thinking-dot:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+    .thinking-dot:nth-child(3) {
+      animation-delay: 0;
+    }
+
+    @keyframes thinking {
+      0%,
+      80%,
+      100% {
+        transform: scale(0.8);
+        opacity: 0.5;
+      }
+      40% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+
+    .empty-state {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #6c757d;
+      font-style: italic;
+      text-align: center;
+      padding: 32px;
+    }
+  `;
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("messages") ||
+      changedProperties.has("isThinking")
+    ) {
+      this.scrollToBottom();
+    }
+  }
+
+  private scrollToBottom() {
+    // Use requestAnimationFrame to ensure DOM is updated
+    requestAnimationFrame(() => {
+      if (this.scrollContainer.value) {
+        this.scrollContainer.value.scrollTop =
+          this.scrollContainer.value.scrollHeight;
+      }
+    });
+  }
+
+  private formatTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+
+  private getMessageRole(message: AgentMessage): string {
+    if (message.type === "user") {
+      return "user";
+    }
+    return "assistant";
+  }
+
+  private getMessageText(message: AgentMessage): string {
+    return message.content || "";
+  }
+
+  private shouldShowMessage(message: AgentMessage): boolean {
+    // Show user, agent, and error messages with content
+    return (
+      (message.type === "user" ||
+        message.type === "agent" ||
+        message.type === "error") &&
+      message.content &&
+      message.content.trim().length > 0
+    );
+  }
+
+  render() {
+    const displayMessages = this.messages.filter((msg) =>
+      this.shouldShowMessage(msg),
+    );
+
+    return html`
+      <div class="chat-container" ${ref(this.scrollContainer)}>
+        ${displayMessages.length === 0
+          ? html`
+              <div class="empty-state">Start a conversation with Sketch...</div>
+            `
+          : displayMessages.map((message) => {
+              const role = this.getMessageRole(message);
+              const text = this.getMessageText(message);
+              const timestamp = message.timestamp;
+
+              return html`
+                <div class="message ${role}">
+                  <div class="message-bubble">${text}</div>
+                </div>
+              `;
+            })}
+        ${this.isThinking
+          ? html`
+              <div class="thinking-message">
+                <div class="thinking-bubble">
+                  <span class="thinking-text">Sketch is thinking</span>
+                  <div class="thinking-dots">
+                    <div class="thinking-dot"></div>
+                    <div class="thinking-dot"></div>
+                    <div class="thinking-dot"></div>
+                  </div>
+                </div>
+              </div>
+            `
+          : ""}
+      </div>
+    `;
+  }
+}
diff --git a/webui/src/web-components/mobile-shell.ts b/webui/src/web-components/mobile-shell.ts
new file mode 100644
index 0000000..583549d
--- /dev/null
+++ b/webui/src/web-components/mobile-shell.ts
@@ -0,0 +1,168 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ConnectionStatus, DataManager } from "../data";
+import { AgentMessage, State } from "../types";
+import { aggregateAgentMessages } from "./aggregateAgentMessages";
+
+import "./mobile-title";
+import "./mobile-chat";
+import "./mobile-chat-input";
+
+@customElement("mobile-shell")
+export class MobileShell extends LitElement {
+  private dataManager = new DataManager();
+
+  @state()
+  state: State | null = null;
+
+  @property({ attribute: false })
+  messages: AgentMessage[] = [];
+
+  @state()
+  connectionStatus: ConnectionStatus = "disconnected";
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      /* Use dynamic viewport height for better iOS support */
+      height: 100dvh;
+      /* Fallback for browsers that don't support dvh */
+      height: 100vh;
+      /* iOS Safari custom property fallback */
+      height: calc(var(--vh, 1vh) * 100);
+      /* Additional iOS Safari fix */
+      min-height: 100vh;
+      min-height: -webkit-fill-available;
+      width: 100vw;
+      background-color: #ffffff;
+      font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+    }
+
+    .mobile-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    mobile-title {
+      flex-shrink: 0;
+    }
+
+    mobile-chat {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    mobile-chat-input {
+      flex-shrink: 0;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupDataManager();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Remove event listeners
+    this.dataManager.removeEventListener(
+      "dataChanged",
+      this.handleDataChanged.bind(this),
+    );
+    this.dataManager.removeEventListener(
+      "connectionStatusChanged",
+      this.handleConnectionStatusChanged.bind(this),
+    );
+  }
+
+  private setupDataManager() {
+    // Add event listeners
+    this.dataManager.addEventListener(
+      "dataChanged",
+      this.handleDataChanged.bind(this),
+    );
+    this.dataManager.addEventListener(
+      "connectionStatusChanged",
+      this.handleConnectionStatusChanged.bind(this),
+    );
+
+    // Initialize the data manager - it will automatically connect to /stream?from=0
+    this.dataManager.initialize();
+  }
+
+  private handleDataChanged(eventData: {
+    state: State;
+    newMessages: AgentMessage[];
+  }) {
+    const { state, newMessages } = eventData;
+
+    if (state) {
+      this.state = state;
+    }
+
+    // Update messages using the same pattern as main app shell
+    this.messages = aggregateAgentMessages(this.messages, newMessages);
+  }
+
+  private handleConnectionStatusChanged(
+    status: ConnectionStatus,
+    errorMessage?: string,
+  ) {
+    this.connectionStatus = status;
+  }
+
+  private handleSendMessage = async (
+    event: CustomEvent<{ message: string }>,
+  ) => {
+    const message = event.detail.message.trim();
+    if (!message) {
+      return;
+    }
+
+    try {
+      // Send the message to the server
+      const response = await fetch("chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message }),
+      });
+
+      if (!response.ok) {
+        console.error("Failed to send message:", response.statusText);
+      }
+    } catch (error) {
+      console.error("Error sending message:", error);
+    }
+  };
+
+  render() {
+    const isThinking =
+      this.state?.outstanding_llm_calls > 0 ||
+      (this.state?.outstanding_tool_calls?.length ?? 0) > 0;
+
+    return html`
+      <div class="mobile-container">
+        <mobile-title
+          .connectionStatus=${this.connectionStatus}
+          .isThinking=${isThinking}
+        ></mobile-title>
+
+        <mobile-chat
+          .messages=${this.messages}
+          .isThinking=${isThinking}
+        ></mobile-chat>
+
+        <mobile-chat-input
+          .disabled=${this.connectionStatus !== "connected"}
+          @send-message=${this.handleSendMessage}
+        ></mobile-chat-input>
+      </div>
+    `;
+  }
+}
diff --git a/webui/src/web-components/mobile-title.ts b/webui/src/web-components/mobile-title.ts
new file mode 100644
index 0000000..95198fa
--- /dev/null
+++ b/webui/src/web-components/mobile-title.ts
@@ -0,0 +1,152 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ConnectionStatus } from "../data";
+
+@customElement("mobile-title")
+export class MobileTitle extends LitElement {
+  @property({ type: String })
+  connectionStatus: ConnectionStatus = "disconnected";
+
+  @property({ type: Boolean })
+  isThinking = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #e9ecef;
+      padding: 12px 16px;
+    }
+
+    .title-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #212529;
+      margin: 0;
+    }
+
+    .status-indicator {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .status-dot.connected {
+      background-color: #28a745;
+    }
+
+    .status-dot.connecting {
+      background-color: #ffc107;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .status-dot.disconnected {
+      background-color: #dc3545;
+    }
+
+    .thinking-indicator {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: #6c757d;
+      font-size: 13px;
+    }
+
+    .thinking-dots {
+      display: flex;
+      gap: 2px;
+    }
+
+    .thinking-dot {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background-color: #6c757d;
+      animation: thinking 1.4s ease-in-out infinite both;
+    }
+
+    .thinking-dot:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+    .thinking-dot:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+    .thinking-dot:nth-child(3) {
+      animation-delay: 0;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    @keyframes thinking {
+      0%,
+      80%,
+      100% {
+        transform: scale(0);
+      }
+      40% {
+        transform: scale(1);
+      }
+    }
+  `;
+
+  private getStatusText() {
+    switch (this.connectionStatus) {
+      case "connected":
+        return "Connected";
+      case "connecting":
+        return "Connecting...";
+      case "disconnected":
+        return "Disconnected";
+      default:
+        return "Unknown";
+    }
+  }
+
+  render() {
+    return html`
+      <div class="title-container">
+        <h1 class="title">Sketch</h1>
+
+        <div class="status-indicator">
+          ${this.isThinking
+            ? html`
+                <div class="thinking-indicator">
+                  <span>thinking</span>
+                  <div class="thinking-dots">
+                    <div class="thinking-dot"></div>
+                    <div class="thinking-dot"></div>
+                    <div class="thinking-dot"></div>
+                  </div>
+                </div>
+              `
+            : html`
+                <span class="status-dot ${this.connectionStatus}"></span>
+                <span>${this.getStatusText()}</span>
+              `}
+        </div>
+      </div>
+    `;
+  }
+}