@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/SidePanel.tsx

@@ -1,63 +1,18 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { marked } from 'marked';
-import { apiClient } from '../api/client';
-import { getTaskIcon, getTaskCssClass, shouldShowTaskList } from '../utils/task_status';
+import { useSidePanelStore } from '../stores/useSidePanelStore';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useGraphUIStore } from '../stores/useGraphUIStore';
+import { getTaskCssClass, getTaskIcon, getTaskIconClass, getTaskNameClass, shouldShowTaskList } from '../utils/task_status';
+import { SideSheet } from './ds/SideSheet';
 
-interface WorkSummary {
-  cycle: number;
-  filesCreated: string[];
-  filesUpdated: string[];
-  filesDeleted: string[];
-  approach: string;
-  decisions: string[];
-  timestamp: string;
-}
-
-interface SidePanelProps {
-  graphData: any;
-  onEdgeClick: (neighborId: string) => void;
-}
-
-export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [node, setNode] = useState<any>(null);
-  const [content, setContent] = useState('');
-  const [workSummaries, setWorkSummaries] = useState<WorkSummary[]>([]);
-  const [expandedSummaries, setExpandedSummaries] = useState(false);
-  const [tasks, setTasks] = useState<{ total: number; completed: number; items: any[] } | null>(null);
-  const [expandedTasks, setExpandedTasks] = useState(false);
-
-  const open = useCallback(async (n: any) => {
-    setNode(n);
-    setWorkSummaries([]);
-    setExpandedSummaries(false);
-    setTasks(null);
-    setExpandedTasks(false);
-    try {
-      const detail = await apiClient.fetchNode(n.id);
-      setContent(detail.content);
-      setIsOpen(true);
-
-      // Fetch pipeline status for feature nodes to get work summaries
-      if (n.type === 'feature' || n.id?.startsWith('feat_')) {
-        try {
-          const pStatus = await apiClient.getPipelineStatus(n.id);
-          if (pStatus?.workSummaries?.length > 0) {
-            setWorkSummaries(pStatus.workSummaries);
-          }
-          if (pStatus?.tasks) {
-            setTasks(pStatus.tasks);
-          }
-        } catch {
-          // Pipeline status may not exist for all features
-        }
-      }
-    } catch (err) {
-      console.error('Failed to fetch node:', err);
-    }
-  }, []);
-
-  const close = useCallback(() => setIsOpen(false), []);
+export function SidePanel() {
+  const {
+    isOpen, node, content, workSummaries, expandedSummaries,
+    tasks, expandedTasks, close, toggleSummaries, toggleTasks,
+  } = useSidePanelStore();
+  const graphData = useGraphStore((s) => s.graphData);
+  const onEdgeClick = useGraphUIStore((s) => s.onEdgeClick);
 
   const renderMarkdown = (md: string) => {
     const stripped = md.replace(/^---[\s\S]*?---\n*/m, '');
@@ -78,19 +33,12 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
     return edges;
   };
 
-  // Expose open/close via ref-like approach on the component instance
-  // We'll use a callback pattern instead
-  (SidePanel as any).__open = open;
-  (SidePanel as any).__close = close;
+  const title = node ? `${node.name} (${node.id})` : '';
 
   if (!node) return (
-    <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
-      <div className="panel-header">
-        <span className="panel-title" />
-        <button className="panel-close" onClick={close}>&times;</button>
-      </div>
-      <div className="panel-body" />
-    </div>
+    <SideSheet isOpen={isOpen} onClose={close} title="" zIndex={200}>
+      <div className="panel-body text-sm leading-relaxed" />
+    </SideSheet>
   );
 
   const statusLabel = (node.status || 'draft').replace(/_/g, ' ');
@@ -99,34 +47,30 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
   const edges = findEdges(node.id);
 
   return (
-    <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
-      <div className="panel-header">
-        <span className="panel-title">{node.name} ({node.id})</span>
-        <button className="panel-close" onClick={close}>&times;</button>
-      </div>
-      <div className="panel-body">
-        <div className="panel-status-section">
-          <span className="panel-type-badge">{typeLabel}</span>
-          <span className={`panel-status-badge panel-status-${node.status || 'draft'}`}>{statusLabel}</span>
-          <span className="panel-completeness">{completeness}% complete</span>
+    <SideSheet isOpen={isOpen} onClose={close} title={title} zIndex={200}>
+      <div className="panel-body text-sm leading-relaxed">
+        <div className="flex items-center gap-2 mb-3 pb-2.5 border-b border-edge flex-wrap">
+          <span className="text-[10px] text-content-muted uppercase tracking-wide bg-surface-raised px-2 py-0.5 rounded-sm">{typeLabel}</span>
+          <span className={`text-[10px] px-2 py-0.5 rounded-sm font-semibold capitalize panel-status-${node.status || 'draft'}`}>{statusLabel}</span>
+          <span className="text-[11px] text-content-secondary ml-auto">{completeness}% complete</span>
         </div>
         {shouldShowTaskList(tasks) && (
-          <div className="panel-task-list">
+          <div className="my-2 border border-edge rounded">
             <button
-              className="panel-task-list-toggle"
-              onClick={() => setExpandedTasks(prev => !prev)}
+              className="bg-none border-none text-content font-mono text-xs cursor-pointer py-1.5 px-2 w-full text-left flex items-center gap-1.5 hover:text-content hover:bg-surface-raised"
+              onClick={toggleTasks}
             >
-              <span className={`panel-task-list-chevron${expandedTasks ? ' expanded' : ''}`}>{'\u25B6'}</span>
+              <span className={`inline-block text-[9px] transition-transform duration-150${expandedTasks ? ' rotate-90' : ''}`}>{'\u25B6'}</span>
               Tasks ({tasks!.completed}/{tasks!.total})
             </button>
             {expandedTasks && tasks!.items?.length > 0 && (
-              <div className="panel-task-list-items">
+              <div className="px-2 pt-1 pb-1.5 flex flex-col gap-[3px] border-t border-edge">
                 {tasks!.items.map((task: any, idx: number) => (
                   <div key={idx} className={getTaskCssClass(task.status)}>
-                    <span className="kanban-task-icon">
+                    <span className={`shrink-0 w-3 text-center text-[10px] ${getTaskIconClass(task.status)}`}>
                       {getTaskIcon(task.status)}
                     </span>
-                    <span className="kanban-task-name">{task.name}</span>
+                    <span className={getTaskNameClass(task.status)}>{task.name}</span>
                   </div>
                 ))}
               </div>
@@ -135,21 +79,21 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
         )}
         <div dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
         {workSummaries.length > 0 && (
-          <div className="panel-work-summary">
+          <div className="mt-3 border-t border-edge pt-2">
             <button
-              className="panel-work-summary-toggle"
-              onClick={() => setExpandedSummaries(prev => !prev)}
+              className="bg-none border-none text-content-secondary text-[13px] font-mono cursor-pointer py-1 w-full text-left hover:text-content"
+              onClick={toggleSummaries}
             >
               {expandedSummaries ? '\u25BC' : '\u25B6'} Work Summary ({workSummaries.length} cycle{workSummaries.length !== 1 ? 's' : ''})
             </button>
             {expandedSummaries && (
-              <div className="panel-work-summary-details">
+              <div className="mt-2 text-xs text-content-secondary">
                 {workSummaries.map((ws, idx) => (
-                  <div key={idx} className="panel-work-summary-cycle">
-                    <div className="panel-work-summary-cycle-header">Cycle {ws.cycle}</div>
+                  <div key={idx} className="mb-3 pb-2 border-b border-edge last:border-b-0 last:mb-0">
+                    <div className="font-semibold font-mono text-content mb-1">Cycle {ws.cycle}</div>
                     {ws.filesCreated?.length > 0 && (
-                      <div className="panel-work-summary-files panel-work-summary-files-created">
-                        <span className="panel-work-summary-label">Created:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#4caf50' }}>Created:</span>
                         <ul>
                           {ws.filesCreated.map((f, fi) => (
                             <li key={fi}>{f}</li>
@@ -158,8 +102,8 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
                       </div>
                     )}
                     {ws.filesUpdated?.length > 0 && (
-                      <div className="panel-work-summary-files panel-work-summary-files-updated">
-                        <span className="panel-work-summary-label">Updated:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#ff9800' }}>Updated:</span>
                         <ul>
                           {ws.filesUpdated.map((f, fi) => (
                             <li key={fi}>{f}</li>
@@ -168,8 +112,8 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
                       </div>
                     )}
                     {ws.filesDeleted?.length > 0 && (
-                      <div className="panel-work-summary-files panel-work-summary-files-deleted">
-                        <span className="panel-work-summary-label">Deleted:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider" style={{ color: '#f44336' }}>Deleted:</span>
                         <ul>
                           {ws.filesDeleted.map((f, fi) => (
                             <li key={fi}>{f}</li>
@@ -178,14 +122,14 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
                       </div>
                     )}
                     {ws.approach && (
-                      <div className="panel-work-summary-approach">
-                        <span className="panel-work-summary-label">Approach:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider">Approach:</span>
                         <p>{ws.approach}</p>
                       </div>
                     )}
                     {ws.decisions?.length > 0 && (
-                      <div className="panel-work-summary-decisions">
-                        <span className="panel-work-summary-label">Decisions:</span>
+                      <div>
+                        <span className="font-semibold text-content-secondary font-mono text-[11px] uppercase tracking-wider">Decisions:</span>
                         <ul>
                           {ws.decisions.map((d, di) => (
                             <li key={di}>{d}</li>
@@ -200,21 +144,21 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
           </div>
         )}
         {edges.length > 0 && (
-          <div className="panel-edges-section">
-            <h3>Relationships</h3>
-            <ul className="panel-edge-list">
+          <div className="mt-4 pt-3 border-t border-edge">
+            <h3 className="text-xs text-content mb-2 uppercase tracking-wide">Relationships</h3>
+            <ul className="list-none p-0 m-0 flex flex-col gap-1">
               {edges.map((edge, i) => {
                 const neighborNode = graphData?.nodes.find((n: any) => n.id === edge.neighborId);
                 const name = neighborNode ? neighborNode.name : edge.neighborId;
                 const direction = edge.direction === 'outgoing' ? '\u2192' : '\u2190';
                 return (
-                  <li key={i} className="panel-edge-item">
-                    <span className="panel-edge-direction">{direction}</span>
-                    <span className="panel-edge-relation">{edge.relation.replace(/_/g, ' ')}</span>
-                    <a className="panel-edge-link" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick(edge.neighborId); }}>
+                  <li key={i} className="flex items-center gap-1.5 px-1.5 py-1 rounded-sm transition-background duration-150 hover:bg-surface-raised">
+                    <span className="text-[11px] text-content-muted w-3.5 text-center shrink-0">{direction}</span>
+                    <span className="text-[10px] text-content-muted min-w-20 shrink-0">{edge.relation.replace(/_/g, ' ')}</span>
+                    <a className="text-xs text-accent no-underline cursor-pointer flex-1 overflow-hidden text-ellipsis whitespace-nowrap hover:underline" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick?.(edge.neighborId); }}>
                       {name}
                     </a>
-                    <span className="panel-edge-id">{edge.neighborId}</span>
+                    <span className="text-[10px] text-content-muted shrink-0">{edge.neighborId}</span>
                   </li>
                 );
               })}
@@ -222,10 +166,6 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
           </div>
         )}
       </div>
-    </div>
+    </SideSheet>
   );
 }
-
-// Export the static methods for imperative use
-export const openSidePanel = (node: any) => (SidePanel as any).__open?.(node);
-export const closeSidePanel = () => (SidePanel as any).__close?.();

package/templates/assistkick-product-system/packages/frontend/src/components/TerminalView.tsx

@@ -2,6 +2,7 @@
  * Terminal view — multi-session manager with chat-like layout.
  * Left sidebar lists all terminal sessions; right panel shows the active session's terminal.
  * Each session is permanently bound to a project chosen at creation time.
+ * Sessions persist across server restarts — suspended sessions are auto-resumed on connect.
  * Admin-only access.
  */
 
@@ -12,6 +13,10 @@ import { WebLinksAddon } from '@xterm/addon-web-links';
 import '@xterm/xterm/css/xterm.css';
 import { apiClient } from '../api/client';
 import type { Project } from '../hooks/useProjects';
+import { useProjectStore } from '../stores/useProjectStore';
+import { Button } from './ds/Button';
+import { IconButton } from './ds/IconButton';
+import { X, Plus, RefreshCw } from 'lucide-react';
 
 interface TerminalViewProps {
   visible: boolean;
@@ -20,11 +25,13 @@ interface TerminalViewProps {
 
 interface SessionInfo {
   id: string;
+  claudeSessionId: string;
   name: string;
   projectId: string;
   projectName: string;
-  state: 'idle' | 'running';
+  state: 'suspended' | 'running';
   createdAt: string;
+  lastUsedAt: string;
 }
 
 type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
@@ -43,15 +50,11 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [status, setStatus] = useState<ConnectionStatus>('disconnected');
   const [errorMsg, setErrorMsg] = useState('');
-  const [newSessionProjectId, setNewSessionProjectId] = useState<string>('');
   const [creating, setCreating] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounterRef = useRef(0);
 
-  // Default new session project picker to first project
-  useEffect(() => {
-    if (projects.length > 0 && !newSessionProjectId) {
-      setNewSessionProjectId(projects[0].id);
-    }
-  }, [projects, newSessionProjectId]);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
 
   const fetchSessions = useCallback(async () => {
     try {
@@ -120,8 +123,10 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     terminal.open(containerRef.current);
     fitAddon.fit();
 
+    // Pass terminal dimensions so the server can resume with correct size
+    const { cols, rows } = terminal;
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/api/terminal?sessionId=${encodeURIComponent(sessionId)}`;
+    const wsUrl = `${protocol}//${window.location.host}/api/terminal?sessionId=${encodeURIComponent(sessionId)}&cols=${cols}&rows=${rows}`;
 
     setStatus('connecting');
     setErrorMsg('');
@@ -132,8 +137,10 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     ws.onopen = () => {
       setStatus('connected');
       fitAddon.fit();
-      const { cols, rows } = terminal;
-      ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+      const dims = terminal;
+      ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }));
+      // Refresh sessions to update state from suspended → running
+      fetchSessions();
     };
 
     ws.onmessage = (event) => {
@@ -159,7 +166,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
         setErrorMsg('Access denied. Admin privileges required.');
       } else if (event.code === 4004) {
         setStatus('error');
-        setErrorMsg('Session not found. It may have been killed.');
+        setErrorMsg('Session not found. It may have been deleted.');
         fetchSessions();
       } else {
         setStatus('disconnected');
@@ -188,7 +195,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
   }, [connectToSession]);
 
   const handleCreateSession = useCallback(async () => {
-    const projectId = newSessionProjectId || projects[0]?.id;
+    const projectId = selectedProjectId || projects[0]?.id;
     if (!projectId) return;
 
     const project = projects.find(p => p.id === projectId) || projects[0];
@@ -207,7 +214,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     } finally {
       setCreating(false);
     }
-  }, [newSessionProjectId, projects, fetchSessions, connectToSession]);
+  }, [selectedProjectId, projects, fetchSessions, connectToSession]);
 
   const handleKillSession = useCallback(async (sessionId: string, e: React.MouseEvent) => {
     e.stopPropagation();
@@ -249,82 +256,144 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     };
   }, [disconnectCurrent]);
 
+  // --- Image drag-and-drop handlers ---
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer.types.includes('Files')) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+
+    const conn = connectionRef.current;
+    if (!conn || conn.ws.readyState !== WebSocket.OPEN) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    const imageFiles = files.filter(f => f.type.startsWith('image/'));
+    if (imageFiles.length === 0) return;
+
+    for (const file of imageFiles) {
+      try {
+        const { path } = await apiClient.uploadTerminalImage(file);
+        conn.ws.send(JSON.stringify({ type: 'input', data: path + ' ' }));
+      } catch (err) {
+        console.error('Failed to upload image:', err);
+      }
+    }
+  }, []);
+
   const activeSession = sessions.find(s => s.id === activeSessionId);
 
   return (
-    <div className="terminal-view" style={{ display: visible ? 'flex' : 'none' }}>
+    <div className="flex flex-row h-full w-full overflow-hidden" style={{ display: visible ? 'flex' : 'none' }}>
       {/* Left sidebar — session list */}
-      <div className="terminal-sidebar">
-        <div className="terminal-sidebar-header">Sessions</div>
-        <div className="terminal-session-list">
+      <div className="flex flex-col w-[280px] min-w-[280px] border-r border-edge bg-surface-alt overflow-hidden">
+        <div className="px-3 py-2.5 text-[11px] font-mono uppercase tracking-widest text-content-muted border-b border-edge shrink-0">Sessions</div>
+        <div className="flex-1 overflow-y-auto">
           {sessions.length === 0 && (
-            <div className="terminal-no-sessions">No sessions yet</div>
+            <div className="px-3 py-4 text-xs text-content-muted font-mono">No sessions yet</div>
           )}
           {sessions.map(session => (
             <div
               key={session.id}
-              className={`terminal-session-item${session.id === activeSessionId ? ' terminal-session-item--active' : ''}`}
+              className={`flex flex-col px-2.5 py-2 cursor-pointer border-b border-edge relative hover:bg-tab-hover${session.id === activeSessionId ? ' bg-tab-active border-l-2 border-l-accent pl-2' : ''}`}
               onClick={() => handleSelectSession(session.id)}
             >
-              <div className="terminal-session-name">{session.name}</div>
-              <div className="terminal-session-project">{session.projectName}</div>
-              <button
-                className="terminal-session-kill"
+              <div className="text-xs font-mono text-content whitespace-nowrap overflow-hidden text-ellipsis pr-5 flex items-center gap-1">
+                {session.state === 'suspended' && (
+                  <span className="shrink-0 text-[10px] leading-none text-content-muted opacity-70" title="Suspended — will resume on connect">&#x23F8;</span>
+                )}
+                {session.name}
+              </div>
+              <div className="text-[11px] text-content-muted font-mono whitespace-nowrap overflow-hidden text-ellipsis pr-5 mt-0.5">{session.projectName}</div>
+              <IconButton
+                label="Kill session"
+                variant="danger"
+                size="sm"
+                className="absolute top-2 right-2"
                 onClick={(e) => handleKillSession(session.id, e)}
-                title="Kill session"
               >
-                ✕
-              </button>
+                <X size={10} strokeWidth={2} />
+              </IconButton>
             </div>
           ))}
         </div>
 
-        {/* New session controls */}
-        <div className="terminal-new-session">
-          <select
-            className="terminal-project-picker"
-            value={newSessionProjectId}
-            onChange={e => setNewSessionProjectId(e.target.value)}
-            disabled={creating || projects.length === 0}
-          >
-            {projects.map(p => (
-              <option key={p.id} value={p.id}>{p.name}</option>
-            ))}
-          </select>
-          <button
-            className="terminal-new-session-btn"
+        {/* New session — uses the project selected in the navbar */}
+        <div className="flex flex-col gap-1.5 p-2.5 border-t border-edge shrink-0">
+          <Button
+            variant="primary"
+            size="sm"
+            icon={!creating ? <Plus size={12} strokeWidth={2} /> : undefined}
+            className="w-full"
             onClick={handleCreateSession}
-            disabled={creating || projects.length === 0}
+            disabled={creating || !selectedProjectId}
           >
-            {creating ? '…' : '+ New'}
-          </button>
+            {creating ? '...' : 'New'}
+          </Button>
         </div>
       </div>
 
       {/* Right panel — terminal content */}
-      <div className="terminal-panel">
+      <div
+        className="flex-1 flex flex-col min-w-0 relative"
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        {isDragging && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-[rgba(30,30,46,0.85)] border-2 border-dashed border-[#89b4fa] rounded-lg pointer-events-none">
+            <div className="text-[#89b4fa] text-lg font-mono font-semibold">Drop image here</div>
+          </div>
+        )}
         {!activeSessionId && (
-          <div className="terminal-empty-state">
+          <div className="flex-1 flex items-center justify-center text-content-muted text-[13px] font-mono">
             Select a session or create a new one
           </div>
         )}
         {activeSession && errorMsg && (
-          <div className="terminal-error">
+          <div className="flex items-center gap-3 px-4 py-2 bg-error text-[#1e1e2e] text-[13px] font-mono shrink-0">
             <span>{errorMsg}</span>
-            <button
-              className="terminal-reconnect-btn"
+            <Button
+              variant="secondary"
+              size="sm"
+              icon={<RefreshCw size={12} strokeWidth={2} />}
               onClick={() => connectToSession(activeSessionId!)}
             >
               Reconnect
-            </button>
+            </Button>
           </div>
         )}
         {activeSession && status === 'connecting' && (
-          <div className="terminal-status">Connecting…</div>
+          <div className="px-4 py-2 text-content-secondary text-[13px] font-mono shrink-0">
+            {activeSession.state === 'suspended' ? 'Resuming session...' : 'Connecting...'}
+          </div>
         )}
         <div
           ref={containerRef}
-          className="terminal-container"
+          className="terminal-container flex-1 p-1 bg-[#1e1e2e] min-h-0"
           style={{ display: activeSessionId ? 'flex' : 'none' }}
         />
       </div>