Switch CLI parsing to TextFSM and polish topology/workbench UX.

Use custom cli_templates plus community ntc-templates for LLDP and port traffic across ZTE/Huawei/Cisco/H3C/Juniper/Nokia, drop regex parsers, and surface Admin/Phy/Prot on port discover. Also batch-add topology NEs and tighten workbench branding.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/pages/WorkbenchPage.tsx

@@ -1,6 +1,7 @@
+import { useMemo } from "react";
 import { useI18n } from "../i18n";
 import { WorkbenchCardIcon } from "../components/WorkbenchCardIcon";
-import { modulesInSection, type WorkbenchSection } from "../config/modules";
+import { modulesInSection, type ModuleDefinition, type WorkbenchSection } from "../config/modules";
 import { openOrFocusModule } from "../utils/moduleWindows";
 import { useAuth } from "../auth/AuthContext";
 
@@ -10,34 +11,49 @@ export function WorkbenchPage() {
   const { t } = useI18n();
   const { isAdmin, hasScope } = useAuth();
 
+  const visibleBySection = useMemo(() => {
+    const canSee = (mod: ModuleDefinition) =>
+      !mod.workbenchHidden &&
+      (!mod.adminOnly || isAdmin) &&
+      (!mod.requiredScope || hasScope(mod.requiredScope) || isAdmin);
+
+    return Object.fromEntries(
+      SECTIONS.map((section) => [section, modulesInSection(section).filter(canSee)]),
+    ) as Record<WorkbenchSection, ModuleDefinition[]>;
+  }, [isAdmin, hasScope]);
+
   return (
     <div className="workbench">
-      {SECTIONS.map((section) => (
-        <section key={section} className="wb-section">
-          <h2 className="wb-section__title">{t(`workbench.${section}`)}</h2>
-          <div className="wb-grid">
-            {modulesInSection(section)
-              .filter((mod) => !mod.workbenchHidden)
-              .filter((mod) => !mod.adminOnly || isAdmin)
-              .filter((mod) => !mod.requiredScope || hasScope(mod.requiredScope) || isAdmin)
-              .map((mod) => (
-              <button
-                key={mod.moduleId}
-                type="button"
-                className="wb-card"
-                title={t("workbench.openModule")}
-                onClick={() => openOrFocusModule({ moduleId: mod.moduleId, path: mod.path })}
-              >
-                <WorkbenchCardIcon tone={mod.iconTone} />
-                <span className="wb-card__text">
+      <header className="wb-head">
+        <h1 className="wb-head__title">{t("workbench.title")}</h1>
+      </header>
+
+      {SECTIONS.map((section) => {
+        const mods = visibleBySection[section];
+        if (mods.length === 0) return null;
+        return (
+          <section key={section} className={`wb-section wb-section--${section}`}>
+            <div className="wb-section__head">
+              <h2 className="wb-section__title">{t(`workbench.${section}`)}</h2>
+              <span className="wb-section__count">{mods.length}</span>
+            </div>
+            <div className="wb-grid">
+              {mods.map((mod) => (
+                <button
+                  key={mod.moduleId}
+                  type="button"
+                  className={`wb-card wb-card--${mod.iconTone}`}
+                  title={t("workbench.openModule")}
+                  onClick={() => openOrFocusModule({ moduleId: mod.moduleId, path: mod.path })}
+                >
+                  <WorkbenchCardIcon tone={mod.iconTone} kind={mod.iconKind} />
                   <span className="wb-card__label">{t(mod.labelKey)}</span>
-                  {mod.descKey ? <span className="wb-card__desc">{t(mod.descKey)}</span> : null}
-                </span>
-              </button>
-            ))}
-          </div>
-        </section>
-      ))}
+                </button>
+              ))}
+            </div>
+          </section>
+        );
+      })}
     </div>
   );
 }