Rename AuthMode to Backend, fix LiteLLM variant typo, add image update alerts, clean up Settings

- Fix serde deserialization error: TypeScript sent "lit_llm" but Rust expected "lite_llm"
- Rename AuthMode enum to Backend across Rust and TypeScript (with serde alias for backward compat)
- Add container image update checking via registry digest comparison
- Improve Settings page: fix image address display spacing, remove per-project auth section
- Update UI labels from "Auth" to "Backend" throughout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/src/App.tsx

@@ -17,7 +17,7 @@ export default function App() {
   const { loadSettings } = useSettings();
   const { refresh } = useProjects();
   const { refresh: refreshMcp } = useMcpServers();
-  const { loadVersion, checkForUpdates, startPeriodicCheck } = useUpdates();
+  const { loadVersion, checkForUpdates, checkImageUpdate, startPeriodicCheck } = useUpdates();
   const { sessions, activeSessionId, setProjects } = useAppState(
     useShallow(s => ({ sessions: s.sessions, activeSessionId: s.activeSessionId, setProjects: s.setProjects }))
   );
@@ -46,7 +46,10 @@ export default function App() {
 
     // Update detection
     loadVersion();
-    const updateTimer = setTimeout(() => checkForUpdates(), 3000);
+    const updateTimer = setTimeout(() => {
+      checkForUpdates();
+      checkImageUpdate();
+    }, 3000);
     const cleanup = startPeriodicCheck();
     return () => {
       clearTimeout(updateTimer);

app/src/components/layout/TopBar.tsx

@@ -4,19 +4,23 @@ import TerminalTabs from "../terminal/TerminalTabs";
 import { useAppState } from "../../store/appState";
 import { useSettings } from "../../hooks/useSettings";
 import UpdateDialog from "../settings/UpdateDialog";
+import ImageUpdateDialog from "../settings/ImageUpdateDialog";
 
 export default function TopBar() {
-  const { dockerAvailable, imageExists, updateInfo, appVersion, setUpdateInfo } = useAppState(
+  const { dockerAvailable, imageExists, updateInfo, imageUpdateInfo, appVersion, setUpdateInfo, setImageUpdateInfo } = useAppState(
     useShallow(s => ({
       dockerAvailable: s.dockerAvailable,
       imageExists: s.imageExists,
       updateInfo: s.updateInfo,
+      imageUpdateInfo: s.imageUpdateInfo,
       appVersion: s.appVersion,
       setUpdateInfo: s.setUpdateInfo,
+      setImageUpdateInfo: s.setImageUpdateInfo,
     }))
   );
   const { appSettings, saveSettings } = useSettings();
   const [showUpdateDialog, setShowUpdateDialog] = useState(false);
+  const [showImageUpdateDialog, setShowImageUpdateDialog] = useState(false);
 
   const handleDismiss = async () => {
     if (appSettings && updateInfo) {
@@ -29,6 +33,17 @@ export default function TopBar() {
     setShowUpdateDialog(false);
   };
 
+  const handleImageUpdateDismiss = async () => {
+    if (appSettings && imageUpdateInfo) {
+      await saveSettings({
+        ...appSettings,
+        dismissed_image_digest: imageUpdateInfo.remote_digest,
+      });
+    }
+    setImageUpdateInfo(null);
+    setShowImageUpdateDialog(false);
+  };
+
   return (
     <>
       <div className="flex items-center h-10 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
@@ -44,6 +59,15 @@ export default function TopBar() {
               Update
             </button>
           )}
+          {imageUpdateInfo && (
+            <button
+              onClick={() => setShowImageUpdateDialog(true)}
+              className="px-2 py-0.5 rounded text-xs font-medium bg-[var(--warning,#f59e0b)] text-white hover:opacity-80 transition-colors"
+              title="A newer container image is available"
+            >
+              Image Update
+            </button>
+          )}
           <StatusDot ok={dockerAvailable === true} label="Docker" />
           <StatusDot ok={imageExists === true} label="Image" />
         </div>
@@ -56,6 +80,13 @@ export default function TopBar() {
           onClose={() => setShowUpdateDialog(false)}
         />
       )}
+      {showImageUpdateDialog && imageUpdateInfo && (
+        <ImageUpdateDialog
+          imageUpdateInfo={imageUpdateInfo}
+          onDismiss={handleImageUpdateDismiss}
+          onClose={() => setShowImageUpdateDialog(false)}
+        />
+      )}
     </>
   );
 }

app/src/components/projects/ProjectCard.test.tsx

@@ -57,7 +57,7 @@ const mockProject: Project = {
   paths: [{ host_path: "/home/user/project", mount_name: "project" }],
   container_id: null,
   status: "stopped",
-  auth_mode: "anthropic",
+  backend: "anthropic",
   bedrock_config: null,
   allow_docker_access: false,
   ssh_key_path: null,

app/src/components/projects/ProjectCard.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { open } from "@tauri-apps/plugin-dialog";
 import { listen } from "@tauri-apps/api/event";
-import type { Project, ProjectPath, AuthMode, BedrockConfig, BedrockAuthMethod, OllamaConfig, LiteLlmConfig } from "../../lib/types";
+import type { Project, ProjectPath, Backend, BedrockConfig, BedrockAuthMethod, OllamaConfig, LiteLlmConfig } from "../../lib/types";
 import { useProjects } from "../../hooks/useProjects";
 import { useMcpServers } from "../../hooks/useMcpServers";
 import { useTerminal } from "../../hooks/useTerminal";
@@ -202,16 +202,16 @@ export default function ProjectCard({ project }: Props) {
     model_id: null,
   };
 
-  const handleAuthModeChange = async (mode: AuthMode) => {
+  const handleBackendChange = async (mode: Backend) => {
     try {
-      const updates: Partial<Project> = { auth_mode: mode };
+      const updates: Partial<Project> = { backend: mode };
       if (mode === "bedrock" && !project.bedrock_config) {
         updates.bedrock_config = defaultBedrockConfig;
       }
       if (mode === "ollama" && !project.ollama_config) {
         updates.ollama_config = defaultOllamaConfig;
       }
-      if (mode === "lit_llm" && !project.litellm_config) {
+      if (mode === "lite_llm" && !project.litellm_config) {
         updates.litellm_config = defaultLiteLlmConfig;
       }
       await update({ ...project, ...updates });
@@ -446,12 +446,12 @@ export default function ProjectCard({ project }: Props) {
 
       {isSelected && (
         <div className="mt-2 ml-4 space-y-2 min-w-0 overflow-hidden">
-          {/* Auth mode selector */}
+          {/* Backend selector */}
           <div className="flex items-center gap-1 text-xs">
-            <span className="text-[var(--text-secondary)] mr-1">Auth:</span>
+            <span className="text-[var(--text-secondary)] mr-1">Backend:</span>
             <select
-              value={project.auth_mode}
-              onChange={(e) => { e.stopPropagation(); handleAuthModeChange(e.target.value as AuthMode); }}
+              value={project.backend}
+              onChange={(e) => { e.stopPropagation(); handleBackendChange(e.target.value as Backend); }}
               onClick={(e) => e.stopPropagation()}
               disabled={!isStopped}
               className="px-2 py-0.5 rounded bg-[var(--bg-primary)] border border-[var(--border-color)] text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
@@ -459,7 +459,7 @@ export default function ProjectCard({ project }: Props) {
               <option value="anthropic">Anthropic</option>
               <option value="bedrock">Bedrock</option>
               <option value="ollama">Ollama</option>
-              <option value="lit_llm">LiteLLM</option>
+              <option value="lite_llm">LiteLLM</option>
             </select>
           </div>
 
@@ -794,7 +794,7 @@ export default function ProjectCard({ project }: Props) {
               )}
 
               {/* Bedrock config */}
-              {project.auth_mode === "bedrock" && (() => {
+              {project.backend === "bedrock" && (() => {
                 const bc = project.bedrock_config ?? defaultBedrockConfig;
                 const inputCls = "w-full px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50";
                 return (
@@ -916,7 +916,7 @@ export default function ProjectCard({ project }: Props) {
               })()}
 
               {/* Ollama config */}
-              {project.auth_mode === "ollama" && (() => {
+              {project.backend === "ollama" && (() => {
                 const inputCls = "w-full px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50";
                 return (
                   <div className="space-y-2 pt-1 border-t border-[var(--border-color)]">
@@ -956,7 +956,7 @@ export default function ProjectCard({ project }: Props) {
               })()}
 
               {/* LiteLLM config */}
-              {project.auth_mode === "lit_llm" && (() => {
+              {project.backend === "lite_llm" && (() => {
                 const inputCls = "w-full px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50";
                 return (
                   <div className="space-y-2 pt-1 border-t border-[var(--border-color)]">

app/src/components/settings/ApiKeyInput.tsx

@@ -1,9 +1,9 @@
 export default function ApiKeyInput() {
   return (
     <div>
-      <label className="block text-sm font-medium mb-1">Authentication</label>
+      <label className="block text-sm font-medium mb-1">Backend</label>
       <p className="text-xs text-[var(--text-secondary)] mb-3">
-        Each project can use <strong>claude login</strong> (OAuth, run inside the terminal) or <strong>AWS Bedrock</strong>. Set auth mode per-project.
+        Each project can use <strong>claude login</strong> (OAuth, run inside the terminal) or <strong>AWS Bedrock</strong>. Set backend per-project.
       </p>
     </div>
   );

app/src/components/settings/DockerSettings.tsx

@@ -121,9 +121,9 @@ export default function DockerSettings() {
         )}
 
         {/* Resolved image display */}
-        <div className="flex items-center justify-between">
+        <div>
           <span className="text-[var(--text-secondary)]">Image</span>
-          <span className="text-xs text-[var(--text-secondary)] truncate max-w-[200px]" title={resolvedImageName}>
+          <span className="block text-xs text-[var(--text-secondary)] font-mono mt-0.5 truncate" title={resolvedImageName}>
             {resolvedImageName}
           </span>
         </div>

app/src/components/settings/ImageUpdateDialog.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useCallback } from "react";
+import type { ImageUpdateInfo } from "../../lib/types";
+
+interface Props {
+  imageUpdateInfo: ImageUpdateInfo;
+  onDismiss: () => void;
+  onClose: () => void;
+}
+
+export default function ImageUpdateDialog({
+  imageUpdateInfo,
+  onDismiss,
+  onClose,
+}: Props) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === overlayRef.current) onClose();
+    },
+    [onClose],
+  );
+
+  const shortDigest = (digest: string) => {
+    // Show first 16 chars of the hash part (after "sha256:")
+    const hash = digest.startsWith("sha256:") ? digest.slice(7) : digest;
+    return hash.slice(0, 16);
+  };
+
+  return (
+    <div
+      ref={overlayRef}
+      onClick={handleOverlayClick}
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+    >
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-6 w-[28rem] max-h-[80vh] overflow-y-auto shadow-xl">
+        <h2 className="text-lg font-semibold mb-3">Container Image Update</h2>
+
+        <p className="text-sm text-[var(--text-secondary)] mb-4">
+          A newer version of the container image is available in the registry.
+          Re-pull the image in Docker settings to get the latest tools and fixes.
+        </p>
+
+        <div className="space-y-2 mb-4 text-xs bg-[var(--bg-primary)] rounded p-3 border border-[var(--border-color)]">
+          {imageUpdateInfo.local_digest && (
+            <div className="flex justify-between">
+              <span className="text-[var(--text-secondary)]">Local digest</span>
+              <span className="font-mono text-[var(--text-primary)]">
+                {shortDigest(imageUpdateInfo.local_digest)}...
+              </span>
+            </div>
+          )}
+          <div className="flex justify-between">
+            <span className="text-[var(--text-secondary)]">Remote digest</span>
+            <span className="font-mono text-[var(--accent)]">
+              {shortDigest(imageUpdateInfo.remote_digest)}...
+            </span>
+          </div>
+        </div>
+
+        <p className="text-xs text-[var(--text-secondary)] mb-4">
+          Go to Settings &gt; Docker and click &quot;Re-pull Image&quot; to update.
+          Running containers will not be affected until restarted.
+        </p>
+
+        <div className="flex items-center justify-end gap-2">
+          <button
+            onClick={onDismiss}
+            className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+          >
+            Dismiss
+          </button>
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-xs bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/src/components/settings/SettingsPanel.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import ApiKeyInput from "./ApiKeyInput";
 import DockerSettings from "./DockerSettings";
 import AwsSettings from "./AwsSettings";
 import { useSettings } from "../../hooks/useSettings";
@@ -11,7 +10,7 @@ import type { EnvVar } from "../../lib/types";
 
 export default function SettingsPanel() {
   const { appSettings, saveSettings } = useSettings();
-  const { appVersion, checkForUpdates } = useUpdates();
+  const { appVersion, imageUpdateInfo, checkForUpdates, checkImageUpdate } = useUpdates();
   const [globalInstructions, setGlobalInstructions] = useState(appSettings?.global_claude_instructions ?? "");
   const [globalEnvVars, setGlobalEnvVars] = useState<EnvVar[]>(appSettings?.global_custom_env_vars ?? []);
   const [checkingUpdates, setCheckingUpdates] = useState(false);
@@ -39,7 +38,7 @@ export default function SettingsPanel() {
   const handleCheckNow = async () => {
     setCheckingUpdates(true);
     try {
-      await checkForUpdates();
+      await Promise.all([checkForUpdates(), checkImageUpdate()]);
     } finally {
       setCheckingUpdates(false);
     }
@@ -55,7 +54,6 @@ export default function SettingsPanel() {
       <h2 className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
         Settings
       </h2>
-      <ApiKeyInput />
       <DockerSettings />
       <AwsSettings />
 
@@ -146,6 +144,12 @@ export default function SettingsPanel() {
           >
             {checkingUpdates ? "Checking..." : "Check now"}
           </button>
+          {imageUpdateInfo && (
+            <div className="flex items-center gap-2 px-3 py-2 text-xs bg-[var(--bg-primary)] border border-[var(--warning,#f59e0b)] rounded">
+              <span className="inline-block w-2 h-2 rounded-full bg-[var(--warning,#f59e0b)]" />
+              <span>A newer container image is available. Re-pull the image in Docker settings above to update.</span>
+            </div>
+          )}
         </div>
       </div>
 

app/src/hooks/useUpdates.ts

@@ -6,16 +6,25 @@ import * as commands from "../lib/tauri-commands";
 const CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
 
 export function useUpdates() {
-  const { updateInfo, setUpdateInfo, appVersion, setAppVersion, appSettings } =
-    useAppState(
-      useShallow((s) => ({
-        updateInfo: s.updateInfo,
-        setUpdateInfo: s.setUpdateInfo,
-        appVersion: s.appVersion,
-        setAppVersion: s.setAppVersion,
-        appSettings: s.appSettings,
-      })),
-    );
+  const {
+    updateInfo,
+    setUpdateInfo,
+    imageUpdateInfo,
+    setImageUpdateInfo,
+    appVersion,
+    setAppVersion,
+    appSettings,
+  } = useAppState(
+    useShallow((s) => ({
+      updateInfo: s.updateInfo,
+      setUpdateInfo: s.setUpdateInfo,
+      imageUpdateInfo: s.imageUpdateInfo,
+      setImageUpdateInfo: s.setImageUpdateInfo,
+      appVersion: s.appVersion,
+      setAppVersion: s.setAppVersion,
+      appSettings: s.appSettings,
+    })),
+  );
 
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -47,11 +56,31 @@ export function useUpdates() {
     }
   }, [setUpdateInfo, appSettings?.dismissed_update_version]);
 
+  const checkImageUpdate = useCallback(async () => {
+    try {
+      const info = await commands.checkImageUpdate();
+      if (info) {
+        // Respect dismissed image digest
+        const dismissed = appSettings?.dismissed_image_digest;
+        if (dismissed && dismissed === info.remote_digest) {
+          setImageUpdateInfo(null);
+          return null;
+        }
+      }
+      setImageUpdateInfo(info);
+      return info;
+    } catch (e) {
+      console.error("Failed to check for image updates:", e);
+      return null;
+    }
+  }, [setImageUpdateInfo, appSettings?.dismissed_image_digest]);
+
   const startPeriodicCheck = useCallback(() => {
     if (intervalRef.current) return;
     intervalRef.current = setInterval(() => {
       if (appSettings?.auto_check_updates !== false) {
         checkForUpdates();
+        checkImageUpdate();
       }
     }, CHECK_INTERVAL_MS);
     return () => {
@@ -60,13 +89,15 @@ export function useUpdates() {
         intervalRef.current = null;
       }
     };
-  }, [checkForUpdates, appSettings?.auto_check_updates]);
+  }, [checkForUpdates, checkImageUpdate, appSettings?.auto_check_updates]);
 
   return {
     updateInfo,
+    imageUpdateInfo,
     appVersion,
     loadVersion,
     checkForUpdates,
+    checkImageUpdate,
     startPeriodicCheck,
   };
 }

app/src/lib/tauri-commands.ts

@@ -1,5 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
-import type { Project, ProjectPath, ContainerInfo, SiblingContainer, AppSettings, UpdateInfo, McpServer, FileEntry } from "./types";
+import type { Project, ProjectPath, ContainerInfo, SiblingContainer, AppSettings, UpdateInfo, ImageUpdateInfo, McpServer, FileEntry } from "./types";
 
 // Docker
 export const checkDocker = () => invoke<boolean>("check_docker");
@@ -83,3 +83,5 @@ export const uploadFileToContainer = (projectId: string, hostPath: string, conta
 export const getAppVersion = () => invoke<string>("get_app_version");
 export const checkForUpdates = () =>
   invoke<UpdateInfo | null>("check_for_updates");
+export const checkImageUpdate = () =>
+  invoke<ImageUpdateInfo | null>("check_image_update");

app/src/lib/types.ts

@@ -20,7 +20,7 @@ export interface Project {
   paths: ProjectPath[];
   container_id: string | null;
   status: ProjectStatus;
-  auth_mode: AuthMode;
+  backend: Backend;
   bedrock_config: BedrockConfig | null;
   ollama_config: OllamaConfig | null;
   litellm_config: LiteLlmConfig | null;
@@ -45,7 +45,7 @@ export type ProjectStatus =
   | "stopping"
   | "error";
 
-export type AuthMode = "anthropic" | "bedrock" | "ollama" | "lit_llm";
+export type Backend = "anthropic" | "bedrock" | "ollama" | "lite_llm";
 
 export type BedrockAuthMethod = "static_credentials" | "profile" | "bearer_token";
 
@@ -116,6 +116,7 @@ export interface AppSettings {
   dismissed_update_version: string | null;
   timezone: string | null;
   default_microphone: string | null;
+  dismissed_image_digest: string | null;
 }
 
 export interface UpdateInfo {
@@ -133,6 +134,12 @@ export interface ReleaseAsset {
   size: number;
 }
 
+export interface ImageUpdateInfo {
+  remote_digest: string;
+  local_digest: string | null;
+  remote_updated_at: string | null;
+}
+
 export type McpTransportType = "stdio" | "http";
 
 export interface McpServer {

app/src/store/appState.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import type { Project, TerminalSession, AppSettings, UpdateInfo, McpServer } from "../lib/types";
+import type { Project, TerminalSession, AppSettings, UpdateInfo, ImageUpdateInfo, McpServer } from "../lib/types";
 
 interface AppState {
   // Projects
@@ -39,6 +39,10 @@ interface AppState {
   setUpdateInfo: (info: UpdateInfo | null) => void;
   appVersion: string;
   setAppVersion: (version: string) => void;
+
+  // Image update info
+  imageUpdateInfo: ImageUpdateInfo | null;
+  setImageUpdateInfo: (info: ImageUpdateInfo | null) => void;
 }
 
 export const useAppState = create<AppState>((set) => ({
@@ -111,4 +115,8 @@ export const useAppState = create<AppState>((set) => ({
   setUpdateInfo: (info) => set({ updateInfo: info }),
   appVersion: "",
   setAppVersion: (version) => set({ appVersion: version }),
+
+  // Image update info
+  imageUpdateInfo: null,
+  setImageUpdateInfo: (info) => set({ imageUpdateInfo: info }),
 }));