@within-7/minto 0.1.7 → 0.3.0

package/dist/components/Onboarding.js

@@ -14,7 +14,8 @@ import { StructuredDiff } from "./StructuredDiff.js";
 import { getTheme } from "../utils/theme.js";
 import { clearTerminal } from "../utils/terminal.js";
 import { PressEnterToContinue } from "./PressEnterToContinue.js";
-import { ModelSelector } from "./ModelSelector.js";
+import { ModelSelector } from "./ModelSelector/index.js";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
 function Onboarding({ onDone }) {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [showModelSelector, setShowModelSelector] = useState(false);
@@ -45,21 +46,26 @@ function Onboarding({ onDone }) {
   function handleModelSelectionDone() {
     onDone();
   }
-  const exitState = useExitOnCtrlCD(() => process.exit(0));
-  useInput(async (_, key) => {
-    const currentStep = steps[currentStepIndex];
-    if (key.return && currentStep && ["usage", "providers", "model"].includes(currentStep.id)) {
-      if (currentStep.id === "model") {
-        setShowModelSelector(true);
-      } else if (currentStepIndex === steps.length - 1) {
-        onDone();
-      } else {
-        await clearTerminal();
-        goToNextStep();
-      }
-    }
+  const exitState = useExitOnCtrlCD(() => process.exit(0), {
+    isActive: !showModelSelector
   });
-  const themeStep = /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1, paddingLeft: 1 }, /* @__PURE__ */ React.createElement(Text, null, "Let's get started."), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Choose the option that looks best when you select it:"), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "To change this later, run /config")), /* @__PURE__ */ React.createElement(
+  useInput(
+    async (_, key) => {
+      const currentStep = steps[currentStepIndex];
+      if (key.return && currentStep && ["usage", "providers", "model"].includes(currentStep.id)) {
+        if (currentStep.id === "model") {
+          setShowModelSelector(true);
+        } else if (currentStepIndex === steps.length - 1) {
+          onDone();
+        } else {
+          await clearTerminal();
+          goToNextStep();
+        }
+      }
+    },
+    { isActive: !showModelSelector }
+  );
+  const themeStep = /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1, paddingLeft: 1 }, /* @__PURE__ */ React.createElement(Text, null, "Let's get started."), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Choose the option that looks best when you select it:"), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "To change this later, run /config")), /* @__PURE__ */ React.createElement(
     Select,
     {
       options: [
@@ -83,7 +89,7 @@ function Onboarding({ onDone }) {
       paddingLeft: 1,
       marginRight: 1,
       borderStyle: "round",
-      borderColor: "gray",
+      borderColor: SEMANTIC_COLORS.dim,
       flexDirection: "column"
     },
     /* @__PURE__ */ React.createElement(

package/dist/components/Onboarding.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/Onboarding.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react'\nimport { PRODUCT_NAME } from '@constants/product'\nimport { Box, Newline, Text, useInput } from 'ink'\nimport {\n  getGlobalConfig,\n  saveGlobalConfig,\n  DEFAULT_GLOBAL_CONFIG,\n  ProviderType,\n} from '@utils/config'\nimport { OrderedList } from '@inkjs/ui'\nimport { useExitOnCtrlCD } from '@hooks/useExitOnCtrlCD'\nimport { MIN_LOGO_WIDTH } from './Logo'\nimport { Select } from './CustomSelect/select'\nimport { StructuredDiff } from './StructuredDiff'\nimport { getTheme, type ThemeNames } from '@utils/theme'\nimport { clearTerminal } from '@utils/terminal'\nimport { PressEnterToContinue } from './PressEnterToContinue'\nimport { ModelSelector } from './ModelSelector'\ntype StepId = 'theme' | 'usage' | 'providers' | 'model'\n\ninterface OnboardingStep {\n  id: StepId\n  component: React.ReactNode\n}\n\ntype Props = {\n  onDone(): void\n}\n\nexport function Onboarding({ onDone }: Props): React.ReactNode {\n  const [currentStepIndex, setCurrentStepIndex] = useState(0)\n  const [showModelSelector, setShowModelSelector] = useState(false)\n  const config = getGlobalConfig()\n\n  const [selectedTheme, setSelectedTheme] = useState(\n    DEFAULT_GLOBAL_CONFIG.theme,\n  )\n  const theme = getTheme()\n  function goToNextStep() {\n    if (currentStepIndex < steps.length - 1) {\n      const nextIndex = currentStepIndex + 1\n      setCurrentStepIndex(nextIndex)\n    }\n  }\n\n  function handleThemeSelection(newTheme: string) {\n    saveGlobalConfig({\n      ...config,\n      theme: newTheme as ThemeNames,\n    })\n    goToNextStep()\n  }\n\n  function handleThemePreview(newTheme: string) {\n    setSelectedTheme(newTheme as ThemeNames)\n  }\n\n  function handleProviderSelectionDone() {\n    // After model selection is done, go to the next step\n    goToNextStep()\n  }\n\n  function handleModelSelectionDone() {\n    // After final model selection is done, complete onboarding\n    onDone()\n  }\n\n  const exitState = useExitOnCtrlCD(() => process.exit(0))\n\n  useInput(async (_, key) => {\n    const currentStep = steps[currentStepIndex]\n    if (\n      key.return &&\n      currentStep &&\n      ['usage', 'providers', 'model'].includes(currentStep.id)\n    ) {\n      if (currentStep.id === 'model') {\n        // Navigate to ModelSelector component\n        setShowModelSelector(true)\n      } else if (currentStepIndex === steps.length - 1) {\n        onDone()\n      } else {\n        // HACK: for some reason there's now a jump here otherwise :(\n        await clearTerminal()\n        goToNextStep()\n      }\n    }\n  })\n\n  // Define all onboarding steps\n  const themeStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Text>Let&apos;s get started.</Text>\n      <Box flexDirection=\"column\">\n        <Text bold>Choose the option that looks best when you select it:</Text>\n        <Text dimColor>To change this later, run /config</Text>\n      </Box>\n      <Select\n        options={[\n          { label: 'Light text', value: 'dark' },\n          { label: 'Dark text', value: 'light' },\n          {\n            label: 'Light text (colorblind-friendly)',\n            value: 'dark-daltonized',\n          },\n          {\n            label: 'Dark text (colorblind-friendly)',\n            value: 'light-daltonized',\n          },\n        ]}\n        onFocus={handleThemePreview}\n        onChange={handleThemeSelection}\n      />\n      <Box flexDirection=\"column\">\n        <Box\n          paddingLeft={1}\n          marginRight={1}\n          borderStyle=\"round\"\n          borderColor=\"gray\"\n          flexDirection=\"column\"\n        >\n          <StructuredDiff\n            patch={{\n              oldStart: 1,\n              newStart: 1,\n              oldLines: 3,\n              newLines: 3,\n              lines: [\n                'function greet() {',\n                '-  console.log(\"Hello, World!\");',\n                '+  console.log(\"Hello, anon!\");',\n                '}',\n              ],\n            }}\n            dim={false}\n            width={40}\n            overrideTheme={selectedTheme}\n          />\n        </Box>\n      </Box>\n    </Box>\n  )\n\n  const providersStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Box flexDirection=\"column\" width={70}>\n        <Text color={theme.secondaryText}>\n          Next, let's select your preferred AI provider and model.\n        </Text>\n      </Box>\n      <ModelSelector\n        onDone={handleProviderSelectionDone}\n        skipModelType={true}\n        isOnboarding={true}\n      />\n    </Box>\n  )\n\n  const usageStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Text bold>Using {PRODUCT_NAME} effectively:</Text>\n      <Box flexDirection=\"column\" width={70}>\n        <OrderedList children={[]}>\n          <OrderedList.Item children={[]}>\n            <Text>\n              Start in your project directory\n              <Newline />\n              <Text color={theme.secondaryText}>\n                Files are automatically added to context when needed.\n              </Text>\n              <Newline />\n            </Text>\n          </OrderedList.Item>\n          <OrderedList.Item children={[]}>\n            <Text>\n              Use {PRODUCT_NAME} as a development partner\n              <Newline />\n              <Text color={theme.secondaryText}>\n                Get help with file analysis, editing, bash commands,\n                <Newline />\n                and git history.\n                <Newline />\n              </Text>\n            </Text>\n          </OrderedList.Item>\n          <OrderedList.Item children={[]}>\n            <Text>\n              Provide clear context\n              <Newline />\n              <Text color={theme.secondaryText}>\n                Be as specific as you would with another engineer. <Newline />\n                The better the context, the better the results. <Newline />\n              </Text>\n            </Text>\n          </OrderedList.Item>\n        </OrderedList>\n      </Box>\n      <PressEnterToContinue />\n    </Box>\n  )\n\n  const modelStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Text bold>Configure your models:</Text>\n      <Box flexDirection=\"column\" width={70}>\n        <Text>\n          You can customize which models {PRODUCT_NAME} uses for different\n          tasks.\n          <Newline />\n          <Text color={theme.secondaryText}>\n            Let's set up your preferred models for large and small tasks.\n          </Text>\n        </Text>\n        <Box marginTop={1}>\n          <Text>\n            Press <Text color={theme.suggestion}>Enter</Text> to continue to the\n            model selection screen.\n          </Text>\n        </Box>\n      </Box>\n      <PressEnterToContinue />\n    </Box>\n  )\n\n  const steps: OnboardingStep[] = []\n  steps.push({ id: 'theme', component: themeStep })\n  steps.push({ id: 'usage', component: usageStep })\n\n  steps.push({ id: 'model', component: modelStep })\n\n  // If we're showing the model selector screen, render it directly\n  if (showModelSelector) {\n    return (\n      <ModelSelector\n        onDone={handleModelSelectionDone}\n        skipModelType={true}\n        isOnboarding={true}\n      />\n    )\n  }\n\n  return (\n    <Box flexDirection=\"column\" gap={1}>\n      <>\n        <Box flexDirection=\"column\" gap={1}>\n          <Text bold>\n            {PRODUCT_NAME}{' '}\n            {exitState.pending\n              ? `(press ${exitState.keyName} again to exit)`\n              : ''}\n          </Text>\n          {steps[currentStepIndex]?.component}\n        </Box>\n      </>\n    </Box>\n  )\n}\n\nexport function WelcomeBox(): React.ReactNode {\n  const theme = getTheme()\n  return (\n    <Box\n      borderColor={theme.minto}\n      borderStyle=\"round\"\n      paddingX={1}\n      width={MIN_LOGO_WIDTH}\n    >\n      <Text>\n        <Text color={theme.minto}>\u273B</Text> Welcome to{' '}\n        <Text bold>{PRODUCT_NAME}</Text> research preview!\n      </Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,KAAK,SAAS,MAAM,gBAAgB;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,gBAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAYvB,SAAS,WAAW,EAAE,OAAO,GAA2B;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,CAAC;AAC1D,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,SAAS,gBAAgB;AAE/B,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,sBAAsB;AAAA,EACxB;AACA,QAAM,QAAQ,SAAS;AACvB,WAAS,eAAe;AACtB,QAAI,mBAAmB,MAAM,SAAS,GAAG;AACvC,YAAM,YAAY,mBAAmB;AACrC,0BAAoB,SAAS;AAAA,IAC/B;AAAA,EACF;AAEA,WAAS,qBAAqB,UAAkB;AAC9C,qBAAiB;AAAA,MACf,GAAG;AAAA,MACH,OAAO;AAAA,IACT,CAAC;AACD,iBAAa;AAAA,EACf;AAEA,WAAS,mBAAmB,UAAkB;AAC5C,qBAAiB,QAAsB;AAAA,EACzC;AAEA,WAAS,8BAA8B;AAErC,iBAAa;AAAA,EACf;AAEA,WAAS,2BAA2B;AAElC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,gBAAgB,MAAM,QAAQ,KAAK,CAAC,CAAC;AAEvD,WAAS,OAAO,GAAG,QAAQ;AACzB,UAAM,cAAc,MAAM,gBAAgB;AAC1C,QACE,IAAI,UACJ,eACA,CAAC,SAAS,aAAa,OAAO,EAAE,SAAS,YAAY,EAAE,GACvD;AACA,UAAI,YAAY,OAAO,SAAS;AAE9B,6BAAqB,IAAI;AAAA,MAC3B,WAAW,qBAAqB,MAAM,SAAS,GAAG;AAChD,eAAO;AAAA,MACT,OAAO;AAEL,cAAM,cAAc;AACpB,qBAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF,CAAC;AAGD,QAAM,YACJ,oCAAC,OAAI,eAAc,UAAS,KAAK,GAAG,aAAa,KAC/C,oCAAC,YAAK,oBAAuB,GAC7B,oCAAC,OAAI,eAAc,YACjB,oCAAC,QAAK,MAAI,QAAC,uDAAqD,GAChE,oCAAC,QAAK,UAAQ,QAAC,mCAAiC,CAClD,GACA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,QACP,EAAE,OAAO,cAAc,OAAO,OAAO;AAAA,QACrC,EAAE,OAAO,aAAa,OAAO,QAAQ;AAAA,QACrC;AAAA,UACE,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA;AAAA,EACZ,GACA,oCAAC,OAAI,eAAc,YACjB;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAY;AAAA,MACZ,aAAY;AAAA,MACZ,eAAc;AAAA;AAAA,IAEd;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,OAAO;AAAA,QACP,eAAe;AAAA;AAAA,IACjB;AAAA,EACF,CACF,CACF;AAGF,QAAM,gBACJ,oCAAC,OAAI,eAAc,UAAS,KAAK,GAAG,aAAa,KAC/C,oCAAC,OAAI,eAAc,UAAS,OAAO,MACjC,oCAAC,QAAK,OAAO,MAAM,iBAAe,0DAElC,CACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,cAAc;AAAA;AAAA,EAChB,CACF;AAGF,QAAM,YACJ,oCAAC,OAAI,eAAc,UAAS,KAAK,GAAG,aAAa,KAC/C,oCAAC,QAAK,MAAI,QAAC,UAAO,cAAa,eAAa,GAC5C,oCAAC,OAAI,eAAc,UAAS,OAAO,MACjC,oCAAC,eAAY,UAAU,CAAC,KACtB,oCAAC,YAAY,MAAZ,EAAiB,UAAU,CAAC,KAC3B,oCAAC,YAAK,mCAEJ,oCAAC,aAAQ,GACT,oCAAC,QAAK,OAAO,MAAM,iBAAe,uDAElC,GACA,oCAAC,aAAQ,CACX,CACF,GACA,oCAAC,YAAY,MAAZ,EAAiB,UAAU,CAAC,KAC3B,oCAAC,YAAK,QACC,cAAa,6BAClB,oCAAC,aAAQ,GACT,oCAAC,QAAK,OAAO,MAAM,iBAAe,wDAEhC,oCAAC,aAAQ,GAAE,oBAEX,oCAAC,aAAQ,CACX,CACF,CACF,GACA,oCAAC,YAAY,MAAZ,EAAiB,UAAU,CAAC,KAC3B,oCAAC,YAAK,yBAEJ,oCAAC,aAAQ,GACT,oCAAC,QAAK,OAAO,MAAM,iBAAe,uDACmB,oCAAC,aAAQ,GAAE,oDACd,oCAAC,aAAQ,CAC3D,CACF,CACF,CACF,CACF,GACA,oCAAC,0BAAqB,CACxB;AAGF,QAAM,YACJ,oCAAC,OAAI,eAAc,UAAS,KAAK,GAAG,aAAa,KAC/C,oCAAC,QAAK,MAAI,QAAC,wBAAsB,GACjC,oCAAC,OAAI,eAAc,UAAS,OAAO,MACjC,oCAAC,YAAK,mCAC4B,cAAa,8BAE7C,oCAAC,aAAQ,GACT,oCAAC,QAAK,OAAO,MAAM,iBAAe,+DAElC,CACF,GACA,oCAAC,OAAI,WAAW,KACd,oCAAC,YAAK,UACE,oCAAC,QAAK,OAAO,MAAM,cAAY,OAAK,GAAO,6CAEnD,CACF,CACF,GACA,oCAAC,0BAAqB,CACxB;AAGF,QAAM,QAA0B,CAAC;AACjC,QAAM,KAAK,EAAE,IAAI,SAAS,WAAW,UAAU,CAAC;AAChD,QAAM,KAAK,EAAE,IAAI,SAAS,WAAW,UAAU,CAAC;AAEhD,QAAM,KAAK,EAAE,IAAI,SAAS,WAAW,UAAU,CAAC;AAGhD,MAAI,mBAAmB;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,cAAc;AAAA;AAAA,IAChB;AAAA,EAEJ;AAEA,SACE,oCAAC,OAAI,eAAc,UAAS,KAAK,KAC/B,0DACE,oCAAC,OAAI,eAAc,UAAS,KAAK,KAC/B,oCAAC,QAAK,MAAI,QACP,cAAc,KACd,UAAU,UACP,UAAU,UAAU,OAAO,oBAC3B,EACN,GACC,MAAM,gBAAgB,GAAG,SAC5B,CACF,CACF;AAEJ;AAEO,SAAS,aAA8B;AAC5C,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,aAAY;AAAA,MACZ,UAAU;AAAA,MACV,OAAO;AAAA;AAAA,IAEP,oCAAC,YACC,oCAAC,QAAK,OAAO,MAAM,SAAO,QAAC,GAAO,eAAY,KAC9C,oCAAC,QAAK,MAAI,QAAE,YAAa,GAAO,oBAClC;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useState } from 'react'\nimport { PRODUCT_NAME } from '@constants/product'\nimport { Box, Newline, Text, useInput } from 'ink'\nimport {\n  getGlobalConfig,\n  saveGlobalConfig,\n  DEFAULT_GLOBAL_CONFIG,\n  ProviderType,\n} from '@utils/config'\nimport { OrderedList } from '@inkjs/ui'\nimport { useExitOnCtrlCD } from '@hooks/useExitOnCtrlCD'\nimport { MIN_LOGO_WIDTH } from './Logo'\nimport { Select } from './CustomSelect/select'\nimport { StructuredDiff } from './StructuredDiff'\nimport { getTheme, type ThemeNames } from '@utils/theme'\nimport { clearTerminal } from '@utils/terminal'\nimport { PressEnterToContinue } from './PressEnterToContinue'\nimport { ModelSelector } from './ModelSelector'\nimport { SEMANTIC_COLORS } from '@constants/colors'\ntype StepId = 'theme' | 'usage' | 'providers' | 'model'\n\ninterface OnboardingStep {\n  id: StepId\n  component: React.ReactNode\n}\n\ntype Props = {\n  onDone(): void\n}\n\nexport function Onboarding({ onDone }: Props): React.ReactNode {\n  const [currentStepIndex, setCurrentStepIndex] = useState(0)\n  const [showModelSelector, setShowModelSelector] = useState(false)\n  const config = getGlobalConfig()\n\n  const [selectedTheme, setSelectedTheme] = useState(\n    DEFAULT_GLOBAL_CONFIG.theme,\n  )\n  const theme = getTheme()\n  function goToNextStep() {\n    if (currentStepIndex < steps.length - 1) {\n      const nextIndex = currentStepIndex + 1\n      setCurrentStepIndex(nextIndex)\n    }\n  }\n\n  function handleThemeSelection(newTheme: string) {\n    saveGlobalConfig({\n      ...config,\n      theme: newTheme as ThemeNames,\n    })\n    goToNextStep()\n  }\n\n  function handleThemePreview(newTheme: string) {\n    setSelectedTheme(newTheme as ThemeNames)\n  }\n\n  function handleProviderSelectionDone() {\n    // After model selection is done, go to the next step\n    goToNextStep()\n  }\n\n  function handleModelSelectionDone() {\n    // After final model selection is done, complete onboarding\n    onDone()\n  }\n\n  // Disable exit handler when showing ModelSelector to prevent listener accumulation\n  const exitState = useExitOnCtrlCD(() => process.exit(0), {\n    isActive: !showModelSelector,\n  })\n\n  // Only listen when not showing ModelSelector\n  useInput(\n    async (_, key) => {\n      const currentStep = steps[currentStepIndex]\n      if (\n        key.return &&\n        currentStep &&\n        ['usage', 'providers', 'model'].includes(currentStep.id)\n      ) {\n        if (currentStep.id === 'model') {\n          // Navigate to ModelSelector component\n          setShowModelSelector(true)\n        } else if (currentStepIndex === steps.length - 1) {\n          onDone()\n        } else {\n          // HACK: for some reason there's now a jump here otherwise :(\n          await clearTerminal()\n          goToNextStep()\n        }\n      }\n    },\n    { isActive: !showModelSelector },\n  )\n\n  // Define all onboarding steps\n  const themeStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Text>Let&apos;s get started.</Text>\n      <Box flexDirection=\"column\">\n        <Text bold>Choose the option that looks best when you select it:</Text>\n        <Text color={SEMANTIC_COLORS.dim}>\n          To change this later, run /config\n        </Text>\n      </Box>\n      <Select\n        options={[\n          { label: 'Light text', value: 'dark' },\n          { label: 'Dark text', value: 'light' },\n          {\n            label: 'Light text (colorblind-friendly)',\n            value: 'dark-daltonized',\n          },\n          {\n            label: 'Dark text (colorblind-friendly)',\n            value: 'light-daltonized',\n          },\n        ]}\n        onFocus={handleThemePreview}\n        onChange={handleThemeSelection}\n      />\n      <Box flexDirection=\"column\">\n        <Box\n          paddingLeft={1}\n          marginRight={1}\n          borderStyle=\"round\"\n          borderColor={SEMANTIC_COLORS.dim}\n          flexDirection=\"column\"\n        >\n          <StructuredDiff\n            patch={{\n              oldStart: 1,\n              newStart: 1,\n              oldLines: 3,\n              newLines: 3,\n              lines: [\n                'function greet() {',\n                '-  console.log(\"Hello, World!\");',\n                '+  console.log(\"Hello, anon!\");',\n                '}',\n              ],\n            }}\n            dim={false}\n            width={40}\n            overrideTheme={selectedTheme}\n          />\n        </Box>\n      </Box>\n    </Box>\n  )\n\n  const providersStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Box flexDirection=\"column\" width={70}>\n        <Text color={theme.secondaryText}>\n          Next, let's select your preferred AI provider and model.\n        </Text>\n      </Box>\n      <ModelSelector\n        onDone={handleProviderSelectionDone}\n        skipModelType={true}\n        isOnboarding={true}\n      />\n    </Box>\n  )\n\n  const usageStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Text bold>Using {PRODUCT_NAME} effectively:</Text>\n      <Box flexDirection=\"column\" width={70}>\n        <OrderedList children={[]}>\n          <OrderedList.Item children={[]}>\n            <Text>\n              Start in your project directory\n              <Newline />\n              <Text color={theme.secondaryText}>\n                Files are automatically added to context when needed.\n              </Text>\n              <Newline />\n            </Text>\n          </OrderedList.Item>\n          <OrderedList.Item children={[]}>\n            <Text>\n              Use {PRODUCT_NAME} as a development partner\n              <Newline />\n              <Text color={theme.secondaryText}>\n                Get help with file analysis, editing, bash commands,\n                <Newline />\n                and git history.\n                <Newline />\n              </Text>\n            </Text>\n          </OrderedList.Item>\n          <OrderedList.Item children={[]}>\n            <Text>\n              Provide clear context\n              <Newline />\n              <Text color={theme.secondaryText}>\n                Be as specific as you would with another engineer. <Newline />\n                The better the context, the better the results. <Newline />\n              </Text>\n            </Text>\n          </OrderedList.Item>\n        </OrderedList>\n      </Box>\n      <PressEnterToContinue />\n    </Box>\n  )\n\n  const modelStep = (\n    <Box flexDirection=\"column\" gap={1} paddingLeft={1}>\n      <Text bold>Configure your models:</Text>\n      <Box flexDirection=\"column\" width={70}>\n        <Text>\n          You can customize which models {PRODUCT_NAME} uses for different\n          tasks.\n          <Newline />\n          <Text color={theme.secondaryText}>\n            Let's set up your preferred models for large and small tasks.\n          </Text>\n        </Text>\n        <Box marginTop={1}>\n          <Text>\n            Press <Text color={theme.suggestion}>Enter</Text> to continue to the\n            model selection screen.\n          </Text>\n        </Box>\n      </Box>\n      <PressEnterToContinue />\n    </Box>\n  )\n\n  const steps: OnboardingStep[] = []\n  steps.push({ id: 'theme', component: themeStep })\n  steps.push({ id: 'usage', component: usageStep })\n\n  steps.push({ id: 'model', component: modelStep })\n\n  // If we're showing the model selector screen, render it directly\n  if (showModelSelector) {\n    return (\n      <ModelSelector\n        onDone={handleModelSelectionDone}\n        skipModelType={true}\n        isOnboarding={true}\n      />\n    )\n  }\n\n  return (\n    <Box flexDirection=\"column\" gap={1}>\n      <>\n        <Box flexDirection=\"column\" gap={1}>\n          <Text bold>\n            {PRODUCT_NAME}{' '}\n            {exitState.pending\n              ? `(press ${exitState.keyName} again to exit)`\n              : ''}\n          </Text>\n          {steps[currentStepIndex]?.component}\n        </Box>\n      </>\n    </Box>\n  )\n}\n\nexport function WelcomeBox(): React.ReactNode {\n  const theme = getTheme()\n  return (\n    <Box\n      borderColor={theme.minto}\n      borderStyle=\"round\"\n      paddingX={1}\n      width={MIN_LOGO_WIDTH}\n    >\n      <Text>\n        <Text color={theme.minto}>\u273B</Text> Welcome to{' '}\n        <Text bold>{PRODUCT_NAME}</Text> research preview!\n      </Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/OperationSummary.js

@@ -0,0 +1,130 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
+const Section = memo(function Section2({
+  icon,
+  title,
+  count,
+  hint,
+  children
+}) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, icon, " "), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, title), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.brand }, " ", count), hint && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " (", hint, ")")), children);
+});
+const FileList = memo(function FileList2({ files, maxToShow }) {
+  const displayFiles = files.slice(0, maxToShow);
+  const remaining = files.length - maxToShow;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, displayFiles.map((file, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `${file}-${idx}` }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, formatFilePath(file)))), remaining > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "...and ", remaining, " more"));
+});
+const ModifiedFileList = memo(function ModifiedFileList2({
+  files,
+  maxToShow
+}) {
+  const displayFiles = files.slice(0, maxToShow);
+  const remaining = files.length - maxToShow;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, displayFiles.map((file, idx) => /* @__PURE__ */ React.createElement(Box, { key: `${file.path}-${idx}`, flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, formatFilePath(file.path), " "), (file.added > 0 || file.removed > 0) && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "(", file.added > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.success }, "+", file.added), file.added > 0 && file.removed > 0 && /* @__PURE__ */ React.createElement(Text, null, "/"), file.removed > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.error }, "-", file.removed), ")"))), remaining > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "...and ", remaining, " more"));
+});
+const CommandList = memo(function CommandList2({
+  commands,
+  maxToShow
+}) {
+  const displayCommands = commands.slice(0, maxToShow);
+  const remaining = commands.length - maxToShow;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, displayCommands.map((cmd, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `cmd-${idx}` }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, truncateCommand(cmd, 60)))), remaining > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "...and ", remaining, " more"));
+});
+function formatFilePath(filePath) {
+  const parts = filePath.split("/");
+  if (parts.length <= 2) return filePath;
+  return ".../" + parts.slice(-2).join("/");
+}
+function truncateCommand(command, maxLength) {
+  const normalized = command.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) return normalized;
+  return normalized.slice(0, maxLength - 1) + "...";
+}
+function hasSummaryContent(summary) {
+  return summary.filesRead.length > 0 || summary.filesModified.length > 0 || summary.filesCreated.length > 0 || summary.commandsRun.length > 0 || summary.tasksCompleted > 0 || summary.webSearches > 0;
+}
+const OperationSummary = memo(function OperationSummary2({
+  summary,
+  showUndo = false,
+  maxFilesToShow = 3,
+  maxCommandsToShow = 5
+}) {
+  if (!hasSummaryContent(summary)) {
+    return null;
+  }
+  const totalModifiedStats = summary.filesModified.reduce(
+    (acc, file) => ({
+      added: acc.added + file.added,
+      removed: acc.removed + file.removed
+    }),
+    { added: 0, removed: 0 }
+  );
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.brand, bold: true }, "Session Summary"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, summary.filesRead.length > 0 && /* @__PURE__ */ React.createElement(
+    Section,
+    {
+      icon: "[read]",
+      title: "Files read:",
+      count: summary.filesRead.length
+    },
+    /* @__PURE__ */ React.createElement(FileList, { files: summary.filesRead, maxToShow: maxFilesToShow })
+  ), summary.filesModified.length > 0 && /* @__PURE__ */ React.createElement(
+    Section,
+    {
+      icon: "[edit]",
+      title: "Files modified:",
+      count: summary.filesModified.length,
+      hint: showUndo ? `/undo to revert${totalModifiedStats.added > 0 || totalModifiedStats.removed > 0 ? ` | +${totalModifiedStats.added}/-${totalModifiedStats.removed}` : ""}` : totalModifiedStats.added > 0 || totalModifiedStats.removed > 0 ? `+${totalModifiedStats.added}/-${totalModifiedStats.removed}` : void 0
+    },
+    /* @__PURE__ */ React.createElement(
+      ModifiedFileList,
+      {
+        files: summary.filesModified,
+        maxToShow: maxFilesToShow
+      }
+    )
+  ), summary.filesCreated.length > 0 && /* @__PURE__ */ React.createElement(
+    Section,
+    {
+      icon: "[new]",
+      title: "Files created:",
+      count: summary.filesCreated.length
+    },
+    /* @__PURE__ */ React.createElement(FileList, { files: summary.filesCreated, maxToShow: maxFilesToShow })
+  ), summary.commandsRun.length > 0 && /* @__PURE__ */ React.createElement(
+    Section,
+    {
+      icon: "[cmd]",
+      title: "Commands run:",
+      count: summary.commandsRun.length
+    },
+    /* @__PURE__ */ React.createElement(
+      CommandList,
+      {
+        commands: summary.commandsRun,
+        maxToShow: maxCommandsToShow
+      }
+    )
+  ), summary.tasksCompleted > 0 && /* @__PURE__ */ React.createElement(
+    Section,
+    {
+      icon: "[task]",
+      title: "Tasks completed:",
+      count: summary.tasksCompleted
+    }
+  ), summary.webSearches > 0 && /* @__PURE__ */ React.createElement(
+    Section,
+    {
+      icon: "[web]",
+      title: "Web searches:",
+      count: summary.webSearches
+    }
+  )));
+});
+var OperationSummary_default = OperationSummary;
+export {
+  OperationSummary,
+  OperationSummary_default as default
+};
+//# sourceMappingURL=OperationSummary.js.map

package/dist/components/OperationSummary.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/OperationSummary.tsx"],
+  "sourcesContent": ["/**\n * Operation Summary Component\n *\n * Displays a summary of operations performed during a session.\n * Shows files read, modified, created, and commands run in a compact format.\n *\n * Usage:\n * ```tsx\n * import { OperationSummary } from '@components/OperationSummary'\n * import { getOperationSummary } from '@core/operationTracker'\n *\n * const summary = getOperationSummary()\n * <OperationSummary summary={summary} showUndo={true} />\n * ```\n */\n\nimport React, { memo } from 'react'\nimport { Box, Text } from 'ink'\nimport { SEMANTIC_COLORS } from '@constants/colors'\nimport type { OperationSummary as OperationSummaryType } from '@core/operationTracker'\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface OperationSummaryProps {\n  /** Aggregated summary of operations */\n  summary: OperationSummaryType\n\n  /** Show /undo hint when true (for file modifications) */\n  showUndo?: boolean\n\n  /** Maximum number of files to show in each category */\n  maxFilesToShow?: number\n\n  /** Maximum number of commands to show */\n  maxCommandsToShow?: number\n}\n\n// ============================================================================\n// Helper Components\n// ============================================================================\n\ninterface SectionProps {\n  icon: string\n  title: string\n  count: number\n  hint?: string\n  children?: React.ReactNode\n}\n\n/**\n * Section header with icon, title, count, and optional hint\n */\nconst Section = memo(function Section({\n  icon,\n  title,\n  count,\n  hint,\n  children,\n}: SectionProps) {\n  if (count === 0) return null\n\n  return (\n    <Box flexDirection=\"column\">\n      <Box flexDirection=\"row\">\n        <Text color={SEMANTIC_COLORS.secondary}>{icon} </Text>\n        <Text color={SEMANTIC_COLORS.secondary}>{title}</Text>\n        <Text color={SEMANTIC_COLORS.brand}> {count}</Text>\n        {hint && <Text color={SEMANTIC_COLORS.muted}> ({hint})</Text>}\n      </Box>\n      {children}\n    </Box>\n  )\n})\n\ninterface FileListProps {\n  files: string[]\n  maxToShow: number\n}\n\n/**\n * List of file paths with truncation\n */\nconst FileList = memo(function FileList({ files, maxToShow }: FileListProps) {\n  const displayFiles = files.slice(0, maxToShow)\n  const remaining = files.length - maxToShow\n\n  return (\n    <Box flexDirection=\"column\" paddingLeft={2}>\n      {displayFiles.map((file, idx) => (\n        <React.Fragment key={`${file}-${idx}`}>\n          <Text color={SEMANTIC_COLORS.dim}>{formatFilePath(file)}</Text>\n        </React.Fragment>\n      ))}\n      {remaining > 0 && (\n        <Text color={SEMANTIC_COLORS.muted}>...and {remaining} more</Text>\n      )}\n    </Box>\n  )\n})\n\ninterface ModifiedFileListProps {\n  files: { path: string; added: number; removed: number }[]\n  maxToShow: number\n}\n\n/**\n * List of modified files with +added/-removed stats\n */\nconst ModifiedFileList = memo(function ModifiedFileList({\n  files,\n  maxToShow,\n}: ModifiedFileListProps) {\n  const displayFiles = files.slice(0, maxToShow)\n  const remaining = files.length - maxToShow\n\n  return (\n    <Box flexDirection=\"column\" paddingLeft={2}>\n      {displayFiles.map((file, idx) => (\n        <Box key={`${file.path}-${idx}`} flexDirection=\"row\">\n          <Text color={SEMANTIC_COLORS.dim}>{formatFilePath(file.path)} </Text>\n          {(file.added > 0 || file.removed > 0) && (\n            <Text color={SEMANTIC_COLORS.muted}>\n              (\n              {file.added > 0 && (\n                <Text color={SEMANTIC_COLORS.success}>+{file.added}</Text>\n              )}\n              {file.added > 0 && file.removed > 0 && <Text>/</Text>}\n              {file.removed > 0 && (\n                <Text color={SEMANTIC_COLORS.error}>-{file.removed}</Text>\n              )}\n              )\n            </Text>\n          )}\n        </Box>\n      ))}\n      {remaining > 0 && (\n        <Text color={SEMANTIC_COLORS.muted}>...and {remaining} more</Text>\n      )}\n    </Box>\n  )\n})\n\ninterface CommandListProps {\n  commands: string[]\n  maxToShow: number\n}\n\n/**\n * List of commands with truncation\n */\nconst CommandList = memo(function CommandList({\n  commands,\n  maxToShow,\n}: CommandListProps) {\n  const displayCommands = commands.slice(0, maxToShow)\n  const remaining = commands.length - maxToShow\n\n  return (\n    <Box flexDirection=\"column\" paddingLeft={2}>\n      {displayCommands.map((cmd, idx) => (\n        <React.Fragment key={`cmd-${idx}`}>\n          <Text color={SEMANTIC_COLORS.dim}>{truncateCommand(cmd, 60)}</Text>\n        </React.Fragment>\n      ))}\n      {remaining > 0 && (\n        <Text color={SEMANTIC_COLORS.muted}>...and {remaining} more</Text>\n      )}\n    </Box>\n  )\n})\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Format a file path for display\n * Shows only the last 2 path components for brevity\n */\nfunction formatFilePath(filePath: string): string {\n  const parts = filePath.split('/')\n  if (parts.length <= 2) return filePath\n  return '.../' + parts.slice(-2).join('/')\n}\n\n/**\n * Truncate a command string for display\n */\nfunction truncateCommand(command: string, maxLength: number): string {\n  // Remove newlines and normalize whitespace\n  const normalized = command.replace(/\\s+/g, ' ').trim()\n  if (normalized.length <= maxLength) return normalized\n  return normalized.slice(0, maxLength - 1) + '...'\n}\n\n/**\n * Check if summary has any operations\n */\nfunction hasSummaryContent(summary: OperationSummaryType): boolean {\n  return (\n    summary.filesRead.length > 0 ||\n    summary.filesModified.length > 0 ||\n    summary.filesCreated.length > 0 ||\n    summary.commandsRun.length > 0 ||\n    summary.tasksCompleted > 0 ||\n    summary.webSearches > 0\n  )\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * Operation Summary Component\n *\n * Displays a compact summary of all operations performed during a session.\n */\nexport const OperationSummary = memo(function OperationSummary({\n  summary,\n  showUndo = false,\n  maxFilesToShow = 3,\n  maxCommandsToShow = 5,\n}: OperationSummaryProps) {\n  // Don't render if no operations\n  if (!hasSummaryContent(summary)) {\n    return null\n  }\n\n  const totalModifiedStats = summary.filesModified.reduce(\n    (acc, file) => ({\n      added: acc.added + file.added,\n      removed: acc.removed + file.removed,\n    }),\n    { added: 0, removed: 0 },\n  )\n\n  return (\n    <Box flexDirection=\"column\" marginTop={1}>\n      {/* Header */}\n      <Text color={SEMANTIC_COLORS.brand} bold>\n        Session Summary\n      </Text>\n\n      <Box flexDirection=\"column\" marginTop={1}>\n        {/* Files Read */}\n        {summary.filesRead.length > 0 && (\n          <Section\n            icon=\"[read]\"\n            title=\"Files read:\"\n            count={summary.filesRead.length}\n          >\n            <FileList files={summary.filesRead} maxToShow={maxFilesToShow} />\n          </Section>\n        )}\n\n        {/* Files Modified */}\n        {summary.filesModified.length > 0 && (\n          <Section\n            icon=\"[edit]\"\n            title=\"Files modified:\"\n            count={summary.filesModified.length}\n            hint={\n              showUndo\n                ? `/undo to revert${totalModifiedStats.added > 0 || totalModifiedStats.removed > 0 ? ` | +${totalModifiedStats.added}/-${totalModifiedStats.removed}` : ''}`\n                : totalModifiedStats.added > 0 || totalModifiedStats.removed > 0\n                  ? `+${totalModifiedStats.added}/-${totalModifiedStats.removed}`\n                  : undefined\n            }\n          >\n            <ModifiedFileList\n              files={summary.filesModified}\n              maxToShow={maxFilesToShow}\n            />\n          </Section>\n        )}\n\n        {/* Files Created */}\n        {summary.filesCreated.length > 0 && (\n          <Section\n            icon=\"[new]\"\n            title=\"Files created:\"\n            count={summary.filesCreated.length}\n          >\n            <FileList files={summary.filesCreated} maxToShow={maxFilesToShow} />\n          </Section>\n        )}\n\n        {/* Commands Run */}\n        {summary.commandsRun.length > 0 && (\n          <Section\n            icon=\"[cmd]\"\n            title=\"Commands run:\"\n            count={summary.commandsRun.length}\n          >\n            <CommandList\n              commands={summary.commandsRun}\n              maxToShow={maxCommandsToShow}\n            />\n          </Section>\n        )}\n\n        {/* Tasks Completed */}\n        {summary.tasksCompleted > 0 && (\n          <Section\n            icon=\"[task]\"\n            title=\"Tasks completed:\"\n            count={summary.tasksCompleted}\n          />\n        )}\n\n        {/* Web Searches */}\n        {summary.webSearches > 0 && (\n          <Section\n            icon=\"[web]\"\n            title=\"Web searches:\"\n            count={summary.webSearches}\n          />\n        )}\n      </Box>\n    </Box>\n  )\n})\n\nexport default OperationSummary\n"],
+  "mappings": "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",
+  "names": ["Section", "FileList", "ModifiedFileList", "CommandList", "OperationSummary"]
+}

package/dist/components/ProgressBar.js

@@ -0,0 +1,74 @@
+import { Box, Text } from "ink";
+import * as React from "react";
+import { useRef } from "react";
+import { getTheme } from "../utils/theme.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
+function ProgressBar({
+  progress,
+  width = 20,
+  showPercent = true,
+  label,
+  indeterminate = false,
+  filledChar = "\u2588",
+  emptyChar = "\u2591",
+  filledColor,
+  emptyColor
+}) {
+  const theme = getTheme();
+  const startTimeRef = useRef(Date.now());
+  const { spinnerFrame } = useUnifiedAnimation({
+    enabled: indeterminate,
+    startTime: startTimeRef.current,
+    spinnerFrameCount: width * 2,
+    componentId: "progress-bar"
+  });
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  if (indeterminate) {
+    const segmentWidth = Math.ceil(width / 4);
+    const effectivePos = spinnerFrame < width ? spinnerFrame : width * 2 - spinnerFrame - segmentWidth;
+    const beforeSegment = Math.max(0, effectivePos);
+    const afterSegment = Math.max(0, width - effectivePos - segmentWidth);
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, label && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, label, " "), /* @__PURE__ */ React.createElement(Text, { color: emptyColor || theme.dimmedText }, emptyChar.repeat(beforeSegment)), /* @__PURE__ */ React.createElement(Text, { color: filledColor || theme.minto }, filledChar.repeat(Math.min(segmentWidth, width - beforeSegment))), /* @__PURE__ */ React.createElement(Text, { color: emptyColor || theme.dimmedText }, emptyChar.repeat(afterSegment)));
+  }
+  const filled = Math.round(clampedProgress / 100 * width);
+  const empty = width - filled;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, label && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, label, " "), /* @__PURE__ */ React.createElement(Text, { color: filledColor || theme.success }, filledChar.repeat(filled)), /* @__PURE__ */ React.createElement(Text, { color: emptyColor || theme.dimmedText }, emptyChar.repeat(empty)), showPercent && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, " ", Math.round(clampedProgress), "%"));
+}
+function ProgressIndicator({
+  progress,
+  showText = true
+}) {
+  const theme = getTheme();
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  const getIndicator = () => {
+    if (clampedProgress < 25) return "\u25CB";
+    if (clampedProgress < 50) return "\u25D4";
+    if (clampedProgress < 75) return "\u25D1";
+    if (clampedProgress < 100) return "\u25D5";
+    return "\u25CF";
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: theme.minto }, getIndicator()), showText && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, " ", Math.round(clampedProgress), "%"));
+}
+function StepProgress({
+  current,
+  total,
+  labels,
+  showLabels = true
+}) {
+  const theme = getTheme();
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, Array.from({ length: total }, (_, i) => {
+    const stepNum = i + 1;
+    const isComplete = stepNum < current;
+    const isCurrent = stepNum === current;
+    const label = labels?.[i];
+    const color = isComplete ? theme.success : isCurrent ? theme.minto : theme.dimmedText;
+    const symbol = isComplete ? "\u25CF" : isCurrent ? "\u25D0" : "\u25CB";
+    return /* @__PURE__ */ React.createElement(Box, { key: i, flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color }, symbol), showLabels && label && /* @__PURE__ */ React.createElement(Text, { color }, " ", label), i < total - 1 && /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " \u2192 "));
+  }));
+}
+export {
+  ProgressBar,
+  ProgressIndicator,
+  StepProgress
+};
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/ProgressBar.tsx"],
+  "sourcesContent": ["/**\n * ProgressBar - Visual progress indicator for long-running operations\n *\n * Displays progress as a horizontal bar with optional percentage:\n *\n * \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591 45%\n *\n * Features:\n * - Configurable width and style\n * - Optional percentage display\n * - Theme-aware colors\n * - Indeterminate mode with animation\n * - Uses unified animation manager to reduce screen flickering\n */\n\nimport { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { useUnifiedAnimation } from '@utils/animationManager'\n\nexport interface ProgressBarProps {\n  /** Progress value (0-100) */\n  progress: number\n  /** Bar width in characters (default: 20) */\n  width?: number\n  /** Show percentage text (default: true) */\n  showPercent?: boolean\n  /** Label text to show before the bar */\n  label?: string\n  /** Indeterminate mode - shows animated bouncing bar */\n  indeterminate?: boolean\n  /** Custom filled character (default: \u2588) */\n  filledChar?: string\n  /** Custom empty character (default: \u2591) */\n  emptyChar?: string\n  /** Color override for filled portion */\n  filledColor?: string\n  /** Color override for empty portion */\n  emptyColor?: string\n}\n\n/**\n * ProgressBar component for displaying operation progress\n *\n * Usage:\n * ```tsx\n * // Basic usage\n * <ProgressBar progress={45} />\n *\n * // With label\n * <ProgressBar progress={75} label=\"Downloading\" />\n *\n * // Indeterminate (unknown progress)\n * <ProgressBar indeterminate />\n *\n * // Custom styling\n * <ProgressBar progress={60} width={30} filledChar=\"\u2593\" emptyChar=\"\u2591\" />\n * ```\n */\nexport function ProgressBar({\n  progress,\n  width = 20,\n  showPercent = true,\n  label,\n  indeterminate = false,\n  filledChar = '\u2588',\n  emptyChar = '\u2591',\n  filledColor,\n  emptyColor,\n}: ProgressBarProps): React.ReactElement {\n  const theme = getTheme()\n  const startTimeRef = useRef(Date.now())\n\n  // Use unified animation manager for indeterminate mode\n  // spinnerFrameCount = width * 2 for bouncing animation\n  const { spinnerFrame } = useUnifiedAnimation({\n    enabled: indeterminate,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: width * 2,\n    componentId: 'progress-bar',\n  })\n\n  // Calculate bar segments\n  const clampedProgress = Math.max(0, Math.min(100, progress))\n\n  if (indeterminate) {\n    // Indeterminate mode: bouncing segment\n    const segmentWidth = Math.ceil(width / 4)\n    const effectivePos =\n      spinnerFrame < width\n        ? spinnerFrame\n        : width * 2 - spinnerFrame - segmentWidth\n\n    const beforeSegment = Math.max(0, effectivePos)\n    const afterSegment = Math.max(0, width - effectivePos - segmentWidth)\n\n    return (\n      <Box flexDirection=\"row\">\n        {label && <Text color={theme.secondaryText}>{label} </Text>}\n        <Text color={emptyColor || theme.dimmedText}>\n          {emptyChar.repeat(beforeSegment)}\n        </Text>\n        <Text color={filledColor || theme.minto}>\n          {filledChar.repeat(Math.min(segmentWidth, width - beforeSegment))}\n        </Text>\n        <Text color={emptyColor || theme.dimmedText}>\n          {emptyChar.repeat(afterSegment)}\n        </Text>\n      </Box>\n    )\n  }\n\n  // Determinate mode: fixed progress bar\n  const filled = Math.round((clampedProgress / 100) * width)\n  const empty = width - filled\n\n  return (\n    <Box flexDirection=\"row\">\n      {label && <Text color={theme.secondaryText}>{label} </Text>}\n      <Text color={filledColor || theme.success}>\n        {filledChar.repeat(filled)}\n      </Text>\n      <Text color={emptyColor || theme.dimmedText}>\n        {emptyChar.repeat(empty)}\n      </Text>\n      {showPercent && (\n        <Text color={theme.secondaryText}> {Math.round(clampedProgress)}%</Text>\n      )}\n    </Box>\n  )\n}\n\n/**\n * Compact progress indicator for inline use\n * Shows just percentage or a small visual indicator\n */\nexport function ProgressIndicator({\n  progress,\n  showText = true,\n}: {\n  progress: number\n  showText?: boolean\n}): React.ReactElement {\n  const theme = getTheme()\n  const clampedProgress = Math.max(0, Math.min(100, progress))\n\n  // Visual indicator based on progress ranges\n  const getIndicator = () => {\n    if (clampedProgress < 25) return '\u25CB'\n    if (clampedProgress < 50) return '\u25D4'\n    if (clampedProgress < 75) return '\u25D1'\n    if (clampedProgress < 100) return '\u25D5'\n    return '\u25CF'\n  }\n\n  return (\n    <Box flexDirection=\"row\">\n      <Text color={theme.minto}>{getIndicator()}</Text>\n      {showText && (\n        <Text color={theme.secondaryText}> {Math.round(clampedProgress)}%</Text>\n      )}\n    </Box>\n  )\n}\n\n/**\n * Step progress indicator for multi-step operations\n *\n * Usage:\n * ```tsx\n * <StepProgress current={2} total={5} labels={['Parse', 'Analyze', 'Transform', 'Generate', 'Complete']} />\n * ```\n */\nexport function StepProgress({\n  current,\n  total,\n  labels,\n  showLabels = true,\n}: {\n  current: number\n  total: number\n  labels?: string[]\n  showLabels?: boolean\n}): React.ReactElement {\n  const theme = getTheme()\n\n  return (\n    <Box flexDirection=\"row\" gap={1}>\n      {Array.from({ length: total }, (_, i) => {\n        const stepNum = i + 1\n        const isComplete = stepNum < current\n        const isCurrent = stepNum === current\n        const label = labels?.[i]\n\n        const color = isComplete\n          ? theme.success\n          : isCurrent\n            ? theme.minto\n            : theme.dimmedText\n\n        const symbol = isComplete ? '\u25CF' : isCurrent ? '\u25D0' : '\u25CB'\n\n        return (\n          <Box key={i} flexDirection=\"row\">\n            <Text color={color}>{symbol}</Text>\n            {showLabels && label && <Text color={color}> {label}</Text>}\n            {i < total - 1 && <Text color={theme.dimmedText}> \u2192 </Text>}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}