Josh Knapp
da078af73f
API key auth only provides short-lived session tokens (8hrs or until session restart) with no refresh mechanism, unlike OAuth which persists via .credentials.json. Remove the non-functional API key settings UI and all supporting code (frontend state, Tauri commands, keyring storage, container env var injection, and fingerprint-based recreation checks) to avoid user confusion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import Sidebar from "./components/layout/Sidebar";
|
|
import TopBar from "./components/layout/TopBar";
|
|
import StatusBar from "./components/layout/StatusBar";
|
|
import TerminalView from "./components/terminal/TerminalView";
|
|
import { useDocker } from "./hooks/useDocker";
|
|
import { useSettings } from "./hooks/useSettings";
|
|
import { useProjects } from "./hooks/useProjects";
|
|
import { useUpdates } from "./hooks/useUpdates";
|
|
import { useAppState } from "./store/appState";
|
|
|
|
export default function App() {
|
|
const { checkDocker, checkImage } = useDocker();
|
|
const { loadSettings } = useSettings();
|
|
const { refresh } = useProjects();
|
|
const { loadVersion, checkForUpdates, startPeriodicCheck } = useUpdates();
|
|
const { sessions, activeSessionId } = useAppState(
|
|
useShallow(s => ({ sessions: s.sessions, activeSessionId: s.activeSessionId }))
|
|
);
|
|
|
|
// Initialize on mount
|
|
useEffect(() => {
|
|
loadSettings();
|
|
checkDocker().then((available) => {
|
|
if (available) checkImage();
|
|
});
|
|
refresh();
|
|
|
|
// Update detection
|
|
loadVersion();
|
|
const updateTimer = setTimeout(() => checkForUpdates(), 3000);
|
|
const cleanup = startPeriodicCheck();
|
|
return () => {
|
|
clearTimeout(updateTimer);
|
|
cleanup?.();
|
|
};
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen p-6 gap-4 bg-[var(--bg-primary)]">
|
|
<TopBar />
|
|
<div className="flex flex-1 min-h-0 gap-4">
|
|
<Sidebar />
|
|
<main className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg min-w-0 overflow-hidden">
|
|
{sessions.length === 0 ? (
|
|
<WelcomeScreen />
|
|
) : (
|
|
<div className="w-full h-full">
|
|
{sessions.map((session) => (
|
|
<TerminalView
|
|
key={session.id}
|
|
sessionId={session.id}
|
|
active={session.id === activeSessionId}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
<StatusBar />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WelcomeScreen() {
|
|
return (
|
|
<div className="flex items-center justify-center h-full text-[var(--text-secondary)]">
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold mb-2 text-[var(--text-primary)]">
|
|
Triple-C
|
|
</h1>
|
|
<p className="text-sm mb-4">Claude Code Container</p>
|
|
<p className="text-xs max-w-md">
|
|
Add a project from the sidebar, start its container, then open a
|
|
terminal to begin using Claude Code in a sandboxed environment.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|