Fix for custom command edit / width / timeout keypresses not working

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstatusline",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A customizable status line formatter for Claude Code CLI",
   "module": "src/ccstatusline.ts",
   "type": "module",

src/tui/components/ItemsEditor.tsx

@@ -30,7 +30,7 @@ export interface ItemsEditorProps {
 export const ItemsEditor: React.FC<ItemsEditorProps> = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [moveMode, setMoveMode] = useState(false);
-    const [customEditorWidget, setCustomEditorWidget] = useState<{ widget: WidgetItem; impl: Widget } | null>(null);
+    const [customEditorWidget, setCustomEditorWidget] = useState<{ widget: WidgetItem; impl: Widget; action?: string } | null>(null);
     const separatorChars = ['|', '-', ',', ' '];
 
     // Determine which item types are allowed based on settings
@@ -278,14 +278,13 @@ export const ItemsEditor: React.FC<ItemsEditorProps> = ({ widgets, onUpdate, onB
                                         const newWidgets = [...widgets];
                                         newWidgets[selectedIndex] = updatedWidget;
                                         onUpdate(newWidgets);
+                                    } else if (widgetImpl.renderEditor) {
+                                        // If handleEditorAction returned null, open the editor
+                                        setCustomEditorWidget({ widget: currentWidget, impl: widgetImpl, action: matchedKeybind.action });
                                     }
                                 } else if (widgetImpl.renderEditor) {
-                                    // Set the action on the widget if it supports it
-                                    if (widgetImpl.setEditorAction) {
-                                        widgetImpl.setEditorAction(matchedKeybind.action);
-                                    }
-                                    // Open the widget's custom editor
-                                    setCustomEditorWidget({ widget: currentWidget, impl: widgetImpl });
+                                    // Open the widget's custom editor with the action
+                                    setCustomEditorWidget({ widget: currentWidget, impl: widgetImpl, action: matchedKeybind.action });
                                 }
                             }
                         }
@@ -364,7 +363,8 @@ export const ItemsEditor: React.FC<ItemsEditorProps> = ({ widgets, onUpdate, onB
         return customEditorWidget.impl.renderEditor({
             widget: customEditorWidget.widget,
             onComplete: handleEditorComplete,
-            onCancel: handleEditorCancel
+            onCancel: handleEditorCancel,
+            action: customEditorWidget.action
         });
     }
 

src/types/Widget.ts

@@ -40,7 +40,6 @@ export interface Widget {
     renderEditor?(props: WidgetEditorProps): React.ReactElement | null;
     supportsRawValue(): boolean;
     supportsColors(item: WidgetItem): boolean;
-    setEditorAction?(action: string): void;
     handleEditorAction?(action: string, item: WidgetItem): WidgetItem | null;
 }
 
@@ -48,6 +47,7 @@ export interface WidgetEditorProps {
     widget: WidgetItem;
     onComplete: (updatedWidget: WidgetItem) => void;
     onCancel: () => void;
+    action?: string;
 }
 
 export interface CustomKeybind {

src/widgets/CustomCommand.tsx

@@ -17,8 +17,6 @@ import type {
 } from '../types/Widget';
 
 export class CustomCommandWidget implements Widget {
-    private currentAction: string = 'edit-command';
-
     getDefaultColor(): string { return 'white'; }
     getDescription(): string { return 'Executes a custom shell command and displays output'; }
     getDisplayName(): string { return 'Custom Command'; }
@@ -46,10 +44,6 @@ export class CustomCommandWidget implements Widget {
         };
     }
 
-    setEditorAction(action: string): void {
-        this.currentAction = action;
-    }
-
     handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
         if (action === 'toggle-preserve') {
             return { ...item, preserveColors: !item.preserveColors };
@@ -119,7 +113,7 @@ export class CustomCommandWidget implements Widget {
     }
 
     renderEditor(props: WidgetEditorProps): React.ReactElement {
-        return <CustomCommandEditor {...props} action={this.currentAction} />;
+        return <CustomCommandEditor {...props} />;
     }
 
     supportsRawValue(): boolean { return false; }
@@ -131,7 +125,7 @@ export class CustomCommandWidget implements Widget {
 
 interface EditorMode { type: 'command' | 'width' | 'timeout' | null }
 
-const CustomCommandEditor: React.FC<WidgetEditorProps & { action: string }> = ({ widget, onComplete, onCancel, action }) => {
+const CustomCommandEditor: React.FC<WidgetEditorProps> = ({ widget, onComplete, onCancel, action }) => {
     const getMode = (): EditorMode['type'] => {
         switch (action) {
         case 'edit-command': return 'command';