fix: update app logo and active tab fix

[vishnurk6247]

Summary by CodeRabbit

• New Features

  • Added API Services navigation option for eligible users.

• Bug Fixes

  • Fixed agent display names to correctly reflect resource information.

• UI Updates

  • Redesigned topbar with updated branding and "POWERED BY" label.
  • Improved navigation active state detection for more accurate routing.
  • Refined topbar spacing and typography for better visual clarity.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Three separate component and layout modifications: the topbar now displays a static wavefront image and revised "POWERED BY" label, the agent detail page simplifies display name construction by removing prefilled values concatenation, and the app layout strengthens navigation item identification through unique IDs and strict pathname matching while conditionally inserting API Services navigation.

Changes

Cohort / File(s)	Summary
Topbar UI Refinement wavefront/client/src/components/topbar/Topbar.tsx	Replaced RootfloIcon with static wavefront.png image in topbar anchor; removed "AI Middleware" label and uncommented "Powered by" block; replaced with compact "POWERED BY" label and RootfloIcon; adjusted text size, color opacity, and gap spacing.
Agent Display Name Logic wavefront/client/src/pages/apps/[appId]/agents/[id].tsx	Removed prefilledValuesString construction and its concatenation in display_name field; display_name now concatenates only resource_name (if present) and name.
Navigation Item Management wavefront/client/src/pages/apps/layout.tsx	Added unique id fields to navigation items (agents, datasources, functions, llm-repository, model-inference, knowledge-bases, voice-agents, workflows, API Services); replaced active-item detection from pathname.includes() to strict item.id comparison; updated list key from item.name to item.id; introduced conditional API Services nav item insertion based on appEnv.isApiServicesEnabled.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• layout.tsx: Navigation item ID logic change requires verification that strict pathname segment matching does not break navigation state detection across route transitions.
• layout.tsx: Conditional API Services nav item insertion should be validated to ensure proper rendering state based on appEnv configuration.
• agents/[id].tsx: Confirm that removing prefilledValuesString from display_name does not affect downstream agent identification or filtering logic.

Suggested reviewers

• vizsatiz

Poem

🐰 A topbar made fresh with a logo so bright,
Navigation IDs now strict, keeping routes tight,
Agent names simplified, no prefills to weigh,
The UI hops forward in its clever new way! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: update app logo and active tab fix' addresses two distinct changes: logo updates and active tab detection logic. However, it is repetitive (uses 'fix' twice) and the actual changeset includes a third significant change (prefilled values removal), making the title partially related but incomplete.	Consider clarifying the title to be more specific. Suggested: 'fix: update app logo, active tab detection, and remove prefilled values from agent display' or split into separate commits if these are distinct concerns.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore/update-logo

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

wavefront/client/src/pages/apps/[appId]/agents/[id].tsx (1)

94-115: Avoid using display_name as the tool identity (selection/YAML sync may break after this change).

Since selection is matched by selected.value === tool.display_name (Line 131), changing display_name formatting risks breaking existing selections and tool syncing. Prefer storing/matching by a stable key (e.g., tool.id) and keep display_name only for rendering.

  const toolsDetails = useMemo(() => {
    return availableTools.map((tool) => {
      ...
      return {
+       id: tool.id,
        name: tool.name,
        prefilled_values: prefilledValue,
        display_name: `${tool.resource_name ? tool.resource_name + ' - ' : ''}${tool.name}`,
        description: tool.description,
      };
    });
  }, [availableTools]);

- const tools = toolsDetails.filter((tool) => selectedTools.some((selected) => selected.value === tool.display_name));
+ const tools = toolsDetails.filter((tool) => selectedTools.some((selected) => selected.id === tool.id));

Also applies to: 131-131

wavefront/client/src/components/topbar/Topbar.tsx (1)

44-46: Logo asset + a11y: ensure /wavefront.png is shipped, and fix semantics/alt/size.

Consider switching the wrapper to a <button>/<Link> (or add role="button" tabIndex=0 + key handlers), and align alt + add height to reduce layout shift.

- <a className="flex min-w-[240px] cursor-pointer justify-center border-r px-8 py-5" onClick={handleNavIconClick}>
-   <img src="/wavefront.png" alt="Rootflo Icon" className="object-contain" width={149} />
- </a>
+ <button
+   type="button"
+   className="flex min-w-[240px] cursor-pointer justify-center border-r px-8 py-5"
+   onClick={handleNavIconClick}
+ >
+   <img
+     src="/wavefront.png"
+     alt="Wavefront"
+     className="object-contain"
+     width={149}
+     height={32}
+     loading="eager"
+     decoding="async"
+   />
+ </button>

wavefront/client/src/pages/apps/layout.tsx (1)

109-114: Harden active-tab detection (avoid relying on raw split index).

This works for /apps/:appId/:section/..., but is fragile if the path shape changes. At least guard the segment extraction (or use router matching utilities).

- const isActive = item.id === location.pathname.split('/')[3];
+ const section = location.pathname.split('/')[3] ?? '';
+ const isActive = item.id === section;

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aaaf27a and 67034bd.

⛔ Files ignored due to path filters (1)

• wavefront/client/public/wavefront.png is excluded by !**/*.png

📒 Files selected for processing (3)

• wavefront/client/src/components/topbar/Topbar.tsx (1 hunks)
• wavefront/client/src/pages/apps/[appId]/agents/[id].tsx (1 hunks)
• wavefront/client/src/pages/apps/layout.tsx (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

wavefront/client/src/pages/apps/layout.tsx (1)

wavefront/client/src/assets/icons/index.ts (1)

• PhoneIcon (7-7)

🔇 Additional comments (3)

wavefront/client/src/components/topbar/Topbar.tsx (1)

48-52: “POWERED BY” block looks fine; sizing is explicit.

wavefront/client/src/pages/apps/layout.tsx (2)

17-86: Nav item ids matching route segments is a solid improvement.

---

88-98: Conditional insertion of “API Services” is clear and keeps ordering predictable.