FN-7197: assign Compound Engineering a distinct sidebar icon
Give Compound Engineering its own Boxes glyph across plugin navigation and headers. - Register the Boxes lucide icon for plugin navigation so desktop and mobile sidebars can resolve it. - Switch the Compound Engineering manifest, plugin definition, and view header from Sparkles to Boxes. - Update navigation and manifest tests plus the release changeset for the published CLI bundle. Files changed: .changeset/FN-7197-compound-engineering-icon.md | 7 +++++++ .../app/components/__tests__/MobileNavBar.test.tsx | 2 +- .../app/components/__tests__/pluginNavIcon.test.ts | 14 ++++++++++++++ packages/dashboard/app/components/pluginNavIcon.tsx | 7 ++++++- plugins/fusion-plugin-compound-engineering/manifest.json | 2 +- .../src/__tests__/manifest.test.ts | 2 +- .../src/dashboard/CompoundEngineeringView.tsx | 12 +++++++++--- plugins/fusion-plugin-compound-engineering/src/index.ts | 2 +- 8 files changed, 40 insertions(+), 8 deletions(-) Fusion-Task-Id: FN-7197 Fusion-Task-Lineage: 03c67bfa-3e28-4a2a-b15e-b2c3576588c1 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
7
.changeset/FN-7197-compound-engineering-icon.md
Normal file
7
.changeset/FN-7197-compound-engineering-icon.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
summary: Compound Engineering now uses a distinct sidebar icon instead of duplicating Insights.
|
||||
category: fix
|
||||
dev: Plugin dashboard view icon changed Sparkles → Boxes; registered `boxes` in dashboard PLUGIN_NAV_ICON_MAP so desktop + mobile nav resolve it.
|
||||
@@ -650,7 +650,7 @@ describe("MobileNavBar", () => {
|
||||
pluginDashboardViews={[
|
||||
{
|
||||
pluginId: "fusion-plugin-compound-engineering",
|
||||
view: { viewId: "compound-engineering", label: "Compound Engineering", componentPath: "./CompoundEngineeringView", icon: "Sparkles", placement: "primary", order: 36 },
|
||||
view: { viewId: "compound-engineering", label: "Compound Engineering", componentPath: "./CompoundEngineeringView", icon: "Boxes", placement: "primary", order: 36 },
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Boxes, Grid3X3 } from "lucide-react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { getPluginNavIcon } from "../pluginNavIcon";
|
||||
|
||||
describe("getPluginNavIcon", () => {
|
||||
it("resolves the Compound Engineering Boxes icon to the registered lucide glyph", () => {
|
||||
expect(getPluginNavIcon("Boxes")).toBe(Boxes);
|
||||
});
|
||||
|
||||
it("falls back to Grid3X3 for empty or unknown icon names", () => {
|
||||
expect(getPluginNavIcon()).toBe(Grid3X3);
|
||||
expect(getPluginNavIcon("not-a-real-plugin-icon")).toBe(Grid3X3);
|
||||
});
|
||||
});
|
||||
@@ -1,9 +1,14 @@
|
||||
import { Activity, Bot, Brain, CheckSquare, Clock, FileText, Folder, GitBranch, Grid3X3, LayoutGrid, Mail, Map, MessageSquare, Monitor, Search, Sparkles, Target, Workflow, Zap } from "lucide-react";
|
||||
import { Activity, Bot, Boxes, Brain, CheckSquare, Clock, FileText, Folder, GitBranch, Grid3X3, LayoutGrid, Mail, Map, MessageSquare, Monitor, Search, Sparkles, Target, Workflow, Zap } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
/*
|
||||
FNXC:Navigation 2026-06-28-00:00:
|
||||
Compound Engineering must not reuse Sparkles because Insights already owns that left-sidebar glyph. Register Boxes so plugin desktop and mobile nav render the distinct icon instead of the Grid3X3 fallback.
|
||||
*/
|
||||
const PLUGIN_NAV_ICON_MAP: Record<string, LucideIcon> = {
|
||||
activity: Activity,
|
||||
bot: Bot,
|
||||
boxes: Boxes,
|
||||
brain: Brain,
|
||||
checksquare: CheckSquare,
|
||||
clock: Clock,
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"viewId": "compound-engineering",
|
||||
"label": "Compound Engineering",
|
||||
"componentPath": "./dashboard-view",
|
||||
"icon": "Sparkles",
|
||||
"icon": "Boxes",
|
||||
"placement": "primary",
|
||||
"order": 36
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ describe("compound engineering plugin manifest", () => {
|
||||
viewId: "compound-engineering",
|
||||
label: "Compound Engineering",
|
||||
componentPath: "./dashboard-view",
|
||||
icon: "Sparkles",
|
||||
icon: "Boxes",
|
||||
placement: "primary",
|
||||
order: 36,
|
||||
},
|
||||
|
||||
@@ -20,7 +20,7 @@ const CE_PLUGIN_ID = "fusion-plugin-compound-engineering";
|
||||
* The dashboard surface keeps CE-specific data-testid values and semantics intact while adding shared Fusion classes to panels and controls so plugin layout inherits the system button/card rhythm.
|
||||
*
|
||||
* FNXC:CompoundEngineeringUI 2026-06-22-09:40:
|
||||
* The view renders the dashboard's shared ViewHeader (Sparkles icon + "Compound Engineering" title) at the top of its root container so the CE plugin surface reads with the same main-content header as native Fusion views. ViewHeader supplies the standard --space-lg top/side padding and is flex-shrink:0, so the root drops its own header padding and becomes a flex column whose content area (.ce-view-body) scrolls below the fixed header. The summary + "Start a stage" affordances move into ViewHeader's right-aligned actions slot, preserving their data-testid values (ce-summary, ce-start-action-header).
|
||||
* The view renders the dashboard's shared ViewHeader (Boxes icon + "Compound Engineering" title) at the top of its root container so the CE plugin surface reads with the same main-content header as native Fusion views. ViewHeader supplies the standard --space-lg top/side padding and is flex-shrink:0, so the root drops its own header padding and becomes a flex column whose content area (.ce-view-body) scrolls below the fixed header. The summary + "Start a stage" affordances move into ViewHeader's right-aligned actions slot, preserving their data-testid values (ce-summary, ce-start-action-header).
|
||||
*/
|
||||
|
||||
/** Resolve a lucide icon name (from the registry) to a component, with fallback. */
|
||||
@@ -365,10 +365,16 @@ export function CompoundEngineeringView(props: CompoundEngineeringViewProps) {
|
||||
// Once a session is active here, the flow renderer owns the surface until
|
||||
// closed — but the sessions panel stays visible so other sessions remain
|
||||
// one click away (switching does not stop the open one).
|
||||
/*
|
||||
FNXC:CompoundEngineering 2026-06-28-00:00:
|
||||
Compound Engineering uses Boxes for its nav and view header icon because Sparkles collides with Insights in the left sidebar. Keep this header aligned with the plugin dashboardViews icon so desktop, mobile, and in-view surfaces share the same no-overlap glyph.
|
||||
*/
|
||||
const HeaderIcon = LucideIcons.Boxes;
|
||||
|
||||
if (ceSession.session) {
|
||||
return (
|
||||
<div className="ce-view" data-testid="compound-engineering-view" data-mobile={mobile ? "true" : "false"}>
|
||||
<ViewHeader icon={LucideIcons.Sparkles} title="Compound Engineering" />
|
||||
<ViewHeader icon={HeaderIcon} title="Compound Engineering" />
|
||||
<div className="ce-view-body">
|
||||
<SessionsPanel
|
||||
sessions={ceSessions.sessions}
|
||||
@@ -395,7 +401,7 @@ export function CompoundEngineeringView(props: CompoundEngineeringViewProps) {
|
||||
return (
|
||||
<div className="ce-view" data-testid="compound-engineering-view" data-mobile={mobile ? "true" : "false"}>
|
||||
<ViewHeader
|
||||
icon={LucideIcons.Sparkles}
|
||||
icon={HeaderIcon}
|
||||
title="Compound Engineering"
|
||||
actions={
|
||||
hasAnything ? (
|
||||
|
||||
@@ -192,7 +192,7 @@ const plugin = definePlugin({
|
||||
viewId: "compound-engineering",
|
||||
label: "Compound Engineering",
|
||||
componentPath: "./dashboard-view",
|
||||
icon: "Sparkles",
|
||||
icon: "Boxes",
|
||||
placement: "primary",
|
||||
order: 36,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user