Subscribe to auto-update status at the App level and render a compact
UpdateBanner in the sidebar footer when an update is available,
downloading, or downloaded:
- Available/downloading: subtle banner with progress bar, dismissable
- Downloaded: prominent 'Restart to update' action with glow effect
Clicking the banner opens Settings directly on the Troubleshooting
section via a new initialSection prop on SettingsPanel.
New files:
- src/renderer/components/ui/UpdateBanner.tsx
Modified files:
- App.tsx: subscribe to onUpdateStatus, wire props
- Sidebar.tsx: accept and render UpdateBanner
- SettingsPanel.tsx: add initialSection prop + export SettingsSection type
- styles.css: add update-banner-enter slide-up animation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Wire message-reclassified sidecar events through the main process to
the renderer, where reclassified messages are filtered out of the main
transcript and collected into a collapsible ThinkingProcess component.
Main process changes:
- Route message-reclassified via dedicated onMessageReclassified callback
- Add applyMessageReclassified handler that sets messageKind and emits
the session event for the renderer
- Forward assistant-intent and reasoning-delta as turn-scoped events
Renderer changes:
- Split session.messages into visibleMessages and thinkingMessages
- Render ThinkingProcess above the last assistant message
- ThinkingProcess auto-expands during active turns, collapses on finish
- Update messagePhase to skip thinking-kind messages for final detection
Tests:
- 3 new sessionWorkspace tests for reclassification apply/dedup/ignore
- 2 new messagePhase tests for thinking-kind handling
- Updated runTurnPending test fixtures for new callback
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Fuzzy-searchable command palette accessible from anywhere via Ctrl+K
(Windows/Linux) or Cmd+K (macOS). Supports keyboard navigation with
arrow keys, Enter to select, and Escape to close.
Available commands:
- Switch between sessions and projects
- Create new sessions and scratchpads
- Pin, archive, and duplicate the current session
- Open settings, project settings, and app data folder
- Toggle terminal
- Switch theme (dark/light/system)
- Add new projects
Implementation:
- New CommandPalette component with glass surface and glow border
- Palette entry/exit CSS animations
- Capture-phase Escape handler to prevent leaking to other overlays
- Commands built dynamically from workspace state
- Results grouped by category with fuzzy scoring
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Complete visual overhaul of the Aryx application with the Luminous Depth
design language — blue-tinted dark surfaces, brand gradient accents,
glass-morphism effects, and refined typography.
Design Foundation:
- New color system with CSS custom properties for all surfaces, borders,
text, accents, and status colors
- Typography: Outfit (display), DM Sans (body), JetBrains Mono (code)
- Animations: accent-flow, thinking-wave, ambient-glow
- Utility classes: glass-surface, glow-border, brand-gradient-bg/text
- Light theme with cool-tinted whites and blue-tinted shadows
Components Updated:
- UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.)
- AppShell with ambient glow background
- Sidebar with brand gradient selection and accent-flow running bars
- ChatPane with semantic phase tinting and gradient user avatars
- WelcomePane with nebula background and motion entrance animations
- All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.)
- ActivityPanel and RunTimeline with glass-surface cards
- Settings panels, modals, and editor shells
- TerminalPanel with harmonized ANSI palette
- PatternGraph nodes with glass-surface styling
- MarkdownComposer toolbar
Zero hardcoded zinc/indigo color classes remain in renderer components.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Change the bottom action bar from absolute positioning to normal
document flow so it sits below the editable area instead of floating
on top. Reduce editable bottom padding since buttons no longer overlap.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Remove .pill-trigger CSS class and restore the idiomatic Tailwind v4
@theme approach: --text-pill in @theme generates the text-pill utility.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The @theme --text-pill token and text-[8px] arbitrary value both
failed to apply at dev time due to @tailwindcss/vite not generating
the utility rule during HMR. Use a plain .pill-trigger CSS class
in styles.css instead, which is always available regardless of
Tailwind's JIT scanner behavior.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The arbitrary text-[8px] class was not being generated by the
Tailwind v4 Vite plugin at dev time. Register --text-pill in
@theme so text-pill becomes a first-class utility that is always
generated. Uses 0.5rem (8px) with line-height 1.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The imperative approach inserted overlay elements directly into
Lexical-managed CodeNode DOM elements. Lexical's MutationObserver
detected the foreign DOM nodes, reconciled them away, which triggered
update listeners that re-inserted them — causing an infinite loop
that froze the app.
The new approach renders overlay elements via React, positioned
absolutely in a pointer-events:none container that sits over the
content editable. Overlay positions are computed from each code
element's bounding rect and updated via requestAnimationFrame on
editor updates and scroll events. This avoids all Lexical DOM
mutation and eliminates the freeze.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Language selector:
- Replaced toolbar dropdown with an imperative overlay rendered
directly inside each code block's DOM element
- Overlay uses contentEditable='false' + position:absolute at the
top-right of the code block, styled as a compact native select
- Plugin re-inserts overlays after each Lexical reconciliation to
survive DOM diffing
Code block insertion:
- toggleCodeBlock now inserts a trailing paragraph after the code
block when it would otherwise be the last element, so the user
can always type regular text below a code block
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
When the cursor is inside a code block, the formatting toolbar shows
a language dropdown (22 languages). Selecting a language updates the
CodeNode, which the markdown serializer writes as the fenced code
block language tag (e.g. \\\ ypescript).
A CodeBlockLabelPlugin syncs a data-code-language attribute on each
code block element so CSS ::before shows the friendly language name
as a small label at the top of the block.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Increase editable min-height from 40px to 52px and padding from 8px
to 10px so the send button (32px + 8px bottom offset) has 12px
clearance from the toolbar border instead of 0px
- Add display: block to .mc-code-block — Lexical CodeNode renders as
<code> which is inline by default, causing border/padding to split
visually across lines instead of forming a proper block
- Revert empty code block to code.select() without synthetic TextNode
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the plain <textarea> in ChatPane with a full WYSIWYG
markdown composer built on Lexical 0.42.0.
Composer features:
- Rich text editing with inline formatting (bold, italic, code)
- Block-level elements: headings, bullet/numbered lists, code blocks,
blockquotes, links via markdown shortcuts (e.g. ## , - , \\\)
- Formatting toolbar with active-state indicators
- Markdown paste auto-import when the editor is empty
- Enter to send, Shift+Enter for newline (matches prior behavior)
- Disabled state syncs with session busy/config states
- Serializes to markdown on submit via the backend helpers
Files:
- New: MarkdownComposer.tsx (Lexical editor, toolbar, internal plugins)
- Modified: ChatPane.tsx (swap textarea for MarkdownComposer, simplify state)
- Modified: styles.css (add markdown composer theme classes)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add CSS styling for selected edges (indigo highlight with glow)
- Enable orchestrator↔agent connections in group-chat mode
- Downgrade disconnected-agent validation from error to warning
- Rename addHandoffEdge to addEdge (generic for all modes)
- Add tests for group-chat connection rules
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the flat agent list and static flow diagrams in PatternEditor with
an interactive React Flow canvas backed by the authoritative PatternGraph
model. Users can now see and manipulate orchestration topology visually.
Changes:
- Add @xyflow/react (React Flow) as a canvas library
- Create patternGraph view-model layer for graph-to-canvas projection
- Create GraphNodes with custom system/agent node components
- Create PatternGraphCanvas with drag, connect, and selection support
- Create PatternGraphInspector for selected node/agent details
- Rewrite PatternEditor with split layout: canvas + inspector sidebar
- Add dark theme CSS overrides for React Flow
- Add 11 tests covering view-model projection, connection rules, and
graph mutation helpers
- Update ARCHITECTURE.md to reflect the new renderer graph boundary
The canvas projects PatternGraph into React Flow nodes/edges. Handoff mode
supports drawing new agent-to-agent edges interactively. Node positions
persist to the graph on drag completion. Agent editing moves from inline
forms to the inspector panel on node selection.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add appearance theme support (dark/light/system) using CSS custom
property overrides. In light mode the Tailwind zinc scale is inverted
and semantic surface/border tokens are swapped, so all existing
utility classes pick up the new palette automatically.
- Add AppearanceTheme type and theme field to WorkspaceSettings
- Add setTheme IPC channel wiring (contracts, preload, handler, service)
- Add [data-theme='light'] CSS overrides for zinc scale, surface tokens,
scrollbar, and markdown prose colours
- Add Appearance section to SettingsPanel with radio-button theme picker
- Apply data-theme attribute on document root via useEffect in App.tsx,
with matchMedia listener for the system option
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Tighten font sizes to match the app's compact design language:
- WelcomePane: heading from text-xl (20px) to text-base (16px),
buttons and descriptions from text-sm (14px) to text-[13px]
- SettingsPanel: all section headings from text-sm to text-[13px]
- NewSessionModal: title from text-sm to text-[13px]
- PatternEditor: title from text-sm to text-[13px]
- ChatPane: empty-state prompt from text-sm to text-[13px]
- Markdown prose: h1 from 1.25rem to 1.125rem, h2 from 1.125rem
to 1rem, h3 from 1rem to 0.9375rem
Keeps text-sm only for the app brand name, loading state, and error
headings where larger text is intentional.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Session cards now show orchestration mode icon (colored per type:
indigo=single, amber=sequential, emerald=concurrent, sky=handoff,
violet=group-chat) giving at-a-glance pattern visibility
- Add relative timestamps (just now, 2m ago, yesterday, etc.)
- Running sessions show animated pulse on left accent bar and
text status label instead of static dot
- Multi-agent sessions display agent count badge (Users icon + count)
- Error sessions show explicit red Error label
- Project headers show running session count as live badge
and total count as pill; folder icon highlights on hover
- Upgrade Kopaya logo from letter badge to gradient icon with
Sparkles, add BETA tag
- Move New Session button to prominent dashed-border CTA below header
- Better empty state with composite folder+plus icon treatment
and indigo Add Project button
- Add sidebar-pulse CSS keyframe animation for running indicators
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add react-markdown and remark-gfm for markdown rendering
- Create MarkdownContent component with custom code block renderer
featuring language labels and copy-to-clipboard buttons
- Add full markdown prose styles (headings, lists, tables, links,
blockquotes, inline code) matching the dark zinc theme
- Replace plain-text message rendering in ChatPane with MarkdownContent
- Handle fenced code blocks with and without language specifiers
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Configure hidden title bar with titleBarOverlay matching dark theme
- Remove native menu bar via Menu.setApplicationMenu(null)
- Fix backgroundColor mismatch (#0f172a -> #09090b)
- Add full-width drag region in AppShell for window dragging
- Adjust sidebar and chat headers with top padding for overlay zone
- Add ThinkingDots component with animated dot sequence
- Show activity indicator in chat when agent is processing
- Replace 'Generating...' spinner with inline blinking cursor
- Refine header status badge to subtle pulsing dot
- Add BACKEND_UI_CHANGES.md documenting future sidecar protocol additions
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Refined dark theme with zinc palette and indigo accents
- Clean sidebar showing only project/session tree
- Moved pattern management to full-screen settings panel
- New session modal with project + pattern picker
- Modern chat with avatar icons, inline send button, Enter-to-send
- Welcome pane when no session is selected
- Added lucide-react for consistent iconography
- Custom scrollbar styling and auto-resize textarea
- Removed clutter: no sidebar pattern list, no verbose headers
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
