feat: add search filter to VM and LXC lists

- Case-insensitive filter by name, node, or status
- Shows running/stopped counts and total matches when filtering
- "No matches" message when filter returns empty
- Backlog: mark Search/Filter as done

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/LXCList.js

@@ -8,30 +8,51 @@ import StatusBadge from './StatusBadge';
  */
 export default function LXCList({ lxc, onPowerAction, onOpenConsole }) {
   const [expandedNodes, setExpandedNodes] = useState({});
+  const [filter, setFilter] = useState('');
 
   if (!lxc?.length) {
     return <p className="text-text-secondary text-sm">No LXCs found.</p>;
   }
 
-  const groups = Object.groupBy(lxc, (l) => l.node);
+  const filtered = filter
+    ? lxc.filter((item) =>
+        [item.name, item.node, item.status].some((v) => v.toLowerCase().includes(filter.toLowerCase())
+    ))
+    : lxc;
+
+  const groups = Object.groupBy(filtered, (item) => item.node);
   const sortedNodes = Object.keys(groups).sort();
 
-  function toggleNode(node) {
-    setExpandedNodes((prev) => ({ ...prev, [node]: !prev[node] }));
-  }
+  const total = filtered.length;
+  const running = filtered.filter((item) => item.status === 'running').length;
 
   return (
     <div className="space-y-4">
+      {filter && (
+        <div className="flex items-center gap-2 text-sm text-text-secondary">
+          <span>{running} running / {total - running} stopped</span>
+          <span>·</span>
+          <span>{total} of {lxc.length}</span>
+        </div>
+      )}
+
+      <input
+        type="text"
+        placeholder="Filter by name, node, or status…"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        className="w-full rounded-md border border-border-card bg-bg-card px-3 py-2 text-sm text-text-primary placeholder-text-secondary focus:border-accent focus:outline-none"
+      />
+
       {sortedNodes.map((node) => {
-        const running = groups[node].filter((l) => l.status === 'running');
-        const stopped = groups[node].filter((l) => l.status !== 'running');
+        const running = groups[node].filter((item) => item.status === 'running');
+        const stopped = groups[node].filter((item) => item.status !== 'running');
         const expanded = expandedNodes[node] ?? false;
 
         return (
           <div key={node} className="rounded-xl border border-border-card bg-bg-card">
-            {/* Node header */}
             <button
-              onClick={() => toggleNode(node)}
+              onClick={() => setExpandedNodes((prev) => ({ ...prev, [node]: !prev[node] }))}
               className="flex w-full items-center justify-between rounded-t-xl px-4 py-2.5 text-left"
             >
               <span className="text-sm font-medium text-text-primary">
@@ -40,7 +61,6 @@ export default function LXCList({ lxc, onPowerAction, onOpenConsole }) {
               <span className="text-xl text-text-secondary">{expanded ? '▾' : '▸'}</span>
             </button>
 
-            {/* Node body */}
             {expanded && (
               <>
                 {running.length > 0 && (
@@ -69,24 +89,9 @@ export default function LXCList({ lxc, onPowerAction, onOpenConsole }) {
                               <td className="px-3 py-1.5 text-text-secondary">{formatBytes(item.disk?.used || 0)}</td>
                               <td className="px-3 py-1.5"><StatusBadge status={item.status} /></td>
                               <td className="px-3 py-1.5">
-                                <button
-                                  onClick={() => onOpenConsole?.(item)}
-                                  className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent"
-                                >
-                                  Console
-                                </button>
-                                <button
-                                  onClick={() => onPowerAction(item.node, item.vmid, 'lxc', 'restart')}
-                                  className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent"
-                                >
-                                  Restart
-                                </button>
-                                <button
-                                  onClick={() => onPowerAction(item.node, item.vmid, 'lxc', 'stop')}
-                                  className="rounded border border-status-red/30 bg-status-red/10 px-1.5 py-0.5 text-xs text-status-red hover:bg-status-red/20"
-                                >
-                                  Stop
-                                </button>
+                                <button onClick={() => onOpenConsole?.(item)} className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent">Console</button>
+                                <button onClick={() => onPowerAction(item.node, item.vmid, 'lxc', 'restart')} className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent">Restart</button>
+                                <button onClick={() => onPowerAction(item.node, item.vmid, 'lxc', 'stop')} className="rounded border border-status-red/30 bg-status-red/10 px-1.5 py-0.5 text-xs text-status-red hover:bg-status-red/20">Stop</button>
                               </td>
                             </tr>
                           ))}
@@ -118,18 +123,8 @@ export default function LXCList({ lxc, onPowerAction, onOpenConsole }) {
                               <td className="px-3 py-1.5 text-text-secondary">{formatBytes(item.disk?.used || 0)}</td>
                               <td className="px-3 py-1.5"><StatusBadge status={item.status} /></td>
                               <td className="px-3 py-1.5">
-                                <button
-                                  onClick={() => onOpenConsole?.(item)}
-                                  className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent"
-                                >
-                                  Console
-                                </button>
-                                <button
-                                  onClick={() => onPowerAction(item.node, item.vmid, 'lxc', 'start')}
-                                  className="rounded border border-status-green/30 bg-status-green/10 px-1.5 py-0.5 text-xs text-status-green hover:bg-status-green/20"
-                                >
-                                  Start
-                                </button>
+                                <button onClick={() => onOpenConsole?.(item)} className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent">Console</button>
+                                <button onClick={() => onPowerAction(item.node, item.vmid, 'lxc', 'start')} className="rounded border border-status-green/30 bg-status-green/10 px-1.5 py-0.5 text-xs text-status-green hover:bg-status-green/20">Start</button>
                               </td>
                             </tr>
                           ))}
@@ -143,6 +138,10 @@ export default function LXCList({ lxc, onPowerAction, onOpenConsole }) {
           </div>
         );
       })}
+
+      {!total && (
+        <p className="text-center text-text-secondary">No matches for "{filter}"</p>
+      )}
     </div>
   );
 }

src/components/VMList.js

@@ -8,24 +8,41 @@ import StatusBadge from './StatusBadge';
  */
 export default function VMList({ vms, onPowerAction, onOpenConsole }) {
   const [expandedNodes, setExpandedNodes] = useState({});
+  const [filter, setFilter] = useState('');
 
   if (!vms?.length) {
     return <p className="text-text-secondary text-sm">No VMs found.</p>;
   }
 
-  const groups = Object.groupBy(vms, (vm) => vm.node);
+  const filtered = filter
+    ? vms.filter((vm) =>
+        [vm.name, vm.node, vm.status].some((v) => v.toLowerCase().includes(filter.toLowerCase())))
+    : vms;
+
+  const groups = Object.groupBy(filtered, (vm) => vm.node);
   const sortedNodes = Object.keys(groups).sort();
 
-  function toggleNode(node) {
-    setExpandedNodes((prev) => ({ ...prev, [node]: !prev[node] }));
-  }
-
-  function allExpanded() {
-    return sortedNodes.every((n) => expandedNodes[n]);
-  }
+  const total = filtered.length;
+  const running = filtered.filter((vm) => vm.status === 'running').length;
 
   return (
     <div className="space-y-4">
+      {filter && (
+        <div className="flex items-center gap-2 text-sm text-text-secondary">
+          <span>{running} running / {total - running} stopped</span>
+          <span>·</span>
+          <span>{total} of {vms.length}</span>
+        </div>
+      )}
+
+      <input
+        type="text"
+        placeholder="Filter by name, node, or status…"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        className="w-full rounded-md border border-border-card bg-bg-card px-3 py-2 text-sm text-text-primary placeholder-text-secondary focus:border-accent focus:outline-none"
+      />
+
       {sortedNodes.map((node) => {
         const running = groups[node].filter((vm) => vm.status === 'running');
         const stopped = groups[node].filter((vm) => vm.status !== 'running');
@@ -33,9 +50,8 @@ export default function VMList({ vms, onPowerAction, onOpenConsole }) {
 
         return (
           <div key={node} className="rounded-xl border border-border-card bg-bg-card">
-            {/* Node header */}
             <button
-              onClick={() => toggleNode(node)}
+              onClick={() => setExpandedNodes((prev) => ({ ...prev, [node]: !prev[node] }))}
               className="flex w-full items-center justify-between rounded-t-xl px-4 py-2.5 text-left"
             >
               <span className="text-sm font-medium text-text-primary">
@@ -44,7 +60,6 @@ export default function VMList({ vms, onPowerAction, onOpenConsole }) {
               <span className="text-xl text-text-secondary">{expanded ? '▾' : '▸'}</span>
             </button>
 
-            {/* Node body */}
             {expanded && (
               <>
                 {running.length > 0 && (
@@ -73,24 +88,9 @@ export default function VMList({ vms, onPowerAction, onOpenConsole }) {
                               <td className="px-3 py-1.5 text-text-secondary">{formatBytes(vm.disk?.used || 0)}</td>
                               <td className="px-3 py-1.5"><StatusBadge status={vm.status} /></td>
                               <td className="px-3 py-1.5">
-                                <button
-                                  onClick={() => onOpenConsole?.(vm)}
-                                  className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent"
-                                >
-                                  Console
-                                </button>
-                                <button
-                                  onClick={() => onPowerAction(vm.node, vm.vmid, 'qemu', 'restart')}
-                                  className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent"
-                                >
-                                  Restart
-                                </button>
-                                <button
-                                  onClick={() => onPowerAction(vm.node, vm.vmid, 'qemu', 'stop')}
-                                  className="rounded border border-status-red/30 bg-status-red/10 px-1.5 py-0.5 text-xs text-status-red hover:bg-status-red/20"
-                                >
-                                  Stop
-                                </button>
+                                <button onClick={() => onOpenConsole?.(vm)} className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent">Console</button>
+                                <button onClick={() => onPowerAction(vm.node, vm.vmid, 'qemu', 'restart')} className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent">Restart</button>
+                                <button onClick={() => onPowerAction(vm.node, vm.vmid, 'qemu', 'stop')} className="rounded border border-status-red/30 bg-status-red/10 px-1.5 py-0.5 text-xs text-status-red hover:bg-status-red/20">Stop</button>
                               </td>
                             </tr>
                           ))}
@@ -122,18 +122,8 @@ export default function VMList({ vms, onPowerAction, onOpenConsole }) {
                               <td className="px-3 py-1.5 text-text-secondary">{formatBytes(vm.disk?.used || 0)}</td>
                               <td className="px-3 py-1.5"><StatusBadge status={vm.status} /></td>
                               <td className="px-3 py-1.5">
-                                <button
-                                  onClick={() => onOpenConsole?.(vm)}
-                                  className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent"
-                                >
-                                  Console
-                                </button>
-                                <button
-                                  onClick={() => onPowerAction(vm.node, vm.vmid, 'qemu', 'start')}
-                                  className="rounded border border-status-green/30 bg-status-green/10 px-1.5 py-0.5 text-xs text-status-green hover:bg-status-green/20"
-                                >
-                                  Start
-                                </button>
+                                <button onClick={() => onOpenConsole?.(vm)} className="mr-1 rounded border border-border-card bg-bg-card px-1.5 py-0.5 text-xs text-text-primary hover:border-accent hover:text-accent">Console</button>
+                                <button onClick={() => onPowerAction(vm.node, vm.vmid, 'qemu', 'start')} className="rounded border border-status-green/30 bg-status-green/10 px-1.5 py-0.5 text-xs text-status-green hover:bg-status-green/20">Start</button>
                               </td>
                             </tr>
                           ))}
@@ -147,6 +137,10 @@ export default function VMList({ vms, onPowerAction, onOpenConsole }) {
           </div>
         );
       })}
+
+      {!total && (
+        <p className="text-center text-text-secondary">No matches for "{filter}"</p>
+      )}
     </div>
   );
 }