commit 6b8b7660f2e2e964453ebace40dda7122f6d9eca
author philip.zeyliger <philip.zeyliger@gmail.com> Mon Jun 16 03:06:30 2025 +0000
committer Philip Zeyliger <philip@bold.dev> Mon Jun 16 21:30:06 2025 -0700
tree dcb6ba6d5a2d18fcffe8d44d6960bd41fd29121c
parent 7c1a687d03341b94b4a3c71706c47e3e14927707

webui: add mobile diff view with Monaco inline diffing

Thanks, Sketch. There are still some rough edges, but it's not bad.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: se4f6567dc0dabd31k

webui/src/web-components/mobile-shell.ts

diff --git a/webui/src/web-components/mobile-shell.ts b/webui/src/web-components/mobile-shell.ts
index ea9c305..65b698b 100644
--- a/webui/src/web-components/mobile-shell.ts
+++ b/webui/src/web-components/mobile-shell.ts
@@ -7,6 +7,7 @@
 import "./mobile-title";
 import "./mobile-chat";
 import "./mobile-chat-input";
+import "./mobile-diff";
 
 @customElement("mobile-shell")
 export class MobileShell extends LitElement {
@@ -21,6 +22,9 @@
   @state()
   connectionStatus: ConnectionStatus = "disconnected";
 
+  @state()
+  currentView: "chat" | "diff" = "chat";
+
   static styles = css`
     :host {
       display: flex;
@@ -54,10 +58,19 @@
     mobile-chat {
       flex: 1;
       overflow: hidden;
+      min-height: 0;
+    }
+
+    mobile-diff {
+      flex: 1;
+      overflow: hidden;
+      min-height: 0;
     }
 
     mobile-chat-input {
       flex-shrink: 0;
+      /* Ensure proper height calculation */
+      min-height: 64px;
     }
   `;
 
@@ -141,6 +154,10 @@
     }
   };
 
+  private handleViewChange = (event: CustomEvent<{ view: "chat" | "diff" }>) => {
+    this.currentView = event.detail.view;
+  };
+
   render() {
     const isThinking =
       this.state?.outstanding_llm_calls > 0 ||
@@ -152,12 +169,21 @@
           .connectionStatus=${this.connectionStatus}
           .isThinking=${isThinking}
           .skabandAddr=${this.state?.skaband_addr}
+          .currentView=${this.currentView}
+          .slug=${this.state?.slug || ""}
+          @view-change=${this.handleViewChange}
         ></mobile-title>
 
-        <mobile-chat
-          .messages=${this.messages}
-          .isThinking=${isThinking}
-        ></mobile-chat>
+        ${this.currentView === "chat"
+          ? html`
+              <mobile-chat
+                .messages=${this.messages}
+                .isThinking=${isThinking}
+              ></mobile-chat>
+            `
+          : html`
+              <mobile-diff></mobile-diff>
+            `}
 
         <mobile-chat-input
           .disabled=${this.connectionStatus !== "connected"}