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/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>
   );
 }