llm-interceptor 2.2.0__tar.gz → 2.2.1__tar.gz

{llm_interceptor-2.2.0 → llm_interceptor-2.2.1}/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.1] - 2026-01-06
+
+### Added
+
+- **Configurable UI host/port** - Allow configuring the UI host and port
+
+### Fixed
+
+- **React hooks usage** - Avoid hooks in sessions map to prevent runtime errors
+
 ## [2.2.0] - 2026-01-05
 
 ### Added

{llm_interceptor-2.2.0 → llm_interceptor-2.2.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: llm-interceptor
-Version: 2.2.0
+Version: 2.2.1
 Summary: Intercept and analyze LLM traffic from AI coding tools
 Project-URL: Homepage, https://github.com/chouzz/llm-interceptor
 Project-URL: Documentation, https://github.com/chouzz/llm-interceptor#readme

{llm_interceptor-2.2.0 → llm_interceptor-2.2.1}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "llm-interceptor"
-version = "2.2.0"
+version = "2.2.1"
 description = "Intercept and analyze LLM traffic from AI coding tools"
 readme = "README.md"
 license = { text = "MIT" }

{llm_interceptor-2.2.0 → llm_interceptor-2.2.1}/src/cci/__init__.py

@@ -7,5 +7,5 @@ Note: The import package name `cci` is kept for backward compatibility.
 New code should prefer `llm_interceptor`.
 """
 
-__version__ = "2.2.0"
+__version__ = "2.2.1"
 __author__ = "LLM Interceptor Team"

{llm_interceptor-2.2.0 → llm_interceptor-2.2.1}/src/cci/cli.py

@@ -400,6 +400,19 @@ def stats(file: str) -> None:
     default=True,
     help="Launch the web UI (default: True)",
 )
+@click.option(
+    "--ui-host",
+    default="127.0.0.1",
+    show_default=True,
+    help="Host interface for the web UI (use 0.0.0.0 to expose on the network)",
+)
+@click.option(
+    "--ui-port",
+    default=8000,
+    show_default=True,
+    type=int,
+    help="Port for the web UI",
+)
 @click.pass_context
 def watch(
     ctx: click.Context,
@@ -408,6 +421,8 @@ def watch(
     include: tuple[str, ...],
     debug: bool,
     ui: bool,
+    ui_host: str,
+    ui_port: int,
 ) -> None:
     """
     Start watch mode for continuous session capture.
@@ -475,9 +490,6 @@ def watch(
     if ui:
         from cci.server import run_server
 
-        ui_host = "127.0.0.1"
-        ui_port = 8000  # TODO: Make configurable
-
         if _is_port_in_use(ui_host, ui_port):
             ui_url = f"http://{ui_host}:{ui_port}"
             console.print(
@@ -493,7 +505,7 @@ def watch(
             server_thread = threading.Thread(
                 target=run_server,
                 args=(watch_manager,),
-                kwargs={"port": ui_port},
+                kwargs={"host": ui_host, "port": ui_port},
                 daemon=True,
             )
             server_thread.start()

{llm_interceptor-2.2.0 → llm_interceptor-2.2.1}/ui/README.md

@@ -23,6 +23,11 @@ This UI is bundled with the `llm-interceptor` Python package.
     lli watch --include "*example.com*"
     ```
 
+    To expose the UI on your network:
+    ```bash
+    lli watch --ui-host 0.0.0.0 --ui-port 8000
+    ```
+
 2.  **Open the Dashboard**:
     The CLI will print a URL (usually `http://localhost:8000`). Click it to open the dashboard.
 

llm_interceptor-2.2.1/ui/src/components/layout/SessionsSidebar.tsx

@@ -0,0 +1,311 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Activity,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  FolderOpen,
+  MessageCircle,
+  Moon,
+  Pencil,
+  Sun,
+} from 'lucide-react';
+import type { AnnotationData, SessionSummary } from '../../types';
+import { formatTimestamp } from '../../utils';
+import { Tooltip } from '../common/Tooltip';
+
+export const SessionsSidebar: React.FC<{
+  width: number;
+  isCollapsed: boolean;
+  setIsCollapsed: (v: boolean) => void;
+  onStartResize: (e: React.MouseEvent) => void;
+
+  sessionList: SessionSummary[];
+  selectedSessionId: string | null;
+  onSelectSession: (sessionId: string) => void;
+
+  isDarkMode: boolean;
+  onToggleTheme: () => void;
+
+  annotations: Record<string, AnnotationData>;
+  onUpdateSessionNote: (sessionId: string, note: string) => void;
+}> = ({
+  width,
+  isCollapsed,
+  setIsCollapsed,
+  onStartResize,
+  sessionList,
+  selectedSessionId,
+  onSelectSession,
+  isDarkMode,
+  onToggleTheme,
+  annotations,
+  onUpdateSessionNote,
+}) => {
+  const [editingSessionNote, setEditingSessionNote] = useState<string | null>(null);
+
+  // Memoize callback functions
+  const handleToggleCollapse = useCallback(() => {
+    setIsCollapsed(!isCollapsed);
+  }, [isCollapsed, setIsCollapsed]);
+
+  // Memoize rendered sessions
+  const renderedSessions = useMemo(() => {
+    return sessionList.map((session) => {
+      const sessionNote = annotations[session.id]?.session_note || '';
+      const hasNote = sessionNote.length > 0;
+      const isEditing = editingSessionNote === session.id;
+      const isSelected = selectedSessionId === session.id;
+
+      return (
+        <SessionItem
+          key={session.id}
+          session={session}
+          isCollapsed={isCollapsed}
+          isSelected={isSelected}
+          isEditing={isEditing}
+          sessionNote={sessionNote}
+          hasNote={hasNote}
+          onSelectSession={onSelectSession}
+          onSetIsCollapsed={setIsCollapsed}
+          onSetEditingSessionNote={setEditingSessionNote}
+          onUpdateSessionNote={onUpdateSessionNote}
+        />
+      );
+    });
+  }, [
+    sessionList,
+    annotations,
+    editingSessionNote,
+    selectedSessionId,
+    isCollapsed,
+    onSelectSession,
+    setIsCollapsed,
+    onUpdateSessionNote,
+  ]);
+
+  return (
+    <div
+      style={{ width: isCollapsed ? '48px' : width }}
+      className="flex-shrink-0 border-r border-gray-200 dark:border-slate-800 bg-white dark:bg-[#0b1120] flex flex-col relative transition-all duration-300 ease-in-out"
+    >
+      {/* Sessions Header */}
+      <div
+        className={`p-4 border-b border-gray-200 dark:border-slate-800 flex items-center ${
+          isCollapsed ? 'justify-center flex-col gap-4' : 'justify-between'
+        }`}
+      >
+        {!isCollapsed && (
+          <div className="flex items-center gap-2">
+            <Activity size={18} className="text-blue-600 dark:text-blue-500" />
+            <h2 className="font-bold text-sm tracking-wide text-slate-700 dark:text-slate-200">
+              SESSIONS
+            </h2>
+          </div>
+        )}
+
+        <div className={`flex ${isCollapsed ? 'flex-col gap-3' : 'gap-1'}`}>
+          <button
+            onClick={handleToggleCollapse}
+            className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded text-slate-500 dark:text-slate-400 transition-colors"
+            title={isCollapsed ? 'Expand' : 'Collapse'}
+            type="button"
+          >
+            {isCollapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
+          </button>
+          {!isCollapsed && (
+            <button
+              onClick={onToggleTheme}
+              className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded text-slate-500 dark:text-slate-400 transition-colors"
+              title="Toggle Theme"
+              type="button"
+            >
+              {isDarkMode ? <Sun size={14} /> : <Moon size={14} />}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Sessions List */}
+      <div className="overflow-y-auto flex-1 p-2 space-y-1 custom-scrollbar">
+        {renderedSessions}
+      </div>
+
+      {/* Resizer Handle */}
+      {!isCollapsed && (
+        <div
+          className="absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-blue-500/50 transition-colors z-10 flex items-center justify-center group"
+          onMouseDown={onStartResize}
+        >
+          <div className="w-[1px] h-full bg-gray-200 dark:bg-slate-800 group-hover:bg-blue-500"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const SessionItem = React.memo<{
+  session: SessionSummary;
+  isCollapsed: boolean;
+  isSelected: boolean;
+  isEditing: boolean;
+  sessionNote: string;
+  hasNote: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onSetIsCollapsed: (collapsed: boolean) => void;
+  onSetEditingSessionNote: (sessionId: string | null) => void;
+  onUpdateSessionNote: (sessionId: string, note: string) => void;
+}>(({
+  session,
+  isCollapsed,
+  isSelected,
+  isEditing,
+  sessionNote,
+  hasNote,
+  onSelectSession,
+  onSetIsCollapsed,
+  onSetEditingSessionNote,
+  onUpdateSessionNote,
+}) => {
+  const handleSelectSession = useCallback(() => {
+    onSelectSession(session.id);
+    if (isCollapsed) onSetIsCollapsed(false);
+  }, [session.id, onSelectSession, isCollapsed, onSetIsCollapsed]);
+
+  const handleToggleEdit = useCallback(() => {
+    onSetEditingSessionNote(isEditing ? null : session.id);
+  }, [isEditing, session.id, onSetEditingSessionNote]);
+
+  const handleUpdateNote = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onUpdateSessionNote(session.id, e.target.value);
+  }, [session.id, onUpdateSessionNote]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Escape') {
+      onSetEditingSessionNote(null);
+    } else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSetEditingSessionNote(null);
+    }
+  }, [onSetEditingSessionNote]);
+
+  const handleSaveNote = useCallback(() => {
+    onSetEditingSessionNote(null);
+  }, [onSetEditingSessionNote]);
+
+  const handleEditNote = useCallback(() => {
+    onSetEditingSessionNote(session.id);
+  }, [session.id, onSetEditingSessionNote]);
+
+  return (
+    <div>
+      {/* Collapsed state */}
+      {isCollapsed ? (
+        <div
+          onClick={handleSelectSession}
+          className={`h-12 flex items-center justify-center cursor-pointer border-b border-gray-100 dark:border-slate-800/50 relative rounded-lg mb-1 ${
+            isSelected ? 'bg-blue-50 dark:bg-slate-800' : ''
+          }`}
+        >
+          <FolderOpen
+            size={20}
+            className={
+              isSelected
+                ? 'text-blue-600 dark:text-blue-400'
+                : 'text-slate-400 dark:text-slate-600'
+            }
+          />
+          {hasNote && <div className="absolute top-1 right-1 w-2 h-2 bg-amber-500 rounded-full"></div>}
+        </div>
+      ) : (
+        <div>
+          <div
+            onClick={handleSelectSession}
+            className={`px-3 py-3 border-b border-gray-100 dark:border-slate-800/50 cursor-pointer transition-colors group relative rounded-lg mb-1 ${
+              isSelected ? 'bg-blue-50 dark:bg-slate-800/80 shadow-md z-10' : 'hover:bg-gray-50 dark:hover:bg-slate-800/30'
+            }`}
+            title={session.id}
+          >
+            {/* Action Buttons (appear on hover) */}
+            <div className="absolute right-2 top-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20">
+              <button
+                onClick={(e) => { e.stopPropagation(); handleToggleEdit(); }}
+                className="p-1.5 bg-white dark:bg-slate-700 rounded shadow-sm hover:scale-110"
+                title="Edit note"
+                type="button"
+              >
+                <Pencil size={12} className="text-slate-500 dark:text-slate-300" />
+              </button>
+            </div>
+
+            {/* Selection indicator */}
+            {isSelected && (
+              <div className="absolute left-0 top-3 bottom-3 w-1 bg-blue-500 rounded-r-full"></div>
+            )}
+
+            <div className="flex items-center justify-between mb-1">
+              <div className="flex items-center gap-2">
+                <FolderOpen
+                  size={16}
+                  className={
+                    isSelected
+                      ? 'text-blue-600 dark:text-blue-400'
+                      : 'text-slate-400 dark:text-slate-600'
+                  }
+                />
+                <span className="font-semibold truncate max-w-[120px] text-slate-700 dark:text-slate-200" title={session.id}>
+                  {session.id.replace('session_', '')}
+                </span>
+              </div>
+              <div className="flex items-center gap-1 text-xs text-slate-400 dark:text-slate-500">
+                <span>{session.request_count}</span>
+                {hasNote && !isEditing && <MessageCircle size={10} className="text-amber-500" />}
+              </div>
+            </div>
+            <div className="text-xs text-slate-400 dark:text-slate-500">
+              {formatTimestamp(session.timestamp)}
+            </div>
+
+            {/* Note Section - inside the card */}
+            {!isEditing && hasNote && (
+              <Tooltip text={sessionNote}>
+                <div
+                  className="mt-2 px-2 py-1 text-[10px] text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/20 rounded border-l-2 border-amber-400 dark:border-amber-600 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-950/30 transition-colors truncate"
+                  onClick={(e) => { e.stopPropagation(); handleEditNote(); }}
+                  title="Click to edit"
+                >
+                  {sessionNote}
+                </div>
+              </Tooltip>
+            )}
+
+            {/* Note Editor - inside the card */}
+            {isEditing && (
+              <div className="mt-2 relative">
+                <textarea
+                  autoFocus
+                  value={sessionNote}
+                  onChange={handleUpdateNote}
+                  onKeyDown={handleKeyDown}
+                  onBlur={handleSaveNote}
+                  placeholder="Add a note..."
+                  className="w-full text-xs p-1.5 pr-6 border border-amber-300 dark:border-amber-700 rounded bg-amber-50 dark:bg-amber-950/30 text-slate-700 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500 resize-none focus:outline-none focus:ring-1 focus:ring-amber-400 dark:focus:ring-amber-600"
+                  rows={2}
+                  onClick={(e) => e.stopPropagation()}
+                />
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleSaveNote(); }}
+                  className="absolute top-1 right-1 p-0.5 hover:bg-amber-200 dark:hover:bg-amber-800 rounded text-amber-600 dark:text-amber-400"
+                  title="Done (Enter)"
+                  type="button"
+                >
+                  <Check size={10} />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

llm_interceptor-2.2.0/ui/src/components/layout/SessionsSidebar.tsx

@@ -1,271 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import {
-  Activity,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  FolderOpen,
-  MessageCircle,
-  Moon,
-  Pencil,
-  Sun,
-} from 'lucide-react';
-import type { AnnotationData, SessionSummary } from '../../types';
-import { formatTimestamp } from '../../utils';
-import { Tooltip } from '../common/Tooltip';
-
-export const SessionsSidebar: React.FC<{
-  width: number;
-  isCollapsed: boolean;
-  setIsCollapsed: (v: boolean) => void;
-  onStartResize: (e: React.MouseEvent) => void;
-
-  sessionList: SessionSummary[];
-  selectedSessionId: string | null;
-  onSelectSession: (sessionId: string) => void;
-
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-
-  annotations: Record<string, AnnotationData>;
-  onUpdateSessionNote: (sessionId: string, note: string) => void;
-}> = ({
-  width,
-  isCollapsed,
-  setIsCollapsed,
-  onStartResize,
-  sessionList,
-  selectedSessionId,
-  onSelectSession,
-  isDarkMode,
-  onToggleTheme,
-  annotations,
-  onUpdateSessionNote,
-}) => {
-  const [editingSessionNote, setEditingSessionNote] = useState<string | null>(null);
-
-  // Memoize callback functions
-  const handleToggleCollapse = useCallback(() => {
-    setIsCollapsed(!isCollapsed);
-  }, [isCollapsed, setIsCollapsed]);
-
-  // Memoize rendered sessions
-  const renderedSessions = useMemo(() => {
-    return sessionList.map((session) => {
-      const sessionNote = annotations[session.id]?.session_note || '';
-      const hasNote = sessionNote.length > 0;
-      const isEditing = editingSessionNote === session.id;
-      const isSelected = selectedSessionId === session.id;
-
-      const handleSelectSession = useCallback(() => {
-        onSelectSession(session.id);
-        if (isCollapsed) setIsCollapsed(false);
-      }, [session.id, onSelectSession, isCollapsed, setIsCollapsed]);
-
-      const handleToggleEdit = useCallback(() => {
-        setEditingSessionNote(isEditing ? null : session.id);
-      }, [isEditing, session.id]);
-
-      const handleUpdateNote = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onUpdateSessionNote(session.id, e.target.value);
-      }, [session.id, onUpdateSessionNote]);
-
-      const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.key === 'Escape') {
-          setEditingSessionNote(null);
-        } else if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          setEditingSessionNote(null);
-        }
-      }, []);
-
-      const handleSaveNote = useCallback(() => {
-        setEditingSessionNote(null);
-      }, []);
-
-      const handleEditNote = useCallback(() => {
-        setEditingSessionNote(session.id);
-      }, [session.id]);
-
-      return (
-        <div key={session.id}>
-          {/* Collapsed state */}
-          {isCollapsed ? (
-            <div
-              onClick={handleSelectSession}
-              className={`h-12 flex items-center justify-center cursor-pointer border-b border-gray-100 dark:border-slate-800/50 relative rounded-lg mb-1 ${
-                isSelected ? 'bg-blue-50 dark:bg-slate-800' : ''
-              }`}
-            >
-              <FolderOpen
-                size={20}
-                className={
-                  isSelected
-                    ? 'text-blue-600 dark:text-blue-400'
-                    : 'text-slate-400 dark:text-slate-600'
-                }
-              />
-              {hasNote && <div className="absolute top-1 right-1 w-2 h-2 bg-amber-500 rounded-full"></div>}
-            </div>
-          ) : (
-            <div>
-              <div
-                onClick={handleSelectSession}
-                className={`px-3 py-3 border-b border-gray-100 dark:border-slate-800/50 cursor-pointer transition-colors group relative rounded-lg mb-1 ${
-                  isSelected ? 'bg-blue-50 dark:bg-slate-800/80 shadow-md z-10' : 'hover:bg-gray-50 dark:hover:bg-slate-800/30'
-                }`}
-                title={session.id}
-              >
-                {/* Action Buttons (appear on hover) */}
-                <div className="absolute right-2 top-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20">
-                  <button
-                    onClick={(e) => { e.stopPropagation(); handleToggleEdit(); }}
-                    className="p-1.5 bg-white dark:bg-slate-700 rounded shadow-sm hover:scale-110"
-                    title="Edit note"
-                    type="button"
-                  >
-                    <Pencil size={12} className="text-slate-500 dark:text-slate-300" />
-                  </button>
-                </div>
-
-                {/* Selection indicator */}
-                {isSelected && (
-                  <div className="absolute left-0 top-3 bottom-3 w-1 bg-blue-500 rounded-r-full"></div>
-                )}
-
-                <div className="flex items-center justify-between mb-1">
-                  <div className="flex items-center gap-2">
-                    <FolderOpen
-                      size={16}
-                      className={
-                        isSelected
-                          ? 'text-blue-600 dark:text-blue-400'
-                          : 'text-slate-400 dark:text-slate-600'
-                      }
-                    />
-                    <span className="font-semibold truncate max-w-[120px] text-slate-700 dark:text-slate-200" title={session.id}>
-                      {session.id.replace('session_', '')}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-1 text-xs text-slate-400 dark:text-slate-500">
-                    <span>{session.request_count}</span>
-                    {hasNote && !isEditing && <MessageCircle size={10} className="text-amber-500" />}
-                  </div>
-                </div>
-                <div className="text-xs text-slate-400 dark:text-slate-500">
-                  {formatTimestamp(session.timestamp)}
-                </div>
-
-                {/* Note Section - inside the card */}
-                {!isEditing && hasNote && (
-                  <Tooltip text={sessionNote}>
-                    <div
-                      className="mt-2 px-2 py-1 text-[10px] text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/20 rounded border-l-2 border-amber-400 dark:border-amber-600 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-950/30 transition-colors truncate"
-                      onClick={(e) => { e.stopPropagation(); handleEditNote(); }}
-                      title="Click to edit"
-                    >
-                      {sessionNote}
-                    </div>
-                  </Tooltip>
-                )}
-
-                {/* Note Editor - inside the card */}
-                {isEditing && (
-                  <div className="mt-2 relative">
-                    <textarea
-                      autoFocus
-                      value={sessionNote}
-                      onChange={handleUpdateNote}
-                      onKeyDown={handleKeyDown}
-                      onBlur={handleSaveNote}
-                      placeholder="Add a note..."
-                      className="w-full text-xs p-1.5 pr-6 border border-amber-300 dark:border-amber-700 rounded bg-amber-50 dark:bg-amber-950/30 text-slate-700 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500 resize-none focus:outline-none focus:ring-1 focus:ring-amber-400 dark:focus:ring-amber-600"
-                      rows={2}
-                      onClick={(e) => e.stopPropagation()}
-                    />
-                    <button
-                      onClick={(e) => { e.stopPropagation(); handleSaveNote(); }}
-                      className="absolute top-1 right-1 p-0.5 hover:bg-amber-200 dark:hover:bg-amber-800 rounded text-amber-600 dark:text-amber-400"
-                      title="Done (Enter)"
-                      type="button"
-                    >
-                      <Check size={10} />
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      );
-    });
-  }, [
-    sessionList,
-    annotations,
-    editingSessionNote,
-    selectedSessionId,
-    isCollapsed,
-    onSelectSession,
-    setIsCollapsed,
-    onUpdateSessionNote,
-  ]);
-
-  return (
-    <div
-      style={{ width: isCollapsed ? '48px' : width }}
-      className="flex-shrink-0 border-r border-gray-200 dark:border-slate-800 bg-white dark:bg-[#0b1120] flex flex-col relative transition-all duration-300 ease-in-out"
-    >
-      {/* Sessions Header */}
-      <div
-        className={`p-4 border-b border-gray-200 dark:border-slate-800 flex items-center ${
-          isCollapsed ? 'justify-center flex-col gap-4' : 'justify-between'
-        }`}
-      >
-        {!isCollapsed && (
-          <div className="flex items-center gap-2">
-            <Activity size={18} className="text-blue-600 dark:text-blue-500" />
-            <h2 className="font-bold text-sm tracking-wide text-slate-700 dark:text-slate-200">
-              SESSIONS
-            </h2>
-          </div>
-        )}
-
-        <div className={`flex ${isCollapsed ? 'flex-col gap-3' : 'gap-1'}`}>
-          <button
-            onClick={handleToggleCollapse}
-            className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded text-slate-500 dark:text-slate-400 transition-colors"
-            title={isCollapsed ? 'Expand' : 'Collapse'}
-            type="button"
-          >
-            {isCollapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
-          </button>
-          {!isCollapsed && (
-            <button
-              onClick={onToggleTheme}
-              className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded text-slate-500 dark:text-slate-400 transition-colors"
-              title="Toggle Theme"
-              type="button"
-            >
-              {isDarkMode ? <Sun size={14} /> : <Moon size={14} />}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Sessions List */}
-      <div className="overflow-y-auto flex-1 p-2 space-y-1 custom-scrollbar">
-        {renderedSessions}
-      </div>
-
-      {/* Resizer Handle */}
-      {!isCollapsed && (
-        <div
-          className="absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-blue-500/50 transition-colors z-10 flex items-center justify-center group"
-          onMouseDown={onStartResize}
-        >
-          <div className="w-[1px] h-full bg-gray-200 dark:bg-slate-800 group-hover:bg-blue-500"></div>
-        </div>
-      )}
-    </div>
-  );
-};