bingocode 1.0.1 → 1.0.3

package/desktop/src/components/controls/PermissionModeSelector.tsx

@@ -0,0 +1,229 @@
+import { useState, useRef, useEffect } from 'react'
+import DOMPurify from 'dompurify'
+import { createPortal } from 'react-dom'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { useChatStore } from '../../stores/chatStore'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useTabStore } from '../../stores/tabStore'
+import { useTranslation } from '../../i18n'
+import type { PermissionMode } from '../../types/settings'
+
+const MODE_ICONS: Record<PermissionMode, string> = {
+  default: 'verified_user',
+  acceptEdits: 'bolt',
+  plan: 'architecture',
+  bypassPermissions: 'gavel',
+  dontAsk: 'gavel',
+}
+
+type Props = {
+  workDir?: string
+  /** Controlled mode: override current value */
+  value?: PermissionMode
+  /** Controlled mode: called on change instead of updating global store */
+  onChange?: (mode: PermissionMode) => void
+}
+
+export function PermissionModeSelector({ workDir: workDirProp, value, onChange }: Props = {}) {
+  const t = useTranslation()
+  const { permissionMode: storeMode, setPermissionMode } = useSettingsStore()
+  const setSessionPermissionMode = useChatStore((s) => s.setSessionPermissionMode)
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const sessions = useSessionStore((s) => s.sessions)
+  const activeSessionId = useSessionStore((s) => s.activeSessionId)
+  const [open, setOpen] = useState(false)
+  const [confirmDialog, setConfirmDialog] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const isControlled = value !== undefined
+  const currentMode = isControlled ? value : storeMode
+
+  const PERMISSION_ITEMS: Array<{
+    value: PermissionMode
+    label: string
+    description: string
+    icon: string
+    color?: string
+  }> = [
+    {
+      value: 'default',
+      label: t('permMode.askPermissions'),
+      description: t('permMode.askPermDesc'),
+      icon: 'verified_user',
+    },
+    {
+      value: 'acceptEdits',
+      label: t('permMode.autoAccept'),
+      description: t('permMode.autoAcceptDesc'),
+      icon: 'bolt',
+    },
+    {
+      value: 'plan',
+      label: t('permMode.planMode'),
+      description: t('permMode.planModeDesc'),
+      icon: 'architecture',
+      color: 'text-[var(--color-text-tertiary)]',
+    },
+    {
+      value: 'bypassPermissions',
+      label: t('permMode.bypass'),
+      description: t('permMode.bypassDesc'),
+      icon: 'gavel',
+      color: 'text-[var(--color-error)]',
+    },
+  ]
+
+  const MODE_LABELS: Record<PermissionMode, string> = {
+    default: t('permMode.label.default'),
+    acceptEdits: t('permMode.label.acceptEdits'),
+    plan: t('permMode.label.plan'),
+    bypassPermissions: t('permMode.label.bypassPermissions'),
+    dontAsk: t('permMode.label.dontAsk'),
+  }
+
+  const activeSession = sessions.find((s) => s.id === activeSessionId)
+  const workDir = workDirProp || activeSession?.workDir || '~'
+
+  useEffect(() => {
+    if (!open) return
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', handleClick)
+    document.addEventListener('keydown', handleEsc)
+    return () => {
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleEsc)
+    }
+  }, [open])
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 px-2.5 py-1.5 bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)] rounded-full text-xs font-medium text-[var(--color-text-secondary)] transition-colors"
+      >
+        <span className="material-symbols-outlined text-[14px]">{MODE_ICONS[currentMode]}</span>
+        <span>{MODE_LABELS[currentMode]}</span>
+        <span className="material-symbols-outlined text-[12px]">expand_more</span>
+      </button>
+
+      {open && (
+        <div className="absolute left-0 bottom-full mb-2 w-[320px] rounded-xl bg-[var(--color-surface-container-lowest)] border border-[var(--color-border)] shadow-[var(--shadow-dropdown)] z-50 py-2">
+          <div className="px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)]">
+            {t('permMode.executionPermissions')}
+          </div>
+          {PERMISSION_ITEMS.map((item) => (
+            <button
+              key={item.value}
+              onClick={() => {
+                if (item.value === 'bypassPermissions') {
+                  setOpen(false)
+                  setConfirmDialog(true)
+                  return
+                }
+                if (isControlled) {
+                  onChange?.(item.value)
+                } else {
+                  void setPermissionMode(item.value)
+                  if (activeTabId) setSessionPermissionMode(activeTabId, item.value)
+                }
+                setOpen(false)
+              }}
+              className={`
+                w-full flex items-start gap-3 px-4 py-3 text-left transition-colors
+                hover:bg-[var(--color-surface-hover)]
+                ${item.value === currentMode ? 'bg-[var(--color-surface-selected)]' : ''}
+              `}
+            >
+              <span className={`material-symbols-outlined text-[20px] mt-0.5 ${item.color || 'text-[var(--color-text-secondary)]'}`}>
+                {item.icon}
+              </span>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-semibold text-[var(--color-text-primary)]">{item.label}</div>
+                <div className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{item.description}</div>
+              </div>
+              {item.value === currentMode && (
+                <span className="material-symbols-outlined text-[16px] text-[var(--color-brand)] mt-0.5" style={{ fontVariationSettings: "'FILL' 1" }}>
+                  check_circle
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Bypass confirmation dialog */}
+      {confirmDialog && createPortal(
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 pl-[var(--sidebar-width)]" onClick={() => setConfirmDialog(false)}>
+          <div
+            className="w-[420px] rounded-2xl bg-[var(--color-surface-container-lowest)] border border-[var(--color-border)] shadow-[var(--shadow-dropdown)] overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className="flex items-center gap-3 px-5 py-4 bg-[var(--color-error)]/8 border-b border-[var(--color-error)]/15">
+              <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-[var(--color-error)]/12">
+                <span className="material-symbols-outlined text-[22px] text-[var(--color-error)]">warning</span>
+              </div>
+              <div>
+                <div className="text-sm font-bold text-[var(--color-text-primary)]">{t('permMode.enableBypassTitle')}</div>
+                <div className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{t('permMode.enableBypassSubtitle')}</div>
+              </div>
+            </div>
+
+            {/* Body */}
+            <div className="px-5 py-4">
+              <p className="text-xs text-[var(--color-text-secondary)] leading-relaxed mb-3" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('permMode.enableBypassBody')) }} />
+              <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-surface-container)] border border-[var(--color-border)]" title={workDir}>
+                <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)] shrink-0">folder</span>
+                <code className="text-xs font-[var(--font-mono)] text-[var(--color-text-primary)] truncate">{workDir}</code>
+              </div>
+              <ul className="mt-3 space-y-1.5 text-xs text-[var(--color-text-secondary)]">
+                <li className="flex items-start gap-2">
+                  <span className="material-symbols-outlined text-[14px] text-[var(--color-error)] mt-0.5">check</span>
+                  {t('permMode.permReadWrite')}
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="material-symbols-outlined text-[14px] text-[var(--color-error)] mt-0.5">check</span>
+                  {t('permMode.permShell')}
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="material-symbols-outlined text-[14px] text-[var(--color-error)] mt-0.5">check</span>
+                  {t('permMode.permPackages')}
+                </li>
+              </ul>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
+              <button
+                onClick={() => setConfirmDialog(false)}
+                className="px-4 py-2 text-xs font-semibold text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors"
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                onClick={() => {
+                  if (isControlled) {
+                    onChange?.('bypassPermissions')
+                  } else {
+                    void setPermissionMode('bypassPermissions')
+                    if (activeTabId) setSessionPermissionMode(activeTabId, 'bypassPermissions')
+                  }
+                  setConfirmDialog(false)
+                }}
+                className="px-4 py-2 text-xs font-semibold text-white bg-[var(--color-error)] hover:opacity-90 rounded-lg transition-colors"
+              >
+                {t('permMode.enableBypassBtn')}
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}

package/desktop/src/components/layout/AppShell.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react'
+import { Sidebar } from './Sidebar'
+import { ContentRouter } from './ContentRouter'
+import { ToastContainer } from '../shared/Toast'
+import { UpdateChecker } from '../shared/UpdateChecker'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { useUIStore, type SettingsTab } from '../../stores/uiStore'
+import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts'
+import { initializeDesktopServerUrl } from '../../lib/desktopRuntime'
+import { TabBar } from './TabBar'
+import { useTabStore, SETTINGS_TAB_ID } from '../../stores/tabStore'
+import { useChatStore } from '../../stores/chatStore'
+import { useTranslation } from '../../i18n'
+
+export function AppShell() {
+  const fetchSettings = useSettingsStore((s) => s.fetchAll)
+  const [ready, setReady] = useState(false)
+  const [startupError, setStartupError] = useState<string | null>(null)
+  const t = useTranslation()
+
+  useEffect(() => {
+    let cancelled = false
+
+    const bootstrap = async () => {
+      try {
+        await initializeDesktopServerUrl()
+        await fetchSettings()
+
+        // Restore tabs from localStorage
+        await useTabStore.getState().restoreTabs()
+        const activeId = useTabStore.getState().activeTabId
+        if (activeId) {
+          useChatStore.getState().connectToSession(activeId)
+        }
+        if (!cancelled) {
+          setReady(true)
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setStartupError(error instanceof Error ? error.message : String(error))
+          setReady(false)
+        }
+      }
+    }
+
+    void bootstrap()
+
+    return () => {
+      cancelled = true
+    }
+  }, [fetchSettings])
+
+  // Listen for macOS native menu navigation events (About / Settings)
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    import(/* @vite-ignore */ '@tauri-apps/api/event')
+      .then(({ listen }) =>
+        listen<string>('native-menu-navigate', (event) => {
+          const target = event.payload as SettingsTab | 'settings'
+          if (target === 'about') {
+            useUIStore.getState().setPendingSettingsTab('about')
+          }
+          useTabStore.getState().openTab(SETTINGS_TAB_ID, 'Settings', 'settings')
+        }),
+      )
+      .then((fn) => { unlisten = fn })
+      .catch(() => {})
+    return () => { unlisten?.() }
+  }, [])
+
+  useKeyboardShortcuts()
+
+  if (startupError) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-[var(--color-surface)] px-6">
+        <div className="max-w-xl rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-6">
+          <h1 className="text-lg font-semibold text-[var(--color-text-primary)]">
+            {t('app.serverFailed')}
+          </h1>
+          <p className="mt-2 text-sm text-[var(--color-text-secondary)]">
+            {startupError}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!ready) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-[var(--color-surface)] text-[var(--color-text-secondary)]">
+        {t('app.launching')}
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen flex overflow-hidden">
+      <Sidebar />
+      <main id="content-area" className="flex-1 flex flex-col overflow-hidden">
+        <TabBar />
+        <ContentRouter />
+      </main>
+      <ToastContainer />
+      <UpdateChecker />
+    </div>
+  )
+}

package/desktop/src/components/layout/ContentRouter.tsx

@@ -0,0 +1,27 @@
+import { useTabStore } from '../../stores/tabStore'
+import { EmptySession } from '../../pages/EmptySession'
+import { ActiveSession } from '../../pages/ActiveSession'
+import { ScheduledTasks } from '../../pages/ScheduledTasks'
+import { Settings } from '../../pages/Settings'
+
+export function ContentRouter() {
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const activeTabType = useTabStore((s) => s.tabs.find((t) => t.sessionId === s.activeTabId)?.type)
+
+  // No tabs open — show empty session
+  if (!activeTabId || !activeTabType) {
+    return <EmptySession />
+  }
+
+  // Special tabs
+  if (activeTabType === 'settings') {
+    return <Settings />
+  }
+
+  if (activeTabType === 'scheduled') {
+    return <ScheduledTasks />
+  }
+
+  // Session tab — ActiveSession handles both regular and member sessions
+  return <ActiveSession />
+}

package/desktop/src/components/layout/ProjectFilter.tsx

@@ -0,0 +1,126 @@
+import { useState, useRef, useEffect } from 'react'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useTranslation } from '../../i18n'
+
+export function ProjectFilter() {
+  const t = useTranslation()
+  const { availableProjects, selectedProjects, setSelectedProjects } = useSessionStore()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  const isAllSelected = selectedProjects.length === 0
+
+  const label = isAllSelected
+    ? t('sidebar.allProjects')
+    : selectedProjects.length === 1
+      ? getDisplayName(selectedProjects[0]!, t('sidebar.other'))
+      : `${selectedProjects.length} projects`
+
+  const toggleProject = (path: string) => {
+    if (isAllSelected) {
+      // Switch from "all" to "only this one"
+      setSelectedProjects([path])
+    } else if (selectedProjects.includes(path)) {
+      const next = selectedProjects.filter((p) => p !== path)
+      // If nothing left, revert to all
+      setSelectedProjects(next.length === 0 ? [] : next)
+    } else {
+      const next = [...selectedProjects, path]
+      // If all are selected individually, revert to "all"
+      setSelectedProjects(next.length >= availableProjects.length ? [] : next)
+    }
+  }
+
+  const selectAll = () => setSelectedProjects([])
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1 px-2 py-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors rounded-[var(--radius-md)] hover:bg-[var(--color-surface-hover)]"
+      >
+        <span className="truncate max-w-[140px]">{label}</span>
+        <ChevronIcon open={open} />
+      </button>
+
+      {open && (
+        <div
+          className="absolute left-0 top-full mt-1 z-50 min-w-[200px] max-h-[300px] overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] py-1"
+          style={{ boxShadow: 'var(--shadow-dropdown)' }}
+        >
+          {/* All projects */}
+          <button
+            onClick={selectAll}
+            className="w-full flex items-center gap-2.5 px-3 py-1.5 text-sm text-left hover:bg-[var(--color-surface-hover)] transition-colors"
+          >
+            <FolderIcon />
+            <span className="flex-1 text-[var(--color-text-primary)]">{t('sidebar.allProjects')}</span>
+            {isAllSelected && <CheckIcon />}
+          </button>
+
+          <div className="mx-2 my-1 border-t border-[var(--color-border)]" />
+
+          {/* Individual projects */}
+          {availableProjects.map((path) => {
+            const checked = !isAllSelected && selectedProjects.includes(path)
+            return (
+              <button
+                key={path}
+                onClick={() => toggleProject(path)}
+                className="w-full flex items-center gap-2.5 px-3 py-1.5 text-sm text-left hover:bg-[var(--color-surface-hover)] transition-colors"
+              >
+                <FolderIcon />
+                <span className="flex-1 truncate text-[var(--color-text-primary)]">{getDisplayName(path, t('sidebar.other'))}</span>
+                {checked && <CheckIcon />}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function getDisplayName(sanitizedPath: string, fallback: string = 'Other'): string {
+  if (!sanitizedPath || sanitizedPath === '_unknown') return fallback
+  const segments = sanitizedPath.split('-').filter(Boolean)
+  return segments[segments.length - 1] || fallback
+}
+
+function ChevronIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      width="14" height="14" viewBox="0 0 24 24" fill="none"
+      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+      className={`transition-transform ${open ? 'rotate-180' : ''}`}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  )
+}
+
+function FolderIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--color-text-tertiary)] flex-shrink-0">
+      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-brand)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="flex-shrink-0">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}

package/desktop/src/components/layout/Sidebar.test.tsx

@@ -0,0 +1,158 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+vi.mock('./ProjectFilter', () => ({
+  ProjectFilter: () => <div data-testid="project-filter" />,
+}))
+
+vi.mock('../../i18n', () => ({
+  useTranslation: () => (key: string) => {
+    const translations: Record<string, string> = {
+      'sidebar.newSession': 'New Session',
+      'sidebar.scheduled': 'Scheduled',
+      'sidebar.settings': 'Settings',
+      'sidebar.searchPlaceholder': 'Search sessions',
+      'sidebar.noSessions': 'No sessions',
+      'sidebar.noMatching': 'No matching sessions',
+      'sidebar.sessionListFailed': 'Session list failed',
+      'common.retry': 'Retry',
+      'common.delete': 'Delete',
+      'common.rename': 'Rename',
+      'sidebar.timeGroup.today': 'Today',
+      'sidebar.timeGroup.yesterday': 'Yesterday',
+      'sidebar.timeGroup.last7days': 'Last 7 Days',
+      'sidebar.timeGroup.last30days': 'Last 30 Days',
+      'sidebar.timeGroup.older': 'Older',
+      'sidebar.missingDir': 'Missing',
+    }
+
+    return translations[key] ?? key
+  },
+}))
+
+import { Sidebar } from './Sidebar'
+import { useChatStore } from '../../stores/chatStore'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useTabStore } from '../../stores/tabStore'
+import { useUIStore } from '../../stores/uiStore'
+
+describe('Sidebar', () => {
+  const connectToSession = vi.fn()
+  const disconnectSession = vi.fn()
+  const fetchSessions = vi.fn()
+  const createSession = vi.fn()
+  const deleteSession = vi.fn()
+  const addToast = vi.fn()
+
+  beforeEach(() => {
+    connectToSession.mockReset()
+    disconnectSession.mockReset()
+    fetchSessions.mockReset()
+    createSession.mockReset()
+    deleteSession.mockReset()
+    addToast.mockReset()
+
+    useTabStore.setState({ tabs: [], activeTabId: null })
+    useSessionStore.setState({
+      sessions: [],
+      activeSessionId: null,
+      isLoading: false,
+      error: null,
+      selectedProjects: [],
+      availableProjects: [],
+      fetchSessions,
+      createSession,
+      deleteSession,
+    })
+    useChatStore.setState({
+      connectToSession,
+      disconnectSession,
+    } as Partial<ReturnType<typeof useChatStore.getState>>)
+    useUIStore.setState({
+      addToast,
+    } as Partial<ReturnType<typeof useUIStore.getState>>)
+  })
+
+  afterEach(() => {
+    useTabStore.setState({ tabs: [], activeTabId: null })
+  })
+
+  it('opens a new tab when creating a session from the sidebar', async () => {
+    createSession.mockResolvedValue('session-new-1')
+
+    render(<Sidebar />)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'New Session' }))
+    })
+
+    await waitFor(() => {
+      expect(createSession).toHaveBeenCalled()
+      expect(connectToSession).toHaveBeenCalledWith('session-new-1')
+    })
+
+    expect(useTabStore.getState().tabs).toEqual([
+      { sessionId: 'session-new-1', title: 'New Session', type: 'session', status: 'idle' },
+    ])
+    expect(useTabStore.getState().activeTabId).toBe('session-new-1')
+    expect(screen.getByRole('complementary')).not.toHaveAttribute('data-tauri-drag-region')
+  })
+
+  it('shows a toast when session creation fails', async () => {
+    createSession.mockRejectedValue(new Error('boom'))
+
+    render(<Sidebar />)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'New Session' }))
+    })
+
+    await waitFor(() => {
+      expect(addToast).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'boom',
+      })
+    })
+
+    expect(useTabStore.getState().tabs).toEqual([])
+  })
+
+  it('removes the matching tab when deleting a session from the sidebar', async () => {
+    deleteSession.mockResolvedValue(undefined)
+    useSessionStore.setState({
+      sessions: [
+        {
+          id: 'session-1',
+          title: 'Open Session',
+          createdAt: new Date().toISOString(),
+          modifiedAt: new Date().toISOString(),
+          messageCount: 1,
+          projectPath: '/workspace/project',
+          workDir: '/workspace/project',
+          workDirExists: true,
+        },
+      ],
+    })
+    useTabStore.setState({
+      tabs: [{ sessionId: 'session-1', title: 'Open Session', type: 'session', status: 'idle' }],
+      activeTabId: 'session-1',
+    })
+
+    render(<Sidebar />)
+
+    fireEvent.contextMenu(screen.getByRole('button', { name: /Open Session/ }))
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+    })
+
+    await waitFor(() => {
+      expect(deleteSession).toHaveBeenCalledWith('session-1')
+      expect(disconnectSession).toHaveBeenCalledWith('session-1')
+    })
+
+    expect(useTabStore.getState().tabs).toEqual([])
+    expect(useTabStore.getState().activeTabId).toBeNull()
+  })
+})