rrce-workflow 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rrce-workflow",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "RRCE-Workflow TUI - Agentic code workflow generator for AI-assisted development",
   "author": "RRCE Team",
   "license": "MIT",
@@ -37,6 +37,7 @@
   "scripts": {
     "dev": "bun run src/index.tsx",
     "wizard": "bun run src/index.tsx wizard",
+    "select": "bun run src/index.tsx select",
     "start": "bun run src/index.tsx"
   },
   "engines": {
@@ -45,8 +46,12 @@
   },
   "dependencies": {
     "gray-matter": "^4.0.3",
-    "ink": "^6.6.0",
-    "ink-select-input": "^6.2.0",
+    "ink": "^5.0.0",
+    "ink-big-text": "^2.0.0",
+    "ink-gradient": "^3.0.0",
+    "ink-select-input": "^5.0.0",
+    "ink-spinner": "^5.0.0",
+    "pastel": "^4.0.0",
     "react": "^18",
     "zod": "^4"
   },
@@ -54,4 +59,4 @@
     "@types/bun": "latest",
     "@types/react": "^18"
   }
-}
+}

package/src/App.tsx

@@ -15,7 +15,7 @@ interface AppProps {
 }
 
 export function App({ command }: AppProps) {
-  const [mode, setMode] = React.useState<AppMode>(command === 'wizard' ? 'wizard' : 'select');
+  const [mode, setMode] = React.useState<AppMode>(command === 'select' ? 'select' : 'wizard');
   const [selectedPrompt, setSelectedPrompt] = React.useState<ParsedPrompt | null>(null);
   const [message, setMessage] = React.useState<string | null>(null);
 

package/src/components/Logo.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Gradient from 'ink-gradient';
+import BigText from 'ink-big-text';
+import { Box } from 'ink';
+
+export function Logo() {
+  return (
+    <Box flexDirection="column" alignItems="center" marginBottom={1}>
+      <Gradient name="morning">
+        <BigText text="RRCE" align='center' font='block'/>
+      </Gradient>
+      <Gradient name="cristal">
+        <BigText text="Workflow" align='center' font='chrome'/>
+      </Gradient>
+    </Box>
+  );
+}

package/src/components/Wizard.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Box, Text, useInput } from 'ink';
 import SelectInput from 'ink-select-input';
+import Spinner from 'ink-spinner';
+import Gradient from 'ink-gradient';
+import { Logo } from './Logo';
 import type { StorageMode } from '../types/prompt';
 import { getGitUser } from '../lib/git';
 import { detectWorkspaceRoot, getWorkspaceName } from '../lib/paths';
@@ -29,15 +32,30 @@ const storageModeItems = [
 ];
 
 export function Wizard({ onComplete }: WizardProps) {
-  const workspacePath = detectWorkspaceRoot();
-  const workspaceName = getWorkspaceName(workspacePath);
-  const gitUser = getGitUser();
-
+  const [loading, setLoading] = React.useState(true);
   const [step, setStep] = React.useState<WizardStep>('welcome');
   const [storageMode, setStorageMode] = React.useState<StorageMode>('global');
   const [tools, setTools] = React.useState({ copilot: true, antigravity: true });
+  
+  // Data state
+  const [workspacePath, setWorkspacePath] = React.useState('');
+  const [workspaceName, setWorkspaceName] = React.useState('');
+  const [gitUser, setGitUser] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    // Simulate a small delay for dramatic effect/loading feeling
+    const timer = setTimeout(() => {
+      setWorkspacePath(detectWorkspaceRoot());
+      setWorkspaceName(getWorkspaceName(detectWorkspaceRoot()));
+      setGitUser(getGitUser());
+      setLoading(false);
+    }, 800);
+    return () => clearTimeout(timer);
+  }, []);
 
   useInput((input, key) => {
+    if (loading) return;
+    
     if (step === 'welcome' && key.return) {
       setStep('storage');
     } else if (step === 'confirm' && key.return) {
@@ -67,69 +85,86 @@ export function Wizard({ onComplete }: WizardProps) {
   };
 
   return (
-    <Box flexDirection="column" padding={1}>
-      <Box borderStyle="round" borderColor="cyan" paddingX={2}>
-        <Text bold color="cyan">RRCE-Workflow Setup</Text>
-      </Box>
-
-      <Box marginTop={1}>
+    <Box flexDirection="column" padding={1} alignItems="center">
+      <Logo />
+      
+      <Box borderStyle="round" borderColor="cyan" paddingX={2} paddingY={1} width={60} flexDirection="column">
         {step === 'welcome' && (
-          <Box flexDirection="column">
-            <Text>Welcome! Detecting your environment...</Text>
-            <Box marginTop={1} flexDirection="column">
-              <Text>
-                <Text color="green">✓</Text> Git user: <Text bold>{gitUser || '(not found)'}</Text>
-              </Text>
-              <Text>
-                <Text color="green">✓</Text> Workspace: <Text bold>{workspaceName}</Text>
-              </Text>
-            </Box>
-            <Box marginTop={1}>
-              <Text dimColor>Press Enter to continue...</Text>
-            </Box>
+          <Box flexDirection="column" alignItems="center">
+            {loading ? (
+              <Box>
+                <Text color="cyan"><Spinner type="dots" /> </Text>
+                <Text> Detecting environment...</Text>
+              </Box>
+            ) : (
+              <Box flexDirection="column" alignItems="center">
+                <Box marginBottom={1}>
+                  <Text bold color="cyan">Welcome to RRCE-Workflow Setup</Text>
+                </Box>
+                
+                <Box flexDirection="column" width="100%" marginBottom={1}>
+                  <Box>
+                    <Text color="green">✓</Text>
+                    <Text> Git User: </Text>
+                    <Text bold color="white">{gitUser || '(not found)'}</Text>
+                  </Box>
+                  <Box>
+                    <Text color="green">✓</Text>
+                    <Text> Workspace: </Text>
+                    <Text bold color="white">{workspaceName}</Text>
+                  </Box>
+                </Box>
+                
+                <Text dimColor>Press Enter to continue ❯</Text>
+              </Box>
+            )}
           </Box>
         )}
 
         {step === 'storage' && (
           <Box flexDirection="column">
-            <Text>Where should workflow data be stored?</Text>
-            <Box marginTop={1}>
-              <SelectInput items={storageModeItems} onSelect={handleStorageSelect} />
-            </Box>
+            <Box marginBottom={1}><Text bold underline>Storage Configuration</Text></Box>
+            <Box marginBottom={1}><Text>Where should workflow data be stored?</Text></Box>
+            <SelectInput items={storageModeItems} onSelect={handleStorageSelect} />
           </Box>
         )}
 
         {step === 'tools' && (
           <Box flexDirection="column">
-            <Text>Which AI tools do you use?</Text>
-            <Box marginTop={1}>
-              <SelectInput
-                items={[
-                  { label: `[${tools.copilot ? 'x' : ' '}] GitHub Copilot (VSCode)`, value: 'copilot' },
-                  { label: `[${tools.antigravity ? 'x' : ' '}] Antigravity IDE`, value: 'antigravity' },
-                  { label: '───────────────', value: 'sep' },
-                  { label: 'Done', value: 'done' },
-                ]}
-                onSelect={handleToolsSelect}
-              />
-            </Box>
+            <Box marginBottom={1}><Text bold underline>AI Tools Integration</Text></Box>
+            <Box marginBottom={1}><Text>Select the tools you want to generate prompts for:</Text></Box>
+            <SelectInput
+              items={[
+                { label: `[${tools.copilot ? 'x' : ' '}] GitHub Copilot`, value: 'copilot' },
+                { label: `[${tools.antigravity ? 'x' : ' '}] Antigravity IDE`, value: 'antigravity' },
+                { label: '───────────────', value: 'sep' },
+                { label: 'Done (Continue)', value: 'done' },
+              ]}
+              onSelect={handleToolsSelect}
+            />
           </Box>
         )}
 
         {step === 'confirm' && (
           <Box flexDirection="column">
-            <Text bold color="green">Configuration Summary</Text>
-            <Box marginTop={1} flexDirection="column">
-              <Text>• Storage: <Text bold>{storageMode}</Text></Text>
-              <Text>• Copilot: <Text bold>{tools.copilot ? 'Yes' : 'No'}</Text></Text>
-              <Text>• Antigravity: <Text bold>{tools.antigravity ? 'Yes' : 'No'}</Text></Text>
+            <Box marginBottom={1}><Text bold underline>Summary</Text></Box>
+            <Box flexDirection="column" marginBottom={1}>
+              <Box><Text bold>Storage:</Text><Text> {storageMode}</Text></Box>
+              <Box><Text bold>Copilot:</Text><Text color={tools.copilot ? 'green' : 'red'}> {tools.copilot ? 'Enabled' : 'Disabled'}</Text></Box>
+              <Box><Text bold>Antigravity:</Text><Text color={tools.antigravity ? 'green' : 'red'}> {tools.antigravity ? 'Enabled' : 'Disabled'}</Text></Box>
             </Box>
-            <Box marginTop={1}>
-              <Text dimColor>Press Enter to create configuration...</Text>
+            <Box marginTop={1} alignItems="center">
+              <Text dimColor>Press Enter to generate config ❯</Text>
             </Box>
           </Box>
         )}
       </Box>
+      
+      {!loading && (
+        <Box marginTop={1}>
+          <Text dimColor>v{process.env.npm_package_version || '0.1.0'}</Text>
+        </Box>
+      )}
     </Box>
   );
 }