feat: interactive terminal — WS-bridged docker exec PTY (#46)

GET /services/:id/terminal upgrades to a WebSocket attached to a
`docker exec` PTY in the service's running replica. JSON frames both
ways: stdin/resize out, stdout/exit/error in. Shell probe tries each
candidate (bash→sh) since `command -v` needs a shell to run; distroless
images get a clean "no shell" error instead of an OCI failure dump.

- docker.Client gains ExecAttach + ExecResize wrappers
- Frontend: xterm.js replaces the one-off console section — live PTY,
  fit-addon resizes forwarded over the socket
- CLI: `containr shell <id>` bridges the local TTY (raw mode, SIGWINCH
  resize forwarding); `containr exec` keeps the one-off command path
- Access mirrors service logs: project manage scope required

Generated with [Devin](https://devin.ai)

Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/frontend/src/features/service/pages/ServiceDetailPage.tsx

@@ -26,7 +26,6 @@ import {
   deleteScalingPolicy,
   getServiceScalingState,
   manualScaleService,
-  execInService,
   rollbackDeployment,
   cancelDeployment,
   updateServiceVariables,
@@ -59,6 +58,7 @@ import { getCurrentUserProfile } from '@/lib/api-client';
 import { parseDotenv, validateVariableRows, type VariableDraft } from '../variable-utils';
 import { formatBytes, formatDate, formatRelative, seededMetric } from '@/lib/time';
 import { EnhancedMetricCard, LineAreaChart, DonutChart } from '@/shared/components';
+import { ServiceTerminal } from '@/features/service/components/ServiceTerminal';
 import {
   Activity,
   FileText,
@@ -338,21 +338,6 @@ export function ServiceDetailPage() {
     },
   });
 
-  // --- Console ---
-  const [consoleInput, setConsoleInput] = useState('');
-  const [consoleHistory, setConsoleHistory] = useState<
-    Array<{ command: string; output: string; exitCode: number; error: string }>
-  >([]);
-  const execMutation = useMutation({
-    mutationFn: (command: string) => execInService(serviceId, command),
-    onSuccess: (result, command) => {
-      setConsoleHistory((prev) => [
-        { command, output: result.output ?? '', exitCode: result.exit_code ?? 0, error: result.error ?? '' },
-        ...prev,
-      ]);
-      setConsoleInput('');
-    },
-  });
   const triggerCronMutation = useMutation({
     mutationFn: (id: string) => triggerCronJob(id),
     onSuccess: () => {
@@ -1927,64 +1912,10 @@ export function ServiceDetailPage() {
               </div>
               <div>
                 <h2 className="text-lg font-semibold text-[var(--text-primary)]">Console</h2>
-                <p className="text-sm text-[var(--text-secondary)]">One-off commands via docker exec — 30s limit, 64KB output cap</p>
+                <p className="text-sm text-[var(--text-secondary)]">Interactive shell inside the service container</p>
               </div>
             </div>
-
-            <form
-              className="flex items-center gap-2 mb-4"
-              onSubmit={(e) => {
-                e.preventDefault();
-                const cmd = consoleInput.trim();
-                if (cmd && !execMutation.isPending) execMutation.mutate(cmd);
-              }}
-            >
-              <span className="text-sm font-mono text-[var(--accent-primary)]">$</span>
-              <input
-                value={consoleInput}
-                onChange={(e) => setConsoleInput(e.target.value)}
-                placeholder="e.g. env | sort | head -20"
-                disabled={execMutation.isPending}
-                className="flex-1 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm font-mono text-[var(--text-primary)] disabled:opacity-50"
-              />
-              <button
-                type="submit"
-                disabled={execMutation.isPending || !consoleInput.trim()}
-                className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
-              >
-                {execMutation.isPending ? 'Running…' : 'Run'}
-              </button>
-            </form>
-
-            {execMutation.isError && (
-              <p className="mb-4 text-xs text-[var(--error)]">
-                {(execMutation.error as Error)?.message ?? 'Command failed'}
-              </p>
-            )}
-
-            {consoleHistory.length === 0 ? (
-              <p className="text-xs text-[var(--text-tertiary)]">
-                Commands run inside the service's running container as its default user. No interactive shell — stdout/stderr is captured and returned.
-              </p>
-            ) : (
-              <div className="space-y-3">
-                {consoleHistory.map((entry, i) => (
-                  <div key={i} className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] p-3">
-                    <div className="flex items-center justify-between mb-1">
-                      <p className="text-xs font-mono text-[var(--text-primary)]">$ {entry.command}</p>
-                      <span className={`text-xs font-mono ${entry.exitCode === 0 && !entry.error ? 'text-[var(--success)]' : 'text-[var(--error)]'}`}>
-                        {entry.error ? 'error' : `exit ${entry.exitCode}`}
-                      </span>
-                    </div>
-                    {(entry.output || entry.error) && (
-                      <pre className="text-xs font-mono text-[var(--text-secondary)] whitespace-pre-wrap break-all max-h-64 overflow-y-auto">
-                        {entry.output}{entry.error ? `\n${entry.error}` : ''}
-                      </pre>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
+            <ServiceTerminal serviceId={serviceId} />
           </div>
         )}