- ChatPanel integrates useStreamingChat, ChatAgentSelector, ChatStopButton
- Agent routing via resolveAgentFromContent for slash commands and @mentions
- handleEdit: editMessage + truncateMessagesAfter + re-stream with edited content
- handleRetry: finds actual prior user message, truncates from user message onward, re-streams
- Build agentMap from agents for message identity bars
- ChatInput: slash command popover (triggered by / at start of input)
- ChatInput: @mention popover (triggered by @word pattern)
- Input disabled during streaming with 'Waiting for response...' placeholder
- Stop button shown conditionally when isStreaming
- Agent selector in header for per-conversation agent switching
- Remove ScrollArea wrapper (replaced by virtualizer's own scroll in ChatMessageList)
- Create ChatMentionPopover (200px, opens upward, agent icon + name + role label)
- Agents filtered by query, max 5 visible, No agents found empty state
- 3 skeleton rows loading state, onOpenAutoFocus prevented for textarea focus
- Include agent-role-colors dependency for worktree build
- Add id, isAnyStreaming, onEdit, onRetry props to ChatMessageProps
- User messages show edit Pencil on hover via ChatMessageActions
- Edit pencil opens inline textarea with Save/Discard buttons
- Save edit calls onEdit(id, newContent), disabled when textarea empty
- Discard edit reverts to read-only bubble
- Assistant messages show retry RefreshCw via ChatMessageActions
- All edit/retry actions disabled when isAnyStreaming is true
- Update test stubs to reflect new prop surface
- ChatStopButton: centered outline button with Square icon and 'Stop generating' label
- ChatMessageActions: edit Pencil for user messages (absolute, group-hover)
- ChatMessageActions: retry RefreshCw for assistant messages (right-aligned, group-hover)
- Both action buttons return null when isStreaming is true
- Proper aria-labels and tooltips on all interactive elements
- Create ChatAgentSelector with Popover+Command dropdown
- Show active agent icon, name, and ChevronDown indicator
- 'Select agent' placeholder when no agent selected
- 'No agents configured' empty state via CommandEmpty
- Agent list shows icon, name, and role label per item
- Selection calls onAgentChange and PATCHes conversation via chatApi
- Role-specific colors from agentRoleColors applied to agent icons
- Loading state shows Skeleton placeholder
- Create chat.ts API client with updateConversation supporting agentId
- Create shared types/chat.ts with ChatMessage, ChatConversation types
- Create ChatCodeBlock prerequisite from phase-21 base
- TypeScript compiles clean
- Create ChatMessageIdentityBar with agent icon, name, timestamp, and streaming dot
- Create ChatStreamingCursor with animate-cursor-blink and aria-hidden
- Extend ChatMessage with agentName, agentIcon, agentRole, timestamp, isStreaming props
- Wrap assistant messages in group div for hover actions (Plan 03)
- Create agent-role-colors.ts with 11 distinct role colors (light + dark variants)
- Create ChatMarkdownMessage prerequisite from phase-21 base
- All 4 ChatMessageIdentityBar tests pass
- Add Search/X icons and Input to ChatConversationList with 300ms debounce
- Listen for nexus:focus-chat-search event to focus search input
- Add onSearch handler to useKeyboardShortcuts (fires before input guard)
- Wire Layout Cmd+K to open chat panel and dispatch focus event
- Add ChatConversationItem with DropdownMenu actions (Rename, Pin/Unpin, Archive, Delete) and active highlight
- Add ChatConversationList with IntersectionObserver infinite scroll, loading skeletons, delete confirmation dialog, and CRUD handlers
- Add ChatMessageList with auto-scroll-to-bottom on new messages and empty state
- Update ChatPanel to render ChatConversationList (left column) and ChatMessageList (right column); handleSend uses two paths: direct chatApi for new conversations, hook mutation for existing ones
- ChatMarkdownMessage: renders markdown with rehype-highlight syntax highlighting
- ChatCodeBlock: pre override with language label and copy button (1500ms success state)
- Uses ExtraProps from react-markdown for correct TypeScript types
- All tests pass, TypeScript compiles without errors
- SkillCard: add isReadOnly and source props; hide update/rollback/install when isReadOnly
- SkillCard: show Native badge when isReadOnly or source=native
- SkillBrowser: remove agentSkillsDir state and text input from install dialog
- SkillBrowser: add selectedAgentId state for per-agent installed skills view
- SkillBrowser: add agentInstalledSkills query using skillGroupsApi.listAgentSkills
- SkillBrowser: split installed skills into managedSkills/nativeSkills sections
- SkillBrowser: render Managed/Native section headings when nativeSkills.length > 0
- SkillBrowser: uninstall dialog now carries agentId and calls skillRegistryApi.uninstall
- SkillBrowser: install dialog sends agentId directly (no agentSkillsDir text input)
- Create StarRating component with interactive/readonly modes, amber stars, size sm/md
- Add PersonalRating type and taskCount/avgCostUsd/lastUsedAt to SkillListItem
- Add getRatings and addRating to skillRegistryApi
- Add Rating System section to DesignGuide with all variants
- Fix SkillCard fixture and DesignGuide examples to include new SkillListItem fields
- Built-in variant: Badge secondary, no dismiss, hover:bg-accent/30
- Custom variant: Badge outline, X dismiss button with spinner, hover:bg-accent/50
- Tooltip on both variants showing name · built-in · N skills or name · N skills
- text-sm font-semibold typography per UI-SPEC (no font-bold or font-medium)
- Add THEME_CYCLE map for mocha->tokyo-night->latte->mocha
- Compute nextThemeLabel for descriptive aria-label/title on toggle button
- Update both desktop and mobile toggle button aria-label/title to 'Switch to [theme]'
- Icon logic unchanged: Sun in dark mode, Moon in light mode
- Expand Theme type to catppuccin-mocha | tokyo-night | catppuccin-latte
- Export THEME_META with label, dark boolean, bg hex, primary hex per theme
- applyTheme toggles .dark and .theme-tokyo-night classes correctly
- toggleTheme cycles all three themes (Mocha -> Tokyo Night -> Latte -> Mocha)
- readStoredTheme falls back to catppuccin-mocha for old localStorage values
- Fix Layout.tsx: replace theme === 'dark' comparison with THEME_META[theme].dark
- Fix MarkdownBody.tsx: replace theme === 'dark' comparisons with THEME_META[theme].dark
- 14 UI pages: all Select a company empty states use VOCAB.company.toLowerCase()
- AgentConfigForm: 3 error throws use VOCAB.company
- AgentDetail: additional Select a company upload error replaced
- CLI run.ts: Starting/Could not locate/failed to start messages use VOCAB.appName
- CLI deployment-auth-check: repairHint uses VOCAB.appName
- CLI agent-jwt-secret-check: repairHint uses VOCAB.appName
- CLI allowed-hostname: restart message uses VOCAB.appName
- Added VOCAB import to all files missing it
- company-export-readme.ts: ROLE_LABELS ceo changed from 'CEO' to 'Project Manager' [nexus]
- server/index.ts: LOCAL_BOARD_USER_NAME changed from 'Board' to 'Owner' [nexus]
- cli/__tests__/company.test.ts: assertions updated to Workspace vocabulary
- cli/__tests__/http.test.ts: assertion updated to 'Nexus API' from 'Paperclip API'
- ui/OnboardingWizard.tsx: added explicit string type annotation for useState<string>
- Single-step wizard: root directory input only (no company name, mission, or first task)
- Creates workspace named VOCAB.appName (Nexus)
- Creates PM agent (role: ceo, for elevated permissions) + Engineer agent
- Navigates to dashboard after completion, not issue detail
- Preserves resolveRouteOnboardingOptions wizard-show detection logic
- Exports OnboardingWizard to match named import in App.tsx
- Original OnboardingWizard.tsx untouched for upstream rebase compatibility
- Add AGENT_TEMPLATES const with Project Manager (role:pm) and Engineer options
- Add template selector section between Ask PM button and advanced config link
- handleTemplateSelect navigates to /agents/new pre-filled with template values
- No hire language present in dialog
- [nexus] marked all new/changed lines
- company-export-readme.ts: ROLE_LABELS ceo changed from 'CEO' to 'Project Manager' [nexus]
- server/index.ts: LOCAL_BOARD_USER_NAME changed from 'Board' to 'Owner' [nexus]
- cli/__tests__/company.test.ts: assertions updated to Workspace vocabulary
- cli/__tests__/http.test.ts: assertion updated to 'Nexus API' from 'Paperclip API'
- ui/OnboardingWizard.tsx: added explicit string type annotation for useState<string>
- Sidebar.tsx: section label uses VOCAB.company instead of hardcoded 'Company'
- CompanySwitcher.tsx: uses VOCAB.company for placeholder and settings link
- ActivityRow.tsx: uses VOCAB.board instead of hardcoded 'Board' for user actor
- ApprovalPayload.tsx: hire_agent and approve_ceo_strategy values use VOCAB constants
- NewAgentDialog.tsx: CEO references use VOCAB.ceo
- NewGoalDialog.tsx: company level label uses VOCAB.company
- CompanyRail: import Box from lucide-react instead of Paperclip
- CompanyRail: render <Box> icon instead of <Paperclip> in top rail
- Auth.tsx: import VOCAB from @paperclipai/branding
- Auth.tsx: use VOCAB.appName for logo text and sign-in/create-account headings
## Thinking Path
> - Paperclip orchestrates AI agents for zero-human companies
> - The UI serves agent management pages including an instructions editor with copy-to-clipboard buttons
> - The Clipboard API (`navigator.clipboard.writeText`) requires a secure context (HTTPS or localhost)
> - Users accessing the UI over HTTP on a LAN IP get "Copy failed" when clicking the copy icon
> - This pull request adds an `execCommand("copy")` fallback in `CopyText` for non-secure contexts
> - The benefit is that copy buttons work reliably regardless of whether the page is served over HTTPS or plain HTTP
## What Changed
- `ui/src/components/CopyText.tsx`: Added `window.isSecureContext` check before using `navigator.clipboard`. When unavailable, falls back to creating a temporary `<textarea>`, selecting its content, and using `document.execCommand("copy")`. The return value is checked and the DOM element is cleaned up via `try/finally`.
## Verification
- Access the UI over HTTP on a non-localhost IP (e.g. `http://[local-ip]:3100`)
- Navigate to any agent's instructions page → Advanced → click the copy icon next to Root path
- Should show "Copied!" tooltip and the path should be on the clipboard
## Risks
- Low risk. `execCommand("copy")` is deprecated in the spec but universally supported by all major browsers. The fallback only activates in non-secure contexts where the modern API is unavailable. If/when HTTPS is enabled, the modern `navigator.clipboard` path is used automatically.
## Checklist
- [x] I have included a thinking path that traces from project context to this change
- [ ] I have run tests locally and they pass
- [ ] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after screenshots
- [ ] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before requesting merge
Address Greptile review feedback: the plain-value fallback in emit()
caused the useEffect sync to re-run toRows(), which mapped the plain
binding back to source: "plain", snapping the dropdown back.
Fix: add an emittingRef that distinguishes local emit() calls from
external value changes (like overlay reset after save). When the
change originated from our own emit, skip the re-sync so the
transitioning row stays in "secret" mode while the user picks a secret.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
When changing an env var's type from Plain to Secret in the agent
config form, the row was silently dropped because emit() skipped
secret rows without a secretId. This caused data loss — the variable
disappeared from both the UI and the saved config.
Fix: keep the row as a plain binding during the transition state
until the user selects an actual secret. This preserves the key and
value so nothing is lost.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
