@rendiv/studio 0.1.3 → 0.1.5

package/ui/RenderQueue.tsx

@@ -19,8 +19,6 @@ export interface RenderJob {
 
 interface RenderQueueProps {
   jobs: RenderJob[];
-  open: boolean;
-  onToggle: () => void;
   onCancel: (jobId: string) => void;
   onRemove: (jobId: string) => void;
   onClear: () => void;
@@ -77,13 +75,10 @@ function overallProgress(job: RenderJob): number {
 
 export const RenderQueue: React.FC<RenderQueueProps> = ({
   jobs,
-  open,
-  onToggle,
   onCancel,
   onRemove,
   onClear,
 }) => {
-  const activeCount = jobs.filter((j) => j.status === 'queued' || j.status === 'bundling' || j.status === 'rendering' || j.status === 'encoding').length;
   const hasFinished = jobs.some((j) => j.status === 'done' || j.status === 'error' || j.status === 'cancelled');
 
   const handleCancel = useCallback((e: React.MouseEvent, jobId: string) => {
@@ -96,41 +91,21 @@ export const RenderQueue: React.FC<RenderQueueProps> = ({
     onRemove(jobId);
   }, [onRemove]);
 
-  if (!open) return null;
-
   return (
-    <div style={panelStyle}>
-      {/* Header */}
-      <div style={headerStyle}>
-        <span style={{ fontWeight: 600, fontSize: 11, textTransform: 'uppercase' as const, letterSpacing: '0.05em' }}>
-          Render Queue
-          {activeCount > 0 && (
-            <span style={{ marginLeft: 6, color: colors.accent, fontWeight: 600 }}>
-              ({activeCount})
-            </span>
-          )}
-        </span>
-        <div style={{ display: 'flex', gap: 8 }}>
-          {hasFinished && (
-            <button
-              type="button"
-              style={clearBtnStyle}
-              onClick={onClear}
-              title="Clear finished jobs"
-            >
-              Clear
-            </button>
-          )}
+    <div style={contentStyle}>
+      {/* Actions bar */}
+      {hasFinished && (
+        <div style={actionsBarStyle}>
           <button
             type="button"
-            style={closeBtnStyle}
-            onClick={onToggle}
-            title="Close panel"
+            style={clearBtnStyle}
+            onClick={onClear}
+            title="Clear finished jobs"
           >
-            {'\u2715'}
+            Clear finished
           </button>
         </div>
-      </div>
+      )}
 
       {/* Job list */}
       <div style={listStyle}>
@@ -221,23 +196,17 @@ export const RenderQueue: React.FC<RenderQueueProps> = ({
 
 // Styles
 
-const panelStyle: React.CSSProperties = {
-  width: 300,
-  minWidth: 300,
-  height: '100%',
-  backgroundColor: colors.surface,
-  borderLeft: `1px solid ${colors.border}`,
+const contentStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
-  flexShrink: 0,
+  flex: 1,
+  overflow: 'hidden',
 };
 
-const headerStyle: React.CSSProperties = {
+const actionsBarStyle: React.CSSProperties = {
   display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '12px 16px',
-  color: colors.textSecondary,
+  justifyContent: 'flex-end',
+  padding: '6px 8px',
   borderBottom: `1px solid ${colors.border}`,
   flexShrink: 0,
 };
@@ -277,15 +246,6 @@ const progressBarStyle: React.CSSProperties = {
   transition: 'width 0.3s ease',
 };
 
-const closeBtnStyle: React.CSSProperties = {
-  background: 'none',
-  border: 'none',
-  color: colors.textSecondary,
-  cursor: 'pointer',
-  fontSize: 12,
-  padding: '2px 4px',
-};
-
 const clearBtnStyle: React.CSSProperties = {
   background: 'none',
   border: `1px solid ${colors.border}`,

package/ui/StudioApp.tsx

@@ -13,10 +13,13 @@ import { TopBar } from './TopBar';
 import { Timeline } from './Timeline';
 import { TimelineEditor } from './TimelineEditor';
 import { RenderQueue, type RenderJob } from './RenderQueue';
-import { layoutStyles, scrollbarCSS } from './styles';
+import { Terminal } from './Terminal';
+import { layoutStyles, scrollbarCSS, colors, fonts } from './styles';
 
 // Read the entry point from the generated code's data attribute (set by studio-entry-code)
 const ENTRY_POINT = (window as Record<string, unknown>).__RENDIV_STUDIO_ENTRY__ as string ?? 'src/index.tsx';
+// When set, Studio was launched from a workspace and can navigate back
+const WORKSPACE_DIR = (window as unknown as Record<string, unknown>).__RENDIV_WORKSPACE_DIR__ as string | undefined;
 
 const ViewToggle: React.FC<{ view: 'editor' | 'tree'; onChange: (v: 'editor' | 'tree') => void }> = ({ view, onChange }) => (
   <div style={{ display: 'flex', gap: 2, padding: '2px', backgroundColor: '#0d1117', borderRadius: 6 }}>
@@ -73,9 +76,22 @@ const StudioApp: React.FC = () => {
 
   // Render queue state (server-driven)
   const [renderJobs, setRenderJobs] = useState<RenderJob[]>([]);
-  const [queueOpen, setQueueOpen] = useState(false);
   const hasActiveRef = useRef(false);
 
+  // Right panel state — tabbed panel for Queue and Agent
+  const [rightPanel, setRightPanel] = useState<'queue' | 'agent' | null>(() => {
+    const stored = localStorage.getItem('rendiv-studio:right-panel');
+    if (stored === 'queue' || stored === 'agent') return stored;
+    return null;
+  });
+  const [rightPanelWidth, setRightPanelWidth] = useState(() => {
+    const stored = localStorage.getItem('rendiv-studio:right-panel-width');
+    return stored ? Number(stored) : 360;
+  });
+  const isDraggingPanel = useRef(false);
+  const panelDragStartX = useRef(0);
+  const panelDragStartWidth = useRef(0);
+
   const handleResizeMouseDown = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     isDraggingTimeline.current = true;
@@ -83,11 +99,23 @@ const StudioApp: React.FC = () => {
     dragStartHeight.current = timelineHeight;
   }, [timelineHeight]);
 
+  const handlePanelResizeMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDraggingPanel.current = true;
+    panelDragStartX.current = e.clientX;
+    panelDragStartWidth.current = rightPanelWidth;
+  }, [rightPanelWidth]);
+
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
-      if (!isDraggingTimeline.current) return;
-      const delta = dragStartY.current - e.clientY;
-      setTimelineHeight(Math.max(120, dragStartHeight.current + delta));
+      if (isDraggingTimeline.current) {
+        const delta = dragStartY.current - e.clientY;
+        setTimelineHeight(Math.max(120, dragStartHeight.current + delta));
+      }
+      if (isDraggingPanel.current) {
+        const delta = panelDragStartX.current - e.clientX;
+        setRightPanelWidth(Math.max(280, Math.min(800, panelDragStartWidth.current + delta)));
+      }
     };
     const handleMouseUp = () => {
       if (isDraggingTimeline.current) {
@@ -97,6 +125,13 @@ const StudioApp: React.FC = () => {
           return h;
         });
       }
+      if (isDraggingPanel.current) {
+        isDraggingPanel.current = false;
+        setRightPanelWidth((w) => {
+          localStorage.setItem('rendiv-studio:right-panel-width', String(w));
+          return w;
+        });
+      }
     };
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
@@ -351,7 +386,8 @@ const StudioApp: React.FC = () => {
         totalFrames: selectedComposition.durationInFrames,
       }),
     });
-    setQueueOpen(true);
+    setRightPanel('queue');
+    localStorage.setItem('rendiv-studio:right-panel-tab', 'queue');
   }, [selectedComposition, inputProps]);
 
   const handleCancelJob = useCallback((jobId: string) => {
@@ -366,8 +402,24 @@ const StudioApp: React.FC = () => {
     fetch('/__rendiv_api__/render/queue/clear', { method: 'POST' });
   }, []);
 
-  const handleToggleQueue = useCallback(() => {
-    setQueueOpen((prev) => !prev);
+  const handleBackToWorkspace = useCallback(() => {
+    if (!WORKSPACE_DIR) return;
+    fetch('/__rendiv_api__/workspace/back', { method: 'POST' }).catch(() => {});
+    // Server will restart in workspace picker mode; Vite HMR will reconnect + reload
+  }, []);
+
+  const handleTogglePanel = useCallback(() => {
+    setRightPanel((prev) => {
+      if (prev !== null) {
+        // Close panel
+        localStorage.setItem('rendiv-studio:right-panel', '');
+        return null;
+      }
+      // Open to last active tab (default 'queue')
+      const tab = (localStorage.getItem('rendiv-studio:right-panel-tab') as 'queue' | 'agent') || 'queue';
+      localStorage.setItem('rendiv-studio:right-panel', tab);
+      return tab;
+    });
   }, []);
 
   const queueCount = renderJobs.filter((j) =>
@@ -384,8 +436,10 @@ const StudioApp: React.FC = () => {
         entryPoint={ENTRY_POINT}
         onRender={handleAddRender}
         queueCount={queueCount}
-        queueOpen={queueOpen}
-        onToggleQueue={handleToggleQueue}
+        panelOpen={rightPanel !== null}
+        onTogglePanel={handleTogglePanel}
+        workspaceDir={WORKSPACE_DIR}
+        onBackToWorkspace={handleBackToWorkspace}
       />
 
       <div style={layoutStyles.body}>
@@ -411,14 +465,67 @@ const StudioApp: React.FC = () => {
           </div>
         )}
 
-        <RenderQueue
-          jobs={renderJobs}
-          open={queueOpen}
-          onToggle={handleToggleQueue}
-          onCancel={handleCancelJob}
-          onRemove={handleRemoveJob}
-          onClear={handleClearFinished}
-        />
+        {/* Right panel — tabbed: Queue / Agent */}
+        {rightPanel !== null && (
+          <div style={{ ...rightPanelStyle, width: rightPanelWidth, minWidth: 280 }}>
+            <div
+              style={panelResizeHandleStyle}
+              onMouseDown={handlePanelResizeMouseDown}
+            />
+            <div style={tabBarStyle}>
+              <div style={{ display: 'flex', gap: 2, padding: 2, backgroundColor: colors.bg, borderRadius: 6 }}>
+                {(['queue', 'agent'] as const).map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => {
+                      setRightPanel(tab);
+                      localStorage.setItem('rendiv-studio:right-panel', tab);
+                      localStorage.setItem('rendiv-studio:right-panel-tab', tab);
+                    }}
+                    style={{
+                      padding: '3px 10px',
+                      fontSize: 11,
+                      fontWeight: 500,
+                      border: 'none',
+                      borderRadius: 4,
+                      cursor: 'pointer',
+                      backgroundColor: rightPanel === tab ? colors.border : 'transparent',
+                      color: rightPanel === tab ? colors.textPrimary : colors.textSecondary,
+                      fontFamily: fonts.sans,
+                    }}
+                  >
+                    {tab === 'queue' ? 'Queue' : 'Agent'}
+                    {tab === 'queue' && queueCount > 0 && (
+                      <span style={{ marginLeft: 4, color: colors.accent, fontWeight: 600 }}>({queueCount})</span>
+                    )}
+                  </button>
+                ))}
+              </div>
+              <button
+                type="button"
+                onClick={() => {
+                  setRightPanel(null);
+                  localStorage.setItem('rendiv-studio:right-panel', '');
+                }}
+                style={tabCloseStyle}
+                title="Close panel"
+              >
+                {'\u2715'}
+              </button>
+            </div>
+            <div style={{ display: rightPanel === 'queue' ? 'flex' : 'none', flex: 1, flexDirection: 'column' as const, overflow: 'hidden' }}>
+              <RenderQueue
+                jobs={renderJobs}
+                onCancel={handleCancelJob}
+                onRemove={handleRemoveJob}
+                onClear={handleClearFinished}
+              />
+            </div>
+            <div style={{ display: rightPanel === 'agent' ? 'flex' : 'none', flex: 1, flexDirection: 'column' as const, overflow: 'hidden' }}>
+              <Terminal open={rightPanel === 'agent'} />
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Timeline — full-width resizable row */}
@@ -475,6 +582,44 @@ const StudioApp: React.FC = () => {
   );
 };
 
+const rightPanelStyle: React.CSSProperties = {
+  position: 'relative',
+  height: '100%',
+  backgroundColor: colors.surface,
+  borderLeft: `1px solid ${colors.border}`,
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+};
+
+const panelResizeHandleStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 4,
+  height: '100%',
+  cursor: 'col-resize',
+  zIndex: 10,
+};
+
+const tabBarStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '6px 8px',
+  borderBottom: `1px solid ${colors.border}`,
+  flexShrink: 0,
+};
+
+const tabCloseStyle: React.CSSProperties = {
+  background: 'none',
+  border: 'none',
+  color: colors.textSecondary,
+  cursor: 'pointer',
+  fontSize: 12,
+  padding: '2px 4px',
+};
+
 export function createStudioApp(container: HTMLElement | null): void {
   if (!container) {
     throw new Error('Rendiv Studio: Could not find #root element');

package/ui/Terminal.tsx

@@ -0,0 +1,266 @@
+import React, { useRef, useEffect, useCallback, useState } from 'react';
+import { Terminal as XTerm } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+import { colors, fonts } from './styles';
+
+export interface TerminalProps {
+  open: boolean;
+}
+
+type TerminalStatus = 'idle' | 'starting' | 'running' | 'exited' | 'error';
+
+export const Terminal: React.FC<TerminalProps> = ({ open }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const [status, setStatus] = useState<TerminalStatus>('idle');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const attachedRef = useRef(false);
+
+  // Create xterm instance once on mount
+  useEffect(() => {
+    const term = new XTerm({
+      cursorBlink: true,
+      fontSize: 11,
+      fontFamily: fonts.mono,
+      theme: {
+        background: colors.bg,
+        foreground: colors.textPrimary,
+        cursor: colors.accent,
+        cursorAccent: colors.bg,
+        selectionBackground: 'rgba(88, 166, 255, 0.3)',
+        black: '#484f58',
+        red: '#ff7b72',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#bc8cff',
+        cyan: '#39c5cf',
+        white: '#b1bac4',
+        brightBlack: '#6e7681',
+        brightRed: '#ffa198',
+        brightGreen: '#56d364',
+        brightYellow: '#e3b341',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#d2a8ff',
+        brightCyan: '#56d4dd',
+        brightWhite: '#f0f6fc',
+      },
+    });
+
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+
+    // Forward user keystrokes to server
+    term.onData((data) => {
+      const hot = (import.meta as any).hot;
+      hot?.send('rendiv:terminal-input', { data });
+    });
+
+    xtermRef.current = term;
+    fitAddonRef.current = fitAddon;
+
+    return () => {
+      term.dispose();
+      xtermRef.current = null;
+      fitAddonRef.current = null;
+      attachedRef.current = false;
+    };
+  }, []);
+
+  // Listen for server events (once, independent of open state)
+  useEffect(() => {
+    const hot = (import.meta as any).hot;
+    if (!hot) return;
+
+    const onOutput = (data: { data: string }) => {
+      xtermRef.current?.write(data.data);
+    };
+    const onStarted = () => {
+      setStatus('running');
+      setErrorMessage(null);
+    };
+    const onExited = () => {
+      setStatus('exited');
+    };
+    const onError = (data: { message: string }) => {
+      setStatus('error');
+      setErrorMessage(data.message);
+    };
+    const onStatusResponse = (data: { running: boolean }) => {
+      if (data.running) setStatus('running');
+    };
+
+    hot.on('rendiv:terminal-output', onOutput);
+    hot.on('rendiv:terminal-started', onStarted);
+    hot.on('rendiv:terminal-exited', onExited);
+    hot.on('rendiv:terminal-error', onError);
+    hot.on('rendiv:terminal-status-response', onStatusResponse);
+
+    // Check if terminal is already running (re-attach after page refresh)
+    hot.send('rendiv:terminal-status', {});
+
+    return () => {
+      hot.off?.('rendiv:terminal-output', onOutput);
+      hot.off?.('rendiv:terminal-started', onStarted);
+      hot.off?.('rendiv:terminal-exited', onExited);
+      hot.off?.('rendiv:terminal-error', onError);
+      hot.off?.('rendiv:terminal-status-response', onStatusResponse);
+    };
+  }, []);
+
+  // Attach/detach xterm to DOM when panel opens/closes
+  useEffect(() => {
+    if (!open || !containerRef.current || !xtermRef.current) return;
+
+    if (!attachedRef.current) {
+      xtermRef.current.open(containerRef.current);
+      attachedRef.current = true;
+    }
+
+    // Fit after a frame to ensure container has layout dimensions
+    requestAnimationFrame(() => {
+      fitAddonRef.current?.fit();
+    });
+  }, [open]);
+
+  // Resize terminal when container size changes
+  useEffect(() => {
+    if (!open || !containerRef.current) return;
+
+    const observer = new ResizeObserver(() => {
+      const term = xtermRef.current;
+      const fitAddon = fitAddonRef.current;
+      if (!term || !fitAddon) return;
+
+      fitAddon.fit();
+      const hot = (import.meta as any).hot;
+      hot?.send('rendiv:terminal-resize', { cols: term.cols, rows: term.rows });
+    });
+
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [open]);
+
+  const handleStart = useCallback(() => {
+    setStatus('starting');
+    const term = xtermRef.current;
+    const hot = (import.meta as any).hot;
+    hot?.send('rendiv:terminal-start', {
+      cols: term?.cols ?? 80,
+      rows: term?.rows ?? 24,
+    });
+  }, []);
+
+  const handleRestart = useCallback(() => {
+    const hot = (import.meta as any).hot;
+    hot?.send('rendiv:terminal-stop', {});
+    xtermRef.current?.clear();
+    setTimeout(() => {
+      setStatus('starting');
+      const term = xtermRef.current;
+      hot?.send('rendiv:terminal-start', {
+        cols: term?.cols ?? 80,
+        rows: term?.rows ?? 24,
+      });
+    }, 300);
+  }, []);
+
+  const showOverlay = status === 'idle' || status === 'error' || status === 'exited';
+
+  return (
+    <div style={panelStyle}>
+      {/* Actions bar — only when there's something to act on */}
+      {(status === 'running' || status === 'exited') && (
+        <div style={actionsBarStyle}>
+          <button style={actionBtnStyle} onClick={handleRestart}>Restart</button>
+        </div>
+      )}
+
+      <div style={terminalBodyStyle}>
+        {showOverlay && (
+          <div style={overlayStyle}>
+            {status === 'error' && errorMessage && (
+              <div style={{ color: colors.error, fontSize: 13, marginBottom: 12, textAlign: 'center' as const }}>
+                {errorMessage}
+              </div>
+            )}
+            {status === 'exited' && (
+              <div style={{ color: colors.textSecondary, fontSize: 13, marginBottom: 12 }}>
+                Claude Code has exited
+              </div>
+            )}
+            <button style={startBtnStyle} onClick={status === 'exited' ? handleRestart : handleStart}>
+              {status === 'exited' ? 'Restart Claude Code' : status === 'error' ? 'Retry' : 'Launch Claude Code'}
+            </button>
+          </div>
+        )}
+        <div ref={containerRef} style={xtermContainerStyle} />
+      </div>
+    </div>
+  );
+};
+
+const panelStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  overflow: 'hidden',
+};
+
+const actionsBarStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '4px 8px',
+  borderBottom: `1px solid ${colors.border}`,
+  flexShrink: 0,
+};
+
+const terminalBodyStyle: React.CSSProperties = {
+  flex: 1,
+  position: 'relative',
+  backgroundColor: colors.bg,
+  overflow: 'hidden',
+};
+
+const xtermContainerStyle: React.CSSProperties = {
+  width: '100%',
+  height: '100%',
+  padding: '4px 0 4px 4px',
+};
+
+const overlayStyle: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 10,
+  backgroundColor: colors.bg,
+};
+
+const startBtnStyle: React.CSSProperties = {
+  padding: '8px 20px',
+  fontSize: 13,
+  fontWeight: 600,
+  color: '#fff',
+  backgroundColor: colors.accentMuted,
+  border: 'none',
+  borderRadius: 6,
+  cursor: 'pointer',
+  fontFamily: fonts.sans,
+};
+
+const actionBtnStyle: React.CSSProperties = {
+  background: 'none',
+  border: `1px solid ${colors.border}`,
+  color: colors.textSecondary,
+  cursor: 'pointer',
+  fontSize: 10,
+  padding: '2px 8px',
+  borderRadius: 4,
+  fontFamily: fonts.sans,
+};
+