Files
Triple-C/app/src/components/terminal/TerminalTabs.tsx
Josh Knapp ab16ac11e7
All checks were successful
Build App / build-macos (push) Successful in 2m23s
Build App / build-windows (push) Successful in 3m52s
Build App / build-linux (push) Successful in 4m53s
Build App / sync-to-github (push) Successful in 12s
Add bash shell tab and file manager for running containers
Adds two new features for running project containers:

1. Bash Shell Tab: A "Shell" button on running projects opens a plain
   bash -l session instead of Claude Code, useful for direct container
   inspection, package installation, and debugging. Tab labels show
   "(bash)" suffix to distinguish from Claude sessions.

2. File Manager: A "Files" button opens a modal file browser for
   navigating container directories, downloading files to the host,
   and uploading files from the host. Supports breadcrumb navigation
   and works with any path including those outside mounted projects.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 06:32:53 -08:00

44 lines
1.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { useTerminal } from "../../hooks/useTerminal";
export default function TerminalTabs() {
const { sessions, activeSessionId, setActiveSession, close } = useTerminal();
if (sessions.length === 0) {
return (
<div className="px-3 text-xs text-[var(--text-secondary)] leading-10">
No active terminals
</div>
);
}
return (
<div className="flex items-center h-full">
{sessions.map((session) => (
<div
key={session.id}
onClick={() => setActiveSession(session.id)}
className={`flex items-center gap-2 px-3 h-full text-xs cursor-pointer border-r border-[var(--border-color)] transition-colors ${
activeSessionId === session.id
? "bg-[var(--bg-primary)] text-[var(--text-primary)]"
: "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
}`}
>
<span className="truncate max-w-[120px]">
{session.projectName}{session.sessionType === "bash" ? " (bash)" : ""}
</span>
<button
onClick={(e) => {
e.stopPropagation();
close(session.id);
}}
className="text-[var(--text-secondary)] hover:text-[var(--error)] transition-colors"
title="Close terminal"
>
×
</button>
</div>
))}
</div>
);
}