workos 0.0.24 → 0.1.0

package/dist/src/dashboard/components/CredentialsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CredentialsForm.js","sourceRoot":"","sources":["../../../../src/dashboard/components/CredentialsForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Box, Text, useInput } from 'ink';\nimport { TextInput } from './TextInput.js';\n\ninterface CredentialsFormProps {\n  requiresApiKey: boolean;\n  onSubmit: (credentials: { apiKey: string; clientId: string }) => void;\n}\n\ntype Field = 'apiKey' | 'clientId';\n\nexport function CredentialsForm({ requiresApiKey, onSubmit }: CredentialsFormProps): React.ReactElement {\n  const [apiKey, setApiKey] = useState('');\n  const [clientId, setClientId] = useState('');\n  const [focusedField, setFocusedField] = useState<Field>(requiresApiKey ? 'apiKey' : 'clientId');\n  const [errors, setErrors] = useState<{ apiKey?: string; clientId?: string }>({});\n\n  const validate = (): boolean => {\n    const newErrors: { apiKey?: string; clientId?: string } = {};\n\n    if (requiresApiKey && !apiKey) {\n      newErrors.apiKey = 'API Key is required';\n    } else if (requiresApiKey && !apiKey.startsWith('sk_')) {\n      newErrors.apiKey = 'API Key should start with sk_';\n    }\n\n    if (!clientId) {\n      newErrors.clientId = 'Client ID is required';\n    } else if (!clientId.startsWith('client_')) {\n      newErrors.clientId = 'Client ID should start with client_';\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = () => {\n    if (validate()) {\n      onSubmit({ apiKey, clientId });\n    }\n  };\n\n  // Tab/arrows to switch fields\n  useInput((input, key) => {\n    if (key.tab || key.downArrow) {\n      if (requiresApiKey) {\n        setFocusedField((prev) => (prev === 'apiKey' ? 'clientId' : 'apiKey'));\n      }\n    } else if (key.upArrow) {\n      if (requiresApiKey) {\n        setFocusedField((prev) => (prev === 'clientId' ? 'apiKey' : 'clientId'));\n      }\n    }\n  });\n\n  return (\n    <Box flexDirection=\"column\" paddingX={1}>\n      <Box marginBottom={1}>\n        <Text color=\"cyan\" bold>\n          Enter your WorkOS credentials\n        </Text>\n      </Box>\n      <Box marginBottom={1}>\n        <Text dimColor>Get them from https://dashboard.workos.com</Text>\n      </Box>\n\n      <Box flexDirection=\"column\" marginTop={1}>\n        {requiresApiKey && (\n          <Box marginBottom={1}>\n            <TextInput\n              label=\"API Key\"\n              placeholder=\"sk_...\"\n              mask={true}\n              value={apiKey}\n              onChange={setApiKey}\n              onSubmit={() => setFocusedField('clientId')}\n              focused={focusedField === 'apiKey'}\n              error={errors.apiKey}\n            />\n          </Box>\n        )}\n\n        <Box marginBottom={1}>\n          <TextInput\n            label=\"Client ID\"\n            placeholder=\"client_...\"\n            value={clientId}\n            onChange={setClientId}\n            onSubmit={handleSubmit}\n            focused={focusedField === 'clientId'}\n            error={errors.clientId}\n          />\n        </Box>\n      </Box>\n\n      <Box marginTop={1}>\n        <Text dimColor>{requiresApiKey ? 'Tab: switch fields | ' : ''}Ctrl+U: clear | Enter: continue</Text>\n      </Box>\n    </Box>\n  );\n}\n"]}

package/dist/src/dashboard/components/Dashboard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DashboardProps } from '../types.js';
+export declare function Dashboard({ emitter }: DashboardProps): React.ReactElement;

package/dist/src/dashboard/components/Dashboard.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useInput } from 'ink';
+import { DashboardLayout } from './DashboardLayout.js';
+import { CompletionView } from './CompletionView.js';
+export function Dashboard({ emitter }) {
+    const [state, setState] = useState('running');
+    const [focusedPanel, setFocusedPanel] = useState('changes');
+    const [completionData, setCompletionData] = useState(null);
+    const [outputLog, setOutputLog] = useState([]);
+    const [confirmRequest, setConfirmRequest] = useState(null);
+    const [credentialsRequest, setCredentialsRequest] = useState(null);
+    // Tab to switch focus between panels (only when not in a prompt)
+    useInput((input, key) => {
+        if (key.tab) {
+            setFocusedPanel((prev) => (prev === 'changes' ? 'output' : 'changes'));
+        }
+    }, { isActive: state === 'running' && !credentialsRequest && !confirmRequest });
+    useEffect(() => {
+        const handleOutput = ({ text, isError }) => {
+            const newLines = text.split('\n').map((line) => ({
+                text: line,
+                isError,
+                isStatus: line.includes('[STATUS]'),
+            }));
+            setOutputLog((prev) => [...prev, ...newLines]);
+        };
+        const handleStatus = ({ message }) => {
+            setOutputLog((prev) => [...prev, { text: `[STATUS] ${message}`, isStatus: true }]);
+        };
+        const handleComplete = ({ success, summary }) => {
+            setCompletionData({ success, summary });
+            setState('complete');
+        };
+        const handleError = ({ message }) => {
+            setOutputLog((prev) => [...prev, { text: `ERROR: ${message}`, isError: true }]);
+        };
+        const handleCredentialsRequest = ({ requiresApiKey }) => {
+            setCredentialsRequest({ requiresApiKey });
+        };
+        const handleConfirmRequest = ({ id, message, warning, files, }) => {
+            setConfirmRequest({ id, message, warning, files });
+        };
+        const handleValidationStart = () => {
+            setOutputLog((prev) => [...prev, { text: '[STATUS] Validating installation...', isStatus: true }]);
+        };
+        const handleValidationIssues = ({ issues, }) => {
+            for (const issue of issues) {
+                const prefix = issue.severity === 'error' ? '!' : '?';
+                setOutputLog((prev) => [...prev, { text: `${prefix} ${issue.message}`, isError: issue.severity === 'error' }]);
+                if (issue.hint) {
+                    setOutputLog((prev) => [...prev, { text: `  Hint: ${issue.hint}` }]);
+                }
+            }
+        };
+        const handleValidationComplete = ({ passed, issueCount }) => {
+            if (passed) {
+                setOutputLog((prev) => [...prev, { text: '[STATUS] Validation passed', isStatus: true }]);
+            }
+            else {
+                setOutputLog((prev) => [...prev, { text: `[STATUS] Validation found ${issueCount} issue(s)`, isStatus: true }]);
+            }
+        };
+        emitter.on('output', handleOutput);
+        emitter.on('status', handleStatus);
+        emitter.on('complete', handleComplete);
+        emitter.on('error', handleError);
+        emitter.on('credentials:request', handleCredentialsRequest);
+        emitter.on('confirm:request', handleConfirmRequest);
+        emitter.on('validation:start', handleValidationStart);
+        emitter.on('validation:issues', handleValidationIssues);
+        emitter.on('validation:complete', handleValidationComplete);
+        return () => {
+            emitter.off('output', handleOutput);
+            emitter.off('status', handleStatus);
+            emitter.off('complete', handleComplete);
+            emitter.off('error', handleError);
+            emitter.off('credentials:request', handleCredentialsRequest);
+            emitter.off('confirm:request', handleConfirmRequest);
+            emitter.off('validation:start', handleValidationStart);
+            emitter.off('validation:issues', handleValidationIssues);
+            emitter.off('validation:complete', handleValidationComplete);
+        };
+    }, [emitter]);
+    const handleConfirm = (confirmed) => {
+        if (confirmRequest) {
+            emitter.emit('confirm:response', { id: confirmRequest.id, confirmed });
+            setConfirmRequest(null);
+        }
+    };
+    const handleCredentialsSubmit = (credentials) => {
+        emitter.emit('credentials:response', credentials);
+        setCredentialsRequest(null);
+    };
+    if (state === 'complete' && completionData) {
+        return _jsx(CompletionView, { success: completionData.success, summary: completionData.summary, outputLog: outputLog });
+    }
+    return (_jsx(DashboardLayout, { emitter: emitter, focusedPanel: focusedPanel, confirmRequest: confirmRequest, onConfirm: handleConfirm, credentialsRequest: credentialsRequest, onCredentialsSubmit: handleCredentialsSubmit }));
+}
+//# sourceMappingURL=Dashboard.js.map

package/dist/src/dashboard/components/Dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../../../../src/dashboard/components/Dashboard.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAmBrD,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,EAAkB;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,SAAS,CAAC,CAAC;IAC9D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAe,SAAS,CAAC,CAAC;IAC1E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAG1C,IAAI,CAAC,CAAC;IAChB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAClF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAElD,IAAI,CAAC,CAAC;IAEhB,iEAAiE;IACjE,QAAQ,CACN,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACb,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC;YACZ,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,EACD,EAAE,QAAQ,EAAE,KAAK,KAAK,SAAS,IAAI,CAAC,kBAAkB,IAAI,CAAC,cAAc,EAAE,CAC5E,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAuC,EAAE,EAAE;YAC9E,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBAC/C,IAAI,EAAE,IAAI;gBACV,OAAO;gBACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;aACpC,CAAC,CAAC,CAAC;YACJ,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAuB,EAAE,EAAE;YACxD,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,YAAY,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACrF,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAA0C,EAAE,EAAE;YACtF,iBAAiB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;YACxC,QAAQ,CAAC,UAAU,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAuB,EAAE,EAAE;YACvD,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAClF,CAAC,CAAC;QAEF,MAAM,wBAAwB,GAAG,CAAC,EAAE,cAAc,EAA+B,EAAE,EAAE;YACnF,qBAAqB,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEF,MAAM,oBAAoB,GAAG,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,OAAO,EACP,KAAK,GAMN,EAAE,EAAE;YACH,iBAAiB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC;QAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,qCAAqC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACrG,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,CAAC,EAC9B,MAAM,GAGP,EAAE,EAAE;YACH,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;gBAC3B,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;gBACtD,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,GAAG,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC,CAAC,CAAC;gBAC/G,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;oBACf,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;gBACvE,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,wBAAwB,GAAG,CAAC,EAAE,MAAM,EAAE,UAAU,EAA2C,EAAE,EAAE;YACnG,IAAI,MAAM,EAAE,CAAC;gBACX,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,4BAA4B,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAC5F,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,6BAA6B,UAAU,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAClH,CAAC;QACH,CAAC,CAAC;QAEF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACnC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACnC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;QACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACjC,OAAO,CAAC,EAAE,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;QAC5D,OAAO,CAAC,EAAE,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;QACpD,OAAO,CAAC,EAAE,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC;QACtD,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAC;QACxD,OAAO,CAAC,EAAE,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;QAE5D,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACpC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACpC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;YACxC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;YAClC,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;YAC7D,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;YACrD,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC;YACvD,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAC;YACzD,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,aAAa,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC3C,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,EAAE,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;YACvE,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,WAAiD,EAAE,EAAE;QACpF,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,CAAC;QAClD,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,IAAI,KAAK,KAAK,UAAU,IAAI,cAAc,EAAE,CAAC;QAC3C,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IACpH,CAAC;IAED,OAAO,CACL,KAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,aAAa,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,uBAAuB,GAC5C,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useInput } from 'ink';\nimport { DashboardLayout } from './DashboardLayout.js';\nimport { CompletionView } from './CompletionView.js';\nimport type { DashboardProps } from '../types.js';\n\ntype DashboardState = 'running' | 'complete';\ntype FocusedPanel = 'changes' | 'output';\n\ninterface OutputLine {\n  text: string;\n  isError?: boolean;\n  isStatus?: boolean;\n}\n\ninterface ConfirmRequest {\n  id: string;\n  message: string;\n  warning?: string;\n  files?: string[];\n}\n\nexport function Dashboard({ emitter }: DashboardProps): React.ReactElement {\n  const [state, setState] = useState<DashboardState>('running');\n  const [focusedPanel, setFocusedPanel] = useState<FocusedPanel>('changes');\n  const [completionData, setCompletionData] = useState<{\n    success: boolean;\n    summary?: string;\n  } | null>(null);\n  const [outputLog, setOutputLog] = useState<OutputLine[]>([]);\n  const [confirmRequest, setConfirmRequest] = useState<ConfirmRequest | null>(null);\n  const [credentialsRequest, setCredentialsRequest] = useState<{\n    requiresApiKey: boolean;\n  } | null>(null);\n\n  // Tab to switch focus between panels (only when not in a prompt)\n  useInput(\n    (input, key) => {\n      if (key.tab) {\n        setFocusedPanel((prev) => (prev === 'changes' ? 'output' : 'changes'));\n      }\n    },\n    { isActive: state === 'running' && !credentialsRequest && !confirmRequest },\n  );\n\n  useEffect(() => {\n    const handleOutput = ({ text, isError }: { text: string; isError?: boolean }) => {\n      const newLines = text.split('\\n').map((line) => ({\n        text: line,\n        isError,\n        isStatus: line.includes('[STATUS]'),\n      }));\n      setOutputLog((prev) => [...prev, ...newLines]);\n    };\n\n    const handleStatus = ({ message }: { message: string }) => {\n      setOutputLog((prev) => [...prev, { text: `[STATUS] ${message}`, isStatus: true }]);\n    };\n\n    const handleComplete = ({ success, summary }: { success: boolean; summary?: string }) => {\n      setCompletionData({ success, summary });\n      setState('complete');\n    };\n\n    const handleError = ({ message }: { message: string }) => {\n      setOutputLog((prev) => [...prev, { text: `ERROR: ${message}`, isError: true }]);\n    };\n\n    const handleCredentialsRequest = ({ requiresApiKey }: { requiresApiKey: boolean }) => {\n      setCredentialsRequest({ requiresApiKey });\n    };\n\n    const handleConfirmRequest = ({\n      id,\n      message,\n      warning,\n      files,\n    }: {\n      id: string;\n      message: string;\n      warning?: string;\n      files?: string[];\n    }) => {\n      setConfirmRequest({ id, message, warning, files });\n    };\n\n    const handleValidationStart = () => {\n      setOutputLog((prev) => [...prev, { text: '[STATUS] Validating installation...', isStatus: true }]);\n    };\n\n    const handleValidationIssues = ({\n      issues,\n    }: {\n      issues: Array<{ severity: string; message: string; hint?: string }>;\n    }) => {\n      for (const issue of issues) {\n        const prefix = issue.severity === 'error' ? '!' : '?';\n        setOutputLog((prev) => [...prev, { text: `${prefix} ${issue.message}`, isError: issue.severity === 'error' }]);\n        if (issue.hint) {\n          setOutputLog((prev) => [...prev, { text: `  Hint: ${issue.hint}` }]);\n        }\n      }\n    };\n\n    const handleValidationComplete = ({ passed, issueCount }: { passed: boolean; issueCount: number }) => {\n      if (passed) {\n        setOutputLog((prev) => [...prev, { text: '[STATUS] Validation passed', isStatus: true }]);\n      } else {\n        setOutputLog((prev) => [...prev, { text: `[STATUS] Validation found ${issueCount} issue(s)`, isStatus: true }]);\n      }\n    };\n\n    emitter.on('output', handleOutput);\n    emitter.on('status', handleStatus);\n    emitter.on('complete', handleComplete);\n    emitter.on('error', handleError);\n    emitter.on('credentials:request', handleCredentialsRequest);\n    emitter.on('confirm:request', handleConfirmRequest);\n    emitter.on('validation:start', handleValidationStart);\n    emitter.on('validation:issues', handleValidationIssues);\n    emitter.on('validation:complete', handleValidationComplete);\n\n    return () => {\n      emitter.off('output', handleOutput);\n      emitter.off('status', handleStatus);\n      emitter.off('complete', handleComplete);\n      emitter.off('error', handleError);\n      emitter.off('credentials:request', handleCredentialsRequest);\n      emitter.off('confirm:request', handleConfirmRequest);\n      emitter.off('validation:start', handleValidationStart);\n      emitter.off('validation:issues', handleValidationIssues);\n      emitter.off('validation:complete', handleValidationComplete);\n    };\n  }, [emitter]);\n\n  const handleConfirm = (confirmed: boolean) => {\n    if (confirmRequest) {\n      emitter.emit('confirm:response', { id: confirmRequest.id, confirmed });\n      setConfirmRequest(null);\n    }\n  };\n\n  const handleCredentialsSubmit = (credentials: { apiKey: string; clientId: string }) => {\n    emitter.emit('credentials:response', credentials);\n    setCredentialsRequest(null);\n  };\n\n  if (state === 'complete' && completionData) {\n    return <CompletionView success={completionData.success} summary={completionData.summary} outputLog={outputLog} />;\n  }\n\n  return (\n    <DashboardLayout\n      emitter={emitter}\n      focusedPanel={focusedPanel}\n      confirmRequest={confirmRequest}\n      onConfirm={handleConfirm}\n      credentialsRequest={credentialsRequest}\n      onCredentialsSubmit={handleCredentialsSubmit}\n    />\n  );\n}\n"]}

package/dist/src/dashboard/components/DashboardLayout.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { WizardEventEmitter } from '../../lib/events.js';
+type FocusedPanel = 'changes' | 'output';
+interface ConfirmRequest {
+    id: string;
+    message: string;
+    warning?: string;
+    files?: string[];
+}
+interface DashboardLayoutProps {
+    emitter: WizardEventEmitter;
+    focusedPanel?: FocusedPanel;
+    confirmRequest?: ConfirmRequest | null;
+    onConfirm?: (confirmed: boolean) => void;
+    credentialsRequest?: {
+        requiresApiKey: boolean;
+    } | null;
+    onCredentialsSubmit?: (credentials: {
+        apiKey: string;
+        clientId: string;
+    }) => void;
+}
+export declare function DashboardLayout({ emitter, focusedPanel, confirmRequest, onConfirm, credentialsRequest, onCredentialsSubmit, }: DashboardLayoutProps): React.ReactElement;
+export {};

package/dist/src/dashboard/components/DashboardLayout.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTerminalSize, MIN_COLUMNS, MIN_ROWS } from '../hooks/useTerminalSize.js';
+import { Panel } from './Panel.js';
+import { OutputPanel } from './OutputPanel.js';
+import { DiffPanel } from './DiffPanel.js';
+import { AnimatedLogo } from './AnimatedLogo.js';
+import { CredentialsForm } from './CredentialsForm.js';
+import { ConfirmPrompt } from './ConfirmPrompt.js';
+export function DashboardLayout({ emitter, focusedPanel = 'changes', confirmRequest, onConfirm, credentialsRequest, onCredentialsSubmit, }) {
+    const { columns, rows } = useTerminalSize();
+    // Check minimum size
+    if (columns < MIN_COLUMNS || rows < MIN_ROWS) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { color: "yellow", children: "Terminal too small" }), _jsxs(Text, { dimColor: true, children: ["Minimum size: ", MIN_COLUMNS, "x", MIN_ROWS] }), _jsxs(Text, { dimColor: true, children: ["Current size: ", columns, "x", rows] })] }));
+    }
+    // Calculate explicit heights - reserve 1 row for help hint
+    const availableRows = rows - 1;
+    const topHeight = Math.floor(availableRows * 0.6);
+    const bottomHeight = availableRows - topHeight;
+    // Calculate widths for bottom panels
+    const outputWidth = Math.floor(columns * 0.75);
+    const statusWidth = columns - outputWidth;
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Panel, { title: confirmRequest || credentialsRequest ? 'Setup' : 'Changes', height: topHeight, borderColor: focusedPanel === 'changes' ? 'cyan' : 'gray', contentHeight: topHeight - 4, children: confirmRequest && onConfirm ? (_jsx(ConfirmPrompt, { message: confirmRequest.message, warning: confirmRequest.warning, files: confirmRequest.files, onConfirm: onConfirm })) : credentialsRequest && onCredentialsSubmit ? (_jsx(CredentialsForm, { requiresApiKey: credentialsRequest.requiresApiKey, onSubmit: onCredentialsSubmit })) : (_jsx(DiffPanel, { emitter: emitter, focused: focusedPanel === 'changes', height: topHeight - 4 })) }), _jsxs(Box, { flexDirection: "row", height: bottomHeight, children: [_jsx(Panel, { title: "Output", width: outputWidth, borderColor: focusedPanel === 'output' ? 'cyan' : 'gray', contentHeight: bottomHeight - 4, children: _jsx(OutputPanel, { emitter: emitter, focused: focusedPanel === 'output', height: bottomHeight - 4 }) }), _jsx(Panel, { width: statusWidth, children: _jsx(Box, { alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx(AnimatedLogo, { mode: "spin" }) }) })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: " Tab: switch panel | j/k: scroll | gg/G: top/bottom" }) })] }));
+}
+//# sourceMappingURL=DashboardLayout.js.map

package/dist/src/dashboard/components/DashboardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.js","sourceRoot":"","sources":["../../../../src/dashboard/components/DashboardLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Text } from 'ink';\nimport { useTerminalSize, MIN_COLUMNS, MIN_ROWS } from '../hooks/useTerminalSize.js';\nimport { Panel } from './Panel.js';\nimport { OutputPanel } from './OutputPanel.js';\nimport { DiffPanel } from './DiffPanel.js';\nimport { AnimatedLogo } from './AnimatedLogo.js';\nimport { CredentialsForm } from './CredentialsForm.js';\nimport { ConfirmPrompt } from './ConfirmPrompt.js';\nimport type { WizardEventEmitter } from '../../lib/events.js';\n\ntype FocusedPanel = 'changes' | 'output';\n\ninterface ConfirmRequest {\n  id: string;\n  message: string;\n  warning?: string;\n  files?: string[];\n}\n\ninterface DashboardLayoutProps {\n  emitter: WizardEventEmitter;\n  focusedPanel?: FocusedPanel;\n  confirmRequest?: ConfirmRequest | null;\n  onConfirm?: (confirmed: boolean) => void;\n  credentialsRequest?: { requiresApiKey: boolean } | null;\n  onCredentialsSubmit?: (credentials: { apiKey: string; clientId: string }) => void;\n}\n\nexport function DashboardLayout({\n  emitter,\n  focusedPanel = 'changes',\n  confirmRequest,\n  onConfirm,\n  credentialsRequest,\n  onCredentialsSubmit,\n}: DashboardLayoutProps): React.ReactElement {\n  const { columns, rows } = useTerminalSize();\n\n  // Check minimum size\n  if (columns < MIN_COLUMNS || rows < MIN_ROWS) {\n    return (\n      <Box flexDirection=\"column\" padding={1}>\n        <Text color=\"yellow\">Terminal too small</Text>\n        <Text dimColor>\n          Minimum size: {MIN_COLUMNS}x{MIN_ROWS}\n        </Text>\n        <Text dimColor>\n          Current size: {columns}x{rows}\n        </Text>\n      </Box>\n    );\n  }\n\n  // Calculate explicit heights - reserve 1 row for help hint\n  const availableRows = rows - 1;\n  const topHeight = Math.floor(availableRows * 0.6);\n  const bottomHeight = availableRows - topHeight;\n\n  // Calculate widths for bottom panels\n  const outputWidth = Math.floor(columns * 0.75);\n  const statusWidth = columns - outputWidth;\n\n  return (\n    <Box flexDirection=\"column\" width={columns} height={rows}>\n      {/* Top Panel - 60% height */}\n      <Panel\n        title={confirmRequest || credentialsRequest ? 'Setup' : 'Changes'}\n        height={topHeight}\n        borderColor={focusedPanel === 'changes' ? 'cyan' : 'gray'}\n        contentHeight={topHeight - 4}\n      >\n        {confirmRequest && onConfirm ? (\n          <ConfirmPrompt\n            message={confirmRequest.message}\n            warning={confirmRequest.warning}\n            files={confirmRequest.files}\n            onConfirm={onConfirm}\n          />\n        ) : credentialsRequest && onCredentialsSubmit ? (\n          <CredentialsForm requiresApiKey={credentialsRequest.requiresApiKey} onSubmit={onCredentialsSubmit} />\n        ) : (\n          <DiffPanel emitter={emitter} focused={focusedPanel === 'changes'} height={topHeight - 4} />\n        )}\n      </Panel>\n\n      {/* Bottom Row */}\n      <Box flexDirection=\"row\" height={bottomHeight}>\n        {/* Bottom Left - 75% width */}\n        <Panel\n          title=\"Output\"\n          width={outputWidth}\n          borderColor={focusedPanel === 'output' ? 'cyan' : 'gray'}\n          contentHeight={bottomHeight - 4}\n        >\n          <OutputPanel emitter={emitter} focused={focusedPanel === 'output'} height={bottomHeight - 4} />\n        </Panel>\n\n        {/* Bottom Right - 25% width, no title */}\n        <Panel width={statusWidth}>\n          <Box alignItems=\"center\" justifyContent=\"center\" flexGrow={1}>\n            <AnimatedLogo mode=\"spin\" />\n          </Box>\n        </Panel>\n      </Box>\n\n      {/* Help hint at bottom */}\n      <Box>\n        <Text dimColor> Tab: switch panel | j/k: scroll | gg/G: top/bottom</Text>\n      </Box>\n    </Box>\n  );\n}\n"]}

package/dist/src/dashboard/components/DiffPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WizardEventEmitter } from '../../lib/events.js';
+interface DiffPanelProps {
+    emitter: WizardEventEmitter;
+    focused?: boolean;
+    height?: number;
+}
+export declare function DiffPanel({ emitter, focused, height }: DiffPanelProps): React.ReactElement;
+export {};

package/dist/src/dashboard/components/DiffPanel.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { Box, Text, useStdout, useInput } from 'ink';
+import { WelcomeArt } from './WelcomeArt.js';
+import { computeDiff, filterWithContext, formatDiffLine, getLanguage, tokenize, } from '../lib/diff-utils.js';
+// Color mapping for syntax tokens
+const TOKEN_COLORS = {
+    keyword: 'magenta',
+    string: 'yellow',
+    comment: 'gray',
+    number: 'cyan',
+    function: 'blue',
+    type: 'green',
+    operator: 'white',
+    punctuation: 'gray',
+    plain: undefined,
+};
+// Render a line with syntax highlighting
+function HighlightedLine({ content, language, prefix, dimmed, }) {
+    const tokens = tokenize(content, language);
+    return (_jsxs(Text, { dimColor: dimmed, children: [prefix, tokens.map((token, i) => (_jsx(Text, { color: dimmed ? undefined : TOKEN_COLORS[token.type], children: token.value }, i)))] }));
+}
+export function DiffPanel({ emitter, focused = true, height }) {
+    const [diffs, setDiffs] = useState([]);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const lastKeyRef = useRef('');
+    const { stdout } = useStdout();
+    // Use provided height or fall back to calculated height
+    const visibleLines = height ?? Math.floor((stdout?.rows || 24) * 0.55) - 4;
+    useEffect(() => {
+        const handleWrite = ({ path, content }) => {
+            const diff = computeDiff(path, null, content);
+            setDiffs((prev) => [diff, ...prev].slice(0, 10));
+            setScrollOffset(0);
+        };
+        const handleEdit = ({ path, oldContent, newContent }) => {
+            const diff = computeDiff(path, oldContent, newContent);
+            setDiffs((prev) => [diff, ...prev].slice(0, 10));
+            setScrollOffset(0);
+        };
+        emitter.on('file:write', handleWrite);
+        emitter.on('file:edit', handleEdit);
+        return () => {
+            emitter.off('file:write', handleWrite);
+            emitter.off('file:edit', handleEdit);
+        };
+    }, [emitter]);
+    // Flatten all diffs for display with language info
+    const allLines = useMemo(() => {
+        const lines = [];
+        for (const diff of diffs) {
+            const language = getLanguage(diff.path);
+            lines.push({
+                type: 'header',
+                content: `── ${diff.path} ${diff.isNew ? '(new file)' : '(modified)'} ──`,
+                language: 'plain',
+            });
+            const filteredChanges = filterWithContext(diff.changes, 3);
+            for (const change of filteredChanges) {
+                lines.push({
+                    type: change.type,
+                    content: formatDiffLine(change),
+                    language,
+                });
+            }
+            lines.push({ type: 'unchanged', content: '', language: 'plain' });
+        }
+        return lines;
+    }, [diffs]);
+    // Vim-style keyboard navigation (only when focused)
+    useInput((input, key) => {
+        if (!focused || diffs.length === 0)
+            return;
+        const maxOffset = Math.max(0, allLines.length - visibleLines);
+        const halfPage = Math.floor(visibleLines / 2);
+        // j/k or arrow keys for line-by-line
+        if (input === 'j' || key.downArrow) {
+            setScrollOffset((prev) => Math.min(maxOffset, prev + 1));
+        }
+        else if (input === 'k' || key.upArrow) {
+            setScrollOffset((prev) => Math.max(0, prev - 1));
+        }
+        // Ctrl-d / Ctrl-u for half-page
+        else if (key.ctrl && input === 'd') {
+            setScrollOffset((prev) => Math.min(maxOffset, prev + halfPage));
+        }
+        else if (key.ctrl && input === 'u') {
+            setScrollOffset((prev) => Math.max(0, prev - halfPage));
+        }
+        // G for bottom, gg for top
+        else if (input === 'G') {
+            setScrollOffset(maxOffset);
+        }
+        else if (input === 'g') {
+            if (lastKeyRef.current === 'g') {
+                setScrollOffset(0);
+                lastKeyRef.current = '';
+            }
+            else {
+                lastKeyRef.current = 'g';
+                setTimeout(() => {
+                    lastKeyRef.current = '';
+                }, 500);
+            }
+        }
+    });
+    // Show welcome art if no diffs yet
+    if (diffs.length === 0) {
+        return _jsx(WelcomeArt, {});
+    }
+    // Reserve 1 line for scroll indicator if needed
+    const hasScroll = allLines.length > visibleLines - 1;
+    const contentLines = hasScroll ? visibleLines - 1 : visibleLines;
+    const displayLines = allLines.slice(scrollOffset, scrollOffset + contentLines);
+    const maxOffset = Math.max(0, allLines.length - contentLines);
+    // Calculate scrollbar position
+    const scrollbarHeight = Math.max(1, Math.floor((contentLines / allLines.length) * contentLines));
+    const scrollbarPosition = maxOffset > 0 ? Math.floor((scrollOffset / maxOffset) * (contentLines - scrollbarHeight)) : 0;
+    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [displayLines.map((line, i) => {
+                        if (line.type === 'header') {
+                            return (_jsx(Text, { color: "cyan", bold: true, children: line.content }, i));
+                        }
+                        // Extract the prefix (+ - or space) and the actual content
+                        const prefix = line.content.slice(0, 2);
+                        const codeContent = line.content.slice(2);
+                        if (line.type === 'add') {
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: prefix }), _jsx(HighlightedLine, { content: codeContent, language: line.language, prefix: "", dimmed: false })] }, i));
+                        }
+                        if (line.type === 'remove') {
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: "red", bold: true, children: prefix }), _jsx(HighlightedLine, { content: codeContent, language: line.language, prefix: "", dimmed: false })] }, i));
+                        }
+                        // Unchanged lines - dimmed with syntax highlighting
+                        return (_jsx(HighlightedLine, { content: codeContent, language: line.language, prefix: prefix, dimmed: true }, i));
+                    }), hasScroll && (_jsxs(Text, { dimColor: true, children: ["[", scrollOffset + 1, "-", Math.min(scrollOffset + contentLines, allLines.length), "/", allLines.length, "]"] }))] }), hasScroll && (_jsx(Box, { flexDirection: "column", width: 1, children: Array.from({ length: contentLines }).map((_, i) => (_jsx(Text, { color: i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? 'cyan' : 'gray', children: i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? '█' : '░' }, i))) }))] }));
+}
+//# sourceMappingURL=DiffPanel.js.map

package/dist/src/dashboard/components/DiffPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffPanel.js","sourceRoot":"","sources":["../../../../src/dashboard/components/DiffPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useMemo, useRef } from 'react';\nimport { Box, Text, useStdout, useInput } from 'ink';\nimport type { WizardEventEmitter } from '../../lib/events.js';\nimport { WelcomeArt } from './WelcomeArt.js';\nimport {\n  computeDiff,\n  filterWithContext,\n  formatDiffLine,\n  getLanguage,\n  tokenize,\n  type FileDiff,\n  type Token,\n  type TokenType,\n} from '../lib/diff-utils.js';\n\ninterface DiffPanelProps {\n  emitter: WizardEventEmitter;\n  focused?: boolean;\n  height?: number;\n}\n\n// Color mapping for syntax tokens\nconst TOKEN_COLORS: Record<TokenType, string | undefined> = {\n  keyword: 'magenta',\n  string: 'yellow',\n  comment: 'gray',\n  number: 'cyan',\n  function: 'blue',\n  type: 'green',\n  operator: 'white',\n  punctuation: 'gray',\n  plain: undefined,\n};\n\n// Render a line with syntax highlighting\nfunction HighlightedLine({\n  content,\n  language,\n  prefix,\n  dimmed,\n}: {\n  content: string;\n  language: string;\n  prefix: string;\n  dimmed?: boolean;\n}): React.ReactElement {\n  const tokens = tokenize(content, language);\n\n  return (\n    <Text dimColor={dimmed}>\n      {prefix}\n      {tokens.map((token, i) => (\n        <Text key={i} color={dimmed ? undefined : TOKEN_COLORS[token.type]}>\n          {token.value}\n        </Text>\n      ))}\n    </Text>\n  );\n}\n\nexport function DiffPanel({ emitter, focused = true, height }: DiffPanelProps): React.ReactElement {\n  const [diffs, setDiffs] = useState<FileDiff[]>([]);\n  const [scrollOffset, setScrollOffset] = useState(0);\n  const lastKeyRef = useRef<string>('');\n  const { stdout } = useStdout();\n  // Use provided height or fall back to calculated height\n  const visibleLines = height ?? Math.floor((stdout?.rows || 24) * 0.55) - 4;\n\n  useEffect(() => {\n    const handleWrite = ({ path, content }: { path: string; content: string }) => {\n      const diff = computeDiff(path, null, content);\n      setDiffs((prev) => [diff, ...prev].slice(0, 10));\n      setScrollOffset(0);\n    };\n\n    const handleEdit = ({ path, oldContent, newContent }: { path: string; oldContent: string; newContent: string }) => {\n      const diff = computeDiff(path, oldContent, newContent);\n      setDiffs((prev) => [diff, ...prev].slice(0, 10));\n      setScrollOffset(0);\n    };\n\n    emitter.on('file:write', handleWrite);\n    emitter.on('file:edit', handleEdit);\n\n    return () => {\n      emitter.off('file:write', handleWrite);\n      emitter.off('file:edit', handleEdit);\n    };\n  }, [emitter]);\n\n  // Flatten all diffs for display with language info\n  const allLines = useMemo(() => {\n    const lines: Array<{\n      type: 'header' | 'add' | 'remove' | 'unchanged';\n      content: string;\n      language: string;\n    }> = [];\n\n    for (const diff of diffs) {\n      const language = getLanguage(diff.path);\n      lines.push({\n        type: 'header',\n        content: `── ${diff.path} ${diff.isNew ? '(new file)' : '(modified)'} ──`,\n        language: 'plain',\n      });\n\n      const filteredChanges = filterWithContext(diff.changes, 3);\n      for (const change of filteredChanges) {\n        lines.push({\n          type: change.type,\n          content: formatDiffLine(change),\n          language,\n        });\n      }\n\n      lines.push({ type: 'unchanged', content: '', language: 'plain' });\n    }\n\n    return lines;\n  }, [diffs]);\n\n  // Vim-style keyboard navigation (only when focused)\n  useInput((input, key) => {\n    if (!focused || diffs.length === 0) return;\n\n    const maxOffset = Math.max(0, allLines.length - visibleLines);\n    const halfPage = Math.floor(visibleLines / 2);\n\n    // j/k or arrow keys for line-by-line\n    if (input === 'j' || key.downArrow) {\n      setScrollOffset((prev) => Math.min(maxOffset, prev + 1));\n    } else if (input === 'k' || key.upArrow) {\n      setScrollOffset((prev) => Math.max(0, prev - 1));\n    }\n    // Ctrl-d / Ctrl-u for half-page\n    else if (key.ctrl && input === 'd') {\n      setScrollOffset((prev) => Math.min(maxOffset, prev + halfPage));\n    } else if (key.ctrl && input === 'u') {\n      setScrollOffset((prev) => Math.max(0, prev - halfPage));\n    }\n    // G for bottom, gg for top\n    else if (input === 'G') {\n      setScrollOffset(maxOffset);\n    } else if (input === 'g') {\n      if (lastKeyRef.current === 'g') {\n        setScrollOffset(0);\n        lastKeyRef.current = '';\n      } else {\n        lastKeyRef.current = 'g';\n        setTimeout(() => {\n          lastKeyRef.current = '';\n        }, 500);\n      }\n    }\n  });\n\n  // Show welcome art if no diffs yet\n  if (diffs.length === 0) {\n    return <WelcomeArt />;\n  }\n\n  // Reserve 1 line for scroll indicator if needed\n  const hasScroll = allLines.length > visibleLines - 1;\n  const contentLines = hasScroll ? visibleLines - 1 : visibleLines;\n  const displayLines = allLines.slice(scrollOffset, scrollOffset + contentLines);\n  const maxOffset = Math.max(0, allLines.length - contentLines);\n\n  // Calculate scrollbar position\n  const scrollbarHeight = Math.max(1, Math.floor((contentLines / allLines.length) * contentLines));\n  const scrollbarPosition =\n    maxOffset > 0 ? Math.floor((scrollOffset / maxOffset) * (contentLines - scrollbarHeight)) : 0;\n\n  return (\n    <Box flexDirection=\"row\" flexGrow={1}>\n      <Box flexDirection=\"column\" flexGrow={1}>\n        {displayLines.map((line, i) => {\n          if (line.type === 'header') {\n            return (\n              <Text key={i} color=\"cyan\" bold>\n                {line.content}\n              </Text>\n            );\n          }\n\n          // Extract the prefix (+ - or space) and the actual content\n          const prefix = line.content.slice(0, 2);\n          const codeContent = line.content.slice(2);\n\n          if (line.type === 'add') {\n            return (\n              <Box key={i}>\n                <Text color=\"green\" bold>\n                  {prefix}\n                </Text>\n                <HighlightedLine content={codeContent} language={line.language} prefix=\"\" dimmed={false} />\n              </Box>\n            );\n          }\n\n          if (line.type === 'remove') {\n            return (\n              <Box key={i}>\n                <Text color=\"red\" bold>\n                  {prefix}\n                </Text>\n                <HighlightedLine content={codeContent} language={line.language} prefix=\"\" dimmed={false} />\n              </Box>\n            );\n          }\n\n          // Unchanged lines - dimmed with syntax highlighting\n          return (\n            <HighlightedLine key={i} content={codeContent} language={line.language} prefix={prefix} dimmed={true} />\n          );\n        })}\n        {hasScroll && (\n          <Text dimColor>\n            [{scrollOffset + 1}-{Math.min(scrollOffset + contentLines, allLines.length)}/{allLines.length}]\n          </Text>\n        )}\n      </Box>\n      {hasScroll && (\n        <Box flexDirection=\"column\" width={1}>\n          {Array.from({ length: contentLines }).map((_, i) => (\n            <Text key={i} color={i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? 'cyan' : 'gray'}>\n              {i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? '█' : '░'}\n            </Text>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"]}

package/dist/src/dashboard/components/InlinePrompt.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface InlinePromptProps {
+    message: string;
+    options: string[];
+    onSelect: (value: string) => void;
+}
+export declare function InlinePrompt({ message, options, onSelect }: InlinePromptProps): React.ReactElement;
+export {};

package/dist/src/dashboard/components/InlinePrompt.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function InlinePrompt({ message, options, onSelect }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
+        }
+        else if (key.return) {
+            onSelect(options[selectedIndex]);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["? ", message] }), _jsx(Box, { flexDirection: "column", marginLeft: 2, children: options.map((option, i) => (_jsxs(Text, { color: i === selectedIndex ? 'cyan' : undefined, children: [i === selectedIndex ? '› ' : '  ', option] }, i))) }), _jsx(Text, { dimColor: true, children: "\u2191/\u2193 to navigate, Enter to select" })] }));
+}
+//# sourceMappingURL=InlinePrompt.js.map

package/dist/src/dashboard/components/InlinePrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePrompt.js","sourceRoot":"","sources":["../../../../src/dashboard/components/InlinePrompt.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAQ1C,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAqB;IAC5E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,QAAQ,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACtB,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YAChB,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC;aAAM,IAAI,GAAG,CAAC,SAAS,EAAE,CAAC;YACzB,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC;aAAM,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,aACpC,MAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAC,QAAQ,mBACpB,OAAO,IACL,EACP,KAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAE,CAAC,YACtC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,MAAC,IAAI,IAAS,KAAK,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAC1D,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACjC,MAAM,KAFE,CAAC,CAGL,CACR,CAAC,GACE,EACN,KAAC,IAAI,IAAC,QAAQ,iEAAwC,IAClD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport { Box, Text, useInput } from 'ink';\n\ninterface InlinePromptProps {\n  message: string;\n  options: string[];\n  onSelect: (value: string) => void;\n}\n\nexport function InlinePrompt({ message, options, onSelect }: InlinePromptProps): React.ReactElement {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  useInput((input, key) => {\n    if (key.upArrow) {\n      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));\n    } else if (key.downArrow) {\n      setSelectedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));\n    } else if (key.return) {\n      onSelect(options[selectedIndex]);\n    }\n  });\n\n  return (\n    <Box flexDirection=\"column\" marginY={1}>\n      <Text bold color=\"yellow\">\n        ? {message}\n      </Text>\n      <Box flexDirection=\"column\" marginLeft={2}>\n        {options.map((option, i) => (\n          <Text key={i} color={i === selectedIndex ? 'cyan' : undefined}>\n            {i === selectedIndex ? '› ' : '  '}\n            {option}\n          </Text>\n        ))}\n      </Box>\n      <Text dimColor>↑/↓ to navigate, Enter to select</Text>\n    </Box>\n  );\n}\n"]}

package/dist/src/dashboard/components/OutputPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { WizardEventEmitter } from '../../lib/events.js';
+interface OutputPanelProps {
+    emitter: WizardEventEmitter;
+    maxLines?: number;
+    focused?: boolean;
+    height?: number;
+}
+export declare function OutputPanel({ emitter, maxLines, focused, height, }: OutputPanelProps): React.ReactElement;
+export {};

package/dist/src/dashboard/components/OutputPanel.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Box, Text, useStdout, useInput } from 'ink';
+import { InlinePrompt } from './InlinePrompt.js';
+export function OutputPanel({ emitter, maxLines = 100, focused = false, height, }) {
+    const [lines, setLines] = useState([]);
+    const [scrollOffset, setScrollOffset] = useState(null); // null = auto-scroll to bottom
+    const [activePrompt, setActivePrompt] = useState(null);
+    const lastKeyRef = useRef('');
+    const { stdout } = useStdout();
+    // Use provided height or fall back to calculated height
+    const visibleLines = height ?? Math.floor((stdout?.rows || 24) * 0.35) - 4;
+    useEffect(() => {
+        const handleOutput = ({ text, isError }) => {
+            const newLines = text.split('\n').map((line) => ({
+                text: line,
+                isError,
+                isStatus: line.includes('[STATUS]'),
+            }));
+            setLines((prev) => [...prev, ...newLines].slice(-maxLines));
+            // Auto-scroll to bottom when new content arrives (if not manually scrolled)
+            setScrollOffset(null);
+        };
+        const handleStatus = ({ message }) => {
+            setLines((prev) => [...prev, { text: `[STATUS] ${message}`, isStatus: true }].slice(-maxLines));
+            setScrollOffset(null);
+        };
+        const handlePromptRequest = ({ id, message, options }) => {
+            if (options && options.length > 0) {
+                setActivePrompt({ id, message, options });
+            }
+        };
+        emitter.on('output', handleOutput);
+        emitter.on('status', handleStatus);
+        emitter.on('prompt:request', handlePromptRequest);
+        return () => {
+            emitter.off('output', handleOutput);
+            emitter.off('status', handleStatus);
+            emitter.off('prompt:request', handlePromptRequest);
+        };
+    }, [emitter, maxLines]);
+    // Vim-style keyboard navigation (only when focused)
+    useInput((input, key) => {
+        if (!focused)
+            return;
+        const maxOffset = Math.max(0, lines.length - visibleLines);
+        const halfPage = Math.floor(visibleLines / 2);
+        const currentOffset = scrollOffset ?? maxOffset;
+        // j/k or arrow keys for line-by-line
+        if (input === 'j' || key.downArrow) {
+            setScrollOffset(Math.min(maxOffset, currentOffset + 1));
+        }
+        else if (input === 'k' || key.upArrow) {
+            setScrollOffset(Math.max(0, currentOffset - 1));
+        }
+        // Ctrl-d / Ctrl-u for half-page
+        else if (key.ctrl && input === 'd') {
+            setScrollOffset(Math.min(maxOffset, currentOffset + halfPage));
+        }
+        else if (key.ctrl && input === 'u') {
+            setScrollOffset(Math.max(0, currentOffset - halfPage));
+        }
+        // G for bottom (and resume auto-scroll), gg for top
+        else if (input === 'G') {
+            setScrollOffset(null); // Resume auto-scroll
+        }
+        else if (input === 'g') {
+            if (lastKeyRef.current === 'g') {
+                setScrollOffset(0);
+                lastKeyRef.current = '';
+            }
+            else {
+                lastKeyRef.current = 'g';
+                setTimeout(() => {
+                    lastKeyRef.current = '';
+                }, 500);
+            }
+        }
+    });
+    const handlePromptSelect = (value) => {
+        if (activePrompt) {
+            emitter.emit('prompt:response', { id: activePrompt.id, value });
+            setLines((prev) => [...prev, { text: `? ${activePrompt.message}`, isStatus: true }, { text: `  → ${value}` }].slice(-maxLines));
+            setActivePrompt(null);
+        }
+    };
+    // Calculate display range
+    const promptHeight = activePrompt ? 5 + activePrompt.options.length : 0;
+    // Reserve 1 line for scroll indicator if needed
+    const hasScroll = lines.length > visibleLines - promptHeight - 1;
+    const contentLines = hasScroll ? visibleLines - promptHeight - 1 : visibleLines - promptHeight;
+    const maxOffset = Math.max(0, lines.length - contentLines);
+    const effectiveOffset = scrollOffset ?? maxOffset;
+    const displayLines = lines.slice(Math.max(0, effectiveOffset), Math.max(0, effectiveOffset) + contentLines);
+    // Calculate scrollbar position
+    const scrollbarHeight = lines.length > 0 ? Math.max(1, Math.floor((contentLines / lines.length) * contentLines)) : 1;
+    const scrollbarPosition = maxOffset > 0 ? Math.floor((effectiveOffset / maxOffset) * (contentLines - scrollbarHeight)) : 0;
+    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [displayLines.length === 0 && !activePrompt ? (_jsx(Text, { dimColor: true, children: "Waiting for output..." })) : (displayLines.map((line, i) => (_jsx(Text, { color: line.isError ? 'red' : line.isStatus ? 'yellow' : undefined, children: line.text }, i)))), activePrompt && (_jsx(InlinePrompt, { message: activePrompt.message, options: activePrompt.options, onSelect: handlePromptSelect })), hasScroll && (_jsxs(Text, { dimColor: true, children: ["[", effectiveOffset + 1, "-", Math.min(effectiveOffset + contentLines, lines.length), "/", lines.length, "]", scrollOffset === null ? ' (following)' : ''] }))] }), hasScroll && (_jsx(Box, { flexDirection: "column", width: 1, children: Array.from({ length: contentLines }).map((_, i) => (_jsx(Text, { color: i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? 'cyan' : 'gray', children: i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? '█' : '░' }, i))) }))] }));
+}
+//# sourceMappingURL=OutputPanel.js.map

package/dist/src/dashboard/components/OutputPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutputPanel.js","sourceRoot":"","sources":["../../../../src/dashboard/components/OutputPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { Box, Text, useStdout, useInput } from 'ink';\nimport type { WizardEventEmitter } from '../../lib/events.js';\nimport { InlinePrompt } from './InlinePrompt.js';\n\ninterface OutputPanelProps {\n  emitter: WizardEventEmitter;\n  maxLines?: number;\n  focused?: boolean;\n  height?: number;\n}\n\ninterface OutputLine {\n  text: string;\n  isError?: boolean;\n  isStatus?: boolean;\n}\n\ninterface ActivePrompt {\n  id: string;\n  message: string;\n  options: string[];\n}\n\nexport function OutputPanel({\n  emitter,\n  maxLines = 100,\n  focused = false,\n  height,\n}: OutputPanelProps): React.ReactElement {\n  const [lines, setLines] = useState<OutputLine[]>([]);\n  const [scrollOffset, setScrollOffset] = useState<number | null>(null); // null = auto-scroll to bottom\n  const [activePrompt, setActivePrompt] = useState<ActivePrompt | null>(null);\n  const lastKeyRef = useRef<string>('');\n  const { stdout } = useStdout();\n  // Use provided height or fall back to calculated height\n  const visibleLines = height ?? Math.floor((stdout?.rows || 24) * 0.35) - 4;\n\n  useEffect(() => {\n    const handleOutput = ({ text, isError }: { text: string; isError?: boolean }) => {\n      const newLines = text.split('\\n').map((line) => ({\n        text: line,\n        isError,\n        isStatus: line.includes('[STATUS]'),\n      }));\n\n      setLines((prev) => [...prev, ...newLines].slice(-maxLines));\n      // Auto-scroll to bottom when new content arrives (if not manually scrolled)\n      setScrollOffset(null);\n    };\n\n    const handleStatus = ({ message }: { message: string }) => {\n      setLines((prev) => [...prev, { text: `[STATUS] ${message}`, isStatus: true }].slice(-maxLines));\n      setScrollOffset(null);\n    };\n\n    const handlePromptRequest = ({ id, message, options }: { id: string; message: string; options?: string[] }) => {\n      if (options && options.length > 0) {\n        setActivePrompt({ id, message, options });\n      }\n    };\n\n    emitter.on('output', handleOutput);\n    emitter.on('status', handleStatus);\n    emitter.on('prompt:request', handlePromptRequest);\n\n    return () => {\n      emitter.off('output', handleOutput);\n      emitter.off('status', handleStatus);\n      emitter.off('prompt:request', handlePromptRequest);\n    };\n  }, [emitter, maxLines]);\n\n  // Vim-style keyboard navigation (only when focused)\n  useInput((input, key) => {\n    if (!focused) return;\n\n    const maxOffset = Math.max(0, lines.length - visibleLines);\n    const halfPage = Math.floor(visibleLines / 2);\n    const currentOffset = scrollOffset ?? maxOffset;\n\n    // j/k or arrow keys for line-by-line\n    if (input === 'j' || key.downArrow) {\n      setScrollOffset(Math.min(maxOffset, currentOffset + 1));\n    } else if (input === 'k' || key.upArrow) {\n      setScrollOffset(Math.max(0, currentOffset - 1));\n    }\n    // Ctrl-d / Ctrl-u for half-page\n    else if (key.ctrl && input === 'd') {\n      setScrollOffset(Math.min(maxOffset, currentOffset + halfPage));\n    } else if (key.ctrl && input === 'u') {\n      setScrollOffset(Math.max(0, currentOffset - halfPage));\n    }\n    // G for bottom (and resume auto-scroll), gg for top\n    else if (input === 'G') {\n      setScrollOffset(null); // Resume auto-scroll\n    } else if (input === 'g') {\n      if (lastKeyRef.current === 'g') {\n        setScrollOffset(0);\n        lastKeyRef.current = '';\n      } else {\n        lastKeyRef.current = 'g';\n        setTimeout(() => {\n          lastKeyRef.current = '';\n        }, 500);\n      }\n    }\n  });\n\n  const handlePromptSelect = (value: string) => {\n    if (activePrompt) {\n      emitter.emit('prompt:response', { id: activePrompt.id, value });\n      setLines((prev) =>\n        [...prev, { text: `? ${activePrompt.message}`, isStatus: true }, { text: `  → ${value}` }].slice(-maxLines),\n      );\n      setActivePrompt(null);\n    }\n  };\n\n  // Calculate display range\n  const promptHeight = activePrompt ? 5 + activePrompt.options.length : 0;\n  // Reserve 1 line for scroll indicator if needed\n  const hasScroll = lines.length > visibleLines - promptHeight - 1;\n  const contentLines = hasScroll ? visibleLines - promptHeight - 1 : visibleLines - promptHeight;\n  const maxOffset = Math.max(0, lines.length - contentLines);\n  const effectiveOffset = scrollOffset ?? maxOffset;\n  const displayLines = lines.slice(Math.max(0, effectiveOffset), Math.max(0, effectiveOffset) + contentLines);\n\n  // Calculate scrollbar position\n  const scrollbarHeight = lines.length > 0 ? Math.max(1, Math.floor((contentLines / lines.length) * contentLines)) : 1;\n  const scrollbarPosition =\n    maxOffset > 0 ? Math.floor((effectiveOffset / maxOffset) * (contentLines - scrollbarHeight)) : 0;\n\n  return (\n    <Box flexDirection=\"row\" flexGrow={1}>\n      <Box flexDirection=\"column\" flexGrow={1}>\n        {displayLines.length === 0 && !activePrompt ? (\n          <Text dimColor>Waiting for output...</Text>\n        ) : (\n          displayLines.map((line, i) => (\n            <Text key={i} color={line.isError ? 'red' : line.isStatus ? 'yellow' : undefined}>\n              {line.text}\n            </Text>\n          ))\n        )}\n\n        {activePrompt && (\n          <InlinePrompt message={activePrompt.message} options={activePrompt.options} onSelect={handlePromptSelect} />\n        )}\n\n        {hasScroll && (\n          <Text dimColor>\n            [{effectiveOffset + 1}-{Math.min(effectiveOffset + contentLines, lines.length)}/{lines.length}]\n            {scrollOffset === null ? ' (following)' : ''}\n          </Text>\n        )}\n      </Box>\n      {hasScroll && (\n        <Box flexDirection=\"column\" width={1}>\n          {Array.from({ length: contentLines }).map((_, i) => (\n            <Text key={i} color={i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? 'cyan' : 'gray'}>\n              {i >= scrollbarPosition && i < scrollbarPosition + scrollbarHeight ? '█' : '░'}\n            </Text>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"]}

package/dist/src/dashboard/components/Panel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface PanelProps {
+    title?: string;
+    children: React.ReactNode;
+    borderColor?: string;
+    flexGrow?: number;
+    width?: string | number;
+    height?: string | number;
+    contentHeight?: number;
+}
+export declare function Panel({ title, children, borderColor, flexGrow, width, height, }: PanelProps): React.ReactElement;
+export {};

package/dist/src/dashboard/components/Panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Panel({ title, children, borderColor = 'gray', flexGrow, width, height, }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: borderColor, flexGrow: flexGrow, width: width, height: height, children: [title && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { bold: true, color: "cyan", children: title }) })), _jsx(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: children })] }));
+}
+//# sourceMappingURL=Panel.js.map

package/dist/src/dashboard/components/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/dashboard/components/Panel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAYhC,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,MAAM,EACpB,QAAQ,EACR,KAAK,EACL,MAAM,GACK;IACX,OAAO,CACL,MAAC,GAAG,IACF,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,aAEb,KAAK,IAAI,CACR,KAAC,GAAG,IAAC,UAAU,EAAE,CAAC,YAChB,KAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAC,MAAM,YACpB,KAAK,GACD,GACH,CACP,EACD,KAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,YACjD,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { Box, Text } from 'ink';\n\ninterface PanelProps {\n  title?: string;\n  children: React.ReactNode;\n  borderColor?: string;\n  flexGrow?: number;\n  width?: string | number;\n  height?: string | number;\n  contentHeight?: number;\n}\n\nexport function Panel({\n  title,\n  children,\n  borderColor = 'gray',\n  flexGrow,\n  width,\n  height,\n}: PanelProps): React.ReactElement {\n  return (\n    <Box\n      flexDirection=\"column\"\n      borderStyle=\"round\"\n      borderColor={borderColor}\n      flexGrow={flexGrow}\n      width={width}\n      height={height}\n    >\n      {title && (\n        <Box marginLeft={1}>\n          <Text bold color=\"cyan\">\n            {title}\n          </Text>\n        </Box>\n      )}\n      <Box flexDirection=\"column\" paddingX={1} flexGrow={1}>\n        {children}\n      </Box>\n    </Box>\n  );\n}\n"]}