core-lead/molecule-core
1
0
Fork 0
forked from molecule-ai/molecule-core
Code Pull Requests Activity

Merge pull request #482 from Molecule-AI/fix/canvas-ux-improvements

Browse Source 
fix(canvas): UX improvements — tokens, focus, loading, a11y
This commit is contained in:
Hongming Wang 2026-04-16 07:54:48 -07:00 committed by GitHub
commit 8025fb2f09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 101 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
canvas/src/__tests__/reduced-motion.test.ts
View File

@ -13,6 +13,12 @@ function readSrc(rel: string) {
return readFileSync(join(root, "src", rel), "utf8");
}
function usesGuardedPulse(src: string): boolean {
if (src.includes("motion-safe:animate-pulse")) return true;
if (src.includes("from \"@/lib/design-tokens\"") || src.includes("from '@/lib/design-tokens'")) return true;
return false;
}
describe("prefers-reduced-motion compliance", () => {
it("globals.css contains @media (prefers-reduced-motion: reduce) block", () => {
const css = readSrc("app/globals.css");
@ -34,10 +40,10 @@ describe("prefers-reduced-motion compliance", () => {
expect(src).toContain("motion-safe:animate-pulse");
});
it("StatusDot.tsx uses motion-safe:animate-pulse", () => {
it("StatusDot.tsx uses motion-safe:animate-pulse (inline or via shared tokens)", () => {
const src = readSrc("components/StatusDot.tsx");
expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
expect(src).toContain("motion-safe:animate-pulse");
expect(usesGuardedPulse(src)).toBe(true);
});
it("Toolbar.tsx uses motion-safe:animate-pulse", () => {
@ -52,16 +58,16 @@ describe("prefers-reduced-motion compliance", () => {
expect(src).toContain("motion-safe:animate-pulse");
});
it("Legend.tsx uses motion-safe:animate-pulse", () => {
it("Legend.tsx uses motion-safe:animate-pulse (inline or via shared tokens)", () => {
const src = readSrc("components/Legend.tsx");
expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
expect(src).toContain("motion-safe:animate-pulse");
expect(usesGuardedPulse(src)).toBe(true);
});
it("SearchDialog.tsx uses motion-safe:animate-pulse", () => {
it("SearchDialog.tsx uses motion-safe:animate-pulse (inline or via shared tokens)", () => {
const src = readSrc("components/SearchDialog.tsx");
expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
expect(src).toContain("motion-safe:animate-pulse");
expect(usesGuardedPulse(src)).toBe(true);
});
it("TerminalTab.tsx uses motion-safe:animate-pulse", () => {
@ -76,6 +82,12 @@ describe("prefers-reduced-motion compliance", () => {
expect(src).toContain("motion-safe:animate-pulse");
});
it("design-tokens.ts uses motion-safe:animate-pulse, not bare animate-pulse", () => {
const src = readSrc("lib/design-tokens.ts");
expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
expect(src).toContain("motion-safe:animate-pulse");
});
it("globals.css disables animate-in and slide-in classes under reduced-motion", () => {
const css = readSrc("app/globals.css");
expect(css).toContain(".animate-in");

4
canvas/src/components/CommunicationOverlay.tsx
View File

@ -3,6 +3,7 @@
import { useState, useEffect, useCallback, useRef } from "react";
import { useCanvasStore } from "@/store/canvas";
import { api } from "@/lib/api";
import { COMM_TYPE_LABELS } from "@/lib/design-tokens";
interface Communication {
id: string;
@ -143,14 +144,17 @@ export function CommunicationOverlay() {
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-1.5 min-w-0">
<span className={typeColor} aria-hidden="true">{typeIcon}</span>
<span className="sr-only">{COMM_TYPE_LABELS[c.type] ?? c.type}</span>
<span className="text-zinc-300 font-medium truncate">
{c.sourceName}
</span>
<span className="text-zinc-400" aria-hidden="true">→</span>
<span className="sr-only">to</span>
<span className="text-zinc-300 truncate">{c.targetName}</span>
</div>
<div className="flex items-center gap-1 shrink-0">
<span className={statusColor} aria-hidden="true">{statusIcon}</span>
<span className="sr-only">{c.status}</span>
<span className="text-zinc-400">{age}</span>
</div>
</div>

5
canvas/src/components/ContextMenu.tsx
View File

@ -5,6 +5,7 @@ import { useCanvasStore, type WorkspaceNodeData } from "@/store/canvas";
import { api } from "@/lib/api";
import { showToast } from "./Toaster";
import { ConfirmDialog } from "./ConfirmDialog";
import { statusDotClass } from "@/lib/design-tokens";
interface MenuItem {
label: string;
@ -277,9 +278,7 @@ export function ContextMenu() {
<div className="flex items-center gap-1.5 mt-0.5">
<div
aria-hidden="true"
className={`w-1.5 h-1.5 rounded-full ${
isOnline ? "bg-emerald-400" : isOfflineOrFailed ? "bg-red-400" : "bg-zinc-500"
}`}
className={`w-1.5 h-1.5 rounded-full ${statusDotClass(contextMenu.nodeData.status)}`}
/>
<span className="text-[10px] text-zinc-500">{contextMenu.nodeData.status}</span>
</div>

20
canvas/src/components/EmptyState.tsx
View File

@ -4,6 +4,8 @@ import { useState, useEffect } from "react";
import { api } from "@/lib/api";
import { useCanvasStore } from "@/store/canvas";
import { OrgTemplatesSection } from "./TemplatePalette";
import { Spinner } from "./Spinner";
import { TIER_CONFIG } from "@/lib/design-tokens";
interface Template {
id: string;
@ -15,13 +17,6 @@ interface Template {
skill_count: number;
}
const TIER_COLORS: Record<number, string> = {
1: "text-zinc-400 border-zinc-700/60",
2: "text-sky-400 border-sky-500/30",
3: "text-violet-400 border-violet-500/30",
4: "text-amber-400 border-amber-500/30",
};
export function EmptyState() {
const [templates, setTemplates] = useState<Template[]>([]);
const [loading, setLoading] = useState(true);
@ -105,17 +100,20 @@ export function EmptyState() {
{/* Template grid */}
{loading ? (
<div className="text-xs text-zinc-400 py-4">Loading templates...</div>
<div className="flex items-center justify-center gap-2 text-xs text-zinc-400 py-4">
<Spinner />
Loading templates...
</div>
) : templates.length > 0 ? (
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5 mb-4 text-left">
{templates.map((t) => {
const tierColor = TIER_COLORS[t.tier] || TIER_COLORS[1];
const tierColor = TIER_CONFIG[t.tier]?.border || TIER_CONFIG[1].border;
return (
<button
key={t.id}
onClick={() => deploy(t)}
disabled={!!deploying}
className="group rounded-xl border border-zinc-800/60 bg-zinc-900/50 px-3.5 py-3 hover:border-blue-500/40 hover:bg-zinc-900/80 transition-all disabled:opacity-50 text-left"
className="group rounded-xl border border-zinc-800/60 bg-zinc-900/50 px-3.5 py-3 hover:border-blue-500/40 hover:bg-zinc-900/80 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-zinc-800/60 disabled:hover:bg-zinc-900/50 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
>
<div className="flex items-center gap-2 mb-1">
<span className="text-sm font-medium text-zinc-200 group-hover:text-zinc-100 truncate">
@ -144,7 +142,7 @@ export function EmptyState() {
<button
onClick={createBlank}
disabled={!!deploying}
className="w-full rounded-xl border border-dashed border-zinc-700/60 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 hover:bg-zinc-900/50 transition-all disabled:opacity-50"
className="w-full rounded-xl border border-dashed border-zinc-700/60 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 hover:bg-zinc-900/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-zinc-400 disabled:hover:border-zinc-700/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
>
{deploying === "blank" ? "Creating..." : "+ Create blank workspace"}
</button>

13
canvas/src/components/Legend.tsx
View File

@ -1,5 +1,9 @@
"use client";
import { STATUS_CONFIG } from "@/lib/design-tokens";
const LEGEND_STATUSES = ["online", "provisioning", "degraded", "failed", "paused", "offline"] as const;
export function Legend() {
return (
<div className="fixed bottom-6 left-4 z-30 bg-zinc-900/95 border border-zinc-700/50 rounded-xl px-4 py-3 shadow-xl shadow-black/30 backdrop-blur-sm max-w-[280px]">
@ -9,12 +13,9 @@ export function Legend() {
<div className="mb-2">
<div className="text-[11px] text-zinc-500 font-medium mb-1">Status</div>
<div className="flex flex-wrap gap-x-3 gap-y-1">
<StatusItem color="bg-emerald-400" label="Online" />
<StatusItem color="bg-sky-400 motion-safe:animate-pulse" label="Starting" />
<StatusItem color="bg-amber-400" label="Degraded" />
<StatusItem color="bg-red-400" label="Failed" />
<StatusItem color="bg-indigo-400" label="Paused" />
<StatusItem color="bg-zinc-500" label="Offline" />
{LEGEND_STATUSES.map((s) => (
<StatusItem key={s} color={STATUS_CONFIG[s].dot} label={STATUS_CONFIG[s].label} />
))}
</div>
</div>

8
canvas/src/components/SearchDialog.tsx
View File

@ -2,6 +2,7 @@
import { useState, useEffect, useRef, useCallback } from "react";
import { useCanvasStore } from "@/store/canvas";
import { statusDotClass } from "@/lib/design-tokens";
export function SearchDialog() {
const open = useCanvasStore((s) => s.searchOpen);
@ -142,12 +143,7 @@ export function SearchDialog() {
>
<div
aria-hidden="true"
className={`w-2 h-2 rounded-full shrink-0 ${
node.data.status === "online" ? "bg-emerald-400" :
node.data.status === "failed" ? "bg-red-400" :
node.data.status === "provisioning" ? "bg-sky-400 motion-safe:animate-pulse" :
"bg-zinc-500"
}`}
className={`w-2 h-2 rounded-full shrink-0 ${statusDotClass(node.data.status)}`}
/>
<div className="min-w-0 flex-1">
<div className="text-sm text-zinc-200 truncate">{node.data.name}</div>

4
canvas/src/components/SidePanel.tsx
View File

@ -186,10 +186,10 @@ export function SidePanel() {
aria-controls={`panel-${tab.id}`}
tabIndex={panelTab === tab.id ? 0 : -1}
onClick={() => setPanelTab(tab.id)}
className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-1 focus-visible:ring-zinc-600 ${
className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70 ${
panelTab === tab.id
? "text-zinc-100 bg-zinc-800/40 border-b-2 border-blue-500"
: "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/20"
: "text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800/40"
}`}
>
<span className="mr-1 opacity-50" aria-hidden="true">{tab.icon}</span>

12
canvas/src/components/Spinner.tsx Normal file
View File

@ -0,0 +1,12 @@
"use client";
const SIZES = { sm: "w-3 h-3", md: "w-4 h-4", lg: "w-5 h-5" } as const;
export function Spinner({ size = "md" }: { size?: keyof typeof SIZES }) {
return (
<svg className={`${SIZES[size]} motion-safe:animate-spin`} viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}

13
canvas/src/components/StatusDot.tsx
View File

@ -1,13 +1,6 @@
"use client";
export const STATUS_COLORS: Record<string, string> = {
online: "bg-emerald-400",
offline: "bg-zinc-500",
paused: "bg-indigo-400",
degraded: "bg-amber-400",
failed: "bg-red-400",
provisioning: "bg-sky-400 motion-safe:animate-pulse",
};
import { STATUS_CONFIG, statusDotClass } from "@/lib/design-tokens";
export function StatusDot({
status,
@ -17,10 +10,10 @@ export function StatusDot({
size?: "sm" | "md";
}) {
const sizeClass = size === "md" ? "w-2.5 h-2.5" : "w-2 h-2";
const glowClass = status === "online" ? "shadow-sm shadow-emerald-400/50" : "";
const glowClass = STATUS_CONFIG[status]?.glow ?? "";
return (
<div
className={`${sizeClass} rounded-full shrink-0 ${STATUS_COLORS[status] || "bg-zinc-600"} ${glowClass}`}
className={`${sizeClass} rounded-full shrink-0 ${statusDotClass(status)} ${glowClass}`}
/>
);
}

17
canvas/src/components/TemplatePalette.tsx
View File

@ -5,6 +5,8 @@ import { api } from "@/lib/api";
import { checkDeploySecrets, type PreflightResult } from "@/lib/deploy-preflight";
import { MissingKeysModal } from "./MissingKeysModal";
import { ConfirmDialog } from "./ConfirmDialog";
import { Spinner } from "./Spinner";
import { TIER_CONFIG } from "@/lib/design-tokens";
interface Template {
id: string;
@ -90,7 +92,8 @@ export function OrgTemplatesSection() {
</div>
{loading && (
<div role="status" aria-live="polite" className="text-[10px] text-zinc-500">
<div role="status" aria-live="polite" className="flex items-center gap-1.5 text-[10px] text-zinc-500">
<Spinner size="sm" />
Loading…
</div>
)}
@ -141,12 +144,7 @@ export function OrgTemplatesSection() {
);
}
const TIER_LABELS: Record<number, { label: string; color: string }> = {
1: { label: "T1", color: "text-zinc-400 bg-zinc-800/60" },
2: { label: "T2", color: "text-sky-400 bg-sky-950/40" },
3: { label: "T3", color: "text-violet-400 bg-violet-950/40" },
4: { label: "T4", color: "text-amber-400 bg-amber-950/40" },
};
const TIER_LABELS = TIER_CONFIG;
function ImportAgentButton({ onImported }: { onImported: () => void }) {
const [importing, setImporting] = useState(false);
@ -354,7 +352,8 @@ export function TemplatePalette() {
<div className="flex-1 overflow-y-auto p-3 space-y-2">
{loading && (
<div role="status" aria-live="polite" className="text-xs text-zinc-500 text-center py-8">
<div role="status" aria-live="polite" className="flex items-center justify-center gap-2 text-xs text-zinc-500 text-center py-8">
<Spinner />
Loading…
</div>
)}
@ -380,7 +379,7 @@ export function TemplatePalette() {
key={t.id}
onClick={() => handleDeploy(t)}
disabled={isDeploying}
className="w-full text-left bg-zinc-800/40 hover:bg-zinc-800/70 border border-zinc-700/40 hover:border-zinc-600/50 rounded-xl p-3 transition-all disabled:opacity-50 group"
className="w-full text-left bg-zinc-800/40 hover:bg-zinc-800/70 border border-zinc-700/40 hover:border-zinc-600/50 rounded-xl p-3 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800/40 disabled:hover:border-zinc-700/40 group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
>
<div className="flex items-center justify-between mb-1">
<span className="text-[12px] font-semibold text-zinc-200 group-hover:text-zinc-100 truncate">

13
canvas/src/components/Toolbar.tsx
View File

@ -7,6 +7,7 @@ import { SettingsButton } from "@/components/settings/SettingsButton";
import { settingsGearRef } from "@/components/settings/SettingsPanel";
import { ConfirmDialog } from "@/components/ConfirmDialog";
import { showToast } from "@/components/Toaster";
import { statusDotClass } from "@/lib/design-tokens";
export function Toolbar() {
const nodes = useCanvasStore((s) => s.nodes);
@ -120,15 +121,15 @@ export function Toolbar() {
{/* Status counts */}
<div className="flex items-center gap-2.5">
<StatusPill color="bg-emerald-400" count={counts.online} label="online" />
<StatusPill color={statusDotClass("online")} count={counts.online} label="online" />
{counts.offline > 0 && (
<StatusPill color="bg-zinc-500" count={counts.offline} label="offline" />
<StatusPill color={statusDotClass("offline")} count={counts.offline} label="offline" />
)}
{counts.provisioning > 0 && (
<StatusPill color="bg-sky-400 motion-safe:animate-pulse" count={counts.provisioning} label="starting" />
<StatusPill color={statusDotClass("provisioning")} count={counts.provisioning} label="starting" />
)}
{counts.failed > 0 && (
<StatusPill color="bg-red-400" count={counts.failed} label="failed" />
<StatusPill color={statusDotClass("failed")} count={counts.failed} label="failed" />
)}
</div>
@ -259,7 +260,7 @@ function WsStatusPill({ status }: { status: "connected" | "connecting" | "discon
if (status === "connected") {
return (
<div className="flex items-center gap-1.5" title="Real-time updates: connected">
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
<div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("online")}`} />
<span className="text-[10px] text-zinc-500">Live</span>
</div>
);
@ -274,7 +275,7 @@ function WsStatusPill({ status }: { status: "connected" | "connecting" | "discon
}
return (
<div className="flex items-center gap-1.5" title="Real-time updates: disconnected">
<div className="w-1.5 h-1.5 rounded-full bg-red-400" />
<div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("failed")}`} />
<span className="text-[10px] text-zinc-500">Offline</span>
</div>
);

18
canvas/src/components/WorkspaceNode.tsx
View File

@ -5,6 +5,7 @@ import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
import { useCanvasStore, type WorkspaceNodeData } from "@/store/canvas";
import { showToast } from "@/components/Toaster";
import { Tooltip } from "@/components/Tooltip";
import { STATUS_CONFIG, TIER_CONFIG } from "@/lib/design-tokens";
import { useShallow } from "zustand/react/shallow";
/** Stable selector: returns children, grandchild flag, and descendant count for a node */
@ -27,15 +28,6 @@ function useHierarchyInfo(parentId: string) {
return { children, hasGrandchildren, descendantCount };
}
const STATUS_CONFIG: Record<string, { dot: string; glow: string; label: string; bar: string }> = {
online: { dot: "bg-emerald-400", glow: "shadow-emerald-400/50", label: "Online", bar: "from-emerald-500/20 to-transparent" },
offline: { dot: "bg-zinc-500", glow: "", label: "Offline", bar: "from-zinc-600/10 to-transparent" },
paused: { dot: "bg-indigo-400", glow: "", label: "Paused", bar: "from-indigo-500/10 to-transparent" },
degraded: { dot: "bg-amber-400", glow: "shadow-amber-400/50", label: "Degraded", bar: "from-amber-500/20 to-transparent" },
failed: { dot: "bg-red-400", glow: "shadow-red-400/50", label: "Failed", bar: "from-red-500/20 to-transparent" },
provisioning: { dot: "bg-sky-400 motion-safe:animate-pulse", glow: "shadow-sky-400/50", label: "Starting", bar: "from-sky-500/20 to-transparent" },
};
/** Eject/extract arrow icon — visually distinct from delete ✕ */
function EjectIcon() {
return (
@ -46,13 +38,6 @@ function EjectIcon() {
);
}
const TIER_CONFIG: Record<number, { label: string; color: string }> = {
1: { label: "T1", color: "text-zinc-500 bg-zinc-800/80" },
2: { label: "T2", color: "text-sky-400 bg-sky-950/50" },
3: { label: "T3", color: "text-violet-400 bg-violet-950/50" },
4: { label: "T4", color: "text-amber-400 bg-amber-950/50" },
};
export function WorkspaceNode({ id, data }: NodeProps<Node<WorkspaceNodeData>>) {
const statusCfg = STATUS_CONFIG[data.status] || STATUS_CONFIG.offline;
const tierCfg = TIER_CONFIG[data.tier] || { label: `T${data.tier}`, color: "text-zinc-500 bg-zinc-800" };
@ -123,6 +108,7 @@ export function WorkspaceNode({ id, data }: NodeProps<Node<WorkspaceNodeData>>)
: "bg-zinc-900/90 border border-zinc-700/80 hover:border-zinc-500/60 shadow-lg shadow-black/30 hover:shadow-xl hover:shadow-black/40"
}
backdrop-blur-sm
focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-950
`}
>
{/* Status gradient bar at top */}

25
canvas/src/lib/design-tokens.ts Normal file
View File

@ -0,0 +1,25 @@
export const STATUS_CONFIG: Record<string, { dot: string; glow: string; label: string; bar: string }> = {
online: { dot: "bg-emerald-400", glow: "shadow-emerald-400/50", label: "Online", bar: "from-emerald-500/20 to-transparent" },
offline: { dot: "bg-zinc-500", glow: "", label: "Offline", bar: "from-zinc-600/10 to-transparent" },
paused: { dot: "bg-indigo-400", glow: "", label: "Paused", bar: "from-indigo-500/10 to-transparent" },
degraded: { dot: "bg-amber-400", glow: "shadow-amber-400/50", label: "Degraded", bar: "from-amber-500/20 to-transparent" },
failed: { dot: "bg-red-400", glow: "shadow-red-400/50", label: "Failed", bar: "from-red-500/20 to-transparent" },
provisioning: { dot: "bg-sky-400 motion-safe:animate-pulse", glow: "shadow-sky-400/50", label: "Starting", bar: "from-sky-500/20 to-transparent" },
};
export function statusDotClass(status: string): string {
return STATUS_CONFIG[status]?.dot ?? "bg-zinc-500";
}
export const TIER_CONFIG: Record<number, { label: string; color: string; border: string }> = {
1: { label: "T1", color: "text-zinc-500 bg-zinc-800/80", border: "text-zinc-400 border-zinc-700/60" },
2: { label: "T2", color: "text-sky-400 bg-sky-950/50", border: "text-sky-400 border-sky-500/30" },
3: { label: "T3", color: "text-violet-400 bg-violet-950/50", border: "text-violet-400 border-violet-500/30" },
4: { label: "T4", color: "text-amber-400 bg-amber-950/50", border: "text-amber-400 border-amber-500/30" },
};
export const COMM_TYPE_LABELS: Record<string, string> = {
a2a_send: "sent",
a2a_receive: "received",
task_update: "task update",
};