Fusion
e344e961d6
- Add TerminalSession backend service for docker exec subprocess management
- Add TerminalManager for WebSocket session lifecycle management
- Create WebSocket endpoint at /ws/tool-instances/{id}/terminal
- Add session cookie authentication and instance ownership verification
- Install xterm.js with fit and web-links addons
- Create TerminalComponent with xterm.js integration
- Create TerminalPage with full-screen terminal view
- Add terminal route at /instances/:id/terminal
- Add terminal button to InstanceList for running instances
- Add terminal and arrow-left icons to icon registry
- Add comprehensive terminal CSS styles (dark theme, responsive)
Quality gates: typecheck ✓, lint ✓, build ✓, Python syntax ✓
39 lines
983 B
TypeScript
39 lines
983 B
TypeScript
import React from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { TerminalComponent } from "../components/terminal";
|
|
import { Icon } from "../components/icon";
|
|
|
|
export const TerminalPage: React.FC = () => {
|
|
const { instanceId } = useParams<{ instanceId: string }>();
|
|
const navigate = useNavigate();
|
|
|
|
if (!instanceId) {
|
|
return (
|
|
<section className="stack">
|
|
<h1>Terminal</h1>
|
|
<p className="muted">No instance ID provided.</p>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="terminal-page">
|
|
<div className="terminal-page-header">
|
|
<button
|
|
className="secondary-button"
|
|
onClick={() => navigate(-1)}
|
|
type="button"
|
|
>
|
|
<Icon name="arrow-left" size="sm" />
|
|
Back
|
|
</button>
|
|
<h1>Terminal</h1>
|
|
</div>
|
|
<TerminalComponent
|
|
instanceId={instanceId}
|
|
onClose={() => navigate(-1)}
|
|
/>
|
|
</section>
|
|
);
|
|
};
|