diff --git a/canvas/src/components/MemoryInspectorPanel.tsx b/canvas/src/components/MemoryInspectorPanel.tsx index bb9e7516..6c0e0c3b 100644 --- a/canvas/src/components/MemoryInspectorPanel.tsx +++ b/canvas/src/components/MemoryInspectorPanel.tsx @@ -414,6 +414,7 @@ function MemoryEntryRow({ onCancelEdit, onDelete, }: MemoryEntryRowProps) { + const bodyId = `memory-body-${entry.key.replace(/\s+/g, "-")}`; return (
{/* Header row — click to expand/collapse */} @@ -421,6 +422,7 @@ function MemoryEntryRow({ className="w-full flex items-center gap-2 px-3 py-2.5 text-left hover:bg-zinc-800/30 transition-colors" onClick={onToggle} aria-expanded={isExpanded} + aria-controls={bodyId} > {entry.key} @@ -455,7 +457,12 @@ function MemoryEntryRow({ {/* Expanded body */} {isExpanded && ( -
+
{entry.expires_at && (

Expires: {new Date(entry.expires_at).toLocaleString()} diff --git a/canvas/src/components/SidePanel.tsx b/canvas/src/components/SidePanel.tsx index 21983eb8..c8b6456e 100644 --- a/canvas/src/components/SidePanel.tsx +++ b/canvas/src/components/SidePanel.tsx @@ -23,6 +23,7 @@ import { summarizeWorkspaceCapabilities } from "@/store/canvas"; const SIDEPANEL_WIDTH_KEY = "molecule:sidepanel-width"; const SIDEPANEL_DEFAULT_WIDTH = 480; const SIDEPANEL_MIN_WIDTH = 320; +const SIDEPANEL_MAX_WIDTH = 800; const TABS: { id: PanelTab; label: string; icon: string }[] = [ { id: "chat", label: "Chat", icon: "◈" }, @@ -72,6 +73,29 @@ export function SidePanel() { document.body.style.userSelect = "none"; }, [width]); + const onResizeKeyDown = useCallback((e: React.KeyboardEvent) => { + const STEP = 16; + let newWidth: number | null = null; + if (e.key === "ArrowLeft") { + e.preventDefault(); + newWidth = Math.min(width + STEP, SIDEPANEL_MAX_WIDTH); + } else if (e.key === "ArrowRight") { + e.preventDefault(); + newWidth = Math.max(width - STEP, SIDEPANEL_MIN_WIDTH); + } else if (e.key === "Home") { + e.preventDefault(); + newWidth = SIDEPANEL_MIN_WIDTH; + } else if (e.key === "End") { + e.preventDefault(); + newWidth = SIDEPANEL_MAX_WIDTH; + } + if (newWidth !== null) { + setWidth(newWidth); + widthRef.current = newWidth; + localStorage.setItem(SIDEPANEL_WIDTH_KEY, String(newWidth)); + } + }, [width]); + useEffect(() => { const onMouseMove = (e: MouseEvent) => { if (!dragging.current) return; @@ -111,8 +135,16 @@ export function SidePanel() { > {/* Resize handle */}

{/* Header */}
diff --git a/canvas/src/components/WorkspaceNode.tsx b/canvas/src/components/WorkspaceNode.tsx index 8b1fd5fc..6992b3ca 100644 --- a/canvas/src/components/WorkspaceNode.tsx +++ b/canvas/src/components/WorkspaceNode.tsx @@ -256,8 +256,9 @@ export function WorkspaceNode({ id, data }: NodeProps>) {/* Degraded error preview */} {data.status === "degraded" && data.lastSampleError && (
{data.lastSampleError}
diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx index f1b8bbb0..f3063baa 100644 --- a/canvas/src/components/tabs/ChatTab.tsx +++ b/canvas/src/components/tabs/ChatTab.tsx @@ -55,7 +55,7 @@ function extractReplyText(resp: A2AResponse): string { * Load chat history from the activity_logs database via the platform API. * Uses source=canvas to only get user-initiated messages (not agent-to-agent). */ -async function loadMessagesFromDB(workspaceId: string): Promise { +async function loadMessagesFromDB(workspaceId: string): Promise<{ messages: ChatMessage[]; error: string | null }> { try { const activities = await api.get { } } } - return messages; - } catch { - return []; + return { messages, error: null }; + } catch (err) { + return { + messages: [], + error: err instanceof Error ? err.message : "Failed to load chat history", + }; } } @@ -162,6 +165,7 @@ function MyChatPanel({ workspaceId, data }: Props) { const [thinkingElapsed, setThinkingElapsed] = useState(0); const [activityLog, setActivityLog] = useState([]); const [loading, setLoading] = useState(true); + const [loadError, setLoadError] = useState(null); const currentTaskRef = useRef(data.currentTask); const sendingFromAPIRef = useRef(false); const [agentReachable, setAgentReachable] = useState(false); @@ -172,8 +176,10 @@ function MyChatPanel({ workspaceId, data }: Props) { // Load chat history from database on mount useEffect(() => { setLoading(true); - loadMessagesFromDB(workspaceId).then((msgs) => { + setLoadError(null); + loadMessagesFromDB(workspaceId).then(({ messages: msgs, error: fetchErr }) => { setMessages(msgs); + setLoadError(fetchErr); setLoading(false); }); }, [workspaceId]); @@ -355,7 +361,31 @@ function MyChatPanel({ workspaceId, data }: Props) { {loading && (
Loading chat history...
)} - {!loading && messages.length === 0 && ( + {!loading && loadError !== null && messages.length === 0 && ( +
+

+ Failed to load chat history: {loadError} +

+ +
+ )} + {!loading && loadError === null && messages.length === 0 && (
No messages yet. Send a message to start chatting with this agent.