nyatinte
diff --git a/‎src/App.tsx‎
Lines changed: 30 additions & 7 deletions b/‎src/App.tsx‎
Lines changed: 30 additions & 7 deletions
diff --git a/‎src/_types.ts‎
Lines changed: 8 additions & 0 deletions b/‎src/_types.ts‎
Lines changed: 8 additions & 0 deletions
diff --git a/‎src/components/FileList/FileItem.tsx‎
Lines changed: 10 additions & 16 deletions b/‎src/components/FileList/FileItem.tsx‎
Lines changed: 10 additions & 16 deletions
@@ -1,6 +1,7 @@
 import { StatusMessage } from '@inkjs/ui';
 import { Box, Text } from 'ink';
 import type React from 'react';
+import { useMemo } from 'react';
 import type { CliOptions } from './_types.js';
 import { ErrorBoundary } from './components/ErrorBoundary.js';
 import { FileList } from './components/FileList/index.js';
@@ -14,6 +15,18 @@ type AppProps = {
   readonly cliOptions: CliOptions;
 };
 
+const SPLIT_PANE_WIDTH = {
+  LEFT: 40,
+  MIN_LEFT: 35,
+  MAX_LEFT: 60,
+} as const;
+
+const SPLIT_PANE_WIDTH_TEST = {
+  LEFT: 60,
+  MIN_LEFT: 25,
+  MAX_LEFT: 80,
+} as const;
+
 export function App({ cliOptions }: AppProps): React.JSX.Element {
   const {
     files,
@@ -25,7 +38,19 @@ export function App({ cliOptions }: AppProps): React.JSX.Element {
     toggleGroup,
   } = useFileNavigation({ path: cliOptions.path });
 
-  // Error state
+  const splitPaneConfig = useMemo(() => {
+    const config =
+      typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
+        ? SPLIT_PANE_WIDTH_TEST
+        : SPLIT_PANE_WIDTH;
+    return {
+      leftWidth: config.LEFT,
+      minLeftWidth: config.MIN_LEFT,
+      maxLeftWidth: config.MAX_LEFT,
+      dynamicWidth: true,
+    };
+  }, []);
+
   if (error) {
     return (
       <Box flexDirection="column" padding={1}>
@@ -35,12 +60,10 @@ export function App({ cliOptions }: AppProps): React.JSX.Element {
     );
   }
 
-  // Loading state
   if (isLoading) {
     return <LoadingScreen />;
   }
 
-  // When no files found
   if (files.length === 0) {
     return (
       <Box
@@ -58,19 +81,16 @@ export function App({ cliOptions }: AppProps): React.JSX.Element {
     );
   }
 
-  // Main UI
   return (
     <ErrorBoundary>
       <Box flexDirection="column" width="100%" height="100%">
-        {/* Header */}
         <Box paddingX={1} paddingY={0} borderStyle="single" borderBottom={true}>
           <Text bold color={theme.ui.appTitle}>
             ccexp
           </Text>
           <Text dimColor> | Interactive File Browser</Text>
         </Box>
 
-        {/* Main content */}
         <Box flexGrow={1}>
           <SplitPane
             left={
@@ -89,7 +109,10 @@ export function App({ cliOptions }: AppProps): React.JSX.Element {
                 <Preview file={selectedFile} />
               </ErrorBoundary>
             }
-            leftWidth={40} // 40% : 60% ratio
+            leftWidth={splitPaneConfig.leftWidth}
+            minLeftWidth={splitPaneConfig.minLeftWidth}
+            maxLeftWidth={splitPaneConfig.maxLeftWidth}
+            dynamicWidth={splitPaneConfig.dynamicWidth}
           />
         </Box>
       </Box>
 
@@ -67,6 +67,14 @@ export type FileGroup = {
   readonly isExpanded: boolean;
 };
 
+export type FlatItem =
+  | { readonly type: 'group'; readonly groupIndex: number }
+  | {
+      readonly type: 'file';
+      readonly groupIndex: number;
+      readonly fileIndex: number;
+    };
+
 // Output formats
 
 // CLI argument types
 
@@ -17,7 +17,6 @@ export const FileItem = React.memo(function FileItem({
   isSelected,
   isFocused,
 }: FileItemProps): React.JSX.Element {
-  // File type badge color and label
   const getFileBadge = (file: ClaudeFileInfo) => {
     return match(file.type)
       .with('claude-md', () => ({
@@ -43,7 +42,6 @@ export const FileItem = React.memo(function FileItem({
       .exhaustive();
   };
 
-  // File type icon
   const getFileIcon = (file: ClaudeFileInfo): string => {
     return match(file.type)
       .with('claude-md', () => '📝')
@@ -54,48 +52,44 @@ export const FileItem = React.memo(function FileItem({
       .exhaustive();
   };
 
-  // Get filename and parent directory
-  const fileName = basename(file.path);
+  const fileName = basename(file.path).replace(/\t/g, ' ');
   const dirPath = dirname(file.path);
   const parentDir = basename(dirPath);
 
-  // Display name (including parent directory)
-  // Special handling for home directory
-  const displayName =
-    file.type === 'global-md'
-      ? `~/.claude/${fileName}`
-      : file.type === 'slash-command'
-        ? fileName.replace('.md', '') // Remove .md for commands
-        : `${parentDir}/${fileName}`;
+  const displayName = match(file.type)
+    .with('global-md', () => `~/.claude/${fileName}`)
+    .with('slash-command', () => fileName.replace('.md', ''))
+    .otherwise(() => `${parentDir}/${fileName}`);
 
   const prefix = isFocused ? '► ' : '  ';
 
   const fileBadge = getFileBadge(file);
 
   return (
     <Box justifyContent="space-between" width="100%">
-      <Box>
+      <Box flexGrow={1} marginRight={1}>
         {isSelected ? (
           <Text
             backgroundColor={theme.selection.backgroundColor}
             color={theme.selection.color}
+            wrap="truncate-end"
           >
             {prefix}
             {getFileIcon(file)} {displayName}
           </Text>
         ) : isFocused ? (
-          <Text color={theme.ui.focus}>
+          <Text color={theme.ui.focus} wrap="truncate-end">
             {prefix}
             {getFileIcon(file)} {displayName}
           </Text>
         ) : (
-          <Text>
+          <Text wrap="truncate-end">
             {prefix}
             {getFileIcon(file)} {displayName}
           </Text>
         )}
       </Box>
-      <Box>
+      <Box flexShrink={0}>
         <Badge color={fileBadge.color}>{fileBadge.label}</Badge>
       </Box>
     </Box>