Refactor wmux codebase to follow coding rules

Apply coding-rules.md across all wmux and wmux-client files:
- Remove all structural "what" comments (section separators, code descriptions)
- Extract long functions into small, single-purpose named functions
- Replace mutations (splice, Set.delete, Map.delete) with immutable patterns
- Flatten nested if statements with guard clauses and extracted helpers
- Deduplicate repeated class strings into constants (CommandPalette)
- Extract sub-components (CategoriesGroup, ProcessesGroup, FilesGroup, ActionsGroup)
- Extract custom hook (useKeyboardShortcuts) from WmuxApp
- Consolidate scattered let variables into state object (process.ts)
- Create shared types file to eliminate duplicated interfaces
- Rename abbreviated variables (mod, cat, def, idOrPath) to descriptive names

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: shmuel hizmi

packages/wmux-client/src/components/CommandPalette.tsx

@@ -3,34 +3,7 @@ import { ChevronDown, ChevronRight } from "lucide-react";
 import { STATUS_COLORS } from "../styles/theme";
 import { resolveIcon } from "../utils/icons";
 import { FileTree } from "./FileViewer";
-
-// ── Types ──
-
-interface FileEntry {
-  readonly path: string;
-  readonly name: string;
-  readonly isDir: boolean;
-  readonly depth: number;
-  readonly isExpanded: boolean;
-}
-
-interface TabInfo {
-  readonly id: string;
-  readonly name: string;
-  readonly description?: string;
-  readonly icon?: string;
-  readonly status: string;
-}
-
-interface CategoryInfo {
-  readonly name: string;
-  readonly color: string;
-  readonly icon?: string;
-  readonly type: string;
-  readonly tabs: readonly TabInfo[];
-  readonly fileEntries?: readonly FileEntry[];
-  readonly openFiles?: readonly { readonly path: string; readonly name: string }[];
-}
+import type { CategoryInfo, TabInfo } from "../types";
 
 interface SidebarProps {
   readonly categories: ReadonlyArray<CategoryInfo>;
@@ -44,7 +17,14 @@ interface SidebarProps {
   readonly onOpenFile: (path: string) => void;
 }
 
-// ── Category header ──
+function categoryTabCount(category: CategoryInfo): number {
+  return category.type === "files" ? (category.openFiles?.length ?? 0) : category.tabs.length;
+}
+
+function selectAndExpand(isCollapsed: boolean, onSelect: () => void, onToggle: () => void): void {
+  onSelect();
+  if (isCollapsed) onToggle();
+}
 
 function CategoryHeader({
   category,
@@ -59,13 +39,9 @@ function CategoryHeader({
   readonly onSelect: () => void;
   readonly onToggle: () => void;
 }): ReactElement {
-  const CatIcon = resolveIcon(category.icon);
-  const isFiles = category.type === "files";
-  const count = isFiles ? (category.openFiles?.length ?? 0) : category.tabs.length;
-
   return (
     <div
-      onClick={() => { onSelect(); if (isCollapsed) onToggle(); }}
+      onClick={() => selectAndExpand(isCollapsed, onSelect, onToggle)}
       className={`flex items-center gap-1.5 px-2 py-1.5 text-xs cursor-pointer transition-colors group relative ${
         isActive
           ? "text-foreground/90"
@@ -89,14 +65,12 @@ function CategoryHeader({
       </span>
 
       <span className="text-[10px] text-muted-foreground/30 tabular-nums pr-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-        {count}
+        {categoryTabCount(category)}
       </span>
     </div>
   );
 }
 
-// ── Tab item ──
-
 function TabItem({
   tab,
   isActive,
@@ -141,7 +115,10 @@ function TabItem({
   );
 }
 
-// ── Category section ──
+function selectCategoryAndAct(isActive: boolean, onSelectCategory: () => void, action: () => void): void {
+  if (!isActive) onSelectCategory();
+  action();
+}
 
 function CategorySection({
   category,
@@ -188,8 +165,8 @@ function CategorySection({
             <div className="max-h-[50vh] overflow-y-auto pb-1">
               <FileTree
                 entries={category.fileEntries}
-                onToggleDir={(path) => { if (!isActive) onSelectCategory(); onToggleDir(path); }}
-                onOpenFile={(path) => { if (!isActive) onSelectCategory(); onOpenFile(path); }}
+                onToggleDir={(path) => selectCategoryAndAct(isActive, onSelectCategory, () => onToggleDir(path))}
+                onOpenFile={(path) => selectCategoryAndAct(isActive, onSelectCategory, () => onOpenFile(path))}
               />
             </div>
           )}
@@ -201,7 +178,7 @@ function CategorySection({
                   key={tab.id}
                   tab={tab}
                   isActive={tab.id === activeTabId && isActive}
-                  onSelect={() => { if (!isActive) onSelectCategory(); onSelectTab(tab.id); }}
+                  onSelect={() => selectCategoryAndAct(isActive, onSelectCategory, () => onSelectTab(tab.id))}
                 />
               ))}
             </div>
@@ -212,8 +189,6 @@ function CategorySection({
   );
 }
 
-// ── Sidebar footer ──
-
 function SidebarFooter(): ReactElement {
   const shortcuts = [
     { key: "⌘K", label: "Command palette" },
@@ -235,8 +210,6 @@ function SidebarFooter(): ReactElement {
   );
 }
 
-// ── Sidebar ──
-
 export function Sidebar({
   categories,
   activeCategory,
@@ -251,15 +224,15 @@ export function Sidebar({
   return (
     <div className="w-[240px] min-w-[240px] bg-background border-r border-border/30 flex flex-col select-none h-full">
       <div className="flex-1 overflow-y-auto scrollbar-hide">
-        {categories.map((cat) => (
+        {categories.map((category) => (
           <CategorySection
-            key={cat.name}
-            category={cat}
-            isActive={cat.name === activeCategory}
-            isCollapsed={collapsedCategories.has(cat.name)}
+            key={category.name}
+            category={category}
+            isActive={category.name === activeCategory}
+            isCollapsed={collapsedCategories.has(category.name)}
             activeTabId={activeTabId}
-            onSelectCategory={() => onSelectCategory(cat.name)}
-            onToggleCollapse={() => onToggleCollapse(cat.name)}
+            onSelectCategory={() => onSelectCategory(category.name)}
+            onToggleCollapse={() => onToggleCollapse(category.name)}
             onSelectTab={onSelectTab}
             onToggleDir={onToggleDir}
             onOpenFile={onOpenFile}

packages/wmux-client/src/components/Sidebar.tsx

@@ -3,8 +3,6 @@ import { DragDropProvider } from "@dnd-kit/react";
 import { useSortable } from "@dnd-kit/react/sortable";
 import { X, Play, RotateCw, Square } from "lucide-react";
 
-// ── Types ──
-
 export interface Tab {
   readonly id: string;
   readonly title: string;
@@ -26,8 +24,6 @@ interface TabBarProps {
   } | null | undefined;
 }
 
-// ── Sortable tab ──
-
 function SortableTab({
   tab,
   index,
@@ -66,22 +62,27 @@ function SortableTab({
   );
 }
 
-// ── Process actions ──
+const ACTION_BUTTON_CLASS = "flex items-center justify-center w-5 h-5 rounded border-none p-0 bg-transparent text-muted-foreground/50 hover:text-foreground disabled:opacity-20 disabled:cursor-default cursor-pointer transition-colors";
 
 function ProcessActions({ status, onStart, onStop, onRestart }: NonNullable<TabBarProps["processActions"]>): ReactElement {
-  const running = status === "running";
-  const btn = "flex items-center justify-center w-5 h-5 rounded border-none p-0 bg-transparent text-muted-foreground/50 hover:text-foreground disabled:opacity-20 disabled:cursor-default cursor-pointer transition-colors";
+  const isRunning = status === "running";
 
   return (
     <div className="flex items-center gap-px px-1.5 border-l border-border/20 h-full ml-auto shrink-0">
-      <button disabled={running} onClick={onStart} title="Start" className={btn}><Play size={10} /></button>
-      <button disabled={!running} onClick={onRestart} title="Restart" className={btn}><RotateCw size={9} /></button>
-      <button disabled={!running} onClick={onStop} title="Stop" className={btn}><Square size={9} /></button>
+      <button disabled={isRunning} onClick={onStart} title="Start" className={ACTION_BUTTON_CLASS}><Play size={10} /></button>
+      <button disabled={!isRunning} onClick={onRestart} title="Restart" className={ACTION_BUTTON_CLASS}><RotateCw size={9} /></button>
+      <button disabled={!isRunning} onClick={onStop} title="Stop" className={ACTION_BUTTON_CLASS}><Square size={9} /></button>
     </div>
   );
 }
 
-// ── Tab bar ──
+function reorderIds(ids: readonly string[], sourceId: string, targetId: string): string[] {
+  const sourceIndex = ids.indexOf(sourceId);
+  const targetIndex = ids.indexOf(targetId);
+  if (sourceIndex === -1 || targetIndex === -1) return [...ids];
+  const withoutSource = [...ids.slice(0, sourceIndex), ...ids.slice(sourceIndex + 1)];
+  return [...withoutSource.slice(0, targetIndex), sourceId, ...withoutSource.slice(targetIndex)];
+}
 
 export function TabBar({ tabs, activeId, categoryColor, onSelect, onClose, onReorder, processActions }: TabBarProps): ReactElement {
   return (
@@ -92,17 +93,10 @@ export function TabBar({ tabs, activeId, categoryColor, onSelect, onClose, onReo
       <DragDropProvider
         onDragEnd={(event) => {
           if (!onReorder || !event.operation.source || !event.operation.target) return;
-          const oldId = String(event.operation.source.id);
-          const newId = String(event.operation.target.id);
-          if (oldId === newId) return;
-          const ids = tabs.map((t) => t.id);
-          const oldIdx = ids.indexOf(oldId);
-          const newIdx = ids.indexOf(newId);
-          if (oldIdx === -1 || newIdx === -1) return;
-          const next = [...ids];
-          next.splice(oldIdx, 1);
-          next.splice(newIdx, 0, oldId);
-          onReorder(next);
+          const sourceId = String(event.operation.source.id);
+          const targetId = String(event.operation.target.id);
+          if (sourceId === targetId) return;
+          onReorder(reorderIds(tabs.map((t) => t.id), sourceId, targetId));
         }}
       >
         {tabs.map((tab, i) => (