- Fix useElapsedTimer to use completedAt instead of Date.now() for
finished runs, preventing wildly inaccurate durations (e.g. 9802m)
when reopening old sessions
- Extract formatElapsedMs as a shared pure formatter; reuse in
SubagentActivityCard
- Standardize icon column alignment across all activity row types
using consistent w-4 + h-[18px] icon containers
- Redesign collapsed header: status dot with pulse animation, bolder
status label, tabular-nums on elapsed time, cleaner hierarchy
- Polish expanded stream: timeline spine connecting activity items,
more prominent intent dividers with pill-style background,
tightened vertical rhythm
- Add unit tests for formatElapsedMs
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add multi-select mode to the sidebar session list, enabling users to
archive, restore, or delete multiple sessions at once.
UX:
- Ctrl+Click (Cmd+Click on Mac) any session to enter multi-select mode
- Animated checkboxes stagger-reveal across all visible sessions
- Click to toggle, Shift+Click for range selection
- Running sessions are excluded from selection (safety guard)
- Floating action bar slides up with count pill, Archive, Delete, Cancel
- Batch delete shows a confirmation dialog with hold-to-confirm for 3+
sessions and a scrollable list of session titles
- Batch archive shows an undo toast with 5-second auto-dismiss
- Escape key or Cancel button exits multi-select mode
Backend:
- batchSetSessionsArchived IPC: single load/mutate/persist cycle for N
sessions instead of N sequential calls
- batchDeleteSessions IPC: parallel cleanup of scratchpad dirs and SDK
sessions, then single workspace persist
Accessibility:
- Action bar: role=toolbar, aria-label
- Checkboxes: role=checkbox, aria-checked, keyboard-activatable
- Selection count: aria-live=polite
- Delete dialog: role=alertdialog, aria-modal, focus trap
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add animation-fill-mode 'both' to .qp-panel-enter so the from-keyframe
(opacity: 0) applies immediately on mount, preventing the single-frame
flash of the opaque surface background before the entrance animation
begins.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Rewrite ModelSelector to group models by AI provider (OpenAI,
Anthropic, Google) using providerMeta and ProviderIcon instead of
grouping by tier; show tier as compact badge per model row
- Remove all box-shadow from qp-panel and border state variants;
on Windows transparent BrowserWindows, shadows paint on the
transparent canvas creating a visible dark rectangle behind the
rounded panel
- Add transparent background to html element in quickprompt.html
and CSS override via :has(body[data-quickprompt]) to ensure no
ancestor paints a visible background
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Replace translucent glass background with solid surface-1 color;
backdrop-filter does not work with transparent BrowserWindows on
Windows, leaving the panel nearly invisible
- Add data-quickprompt body attribute to quickprompt.html and CSS
overrides to ensure body/root are truly transparent, eliminating
the visible rectangle behind the rounded panel
- Remove overflow-hidden from qp-panel so model selector dropdown
is no longer clipped; the dropdown was positioned absolute and
rendered entirely outside the panel bounds
- Change ModelSelector to open downward (top-full) instead of upward
(bottom-full) for natural command-bar flow
- Update dropdown animation direction to match downward opening
- Increase blur handler delay to 200ms for safer dropdown interactions
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Fix window lifecycle: await renderer load before showing, debounce
blur handler to prevent dropdown-induced dismiss
- Increase window height from 72px to 520px for response display
- Rewrite ModelSelector with tier-grouped upward-opening dropdown,
reasoning effort controls, and Brain icon for reasoning models
- Rewrite QuickPromptInput with visible model trigger, animated
chevron, auto-resize textarea, and proper stop button
- Improve QuickPromptResponse with compact thinking block, markdown
code/pre/link styling, and refined spacing
- Polish QuickPromptActions with consistent sizing and hover states
- Redesign settings QuickPromptSettingsSection: replace flat radio
list with compact grouped dropdown selector, only show reasoning
effort when selected model supports it, combine hotkey toggle
into single row
- Add markdown code block, inline code, and link CSS styles
- Fix dropdown animation direction for upward-opening selector
- Handle message-complete event in QuickPromptApp
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a system-wide global hotkey (Win+Shift+A / Cmd+Shift+A) that summons
a floating, frameless popup window for quick AI interactions from any app.
Main process:
- GlobalHotkeyService for registering/unregistering system-wide shortcuts
- Frameless, transparent, always-on-top BrowserWindow factory
- IPC handlers for send, discard, close, continue-in-aryx, cancel
- Session event routing from sidecar to quick prompt window
- Settings persistence for default model, hotkey, and reasoning effort
Renderer (separate lightweight entry):
- QuickPromptApp with session state, streaming, keyboard shortcuts
- QuickPromptInput with model selector trigger and cancel support
- QuickPromptResponse with streamed markdown and thinking blocks
- QuickPromptActions (Discard / Close / Continue in Aryx)
- ModelSelector dropdown with tier badges and reasoning effort
- Glass Command Bar aesthetic with animated gradient border
Settings:
- Quick Prompt section in SettingsPanel with enable toggle, hotkey
display, default model selector, and reasoning effort picker
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the flat, repetitive 'Agent used X' activity list with a
structured narrative timeline:
- Group consecutive same-tool calls into collapsible rows with context
(e.g. 'Viewed 4 files' with file names listed below)
- Use verb-based labels with arguments: 'Viewed ChatPane.tsx:148-250',
'Searched for tool-call', 'Edited runTimeline.ts'
- Promote report_intent events to phase dividers that segment the
timeline into labeled stages of work
- Show latest intent text in the collapsed header summary
- Use category-specific icons (Eye, Search, Pencil, Terminal, etc.)
instead of the universal wrench
- Render thinking steps as quoted blocks with 'N more' toggle for
consecutive groups
All data was already available in RunTimelineEventRecord.toolArguments;
this change surfaces it prominently instead of hiding it behind
expandable detail panels.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the separate RunTimeline in the ActivityPanel with a generalized
TurnActivityPanel that renders inline in the chat pane between user
messages and assistant responses.
The new component:
- Shows all turn activities (thinking steps, tool calls, approvals,
handoffs, run status) in a single collapsible panel
- Merges chat thinking messages with run timeline events into a
chronological activity stream
- Auto-expands when a turn starts, auto-collapses on completion
- Displays a compact summary header (elapsed time, tool call count,
handoff count, etc.) when collapsed
- Includes post-run git change summary with discard/commit actions
- Uses subtle entrance animations for rows
Removed components:
- ThinkingProcess.tsx (subsumed by TurnActivityPanel)
- RunTimeline.tsx (no longer needed as a standalone component)
The ActivityPanel retains its agents, session usage, and turn events
(diagnostics/hooks) sections.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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>
