fix: Rafa nits (#1225)

1. Fix split panel not collapsing when moving a tab back by deferring drag state cleanup to next frame
  2. Move bash mode indicator into ModeAndBranchRow with a blue ring on the editor
  3. Add drag-and-drop hint text to command center empty cells
  4. Offset sidebar section tooltip to avoid blocking the + button
  5. Improve keyboard shortcuts visual hierarchy with larger category headers
  6. Fix focused panel tracking when moving tabs between panels

Author: charlesvien

apps/code/src/renderer/components/HeaderRow.tsx

@@ -106,14 +106,11 @@ export function HeaderRow() {
       {showRightSidebarSection && view.type === "task-detail" && view.data && (
         <Flex
           align="center"
-          justify="between"
-          pr="4"
-          pl="3"
+          justify={rightSidebarOpen ? "between" : "end"}
+          px="3"
           style={{
-            width: rightSidebarOpen
-              ? `${rightSidebarWidth}px`
-              : `${COLLAPSED_WIDTH}px`,
-            minWidth: `${COLLAPSED_WIDTH}px`,
+            width: rightSidebarOpen ? `${rightSidebarWidth}px` : undefined,
+            minWidth: rightSidebarOpen ? `${COLLAPSED_WIDTH}px` : undefined,
             height: "100%",
             borderLeft: "1px solid var(--gray-6)",
             transition: rightSidebarIsResizing

apps/code/src/renderer/components/KeyboardShortcutsSheet.tsx

@@ -94,7 +94,7 @@ export function KeyboardShortcutsList() {
 
         return (
           <Flex key={category} direction="column" gap="2">
-            <Text size="2" weight="bold" color="gray">
+            <Text size="3" weight="bold" color="gray">
               {CATEGORY_LABELS[category]}
             </Text>
             <Box
@@ -110,8 +110,9 @@ export function KeyboardShortcutsList() {
                   align="center"
                   justify="between"
                   px="3"
-                  py="2"
                   style={{
+                    paddingTop: "6px",
+                    paddingBottom: "6px",
                     borderBottom:
                       index < uniqueShortcuts.length - 1
                         ? "1px solid var(--gray-4)"

apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx

@@ -18,20 +18,25 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
 
   return (
     <Flex align="center" justify="center" height="100%">
-      <TaskSelector
-        cellIndex={cellIndex}
-        open={selectorOpen}
-        onOpenChange={setSelectorOpen}
-      >
-        <button
-          type="button"
-          onClick={() => setSelectorOpen(true)}
-          className="flex items-center gap-1.5 rounded-md border border-gray-7 border-dashed px-3 py-1.5 font-mono text-[11px] text-gray-10 transition-colors hover:border-gray-9 hover:text-gray-12"
+      <Flex direction="column" align="center" gap="2">
+        <TaskSelector
+          cellIndex={cellIndex}
+          open={selectorOpen}
+          onOpenChange={setSelectorOpen}
         >
-          <Plus size={12} />
-          Add task
-        </button>
-      </TaskSelector>
+          <button
+            type="button"
+            onClick={() => setSelectorOpen(true)}
+            className="flex items-center gap-1.5 rounded-md border border-gray-7 border-dashed px-3 py-1.5 font-mono text-[11px] text-gray-10 transition-colors hover:border-gray-9 hover:text-gray-12"
+          >
+            <Plus size={12} />
+            Add task
+          </button>
+        </TaskSelector>
+        <Text size="1" className="font-mono text-[10px] text-gray-9">
+          or drag a task from the sidebar
+        </Text>
+      </Flex>
     </Flex>
   );
 }

apps/code/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -30,6 +30,7 @@ interface ModeAndBranchRowProps {
     linesRemoved: number;
   } | null;
   disabled?: boolean;
+  isBashMode?: boolean;
 }
 
 function ModeAndBranchRow({
@@ -39,6 +40,7 @@ function ModeAndBranchRow({
   cloudBranch,
   cloudDiffStats,
   disabled,
+  isBashMode,
 }: ModeAndBranchRowProps) {
   const { currentBranch: gitBranch, diffStats } = useGitQueries(
     repoPath ?? undefined,
@@ -54,7 +56,7 @@ function ModeAndBranchRow({
       effectiveDiffStats.linesAdded > 0 ||
       effectiveDiffStats.linesRemoved > 0);
 
-  if (!showModeIndicator && !showBranchSelector) {
+  if (!showModeIndicator && !showBranchSelector && !isBashMode) {
     return null;
   }
 
@@ -66,16 +68,27 @@ function ModeAndBranchRow({
       style={{ overflow: "hidden" }}
     >
       <Flex align="center" gap="2" flexShrink="0">
-        {showModeIndicator && modeOption && (
-          <ModeIndicatorInput modeOption={modeOption} />
-        )}
-        {showModeIndicator && !modeOption && (
+        {isBashMode ? (
           <Text
             size="1"
-            style={{ color: "var(--gray-8)", fontFamily: "monospace" }}
+            style={{ color: "var(--blue-9)", fontFamily: "monospace" }}
           >
-            Loading...
+            ! bash mode
           </Text>
+        ) : (
+          <>
+            {showModeIndicator && modeOption && (
+              <ModeIndicatorInput modeOption={modeOption} />
+            )}
+            {showModeIndicator && !modeOption && (
+              <Text
+                size="1"
+                style={{ color: "var(--gray-8)", fontFamily: "monospace" }}
+              >
+                Loading...
+              </Text>
+            )}
+          </>
         )}
       </Flex>
       <Flex align="center" gap="2" style={{ minWidth: 0, overflow: "hidden" }}>
@@ -247,6 +260,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         direction="column"
         gap="2"
         onClick={handleContainerClick}
+        className={`rounded-md p-2 ${isBashMode ? "ring-1 ring-blue-9" : ""}`}
         style={{ cursor: "text" }}
       >
         <AttachmentsBar attachments={attachments} onRemove={removeAttachment} />
@@ -266,11 +280,6 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
               onAddAttachment={addAttachment}
               onAttachFiles={onAttachFiles}
             />
-            {isBashMode && (
-              <Text size="1" className="ml-2 font-mono text-accent-11">
-                bash mode
-              </Text>
-            )}
           </Flex>
           <Flex gap="2" align="center">
             {isLoading && onCancel ? (
@@ -328,6 +337,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
           cloudBranch={cloudBranch}
           cloudDiffStats={cloudDiffStats}
           disabled={disabled}
+          isBashMode={isBashMode}
         />
       </Flex>
     );

apps/code/src/renderer/features/panels/hooks/useDragDropHandlers.ts

@@ -60,9 +60,10 @@ export const useDragDropHandlers = (taskId: string) => {
   };
 
   const handleDragEnd: DragDropEvents["dragend"] = (event) => {
-    usePanelLayoutStore.getState().clearDraggingTab(taskId);
-
-    if (event.canceled) return;
+    if (event.canceled) {
+      usePanelLayoutStore.getState().clearDraggingTab(taskId);
+      return;
+    }
 
     const sourceData = event.operation.source?.data;
     const targetData = event.operation.target?.data;
@@ -72,15 +73,21 @@ export const useDragDropHandlers = (taskId: string) => {
       !sourceData.tabId ||
       !sourceData.panelId
     ) {
+      usePanelLayoutStore.getState().clearDraggingTab(taskId);
       return;
     }
 
     const { tabId, panelId: sourcePanelId } = sourceData;
 
-    // Defer structural tree changes to the next frame so @dnd-kit can finish
-    // its DOM cleanup first. Without this, React tries to removeChild on nodes
-    // that @dnd-kit has already repositioned, causing a DOM exception.
-    const applyMove = (fn: () => void) => requestAnimationFrame(fn);
+    // Defer structural tree changes AND drag state cleanup to the next frame
+    // so @dnd-kit can finish its DOM cleanup first. Clearing drag state
+    // synchronously unmounts drop zones while @dnd-kit still holds references
+    // to them, which can corrupt its internal state and prevent the move.
+    const applyMove = (fn: () => void) =>
+      requestAnimationFrame(() => {
+        fn();
+        usePanelLayoutStore.getState().clearDraggingTab(taskId);
+      });
 
     // Handle drop on tab bar or on a tab in a different panel -> move tab
     if (
@@ -101,6 +108,7 @@ export const useDragDropHandlers = (taskId: string) => {
       !targetData.panelId ||
       !targetData.zone
     ) {
+      usePanelLayoutStore.getState().clearDraggingTab(taskId);
       return;
     }
 
@@ -116,6 +124,8 @@ export const useDragDropHandlers = (taskId: string) => {
         splitPanel(taskId, tabId, sourcePanelId, targetPanelId, zone);
         setFocusedPanel(taskId, targetPanelId);
       });
+    } else {
+      usePanelLayoutStore.getState().clearDraggingTab(taskId);
     }
   };
 

apps/code/src/renderer/features/panels/store/panelLayoutStore.ts

@@ -723,7 +723,12 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
               layout.panelTree,
             );
 
-            return { panelTree: cleanedTree };
+            const focusedPanelId =
+              layout.focusedPanelId === sourcePanelId
+                ? targetPanelId
+                : layout.focusedPanelId;
+
+            return { panelTree: cleanedTree, focusedPanelId };
           }),
         );
       },

apps/code/src/renderer/features/sidebar/components/SidebarSection.tsx

@@ -66,7 +66,7 @@ export function SidebarSection({
               </span>
             )}
             {tooltipContent ? (
-              <Tooltip content={tooltipContent} side="right">
+              <Tooltip content={tooltipContent} side="right" align="start">
                 <span className="overflow-hidden text-ellipsis whitespace-nowrap font-medium">
                   {label}
                 </span>