Merge pull request #23 from AgentWorkforce/updated-models

Updated models & display improvements

Author: khaliqgant

.gitignore

@@ -7,7 +7,9 @@ node_modules/
 
 # Build outputs
 dist/
+dist
 out/
+out
 .next/
 *.tsbuildinfo
 

packages/dashboard-server/src/server.ts

@@ -390,6 +390,7 @@ interface AgentStatus {
   isSpawned?: boolean;
   team?: string;
   avatarUrl?: string;
+  model?: string;
 }
 
 interface Attachment {
@@ -997,25 +998,56 @@ export async function startDashboard(
     app.use(express.static(dashboardDir, { extensions: ['html'] }));
 
     // Fallback for Next.js pages (e.g., /metrics -> /metrics.html)
-    // These are needed when a route exists as both a directory and .html file
-    const sendFileWithFallback = (res: express.Response, filePath: string) => {
+    // These are needed when a route exists as both a directory and .html file.
+    // For /app/* deep links we prefer redirecting to "/" if the export is missing,
+    // so users don’t get stuck on a plain-text error on refresh.
+    const uiMissingMessage =
+      'Dashboard UI file not found. Please reinstall using: curl -fsSL https://raw.githubusercontent.com/AgentWorkforce/relay/main/install.sh | bash';
+
+    const sendFileOr = (
+      res: express.Response,
+      filePath: string,
+      onError: (err: Error) => void
+    ) => {
       res.sendFile(filePath, (err) => {
         if (err && !res.headersSent) {
-          res.status(404).send('Dashboard UI file not found. Please reinstall using: curl -fsSL https://raw.githubusercontent.com/AgentWorkforce/relay/main/install.sh | bash');
+          onError(err);
         }
       });
     };
 
+    const sendFileOrText404 = (res: express.Response, filePath: string, message: string) => {
+      sendFileOr(res, filePath, () => {
+        res.status(404).send(message);
+      });
+    };
+
+    const sendFileOrRedirectRoot = (res: express.Response, filePath: string) => {
+      sendFileOr(res, filePath, () => {
+        // If the app entrypoint isn’t present, try to recover by sending users
+        // to the root page (if it exists). Otherwise keep the install hint.
+        if (fs.existsSync(path.join(dashboardDir, 'index.html'))) {
+          res.redirect(302, '/');
+          return;
+        }
+        res.status(404).send(uiMissingMessage);
+      });
+    };
+
     app.get('/metrics', (req, res) => {
-      sendFileWithFallback(res, path.join(dashboardDir, 'metrics.html'));
+      sendFileOrText404(
+        res,
+        path.join(dashboardDir, 'metrics.html'),
+        uiMissingMessage
+      );
     });
     app.get('/app', (req, res) => {
-      sendFileWithFallback(res, path.join(dashboardDir, 'app.html'));
+      sendFileOrRedirectRoot(res, path.join(dashboardDir, 'app.html'));
     });
     // Catch-all for /app/* routes - serve app.html and let client-side routing handle it
     // Express 5 requires named parameter for wildcards
     app.get('/app/{*path}', (req, res) => {
-      sendFileWithFallback(res, path.join(dashboardDir, 'app.html'));
+      sendFileOrRedirectRoot(res, path.join(dashboardDir, 'app.html'));
     });
   } else {
     // Serve a fallback page when dashboard UI files aren't available
@@ -2097,7 +2129,7 @@ export async function startDashboard(
       }
     }
 
-    // Mark spawned agents with isSpawned flag and team
+    // Mark spawned agents with isSpawned flag, team, and model
     if (spawnReader) {
       const activeWorkers = spawnReader.getActiveWorkers();
       for (const worker of activeWorkers) {
@@ -2107,6 +2139,13 @@ export async function startDashboard(
           if (worker.team) {
             agent.team = worker.team;
           }
+          // Extract model from spawn command (e.g., "codex --model gpt-5.2-codex" → "gpt-5.2-codex")
+          if (worker.cli) {
+            const modelMatch = worker.cli.match(/--model\s+(\S+)/);
+            if (modelMatch) {
+              agent.model = modelMatch[1];
+            }
+          }
         }
       }
     }

packages/dashboard/src/components/AgentCard.tsx

@@ -199,14 +199,14 @@ export function AgentCard({
               </span>
             )}
           </div>
-          {!displayNameOverride && (
+          {agent.cli && (
             <span className="text-[10px] text-text-muted truncate font-mono opacity-70 mt-0.5">
-              {agent.isLocal ? agent.daemonName || agent.machineId : getAgentBreadcrumb(agent.name)}
+              {agent.cli}
             </span>
           )}
-          {agent.profile?.model && (
-            <span className="text-[9px] text-accent-cyan font-mono opacity-80 mt-0.5" title={`Model: ${agent.profile.model}`}>
-              {agent.profile.model}
+          {(agent.model || agent.profile?.model) && (
+            <span className="text-[9px] text-accent-muted font-mono opacity-80 mt-0.5" title={`Model: ${agent.model || agent.profile?.model}`}>
+              {agent.model || agent.profile?.model}
             </span>
           )}
 
@@ -282,12 +282,6 @@ export function AgentCard({
                 title={statusTooltip}
               />
             )}
-            {agent.needsAttention && (
-              <div
-                className="w-2 h-2 rounded-full bg-warning animate-pulse shadow-[0_0_8px_rgba(255,107,53,0.5)]"
-                title="Needs Attention - Agent requires user input or has pending decisions"
-              />
-            )}
             {isStuck && (
               <div
                 className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-warning-light text-warning text-[10px] font-medium animate-pulse"
@@ -392,9 +386,9 @@ export function AgentCard({
       <div className="mt-3 flex justify-between items-center">
         <div className="flex gap-2 text-xs text-text-muted flex-wrap">
           {agent.cli && <span className="bg-bg-hover py-0.5 px-1.5 rounded">{agent.cli}</span>}
-          {agent.profile?.model && (
-            <span className="bg-accent-cyan/10 text-accent-cyan py-0.5 px-1.5 rounded font-mono text-[10px]" title={`Model: ${agent.profile.model}`}>
-              {agent.profile.model}
+          {(agent.model || agent.profile?.model) && (
+            <span className="bg-accent-cyan/10 text-accent-cyan py-0.5 px-1.5 rounded font-mono text-[10px]" title={`Model: ${agent.model || agent.profile?.model}`}>
+              {agent.model || agent.profile?.model}
             </span>
           )}
           {agent.messageCount !== undefined && agent.messageCount > 0 && (

packages/dashboard/src/components/AgentList.tsx

@@ -9,7 +9,7 @@ import React, { useState, useMemo, useEffect, useRef } from 'react';
 import type { Agent } from '../types';
 import { AgentCard } from './AgentCard';
 import { groupAgents, getGroupStats, filterAgents, getAgentDisplayName, type AgentGroup } from '../lib/hierarchy';
-import { STATUS_COLORS } from '../lib/colors';
+import { STATUS_COLORS, getAgentColor, getAgentInitials } from '../lib/colors';
 
 export interface AgentListProps {
   agents: Agent[];
@@ -47,6 +47,7 @@ export function AgentList({
 }: AgentListProps) {
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const [isPinnedExpanded, setIsPinnedExpanded] = useState(true);
+  const [isAllCollapsed, setIsAllCollapsed] = useState(false);
 
   // Filter out setup agents (temporary agents for provider auth)
   // and system agents like Dashboard (used for dashboard message sending)
@@ -102,14 +103,15 @@ export function AgentList({
     });
   };
 
-  // Derive from actual state so the label is always accurate
-  const allExpanded = groups.length > 0 && groups.every((g) => expandedGroups.has(g.prefix));
-
   const toggleAll = () => {
-    if (allExpanded) {
-      setExpandedGroups(new Set());
-    } else {
+    if (isAllCollapsed) {
+      // Expand: restore all groups and show everything
+      setIsAllCollapsed(false);
       setExpandedGroups(new Set(groups.map((g) => g.prefix)));
+      setIsPinnedExpanded(true);
+    } else {
+      // Collapse: hide entire panel contents
+      setIsAllCollapsed(true);
     }
   };
 
@@ -133,74 +135,76 @@ export function AgentList({
 
   return (
     <div className="flex flex-col gap-1">
-      {groups.length > 1 && (
-        <div className="flex justify-between items-center py-2 px-3 text-xs text-text-muted">
-          <span>{filteredAgents.length} agents</span>
-          <button
-            className="bg-transparent border-none text-accent cursor-pointer text-xs hover:underline"
-            onClick={toggleAll}
-          >
-            {allExpanded ? 'Collapse all' : 'Expand all'}
-          </button>
-        </div>
-      )}
+      <div className="flex justify-between items-center py-2 px-3 text-xs text-text-muted">
+        <span>{filteredAgents.length} {filteredAgents.length === 1 ? 'agent' : 'agents'}</span>
+        <button
+          className="bg-transparent border-none text-accent cursor-pointer text-xs hover:underline"
+          onClick={toggleAll}
+        >
+          {isAllCollapsed ? 'Expand all' : 'Collapse all'}
+        </button>
+      </div>
 
-      {/* Pinned Agents Section */}
-      {pinnedAgentsList.length > 0 && (
-        <div className="mb-2">
-          <button
-            className="flex items-center gap-2 w-full py-2 px-3 bg-transparent border-none cursor-pointer text-sm text-left rounded transition-colors duration-200 relative hover:bg-amber-400/5"
-            onClick={() => setIsPinnedExpanded(!isPinnedExpanded)}
-          >
-            <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-sm bg-amber-400" />
-            <PinnedChevronIcon expanded={isPinnedExpanded} />
-            <PinHeaderIcon />
-            <span className="font-semibold text-amber-400">Pinned</span>
-            <span className="text-text-muted font-normal">({pinnedAgentsList.length})</span>
-          </button>
+      {!isAllCollapsed && (
+        <>
+          {/* Pinned Agents Section */}
+          {pinnedAgentsList.length > 0 && (
+            <div className="mb-2">
+              <button
+                className="flex items-center gap-2 w-full py-2 px-3 bg-transparent border-none cursor-pointer text-sm text-left rounded transition-colors duration-200 relative hover:bg-amber-400/5"
+                onClick={() => setIsPinnedExpanded(!isPinnedExpanded)}
+              >
+                <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-sm bg-amber-400" />
+                <PinnedChevronIcon expanded={isPinnedExpanded} />
+                <PinHeaderIcon />
+                <span className="font-semibold text-amber-400">Pinned</span>
+                <span className="text-text-muted font-normal">({pinnedAgentsList.length})</span>
+              </button>
 
-          {isPinnedExpanded && (
-            <div className="py-1 pl-4 flex flex-col gap-1">
-              {pinnedAgentsList.map((agent) => (
-                <AgentCard
-                  key={agent.name}
-                  agent={agent}
-                  isSelected={agent.name === selectedAgent}
-                  compact={compact}
-                  isPinned={true}
-                  isMaxPinned={isMaxPinned}
-                  onClick={onAgentSelect}
-                  onMessageClick={onAgentMessage}
-                  onReleaseClick={onReleaseClick}
-                  onLogsClick={onLogsClick}
-                  onProfileClick={onProfileClick}
-                  onPinToggle={onPinToggle}
-                />
-              ))}
+              {isPinnedExpanded && (
+                <div className="py-1 pl-4 flex flex-col gap-1">
+                  {pinnedAgentsList.map((agent) => (
+                    <AgentCard
+                      key={agent.name}
+                      agent={agent}
+                      isSelected={agent.name === selectedAgent}
+                      compact={compact}
+                      isPinned={true}
+                      isMaxPinned={isMaxPinned}
+                      onClick={onAgentSelect}
+                      onMessageClick={onAgentMessage}
+                      onReleaseClick={onReleaseClick}
+                      onLogsClick={onLogsClick}
+                      onProfileClick={onProfileClick}
+                      onPinToggle={onPinToggle}
+                    />
+                  ))}
+                </div>
+              )}
             </div>
           )}
-        </div>
-      )}
 
-      {groups.map((group) => (
-        <AgentGroupComponent
-          key={group.prefix}
-          group={group}
-          isExpanded={expandedGroups.has(group.prefix)}
-          selectedAgent={selectedAgent}
-          compact={compact}
-          showStats={showGroupStats}
-          pinnedAgents={pinnedAgents}
-          isMaxPinned={isMaxPinned}
-          onToggle={() => toggleGroup(group.prefix)}
-          onAgentSelect={onAgentSelect}
-          onAgentMessage={onAgentMessage}
-          onReleaseClick={onReleaseClick}
-          onLogsClick={onLogsClick}
-          onProfileClick={onProfileClick}
-          onPinToggle={onPinToggle}
-        />
-      ))}
+          {groups.map((group) => (
+            <AgentGroupComponent
+              key={group.prefix}
+              group={group}
+              isExpanded={expandedGroups.has(group.prefix)}
+              selectedAgent={selectedAgent}
+              compact={compact}
+              showStats={showGroupStats}
+              pinnedAgents={pinnedAgents}
+              isMaxPinned={isMaxPinned}
+              onToggle={() => toggleGroup(group.prefix)}
+              onAgentSelect={onAgentSelect}
+              onAgentMessage={onAgentMessage}
+              onReleaseClick={onReleaseClick}
+              onLogsClick={onLogsClick}
+              onProfileClick={onProfileClick}
+              onPinToggle={onPinToggle}
+            />
+          ))}
+        </>
+      )}
     </div>
   );
 }
@@ -241,13 +245,11 @@ function AgentGroupComponent({
   const stats = showStats ? getGroupStats(group.agents) : null;
 
   // Check if this is a "solo" agent - single agent in group where name matches prefix
-  // (e.g., "Lead" agent with no team set creates a "lead" group)
   const isSoloAgent =
     group.agents.length === 1 &&
     group.agents[0].name.toLowerCase() === group.prefix.toLowerCase();
 
   // For solo agents, render just the card without a group header
-  // When collapsed, switch to compact mode since there's no group header to collapse to
   if (isSoloAgent) {
     const agent = group.agents[0];
     return (
@@ -256,7 +258,7 @@ function AgentGroupComponent({
           key={agent.name}
           agent={agent}
           isSelected={agent.name === selectedAgent}
-          compact={!isExpanded || compact}
+          compact={compact}
           isPinned={pinnedAgents.includes(agent.name)}
           isMaxPinned={isMaxPinned}
           onClick={onAgentSelect}