Add custom env vars and Claude instructions for projects

Support per-project environment variables injected into containers,
plus global and per-project Claude Code instructions written to
~/.claude/CLAUDE.md inside the container on start. Reserved env var
prefixes are blocked, and changes trigger automatic container recreation.

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

app/src/components/settings/SettingsPanel.tsx

@@ -1,8 +1,11 @@
 import ApiKeyInput from "./ApiKeyInput";
 import DockerSettings from "./DockerSettings";
 import AwsSettings from "./AwsSettings";
+import { useSettings } from "../../hooks/useSettings";
 
 export default function SettingsPanel() {
+  const { appSettings, saveSettings } = useSettings();
+
   return (
     <div className="p-4 space-y-6">
       <h2 className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
@@ -11,6 +14,22 @@ export default function SettingsPanel() {
       <ApiKeyInput />
       <DockerSettings />
       <AwsSettings />
+      <div>
+        <label className="block text-sm font-medium mb-2">Claude Instructions</label>
+        <p className="text-xs text-[var(--text-secondary)] mb-1.5">
+          Global instructions applied to all projects (written to ~/.claude/CLAUDE.md in containers)
+        </p>
+        <textarea
+          value={appSettings?.global_claude_instructions ?? ""}
+          onChange={async (e) => {
+            if (!appSettings) return;
+            await saveSettings({ ...appSettings, global_claude_instructions: e.target.value || null });
+          }}
+          placeholder="Instructions for Claude Code in all project containers..."
+          rows={4}
+          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)] resize-y font-mono"
+        />
+      </div>
     </div>
   );
 }