Initial commit: Triple-C app, container, and CI

Tauri v2 desktop app (React/TypeScript + Rust) for managing
containerized Claude Code environments. Includes Gitea Actions
workflow for building and pushing the sandbox container image,
and a BUILDING.md guide for manual app builds on Linux and Windows.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 04:29:51 +00:00
commit 97a0745ead
65 changed files with 17202 additions and 0 deletions

View File

@@ -0,0 +1,68 @@
import { useState } from "react";
import { useSettings } from "../../hooks/useSettings";
export default function ApiKeyInput() {
const { hasKey, saveApiKey, removeApiKey } = useSettings();
const [key, setKey] = useState("");
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const handleSave = async () => {
if (!key.trim()) return;
setSaving(true);
setError(null);
try {
await saveApiKey(key.trim());
setKey("");
} catch (e) {
setError(String(e));
} finally {
setSaving(false);
}
};
return (
<div>
<label className="block text-sm font-medium mb-1">Authentication</label>
<p className="text-xs text-[var(--text-secondary)] mb-3">
Each project can use either <strong>claude login</strong> (OAuth, run inside the terminal) or an <strong>API key</strong>. Set auth mode per-project.
</p>
<label className="block text-xs text-[var(--text-secondary)] mb-1 mt-3">
API Key (for projects using API key mode)
</label>
{hasKey ? (
<div className="flex items-center gap-2">
<span className="text-sm text-[var(--success)]">Key configured</span>
<button
onClick={async () => {
try { await removeApiKey(); } catch (e) { setError(String(e)); }
}}
className="text-xs text-[var(--error)] hover:underline"
>
Remove
</button>
</div>
) : (
<div className="space-y-2">
<input
type="password"
value={key}
onChange={(e) => setKey(e.target.value)}
placeholder="sk-ant-..."
className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
onKeyDown={(e) => e.key === "Enter" && handleSave()}
/>
<button
onClick={handleSave}
disabled={saving || !key.trim()}
className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
>
{saving ? "Saving..." : "Save Key"}
</button>
</div>
)}
{error && <div className="text-xs text-[var(--error)] mt-1">{error}</div>}
</div>
);
}

View File

@@ -0,0 +1,72 @@
import { useState } from "react";
import { useDocker } from "../../hooks/useDocker";
export default function DockerSettings() {
const { dockerAvailable, imageExists, checkDocker, checkImage, buildImage } =
useDocker();
const [building, setBuilding] = useState(false);
const [buildLog, setBuildLog] = useState<string[]>([]);
const [error, setError] = useState<string | null>(null);
const handleBuild = async () => {
setBuilding(true);
setBuildLog([]);
setError(null);
try {
await buildImage((msg) => {
setBuildLog((prev) => [...prev, msg]);
});
} catch (e) {
setError(String(e));
} finally {
setBuilding(false);
}
};
return (
<div>
<label className="block text-sm font-medium mb-2">Docker</label>
<div className="space-y-2 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)]"}>
{dockerAvailable === null ? "Checking..." : dockerAvailable ? "Connected" : "Not Available"}
</span>
</div>
<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>
</div>
<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"}
</button>
</div>
{buildLog.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) => (
<div key={i}>{line}</div>
))}
</div>
)}
{error && <div className="text-xs text-[var(--error)]">{error}</div>}
</div>
</div>
);
}

View File

@@ -0,0 +1,14 @@
import ApiKeyInput from "./ApiKeyInput";
import DockerSettings from "./DockerSettings";
export default function SettingsPanel() {
return (
<div className="p-4 space-y-6">
<h2 className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
Settings
</h2>
<ApiKeyInput />
<DockerSettings />
</div>
);
}