Add port mappings feature, update app icon, and enhance default instructions

- Add per-project port mapping configuration (host:container port pairs with
  TCP/UDP protocol) stored in project config and applied as Docker port
  bindings at container creation. Port changes trigger automatic container
  recreation via fingerprint detection.
- Create PortMappingsModal UI component following the same pattern as
  EnvVarsModal, integrated into ProjectCard config panel.
- Inject port mapping details into CLAUDE_INSTRUCTIONS so Claude inside the
  container knows which ports are available for testing services.
- Update default global instructions for new installs to encourage use of
  subagents for long-running and parallel tasks.
- Replace app icons with new v2 sun logo design for better visibility at
  small sizes (taskbar/dock).

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

app/src/components/projects/PortMappingsModal.tsx

@@ -0,0 +1,157 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import type { PortMapping } from "../../lib/types";
+
+interface Props {
+  portMappings: PortMapping[];
+  disabled: boolean;
+  onSave: (mappings: PortMapping[]) => Promise<void>;
+  onClose: () => void;
+}
+
+export default function PortMappingsModal({ portMappings: initial, disabled, onSave, onClose }: Props) {
+  const [mappings, setMappings] = useState<PortMapping[]>(initial);
+  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 updatePort = (index: number, field: "host_port" | "container_port", value: string) => {
+    const updated = [...mappings];
+    const num = parseInt(value, 10);
+    updated[index] = { ...updated[index], [field]: isNaN(num) ? 0 : num };
+    setMappings(updated);
+  };
+
+  const updateProtocol = (index: number, value: string) => {
+    const updated = [...mappings];
+    updated[index] = { ...updated[index], protocol: value };
+    setMappings(updated);
+  };
+
+  const removeMapping = async (index: number) => {
+    const updated = mappings.filter((_, i) => i !== index);
+    setMappings(updated);
+    try { await onSave(updated); } catch (err) {
+      console.error("Failed to remove port mapping:", err);
+    }
+  };
+
+  const addMapping = async () => {
+    const updated = [...mappings, { host_port: 0, container_port: 0, protocol: "tcp" }];
+    setMappings(updated);
+    try { await onSave(updated); } catch (err) {
+      console.error("Failed to add port mapping:", err);
+    }
+  };
+
+  const handleBlur = async () => {
+    try { await onSave(mappings); } catch (err) {
+      console.error("Failed to update port mappings:", err);
+    }
+  };
+
+  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-[36rem] shadow-xl max-h-[80vh] overflow-y-auto">
+        <h2 className="text-lg font-semibold mb-2">Port Mappings</h2>
+        <p className="text-xs text-[var(--text-secondary)] mb-4">
+          Map host ports to container ports. Services can be started after the container is running.
+        </p>
+
+        {disabled && (
+          <div className="px-2 py-1.5 mb-3 bg-[var(--warning)]/15 border border-[var(--warning)]/30 rounded text-xs text-[var(--warning)]">
+            Container must be stopped to change port mappings.
+          </div>
+        )}
+
+        <div className="space-y-2 mb-4">
+          {mappings.length === 0 && (
+            <p className="text-xs text-[var(--text-secondary)]">No port mappings configured.</p>
+          )}
+          {mappings.length > 0 && (
+            <div className="flex gap-2 items-center text-xs text-[var(--text-secondary)] px-0.5">
+              <span className="w-[30%]">Host Port</span>
+              <span className="w-[30%]">Container Port</span>
+              <span className="w-[25%]">Protocol</span>
+              <span className="w-[15%]" />
+            </div>
+          )}
+          {mappings.map((pm, i) => (
+            <div key={i} className="flex gap-2 items-center">
+              <input
+                type="number"
+                min="1"
+                max="65535"
+                value={pm.host_port || ""}
+                onChange={(e) => updatePort(i, "host_port", e.target.value)}
+                onBlur={handleBlur}
+                placeholder="8080"
+                disabled={disabled}
+                className="w-[30%] px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50 font-mono"
+              />
+              <input
+                type="number"
+                min="1"
+                max="65535"
+                value={pm.container_port || ""}
+                onChange={(e) => updatePort(i, "container_port", e.target.value)}
+                onBlur={handleBlur}
+                placeholder="8080"
+                disabled={disabled}
+                className="w-[30%] px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50 font-mono"
+              />
+              <select
+                value={pm.protocol}
+                onChange={(e) => { updateProtocol(i, e.target.value); handleBlur(); }}
+                disabled={disabled}
+                className="w-[25%] px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
+              >
+                <option value="tcp">TCP</option>
+                <option value="udp">UDP</option>
+              </select>
+              <button
+                onClick={() => removeMapping(i)}
+                disabled={disabled}
+                className="w-[15%] px-2 py-1.5 text-sm text-[var(--error)] hover:bg-[var(--bg-primary)] rounded disabled:opacity-50 transition-colors text-center"
+              >
+                x
+              </button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-between items-center">
+          <button
+            onClick={addMapping}
+            disabled={disabled}
+            className="text-sm text-[var(--accent)] hover:text-[var(--accent-hover)] disabled:opacity-50 transition-colors"
+          >
+            + Add port mapping
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/src/components/projects/ProjectCard.tsx

@@ -5,6 +5,7 @@ import { useProjects } from "../../hooks/useProjects";
 import { useTerminal } from "../../hooks/useTerminal";
 import { useAppState } from "../../store/appState";
 import EnvVarsModal from "./EnvVarsModal";
+import PortMappingsModal from "./PortMappingsModal";
 import ClaudeInstructionsModal from "./ClaudeInstructionsModal";
 
 interface Props {
@@ -20,6 +21,7 @@ export default function ProjectCard({ project }: Props) {
   const [error, setError] = useState<string | null>(null);
   const [showConfig, setShowConfig] = useState(false);
   const [showEnvVarsModal, setShowEnvVarsModal] = useState(false);
+  const [showPortMappingsModal, setShowPortMappingsModal] = useState(false);
   const [showClaudeInstructionsModal, setShowClaudeInstructionsModal] = useState(false);
   const isSelected = selectedProjectId === project.id;
   const isStopped = project.status === "stopped" || project.status === "error";
@@ -32,6 +34,7 @@ export default function ProjectCard({ project }: Props) {
   const [gitToken, setGitToken] = useState(project.git_token ?? "");
   const [claudeInstructions, setClaudeInstructions] = useState(project.claude_instructions ?? "");
   const [envVars, setEnvVars] = useState(project.custom_env_vars ?? []);
+  const [portMappings, setPortMappings] = useState(project.port_mappings ?? []);
 
   // Bedrock local state for text fields
   const [bedrockRegion, setBedrockRegion] = useState(project.bedrock_config?.aws_region ?? "us-east-1");
@@ -51,6 +54,7 @@ export default function ProjectCard({ project }: Props) {
     setGitToken(project.git_token ?? "");
     setClaudeInstructions(project.claude_instructions ?? "");
     setEnvVars(project.custom_env_vars ?? []);
+    setPortMappings(project.port_mappings ?? []);
     setBedrockRegion(project.bedrock_config?.aws_region ?? "us-east-1");
     setBedrockAccessKeyId(project.bedrock_config?.aws_access_key_id ?? "");
     setBedrockSecretKey(project.bedrock_config?.aws_secret_access_key ?? "");
@@ -524,6 +528,19 @@ export default function ProjectCard({ project }: Props) {
                 </button>
               </div>
 
+              {/* Port Mappings */}
+              <div className="flex items-center justify-between">
+                <label className="text-xs text-[var(--text-secondary)]">
+                  Port Mappings{portMappings.length > 0 && ` (${portMappings.length})`}
+                </label>
+                <button
+                  onClick={() => setShowPortMappingsModal(true)}
+                  className="text-xs px-2 py-0.5 text-[var(--accent)] hover:text-[var(--accent-hover)] hover:bg-[var(--bg-primary)] rounded transition-colors"
+                >
+                  Edit
+                </button>
+              </div>
+
               {/* Claude Instructions */}
               <div className="flex items-center justify-between">
                 <label className="text-xs text-[var(--text-secondary)]">
@@ -682,6 +699,18 @@ export default function ProjectCard({ project }: Props) {
         />
       )}
 
+      {showPortMappingsModal && (
+        <PortMappingsModal
+          portMappings={portMappings}
+          disabled={!isStopped}
+          onSave={async (mappings) => {
+            setPortMappings(mappings);
+            await update({ ...project, port_mappings: mappings });
+          }}
+          onClose={() => setShowPortMappingsModal(false)}
+        />
+      )}
+
       {showClaudeInstructionsModal && (
         <ClaudeInstructionsModal
           instructions={claudeInstructions}

app/src/lib/types.ts

@@ -8,6 +8,12 @@ export interface ProjectPath {
   mount_name: string;
 }
 
+export interface PortMapping {
+  host_port: number;
+  container_port: number;
+  protocol: string;
+}
+
 export interface Project {
   id: string;
   name: string;
@@ -22,6 +28,7 @@ export interface Project {
   git_user_name: string | null;
   git_user_email: string | null;
   custom_env_vars: EnvVar[];
+  port_mappings: PortMapping[];
   claude_instructions: string | null;
   created_at: string;
   updated_at: string;