Add Claude Code Session ID widget (#111)

* feat: Add Claude Session ID widget

* Add ClaudeSessionIdWidget to widget registry, add label, support raw mode, fix cross-platform issues by using session ID directly from statusline JSON

---------

Co-authored-by: Marty <[email protected]>
Co-authored-by: Matthew Breedlove <[email protected]>

Author: 3 people

src/utils/widgets.ts

@@ -26,7 +26,8 @@ const widgetRegistry = new Map<WidgetItemType, Widget>([
     ['terminal-width', new widgets.TerminalWidthWidget()],
     ['version', new widgets.VersionWidget()],
     ['custom-text', new widgets.CustomTextWidget()],
-    ['custom-command', new widgets.CustomCommandWidget()]
+    ['custom-command', new widgets.CustomCommandWidget()],
+    ['claude-session-id', new widgets.ClaudeSessionIdWidget()]
 ]);
 
 export function getWidget(type: WidgetItemType): Widget | null {
@@ -51,4 +52,4 @@ export function isKnownWidgetType(type: string): boolean {
     return widgetRegistry.has(type)
         || type === 'separator'
         || type === 'flex-separator';
-}
+}

src/widgets/ClaudeSessionId.ts

@@ -0,0 +1,31 @@
+import type { RenderContext } from '../types/RenderContext';
+import type { Settings } from '../types/Settings';
+import type {
+    Widget,
+    WidgetEditorDisplay,
+    WidgetItem
+} from '../types/Widget';
+
+export class ClaudeSessionIdWidget implements Widget {
+    getDefaultColor(): string { return 'cyan'; }
+    getDescription(): string { return 'Shows the current Claude Code session ID reported in status JSON'; }
+    getDisplayName(): string { return 'Claude Session ID'; }
+    getEditorDisplay(item: WidgetItem): WidgetEditorDisplay {
+        return { displayText: this.getDisplayName() };
+    }
+
+    render(item: WidgetItem, context: RenderContext, settings: Settings): string | null {
+        if (context.isPreview) {
+            return item.rawValue ? 'preview-session-id' : 'Session ID: preview-session-id';
+        } else {
+            const sessionId = context.data?.session_id;
+            if (!sessionId) {
+                return null;
+            }
+            return item.rawValue ? sessionId : `Session ID: ${sessionId}`;
+        }
+    }
+
+    supportsRawValue(): boolean { return true; }
+    supportsColors(item: WidgetItem): boolean { return true; }
+}

src/widgets/index.ts

@@ -17,4 +17,5 @@ export { VersionWidget } from './Version';
 export { CustomTextWidget } from './CustomText';
 export { CustomCommandWidget } from './CustomCommand';
 export { BlockTimerWidget } from './BlockTimer';
-export { CurrentWorkingDirWidget } from './CurrentWorkingDir';
+export { CurrentWorkingDirWidget } from './CurrentWorkingDir';
+export { ClaudeSessionIdWidget } from './ClaudeSessionId';