@kirosnn/mosaic 0.0.7

package/src/components/ShortcutsModal.tsx

@@ -0,0 +1,67 @@
+import { TextAttributes } from "@opentui/core";
+
+interface ShortcutItem {
+  keys: string;
+  description: string;
+}
+
+interface ShortcutsModalProps {
+  activeTab: 0 | 1;
+}
+
+export function ShortcutsModal({ activeTab }: ShortcutsModalProps) {
+  const shortcutsGeneral: ShortcutItem[] = [
+    { keys: "Ctrl+P / Alt+P", description: "Open/close this shortcuts panel" },
+    { keys: "Alt+V (or Ctrl+V)", description: "Paste from clipboard into the focused input" },
+    { keys: "Enter", description: "Confirm / submit" },
+    { keys: "↑/↓ (or j/k)", description: "Navigate lists" },
+    { keys: "PageUp/PageDown", description: "Scroll chat faster" },
+  ];
+
+  const shortcutsSetup: ShortcutItem[] = [
+    { keys: "Esc", description: "Go back to the previous step" },
+    { keys: "Enter", description: "Confirm / next step" },
+    { keys: "Y / N", description: "Answer Yes/No questions" },
+    { keys: "↑/↓ (or j/k)", description: "Navigate provider/model lists" },
+    { keys: "Alt+V (or Ctrl+V)", description: "Paste API key into the focused input" },
+  ];
+
+  const shortcuts = activeTab === 0 ? shortcutsGeneral : shortcutsSetup;
+
+  return (
+    <box position="absolute" top={0} left={0} right={0} bottom={0} backgroundColor={"#0c0c0c"}>
+      <box width="100%" height="100%" justifyContent="center" alignItems="center">
+        <box flexDirection="column" width="80%" height="80%" backgroundColor="#1a1a1a" padding={2}>
+          <box marginBottom={1} flexDirection="row" justifyContent="space-between" width="100%">
+            <text attributes={TextAttributes.BOLD}>Keyboard shortcuts</text>
+            <text attributes={TextAttributes.DIM}>Esc to close the page</text>
+          </box>
+
+          <box marginBottom={1} flexDirection="row" width="100%">
+            <box paddingLeft={1} paddingRight={1} backgroundColor={activeTab === 0 ? '#2a2a2a' : 'transparent'}>
+              <text fg={activeTab === 0 ? "#ffca38" : undefined} attributes={activeTab === 0 ? TextAttributes.BOLD : TextAttributes.DIM}>F1 General</text>
+            </box>
+            <box marginLeft={1} paddingLeft={1} paddingRight={1} backgroundColor={activeTab === 1 ? '#2a2a2a' : 'transparent'}>
+              <text fg={activeTab === 1 ? "#ffca38" : undefined} attributes={activeTab === 1 ? TextAttributes.BOLD : TextAttributes.DIM}>F2 Setup</text>
+            </box>
+          </box>
+
+          <box flexDirection="column" width="100%" flexGrow={1}>
+            <box flexDirection="column" width="100%" overflow="scroll">
+              {shortcuts.map((s, idx) => (
+                <box key={idx} flexDirection="row" width="100%" marginBottom={1}>
+                  <box width={22}>
+                    <text fg="#ffca38" attributes={TextAttributes.BOLD}>{s.keys}</text>
+                  </box>
+                  <box flexGrow={1} minWidth={0}>
+                    <text attributes={TextAttributes.DIM}>{s.description}</text>
+                  </box>
+                </box>
+              ))}
+            </box>
+          </box>
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/components/Welcome.tsx

@@ -0,0 +1,39 @@
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { VERSION } from "../utils/version";
+
+interface WelcomeProps {
+  onComplete: () => void;
+  isFirstRun: boolean;
+  shortcutsOpen?: boolean;
+  commandsOpen?: boolean;
+}
+
+export function Welcome({ onComplete, isFirstRun, shortcutsOpen = false, commandsOpen = false }: WelcomeProps) {
+  useKeyboard((key) => {
+    if (shortcutsOpen) return;
+    if (key.name === 'return') {
+      onComplete();
+    }
+  });
+
+  return (
+    <box width="100%" height="100%" justifyContent="center" alignItems="center">
+      <box flexDirection="row">
+        <box flexDirection="column" alignItems="center" marginBottom={2}>
+          <text fg="#ffca38" attributes={TextAttributes.BOLD}>███╗   ███╗</text>
+          <text fg="#ffca38" attributes={TextAttributes.BOLD}>████╗ ████║</text>
+          <text fg="#ffca38" attributes={TextAttributes.BOLD}>███╔████╔███║</text>
+        </box>
+        <box flexDirection="column" alignItems="flex-start" marginLeft={2}>
+          <text attributes={TextAttributes.DIM}>Mosaic welcomes you !</text>
+          <text attributes={TextAttributes.DIM}>Mosaic CLI v{VERSION}</text>
+          <text attributes={TextAttributes.DIM}>Now are you ready to {isFirstRun ? 'configure' : 'use'} it ?</text>
+        </box>
+      </box>
+      <box marginTop={1}>
+        <text attributes={TextAttributes.DIM}>Press Enter to continue...</text>
+      </box>
+    </box>
+  );
+}

package/src/components/main/ApprovalPanel.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { TextAttributes } from '@opentui/core';
+import { useKeyboard } from '@opentui/react';
+import { CustomInput } from '../CustomInput';
+import type { ApprovalRequest } from '../../utils/approvalBridge';
+import { renderDiffLine } from '../../utils/diffRendering';
+
+interface ApprovalPanelProps {
+  request: ApprovalRequest;
+  disabled?: boolean;
+  onRespond: (approved: boolean, customResponse?: string) => void;
+}
+
+export function ApprovalPanel({ request, disabled = false, onRespond }: ApprovalPanelProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const allOptions = ['Yes', 'No'];
+
+  useEffect(() => {
+    setSelectedIndex(0);
+    setScrollOffset(0);
+  }, [request.id]);
+
+  const previewLines = request.preview.content.split('\n');
+  const maxVisiblePreviewLines = 15;
+  const canScroll = previewLines.length > maxVisiblePreviewLines;
+
+  useKeyboard((key) => {
+    if (disabled) return;
+
+    if ((key.name === 'up' || key.name === 'k') && key.shift && canScroll) {
+      setScrollOffset(prev => Math.max(0, prev - 1));
+      return;
+    }
+
+    if ((key.name === 'down' || key.name === 'j') && key.shift && canScroll) {
+      setScrollOffset(prev => Math.min(previewLines.length - maxVisiblePreviewLines, prev + 1));
+      return;
+    }
+
+    if (key.name === 'up' || key.name === 'k') {
+      setSelectedIndex(prev => (prev === 0 ? allOptions.length - 1 : prev - 1));
+      return;
+    }
+
+    if (key.name === 'down' || key.name === 'j') {
+      setSelectedIndex(prev => (prev === allOptions.length - 1 ? 0 : prev + 1));
+      return;
+    }
+
+    if (key.name === 'return') {
+      if (selectedIndex === 0) {
+        onRespond(true);
+      } else {
+        onRespond(false);
+      }
+      return;
+    }
+  });
+
+  const handleCustomSubmit = (text: string) => {
+    if (!text || !text.trim()) {
+      return;
+    }
+    onRespond(false, text);
+  };
+
+
+  const titleMatch = request.preview.title.match(/^(.+?)\s*\((.+)\)$/);
+  const toolName = titleMatch ? titleMatch[1] : request.preview.title;
+  const toolInfo = titleMatch ? titleMatch[2] : null;
+
+  return (
+    <box flexDirection="column" width="100%" backgroundColor="#1a1a1a" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+      <box flexDirection="row" marginBottom={1}>
+        <text fg={"#ffffff"}>{toolName}</text>
+        {toolInfo && (
+          <>
+            <text fg={"#ffffff"}> </text>
+            <text fg={"#ffffff"} attributes={TextAttributes.DIM}>({toolInfo})</text>
+          </>
+        )}
+      </box>
+
+      <box
+        flexDirection="column"
+        marginBottom={1}
+        paddingLeft={1}
+        paddingRight={1}
+        paddingBottom={1}
+      >
+        {previewLines.slice(scrollOffset, scrollOffset + maxVisiblePreviewLines).map((line, displayIndex) => {
+          const index = scrollOffset + displayIndex;
+          return renderDiffLine(line, `preview-line-${index}`);
+        })}
+        {canScroll && (
+          <text fg="#808080" attributes={TextAttributes.DIM}>
+            {scrollOffset > 0 ? '↑ ' : '  '}
+            Line {scrollOffset + 1}-{Math.min(scrollOffset + maxVisiblePreviewLines, previewLines.length)} of {previewLines.length}
+            {scrollOffset + maxVisiblePreviewLines < previewLines.length ? ' ↓' : ''}
+            {' (Shift+↑/↓ to scroll)'}
+          </text>
+        )}
+      </box>
+
+      <box flexDirection="column">
+        {allOptions.map((option, index) => {
+          const selected = index === selectedIndex;
+
+          return (
+            <box
+              key={`${request.id}-${index}`}
+              flexDirection="row"
+              backgroundColor='transparent'
+              paddingLeft={1}
+              paddingRight={1}
+            >
+              <text
+                fg='white'
+                attributes={selected ? TextAttributes.NONE : TextAttributes.DIM}
+              >
+                {selected ? '> ' : '  '}{option}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+
+      <box flexDirection="row" paddingLeft={1} >
+        <CustomInput onSubmit={handleCustomSubmit} placeholder="> Tell Mosaic what to do instead and press Enter" focused={!disabled} disableHistory={true} />
+      </box>
+    </box>
+  );
+}