Add container registry pull, image source settings, and global AWS config

Support pulling images from registry (default: repo.anhonesthost.net/cybercovellc/triple-c/triple-c-sandbox:latest),
local builds, or custom images via a new settings UI. Add global AWS configuration
(config path auto-detect, profile picker, region) that serves as defaults overridable
per-project for Bedrock auth.

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

app/src/App.tsx

@@ -10,12 +10,13 @@ import { useAppState } from "./store/appState";
 
 export default function App() {
   const { checkDocker, checkImage } = useDocker();
-  const { checkApiKey } = useSettings();
+  const { checkApiKey, loadSettings } = useSettings();
   const { refresh } = useProjects();
   const { sessions, activeSessionId } = useAppState();
 
   // Initialize on mount
   useEffect(() => {
+    loadSettings();
     checkDocker();
     checkImage();
     checkApiKey();

app/src/components/settings/AwsSettings.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect } from "react";
+import { useSettings } from "../../hooks/useSettings";
+import * as commands from "../../lib/tauri-commands";
+
+export default function AwsSettings() {
+  const { appSettings, saveSettings } = useSettings();
+  const [profiles, setProfiles] = useState<string[]>([]);
+  const [detecting, setDetecting] = useState(false);
+
+  const globalAws = appSettings?.global_aws ?? {
+    aws_config_path: null,
+    aws_profile: null,
+    aws_region: null,
+  };
+
+  // Load profiles when component mounts or aws_config_path changes
+  useEffect(() => {
+    commands.listAwsProfiles().then(setProfiles).catch(() => setProfiles([]));
+  }, [globalAws.aws_config_path]);
+
+  const handleDetect = async () => {
+    setDetecting(true);
+    try {
+      const path = await commands.detectAwsConfig();
+      if (path && appSettings) {
+        const updated = {
+          ...appSettings,
+          global_aws: { ...globalAws, aws_config_path: path },
+        };
+        await saveSettings(updated);
+        // Refresh profiles after detection
+        const p = await commands.listAwsProfiles();
+        setProfiles(p);
+      }
+    } finally {
+      setDetecting(false);
+    }
+  };
+
+  const handleChange = async (field: string, value: string | null) => {
+    if (!appSettings) return;
+    await saveSettings({
+      ...appSettings,
+      global_aws: { ...globalAws, [field]: value || null },
+    });
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-medium mb-2">AWS Configuration</label>
+      <div className="space-y-3 text-sm">
+        <p className="text-xs text-[var(--text-secondary)]">
+          Global AWS defaults for Bedrock projects. Per-project settings override these.
+        </p>
+
+        {/* AWS Config Path */}
+        <div>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1">AWS Config Path</span>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={globalAws.aws_config_path ?? ""}
+              onChange={(e) => handleChange("aws_config_path", e.target.value)}
+              placeholder="~/.aws"
+              className="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            />
+            <button
+              onClick={handleDetect}
+              disabled={detecting}
+              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"
+            >
+              {detecting ? "..." : "Detect"}
+            </button>
+          </div>
+          {globalAws.aws_config_path && (
+            <span className="text-xs text-[var(--success)] mt-0.5 block">Found</span>
+          )}
+        </div>
+
+        {/* AWS Profile */}
+        <div>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1">Default Profile</span>
+          <select
+            value={globalAws.aws_profile ?? ""}
+            onChange={(e) => handleChange("aws_profile", e.target.value)}
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+          >
+            <option value="">None (use default)</option>
+            {profiles.map((p) => (
+              <option key={p} value={p}>{p}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* AWS Region */}
+        <div>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1">Default Region</span>
+          <input
+            type="text"
+            value={globalAws.aws_region ?? ""}
+            onChange={(e) => handleChange("aws_region", e.target.value)}
+            placeholder="e.g., us-east-1"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

app/src/components/settings/DockerSettings.tsx

@@ -1,32 +1,84 @@
 import { useState } from "react";
 import { useDocker } from "../../hooks/useDocker";
+import { useSettings } from "../../hooks/useSettings";
+import type { ImageSource } from "../../lib/types";
+
+const REGISTRY_IMAGE = "repo.anhonesthost.net/cybercovellc/triple-c/triple-c-sandbox:latest";
+
+const IMAGE_SOURCE_OPTIONS: { value: ImageSource; label: string; description: string }[] = [
+  { value: "registry", label: "Registry", description: "Pull from container registry" },
+  { value: "local_build", label: "Local Build", description: "Build from embedded Dockerfile" },
+  { value: "custom", label: "Custom", description: "Specify a custom image" },
+];
 
 export default function DockerSettings() {
-  const { dockerAvailable, imageExists, checkDocker, checkImage, buildImage } =
+  const { dockerAvailable, imageExists, checkDocker, checkImage, buildImage, pullImage } =
     useDocker();
-  const [building, setBuilding] = useState(false);
-  const [buildLog, setBuildLog] = useState<string[]>([]);
+  const { appSettings, saveSettings } = useSettings();
+  const [working, setWorking] = useState(false);
+  const [log, setLog] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [customInput, setCustomInput] = useState(appSettings?.custom_image_name ?? "");
 
-  const handleBuild = async () => {
-    setBuilding(true);
-    setBuildLog([]);
+  const imageSource = appSettings?.image_source ?? "registry";
+
+  const resolvedImageName = (() => {
+    switch (imageSource) {
+      case "registry": return REGISTRY_IMAGE;
+      case "local_build": return "triple-c:latest";
+      case "custom": return customInput || REGISTRY_IMAGE;
+    }
+  })();
+
+  const handleSourceChange = async (source: ImageSource) => {
+    if (!appSettings) return;
+    await saveSettings({ ...appSettings, image_source: source });
+    // Re-check image existence after changing source
+    setTimeout(() => checkImage(), 100);
+  };
+
+  const handleCustomChange = async (value: string) => {
+    setCustomInput(value);
+    if (!appSettings) return;
+    await saveSettings({ ...appSettings, custom_image_name: value || null });
+  };
+
+  const handlePull = async () => {
+    setWorking(true);
+    setLog([]);
     setError(null);
     try {
-      await buildImage((msg) => {
-        setBuildLog((prev) => [...prev, msg]);
+      await pullImage(resolvedImageName, (msg) => {
+        setLog((prev) => [...prev, msg]);
       });
+      await checkImage();
     } catch (e) {
       setError(String(e));
     } finally {
-      setBuilding(false);
+      setWorking(false);
+    }
+  };
+
+  const handleBuild = async () => {
+    setWorking(true);
+    setLog([]);
+    setError(null);
+    try {
+      await buildImage((msg) => {
+        setLog((prev) => [...prev, msg]);
+      });
+      await checkImage();
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setWorking(false);
     }
   };
 
   return (
     <div>
       <label className="block text-sm font-medium mb-2">Docker</label>
-      <div className="space-y-2 text-sm">
+      <div className="space-y-3 text-sm">
         <div className="flex items-center justify-between">
           <span className="text-[var(--text-secondary)]">Docker Status</span>
           <span className={dockerAvailable ? "text-[var(--success)]" : "text-[var(--error)]"}>
@@ -34,32 +86,88 @@ export default function DockerSettings() {
           </span>
         </div>
 
+        {/* Image Source Selector */}
+        <div>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1.5">Image Source</span>
+          <div className="flex gap-1">
+            {IMAGE_SOURCE_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => handleSourceChange(opt.value)}
+                className={`flex-1 px-2 py-1.5 text-xs rounded border transition-colors ${
+                  imageSource === opt.value
+                    ? "bg-[var(--accent)] text-white border-[var(--accent)]"
+                    : "bg-[var(--bg-tertiary)] border-[var(--border-color)] hover:bg-[var(--border-color)]"
+                }`}
+                title={opt.description}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Custom image input */}
+        {imageSource === "custom" && (
+          <div>
+            <span className="text-[var(--text-secondary)] text-xs block mb-1">Custom Image</span>
+            <input
+              type="text"
+              value={customInput}
+              onChange={(e) => handleCustomChange(e.target.value)}
+              placeholder="e.g., myregistry.com/image:tag"
+              className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            />
+          </div>
+        )}
+
+        {/* Resolved image display */}
         <div className="flex items-center justify-between">
           <span className="text-[var(--text-secondary)]">Image</span>
-          <span className={imageExists ? "text-[var(--success)]" : "text-[var(--text-secondary)]"}>
-            {imageExists === null ? "Checking..." : imageExists ? "Built" : "Not Built"}
+          <span className="text-xs text-[var(--text-secondary)] truncate max-w-[200px]" title={resolvedImageName}>
+            {resolvedImageName}
           </span>
         </div>
 
+        <div className="flex items-center justify-between">
+          <span className="text-[var(--text-secondary)]">Status</span>
+          <span className={imageExists ? "text-[var(--success)]" : "text-[var(--text-secondary)]"}>
+            {imageExists === null ? "Checking..." : imageExists ? "Ready" : "Not Found"}
+          </span>
+        </div>
+
+        {/* Action buttons */}
         <div className="flex gap-2">
           <button
             onClick={async () => { await checkDocker(); await checkImage(); }}
             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"
           >
-            Refresh Status
-          </button>
-          <button
-            onClick={handleBuild}
-            disabled={building || !dockerAvailable}
-            className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
-          >
-            {building ? "Building..." : imageExists ? "Rebuild Image" : "Build Image"}
+            Refresh
           </button>
+
+          {imageSource === "local_build" ? (
+            <button
+              onClick={handleBuild}
+              disabled={working || !dockerAvailable}
+              className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
+            >
+              {working ? "Building..." : imageExists ? "Rebuild Image" : "Build Image"}
+            </button>
+          ) : (
+            <button
+              onClick={handlePull}
+              disabled={working || !dockerAvailable}
+              className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
+            >
+              {working ? "Pulling..." : imageExists ? "Re-pull Image" : "Pull Image"}
+            </button>
+          )}
         </div>
 
-        {buildLog.length > 0 && (
+        {/* Log output */}
+        {log.length > 0 && (
           <div className="max-h-40 overflow-y-auto bg-[var(--bg-primary)] border border-[var(--border-color)] rounded p-2 text-xs font-mono text-[var(--text-secondary)]">
-            {buildLog.map((line, i) => (
+            {log.map((line, i) => (
               <div key={i}>{line}</div>
             ))}
           </div>

app/src/components/settings/SettingsPanel.tsx

@@ -1,5 +1,6 @@
 import ApiKeyInput from "./ApiKeyInput";
 import DockerSettings from "./DockerSettings";
+import AwsSettings from "./AwsSettings";
 
 export default function SettingsPanel() {
   return (
@@ -9,6 +10,7 @@ export default function SettingsPanel() {
       </h2>
       <ApiKeyInput />
       <DockerSettings />
+      <AwsSettings />
     </div>
   );
 }

app/src/hooks/useDocker.ts

@@ -51,11 +51,30 @@ export function useDocker() {
     [setImageExists],
   );
 
+  const pullImage = useCallback(
+    async (imageName: string, onProgress?: (msg: string) => void) => {
+      const unlisten = onProgress
+        ? await listen<string>("image-pull-progress", (event) => {
+            onProgress(event.payload);
+          })
+        : null;
+
+      try {
+        await commands.pullImage(imageName);
+        setImageExists(true);
+      } finally {
+        unlisten?.();
+      }
+    },
+    [setImageExists],
+  );
+
   return {
     dockerAvailable,
     imageExists,
     checkDocker,
     checkImage,
     buildImage,
+    pullImage,
   };
 }

app/src/hooks/useSettings.ts

@@ -1,9 +1,10 @@
 import { useCallback } from "react";
 import { useAppState } from "../store/appState";
 import * as commands from "../lib/tauri-commands";
+import type { AppSettings } from "../lib/types";
 
 export function useSettings() {
-  const { hasKey, setHasKey } = useAppState();
+  const { hasKey, setHasKey, appSettings, setAppSettings } = useAppState();
 
   const checkApiKey = useCallback(async () => {
     try {
@@ -29,10 +30,33 @@ export function useSettings() {
     setHasKey(false);
   }, [setHasKey]);
 
+  const loadSettings = useCallback(async () => {
+    try {
+      const settings = await commands.getSettings();
+      setAppSettings(settings);
+      return settings;
+    } catch (e) {
+      console.error("Failed to load settings:", e);
+      return null;
+    }
+  }, [setAppSettings]);
+
+  const saveSettings = useCallback(
+    async (settings: AppSettings) => {
+      const updated = await commands.updateSettings(settings);
+      setAppSettings(updated);
+      return updated;
+    },
+    [setAppSettings],
+  );
+
   return {
     hasKey,
     checkApiKey,
     saveApiKey,
     removeApiKey,
+    appSettings,
+    loadSettings,
+    saveSettings,
   };
 }

app/src/lib/constants.ts

@@ -1,2 +1 @@
 export const APP_NAME = "Triple-C";
-export const IMAGE_NAME = "triple-c:latest";

app/src/lib/tauri-commands.ts

@@ -1,5 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
-import type { Project, ContainerInfo, SiblingContainer } from "./types";
+import type { Project, ContainerInfo, SiblingContainer, AppSettings } from "./types";
 
 // Docker
 export const checkDocker = () => invoke<boolean>("check_docker");
@@ -30,6 +30,15 @@ export const setApiKey = (key: string) =>
   invoke<void>("set_api_key", { key });
 export const hasApiKey = () => invoke<boolean>("has_api_key");
 export const deleteApiKey = () => invoke<void>("delete_api_key");
+export const getSettings = () => invoke<AppSettings>("get_settings");
+export const updateSettings = (settings: AppSettings) =>
+  invoke<AppSettings>("update_settings", { settings });
+export const pullImage = (imageName: string) =>
+  invoke<void>("pull_image", { imageName });
+export const detectAwsConfig = () =>
+  invoke<string | null>("detect_aws_config");
+export const listAwsProfiles = () =>
+  invoke<string[]>("list_aws_profiles");
 
 // Terminal
 export const openTerminalSession = (projectId: string, sessionId: string) =>

app/src/lib/types.ts

@@ -58,3 +58,21 @@ export interface TerminalSession {
   projectId: string;
   projectName: string;
 }
+
+export type ImageSource = "registry" | "local_build" | "custom";
+
+export interface GlobalAwsSettings {
+  aws_config_path: string | null;
+  aws_profile: string | null;
+  aws_region: string | null;
+}
+
+export interface AppSettings {
+  default_ssh_key_path: string | null;
+  default_git_user_name: string | null;
+  default_git_user_email: string | null;
+  docker_socket_path: string | null;
+  image_source: ImageSource;
+  custom_image_name: string | null;
+  global_aws: GlobalAwsSettings;
+}

app/src/store/appState.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import type { Project, TerminalSession } from "../lib/types";
+import type { Project, TerminalSession, AppSettings } from "../lib/types";
 
 interface AppState {
   // Projects
@@ -26,6 +26,10 @@ interface AppState {
   setImageExists: (exists: boolean | null) => void;
   hasKey: boolean | null;
   setHasKey: (has: boolean | null) => void;
+
+  // App settings
+  appSettings: AppSettings | null;
+  setAppSettings: (settings: AppSettings) => void;
 }
 
 export const useAppState = create<AppState>((set) => ({
@@ -77,4 +81,8 @@ export const useAppState = create<AppState>((set) => ({
   setImageExists: (exists) => set({ imageExists: exists }),
   hasKey: null,
   setHasKey: (has) => set({ hasKey: has }),
+
+  // App settings
+  appSettings: null,
+  setAppSettings: (settings) => set({ appSettings: settings }),
 }));