From d54790a8909d3707b07fc22008da669c8cded9a1 Mon Sep 17 00:00:00 2001
From: Matthew Breedlove <matt@revenite.ai>
Date: Fri, 8 Aug 2025 19:26:57 -0400
Subject: [PATCH] Adding multiple separator types

---
 package.json        |  2 +-
 src/ccstatusline.ts |  3 ++-
 src/config.ts       |  1 +
 src/tui.tsx         | 29 ++++++++++++++++++++++++-----
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 583ceb7..9b7e0a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ccstatusline",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A customizable status line formatter for Claude Code CLI",
   "module": "src/ccstatusline.ts",
   "type": "module",
diff --git a/src/ccstatusline.ts b/src/ccstatusline.ts
index 36474b3..83ed40b 100644
--- a/src/ccstatusline.ts
+++ b/src/ccstatusline.ts
@@ -404,7 +404,8 @@ function renderSingleLine(items: StatusItem[], settings: any, data: StatusJSON,
                 const lastElement = elements[elements.length - 1];
                 if (elements.length > 0 && lastElement && lastElement.type !== 'separator') {
                     const sepColor = (chalk as any)[settings.colors.separator] || chalk.dim;
-                    elements.push({ content: sepColor(' | '), type: 'separator' });
+                    const sepChar = item.character || '|';
+                    elements.push({ content: sepColor(` ${sepChar} `), type: 'separator' });
                 }
                 break;
 
diff --git a/src/config.ts b/src/config.ts
index 88b9d83..1bc8a1a 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -15,6 +15,7 @@ export interface StatusItem {
     id: string;
     type: StatusItemType;
     color?: string;
+    character?: string; // For separator and flex-separator types
 }
 
 export interface Settings {
diff --git a/src/tui.tsx b/src/tui.tsx
index 7b938d2..56f0785 100644
--- a/src/tui.tsx
+++ b/src/tui.tsx
@@ -109,7 +109,8 @@ const renderSingleLine = (items: StatusItem[], terminalWidth: number, widthDetec
                 elements.push(termColor(`Term: ${detectedWidth}`));
                 break;
             case 'separator':
-                elements.push(chalk.dim(' | '));
+                const sepChar = item.character || '|';
+                elements.push(chalk.dim(` ${sepChar} `));
                 break;
             case 'flex-separator':
                 elements.push('FLEX');
@@ -307,6 +308,7 @@ interface ItemsEditorProps {
 const ItemsEditor: React.FC<ItemsEditorProps> = ({ items, onUpdate, onBack, lineNumber }) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [moveMode, setMoveMode] = useState(false);
+    const separatorChars = ['|', '-', ' '];
 
     useInput((input, key) => {
         if (moveMode) {
@@ -406,6 +408,17 @@ const ItemsEditor: React.FC<ItemsEditorProps> = ({ items, onUpdate, onBack, line
                 // Clear entire line
                 onUpdate([]);
                 setSelectedIndex(0);
+            } else if (input === ' ' && items.length > 0) {
+                // Space key - cycle separator character for separator types only (not flex)
+                const currentItem = items[selectedIndex];
+                if (currentItem && currentItem.type === 'separator') {
+                    const currentChar = currentItem.character || '|';
+                    const currentCharIndex = separatorChars.indexOf(currentChar);
+                    const nextChar = separatorChars[(currentCharIndex + 1) % separatorChars.length];
+                    const newItems = [...items];
+                    newItems[selectedIndex] = { ...currentItem, character: nextChar };
+                    onUpdate(newItems);
+                }
             } else if (key.escape) {
                 onBack();
             }
@@ -420,10 +433,13 @@ const ItemsEditor: React.FC<ItemsEditorProps> = ({ items, onUpdate, onBack, line
                 return chalk.magenta('Git Branch');
             case 'git-changes':
                 return chalk.yellow('Git Changes');
-            case 'separator':
-                return chalk.dim('Separator |');
+            case 'separator': {
+                const char = item.character || '|';
+                const charDisplay = char === ' ' ? '(space)' : char;
+                return chalk.dim(`Separator ${charDisplay}`);
+            }
             case 'flex-separator':
-                return chalk.yellow('Flex Separator ─────');
+                return chalk.yellow('Flex Separator');
             case 'tokens-input':
                 return chalk.yellow('Tokens Input');
             case 'tokens-output':
@@ -452,7 +468,7 @@ const ItemsEditor: React.FC<ItemsEditorProps> = ({ items, onUpdate, onBack, line
             {moveMode ? (
                 <Text dimColor>↑↓ to move item, ESC or Enter to exit move mode</Text>
             ) : (
-                <Text dimColor>↑↓ select, ←→ change type, Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line, ESC back</Text>
+                <Text dimColor>↑↓ select, ←→ change type, Space edit separator, Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line, ESC back</Text>
             )}
             {hasFlexSeparator && !widthDetectionAvailable && (
                 <Box marginTop={1}>
@@ -469,6 +485,9 @@ const ItemsEditor: React.FC<ItemsEditorProps> = ({ items, onUpdate, onBack, line
                             <Text color={index === selectedIndex ? (moveMode ? 'yellow' : 'green') : undefined}>
                                 {index === selectedIndex ? (moveMode ? '◆ ' : '▶ ') : '  '}
                                 {index + 1}. {getItemDisplay(item)}
+                                {item.type === 'separator' && index === selectedIndex && !moveMode && (
+                                    <Text dimColor> (Space to edit)</Text>
+                                )}
                             </Text>
                         </Box>
                     ))