feat: Premium Dashboard Redesign Components by techwavedev · Pull Request #28 · techwavedev/openminions

techwavedev · 2026-04-05T00:07:59Z

Refactors basic components into the requested 'opensquad' inspired deep space glassmorphic UI.

Updates App, SquadSelector, SquadCard, and StatusBar to the deep space glassmorphic design utilizing the new core Tailwind aesthetic. Closes #7 (partial completion)

Copilot

Pull request overview

Refactors the dashboard UI toward an “opensquad”-inspired glassmorphic theme by moving core layout and squad-monitoring components from inline styles to Tailwind-based styling and adding iconography.

Changes:

Reworked overall app layout (header/navigation + glass-panel main grid + styled footer).
Restyled squad selection UI (selector + cards) with new visual hierarchy and progress visualization.
Restyled status bar (step indicator, elapsed timer, handoff display, connection indicator) with lucide icons and Tailwind classes.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
ui/src/App.tsx	Adds new header/nav and glassmorphic main layout containers around existing content.
ui/src/components/StatusBar.tsx	Updates footer/status bar UI to the new theme with icons and richer status presentation.
ui/src/components/SquadSelector.tsx	Converts squad list sidebar to themed panel styling and adds an empty-state message.
ui/src/components/SquadCard.tsx	Redesigns squad list items, including a visual progress bar and selection affordances.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-05T00:11:56Z

+              <Users size={20} className="text-gray-500" />
+            </div>
+            <p className="text-sm text-gray-500 font-medium">No squads deployed</p>
+            <p className="text-xs text-gray-600 mt-1">Run \`openminions run --intent "..."\` to spawn a new squad.</p>


The empty-state instruction text includes literal backslashes before the backticks (e.g. ```), so the UI will render the backslashes. If the intent is to show a CLI command, consider using a element (or remove the backslashes) so the command renders correctly.
Suggested change <p className="text-xs text-gray-600 mt-1">Run \`openminions run --intent "..."\` to spawn a new squad.</p> <p className="text-xs text-gray-600 mt-1"> Run <code>openminions run --intent "..."</code> to spawn a new squad. </p>

Copilot · 2026-04-05T00:11:56Z

      </div>
-      <div style={{ flex: 1, overflowY: "auto" }}>
+
+      <div className="flex-1 overflow-y-auto p-3 space-y-2 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">


scrollbar-thin / scrollbar-thumb-* / scrollbar-track-* classes won’t have any effect with the current Tailwind setup because tailwind.config.js has no scrollbar plugin configured. Either add a Tailwind scrollbar plugin (and configure it) or remove these classes to avoid relying on non-existent utilities.

Suggested change

<div className="flex-1 overflow-y-auto p-3 space-y-2 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">

<div className="flex-1 overflow-y-auto p-3 space-y-2">

Copilot · 2026-04-05T00:11:56Z

-        }}
-      >
-        Squads
+    <div className="flex flex-col h-full relative z-10 w-full">


This component used to be an <aside> (landmark) but is now a plain <div>, which is a regression for screen-reader landmark navigation. Consider switching back to <aside> (optionally with an aria-label) since this is the left sidebar navigation.

Copilot · 2026-04-05T00:11:56Z

+        {state?.step && (
+          <div className="flex items-center mt-1">
+            <div className="h-1 flex-1 bg-black/50 rounded-full overflow-hidden">
+               <div 
+                  className="h-full bg-gradient-to-r from-secondary to-primary transition-all duration-500 rounded-full"
+                  style={{ width: `${(state.step.current / state.step.total) * 100}%` }}
+               />


The progress bar width calculation divides by state.step.total. total can be 0 when a squad’s pipeline_sequence is empty (runner sets total_steps = len(pipeline)), which will yield Infinity%/NaN% and break the inline style. Guard against total <= 0 and clamp the computed percent to [0, 100].

Copilot · 2026-04-05T00:11:56Z

+              <span className="text-primary font-bold">{state.handoff.from}</span>
+              <span className="text-gray-600">→</span>
+              <span className="text-secondary font-bold">{state.handoff.to}</span>
+              <span className="text-gray-400 truncate flex-1 italic bg-white/5 px-2 py-0.5 rounded ml-2">


The handoff message is truncated but no longer exposes the full content via a tooltip/title. Since the text is intentionally truncated, add a title (or other affordance) so users can still read the full handoff when it overflows.

Suggested change

<span className="text-gray-400 truncate flex-1 italic bg-white/5 px-2 py-0.5 rounded ml-2">

<span

className="text-gray-400 truncate flex-1 italic bg-white/5 px-2 py-0.5 rounded ml-2"

title={state.handoff.message}

>

Copilot · 2026-04-05T00:11:57Z

+      </span>
+      <div className="relative flex h-2.5 w-2.5">
+        {connected && (
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>


The animated ping indicator runs whenever connected. Consider respecting reduced-motion preferences (e.g., using a motion-reduce override) to avoid forcing animation for users who disable motion.

Suggested change

<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>

<span className="animate-ping motion-reduce:animate-none absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>

Copilot · 2026-04-05T00:11:57Z

+        <nav className="flex space-x-1">
+          {[
+            { id: "overview", icon: Activity, label: "Live Overview" },
+            { id: "builder", icon: PlusCircle, label: "Squad Builder" },
+            { id: "map", icon: Map, label: "Process Map" },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all duration-300 ${
+                activeTab === tab.id
+                  ? "bg-white/10 text-white shadow-[inset_0_1px_rgba(255,255,255,0.1)]"
+                  : "text-gray-400 hover:text-gray-200 hover:bg-white/5"
+              }`}
+            >
+              <tab.icon size={16} className={activeTab === tab.id ? "text-secondary" : ""} />
+              {tab.label}
+            </button>
+          ))}
+        </nav>


The header nav suggests multiple views (Overview / Squad Builder / Process Map) and updates activeTab, but the main content never changes. This creates a UI affordance that implies functionality that isn’t implemented. Either conditionally render the corresponding content (or a clear placeholder/disabled state) or remove the tabs until those views exist.

feat: Premium Dashboard Redesign Components

beda1a3

Updates App, SquadSelector, SquadCard, and StatusBar to the deep space glassmorphic design utilizing the new core Tailwind aesthetic. Closes #7 (partial completion)

Copilot AI review requested due to automatic review settings April 5, 2026 00:08

techwavedev merged commit 681deab into main Apr 5, 2026

techwavedev deleted the feat/premium-dashboard-components branch April 5, 2026 00:08

Copilot started reviewing on behalf of techwavedev April 5, 2026 00:08 View session

Copilot AI reviewed Apr 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Premium Dashboard Redesign Components#28

feat: Premium Dashboard Redesign Components#28
techwavedev merged 1 commit intomainfrom
feat/premium-dashboard-components

techwavedev commented Apr 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div className="flex-1 overflow-y-auto p-3 space-y-2 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
	<div className="flex-1 overflow-y-auto p-3 space-y-2">

	<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>
	<span className="animate-ping motion-reduce:animate-none absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>

Conversation

techwavedev commented Apr 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants