@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/screens/project/IntegrationsTab.tsx

@@ -8,6 +8,7 @@ import { Empty, Loading } from "../../components/ui";
 import { PluginConnect } from "../../components/integrations/PluginConnect";
 import { ComingSoonPlugin } from "../../components/integrations/ComingSoonPlugin";
 import { t } from "../../i18n";
+import { toneChip } from "../../lib/tone";
 
 type SubTab = "plugins" | "tools";
 
@@ -21,7 +22,7 @@ const SUBTABS: { value: SubTab; labelKey: "integrations.tab_plugins" | "integrat
 // — they have their own top-level "MCPs" nav item.
 function PluginRow({ pid, scope, entry }: { pid: string; scope: IntegrationScope; entry: CatalogEntry }) {
   if (entry.coming_soon || !entry.ui) return <ComingSoonPlugin entry={entry} />;
-  return <PluginConnect pid={pid} scope={scope} entry={entry} />;
+  return <PluginConnect key={`${pid}-${scope}-${entry.slug}`} pid={pid} scope={scope} entry={entry} />;
 }
 
 function PluginsSection({ pid, scope }: { pid: string; scope: IntegrationScope }) {
@@ -64,7 +65,7 @@ function ToolsSection({ pid }: { pid: string }) {
                   className={cn(
                     "rounded border px-1.5 py-0.5 text-[10px]",
                     tool.active
-                      ? "border-emerald-700/40 bg-emerald-900/20 text-emerald-400"
+                      ? toneChip.emerald
                       : "border-border bg-muted text-muted-foreground",
                   )}
                 >

package/src/interfaces/web/src/screens/project/McpsTab.tsx

@@ -1,20 +1,22 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import {
-  ChevronDown, FlaskConical, Globe, Network, Pencil, Plus, ScrollText,
-  Terminal, Trash2, Wrench, X, XCircle,
+  ChevronDown, FlaskConical, Globe, Network, Pencil, Plug, Plus, ScrollText,
+  Terminal, Trash2, Wrench, XCircle,
 } from "lucide-react";
 import { Mcps, Vars, type McpAddBody, type McpScope, type McpLogsResult, type VarsList } from "../../lib/api";
 import type { McpEntry } from "../../types/daemon";
 import { cn } from "../../lib/cn";
 import { Section } from "../../components/Section";
-import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch } from "../../components/ui";
+import { Badge, Button, Dialog, Empty, Field, FilterChips, Input, Loading, Switch } from "../../components/ui";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 import { Tip } from "../../components/ui/tip";
 import { UiSelect } from "../../components/UiSelect";
 import { VarTokenInput } from "../../components/inputs/VarTokenInput";
 import { KeyValueList, recordFromRows, rowsFromRecord, type KvRow } from "../../components/inputs/KeyValueList";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 type DialogMode =
   | null
@@ -58,6 +60,16 @@ function sourceToScope(source: string): McpScope {
   return "shared";
 }
 
+// Which of the three writable scopes a row belongs to is a storage detail, and
+// so is which foreign IDE config we merely read it from. For filtering, the
+// only distinction that matters is where the server lives: in this project, or
+// machine-wide. Everything that is not the global store is the project.
+type ScopeFilter = "all" | "project" | "global";
+
+function sourceBucket(source: string): Exclude<ScopeFilter, "all"> {
+  return source === "global" ? "global" : "project";
+}
+
 function sourceLabel(source: string): string {
   if (source === "runtime") return t("project.mcps.source_runtime");
   if (source === "apc") return t("project.mcps.source_apc");
@@ -80,14 +92,24 @@ export function McpsTab({ pid }: { pid: string }) {
   const [activeMcp, setActiveMcp] = useState<string | null>(null);
   const [results, setResults] = useState<Record<string, McpResult>>({});
   const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>({});
+  const [confirm, setConfirm] = useState<{ name: string; scope: McpScope } | null>(null);
+  const [scopeFilter, setScopeFilter] = useState<ScopeFilter>("all");
 
   const varNames = useMemo(
     () => (vars.data ? Object.keys(vars.data.effective).sort() : []),
     [vars.data],
   );
 
-  const remove = async (name: string, scope: McpScope) => {
-    if (!confirm(t("project.mcps.delete_confirm", { name, scope }))) return;
+  const visible = useMemo(
+    () => (list.data || []).filter(
+      (m) => scopeFilter === "all" || sourceBucket(m.source) === scopeFilter,
+    ),
+    [list.data, scopeFilter],
+  );
+
+  const doRemove = async () => {
+    if (!confirm) return;
+    const { name, scope } = confirm;
     try { await Mcps.remove(pid, name, scope); toast.success(t("project.mcps.removed")); list.mutate(); if (activeMcp === name) setActiveMcp(null); }
     catch (e: any) { toast.error(e?.message || t("common.error_generic")); }
   };
@@ -120,6 +142,19 @@ export function McpsTab({ pid }: { pid: string }) {
           title={t("project.mcps.title")}
           description={t("project.mcps.subtitle")}
           action={<Button size="sm" variant="primary" onClick={() => setDialog({ kind: "new" })}><Plus size={14} /> {t("project.mcps.new")}</Button>}
+          filters={
+            <FilterChips
+              value={scopeFilter}
+              onChange={setScopeFilter}
+              testIdPrefix="mcp-scope-filter"
+              label={t("project.mcps.filter_label")}
+              options={[
+                { value: "all" as const, label: t("project.mcps.filter_all") },
+                { value: "project" as const, label: t("project.mcps.filter_project") },
+                { value: "global" as const, label: t("project.mcps.filter_global") },
+              ]}
+            />
+          }
         >
           {conflicts.data?.conflicts?.length ? (
             <div className="mb-3 rounded-md border border-amber-500/40 bg-amber-500/10 p-2 text-xs">
@@ -144,10 +179,14 @@ export function McpsTab({ pid }: { pid: string }) {
           ) : null}
 
           {list.isLoading && <Loading />}
-          {!list.isLoading && (list.data?.length ?? 0) === 0 && <Empty>{t("project.mcps.empty")}</Empty>}
+          {!list.isLoading && visible.length === 0 && (
+            <Empty icon={Plug}>
+              {(list.data?.length ?? 0) === 0 ? t("project.mcps.empty") : t("project.mcps.filter_empty")}
+            </Empty>
+          )}
 
           <ul className="space-y-2 text-sm">
-            {(list.data || []).map((m) => {
+            {visible.map((m) => {
               const writable = m.source === "apc" || m.source === "runtime" || m.source === "global";
               const scopeForRemove: McpScope = sourceToScope(m.source);
               const isActive = activeMcp === m.name;
@@ -200,7 +239,7 @@ export function McpsTab({ pid }: { pid: string }) {
                           </Tip>
                         )}
                         {writable && (
-                          <Button size="sm" variant="destructive" onClick={(e) => { e.stopPropagation(); remove(m.name, scopeForRemove); }}>
+                          <Button size="sm" variant="destructive" onClick={(e) => { e.stopPropagation(); setConfirm({ name: m.name, scope: scopeForRemove }); }}>
                             <Trash2 size={13} />
                           </Button>
                         )}
@@ -209,7 +248,7 @@ export function McpsTab({ pid }: { pid: string }) {
                       {summary && <p className="mt-0.5 truncate font-mono text-xs text-muted-fg">{summary}</p>}
 
                       {res?.ok === false && res.error && (
-                        <p className="mt-1 flex items-start gap-1 text-xs text-red-400">
+                        <p className={`mt-1 flex items-start gap-1 text-xs ${toneText.red}`}>
                           <XCircle size={12} className="mt-0.5 flex-shrink-0" /> <span className="break-words">{res.error}</span>
                         </p>
                       )}
@@ -261,6 +300,15 @@ export function McpsTab({ pid }: { pid: string }) {
       <div className="lg:col-span-1">
         <LogsPanel pid={pid} mcpName={activeMcp} runningTest={!!(activeMcp && results[activeMcp]?.busy)} />
       </div>
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doRemove}
+        title={confirm ? t("project.mcps.delete_confirm", { name: confirm.name, scope: confirm.scope }) : ""}
+        confirmLabel={t("common.delete")}
+        testId="mcps-delete-confirm"
+      />
     </div>
   );
 }
@@ -322,7 +370,7 @@ function LogsPanel({
           <p className="text-muted-fg">{t("project.mcps.logs_panel_hint")}</p>
         )}
         {mcpName && err && (
-          <p className="text-red-400">{err}</p>
+          <p className={toneText.red}>{err}</p>
         )}
         {mcpName && !err && data && (
           <>
@@ -338,9 +386,9 @@ function LogsPanel({
               <div key={i} className="flex gap-2">
                 <span className="text-muted-fg">{e.ts.slice(11, 19)}</span>
                 <span className={
-                  e.level === "error" ? "text-red-400"
-                  : e.level === "stderr" ? "text-amber-400"
-                  : "text-emerald-400"
+                  e.level === "error" ? toneText.red
+                  : e.level === "stderr" ? toneText.amber
+                  : toneText.emerald
                 }>{e.level}</span>
                 <span className="flex-1 break-all">{e.msg}</span>
               </div>
@@ -348,7 +396,7 @@ function LogsPanel({
             {data.stderr_tail && (
               <div className="mt-2 border-t border-border/60 pt-2">
                 <div className="mb-1 text-muted-fg">stderr</div>
-                <pre className="whitespace-pre-wrap break-all text-amber-300/80">{data.stderr_tail}</pre>
+                <pre className={`whitespace-pre-wrap break-all ${toneText.amber}`}>{data.stderr_tail}</pre>
               </div>
             )}
           </>

package/src/interfaces/web/src/screens/project/Overview.tsx

@@ -5,9 +5,12 @@ import { Bot, Briefcase, Brain, FileCode2, Heart, MessagesSquare, Puzzle, Zap, C
 import { Agents, Artifacts, Conversations, Mcps, Routines, Tasks } from "../../lib/api";
 import { Section } from "../../components/Section";
 import { StatusIcon, StatusBadge, effectiveStatus, statusLabel, TASK_STATUS_ORDER } from "../../components/tasks/taskStatus";
-import { BrainGraph, type BrainNode, type BrainEdge } from "./AgentBrainGraph";
+import { BrainGraph, type BrainNode, type BrainEdge, agentPreview, routinePreview, clipPreview } from "./AgentBrainGraph";
+import { BlobAvatar } from "../../components/agents/BlobAvatar";
+import { isBlobKey } from "../../components/agents/blobPresets";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import { toneText, toneTextHover } from "../../lib/tone";
 import type { AgentEntry, RoutineEntry, TaskEntry } from "../../types/daemon";
 
 // Floor / mission control: a live per-project summary — what's here (agents,
@@ -91,7 +94,7 @@ export function Overview({ pid }: { pid: string }) {
 
         {/* Recent / in-flight tasks */}
         <Section title={t("project.overview.recent_tasks")} className="!p-4"
-          action={<NavLink to={`/p/${pid}/tasks`} className="text-xs text-sky-500 hover:text-sky-400">{t("common.view_all")}</NavLink>}
+          action={<NavLink to={`/p/${pid}/tasks`} className={`text-xs ${toneText.sky} ${toneTextHover.sky}`}>{t("common.view_all")}</NavLink>}
         >
           {openTasks.length === 0 ? (
             <p className="flex items-center gap-2 text-sm text-muted-fg"><Activity className="size-4" />{t("project.overview.no_activity")}</p>
@@ -127,7 +130,7 @@ export function Overview({ pid }: { pid: string }) {
           heartbeats), all connected by hierarchy. */}
       {agentList.length > 0 && (
         <Section title={t("project.overview.brain_title")} description={t("project.overview.brain_desc")} className="!p-4">
-          <TeamBrain pid={pid} agents={agentList} routines={routines.data ?? []} navigate={navigate} />
+          <TeamBrain pid={pid} agents={agentList} routines={routines.data ?? []} />
         </Section>
       )}
     </div>
@@ -167,9 +170,9 @@ interface TeamDetail {
 // each agent becomes a hub with its own sub-brain — memory / threads / tasks /
 // heartbeats — so the whole company reads as one connected brain-of-brains.
 function TeamBrain({
-  pid, agents, routines, navigate,
+  pid, agents, routines,
 }: {
-  pid: string; agents: AgentEntry[]; routines: RoutineEntry[]; navigate: (to: string) => void;
+  pid: string; agents: AgentEntry[]; routines: RoutineEntry[];
 }) {
   const [expanded, setExpanded] = useState(false);
 
@@ -215,8 +218,11 @@ function TeamBrain({
         // In full mode every agent is a hub (it carries its own sub-brain).
         role: showFull || isOrch || hasKids(a.slug) ? "hub" : "leaf",
         emoji: a.emoji || undefined,
+        icon: a.icon || undefined,
         relation: a.role || (isOrch ? t("project.agents.orchestrator") : t("project.overview.specialists")),
-        detail: a.description || undefined,
+        detail: agentPreview(a),
+        href: `/p/${pid}/agents/${a.slug}`,
+        editHref: `/p/${pid}/agents/${a.slug}?tab=config`,
       });
     }
     for (const a of agents) {
@@ -227,22 +233,34 @@ function TeamBrain({
     // Expanded: graft each agent's own items as leaves off the agent node.
     if (showFull && detail.data) {
       const { tasks, perAgent } = detail.data;
-      const push = (id: string, label: string, kind: BrainNode["kind"], parent: string, detailText?: string) => {
-        nodes.push({ id, label, kind, detail: detailText });
+      const push = (id: string, label: string, kind: BrainNode["kind"], parent: string, extra?: Partial<BrainNode>) => {
+        nodes.push({ id, label, kind, ...extra });
         edges.push({ source: parent, target: id });
       };
       for (const a of agents) {
         const info = perAgent[a.slug];
-        memoryFacts(info?.memory || "").forEach((f, i) => push(`${a.slug}:m${i}`, f, "memory", a.slug, f));
-        (info?.threads || []).forEach((th, i) => push(`${a.slug}:th${i}`, th.title, "thread", a.slug));
+        memoryFacts(info?.memory || "").forEach((f, i) => push(`${a.slug}:m${i}`, f, "memory", a.slug, {
+          detail: f, href: `/p/${pid}/agents/${a.slug}?tab=memories`,
+        }));
+        (info?.threads || []).forEach((th, i) => push(`${a.slug}:th${i}`, th.title, "thread", a.slug, {
+          href: `/p/${pid}/chat?agent=${a.slug}&conv=${th.id}`,
+        }));
         tasks.filter((tk) => tk.agent === a.slug).slice(0, 4)
-          .forEach((tk, i) => push(`${a.slug}:ts${i}`, tk.title, "task", a.slug, tk.body || undefined));
+          .forEach((tk, i) => push(`${a.slug}:ts${i}`, tk.title, "task", a.slug, {
+            detail: clipPreview(tk.body),
+            href: `/p/${pid}/tasks?task=${tk.id}`,
+            editHref: `/p/${pid}/tasks?task=${tk.id}&edit=1`,
+          }));
         routines.filter((r) => (r.spec as { agent?: string })?.agent === a.slug).slice(0, 2)
-          .forEach((r, i) => push(`${a.slug}:rt${i}`, r.name, "routine", a.slug, `schedule: ${r.schedule}`));
+          .forEach((r, i) => push(`${a.slug}:rt${i}`, r.name, "routine", a.slug, {
+            detail: routinePreview(r),
+            href: `/p/${pid}/routines?r_id=${encodeURIComponent(r.name)}`,
+            editHref: `/p/${pid}/routines?r_id=${encodeURIComponent(r.name)}&edit=1`,
+          }));
       }
     }
     return { nodes, edges };
-  }, [agents, routines, showFull, detail.data]);
+  }, [agents, routines, showFull, detail.data, pid]);
 
   const toggle = (
     <button
@@ -264,7 +282,6 @@ function TeamBrain({
       edges={edges}
       height={620}
       toolbar={toggle}
-      onNodeClick={(n) => { if (n.slug) navigate(`/p/${pid}/agents/${n.slug}`); }}
     />
   );
 }
@@ -289,7 +306,11 @@ function RosterRow({
               "inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2 py-1 text-xs hover:border-muted-fg/50",
             )}
           >
-            <span className="text-sm leading-none">{a.emoji || "🤖"}</span>
+            {isBlobKey(a.icon) ? (
+              <BlobAvatar preset={a.icon} size={20} seed={a.slug} className="shrink-0" />
+            ) : (
+              <span className="text-sm leading-none">{a.emoji || "🤖"}</span>
+            )}
             <span className="truncate">{a.slug}</span>
             {a.role && <span className="truncate text-[10px] text-muted-fg">· {a.role}</span>}
           </button>

package/src/interfaces/web/src/screens/project/RoutinesTab.tsx

@@ -1,15 +1,18 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import useSWR, { mutate as globalMutate } from "swr";
-import { Plus } from "lucide-react";
+import { MousePointerClick, Play, Plus, Repeat } from "lucide-react";
 import { Routines, type RoutineEntry } from "../../lib/api";
 import { Button, Dialog, Empty, Loading } from "../../components/ui";
 import { useToast } from "../../components/Toast";
 import { Section } from "../../components/Section";
 import { t } from "../../i18n";
+import { subscribeRoutineRuns } from "../../lib/live";
 import { RoutineList } from "../../components/routines/RoutineList";
 import { RoutineDetail } from "../../components/routines/RoutineDetail";
 import { RoutineEditor } from "../../components/routines/RoutineEditor";
+import { BulkActionBar } from "../../components/common/BulkActionBar";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 
 // Full-height master-detail (like the Chat screen): scrollable routine list on
 // the left, read-only detail on the right. Selection lives in the URL (?r_id),
@@ -22,9 +25,16 @@ export function RoutinesTab({ pid }: { pid: string }) {
   const [confirmDelete, setConfirmDelete] = useState<RoutineEntry | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [confirmRun, setConfirmRun] = useState<RoutineEntry | null>(null);
+  // Optimistic only — the window between the click and the daemon's first frame.
+  // The truth about what is running is `r.running`, which comes from the daemon
+  // and therefore survives a refresh and shows scheduled runs too.
   const [running, setRunning] = useState<string | null>(null);
+  // Multi-select run — routines are single-project and keyed by name.
+  const [checked, setChecked] = useState<Set<string>>(new Set());
+  const [bulkRun, setBulkRun] = useState(false);
 
   const rows = list.data || [];
+  const isRunning = (r: RoutineEntry) => !!r.running || running === r.name;
   const selectedName = params.get("r_id");
   const selected = rows.find((r) => r.name === selectedName) || null;
 
@@ -42,6 +52,58 @@ export function RoutinesTab({ pid }: { pid: string }) {
     selectRoutine(rows[0].name);
   }, [rows, selectedName]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // A run starting or ending anywhere — this tab, another device, the scheduler
+  // — changes what the list should say (the running mark, then last run/status).
+  // Steps in between do not: the executions pane follows those on its own.
+  const refreshList = useCallback(() => { list.mutate(); }, [list]);
+  useEffect(() => subscribeRoutineRuns((frame) => {
+    if (String(frame.project_id) !== String(pid)) return;
+    if (frame.phase === "start" || frame.phase === "end") refreshList();
+  }), [pid, refreshList]);
+
+  const wantEdit = params.get("edit") === "1";
+  const canOpenEditor = wantEdit && !!selected;
+  useEffect(() => {
+    if (!canOpenEditor || !selected) return;
+    setEditing({ ...selected });
+    setParams((prev) => {
+      const next = new URLSearchParams(prev);
+      next.delete("edit");
+      return next;
+    }, { replace: true });
+  }, [canOpenEditor, selectedName]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const toggleCheck = (r: RoutineEntry) =>
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(r.name)) next.delete(r.name); else next.add(r.name);
+      return next;
+    });
+  const clearChecked = () => setChecked(new Set());
+  // Prune names that have left the list (deleted/renamed) so the count stays honest.
+  useEffect(() => {
+    setChecked((prev) => {
+      const names = new Set(rows.map((r) => r.name));
+      const next = new Set([...prev].filter((n) => names.has(n)));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [rows]);
+
+  const runBulk = async () => {
+    const names = [...checked];
+    if (names.length === 0) return;
+    const results = await Promise.allSettled(names.map((n) => Routines.run(pid, n)));
+    const failed = results.filter((r) => r.status === "rejected").length;
+    const ok = names.length - failed;
+    if (ok > 0) toast.success(t("project.routines.bulk_run_toast", { count: ok }));
+    if (failed > 0) toast.error(t("project.routines.run_error"));
+    clearChecked();
+    await Promise.all([
+      list.mutate(),
+      ...names.map((n) => globalMutate(`/api/projects/${pid}/routines/${n}/runs`)),
+    ]);
+  };
+
   const toggle = async (r: RoutineEntry) => {
     try { await (r.enabled ? Routines.disable : Routines.enable)(pid, r.name); list.mutate(); }
     catch (e: any) { toast.error(e?.message || t("project.routines.toggle_error")); }
@@ -52,6 +114,10 @@ export function RoutinesTab({ pid }: { pid: string }) {
     setConfirmRun(null);
     setRunning(r.name);
     try {
+      // The daemon answers when the run is OVER — it can be minutes. The panel
+      // does not wait for that to show anything: the run announces itself on the
+      // live feed within a beat, and the executions pane draws it there.
+      list.mutate();
       await Routines.run(pid, r.name);
       toast.success(t("project.routines.run_success", { name: r.name }));
       // Refresh the routine list (last status) and its executions list.
@@ -90,11 +156,11 @@ export function RoutinesTab({ pid }: { pid: string }) {
       }
     >
       {list.isLoading && <Loading />}
-      {!list.isLoading && rows.length === 0 && <Empty>{t("project.routines.empty")}</Empty>}
+      {!list.isLoading && rows.length === 0 && <Empty icon={Repeat}>{t("project.routines.empty")}</Empty>}
 
       {rows.length > 0 && (
         <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] grid-cols-[minmax(200px,260px)_1fr] overflow-hidden rounded-lg border border-border">
-          <RoutineList routines={rows} selectedName={selected?.name ?? null} onSelect={selectRoutine} />
+          <RoutineList routines={rows} selectedName={selected?.name ?? null} onSelect={selectRoutine} checkedNames={checked} onToggleCheck={toggleCheck} runningName={running} />
           <div className="min-h-0 min-w-0 overflow-hidden">
             {selected
               ? <RoutineDetail
@@ -105,11 +171,9 @@ export function RoutinesTab({ pid }: { pid: string }) {
                   onRun={() => setConfirmRun(selected)}
                   onToggle={() => toggle(selected)}
                   onDelete={() => setConfirmDelete(selected)}
-                  running={running === selected.name}
+                  running={isRunning(selected)}
                 />
-              : <div className="flex h-full items-center justify-center p-8">
-                  <p className="text-sm text-muted-fg">{t("project.routines.detail_empty")}</p>
-                </div>}
+              : <Empty fill icon={MousePointerClick}>{t("project.routines.detail_empty")}</Empty>}
           </div>
         </div>
       )}
@@ -150,6 +214,27 @@ export function RoutinesTab({ pid }: { pid: string }) {
       >
         <p className="text-sm text-muted-fg">{t("project.routines.run_confirm_body")}</p>
       </Dialog>
+
+      <BulkActionBar
+        count={checked.size}
+        countLabel={t("project.routines.bulk_selected", { count: checked.size })}
+        actions={[
+          { key: "run", label: t("project.routines.bulk_run"), icon: <Play size={14} />, variant: "primary", onClick: () => setBulkRun(true), testId: "routine-bulk-run" },
+        ]}
+        onClear={clearChecked}
+        clearLabel={t("project.routines.bulk_clear")}
+        testId="routine-bulk-bar"
+      />
+      <ConfirmDialog
+        open={bulkRun}
+        onClose={() => setBulkRun(false)}
+        onConfirm={runBulk}
+        destructive={false}
+        title={t("project.routines.confirm_bulk_run_title", { count: checked.size })}
+        description={t("project.routines.confirm_bulk_run_desc", { count: checked.size })}
+        confirmLabel={t("common.run")}
+        testId="routine-bulk-run-confirm"
+      />
     </Section>
   );
 }

package/src/interfaces/web/src/screens/project/SkillsTab.tsx

@@ -1,3 +1,4 @@
+import { useSearchParams } from "react-router-dom";
 import { useProject } from "../../hooks/useProjects";
 import { Loading } from "../../components/ui";
 import { SkillsManager } from "../../components/settings/SkillsManager";
@@ -7,7 +8,9 @@ import { SkillsManager } from "../../components/settings/SkillsManager";
 // The base project (pid "0" = super-agent admin) manages the "default" scope.
 export function SkillsTab({ pid }: { pid: string }) {
   const { project } = useProject(pid);
+  // `?skill=slug` opens straight on that skill — what a chat's skill badge links to.
+  const [params] = useSearchParams();
   const scope = pid === "0" ? "default" : project?.path;
   if (!scope) return <Loading />;
-  return <SkillsManager scope={scope} />;
+  return <SkillsManager scope={scope} initialSlug={params.get("skill") ?? undefined} />;
 }

package/src/interfaces/web/src/screens/project/StructureTab.tsx

@@ -8,6 +8,7 @@ import { AreaDialog, RoleDialog } from "../../components/structure/StructureDial
 import { Org } from "../../lib/api/organization";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
+import { toneText, toneTextHover } from "../../lib/tone";
 import type { OrgArea, OrgRole } from "../../types/daemon";
 
 export function StructureTab({ pid }: { pid: string }) {
@@ -49,7 +50,7 @@ export function StructureTab({ pid }: { pid: string }) {
         }
       >
         <div className="mb-4 flex items-start gap-2 rounded-lg border border-sky-500/20 bg-sky-500/5 px-3 py-2 text-[13px] text-muted-foreground">
-          <Info className="mt-0.5 size-4 shrink-0 text-sky-500" />
+          <Info className={`mt-0.5 size-4 shrink-0 ${toneText.sky}`} />
           <span>{t("structure.info")}</span>
         </div>
 
@@ -62,7 +63,7 @@ export function StructureTab({ pid }: { pid: string }) {
             {areas.map((area) => (
               <div key={area.slug} className="group rounded-lg border border-border bg-card/50 p-3">
                 <div className="flex items-start gap-2">
-                  <FolderKanban className="mt-0.5 size-4 shrink-0 text-emerald-500" />
+                  <FolderKanban className={`mt-0.5 size-4 shrink-0 ${toneText.emerald}`} />
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
                       <span className="truncate text-sm font-semibold">{area.name}</span>
@@ -86,7 +87,7 @@ export function StructureTab({ pid }: { pid: string }) {
                     <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
                       {t("structure.roles")} ({rolesByArea(area.slug).length})
                     </span>
-                    <button type="button" onClick={() => setRoleDialog({ presetArea: area.slug })} className="text-[11px] text-sky-500 hover:text-sky-400">
+                    <button type="button" onClick={() => setRoleDialog({ presetArea: area.slug })} className={`text-[11px] ${toneText.sky} ${toneTextHover.sky}`}>
                       + {t("structure.add_role")}
                     </button>
                   </div>
@@ -94,7 +95,7 @@ export function StructureTab({ pid }: { pid: string }) {
                     {rolesByArea(area.slug).map((role) => (
                       <RoleChip key={role.slug} role={role} onEdit={() => setRoleDialog({ editing: role })} onDelete={() => setConfirm({ kind: "role", slug: role.slug, name: role.name })} />
                     ))}
-                    {rolesByArea(area.slug).length === 0 && <span className="text-[11px] text-muted-foreground/60">{t("structure.no_roles")}</span>}
+                    {rolesByArea(area.slug).length === 0 && <span className="text-[11px] text-muted-foreground">{t("structure.no_roles")}</span>}
                   </div>
                 </div>
               </div>