Add Shell tab to AdminMonitor — run commands on app containers via SSH

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/AdminMonitor.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
-import { ArrowUpCircle, Activity, ScrollText, RefreshCw } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { ArrowUpCircle, Activity, ScrollText, RefreshCw, TerminalSquare } from 'lucide-react'
 import { Sidebar } from '../components/Sidebar'
 import type { User } from '../types'
 
@@ -29,6 +29,7 @@ interface StatRange { total: number; used: number }
 
 interface HealthStatus {
   name: string
+  host: string
   up: boolean
   ms: number | null
   ram: StatRange | null
@@ -68,12 +69,17 @@ interface DeployEntry {
 }
 
 export function AdminMonitor({ user }: { user: User }) {
-  const [tab, setTab] = useState<'updates' | 'states' | 'deploys'>('updates')
+  const [tab, setTab] = useState<'updates' | 'states' | 'deploys' | 'shell'>('updates')
   const [statuses, setStatuses] = useState<AppStatus[]>([])
   const [deploys, setDeploys] = useState<DeployEntry[]>([])
   const [health, setHealth] = useState<HealthStatus[]>([])
   const [loading, setLoading] = useState(false)
   const [deploying, setDeploying] = useState<Set<string>>(new Set())
+  const [shellContainer, setShellContainer] = useState('')
+  const [shellCmd, setShellCmd] = useState('')
+  const [shellOutput, setShellOutput] = useState('')
+  const [shellRunning, setShellRunning] = useState(false)
+  const termRef = useRef<HTMLPreElement>(null)
 
   async function fetchStatus(force = false) {
     setLoading(true)
@@ -106,6 +112,34 @@ export function AdminMonitor({ user }: { user: User }) {
     }
   }
 
+  async function runShellCmd() {
+    const cmd = shellCmd.trim()
+    if (!shellContainer || !cmd || shellRunning) return
+    const [name, host] = shellContainer.split('|')
+    setShellOutput(prev => prev + `[${name} @ ${host}] $ ${cmd}\n`)
+    setShellRunning(true)
+    setShellCmd('')
+    try {
+      const res = await fetch('/deploy/exec', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ host, command: cmd }),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        setShellOutput(prev => prev + `Error: ${data.error}\n\n`)
+      } else {
+        const out = [data.stdout, data.stderr].filter(Boolean).join('')
+        setShellOutput(prev => prev + (out.trim() || '(no output)') + '\n\n')
+      }
+    } catch (e: any) {
+      setShellOutput(prev => prev + `Request failed: ${e.message}\n\n`)
+    } finally {
+      setShellRunning(false)
+    }
+  }
+
   async function triggerDeploy(repo: string) {
     setDeploying(prev => new Set(prev).add(repo))
     try {
@@ -127,14 +161,20 @@ export function AdminMonitor({ user }: { user: User }) {
       const id = setInterval(fetchStates, 30_000)
       return () => clearInterval(id)
     }
+    if (tab === 'shell' && health.length === 0) fetchStates()
   }, [tab])
 
+  useEffect(() => {
+    if (termRef.current) termRef.current.scrollTop = termRef.current.scrollHeight
+  }, [shellOutput])
+
   const updatesAvailable = statuses.filter(s => s.updateAvailable).length
 
   const tabs = [
-    { key: 'updates' as const, label: 'Updates', icon: <ArrowUpCircle size={14} strokeWidth={1.75} /> },
-    { key: 'states'  as const, label: 'States',  icon: <Activity size={14} strokeWidth={1.75} /> },
+    { key: 'updates' as const, label: 'Updates',    icon: <ArrowUpCircle size={14} strokeWidth={1.75} /> },
+    { key: 'states'  as const, label: 'States',     icon: <Activity size={14} strokeWidth={1.75} /> },
     { key: 'deploys' as const, label: 'Deploy Log', icon: <ScrollText size={14} strokeWidth={1.75} /> },
+    { key: 'shell'   as const, label: 'Shell',      icon: <TerminalSquare size={14} strokeWidth={1.75} /> },
   ]
 
   return (
@@ -358,6 +398,77 @@ export function AdminMonitor({ user }: { user: User }) {
           </div>
         )}
 
+        {/* Shell tab */}
+        {tab === 'shell' && (
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', padding: '1.5rem 2rem' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem', flexShrink: 0 }}>
+              <select
+                value={shellContainer}
+                onChange={e => setShellContainer(e.target.value)}
+                style={{
+                  background: 'var(--card-bg)', border: '1px solid var(--card-border)',
+                  borderRadius: '6px', padding: '0.4rem 0.6rem', fontSize: '0.82rem',
+                  color: 'var(--text-dark)', minWidth: '160px',
+                }}
+              >
+                <option value="">Select container</option>
+                {health.map(h => (
+                  <option key={h.name} value={`${h.name}|${h.host}`}>{h.name}</option>
+                ))}
+              </select>
+              <input
+                type="text"
+                value={shellCmd}
+                onChange={e => setShellCmd(e.target.value)}
+                onKeyDown={e => e.key === 'Enter' && runShellCmd()}
+                placeholder="e.g. docker compose logs --tail 50"
+                disabled={shellRunning}
+                style={{
+                  flex: 1, background: 'var(--card-bg)', border: '1px solid var(--card-border)',
+                  borderRadius: '6px', padding: '0.4rem 0.75rem', fontSize: '0.82rem',
+                  color: 'var(--text-dark)', fontFamily: 'monospace',
+                }}
+              />
+              <button
+                onClick={runShellCmd}
+                disabled={!shellContainer || !shellCmd.trim() || shellRunning}
+                style={{
+                  background: 'var(--gold)', color: 'var(--navy)', border: 'none',
+                  borderRadius: '6px', padding: '0.4rem 1rem', fontSize: '0.82rem', fontWeight: 700,
+                  opacity: (!shellContainer || !shellCmd.trim() || shellRunning) ? 0.5 : 1,
+                  cursor: (!shellContainer || !shellCmd.trim() || shellRunning) ? 'default' : 'pointer',
+                }}
+              >
+                {shellRunning ? 'Running…' : 'Run'}
+              </button>
+              {shellOutput && (
+                <button
+                  onClick={() => setShellOutput('')}
+                  style={{
+                    background: 'transparent', border: '1px solid var(--card-border)',
+                    borderRadius: '6px', padding: '0.4rem 0.75rem', fontSize: '0.8rem',
+                    color: 'var(--text-mid)', cursor: 'pointer',
+                  }}
+                >
+                  Clear
+                </button>
+              )}
+            </div>
+            <pre
+              ref={termRef}
+              style={{
+                flex: 1, background: '#0f172a', borderRadius: '8px',
+                padding: '1rem', fontSize: '0.75rem', color: '#94a3b8',
+                overflowY: 'auto', margin: 0, fontFamily: 'monospace',
+                whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+                border: '1px solid #1e293b',
+              }}
+            >
+              {shellOutput || <span style={{ color: '#475569' }}>Select a container and run a command…</span>}
+            </pre>
+          </div>
+        )}
+
       </div>
     </div>
   )