@swarmclawai/swarmclaw 0.7.2 → 0.7.3

package/src/components/layout/mobile-header.tsx

@@ -3,15 +3,24 @@
 import { useAppStore } from '@/stores/use-app-store'
 import { IconButton } from '@/components/shared/icon-button'
 import { NotificationCenter } from '@/components/shared/notification-center'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
 export function MobileHeader() {
   const toggleSidebar = useAppStore((s) => s.toggleSidebar)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
+  const agents = useAppStore((s) => s.agents)
   const session = currentSessionId ? sessions[currentSessionId] : null
+  const agent = session?.agentId ? agents[session.agentId] : null
+  const title = agent?.name || session?.name || 'SwarmClaw'
+  const subtitle = agent
+    ? 'Agent chat'
+    : session
+      ? 'Direct chat'
+      : 'Workspace'
 
   return (
-    <header className="flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.04] bg-bg/80 backdrop-blur-md shrink-0 min-h-[48px]"
+    <header className="flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.04] bg-bg/80 backdrop-blur-md shrink-0 min-h-[56px]"
       style={{ paddingTop: 'max(10px, env(safe-area-inset-top))' }}>
       <IconButton onClick={toggleSidebar} aria-label="Toggle sidebar">
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -20,13 +29,22 @@ export function MobileHeader() {
           <line x1="3" y1="17" x2="18" y2="17" />
         </svg>
       </IconButton>
-      <h1 className="font-display text-[14px] font-600 tracking-[-0.02em] flex-1 truncate">
-        {session ? (
-          <span className="block truncate">{session.name}</span>
-        ) : (
-          <span className="font-700">SwarmClaw</span>
-        )}
-      </h1>
+      {agent && (
+        <AgentAvatar
+          seed={agent.avatarSeed || null}
+          avatarUrl={agent.avatarUrl}
+          name={agent.name}
+          size={28}
+        />
+      )}
+      <div className="flex-1 min-w-0">
+        <h1 className="font-display text-[14px] font-600 tracking-[-0.02em] truncate">
+          {title}
+        </h1>
+        <p className="text-[10px] text-text-3/60 truncate mt-0.5">
+          {subtitle}
+        </p>
+      </div>
       <NotificationCenter />
     </header>
   )

package/src/components/plugins/plugin-list.tsx

@@ -62,8 +62,8 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   }, [tab, inSidebar, loadMarketplace])
 
   const pluginList = Object.values(plugins)
-  const corePlugins = useMemo(() => pluginList.filter((p) => p.source === 'local'), [pluginList])
-  const extensionPlugins = useMemo(() => pluginList.filter((p) => p.source !== 'local'), [pluginList])
+  const corePlugins = useMemo(() => pluginList.filter((p) => p.isBuiltin), [pluginList])
+  const extensionPlugins = useMemo(() => pluginList.filter((p) => !p.isBuiltin), [pluginList])
 
   // Search filtering for installed plugins
   const filterInstalled = useCallback((list: PluginMeta[]) => {
@@ -293,7 +293,7 @@ function TabButton({ active, onClick, count, children }: {
 function pluginDescription(plugin: PluginMeta): string {
   const raw = (plugin.description || '').trim()
   if (raw) return raw
-  const sourceLabel = plugin.source === 'local' ? 'core plugin' : 'installed plugin'
+  const sourceLabel = plugin.isBuiltin ? 'core plugin' : 'installed plugin'
   return `No description provided. Click to view metadata and controls for this ${sourceLabel}.`
 }
 
@@ -304,6 +304,7 @@ function pluginCapabilityBadges(plugin: PluginMeta): string[] {
   if (plugin.hasUI) badges.push('UI')
   if (plugin.providerCount && plugin.providerCount > 0) badges.push(`${plugin.providerCount} provider${plugin.providerCount === 1 ? '' : 's'}`)
   if (plugin.connectorCount && plugin.connectorCount > 0) badges.push(`${plugin.connectorCount} connector${plugin.connectorCount === 1 ? '' : 's'}`)
+  if (plugin.hasDependencyManifest) badges.push(`${plugin.dependencyCount ?? 0} dep${plugin.dependencyCount === 1 ? '' : 's'}`)
   return badges
 }
 
@@ -446,6 +447,17 @@ function PluginCard({ plugin, allowDelete, agents, onEdit, onToggle, onDelete, o
             {badge}
           </span>
         ))}
+        {plugin.hasDependencyManifest && (
+          <span className={`text-[10px] font-700 px-1.5 py-0.5 rounded-full ${
+            plugin.dependencyInstallStatus === 'installed'
+              ? 'text-emerald-400 bg-emerald-500/10'
+              : plugin.dependencyInstallStatus === 'error'
+                ? 'text-red-400 bg-red-500/10'
+                : 'text-amber-400 bg-amber-500/10'
+          }`}>
+            deps {plugin.dependencyInstallStatus || 'ready'}
+          </span>
+        )}
         {plugin.author && (
           <span className="text-[10px] text-text-3/40 ml-auto">
             {plugin.author}

package/src/components/plugins/plugin-sheet.tsx

@@ -11,7 +11,7 @@ import type { PluginMeta, PluginSettingsField, MarketplacePlugin } from '@/types
 function pluginDescription(plugin: PluginMeta): string {
   const raw = (plugin.description || '').trim()
   if (raw) return raw
-  const sourceLabel = plugin.source === 'local' ? 'core plugin' : 'installed plugin'
+  const sourceLabel = plugin.isBuiltin ? 'core plugin' : 'installed plugin'
   return `No description provided. This ${sourceLabel} is available and can be configured from this panel.`
 }
 
@@ -22,6 +22,7 @@ function pluginCapabilityBadges(plugin: PluginMeta): string[] {
   if (plugin.hasUI) badges.push('UI extension')
   if (plugin.providerCount && plugin.providerCount > 0) badges.push(`${plugin.providerCount} provider${plugin.providerCount === 1 ? '' : 's'}`)
   if (plugin.connectorCount && plugin.connectorCount > 0) badges.push(`${plugin.connectorCount} connector${plugin.connectorCount === 1 ? '' : 's'}`)
+  if (plugin.hasDependencyManifest) badges.push(`${plugin.dependencyCount ?? 0} dep${plugin.dependencyCount === 1 ? '' : 's'}`)
   return badges
 }
 
@@ -46,8 +47,10 @@ export function PluginSheet() {
   const [activeTag, setActiveTag] = useState<string | null>(null)
   const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
   const [pluginSettingsValues, setPluginSettingsValues] = useState<Record<string, unknown>>({})
+  const [configuredSecretFields, setConfiguredSecretFields] = useState<string[]>([])
   const [pluginSettingsLoading, setPluginSettingsLoading] = useState(false)
   const [pluginSettingsSaving, setPluginSettingsSaving] = useState(false)
+  const [dependencyInstalling, setDependencyInstalling] = useState(false)
 
   const editing = editingFilename ? plugins[editingFilename] : null
 
@@ -55,12 +58,19 @@ export function PluginSheet() {
   useEffect(() => {
     if (!editing?.settingsFields?.length) {
       setPluginSettingsValues({})
+      setConfiguredSecretFields([])
       return
     }
     setPluginSettingsLoading(true)
-    api<Record<string, unknown>>('GET', `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`)
-      .then((data) => setPluginSettingsValues(data ?? {}))
-      .catch(() => setPluginSettingsValues({}))
+    api<{ values?: Record<string, unknown>; configuredSecretFields?: string[] }>('GET', `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`)
+      .then((data) => {
+        setPluginSettingsValues(data?.values ?? {})
+        setConfiguredSecretFields(Array.isArray(data?.configuredSecretFields) ? data.configuredSecretFields : [])
+      })
+      .catch(() => {
+        setPluginSettingsValues({})
+        setConfiguredSecretFields([])
+      })
       .finally(() => setPluginSettingsLoading(false))
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingFilename])
@@ -69,7 +79,24 @@ export function PluginSheet() {
     if (!editing) return
     setPluginSettingsSaving(true)
     try {
-      await api('PUT', `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`, pluginSettingsValues)
+      const secretFieldSet = new Set(
+        (editing.settingsFields || [])
+          .filter((field) => field.type === 'secret')
+          .map((field) => field.key),
+      )
+      const payload = Object.fromEntries(
+        Object.entries(pluginSettingsValues).filter(([key, value]) => {
+          if (!secretFieldSet.has(key)) return true
+          return value !== undefined && value !== ''
+        }),
+      )
+      const response = await api<{ values?: Record<string, unknown>; configuredSecretFields?: string[] }>(
+        'PUT',
+        `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`,
+        payload,
+      )
+      setPluginSettingsValues(response?.values ?? {})
+      setConfiguredSecretFields(Array.isArray(response?.configuredSecretFields) ? response.configuredSecretFields : [])
       toast.success('Plugin settings saved')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to save settings')
@@ -126,6 +153,24 @@ export function PluginSheet() {
     setDeleting(false)
   }
 
+  const installDependencies = useCallback(async () => {
+    if (!editing?.filename) return
+    setDependencyInstalling(true)
+    try {
+      const response = await api<{ ok: boolean }>('POST', '/plugins/dependencies', {
+        filename: editing.filename,
+        packageManager: editing.packageManager,
+      })
+      if (response?.ok) {
+        await loadPlugins()
+        toast.success('Plugin dependencies installed')
+      }
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to install plugin dependencies')
+    }
+    setDependencyInstalling(false)
+  }, [editing?.filename, editing?.packageManager, loadPlugins])
+
   const installFromMarketplace = async (p: MarketplacePlugin) => {
     setInstalling(p.id)
     const toastId = toast.loading(`Installing ${p.name}...`)
@@ -189,7 +234,9 @@ export function PluginSheet() {
             <div className="grid grid-cols-2 gap-2 mt-3">
               <div className="rounded-[10px] bg-bg/50 border border-white/[0.05] px-2.5 py-2">
                 <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Source</div>
-                <div className="text-[11px] text-text-2">{editing.source === 'local' ? 'Core Platform' : 'Extension'}</div>
+                <div className="text-[11px] text-text-2">
+                  {editing.isBuiltin ? 'Core Platform' : editing.source === 'marketplace' ? 'Marketplace Extension' : 'Local Extension'}
+                </div>
               </div>
               <div className="rounded-[10px] bg-bg/50 border border-white/[0.05] px-2.5 py-2">
                 <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Author</div>
@@ -219,6 +266,54 @@ export function PluginSheet() {
             )}
           </div>
 
+          {(editing.hasDependencyManifest || !editing.isBuiltin) && (
+            <div className="py-4 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-[13px] font-600 text-text">Dependencies</div>
+                  <p className="text-[11px] text-text-3/60 mt-1">
+                    {editing.hasDependencyManifest
+                      ? `Managed in a per-plugin workspace${editing.packageManager ? ` via ${editing.packageManager}` : ''}.`
+                      : 'No package.json manifest is currently attached to this plugin.'}
+                  </p>
+                </div>
+                {editing.hasDependencyManifest && (
+                  <button
+                    onClick={() => { void installDependencies() }}
+                    disabled={dependencyInstalling}
+                    className="px-3 py-2 rounded-[10px] bg-accent-soft text-[11px] font-700 text-accent-bright hover:bg-accent-bright/15 transition-all cursor-pointer border-none disabled:opacity-50"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {dependencyInstalling ? 'Installing…' : 'Install / Refresh'}
+                  </button>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 gap-2 mt-3">
+                <div className="rounded-[10px] bg-bg/50 border border-white/[0.05] px-2.5 py-2">
+                  <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Runtime deps</div>
+                  <div className="text-[11px] text-text-2">{editing.dependencyCount ?? 0}</div>
+                </div>
+                <div className="rounded-[10px] bg-bg/50 border border-white/[0.05] px-2.5 py-2">
+                  <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Status</div>
+                  <div className="text-[11px] text-text-2">{editing.dependencyInstallStatus || 'none'}</div>
+                </div>
+              </div>
+
+              {editing.dependencyInstallError && (
+                <div className="mt-3 p-2.5 rounded-[10px] bg-red-500/[0.08] border border-red-500/20 text-[11px] text-red-300/90">
+                  {editing.dependencyInstallError}
+                </div>
+              )}
+
+              {editing.dependencyInstalledAt && (
+                <p className="text-[10px] text-text-3/45 mt-3">
+                  Last installed {new Date(editing.dependencyInstalledAt).toLocaleString()}
+                </p>
+              )}
+            </div>
+          )}
+
           <div className="flex items-center justify-between py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
             <div>
               <span className="text-[13px] font-600 text-text block">Enabled</span>
@@ -246,6 +341,7 @@ export function PluginSheet() {
                       key={field.key}
                       field={field}
                       value={pluginSettingsValues[field.key]}
+                      configured={configuredSecretFields.includes(field.key)}
                       onChange={(v) => setPluginSettingsValues((prev) => ({ ...prev, [field.key]: v }))}
                     />
                   ))}
@@ -442,7 +538,7 @@ export function PluginSheet() {
                 </p>
               )}
               <p className="text-[10px] text-text-3/60 mt-3">
-                Works with SwarmClaw and OpenClaw plugin formats. URL must be HTTPS.
+                Works with `.js` / `.mjs` SwarmClaw and OpenClaw plugin formats. URL must be HTTPS.
               </p>
             </div>
           )}
@@ -465,7 +561,17 @@ export function PluginSheet() {
   )
 }
 
-function PluginSettingRow({ field, value, onChange }: { field: PluginSettingsField; value: unknown; onChange: (v: unknown) => void }) {
+function PluginSettingRow({
+  field,
+  value,
+  configured,
+  onChange,
+}: {
+  field: PluginSettingsField
+  value: unknown
+  configured: boolean
+  onChange: (v: unknown) => void
+}) {
   const inputCls = 'w-full py-2 px-3 rounded-[8px] text-[12px] bg-bg border border-white/[0.06] text-text placeholder:text-text-3/50 outline-none focus:border-accent-bright/30'
 
   return (
@@ -509,11 +615,14 @@ function PluginSettingRow({ field, value, onChange }: { field: PluginSettingsFie
           type={field.type === 'secret' ? 'password' : 'text'}
           value={String(value ?? field.defaultValue ?? '')}
           onChange={(e) => onChange(e.target.value || undefined)}
-          placeholder={field.placeholder}
+          placeholder={field.type === 'secret' && configured ? 'Stored securely. Enter a new value to replace it.' : field.placeholder}
           className={inputCls}
           style={{ fontFamily: 'inherit' }}
         />
       )}
+      {field.type === 'secret' && configured && (
+        <p className="text-[10px] text-emerald-400/90 mt-1">Stored securely. Leave blank to keep the current value.</p>
+      )}
       {field.help && <p className="text-[10px] text-text-3/60 mt-1">{field.help}</p>}
     </div>
   )

package/src/components/projects/project-detail.tsx

@@ -102,6 +102,7 @@ export function ProjectDetail() {
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
 
   const [assignPickerOpen, setAssignPickerOpen] = useState(false)
+  const now = Date.now()
 
   const project = activeProjectFilter ? projects[activeProjectFilter] : null
 
@@ -150,6 +151,93 @@ export function ProjectDetail() {
     return items.sort((a, b) => b.time - a.time).slice(0, 12)
   }, [projectTasks, projectSchedules, projectAgents])
 
+  const approvalTasks = useMemo(
+    () => projectTasks.filter((task) => !!task.pendingApproval),
+    [projectTasks],
+  )
+
+  const blockedTasks = useMemo(
+    () => projectTasks.filter((task) => (task.blockedBy?.length || 0) > 0),
+    [projectTasks],
+  )
+
+  const overdueTasks = useMemo(
+    () => projectTasks.filter((task) => !!task.dueAt && task.dueAt < now && task.status !== 'completed' && task.status !== 'archived'),
+    [now, projectTasks],
+  )
+
+  const staleTasks = useMemo(
+    () => projectTasks.filter((task) => task.status !== 'completed' && task.status !== 'archived' && now - task.updatedAt > 3 * 24 * 60 * 60 * 1000),
+    [now, projectTasks],
+  )
+
+  const overdueSchedules = useMemo(
+    () => projectSchedules.filter((schedule) => schedule.status === 'active' && !!schedule.nextRunAt && schedule.nextRunAt < now),
+    [now, projectSchedules],
+  )
+
+  const nextScheduledRun = useMemo(
+    () => projectSchedules
+      .filter((schedule) => schedule.status === 'active' && !!schedule.nextRunAt && schedule.nextRunAt >= now)
+      .sort((a, b) => (a.nextRunAt || 0) - (b.nextRunAt || 0))[0] || null,
+    [now, projectSchedules],
+  )
+
+  const busiestAgent = useMemo(() => {
+    return projectAgents
+      .map((agent) => ({
+        agent,
+        taskCount: projectTasks.filter((task) => task.agentId === agent.id && task.status !== 'completed' && task.status !== 'archived').length,
+      }))
+      .sort((a, b) => b.taskCount - a.taskCount)[0] || null
+  }, [projectAgents, projectTasks])
+
+  const attentionItems = useMemo(() => {
+    const seen = new Set<string>()
+    const items: Array<{ id: string; label: string; detail: string; tone: string; onClick: () => void }> = []
+    for (const task of approvalTasks.slice(0, 2)) {
+      seen.add(task.id)
+      items.push({
+        id: `approval-${task.id}`,
+        label: task.title,
+        detail: 'Awaiting tool approval',
+        tone: 'text-amber-400',
+        onClick: () => { setEditingTaskId(task.id); setTaskSheetOpen(true) },
+      })
+    }
+    for (const task of blockedTasks.slice(0, 2)) {
+      if (seen.has(task.id)) continue
+      seen.add(task.id)
+      items.push({
+        id: `blocked-${task.id}`,
+        label: task.title,
+        detail: `${task.blockedBy?.length || 0} blocker${task.blockedBy?.length === 1 ? '' : 's'}`,
+        tone: 'text-rose-400',
+        onClick: () => { setEditingTaskId(task.id); setTaskSheetOpen(true) },
+      })
+    }
+    if (staleTasks[0] && !seen.has(staleTasks[0].id)) {
+      seen.add(staleTasks[0].id)
+      items.push({
+        id: `stale-${staleTasks[0].id}`,
+        label: staleTasks[0].title,
+        detail: 'No recent progress in 3+ days',
+        tone: 'text-sky-400',
+        onClick: () => { setEditingTaskId(staleTasks[0].id); setTaskSheetOpen(true) },
+      })
+    }
+    if (overdueSchedules[0]) {
+      items.push({
+        id: `schedule-${overdueSchedules[0].id}`,
+        label: overdueSchedules[0].name,
+        detail: 'Schedule missed its next run',
+        tone: 'text-red-400',
+        onClick: () => { setEditingScheduleId(overdueSchedules[0].id); setScheduleSheetOpen(true) },
+      })
+    }
+    return items.slice(0, 5)
+  }, [approvalTasks, blockedTasks, overdueSchedules, setEditingScheduleId, setEditingTaskId, setScheduleSheetOpen, setTaskSheetOpen, staleTasks])
+
   const handleUnassignAgent = async (agentId: string) => {
     await updateAgent(agentId, { projectId: undefined })
     await loadAgents()
@@ -212,6 +300,101 @@ export function ProjectDetail() {
           </div>
         </div>
 
+        <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_280px] gap-4 mb-8">
+          <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
+            <div className="flex items-center justify-between gap-4 mb-4">
+              <div>
+                <h2 className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">Project Health</h2>
+                <p className="text-[12px] text-text-3/60 mt-1">Surface blockers and the next useful action before digging into the full history.</p>
+              </div>
+              <button
+                onClick={() => setActiveView('tasks')}
+                className="shrink-0 px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Open Task Board
+              </button>
+            </div>
+
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+              {[
+                { label: 'Awaiting Approval', value: approvalTasks.length, tone: 'text-amber-400', hint: 'Tasks paused on approval' },
+                { label: 'Blocked', value: blockedTasks.length, tone: 'text-rose-400', hint: 'Tasks waiting on dependencies' },
+                { label: 'Overdue', value: overdueTasks.length + overdueSchedules.length, tone: 'text-red-400', hint: 'Tasks or schedules behind plan' },
+                { label: 'Stale Tasks', value: staleTasks.length, tone: 'text-sky-400', hint: 'No meaningful progress in 3+ days' },
+              ].map((item) => (
+                <div key={item.label} className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-4 py-3">
+                  <div className={`text-[22px] font-display font-700 tracking-[-0.02em] ${item.tone}`}>{item.value}</div>
+                  <div className="text-[11px] font-600 text-text-2 mt-0.5">{item.label}</div>
+                  <p className="text-[10px] text-text-3/45 mt-1 leading-relaxed">{item.hint}</p>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex flex-wrap gap-2 mt-4">
+              {busiestAgent?.agent && (
+                <button
+                  onClick={() => { setCurrentAgent(busiestAgent.agent.id); setActiveView('agents') }}
+                  className="inline-flex items-center gap-2 px-3 py-2 rounded-[10px] bg-accent-soft text-[12px] font-600 text-accent-bright hover:bg-accent-bright/15 transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <AgentAvatar seed={busiestAgent.agent.avatarSeed} avatarUrl={busiestAgent.agent.avatarUrl} name={busiestAgent.agent.name} size={18} />
+                  Open busiest agent
+                </button>
+              )}
+              {(approvalTasks[0] || blockedTasks[0] || overdueTasks[0]) && (
+                <button
+                  onClick={() => {
+                    const nextTask = approvalTasks[0] || blockedTasks[0] || overdueTasks[0]
+                    if (!nextTask) return
+                    setEditingTaskId(nextTask.id)
+                    setTaskSheetOpen(true)
+                  }}
+                  className="px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Review next task
+                </button>
+              )}
+              {nextScheduledRun && (
+                <button
+                  onClick={() => { setEditingScheduleId(nextScheduledRun.id); setScheduleSheetOpen(true) }}
+                  className="px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Next run {relativeDate(nextScheduledRun.nextRunAt || now)}
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Needs Attention</h3>
+              <span className="text-[11px] text-text-3/40">{attentionItems.length || 0} items</span>
+            </div>
+            {attentionItems.length === 0 ? (
+              <div className="rounded-[12px] border border-dashed border-white/[0.08] px-4 py-6 text-center">
+                <p className="text-[12px] text-text-3/45">No urgent blockers right now.</p>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-2">
+                {attentionItems.map((item) => (
+                  <button
+                    key={item.id}
+                    onClick={item.onClick}
+                    className="w-full rounded-[12px] border border-white/[0.06] bg-surface/60 px-3.5 py-3 text-left hover:bg-white/[0.04] transition-all cursor-pointer"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <div className={`text-[11px] font-700 uppercase tracking-[0.08em] ${item.tone}`}>{item.detail}</div>
+                    <div className="text-[13px] font-600 text-text mt-1 line-clamp-2">{item.label}</div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
         {/* Stats cards */}
         <div className="grid grid-cols-4 gap-3 mb-8">
           {[

package/src/components/shared/agent-picker-list.tsx

@@ -12,7 +12,7 @@ interface Props {
   onSelect: (agentId: string) => void
   /** Show a "None" option at the top for optional single-select */
   noneOption?: { label: string; onSelect: () => void }
-  /** Show orchestrator badge */
+  /** Show delegation-capable badge */
   showOrchBadge?: boolean
   /** Max height of the scrollable list */
   maxHeight?: number
@@ -76,7 +76,7 @@ export function AgentPickerList({
             <span className={`text-[13px] font-600 flex-1 truncate ${active ? 'text-accent-bright' : 'text-text-2'}`}>
               {a.name}
             </span>
-            {showOrchBadge && a.isOrchestrator && (
+            {showOrchBadge && a.platformAssignScope === 'all' && (
               <span className="text-[10px] text-text-3/60 flex items-center gap-0.5">
                 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M16 3h5v5"/><path d="M21 3l-7 7"/><path d="M8 21H3v-5"/><path d="M3 21l7-7"/></svg>
               </span>