The code blocks users see in issue documents are rendered by CodeMirror
(via MDXEditor's codeMirrorPlugin), not by MarkdownBody. MDXEditor
bundles cm6-theme-basic-light which gives them a white background.
Added dark overrides for all CodeMirror elements:
- .cm-editor: dark background (#1e1e2e), light text (#cdd6f4)
- .cm-gutters: darker gutter with muted line numbers
- .cm-activeLine, .cm-selectionBackground: subtle dark highlights
- .cm-cursor: light cursor for visibility
- Language selector dropdown: dark-themed to match
- Reduced pre padding to 0 since CodeMirror handles its own spacing
Uses \!important to beat CodeMirror's programmatically-injected theme
styles (EditorView.theme generates high-specificity scoped selectors).
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Previous attempt was being overridden by Tailwind prose/prose-invert
CSS variables. This fix:
- Overrides --tw-prose-pre-bg and --tw-prose-invert-pre-bg CSS variables
on .paperclip-markdown to force dark background in both modes
- Uses .paperclip-markdown pre with \!important for bulletproof overrides
- Removes conflicting prose-pre: utility classes from MarkdownBody
- Adds explicit pre code reset (inherit color/size, no background)
- Verified visually with Playwright at desktop and mobile viewports
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The scrollbar track background was still visible as a colored "well" even
when the thumb was hidden. Now both track and thumb are fully transparent
by default, only appearing on container hover.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Switch code block background from transparent accent to dark (#1e1e2e) with
light text (#cdd6f4) for better readability in both light and dark modes
- Reduce code font size from 0.84em to 0.78em
- Compact padding and margins on pre blocks
- Hide MDXEditor code block toolbar by default, show on hover/focus to prevent
overlap with code content on mobile
- Use horizontal scroll instead of word-wrap for code blocks to preserve formatting
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The scrollbar-auto-hide utility was only hiding the thumb but left the
track background visible, creating a visible "well" even when idle.
Now both track and thumb are transparent by default, appearing only on
container hover.
Fixes PAP-374
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Add global font smoothing (antialiased) to body
- Add tabular-nums to all numeric displays: MetricCard values, Costs page,
AgentDetail token/cost grids and tables, IssueDetail cost summary,
Companies page budget display
- Replace markdown image hard border with subtle inset box-shadow overlay
- Replace all animate-ping status dots with calmer animate-pulse across
AgentDetail, IssueDetail, Agents, sidebar, kanban, issues list, and
active agents panel
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Lazy-load mermaid.js and render fenced mermaid code blocks as inline
SVG diagrams with dark/light mode support. Falls back to showing the
source code on parse errors.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The dark-mode --destructive color was too dim (lightness 0.396) to read
against dark backgrounds. Bumped to 0.637 lightness with higher chroma
so error text is clearly visible. Set --destructive-foreground to white
for contrast on destructive button backgrounds.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace scrollbar-none with a scrollbar-auto-hide utility that keeps the
scrollbar thumb transparent by default and reveals it on container hover.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Override Tailwind Typography's hardcoded code block colors with app theme
variables so fenced code blocks (```) render consistently between the
MDXEditor and MarkdownBody views. Also styles inline code, removes the
default backtick pseudo-elements, and adds mention chip styles for the
rendered prose context.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increase paragraph margins, add line-height: 1.4 to paragraphs/lists/blockquotes,
and bump inter-paragraph spacing in the MDXEditor for more readable markdown blocks.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add project mention system using project:// URI scheme with optional
color parameter. Mentions render as colored pill chips in markdown
bodies and the WYSIWYG editor. Autocomplete in editors shows both
agents and projects. Server extracts mentioned project IDs from issue
content and returns them in the issue detail response.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Per feedback on PAP-186: containers should have hard edges but buttons,
comment containers, project icons, and company icons should keep rounding.
- Restore --radius-sm (6px) and --radius-md (8px) for buttons/inputs
- Keep --radius-lg and --radius-xl at 0 for cards/containers/dialogs
- Add rounded-sm to comment container divs in CommentThread
- Replace rounded-xl with rounded-[14px] on company icons (CompanyRail,
CompanySettings) since --radius-xl is 0
- Fix brand color dot in Sidebar (rounded → rounded-sm)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Set all Tailwind theme radius values (--radius-sm/md/lg/xl) to 0px and
the base --radius CSS variable to 0. This makes every rounded-sm/md/lg/xl
utility produce sharp corners across all components, cards, dialogs, buttons,
and inputs. Avatar/badge circles (rounded-full) remain unaffected.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add PWA meta tags for iOS home screen. Fix mobile properties drawer with safe
area insets. Add image attachment button to comment thread. Improve sidebar
with collapsible sections, project grouping, and mobile bottom nav. Show
token and billing type breakdown on costs page. Fix inbox loading state to
show content progressively. Various mobile overflow and layout fixes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Make Filter/Sort/Group buttons icon-only on small screens (< 640px)
- Make "New Issue" button icon-only on small screens
- Show filter count badge on mobile instead of full text
- Reduce gaps between toolbar items on mobile
- Hide date column and "Live" text on small screens for issue rows
- Add touch-action: manipulation to prevent double-tap zoom on mobile
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
After tab-completing a mention, the cursor was placed before the
completion instead of after it. The root cause: Lexical's DOM
reconciliation after document.execCommand("insertText") would lose
the browser-set cursor position. Added requestAnimationFrame-based
cursor repositioning that first tries the original text node, then
falls back to searching for the mention text in the DOM.
Also normalizes editor content padding for consistent mention dropdown
positioning.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds ToastProvider/ToastViewport for in-app notifications with dedupe,
auto-dismiss, and action links. Wires success toasts to issue create,
issue update, and comment mutations. Adds live event toasts for activity,
agent status, and run status changes via LiveUpdatesProvider.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Introduce MarkdownEditor built on @mdxeditor/editor with headings,
lists, links, quotes, image upload with drag-and-drop, and themed CSS
integration. Add asset image upload API (routes, service, storage) and
wire image upload into InlineEditor multiline mode, NewIssueDialog,
NewProjectDialog, GoalDetail, IssueDetail, and ProjectDetail
description fields. Tighten prompt template editor styling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add ApprovalDetail page with comment thread, revision request/resubmit flow,
and ApprovalPayload component for structured payload display. Extend AgentDetail
with permissions management, config revision history, and duplicate action.
Add agent hire dialog with permission-gated access. Rework Costs page with
per-agent breakdown table and period filtering. Add sidebar badge counts for
pending approvals and inbox items. Enhance Dashboard with live metrics and
sparkline trends. Extend Agents list with pending_approval status and bulk
actions. Update IssueDetail with approval linking. Various component improvements
to MetricCard, InlineEditor, CommentThread, and StatusBadge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Major AgentConfigForm rework with improved adapter configuration
fields and layout. Refine sidebar, breadcrumbs, and card/tab
components for visual consistency. Clean up page layouts across
Activity, Agents, Approvals, Costs, Dashboard, Goals, Inbox,
Issues, Org, and Projects pages. Minor heartbeat-run CLI fix.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rework heartbeat-run command with better error handling and output
formatting. Improve AgentConfigForm field layout. Add CSS for agent
run timeline. Enhance AgentDetail page with runtime status section.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Expand NewIssueDialog with richer form fields. Add NewProjectDialog.
Enhance CommandPalette with more actions and search. Improve
CompanySwitcher, EmptyState, and IssueProperties. Flesh out Activity,
Companies, Dashboard, and Inbox pages with real content and layouts.
Refine sidebar, routing, and dialog context. CSS tweaks for dark theme.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dashboard, agents, goals, issues, and projects pages with sidebar
navigation. API client layer, custom hooks, and shared layout
components. Built with Vite and TypeScript.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
