Improve mobile approval swipe

Author: ericdallo

eca-webview

@@ -36,6 +36,7 @@ import type {
   SSESessionConnectedPayload,
   SSESessionMessagePayload,
   SSETrustUpdatedPayload,
+  TrustChangeCallback,
   WorkspaceFolder,
 } from './types';
 
@@ -76,6 +77,9 @@ export class WebBridge {
   /** Callback invoked whenever the chat list or selection changes. */
   private onChatListChange: ChatListChangeCallback | null = null;
 
+  /** Callback invoked whenever trust mode changes. */
+  private onTrustChange: TrustChangeCallback | null = null;
+
   /**
    * IDs of chats whose full message history has been fetched from the REST API
    * and dispatched to the webview. Used to avoid redundant loads when switching
@@ -458,6 +462,32 @@ export class WebBridge {
     }
   }
 
+  // ---------------------------------------------------------------------------
+  // Trust API (for the shell layer)
+  // ---------------------------------------------------------------------------
+
+  /** Register a listener for trust state changes. */
+  onTrustChanged(cb: TrustChangeCallback): void {
+    this.onTrustChange = cb;
+    // Immediately fire with current state
+    cb(this.sessionState?.trust ?? false);
+  }
+
+  /** Get the current trust mode. */
+  getTrust(): boolean {
+    return this.sessionState?.trust ?? false;
+  }
+
+  /** Toggle trust mode — calls the REST API and lets the SSE event confirm the change. */
+  async toggleTrust(): Promise<void> {
+    const newTrust = !(this.sessionState?.trust ?? false);
+    try {
+      await this.api.setTrust(newTrust);
+    } catch (err) {
+      console.error('[Bridge] Failed to toggle trust:', err);
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // SSE connection
   // ---------------------------------------------------------------------------
@@ -632,7 +662,11 @@ export class WebBridge {
 
         case 'trust:updated': {
           const trustData = data as SSETrustUpdatedPayload;
+          if (this.sessionState) {
+            this.sessionState.trust = trustData.trust;
+          }
           this.dispatch('server/setTrust', trustData.trust);
+          this.onTrustChange?.(trustData.trust);
           break;
         }
 

src/bridge/transport.ts

@@ -287,6 +287,9 @@ export interface ChatEntry {
 /** Callback signature for chat list change notifications. */
 export type ChatListChangeCallback = (chats: ChatEntry[], selectedChatId: string | null) => void;
 
+/** Callback signature for trust state change notifications. */
+export type TrustChangeCallback = (trust: boolean) => void;
+
 // ---------------------------------------------------------------------------
 // Reconnection types
 // ---------------------------------------------------------------------------

src/bridge/types.ts

@@ -227,6 +227,64 @@
   color: #f14c4c;
 }
 
+/* ---- Trust toggle ---- */
+.chat-sidebar-trust {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: none;
+  border-top: 1px solid #2a2a3e;
+  background: transparent;
+  color: #5a6a7a;
+  font-size: 0.78rem;
+  font-family: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.12s, color 0.12s;
+}
+
+.chat-sidebar-trust:hover {
+  background: #1a1a2e;
+  color: #8a9ab0;
+}
+
+.chat-sidebar-trust .codicon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.chat-sidebar-trust-label {
+  flex: 1;
+  text-align: left;
+  font-weight: 500;
+}
+
+.chat-sidebar-trust-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.chat-sidebar-trust-dot.off {
+  background: #5a6a7a;
+}
+
+.chat-sidebar-trust-dot.on {
+  background: #f44747;
+}
+
+.chat-sidebar-trust.trust-on {
+  color: #f44747;
+}
+
+.chat-sidebar-trust.trust-on:hover {
+  color: #f77;
+}
+
 /* ---- Mobile hamburger button ---- */
 .chat-sidebar-toggle {
   display: none;

src/components/ChatSidebar.css

@@ -28,6 +28,10 @@ interface ChatSidebarProps {
   mobileOpen: boolean;
   /** Called when the mobile drawer should close (backdrop tap, item select). */
   onMobileClose: () => void;
+  /** Current trust mode state. */
+  trust?: boolean;
+  /** Called when the user toggles trust mode. */
+  onToggleTrust?: () => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -51,7 +55,7 @@ export function ChatSidebarToggle({ onClick }: { onClick: () => void }) {
 // Main sidebar component
 // ---------------------------------------------------------------------------
 
-export function ChatSidebar({ bridge, chats = [], selectedId, workspaceFolders = [], mobileOpen, onMobileClose }: ChatSidebarProps) {
+export function ChatSidebar({ bridge, chats = [], selectedId, workspaceFolders = [], mobileOpen, onMobileClose, trust = false, onToggleTrust }: ChatSidebarProps) {
   const handleSelect = useCallback(
     (chatId: string) => {
       bridge?.selectChat(chatId);
@@ -145,6 +149,22 @@ export function ChatSidebar({ bridge, chats = [], selectedId, workspaceFolders =
             ))
           )}
         </div>
+
+        {onToggleTrust && (
+          <button
+            className={`chat-sidebar-trust ${trust ? 'trust-on' : 'trust-off'}`}
+            onClick={onToggleTrust}
+            title={trust
+              ? 'Trust ON — tool calls are auto-accepted'
+              : 'Trust OFF — tool calls require approval'}
+          >
+            <i className={`codicon ${trust ? 'codicon-unlock' : 'codicon-lock'}`} />
+            <span className="chat-sidebar-trust-label">
+              Trust {trust ? 'ON' : 'OFF'}
+            </span>
+            <span className={`chat-sidebar-trust-dot ${trust ? 'on' : 'off'}`} />
+          </button>
+        )}
       </div>
     </>
   );

src/components/ChatSidebar.tsx

@@ -46,6 +46,7 @@ export function RemoteProduct() {
   const [chatEntries, setChatEntries] = useState<ChatEntry[]>([]);
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
   const [workspaceFolders, setWorkspaceFolders] = useState<(WorkspaceFolder | string)[]>([]);
+  const [trust, setTrust] = useState(false);
   const [discovery, setDiscovery] = useState<DiscoveryProgress | null>(null);
   const discoveryAbortRef = useRef<AbortController | null>(null);
 
@@ -267,6 +268,8 @@ export function RemoteProduct() {
         }
       };
 
+      bridge.onTrustChanged((t) => setTrust(t));
+
       bridge.onChatListChanged((entries, selected) => {
         setChatEntries(entries);
         setSelectedChatId(selected);
@@ -293,13 +296,18 @@ export function RemoteProduct() {
       setChatEntries([]);
       setSelectedChatId(null);
       setWorkspaceFolders([]);
+      setTrust(false);
     }
   }, [activeId]);
 
   const toggleSidebar = useCallback(() => {
     setSidebarOpen((prev) => !prev);
   }, []);
 
+  const handleToggleTrust = useCallback(() => {
+    activeBridge?.toggleTrust();
+  }, [activeBridge]);
+
   // --- Render ---
 
   const activeEntry = entries.find((e) => e.id === activeId);
@@ -328,6 +336,8 @@ export function RemoteProduct() {
             workspaceFolders={workspaceFolders}
             mobileOpen={sidebarOpen}
             onMobileClose={() => setSidebarOpen(false)}
+            trust={trust}
+            onToggleTrust={handleToggleTrust}
           />
         )}
 

src/pages/RemoteProduct.tsx

@@ -21,6 +21,7 @@ html[data-editor="web"] {
 
   --eca-success-fg: #73c991;
   --eca-warning-fg: #cca700;
+  --eca-approval-fg: #e8850c;
   --eca-error-fg: #f14c4c;
 
   --eca-warning-message-fg: #cca700;