diff --git a/app/plugins/page.jsx b/app/plugins/page.jsx
index d5a1030..ceb4f1e 100644
--- a/app/plugins/page.jsx
+++ b/app/plugins/page.jsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import EditorPicker from '../../components/EditorPicker.jsx';
 import { editorChannels } from '../../lib/editor-distribution.js';
 import styles from './plugins.module.css';
 
@@ -9,8 +10,6 @@ export const metadata = {
 };
 
 export default function PluginDirectoryPage() {
-  const available = editorChannels.filter(editor => editor.status === 'available');
-  const planned = editorChannels.filter(editor => editor.status === 'planned');
   return (
     <main className={styles.page}>
       <header className={styles.header}>
@@ -18,27 +17,13 @@ export default function PluginDirectoryPage() {
         <Link href="/space">View live globe</Link>
       </header>
       <section className={styles.intro}>
-        <p>Editor connections</p>
-        <h1>Show up while you code</h1>
-        <span>One private-by-default extension connects compatible editors to the live globe. Pick your editor for the shortest installation path.</span>
-      </section>
-      <section className={styles.directory} aria-labelledby="available-title">
-        <div className={styles.sectionHeading}><h2 id="available-title">Available now</h2><span>{available.length} editors</span></div>
-        <div className={styles.rows}>
-          {available.map(editor => (
-            <Link href={`/plugins/${editor.slug}`} key={editor.slug} className={styles.row} style={{ '--editor-accent': editor.accent }}>
-              <i aria-hidden="true" />
-              <strong>{editor.name}</strong>
-              <span>{editor.slug === 'vscode' ? 'Marketplace' : 'VSIX'}</span>
-              <b>Install</b>
-            </Link>
-          ))}
+        <div>
+          <p>Editor connections</p>
+          <h1>Pick an editor. Go live.</h1>
         </div>
+        <span>Search your editor, install the connection, and appear on the globe while you actively code.</span>
       </section>
-      <section className={styles.planned} aria-labelledby="planned-title">
-        <div className={styles.sectionHeading}><h2 id="planned-title">Coming next</h2><span>New native clients</span></div>
-        {planned.map(editor => <div key={editor.slug}><strong>{editor.name}</strong><span>{editor.family} client in development</span></div>)}
-      </section>
+      <EditorPicker editors={editorChannels} />
       <aside className={styles.privacy}>
         <strong>Activity, not contents</strong>
         <p>DevGlobe never sends source code, file paths, repository names, branches, or keystrokes. Editor events only reset a local inactivity timer.</p>
diff --git a/app/plugins/plugins.module.css b/app/plugins/plugins.module.css
index 5079c50..7b4701b 100644
--- a/app/plugins/plugins.module.css
+++ b/app/plugins/plugins.module.css
@@ -11,28 +11,56 @@
 }
 
 .header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
-.header a { color: var(--text-secondary); font-size: 13px; font-weight: 700; text-decoration: none; }
+.header a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-secondary); font-size: 13px; font-weight: 700; text-decoration: none; }
 .header a:hover { color: var(--text-primary); }
 .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-primary) !important; }
 .brand img { width: 28px; height: 28px; }
-.intro, .editorIntro { max-width: 760px; padding: clamp(72px, 11vw, 132px) 0 64px; }
-.intro > p, .editorIntro > p { margin: 0 0 14px; color: var(--text-secondary); font-size: 14px; }
-.intro h1, .editorIntro h1 { max-width: 720px; margin: 0; font-size: clamp(42px, 7vw, 82px); line-height: 0.98; letter-spacing: 0; }
-.intro > span, .editorIntro > span { display: block; max-width: 650px; margin-top: 24px; color: var(--text-secondary); font-size: 17px; line-height: 1.65; }
-.directory, .planned, .waiting { border-top: 1px solid var(--border); }
-.sectionHeading { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 0; }
-.sectionHeading h2, .waiting h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
-.sectionHeading span { color: var(--text-muted); font-size: 12px; }
-.rows { border-bottom: 1px solid var(--border); }
-.row { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 18px; min-height: 68px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
-.row > i, .editorIntro > i { width: 10px; height: 10px; border-radius: 50%; background: var(--editor-accent); box-shadow: 0 0 20px color-mix(in srgb, var(--editor-accent) 65%, transparent); }
-.row strong { font-size: 16px; }
-.row > span { color: var(--text-muted); font-size: 12px; }
-.row > b { min-width: 72px; color: var(--editor-accent); font-size: 12px; text-align: right; }
-.row:hover strong { color: var(--editor-accent); }
-.planned { margin-top: 72px; }
-.planned > div:not(.sectionHeading) { display: grid; grid-template-columns: 1fr 1fr; padding: 18px 0; border-top: 1px solid var(--border); }
-.planned span, .waiting p { color: var(--text-secondary); }
+.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: end; gap: 48px; padding: 76px 0 52px; }
+.intro > div > p, .editorIntro > p { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; }
+.intro h1, .editorIntro h1 { max-width: 720px; margin: 0; font-size: 58px; line-height: 1.02; letter-spacing: 0; }
+.intro > span, .editorIntro > span { display: block; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
+.editorIntro { max-width: 760px; padding: 96px 0 64px; }
+.editorIntro > span { max-width: 650px; margin-top: 24px; }
+.picker, .waiting { border-top: 1px solid var(--border); }
+.picker { padding-top: 22px; }
+.pickerHeading { display: grid; grid-template-columns: 1fr minmax(320px, 440px); align-items: center; gap: 28px; }
+.pickerHeading > div:first-child { display: flex; align-items: baseline; gap: 12px; }
+.pickerHeading h2, .waiting h2 { margin: 0; font-size: 19px; letter-spacing: 0; }
+.pickerHeading > div:first-child span { color: var(--text-muted); font-size: 12px; }
+.searchField { position: relative; display: flex; height: 48px; align-items: center; color: var(--text-muted); }
+.searchField > svg { position: absolute; left: 15px; pointer-events: none; }
+.searchField label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+.searchField input { width: 100%; height: 100%; padding: 0 48px 0 44px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--bg-card) 88%, transparent); color: var(--text-primary); font: inherit; font-size: 14px; }
+.searchField input::placeholder { color: var(--text-muted); }
+.searchField input:focus { border-color: var(--accent-blue); outline: 2px solid color-mix(in srgb, var(--accent-blue) 28%, transparent); outline-offset: 1px; }
+.searchField button { position: absolute; right: 2px; display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; }
+.searchField button:hover { background: var(--bg-hover); color: var(--text-primary); }
+.filters { display: flex; gap: 4px; width: fit-content; margin: 20px 0 24px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg-secondary) 82%, transparent); }
+.filters button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
+.filters button:hover { color: var(--text-primary); }
+.filters button[aria-pressed='true'] { background: var(--text-primary); color: var(--bg-primary); }
+.editorGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.editorCard { display: grid; min-height: 258px; grid-template-rows: auto auto 1fr auto; gap: 15px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg-secondary) 90%, transparent); }
+.editorCard:hover { border-color: color-mix(in srgb, var(--editor-accent) 62%, var(--border)); }
+.editorIdentity { display: flex; min-width: 0; align-items: center; gap: 13px; }
+.editorIcon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid color-mix(in srgb, var(--editor-accent) 36%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--editor-accent) 10%, var(--bg-card)); color: var(--editor-accent); }
+.editorIdentity h3 { margin: 0; font-size: 17px; letter-spacing: 0; }
+.editorIdentity div > span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; }
+.availability { display: flex; width: fit-content; min-height: 26px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid color-mix(in srgb, #22c55e 32%, var(--border)); border-radius: 999px; background: color-mix(in srgb, #22c55e 8%, transparent); color: #4ade80; font-size: 11px; font-weight: 700; }
+.availability[data-status='planned'] { border-color: color-mix(in srgb, #f59e0b 34%, var(--border)); background: color-mix(in srgb, #f59e0b 8%, transparent); color: #fbbf24; }
+.editorCard > p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
+.cardActions { display: flex; align-items: center; gap: 8px; }
+.installAction, .setupAction, .roadmapAction { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-size: 12px; font-weight: 800; text-decoration: none; }
+.installAction { min-width: 116px; padding: 0 16px; border: 1px solid var(--editor-accent); background: var(--editor-accent); color: #071018; }
+.installAction:hover { filter: brightness(1.08); }
+.setupAction, .roadmapAction { padding: 0 12px; color: var(--text-secondary); }
+.setupAction:hover, .roadmapAction:hover { background: var(--bg-hover); color: var(--text-primary); }
+.roadmapAction { padding-left: 0; color: var(--editor-accent); }
+.noResults { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 8px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-secondary); text-align: center; }
+.noResults strong { color: var(--text-primary); }
+.noResults p { margin: 0; font-size: 13px; }
+.noResults button { min-height: 44px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
+.waiting p { color: var(--text-secondary); }
 .privacy { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin-top: 72px; padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
 .privacy p { max-width: 650px; margin: 0; color: var(--text-secondary); line-height: 1.65; }
 .editorIntro { position: relative; }
@@ -45,14 +73,20 @@
 .steps p { margin: 0; font-size: 15px; }
 .waiting { padding: 28px 0; }
 .waiting p { max-width: 680px; line-height: 1.6; }
-.page a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
+.page a:focus-visible, .page button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
 
 @media (max-width: 640px) {
   .page { padding-right: 18px; padding-left: 18px; }
-  .intro, .editorIntro { padding: 62px 0 48px; }
-  .intro h1, .editorIntro h1 { font-size: 44px; }
+  .intro { grid-template-columns: 1fr; gap: 20px; padding: 48px 0 38px; }
+  .editorIntro { padding: 62px 0 48px; }
+  .intro h1, .editorIntro h1 { font-size: 40px; }
   .intro > span, .editorIntro > span { font-size: 15px; }
-  .row { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; }
-  .row > span { display: none; }
-  .planned > div:not(.sectionHeading), .privacy { grid-template-columns: 1fr; gap: 7px; }
+  .pickerHeading { grid-template-columns: 1fr; gap: 16px; }
+  .pickerHeading > div:first-child { justify-content: space-between; }
+  .searchField { height: 50px; }
+  .filters { width: 100%; overflow-x: auto; }
+  .filters button { flex: 1 0 auto; }
+  .editorGrid { grid-template-columns: 1fr; }
+  .editorCard { min-height: 245px; }
+  .privacy { grid-template-columns: 1fr; gap: 7px; }
 }
\ No newline at end of file
diff --git a/components/EditorBrandIcon.jsx b/components/EditorBrandIcon.jsx
new file mode 100644
index 0000000..b79fed2
--- /dev/null
+++ b/components/EditorBrandIcon.jsx
@@ -0,0 +1,28 @@
+import { Atom, Code2, Orbit, Terminal } from 'lucide-react';
+import { siCursor, siJetbrains, siVscodium, siWindsurf } from 'simple-icons';
+
+const brandIcons = {
+  cursor: siCursor,
+  jetbrains: siJetbrains,
+  vscodium: siVscodium,
+  windsurf: siWindsurf,
+};
+
+const fallbackIcons = {
+  antigravity: Orbit,
+  cli: Terminal,
+  positron: Atom,
+};
+
+export default function EditorBrandIcon({ editor, size = 28 }) {
+  const brand = brandIcons[editor.slug];
+  if (brand) {
+    return (
+      <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
+        <path d={brand.path} fill="currentColor" />
+      </svg>
+    );
+  }
+  const Icon = fallbackIcons[editor.slug] || Code2;
+  return <Icon size={size} strokeWidth={1.8} aria-hidden="true" />;
+}
\ No newline at end of file
diff --git a/components/EditorPicker.jsx b/components/EditorPicker.jsx
new file mode 100644
index 0000000..299233f
--- /dev/null
+++ b/components/EditorPicker.jsx
@@ -0,0 +1,100 @@
+'use client';
+
+import Link from 'next/link';
+import { CheckCircle2, ChevronRight, Clock3, Download, ExternalLink, Search, X } from 'lucide-react';
+import { useState } from 'react';
+import { track } from '../lib/analytics.js';
+import { attributedInstallUrl, filterEditorChannels } from '../lib/editor-distribution.js';
+import EditorBrandIcon from './EditorBrandIcon.jsx';
+import styles from '../app/plugins/plugins.module.css';
+
+const filters = [
+  { value: 'all', label: 'All' },
+  { value: 'available', label: 'Available now' },
+  { value: 'planned', label: 'Coming next' },
+];
+
+export default function EditorPicker({ editors }) {
+  const [query, setQuery] = useState('');
+  const [status, setStatus] = useState('all');
+  const results = filterEditorChannels(editors, { query, status });
+
+  function trackInstall(editor) {
+    track('extension_install_clicked', { source: 'plugin_directory', action: editor.slug });
+  }
+
+  return (
+    <section className={styles.picker} aria-labelledby="editor-picker-title">
+      <div className={styles.pickerHeading}>
+        <div>
+          <h2 id="editor-picker-title">Find your editor</h2>
+          <span>{results.length} {results.length === 1 ? 'connection' : 'connections'}</span>
+        </div>
+        <div className={styles.searchField}>
+          <Search size={18} aria-hidden="true" />
+          <label htmlFor="editor-search">Search editors</label>
+          <input
+            id="editor-search"
+            type="search"
+            value={query}
+            onChange={event => setQuery(event.target.value)}
+            placeholder="Search VS Code, Cursor, JetBrains..."
+            autoComplete="off"
+          />
+          {query ? <button type="button" onClick={() => setQuery('')} aria-label="Clear editor search"><X size={17} aria-hidden="true" /></button> : null}
+        </div>
+      </div>
+
+      <div className={styles.filters} aria-label="Filter editor connections">
+        {filters.map(filter => (
+          <button key={filter.value} type="button" aria-pressed={status === filter.value} onClick={() => setStatus(filter.value)}>
+            {filter.label}
+          </button>
+        ))}
+      </div>
+
+      {results.length ? (
+        <div className={styles.editorGrid} aria-live="polite">
+          {results.map(editor => {
+            const available = editor.status === 'available';
+            const installUrl = attributedInstallUrl(editor);
+            return (
+              <article className={styles.editorCard} key={editor.slug} style={{ '--editor-accent': editor.accent }}>
+                <div className={styles.editorIdentity}>
+                  <span className={styles.editorIcon}><EditorBrandIcon editor={editor} /></span>
+                  <div>
+                    <h3>{editor.name}</h3>
+                    <span>{editor.family} connection</span>
+                  </div>
+                </div>
+                <div className={styles.availability} data-status={editor.status}>
+                  {available ? <CheckCircle2 size={15} aria-hidden="true" /> : <Clock3 size={15} aria-hidden="true" />}
+                  {available ? (editor.slug === 'vscode' ? 'Marketplace' : 'VSIX ready') : 'In development'}
+                </div>
+                <p>{available ? `Show up on the live globe directly from ${editor.name}.` : `A native ${editor.family} client is on the roadmap.`}</p>
+                <div className={styles.cardActions}>
+                  {available ? (
+                    <a className={styles.installAction} href={installUrl} target="_blank" rel="noreferrer" onClick={() => trackInstall(editor)}>
+                      {editor.slug === 'vscode' ? <ExternalLink size={17} aria-hidden="true" /> : <Download size={17} aria-hidden="true" />}
+                      {editor.slug === 'vscode' ? 'Install' : 'Download'}
+                    </a>
+                  ) : null}
+                  <Link className={available ? styles.setupAction : styles.roadmapAction} href={`/plugins/${editor.slug}`}>
+                    {available ? 'Setup guide' : 'View roadmap'}<ChevronRight size={16} aria-hidden="true" />
+                  </Link>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      ) : (
+        <div className={styles.noResults} role="status">
+          <Search size={24} aria-hidden="true" />
+          <strong>No editor found</strong>
+          <p>Try another name or view all connections.</p>
+          <button type="button" onClick={() => { setQuery(''); setStatus('all'); }}>Show all editors</button>
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/lib/editor-distribution.js b/lib/editor-distribution.js
index 72f2b19..4a5e15c 100644
--- a/lib/editor-distribution.js
+++ b/lib/editor-distribution.js
@@ -2,21 +2,31 @@ const MARKETPLACE_URL = 'https://marketplace.visualstudio.com/items?itemName=dev
 const VSIX_URL = 'https://github.com/sajeetharan/devglobe/releases/download/v0.3.0/devglobe-developer-discovery-0.3.0.vsix';
 
 export const editorChannels = [
-  { slug: 'vscode', name: 'VS Code', family: 'VS Code', status: 'available', installLabel: 'Install from Marketplace', installUrl: MARKETPLACE_URL, accent: '#23a8f2' },
-  { slug: 'cursor', name: 'Cursor', family: 'VS Code', status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#d8ff4f' },
-  { slug: 'windsurf', name: 'Windsurf', family: 'VS Code', status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#46d8bd' },
-  { slug: 'vscodium', name: 'VSCodium', family: 'VS Code', status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#2f80ed' },
-  { slug: 'positron', name: 'Positron', family: 'VS Code', status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#ffcb4c' },
-  { slug: 'void', name: 'Void', family: 'VS Code', status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#ef5350' },
-  { slug: 'antigravity', name: 'Antigravity', family: 'VS Code', status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#ff7a45' },
-  { slug: 'jetbrains', name: 'JetBrains IDEs', family: 'JetBrains', status: 'planned', accent: '#ff4f80' },
-  { slug: 'cli', name: 'CLI agents', family: 'Terminal', status: 'planned', accent: '#62d58b' },
+  { slug: 'vscode', name: 'VS Code', family: 'VS Code', aliases: ['visual studio code', 'microsoft'], status: 'available', installLabel: 'Install from Marketplace', installUrl: MARKETPLACE_URL, accent: '#23a8f2' },
+  { slug: 'cursor', name: 'Cursor', family: 'VS Code', aliases: ['anysphere', 'ai editor'], status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#d8ff4f' },
+  { slug: 'windsurf', name: 'Windsurf', family: 'VS Code', aliases: ['codeium', 'ai editor'], status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#46d8bd' },
+  { slug: 'vscodium', name: 'VSCodium', family: 'VS Code', aliases: ['codium', 'open source'], status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#2f80ed' },
+  { slug: 'positron', name: 'Positron', family: 'VS Code', aliases: ['data science', 'python', 'r'], status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#ffcb4c' },
+  { slug: 'void', name: 'Void', family: 'VS Code', aliases: ['ai editor'], status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#ef5350' },
+  { slug: 'antigravity', name: 'Antigravity', family: 'VS Code', aliases: ['google', 'ai editor'], status: 'available', installLabel: 'Download VSIX', installUrl: VSIX_URL, accent: '#ff7a45' },
+  { slug: 'jetbrains', name: 'JetBrains IDEs', family: 'JetBrains', aliases: ['intellij', 'webstorm', 'pycharm', 'phpstorm', 'rider'], status: 'planned', accent: '#ff4f80' },
+  { slug: 'cli', name: 'CLI agents', family: 'Terminal', aliases: ['claude code', 'codex', 'opencode', 'command line'], status: 'planned', accent: '#62d58b' },
 ];
 
 export function getEditorChannel(slug) {
   return editorChannels.find(editor => editor.slug === slug) || null;
 }
 
+export function filterEditorChannels(editors, { query = '', status = 'all' } = {}) {
+  const normalizedQuery = String(query).trim().toLowerCase();
+  return editors.filter(editor => {
+    if (status !== 'all' && editor.status !== status) return false;
+    if (!normalizedQuery) return true;
+    return [editor.name, editor.family, editor.slug, ...(editor.aliases || [])]
+      .some(value => value.toLowerCase().includes(normalizedQuery));
+  });
+}
+
 export function editorInstallSteps(editor) {
   if (!editor || editor.status !== 'available') return [];
   if (editor.slug === 'vscode') {
diff --git a/package-lock.json b/package-lock.json
index 7ec76e9..432dce1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "d3": "^7.9.0",
         "dotenv": "^16.4.5",
         "jose": "^6.2.4",
+        "lucide-react": "^1.38.0",
         "next": "^15.3.0",
         "node-fetch": "^3.3.2",
         "react": "^19.2.8",
@@ -7852,6 +7853,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.38.0",
+      "resolved": "https://ms-feed-25.pkgs.visualstudio.com/1es-public/_packaging/npm-public/npm/registry/lucide-react/-/lucide-react-1.38.0.tgz",
+      "integrity": "sha1-oUZkvQRqTHv8hHOUv4APMDDlGr0=",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://ms-feed-25.pkgs.visualstudio.com/1es-public/_packaging/npm-public/npm/registry/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index 124e9de..439a985 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "d3": "^7.9.0",
     "dotenv": "^16.4.5",
     "jose": "^6.2.4",
+    "lucide-react": "^1.38.0",
     "next": "^15.3.0",
     "node-fetch": "^3.3.2",
     "react": "^19.2.8",
diff --git a/tests/editor-distribution.test.js b/tests/editor-distribution.test.js
index 7f3cf17..c09d85c 100644
--- a/tests/editor-distribution.test.js
+++ b/tests/editor-distribution.test.js
@@ -1,6 +1,6 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { attributedInstallUrl, editorChannels, editorInstallSteps, getEditorChannel } from '../lib/editor-distribution.js';
+import { attributedInstallUrl, editorChannels, editorInstallSteps, filterEditorChannels, getEditorChannel } from '../lib/editor-distribution.js';
 
 test('defines unique canonical editor channels', () => {
   const slugs = editorChannels.map(editor => editor.slug);
@@ -20,4 +20,12 @@ test('only available clients expose installation steps and attributed links', ()
   assert.match(installUrl.pathname, /v0\.3\.0\/devglobe-developer-discovery-0\.3\.0\.vsix$/);
   assert.equal(installUrl.searchParams.get('utm_campaign'), 'cursor');
   assert.equal(installUrl.searchParams.get('utm_medium'), 'plugin_directory');
+});
+
+test('filters editor connections by status, name, family, and aliases', () => {
+  assert.deepEqual(filterEditorChannels(editorChannels, { query: 'cursor' }).map(editor => editor.slug), ['cursor']);
+  assert.deepEqual(filterEditorChannels(editorChannels, { query: 'pycharm' }).map(editor => editor.slug), ['jetbrains']);
+  assert.deepEqual(filterEditorChannels(editorChannels, { query: 'claude' }).map(editor => editor.slug), ['cli']);
+  assert.equal(filterEditorChannels(editorChannels, { query: 'vs code', status: 'available' }).length, 7);
+  assert.deepEqual(filterEditorChannels(editorChannels, { status: 'planned' }).map(editor => editor.slug), ['jetbrains', 'cli']);
 });
\ No newline at end of file