feat: Add AssistantsPanel component

[stepandel]

Summary

Create the left sidebar panel that lists all assistants for the connected account, mirroring the existing IndexesPanel pattern.

Changes

• Add useAssistantQueries.ts with React Query hooks for assistant CRUD operations
• Add AssistantSelectionContext.tsx for managing selected assistant state
• Add AssistantsPanel.tsx component with:
  • List of assistants from API
  • Status indicators (Ready=green, Initializing=yellow, Failed=red, Terminating=orange)
  • Click to select
  • Right-click context menu (stubbed)
  • '+ New' button for creation
  • Loading, error, and empty states

Files Added

• src/hooks/useAssistantQueries.ts
• src/context/AssistantSelectionContext.tsx
• src/components/assistants/AssistantsPanel.tsx

Testing

• Build passes: pnpm test:build ✅

Closes PINE-38

Summary by CodeRabbit

• New Features
  • Assistant Explorer mode with keyboard shortcuts (Cmd/Ctrl+1, Cmd/Ctrl+2) and per-profile mode persistence
  • Mode Switcher added to the top bar for quick mode selection
  • Assistants Panel to list, create, view, update, and delete assistants with status indicators
  • Global assistant selection sync across the UI via a new selection provider
  • Assistant management surfaced to the app (list/create/describe/update/delete) and stored per-profile preferences

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

📝 Walkthrough

Walkthrough

Adds Pinecone Assistant support end-to-end: service layer, IPC + preload API, types, persisted profile mode, React contexts, UI components, React Query hooks, workspace/config updates, and wiring in the connection window.

Changes

Cohort / File(s)	Summary
Configuration \.linear\.toml, pnpm-workspace.yaml	Add Linear CLI header/config and pnpm workspace package/ignore rules.
Assistant service & Pinecone integration electron/assistant-service.ts, electron/pinecone-service.ts	New AssistantService (list/create/describe/update/delete). PineconeService adds lazy assistantService field, getAssistantService() and resets it on connect/disconnect/errors.
IPC & Preload API electron/main.ts, electron/preload.ts	New IPC handlers for assistant CRUD and profile preferredMode; preload exposes profiles.getPreferredMode/setPreferredMode and assistant.{list,create,describe,update,delete}.
Connection profile store electron/connection-store.ts	Added getPreferredMode(profileId) and setPreferredMode(profileId, mode) to persist per-profile ExplorerMode.
Types / Electron types electron/types.ts, src/types/electron.d.ts	Add ExplorerMode, extend ConnectionProfile.preferredMode, add AssistantStatus, AssistantModel, CreateAssistantParams, UpdateAssistantParams.
React contexts & providers src/context/ModeContext.tsx, src/context/AssistantSelectionContext.tsx	New ModeProvider with persisted mode and keyboard shortcuts; AssistantSelectionProvider and hook to manage active assistant selection.
UI components & integration src/components/mode/ModeSwitcher.tsx, src/components/assistants/AssistantsPanel.tsx, src/components/layout/TopBar.tsx	Add ModeSwitcher component and AssistantsPanel; integrate ModeSwitcher into TopBar UI.
React Query hooks src/hooks/useAssistantQueries.ts	New query key bundle and hooks: list/detail queries and create/update/delete mutations (including optimistic delete handling).
Window wiring src/windows/ConnectionWindow.tsx	Wrap provider tree with ModeProvider to enable mode context app-wide.

Sequence Diagram(s)

sequenceDiagram
    participant UI as Renderer (React UI)
    participant Preload as Preload (electronAPI)
    participant Main as Main (IPC handlers)
    participant PineSvc as PineconeService / AssistantService
    participant SDK as Pinecone SDK

    UI->>Preload: assistant.create(profileId, params)
    Preload->>Main: ipcInvoke "assistant:create" (profileId, params)
    Main->>PineSvc: getAssistantService(profileId)
    PineSvc->>SDK: Assistant.create(params)
    SDK-->>PineSvc: assistant data
    PineSvc-->>Main: mapped AssistantModel
    Main-->>Preload: { success: true, data: AssistantModel }
    Preload-->>UI: Promise resolves with AssistantModel

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐇
I hopped through lines of code tonight,
Modes toggled left, assistants bright,
IPC bridges stitched with care,
Queries fetch and panels flare,
A little rabbit claps in delight! 🎉

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'feat: Add AssistantsPanel component' is partially related to the changeset but does not capture the main change. While AssistantsPanel is added, the PR introduces a comprehensive assistant management system including hooks, contexts, API integrations, and UI infrastructure far beyond just the component.	Revise the title to reflect the broader scope, such as 'feat: Add assistant management system with panel, queries, and API integration' or 'feat: Implement assistants panel with CRUD operations and mode switching'.
Docstring Coverage	⚠️ Warning	Docstring coverage is 46.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch pine-38-assistants-panel

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In `@electron/assistant-service.ts`:
- Around line 68-86: The AssistantStatus union type is missing
'InitializationFailed' which the Pinecone SDK can return; update the
AssistantStatus type definition to include 'InitializationFailed' so the status
is accurately typed (this will remove the need to rely on the unsafe cast in
mapAssistantModel). Locate the AssistantStatus type and add the literal
'InitializationFailed' to the union, then ensure usages like mapAssistantModel
(where model.status is cast as AssistantModel['status']) and helper functions
getStatusColor/getStatusTooltip accept the new status without changes.

In `@electron/pinecone-service.ts`:
- Around line 49-60: The cached assistantService instance causes stale Pinecone
client use after reconnects; update the connect and disconnect flows and the
connect error path to reset assistantService to null so a new AssistantService
is constructed with the fresh client; specifically, clear this.assistantService
= null in the methods that establish/tear down the connection (e.g., in
connect(), disconnect(), and the catch/error handling inside connect()) and
ensure getAssistantService() still lazily constructs a new
AssistantService(this.client) when assistantService is null.

In `@electron/types.ts`:
- Around line 401-439: Update the AssistantStatus type to include the missing
'InitializationFailed' variant so the union now covers API responses; locate the
AssistantStatus declaration and add 'InitializationFailed' to the union
('Initializing' | 'Ready' | 'Failed' | 'Terminating' | 'InitializationFailed')
so code that maps assistant states (e.g., anywhere using AssistantStatus or
AssistantModel.status) will handle the SDK v6.1.3 response correctly.

In `@src/components/mode/ModeSwitcher.tsx`:
- Around line 20-47: The component currently implements a tab pattern but has no
tabpanel or keyboard tab behaviors; update ModeSwitcher so the container uses
role="group" (replace role="tablist") and each option button uses
aria-pressed={isActive} (remove role="tab" and aria-selected) while keeping
onClick={() => setMode(value)} and the existing data-testid; ensure the
span/text and Icon rendering remain unchanged and keep keyboard activation via
Enter/Space by relying on native button behavior in the buttons rendered from
modes, referencing the modes mapping, mode state and setMode function.

🧹 Nitpick comments (8)

src/components/assistants/AssistantsPanel.tsx (2)

64-82: Consider removing console.log statements before merging.

The console.log statements on lines 71 and 81 are useful for development but should be removed or wrapped in a debug flag before production. Even with the TODO comments indicating future implementation, leaving debug logs can clutter the console.

🔧 Proposed fix

   const handleAssistantContextMenu = useCallback(
     (e: React.MouseEvent, assistantName: string) => {
       e.preventDefault()
       e.stopPropagation()
       // TODO: Implement context menu for assistants when needed
       // window.electronAPI.contextMenu.showAssistantMenu(assistantName)
-      console.log('Context menu for assistant:', assistantName)
     },
     []
   )
 
   // Handle right-click on panel background
   const handlePanelContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
     // TODO: Implement panel context menu for assistants when needed
     // window.electronAPI.contextMenu.showAssistantPanelMenu()
-    console.log('Panel context menu')
   }, [])

---

84-88: Simplify handleCreateNew callback.

The useCallback wrapper here adds unnecessary overhead since it only conditionally calls onCreateNew. You can pass onCreateNew directly to the button's onClick or simplify to avoid the extra wrapper.

♻️ Proposed simplification

-  const handleCreateNew = useCallback(() => {
-    if (onCreateNew) {
-      onCreateNew()
-    }
-  }, [onCreateNew])
+  const handleCreateNew = onCreateNew

Then in JSX:

         <NewButton
-            onClick={handleCreateNew}
+            onClick={onCreateNew}
+            disabled={!onCreateNew}
             label="Assistant"

Alternatively, keep it simple if the button should always be visible:

           <NewButton
-            onClick={handleCreateNew}
+            onClick={onCreateNew ?? (() => {})}
             label="Assistant"

electron/main.ts (2)

819-832: Consider using imported types for consistency.

The parameter types for assistant:create and assistant:update are defined inline rather than importing CreateAssistantParams and UpdateAssistantParams from ./types. While functionally equivalent, using the imported types would ensure consistency and make refactoring easier.

♻️ Proposed change for assistant:create

Add to imports at top of file:

import {
  // ... existing imports
  CreateAssistantParams,
  UpdateAssistantParams,
} from './types'

Then update the handler:

-ipcMain.handle('assistant:create', async (_event, profileId: string, params: { name: string; instructions?: string; metadata?: Record<string, string>; region?: 'us' | 'eu' }) => {
+ipcMain.handle('assistant:create', async (_event, profileId: string, params: CreateAssistantParams) => {

---

849-862: Same inline type concern for assistant:update.

♻️ Proposed change

-ipcMain.handle('assistant:update', async (_event, profileId: string, name: string, params: { instructions?: string; metadata?: Record<string, string> }) => {
+ipcMain.handle('assistant:update', async (_event, profileId: string, name: string, params: UpdateAssistantParams) => {

src/context/ModeContext.tsx (2)

36-52: Consider including setMode in the dependency array.

The eslint-disable-line react-hooks/exhaustive-deps suppresses a valid warning. While setMode is stable due to useCallback, the current pattern creates a closure over the initial (undefined) version of setMode before it's defined. This works because setMode is hoisted as a function declaration via useCallback, but it's fragile.

A safer approach is to include setMode in the dependencies, which the linter expects:

♻️ Proposed fix

   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Check for Cmd/Ctrl + 1 or 2
       if (e.metaKey || e.ctrlKey) {
         if (e.key === '1') {
           e.preventDefault()
           setMode('index')
         } else if (e.key === '2') {
           e.preventDefault()
           setMode('assistant')
         }
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [setMode])

Since setMode is wrapped in useCallback, it will remain stable and won't cause unnecessary effect re-runs.

---

4-4: Type ExplorerMode is duplicated.

The ExplorerMode type is also defined in electron/types.ts (line 55). Consider importing it from there or from a shared types location to maintain a single source of truth.

src/hooks/useAssistantQueries.ts (1)

126-133: Inconsistent error logging in delete mutation.

The onError callback doesn't log the error to console unlike useCreateAssistantMutation and useUpdateAssistantMutation. Consider adding consistent error logging for debugging purposes.

🔧 Proposed fix for consistency

-    onError: (_err, _assistantName, context) => {
+    onError: (error, _assistantName, context) => {
+      console.error('Failed to delete assistant:', error)
       // Roll back to the previous value on error
       if (context?.previousAssistants) {

src/types/electron.d.ts (1)

39-64: Correct the file path reference to electron/types.ts (not src/electron/types.ts) and consider consolidating duplicate type definitions.

Type duplication exists between src/types/electron.d.ts (lines 39-64) and electron/types.ts (lines 56, 408, 413-438). The types are identical: ExplorerMode, AssistantStatus, AssistantModel, CreateAssistantParams, and UpdateAssistantParams appear in both locations.

While the pattern of global ambient types for the renderer and module exports for the electron layer is intentional, maintaining two identical copies risks sync issues. Consider consolidating by either having the global declarations reference the canonical definitions or documenting the intentional duplication with a reference to the source.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's find and examine the AssistantModel type and AssistantStatus enum
find . -type f -name "*.ts" -o -name "*.tsx" | head -20

Repository: stepandel/pinecone-explorer

Length of output: 647

---

🏁 Script executed:

# Search for AssistantModel type definition
rg "type AssistantModel|interface AssistantModel" -A 20

Repository: stepandel/pinecone-explorer

Length of output: 1806

---

🏁 Script executed:

# Search for AssistantStatus enum or type definition
rg "enum AssistantStatus|type AssistantStatus" -A 15

Repository: stepandel/pinecone-explorer

Length of output: 1491

---

🏁 Script executed:

# Find the getStatusColor function in AssistantsPanel.tsx
rg "getStatusColor" -B 2 -A 15

Repository: stepandel/pinecone-explorer

Length of output: 2960

---

🌐 Web query:

Pinecone Assistant API status values

💡 Result:

Pinecone Assistant API status can be one of these values:

• Initializing
• Ready
• Failed
• Terminating
• InitializationFailed [1][2]

Sources: Pinecone Assistant API reference for “Create an assistant” and “Check assistant status”. [1][2]

---

🏁 Script executed:

# Find the getStatusTooltip function
rg "getStatusTooltip" -B 2 -A 15

Repository: stepandel/pinecone-explorer

Length of output: 3619

---

Add 'InitializationFailed' to AssistantStatus type definition.

The Pinecone SDK can return InitializationFailed as a valid status, but AssistantStatus only defines 'Initializing' | 'Ready' | 'Failed' | 'Terminating'. The type assertion model.status as AssistantModel['status'] bypasses this gap, allowing the missing status to propagate untyped. While getStatusColor and getStatusTooltip have default cases that prevent crashes, the type system should accurately reflect all possible SDK values. Update AssistantStatus to include 'InitializationFailed'.

🤖 Prompt for AI Agents

In `@electron/assistant-service.ts` around lines 68 - 86, The AssistantStatus
union type is missing 'InitializationFailed' which the Pinecone SDK can return;
update the AssistantStatus type definition to include 'InitializationFailed' so
the status is accurately typed (this will remove the need to rely on the unsafe
cast in mapAssistantModel). Locate the AssistantStatus type and add the literal
'InitializationFailed' to the union, then ensure usages like mapAssistantModel
(where model.status is cast as AssistantModel['status']) and helper functions
getStatusColor/getStatusTooltip accept the new status without changes.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

WAI-ARIA authoring practices tab pattern requirements keyboard behavior aria-controls

💡 Result:

WAI-ARIA APG Tabs pattern: required roles/states/properties (including aria-controls)

From the WAI-ARIA Authoring Practices Guide (APG) Tabs Pattern:

• Container: element with role="tablist" (and it must be labeled via aria-labelledby or aria-label). [1]
• Tabs: each tab has role="tab" and is contained in the tablist. [1]
• Panels: each content panel has role="tabpanel". [1]
• Required relationship:
  • Each tab has aria-controls="ID_OF_ASSOCIATED_TABPANEL". (This is the APG’s required tab→panel association.) [1]
  • Each tabpanel has aria-labelledby="ID_OF_ASSOCIATED_TAB" (panel name comes from its tab). [1]
• Selection state:
  • The active tab has aria-selected="true", all others aria-selected="false". [1]
• Orientation (if vertical): set aria-orientation="vertical" on the tablist (default is horizontal). [1]

Common APG implementation detail (shown in the manual example): only the selected tab is in the page Tab order (roving tabindex), with non-selected tabs typically set to tabindex="-1". [2]

---

Keyboard behavior (APG)

Tab / Shift+Tab

• When focus enters the tablist via Tab, focus goes to the active tab. [1]
• Pressing Tab again moves focus out of the tablist to the next item in the page tab sequence—typically the tabpanel, unless the first meaningful element inside the panel is focusable. [1]
• If the tabpanel itself needs to be reachable (e.g., no focusable content inside), APG recommends giving it tabindex="0". [1]

Arrow keys (move focus among tabs)

• Horizontal tablist:
  • Left Arrow: focus previous tab (wrap first→last). [1]
  • Right Arrow: focus next tab (wrap last→first). [1]
• Vertical tablist (aria-orientation="vertical"):
  • Up Arrow / Down Arrow perform the same function as Left/Right respectively. [1]

Home / End

• Home: move focus to first tab. [2]
• End: move focus to last tab. [2]

Activation model

• Manual activation: Enter or Space activates the focused tab (shows its panel). [2]
• Automatic activation: moving focus with arrow keys also activates the newly focused tab (and Home/End activate too). [3]
• APG notes automatic activation is recommended only when panels display without noticeable latency (e.g., preloaded). [1]

Sources: APG Tabs Pattern [1], APG manual tabs example (keyboard + roving tabindex + aria-controls) [2], APG automatic tabs example [3].

---

🏁 Script executed:

find . -name "ModeSwitcher.tsx" -type f

Repository: stepandel/pinecone-explorer

Length of output: 109

---

🏁 Script executed:

cat -n ./src/components/mode/ModeSwitcher.tsx

Repository: stepandel/pinecone-explorer

Length of output: 2001

---

🏁 Script executed:

rg "tabpanel" --type tsx --type ts -i

Repository: stepandel/pinecone-explorer

Length of output: 98

---

🏁 Script executed:

rg "aria-controls" --type tsx --type ts

Repository: stepandel/pinecone-explorer

Length of output: 98

---

🏁 Script executed:

# Check what the ModeContext contains and how mode switching works
find . -name "ModeContext*" -type f

Repository: stepandel/pinecone-explorer

Length of output: 100

---

🏁 Script executed:

rg "aria-controls|tabpanel" --glob="*.tsx" --glob="*.ts"

Repository: stepandel/pinecone-explorer

Length of output: 53

---

🏁 Script executed:

cat -n ./src/context/ModeContext.tsx

Repository: stepandel/pinecone-explorer

Length of output: 3069

---

🏁 Script executed:

# Search for keyboard event handlers related to mode switching
rg "onKeyDown|onKeyPress|ArrowLeft|ArrowRight" --glob="*.tsx" --glob="*.ts"

Repository: stepandel/pinecone-explorer

Length of output: 782

---

Missing ARIA controls and tab keyboard handlers—use a toggle pattern instead.

This component advertises role="tablist" and role="tab" but lacks the required APG tab pattern elements: aria-controls attributes, associated tabpanel elements, and keyboard handlers (arrow keys, Home/End). Since this is a simple 2-option mode switcher without tab panels, switch to role="group" with aria-pressed on the buttons instead.

🧭 Suggested toggle-button ARIA adjustment

-    <div 
-      className="flex items-center bg-black/[0.04] dark:bg-white/[0.06] rounded-md p-0.5"
-      role="tablist"
-      aria-label="Explorer mode"
-      data-testid="mode-switcher"
-    >
+    <div 
+      className="flex items-center bg-black/[0.04] dark:bg-white/[0.06] rounded-md p-0.5"
+      role="group"
+      aria-label="Explorer mode"
+      data-testid="mode-switcher"
+    >
       {modes.map(({ value, icon: Icon, label, shortcut }) => {
         const isActive = mode === value
         return (
           <button
             key={value}
-            role="tab"
-            aria-selected={isActive}
+            type="button"
+            aria-pressed={isActive}
             onClick={() => setMode(value)}

🤖 Prompt for AI Agents

In `@src/components/mode/ModeSwitcher.tsx` around lines 20 - 47, The component
currently implements a tab pattern but has no tabpanel or keyboard tab
behaviors; update ModeSwitcher so the container uses role="group" (replace
role="tablist") and each option button uses aria-pressed={isActive} (remove
role="tab" and aria-selected) while keeping onClick={() => setMode(value)} and
the existing data-testid; ensure the span/text and Icon rendering remain
unchanged and keep keyboard activation via Enter/Space by relying on native
button behavior in the buttons rendered from modes, referencing the modes
mapping, mode state and setMode function.

[claude]

Code Review

Found 1 issue that needs to be addressed.

File: src/components/assistants/AssistantsPanel.tsx (Line 48)

Issue: Missing Provider in Component Tree

The AssistantsPanel component calls useAssistantSelection() at line 48, but the AssistantSelectionProvider is never added to the component tree. This will cause a runtime error when the component is rendered:

Error: useAssistantSelection must be used within an AssistantSelectionProvider

Evidence:

• The hook is called here:

  pinecone-explorer/src/components/assistants/AssistantsPanel.tsx

  Lines 47 to 49 in 7976ce8

  	const { currentProfile } = usePinecone()
  	const { activeAssistant, setActiveAssistant } = useAssistantSelection()

• The provider is defined in AssistantSelectionContext.tsx with a guard that throws this error
• The provider was not added to ConnectionWindow.tsx where other providers like ModeProvider were added

Suggested Fix:

Add AssistantSelectionProvider to the component tree in src/windows/ConnectionWindow.tsx, similar to how ModeProvider was added:

import { AssistantSelectionProvider } from '../context/AssistantSelectionContext'

// In the component tree:
<ModeProvider>
  <AssistantSelectionProvider>
    <ClipboardProvider>
      ...
    </ClipboardProvider>
  </AssistantSelectionProvider>
</ModeProvider>