gencode-ai 0.1.1 → 0.1.2

package/src/cli/components/App.tsx

@@ -22,13 +22,22 @@ import { PromptInput, ConfirmPrompt } from './Input.js';
 import { ModelSelector } from './ModelSelector.js';
 import { ProviderManager } from './ProviderManager.js';
 import { CommandSuggestions, getFilteredCommands } from './CommandSuggestions.js';
+import {
+  PermissionPrompt,
+  PermissionRulesDisplay,
+  PermissionAuditDisplay,
+} from './PermissionPrompt.js';
+import { TodoList } from './TodoList.js';
 import { colors, icons } from './theme.js';
+import { getTodos } from '../../tools/index.js';
 import type { ProviderName } from '../../providers/index.js';
+import type { ApprovalAction, ApprovalSuggestion } from '../../permissions/types.js';
+import { gatherContextFiles, buildInitPrompt, getContextSummary } from '../../memory/index.js';
 
 // Types
 interface HistoryItem {
   id: string;
-  type: 'header' | 'welcome' | 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'info' | 'completion';
+  type: 'header' | 'welcome' | 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'info' | 'completion' | 'todos';
   content: string;
   meta?: Record<string, unknown>;
 }
@@ -36,11 +45,14 @@ interface HistoryItem {
 interface ConfirmState {
   tool: string;
   input: Record<string, unknown>;
-  resolve: (confirmed: boolean) => void;
+  suggestions: ApprovalSuggestion[];
+  resolve: (action: ApprovalAction) => void;
 }
 
 interface SettingsManager {
   save: (settings: { model?: string }) => Promise<void>;
+  getCwd?: () => string;
+  addPermissionRule?: (pattern: string, type: 'allow' | 'deny', level?: 'global' | 'project' | 'local') => Promise<void>;
 }
 
 interface Session {
@@ -49,10 +61,16 @@ interface Session {
   updatedAt: string;
 }
 
+interface PermissionSettings {
+  allow?: string[];
+  deny?: string[];
+}
+
 interface AppProps {
   config: AgentConfig;
   settingsManager?: SettingsManager;
   resumeLatest?: boolean;
+  permissionSettings?: PermissionSettings;
 }
 
 // ============================================================================
@@ -125,10 +143,64 @@ function SessionsTable({ sessions }: SessionsTableProps) {
   );
 }
 
+// ============================================================================
+// Memory Files Display Component
+// ============================================================================
+interface MemoryFileInfo {
+  path: string;
+  level: string;
+  size: number;
+  type: 'file' | 'rule';
+}
+
+function MemoryFilesDisplay({ files }: { files: MemoryFileInfo[] }) {
+  const formatSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes}B`;
+    return `${(bytes / 1024).toFixed(1)}KB`;
+  };
+
+  const memoryFiles = files.filter((f) => f.type === 'file');
+  const ruleFiles = files.filter((f) => f.type === 'rule');
+
+  return (
+    <Box flexDirection="column">
+      {memoryFiles.length > 0 && (
+        <>
+          <Text color={colors.info}>Loaded Memory Files:</Text>
+          {memoryFiles.map((f, i) => (
+            <Text key={f.path}>
+              <Text color={colors.textMuted}>  [{i + 1}] </Text>
+              <Text color={colors.primary}>{f.path} </Text>
+              <Text color={colors.textMuted}>({f.level}, {formatSize(f.size)})</Text>
+            </Text>
+          ))}
+        </>
+      )}
+      {ruleFiles.length > 0 && (
+        <Box flexDirection="column" marginTop={memoryFiles.length > 0 ? 1 : 0}>
+          <Text color={colors.info}>
+            Loaded Rules:
+          </Text>
+          {ruleFiles.map((f, i) => (
+            <Text key={f.path}>
+              <Text color={colors.textMuted}>  [{i + 1}] </Text>
+              <Text color={colors.warning}>{f.path} </Text>
+              <Text color={colors.textMuted}>({f.level}, {formatSize(f.size)})</Text>
+            </Text>
+          ))}
+        </Box>
+      )}
+      {files.length === 0 && (
+        <Text color={colors.textMuted}>No memory files loaded</Text>
+      )}
+    </Box>
+  );
+}
+
 // ============================================================================
 // Main App
 // ============================================================================
-export function App({ config, settingsManager, resumeLatest }: AppProps) {
+export function App({ config, settingsManager, resumeLatest, permissionSettings }: AppProps) {
   const { exit } = useApp();
   const agent = useAgent(config);
 
@@ -160,6 +232,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
   const [isThinking, setIsThinking] = useState(false);
   const [streamingText, setStreamingText] = useState('');
   const streamingTextRef = useRef(''); // Track current streaming text for closure
+  const [processingStartTime, setProcessingStartTime] = useState<number | undefined>(undefined);
+  const [tokenCount, setTokenCount] = useState(0);
   const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
   const [showModelSelector, setShowModelSelector] = useState(false);
   const [showProviderManager, setShowProviderManager] = useState(false);
@@ -168,6 +242,7 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
   const [inputKey, setInputKey] = useState(0); // Force cursor to end after autocomplete
   const [pendingTool, setPendingTool] = useState<{ name: string; input: Record<string, unknown> } | null>(null);
   const pendingToolRef = useRef<{ name: string; input: Record<string, unknown> } | null>(null);
+  const [todos, setTodos] = useState<ReturnType<typeof getTodos>>([]);
 
   // Check if showing command suggestions
   const showCmdSuggestions = input.startsWith('/') && !isProcessing;
@@ -186,12 +261,30 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
   // Initialize
   useEffect(() => {
     const init = async () => {
-      agent.setConfirmCallback(async (tool: string, toolInput: unknown) => {
-        return new Promise<boolean>((resolve) => {
-          setConfirmState({ tool, input: toolInput as Record<string, unknown>, resolve });
+      // Initialize permission system with settings
+      await agent.initializePermissions(permissionSettings);
+
+      // Set enhanced confirm callback with approval options
+      agent.setEnhancedConfirmCallback(async (tool, toolInput, suggestions) => {
+        return new Promise<ApprovalAction>((resolve) => {
+          setConfirmState({
+            tool,
+            input: toolInput as Record<string, unknown>,
+            suggestions,
+            resolve,
+          });
         });
       });
 
+      // Set callback to save permission rules to settings.local.json
+      if (settingsManager?.addPermissionRule) {
+        agent.setSaveRuleCallback(async (tool, pattern) => {
+          // Format as Claude Code style pattern: Tool(pattern) or just Tool
+          const rulePattern = pattern ? `${tool}(${pattern})` : tool;
+          await settingsManager.addPermissionRule!(rulePattern, 'allow', 'local');
+        });
+      }
+
       if (resumeLatest) {
         const resumed = await agent.resumeLatest();
         if (resumed) {
@@ -200,12 +293,12 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
       }
     };
     init();
-  }, [agent, resumeLatest, addHistory]);
+  }, [agent, resumeLatest, addHistory, permissionSettings, settingsManager]);
 
-  // Handle confirm
-  const handleConfirm = (confirmed: boolean) => {
+  // Handle permission decision
+  const handlePermissionDecision = (action: ApprovalAction) => {
     if (confirmState) {
-      confirmState.resolve(confirmed);
+      confirmState.resolve(action);
       setConfirmState(null);
     }
   };
@@ -321,13 +414,113 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         return true;
       }
 
+      case 'permissions': {
+        const permManager = agent.getPermissionManager();
+
+        if (arg === 'audit') {
+          // Show audit log
+          const auditLog = permManager.getAuditLog(20);
+          if (auditLog.length === 0) {
+            addHistory({ type: 'info', content: 'No permission decisions recorded yet' });
+          } else {
+            const entries = auditLog.map((e) => ({
+              time: e.timestamp.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+              tool: e.tool,
+              input: e.inputSummary,
+              decision: e.decision,
+              rule: e.matchedRule,
+            }));
+            addHistory({
+              type: 'info',
+              content: '__PERMISSION_AUDIT__',
+              meta: { entries },
+            });
+          }
+        } else if (arg === 'stats') {
+          // Show statistics
+          const stats = permManager.getAuditStats();
+          addHistory({
+            type: 'info',
+            content: `Permissions: ${stats.allowed + stats.confirmed} allowed, ${stats.denied + stats.rejected} denied`,
+          });
+        } else {
+          // Show rules
+          const rules = permManager.getRules();
+          const prompts = permManager.getAllowedPrompts();
+          const displayRules = rules.map((r) => ({
+            type: r.scope === 'session' ? 'Session' : r.description?.startsWith('Settings') ? 'Settings' : 'Built-in',
+            tool: typeof r.tool === 'string' ? r.tool : r.tool.toString(),
+            pattern: typeof r.pattern === 'string' ? r.pattern : r.pattern?.toString(),
+            scope: r.scope ?? 'session',
+            mode: r.mode,
+          }));
+          addHistory({
+            type: 'info',
+            content: '__PERMISSIONS__',
+            meta: { rules: displayRules, prompts },
+          });
+        }
+        return true;
+      }
+
       case 'init': {
-        addHistory({ type: 'info', content: '/init command not available in this version' });
+        // Gather context files and generate AGENT.md
+        addHistory({ type: 'info', content: 'Analyzing codebase...' });
+
+        const contextFiles = await gatherContextFiles(cwd);
+        addHistory({ type: 'info', content: getContextSummary(contextFiles) });
+
+        // Check if AGENT.md already exists
+        const memoryManager = agent.getMemoryManager();
+        const existingPath = await memoryManager.getExistingProjectMemoryPath(cwd);
+        let existingContent: string | undefined;
+
+        if (existingPath) {
+          try {
+            const fs = await import('fs/promises');
+            existingContent = await fs.readFile(existingPath, 'utf-8');
+            addHistory({
+              type: 'info',
+              content: `Found existing: ${existingPath.replace(cwd, '.')}`,
+            });
+          } catch {
+            // File doesn't exist or can't be read
+          }
+        }
+
+        // Build init prompt and run through agent
+        const initPrompt = buildInitPrompt(contextFiles, existingContent);
+        addHistory({ type: 'info', content: 'Generating AGENT.md...' });
+        addHistory({ type: 'user', content: '/init' });
+        await runAgent(initPrompt);
         return true;
       }
 
       case 'memory': {
-        addHistory({ type: 'info', content: '/memory command not available in this version' });
+        // Show loaded memory files
+        const memoryManager = agent.getMemoryManager();
+        const loadedFiles = memoryManager.getLoadedFileList();
+
+        if (loadedFiles.length === 0) {
+          // Try to load memory first
+          await agent.loadMemory();
+          const filesAfterLoad = memoryManager.getLoadedFileList();
+          if (filesAfterLoad.length === 0) {
+            addHistory({ type: 'info', content: 'No memory files found' });
+          } else {
+            addHistory({
+              type: 'info',
+              content: '__MEMORY__',
+              meta: { files: filesAfterLoad },
+            });
+          }
+        } else {
+          addHistory({
+            type: 'info',
+            content: '__MEMORY__',
+            meta: { files: loadedFiles },
+          });
+        }
         return true;
       }
 
@@ -347,6 +540,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
     streamingTextRef.current = '';
     interruptFlagRef.current = false;
     const startTime = Date.now();
+    setProcessingStartTime(startTime);
+    setTokenCount(0);
 
     try {
       for await (const event of agent.run(prompt)) {
@@ -360,6 +555,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
             setIsThinking(false);
             streamingTextRef.current += event.text;
             setStreamingText(streamingTextRef.current);
+            // Estimate token count (roughly 4 chars per token)
+            setTokenCount((prev) => prev + Math.max(1, Math.ceil(event.text.length / 4)));
             break;
 
           case 'tool_start':
@@ -376,24 +573,37 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
             break;
 
           case 'tool_result':
-            // Add tool_call to history (now completed) - use ref for correct value
-            if (pendingToolRef.current) {
+            // For TodoWrite: add todos first, then hide tool_call/tool_result
+            if (event.name === 'TodoWrite') {
+              const currentTodos = getTodos();
+              setTodos(currentTodos);
+              if (currentTodos.length > 0) {
+                addHistory({
+                  type: 'todos',
+                  content: '',
+                  meta: { todos: currentTodos },
+                });
+              }
+            } else {
+              // Add tool_call to history (now completed) - use ref for correct value
+              if (pendingToolRef.current) {
+                addHistory({
+                  type: 'tool_call',
+                  content: pendingToolRef.current.name,
+                  meta: { toolName: pendingToolRef.current.name, input: pendingToolRef.current.input },
+                });
+              }
+              // Add tool_result to history
               addHistory({
-                type: 'tool_call',
-                content: pendingToolRef.current.name,
-                meta: { toolName: pendingToolRef.current.name, input: pendingToolRef.current.input },
+                type: 'tool_result',
+                content: event.result.output,
+                meta: {
+                  toolName: event.name,
+                  success: event.result.success,
+                  metadata: event.result.metadata,
+                },
               });
             }
-            // Add tool_result to history
-            addHistory({
-              type: 'tool_result',
-              content: event.result.output,
-              meta: {
-                toolName: event.name,
-                success: event.result.success,
-                metadata: event.result.metadata,
-              },
-            });
             pendingToolRef.current = null;
             setPendingTool(null);
             setIsThinking(true);
@@ -413,6 +623,7 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
             // Add completion message with duration
             const durationMs = Date.now() - startTime;
             addHistory({ type: 'completion', content: '', meta: { durationMs } });
+            setProcessingStartTime(undefined);
             break;
         }
       }
@@ -454,6 +665,47 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
       return;
     }
 
+    // Handle # prefix for quick memory adds
+    // ## note -> user memory (~/.gencode/AGENT.md)
+    // # note -> project memory (./AGENT.md)
+    if (trimmed.startsWith('#') && !trimmed.startsWith('#!/')) {
+      const memoryManager = agent.getMemoryManager();
+      let level: 'user' | 'project';
+      let content: string;
+
+      if (trimmed.startsWith('## ')) {
+        level = 'user';
+        content = trimmed.slice(3).trim();
+      } else if (trimmed.startsWith('# ')) {
+        level = 'project';
+        content = trimmed.slice(2).trim();
+      } else {
+        // Just # with no space, treat as project
+        level = 'project';
+        content = trimmed.slice(1).trim();
+      }
+
+      if (!content) {
+        addHistory({ type: 'info', content: 'Empty memory entry ignored' });
+        return;
+      }
+
+      try {
+        const savedPath = await memoryManager.quickAdd(content, level, cwd);
+        const displayPath = savedPath.replace(process.env.HOME || '', '~');
+        addHistory({
+          type: 'info',
+          content: `Added to ${level} memory: ${displayPath}`,
+        });
+      } catch (error) {
+        addHistory({
+          type: 'info',
+          content: `Failed to add to memory: ${error instanceof Error ? error.message : String(error)}`,
+        });
+      }
+      return;
+    }
+
     if (trimmed.startsWith('/')) {
       const handled = await handleCommand(trimmed);
       if (!handled) {
@@ -537,9 +789,29 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         if (item.content === '__SESSIONS__' && item.meta?.input) {
           return <SessionsTable sessions={item.meta.input as Session[]} />;
         }
+        if (item.content === '__PERMISSIONS__' && item.meta?.rules) {
+          return (
+            <PermissionRulesDisplay
+              rules={item.meta.rules as { type: string; tool: string; pattern?: string; scope: string; mode: string }[]}
+              allowedPrompts={item.meta.prompts as { tool: string; prompt: string }[] | undefined}
+            />
+          );
+        }
+        if (item.content === '__PERMISSION_AUDIT__' && item.meta?.entries) {
+          return (
+            <PermissionAuditDisplay
+              entries={item.meta.entries as { time: string; tool: string; input: string; decision: string; rule?: string }[]}
+            />
+          );
+        }
+        if (item.content === '__MEMORY__' && item.meta?.files) {
+          return <MemoryFilesDisplay files={item.meta.files as MemoryFileInfo[]} />;
+        }
         return <InfoMessage text={item.content} />;
       case 'completion':
         return <CompletionMessage durationMs={(item.meta?.durationMs as number) || 0} />;
+      case 'todos':
+        return <TodoList todos={item.meta?.todos as ReturnType<typeof getTodos>} />;
       default:
         return null;
     }
@@ -551,17 +823,18 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         {(item) => <Box key={item.id}>{renderHistoryItem(item)}</Box>}
       </Static>
 
-      {pendingTool && <PendingToolCall name={pendingTool.name} input={pendingTool.input} />}
+      {pendingTool && !confirmState && <PendingToolCall name={pendingTool.name} input={pendingTool.input} />}
 
       {streamingText && <AssistantMessage text={streamingText} streaming />}
 
       {confirmState && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={colors.warning}>
-            {icons.warning} {confirmState.tool}
-          </Text>
-          <ConfirmPrompt message="Allow?" onConfirm={handleConfirm} />
-        </Box>
+        <PermissionPrompt
+          tool={confirmState.tool}
+          input={confirmState.input}
+          suggestions={confirmState.suggestions}
+          onDecision={handlePermissionDecision}
+          projectPath={settingsManager?.getCwd?.() ?? process.cwd()}
+        />
       )}
 
       {showModelSelector && (
@@ -602,8 +875,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         </Box>
       )}
 
-      {isProcessing ? (
-        <ProgressBar />
+      {isProcessing && !confirmState ? (
+        <ProgressBar startTime={processingStartTime} tokenCount={tokenCount} isThinking={isThinking} />
       ) : showCmdSuggestions && cmdSuggestions.length > 0 ? (
         <Box marginTop={1}>
           <Text color={colors.textMuted}>  Tab to complete · ↑↓ navigate</Text>

package/src/cli/components/CommandSuggestions.tsx

@@ -9,6 +9,8 @@ interface Command {
 export const COMMANDS: Command[] = [
   { name: '/model', description: 'Switch model' },
   { name: '/provider', description: 'Manage providers' },
+  { name: '/permissions', description: 'View permission rules' },
+  { name: '/permissions audit', description: 'View permission audit log' },
   { name: '/sessions', description: 'List sessions' },
   { name: '/resume', description: 'Resume session' },
   { name: '/new', description: 'New session' },

package/src/cli/components/Header.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from 'ink';
 import { colors } from './theme.js';
-import { Logo } from './Logo.js';
+import { BigLogo } from './Logo.js';
 
 interface HeaderProps {
   provider: string;
@@ -8,20 +8,14 @@ interface HeaderProps {
   cwd: string;
 }
 
-export function Header({ provider, model, cwd }: HeaderProps) {
-  const home = process.env.HOME || '';
-  const cwdDisplay = cwd.startsWith(home) ? '~' + cwd.slice(home.length) : cwd;
-
+export function Header({ model, cwd }: HeaderProps) {
   return (
-    <Box flexDirection="row" marginBottom={1} marginTop={1}>
-      <Logo />
-      <Box flexDirection="column" marginLeft={1}>
-        <Box>
-          <Text bold color={colors.text}>gencode </Text>
-          <Text color={colors.textMuted}>v0.1.0</Text>
-        </Box>
-        <Text color={colors.textMuted}>{model} · API Usage Billing</Text>
-        <Text color={colors.textMuted}>{cwdDisplay}</Text>
+    <Box flexDirection="column" marginTop={1}>
+      <BigLogo />
+      <Box marginTop={1}>
+        <Text color={colors.textSecondary}>{model}</Text>
+        <Text color={colors.textMuted}> · </Text>
+        <Text color={colors.textMuted}>{cwd}</Text>
       </Box>
     </Box>
   );
@@ -29,8 +23,8 @@ export function Header({ provider, model, cwd }: HeaderProps) {
 
 export function Welcome() {
   return (
-    <Text color={colors.textMuted}>
-      Type a message or /help. Ctrl+C to exit.
-    </Text>
+    <Box marginTop={1}>
+      <Text color={colors.textMuted}>? for help · Ctrl+C to exit</Text>
+    </Box>
   );
 }

package/src/cli/components/Logo.tsx

@@ -1,16 +1,83 @@
 import { Box, Text } from 'ink';
+import { colors } from './theme.js';
 
+// Small G logo for inline use
 export function Logo() {
-  // Full G with 3D shadow - subdued slate color
-  const slateColor = "#64748B"; // Slate 500 - stable, professional
   return (
-    <Box flexDirection="column" marginRight={1}>
-      <Text color={slateColor}>  ██████╗ </Text>
-      <Text color={slateColor}> ██╔════╝ </Text>
-      <Text color={slateColor}> ██║  ███╗</Text>
-      <Text color={slateColor}> ██║   ██║</Text>
-      <Text color={slateColor}> ╚██████╔╝</Text>
-      <Text color={slateColor}>  ╚═════╝ </Text>
+    <Box marginRight={1}>
+      <Text bold color={colors.brand}>◆</Text>
+    </Box>
+  );
+}
+
+// Large ASCII art logo with elegant gradient
+export function BigLogo() {
+  // Indigo gradient - brand colors
+  const c1 = '#818CF8'; // Indigo 400
+  const c2 = '#818CF8'; // Indigo 400
+  const c3 = '#A5B4FC'; // Indigo 300
+  const c4 = '#A5B4FC'; // Indigo 300
+  const c5 = '#C7D2FE'; // Indigo 200
+  const c6 = '#C7D2FE'; // Indigo 200
+  const c7 = '#C7D2FE'; // Indigo 200
+
+  // G E N C O D E
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text color={c1}> ██████╗ </Text>
+        <Text color={c2}>███████╗</Text>
+        <Text color={c3}>███╗   ██╗</Text>
+        <Text color={c4}> ██████╗</Text>
+        <Text color={c5}> ██████╗ </Text>
+        <Text color={c6}>██████╗ </Text>
+        <Text color={c7}>███████╗</Text>
+      </Text>
+      <Text>
+        <Text color={c1}>██╔════╝ </Text>
+        <Text color={c2}>██╔════╝</Text>
+        <Text color={c3}>████╗  ██║</Text>
+        <Text color={c4}>██╔════╝</Text>
+        <Text color={c5}>██╔═══██╗</Text>
+        <Text color={c6}>██╔══██╗</Text>
+        <Text color={c7}>██╔════╝</Text>
+      </Text>
+      <Text>
+        <Text color={c1}>██║  ███╗</Text>
+        <Text color={c2}>█████╗  </Text>
+        <Text color={c3}>██╔██╗ ██║</Text>
+        <Text color={c4}>██║     </Text>
+        <Text color={c5}>██║   ██║</Text>
+        <Text color={c6}>██║  ██║</Text>
+        <Text color={c7}>█████╗  </Text>
+      </Text>
+      <Text>
+        <Text color={c1}>██║   ██║</Text>
+        <Text color={c2}>██╔══╝  </Text>
+        <Text color={c3}>██║╚██╗██║</Text>
+        <Text color={c4}>██║     </Text>
+        <Text color={c5}>██║   ██║</Text>
+        <Text color={c6}>██║  ██║</Text>
+        <Text color={c7}>██╔══╝  </Text>
+      </Text>
+      <Text>
+        <Text color={c1}>╚██████╔╝</Text>
+        <Text color={c2}>███████╗</Text>
+        <Text color={c3}>██║ ╚████║</Text>
+        <Text color={c4}>╚██████╗</Text>
+        <Text color={c5}>╚██████╔╝</Text>
+        <Text color={c6}>██████╔╝</Text>
+        <Text color={c7}>███████╗</Text>
+      </Text>
+      <Text>
+        <Text color={c1}> ╚═════╝ </Text>
+        <Text color={c2}>╚══════╝</Text>
+        <Text color={c3}>╚═╝  ╚═══╝</Text>
+        <Text color={c4}> ╚═════╝</Text>
+        <Text color={c5}> ╚═════╝ </Text>
+        <Text color={c6}>╚═════╝ </Text>
+        <Text color={c7}>╚══════╝</Text>
+      </Text>
     </Box>
   );
 }