fix(home): make the chat/resource panel divider keyboard-adjustable

The resource panel divider (moved into the shared ChatPanelLayout this release,
identical to main's home.tsx) was pointer-only: a separator with no tabIndex,
key handling, or aria-value*, so keyboard users could not focus or resize it.

Mirror the file text-editor split: the divider is now a focusable separator
with ArrowLeft/ArrowRight steps and Home/End. Both separators now read keys
through one readSeparatorKey helper (modifier and IME guard included). Keyboard widths go through the same MIN/max clamps as the drag
(keyboardPanelWidth next to panelWidthAt), land without the width transition
like the window-resize clamp (shared writeWidthInstantly), are ignored during a
live drag, and claim the resource view like a pointer resize. aria-valuenow/min/
max are written imperatively on focus, key, and drag end, preserving the hook's
zero-render resize design. Focus-visible outline matches the text-editor split.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx

@@ -18,6 +18,7 @@ import { cn, toast } from '@sim/emcn'
 import { formatPasteLimit, PASTE_LIMITS } from '@sim/utils/paste'
 import type { editor as MonacoEditorTypes } from 'monaco-editor'
 import dynamic from 'next/dynamic'
+import { readSeparatorKey } from '@/lib/core/utils/separator-keys'
 import {
   buildFileSelectionLabel,
   truncateSelectionText,
@@ -627,27 +628,17 @@ export const TextEditor = memo(function TextEditor({
   }, [isResizing])
 
   const handleSplitKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
-    if (
-      event.altKey ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.shiftKey ||
-      event.nativeEvent.isComposing ||
-      event.keyCode === 229
-    ) {
-      return
-    }
-    const { key } = event
-    if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End') return
+    const key = readSeparatorKey(event)
+    if (!key) return
     event.preventDefault()
     event.stopPropagation()
-    if (key === 'Home' || key === 'End') {
-      setSplitPct(key === 'Home' ? SPLIT_MIN_PCT : SPLIT_MAX_PCT)
+    if (key === 'min' || key === 'max') {
+      setSplitPct(key === 'min' ? SPLIT_MIN_PCT : SPLIT_MAX_PCT)
       return
     }
     const container = containerRef.current
     const isRtl = container !== null && getComputedStyle(container).direction === 'rtl'
-    const delta = (key === 'ArrowLeft' ? -1 : 1) * (isRtl ? -1 : 1) * SPLIT_KEYBOARD_STEP_PCT
+    const delta = (key === 'left' ? -1 : 1) * (isRtl ? -1 : 1) * SPLIT_KEYBOARD_STEP_PCT
     setSplitPct((current) => Math.min(SPLIT_MAX_PCT, Math.max(SPLIT_MIN_PCT, current + delta)))
   }
 

apps/sim/app/workspace/[workspaceId]/home/components/chat-panel-layout.test.tsx

@@ -67,6 +67,8 @@ it.each([1, 2])(
           activityCount={count}
           onToggle={toggle}
           onResize={vi.fn()}
+          onResizeKeyDown={vi.fn()}
+          onResizeFocus={vi.fn()}
           panel={<div>Resources</div>}
         >
           <div>Conversation</div>
@@ -87,3 +89,39 @@ it.each([1, 2])(
     expect(container.textContent).toContain('Resources')
   }
 )
+
+it('exposes the divider as a focusable separator routing keys and focus to the owner', async () => {
+  const resize = vi.fn()
+  const keyDown = vi.fn()
+  const focus = vi.fn()
+  await act(async () =>
+    root.render(
+      <ChatPanelLayout
+        collapsed={false}
+        label='resource view'
+        onToggle={vi.fn()}
+        onResize={resize}
+        onResizeKeyDown={keyDown}
+        onResizeFocus={focus}
+        panel={<div>Resources</div>}
+      >
+        <div>Conversation</div>
+      </ChatPanelLayout>
+    )
+  )
+  document.body.appendChild(container)
+  const separator = container.querySelector<HTMLDivElement>('[role="separator"]')!
+  expect(separator.getAttribute('aria-label')).toBe('Resize resource view')
+  expect(separator.getAttribute('aria-orientation')).toBe('vertical')
+  expect(separator.tabIndex).toBe(0)
+  await act(async () => separator.focus())
+  expect(document.activeElement).toBe(separator)
+  expect(focus).toHaveBeenCalledOnce()
+  await act(async () => {
+    separator.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
+  })
+  expect(keyDown).toHaveBeenCalledOnce()
+  expect(keyDown.mock.calls[0][0].key).toBe('ArrowLeft')
+  expect(resize).not.toHaveBeenCalled()
+  container.remove()
+})

apps/sim/app/workspace/[workspaceId]/home/components/chat-panel-layout.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import type { PointerEventHandler, ReactNode, Ref } from 'react'
+import type {
+  FocusEventHandler,
+  KeyboardEventHandler,
+  PointerEventHandler,
+  ReactNode,
+  Ref,
+} from 'react'
 import { Button, cn } from '@sim/emcn'
 import { PanelLeft } from '@sim/emcn/icons'
 import { RESOURCE_HEADER_CLASSES } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
@@ -13,6 +19,9 @@ interface ChatPanelLayoutProps {
   activityCount?: number
   onToggle: () => void
   onResize: PointerEventHandler<HTMLDivElement>
+  onResizeKeyDown: KeyboardEventHandler<HTMLDivElement>
+  /** Reports the panel's current width and bounds on the divider's `aria-value*`. */
+  onResizeFocus: FocusEventHandler<HTMLDivElement>
 }
 
 /** Shared resize handle and collapse control for resources and Search results. */
@@ -24,6 +33,8 @@ export function ChatPanelLayout({
   activityCount = 0,
   onToggle,
   onResize,
+  onResizeKeyDown,
+  onResizeFocus,
 }: ChatPanelLayoutProps) {
   const toggleLabel = `${collapsed ? 'Expand' : 'Collapse'} ${label}${
     collapsed && activityCount > 0
@@ -38,11 +49,14 @@ export function ChatPanelLayout({
       {!collapsed && (
         <div className='relative z-20 w-0 flex-none'>
           <div
-            className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize'
+            className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--selection)]'
             role='separator'
+            tabIndex={0}
             aria-orientation='vertical'
             aria-label={`Resize ${label}`}
             onPointerDown={onResize}
+            onKeyDown={onResizeKeyDown}
+            onFocus={onResizeFocus}
           />
         </div>
       )}

apps/sim/app/workspace/[workspaceId]/home/components/chat-resource-panel.tsx

@@ -59,6 +59,8 @@ export function ChatResourcePanel({
     expandResource,
     mothershipRef,
     handleResourceResizePointerDown,
+    handleResourceResizeKeyDown,
+    handleResourceResizeFocus,
     handleResourceInteraction,
   } = panel
   const summarize = useCallback(
@@ -75,6 +77,8 @@ export function ChatResourcePanel({
       activityCount={resourceActivityIds.size}
       onToggle={isResourceCollapsed ? expandResource : collapseResource}
       onResize={handleResourceResizePointerDown}
+      onResizeKeyDown={handleResourceResizeKeyDown}
+      onResizeFocus={handleResourceResizeFocus}
       panel={
         <MothershipResourcesProvider
           selectResource={selectResourceFromUser}