madarx 2.16.2 → 2.17.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to Madarx OS. Newest first.
 
+## Unreleased
+
+## [2.17.0] - 2026-06-05
+
+### Added
+
+- **Persistent top toolbar.** A macOS-style toolbar mounted in the root layout (`AppChrome`) now stays on every non-chromeless page across navigation — showing the current section, a global "agents running" indicator (live via the SSE bus), and a search trigger. The dashboard's canvas controls (Approve & Run, Hermes, Runtime, Reset layout) are portaled into this single bar so "spaces" no longer shows two toolbars. The Hermes control appears only when a Hermes-engine agent exists.
+- **Durable manual agent runs.** Clicking **Run** now enqueues a durable `heartbeat_tasks` row (leased, stale-recovered) and kicks one worker pass for low latency, instead of a fire-and-forget promise — so a manual run survives a server recompile/restart. `max_attempts:1` avoids retry-storming deterministic config errors.
+- **Visible manual-run failures.** A failed manual run now persists a FAILED `runs` row + `agent.run.failed` audit carrying the error code and remediation, so engine/tool misconfigurations (e.g. a tool-needing agent on the Hermes/Ollama engine) surface in the agent's activity feed instead of failing silently to the console.
+- **Live agent activity feed + run-state hydration.** The agent detail activity feed subscribes to the SSE bus and surfaces run start/complete/failure without a reload; the Run button hydrates its state from a new `GET /api/agents/[id]/active-run` so it reflects an in-flight run after navigating away and back.
+
+### Fixed
+
+- **claude-code missing from the main chat model picker despite being "available".** `/api/models` (the main-agent picker) now uses the same robust CLI detector as `/settings/engines` — absolute-path candidates plus the `MADARX_CLAUDE_BIN` / `MADARX_CODEX_BIN` override — instead of a login-shell-only `command -v`. A CLI installed outside the server's inherited PATH (common on desktop/GUI-launched servers) now appears in the picker wherever the engines page reports it available; pin it explicitly with `MADARX_CLAUDE_BIN=/abs/path/to/claude`.
+- **Artifact canvas top alignment.** Removed the leftover top inset so the artifact window aligns flush with the chat panel and sidebar.
+
+## [2.16.3] - 2026-06-05
+
+### Added
+
+- **Local MisoTTS-compatible voice fallback.** `voice_speak` and `/api/voice/tts` now support a `local` provider through `MADARX_LOCAL_TTS_URL`, with optional `MADARX_LOCAL_TTS_MODEL` / `MADARX_LOCAL_TTS_VOICE`, so self-hosted engines can speak replies without OpenAI or ElevenLabs. Added `scripts/misotts-local-server.py` as a minimal bridge for `MisoLabsAI/MisoTTS`.
+
 ## [2.16.2] - 2026-06-05
 
 ### Changed

package/ai-docs/api-surface.md

@@ -57,7 +57,7 @@ Reference for every `app/api/**/route.js` route. Read this when you need to find
 
 | Route | Description |
 |-------|-------------|
-| `GET/POST /api/voice/tts` | TTS provider status + audio synthesis for OpenAI / ElevenLabs. Audio streams; credentials stay in vault. |
+| `GET/POST /api/voice/tts` | TTS provider status + audio synthesis for OpenAI / ElevenLabs / local HTTP TTS (`MADARX_LOCAL_TTS_URL`, including the optional MisoTTS bridge). Audio streams; credentials stay in vault. |
 | `GET/POST /api/voice/realtime/session` | OpenAI Realtime availability + ephemeral browser session. Client secret returned but never stored. Body accepts `project_id`/`agent_id`. |
 | `POST /api/voice/realtime/tool-result` | Relays model-requested tools through `executeVoiceTool` / `executeRegistryTool`. All gates preserved. |
 | `GET /api/voice/providers` | Provider capabilities snapshot (realtime/tts/stt/llm) + default mode + local slot URLs. |

package/ai-docs/key-constraints.md

@@ -50,7 +50,7 @@ Integration credentials (`GITHUB_TOKEN`, `RESEND_API_KEY`, `SUPABASE_*`, `VERCEL
 
 ## Voice tools (Jarvis console)
 
-Provider abstraction lives in `lib/voice/providers.js`. Lanes: `realtime` (primary — OpenAI Realtime via WebRTC; vault keys `OPENAI_API_KEY`, optional `OPENAI_REALTIME_MODEL`, `OPENAI_REALTIME_VOICE`), `tts` (fallback — existing typed chat speaks final reply via OpenAI TTS or ElevenLabs; vault keys `OPENAI_API_KEY`/`ELEVENLABS_API_KEY` + optional `ELEVENLABS_VOICE_ID`), and `local` (open-source slots — env-driven `MADARX_LOCAL_STT_URL`/`MADARX_LOCAL_TTS_URL`). Default mode resolves at runtime (`realtime` → `tts` → `local` → `off`) and respects `MADARX_VOICE_DEFAULT_PROVIDER`. Every voice session is minted with a durable Madarx context (`lib/voice/context.js`): today's ISO date, active project, brand voice, open tasks, recent artifact titles, pending approvals, and non-`local_only` agent memory — never API keys, ephemeral tokens, or `local_only` memory. The voice model sees a curated tool catalog (`lib/voice/tools.js`): `create_artifact`, `update_artifact`, `delete_artifact`, `find_artifacts`, `get_state`, `web_search`, `web_fetch`, `voice_speak`. All calls flow through `executeVoiceTool` → `executeTool` → `executeRegistryTool`, so trust-mode, approval gates (including the never-bypassable `irreversible_external` tier), allowlists, rate limits, egress logging, and audit rows are preserved exactly as for typed chat. Realtime ephemeral client secrets are returned to the browser but never persisted; the long-lived OpenAI key never crosses to the browser. UI: `app/components/dashboard/voice-panel.jsx` + `voice-orb.jsx` + `use-realtime-voice.js`. Brand: Onyx surface, Bone/Graphite text, Mars Red only on active speech peaks + approval banners. Operator guide: `docs/voice/jarvis.md`. `cli-printing-press` documented as a deferred external companion in `docs/integrations/cli-printing-press.md`.
+Provider abstraction lives in `lib/voice/providers.js`. Lanes: `realtime` (primary — OpenAI Realtime via WebRTC; vault keys `OPENAI_API_KEY`, optional `OPENAI_REALTIME_MODEL`, `OPENAI_REALTIME_VOICE`), `tts` (fallback — existing typed chat speaks final reply via OpenAI TTS, ElevenLabs, or the env-driven local HTTP TTS slot; vault keys `OPENAI_API_KEY`/`ELEVENLABS_API_KEY` + optional `ELEVENLABS_VOICE_ID`; local uses `MADARX_LOCAL_TTS_URL`, optional `MADARX_LOCAL_TTS_MODEL`/`MADARX_LOCAL_TTS_VOICE`), and `local` (open-source STT/TTS slots — `MADARX_LOCAL_STT_URL`/`MADARX_LOCAL_TTS_URL`; `scripts/misotts-local-server.py` provides a minimal MisoLabsAI/MisoTTS bridge). Default mode resolves at runtime (`realtime` → `tts` → `local` → `off`) and respects `MADARX_VOICE_DEFAULT_PROVIDER`. Every voice session is minted with a durable Madarx context (`lib/voice/context.js`): today's ISO date, active project, brand voice, open tasks, recent artifact titles, pending approvals, and non-`local_only` agent memory — never API keys, ephemeral tokens, or `local_only` memory. The voice model sees a curated tool catalog (`lib/voice/tools.js`): `create_artifact`, `update_artifact`, `delete_artifact`, `find_artifacts`, `get_state`, `web_search`, `web_fetch`, `voice_speak`. All calls flow through `executeVoiceTool` → `executeTool` → `executeRegistryTool`, so trust-mode, approval gates (including the never-bypassable `irreversible_external` tier), allowlists, rate limits, egress logging, and audit rows are preserved exactly as for typed chat. Realtime ephemeral client secrets are returned to the browser but never persisted; the long-lived OpenAI key never crosses to the browser. UI: `app/components/dashboard/voice-panel.jsx` + `voice-orb.jsx` + `use-realtime-voice.js`. Brand: Onyx surface, Bone/Graphite text, Mars Red only on active speech peaks + approval banners. Operator guide: `docs/voice/jarvis.md`. `cli-printing-press` documented as a deferred external companion in `docs/integrations/cli-printing-press.md`.
 
 ## WhatsApp gateway
 

package/app/agents/[id]/agent-activity-feed.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Search, Play, ShieldCheck } from 'lucide-react';
+import { subscribeAgentEvents } from '../agent-events-bus.js';
 import { formatRelativeTime, humanizeRunStatus } from './format-helpers';
 
 type ActivityItem = {
@@ -30,24 +31,59 @@ function statusLabel(item: ActivityItem): string {
   return humanizeRunStatus(item.status);
 }
 
-export function AgentActivityFeed({ items }: { items: ActivityItem[] }) {
+export function AgentActivityFeed({ agentId, items }: { agentId: string; items: ActivityItem[] }) {
   const [query, setQuery] = useState('');
+  // Live runs for THIS agent, layered above the server-rendered snapshot. The
+  // server feed is a static render (no revalidate on run), so a manual run —
+  // especially a FAILED one — would otherwise be invisible until a reload. We
+  // surface start/complete/failed from the SSE bus immediately. Keyed by run_id
+  // (or 'manual' for fire-and-forget runs) so complete updates the same row.
+  const [liveItems, setLiveItems] = useState<ActivityItem[]>([]);
+
+  useEffect(() => {
+    return subscribeAgentEvents((event: any) => {
+      if (event.agent_id !== agentId) return;
+      const key = `live-${event.run_id || 'manual'}`;
+      if (event.type === 'agent_run_start') {
+        setLiveItems((cur) => {
+          const rest = cur.filter((i) => i.id !== key);
+          return [
+            { id: key, kind: 'execution', status: 'running', title: `${event.agent_name || 'Agent'} run`, at: new Date().toISOString() },
+            ...rest,
+          ];
+        });
+      } else if (event.type === 'agent_run_complete') {
+        const status = event.isError ? (event.status || 'failed') : (event.status || 'complete');
+        setLiveItems((cur) => {
+          const existing = cur.find((i) => i.id === key);
+          const title = event.error ? `${event.agent_name || 'Agent'} run — ${String(event.error).slice(0, 120)}` : (existing?.title || `${event.agent_name || 'Agent'} run`);
+          const updated: ActivityItem = { id: key, kind: 'execution', status, title, at: existing?.at || new Date().toISOString() };
+          const rest = cur.filter((i) => i.id !== key);
+          return [updated, ...rest];
+        });
+      }
+    });
+  }, [agentId]);
+
+  // Merge live over server items; dedupe is unnecessary — live items use a
+  // `live-` id and reset on remount, while server items use `run-`/`approval-`.
+  const merged = useMemo(() => [...liveItems, ...items], [liveItems, items]);
 
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return items;
-    return items.filter((item) =>
+    if (!q) return merged;
+    return merged.filter((item) =>
       item.title.toLowerCase().includes(q)
       || item.status.toLowerCase().includes(q)
       || item.kind.includes(q)
     );
-  }, [items, query]);
+  }, [merged, query]);
 
   return (
     <section className="ad-activity">
       <div className="ad-activity-head">
         <span className="ad-activity-title">Recent activity</span>
-        {items.length ? (
+        {merged.length ? (
           <label className="ad-activity-search">
             <Search size={13} aria-hidden />
             <input
@@ -83,7 +119,7 @@ export function AgentActivityFeed({ items }: { items: ActivityItem[] }) {
             );
           })}
         </ul>
-      ) : items.length ? (
+      ) : merged.length ? (
         <div className="ad-feed-empty">No activity matches “{query}”.</div>
       ) : (
         <div className="ad-feed-empty">

package/app/agents/[id]/agent-detail-simple.tsx

@@ -111,7 +111,7 @@ export function AgentDetailSimple({
         updateDefaultSpaceAction={updateDefaultSpaceAction}
       />
 
-      <AgentActivityFeed items={activity} />
+      <AgentActivityFeed agentId={agent.id} items={activity} />
     </section>
   );
 }

package/app/agents/agent-run-button.jsx

@@ -6,6 +6,19 @@ export default function AgentRunButton({ agentId }) {
   const [running, setRunning] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
+  // Hydrate from server truth on mount. The SSE `agent_run_start` event fires
+  // once at run start; if the user navigated away and back, that event was
+  // missed and this freshly-mounted button would wrongly show "Run" while a run
+  // is still live. Ask the server whether a run is currently active.
+  useEffect(() => {
+    let cancelled = false;
+    fetch(`/api/agents/${encodeURIComponent(agentId)}/active-run`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => { if (!cancelled && data?.active) setRunning(true); })
+      .catch(() => { /* best-effort; SSE still drives live flips */ });
+    return () => { cancelled = true; };
+  }, [agentId]);
+
   useEffect(() => {
     return subscribeAgentEvents((event) => {
       if (event.agent_id !== agentId) return;

package/app/api/agents/[id]/active-run/route.js

@@ -0,0 +1,23 @@
+import { isRunActive } from '@/lib/active-runs.js';
+import { listAgentRuns } from '@/lib/delegation.js';
+import { isActiveRunStatus } from '@/lib/delegation-contracts.js';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+// Source of truth for "is this agent running right now?" so the Run button can
+// hydrate the correct state after the user navigates away and back. Combines:
+//   - the in-process manual-run registry (fire-and-forget runs have no DB row)
+//   - any delegated/task agent_runs row in an active status (queued/running/...)
+export async function GET(_req, { params }) {
+  const { id } = await params;
+  let taskActive = false;
+  try {
+    taskActive = listAgentRuns({ agent_id: id, limit: 20 })
+      .some(run => isActiveRunStatus(run.status));
+  } catch {
+    taskActive = false;
+  }
+  const active = isRunActive(id) || taskActive;
+  return Response.json({ active, agent_id: id });
+}

package/app/api/agents/[id]/run/route.js

@@ -1,21 +1,40 @@
 import { getAgent } from '@/lib/runtime.js';
-import { runAgentTick } from '@/lib/agent-runner.js';
+import { createHeartbeatTask } from '@/lib/heartbeat-queue.js';
+import { runHeartbeatWorkerOnce } from '@/lib/heartbeat-worker.js';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 
-// Fire-and-forget manual run. The dashboard SSE stream (`agent_run_start` /
-// `agent_run_complete`) drives the UI, so this route returns immediately and
-// lets the run finish in the background — otherwise the request would block
-// for the full duration of the tick and the button would lock up.
+// Manual run = durable + low-latency (hybrid).
+//
+// Previously this was a fire-and-forget `runAgentTick().catch()` promise: it
+// survived browser navigation (server-side) but NOT a dev recompile / server
+// restart, and it was untracked. Now we ENQUEUE a heartbeat_tasks row (durable —
+// leased, retried-once, stale-recovered by the worker) and immediately KICK one
+// worker pass so it still starts in ~milliseconds. If this process dies mid-run,
+// the lease expires and the in-process/standalone heartbeat worker re-claims it.
+//
+// max_attempts:1 — a manual click is one intent; a deterministic config error
+// (e.g. engine_cannot_run_tools) must not retry-storm into duplicate failed runs.
 export async function POST(_req, { params }) {
   const { id } = await params;
   const agent = getAgent(id);
   if (!agent) return Response.json({ ok: false, error: 'agent not found' }, { status: 404 });
 
-  runAgentTick(id, { triggered_by: 'manual' }).catch(err => {
-    console.warn(`[agents/${id}/run] tick failed:`, err?.message || err);
+  const task = createHeartbeatTask({
+    agent_id: id,
+    type: 'agent_tick',
+    priority: 10, // ahead of background ticks so the click feels instant
+    max_attempts: 1,
+    payload: { type: 'agent_tick', agent_id: id, triggered_by: 'manual', reason: 'manual-run' },
   });
 
-  return Response.json({ ok: true, agent_id: id, status: 'queued' });
+  // Low-latency kick. Best-effort: the durable queue is the safety net, so a
+  // failed kick (or none, e.g. management mode) just means the worker picks it
+  // up on its next interval.
+  runHeartbeatWorkerOnce().catch(err => {
+    console.warn(`[agents/${id}/run] worker kick failed:`, err?.message || err);
+  });
+
+  return Response.json({ ok: true, agent_id: id, task_id: task.id, status: 'queued' });
 }

package/app/components/app-chrome.jsx

@@ -3,6 +3,7 @@
 import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import SmartSearch from './smart-search';
+import AppTopbar from './app-topbar';
 
 const CHROMELESS_PREFIXES = ['/login', '/share'];
 
@@ -22,6 +23,7 @@ export default function AppChrome({ children, sidebar }) {
   return (
     <>
       <div className="app-shell">
+        <AppTopbar />
         <div className="app-rail">{sidebarNode}</div>
         <div className="app-content">{children}</div>
       </div>

package/app/components/app-topbar.jsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { Search, Command } from 'lucide-react';
+import { subscribeAgentEvents } from '../agents/agent-events-bus.js';
+
+// Pathname prefix → human section label. Longest-prefix wins via order: list
+// more specific paths before their parents.
+const SECTIONS = [
+  ['/agents', 'Agents'],
+  ['/tasks', 'Tasks'],
+  ['/approvals', 'Approvals'],
+  ['/marketplace', 'Marketplace'],
+  ['/tools', 'Tools'],
+  ['/schedules', 'Schedules'],
+  ['/reports', 'Reports'],
+  ['/activity', 'Activity'],
+  ['/runtime', 'Runtime'],
+  ['/workflows', 'Workflows'],
+  ['/brand', 'Brand'],
+  ['/team', 'Team'],
+  ['/whatsapp', 'WhatsApp'],
+  ['/settings', 'Settings'],
+  ['/help', 'Help'],
+];
+
+function sectionFor(pathname) {
+  if (!pathname || pathname === '/') return 'Overview';
+  const hit = SECTIONS.find(([prefix]) => pathname === prefix || pathname.startsWith(`${prefix}/`));
+  return hit ? hit[1] : 'madarX';
+}
+
+export default function AppTopbar() {
+  const pathname = usePathname();
+  const section = useMemo(() => sectionFor(pathname), [pathname]);
+
+  // Global "is anything running" indicator. Tracks the set of agent ids with a
+  // live run via the shared SSE bus — the same source the Run buttons use.
+  const [runningIds, setRunningIds] = useState(() => new Set());
+
+  useEffect(() => {
+    return subscribeAgentEvents((event) => {
+      if (!event?.agent_id) return;
+      if (event.type === 'agent_run_start') {
+        setRunningIds((cur) => {
+          const next = new Set(cur);
+          next.add(event.agent_id);
+          return next;
+        });
+      } else if (event.type === 'agent_run_complete') {
+        setRunningIds((cur) => {
+          if (!cur.has(event.agent_id)) return cur;
+          const next = new Set(cur);
+          next.delete(event.agent_id);
+          return next;
+        });
+      }
+    });
+  }, []);
+
+  const runningCount = runningIds.size;
+
+  function openSearch() {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('madarx:open-search'));
+    }
+  }
+
+  return (
+    <header className="app-topbar" role="banner">
+      <div className="app-topbar-left">
+        <span className="app-topbar-brand">madar<b>X</b></span>
+        <span className="app-topbar-sep" aria-hidden />
+        <span className="app-topbar-section">{section}</span>
+      </div>
+
+      <div className="app-topbar-right">
+        {/* Page-scoped action slot. The dashboard ("spaces") portals its canvas
+            controls (Approve & Run, Hermes, Runtime, Reset layout) in here so
+            there is ONE toolbar instead of two. Empty on every other page. */}
+        <div id="app-topbar-slot" className="app-topbar-slot" />
+
+        <span
+          className={`app-topbar-activity ${runningCount ? 'is-running' : ''}`}
+          title={runningCount ? `${runningCount} agent${runningCount === 1 ? '' : 's'} running` : 'No agents running'}
+        >
+          <span className="app-topbar-dot" aria-hidden />
+          {runningCount ? `${runningCount} running` : 'Idle'}
+        </span>
+
+        <button type="button" className="app-topbar-search" onClick={openSearch} aria-label="Open search (Command K)">
+          <Search size={13} aria-hidden />
+          <span>Search</span>
+          <kbd><Command size={10} aria-hidden />K</kbd>
+        </button>
+      </div>
+    </header>
+  );
+}

package/app/components/dashboard/canvas-section.jsx

@@ -1,5 +1,6 @@
 "use client";
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useDashboard } from './dashboard-context';
 import ArtifactDock from './artifact-dock';
 import ArtifactBoard from './artifact-board';
@@ -14,6 +15,7 @@ function CanvasSection() {
     runtimeActions,
     mainAgent,
     approvalRun,
+    counts,
     artifacts,
     visibleArtifacts,
     dockedArtifacts,
@@ -52,60 +54,78 @@ function CanvasSection() {
 
   const [moveMenu, setMoveMenu] = useState(null); // { artifactId, x, y } | null
 
+  // Portal the canvas controls into the persistent top toolbar so the dashboard
+  // ("spaces") shows ONE toolbar, not two. The slot lives in AppTopbar (root
+  // layout); resolve it after mount. Handlers keep working because the buttons
+  // stay in this component's React tree — only their DOM position moves.
+  const [toolbarSlot, setToolbarSlot] = useState(null);
+  useEffect(() => {
+    setToolbarSlot(document.getElementById('app-topbar-slot'));
+  }, []);
+
+  // Hermes control is shown only when the user actually has a Hermes-engine
+  // agent — otherwise the runtime indicator is noise.
+  const hasHermesAgent = (counts?.agents || []).some(a => (a.engine || '') === 'hermes');
+
+  const toolbarActions = (
+    <div className="app-topbar-actions">
+      {approvalRun && (
+        <button
+          className="admin-button"
+          onClick={() => approveClaudeRun(approvalRun.id)}
+          disabled={approvalBusyId === approvalRun.id}
+          style={{ height: 28, padding: '0 12px', fontSize: 12 }}
+        >
+          {approvalBusyId === approvalRun.id ? 'Running Claude...' : 'Approve & Run'}
+        </button>
+      )}
+      {hasHermesAgent && (
+        <div className="hermes-wrap">
+          <span
+            className={'tb-icon-btn' + (activeHermesJobs.length > 0 ? ' on' : '')}
+            role="status"
+            aria-label={activeHermesJobs.length > 0 ? `Hermes ${activeHermesJobs.length} running` : 'Hermes idle'}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+            </svg>
+            {activeHermesJobs.length > 0 && <span>{activeHermesJobs.length}</span>}
+          </span>
+          <div className="hermes-tooltip" role="tooltip">
+            <b>Hermes</b>
+            <small>{activeHermesJobs.length > 0 ? `${activeHermesJobs.length} running` : 'idle'}</small>
+            {activeHermesJobs.length > 0 && (
+              <ul>
+                {activeHermesJobs.map(j => (
+                  <li key={j.id}>{j.title || (j.prompt ? j.prompt.slice(0, 60) : 'Untitled job')}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+      <RuntimePopover />
+      {artifacts.length > 0 && (
+        <button
+          className="tb-icon-btn"
+          onClick={resetArtifactLayout}
+          title={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
+          aria-label={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="3" width="7" height="7"/>
+            <rect x="14" y="3" width="7" height="7"/>
+            <rect x="14" y="14" width="7" height="7"/>
+            <rect x="3" y="14" width="7" height="7"/>
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+
   return (
 <section className={'canvas fresh-canvas' + (isSpaceSwitching ? ' is-space-switching' : '')}>
-  <div className="toolbar fresh-toolbar">
-    <span className="tb-wordmark" aria-label="madarX OS">madar<b>X</b><i>OS</i></span>
-    {approvalRun && (
-      <button
-        onClick={() => approveClaudeRun(approvalRun.id)}
-        disabled={approvalBusyId === approvalRun.id}
-        style={{border:0,borderRadius:999,padding:'7px 10px',background:'#111318',color:'#fff',fontSize:12,fontWeight:700,cursor:approvalBusyId ? 'wait' : 'pointer'}}
-      >
-        {approvalBusyId === approvalRun.id ? 'Running Claude...' : 'Approve & Run'}
-      </button>
-    )}
-    <div className="hermes-wrap">
-      <span
-        className={'tb-icon-btn' + (activeHermesJobs.length > 0 ? ' on' : '')}
-        role="status"
-        aria-label={activeHermesJobs.length > 0 ? `Hermes ${activeHermesJobs.length} running` : 'Hermes idle'}
-      >
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-        </svg>
-        {activeHermesJobs.length > 0 && <span>{activeHermesJobs.length}</span>}
-      </span>
-      <div className="hermes-tooltip" role="tooltip">
-        <b>Hermes</b>
-        <small>{activeHermesJobs.length > 0 ? `${activeHermesJobs.length} running` : 'idle'}</small>
-        {activeHermesJobs.length > 0 && (
-          <ul>
-            {activeHermesJobs.map(j => (
-              <li key={j.id}>{j.title || (j.prompt ? j.prompt.slice(0, 60) : 'Untitled job')}</li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-    <RuntimePopover />
-    {artifacts.length > 0 && (
-      <button
-        className="tb-icon-btn"
-        style={{ marginLeft: 'auto' }}
-        onClick={resetArtifactLayout}
-        title={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
-        aria-label={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
-      >
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="3" y="3" width="7" height="7"/>
-          <rect x="14" y="3" width="7" height="7"/>
-          <rect x="14" y="14" width="7" height="7"/>
-          <rect x="3" y="14" width="7" height="7"/>
-        </svg>
-      </button>
-    )}
-  </div>
+  {toolbarSlot ? createPortal(toolbarActions, toolbarSlot) : null}
 
   {(() => {
     const visible = visibleArtifacts;

package/app/components/smart-search.jsx

@@ -232,6 +232,17 @@ export default function SmartSearch() {
     return () => window.removeEventListener('madarx:open-setting', onOpenSetting);
   }, [openSetting]);
 
+  // Let chrome surfaces (the persistent top toolbar) open the palette without
+  // synthesizing a keydown. Mirrors the ⌘K toggle.
+  useEffect(() => {
+    function onOpenSearch(event) {
+      const q = event?.detail?.query;
+      openWithQuery(typeof q === 'string' ? q : '');
+    }
+    window.addEventListener('madarx:open-search', onOpenSearch);
+    return () => window.removeEventListener('madarx:open-search', onOpenSearch);
+  }, []);
+
   useEffect(() => {
     function onKeyDown(event) {
       const key = (event.key || '').toLowerCase();