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>

app/src/components/layout/Sidebar.tsx

@@ -0,0 +1,40 @@
+import { useAppState } from "../../store/appState";
+import ProjectList from "../projects/ProjectList";
+import SettingsPanel from "../settings/SettingsPanel";
+
+export default function Sidebar() {
+  const { sidebarView, setSidebarView } = useAppState();
+
+  return (
+    <div className="flex flex-col h-full w-64 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
+      {/* Nav tabs */}
+      <div className="flex border-b border-[var(--border-color)]">
+        <button
+          onClick={() => setSidebarView("projects")}
+          className={`flex-1 px-3 py-2 text-sm font-medium transition-colors ${
+            sidebarView === "projects"
+              ? "text-[var(--accent)] border-b-2 border-[var(--accent)]"
+              : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          }`}
+        >
+          Projects
+        </button>
+        <button
+          onClick={() => setSidebarView("settings")}
+          className={`flex-1 px-3 py-2 text-sm font-medium transition-colors ${
+            sidebarView === "settings"
+              ? "text-[var(--accent)] border-b-2 border-[var(--accent)]"
+              : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          }`}
+        >
+          Settings
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        {sidebarView === "projects" ? <ProjectList /> : <SettingsPanel />}
+      </div>
+    </div>
+  );
+}

app/src/components/layout/StatusBar.tsx

@@ -0,0 +1,22 @@
+import { useAppState } from "../../store/appState";
+
+export default function StatusBar() {
+  const { projects, sessions } = useAppState();
+  const running = projects.filter((p) => p.status === "running").length;
+
+  return (
+    <div className="flex items-center h-6 px-3 bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg text-xs text-[var(--text-secondary)]">
+      <span>
+        {projects.length} project{projects.length !== 1 ? "s" : ""}
+      </span>
+      <span className="mx-2">|</span>
+      <span>
+        {running} running
+      </span>
+      <span className="mx-2">|</span>
+      <span>
+        {sessions.length} terminal{sessions.length !== 1 ? "s" : ""}
+      </span>
+    </div>
+  );
+}

app/src/components/layout/TopBar.tsx

@@ -0,0 +1,31 @@
+import TerminalTabs from "../terminal/TerminalTabs";
+import { useAppState } from "../../store/appState";
+
+export default function TopBar() {
+  const { dockerAvailable, imageExists } = useAppState();
+
+  return (
+    <div className="flex items-center h-10 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
+      <div className="flex-1 overflow-x-auto">
+        <TerminalTabs />
+      </div>
+      <div className="flex items-center gap-2 px-3 text-xs text-[var(--text-secondary)]">
+        <StatusDot ok={dockerAvailable === true} label="Docker" />
+        <StatusDot ok={imageExists === true} label="Image" />
+      </div>
+    </div>
+  );
+}
+
+function StatusDot({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <span className="flex items-center gap-1">
+      <span
+        className={`inline-block w-2 h-2 rounded-full ${
+          ok ? "bg-[var(--success)]" : "bg-[var(--text-secondary)]"
+        }`}
+      />
+      {label}
+    </span>
+  );
+}