Cherry-picked from test/settings-tab-coverage (PRs #708/#726).
- AddKeyForm: 340 lines, form validation + submission tests
- OrgTokensTab: 407 lines, org token CRUD + display tests
- SecretRow: 291 lines, secret display + reveal/copy/delete actions
- SecretsTab: 308 lines, secrets list + empty state + add form
Makes #704 a true superset of all settings test coverage.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Follows the same pattern as 'external' — no template repo, injected into
the runtime allowlist as a meta-runtime. Changes:
Backend:
- workspace.go: use isExternalLikeRuntime() instead of hardcoded 'external'
check so runtime=kimi/kimi-cli workspaces take the BYO-compute path
- Preserve the caller's runtime label (kimi/kimi-cli/external) in DB so
the canvas shows the correct runtime name
Frontend:
- Add canvas/src/lib/externalRuntimes.ts utility (mirrors backend
isExternalLikeRuntime) — single source of truth for BYO-compute detection
- Update all hardcoded 'runtime === external' checks to use the utility:
FilesTab, TerminalTab, ConfigTab, WorkspaceNode, mobile/components
- Add 'kimi' and 'kimi-cli' to RUNTIME_NAMES display map
- CreateWorkspaceDialog: external-runtime selector dropdown so operators
can pick Generic External / Kimi CLI / Kimi CLI (alt)
Tests:
- Go tests pass (registry, restart, plugin install, workspace create)
Replace the heartbeat-only Kimi snippet with a complete bridge script:
- Registers workspace in poll mode (NAT-safe, no public URL)
- Heartbeats every 20s to stay online
- Polls /workspaces/:id/activity every 5s for new canvas messages
- Extracts user text from request_body (A2A JSON-RPC envelope)
- Echo-replies via POST /workspaces/:id/notify
- Includes a one-off curl example for manual replies
The script is self-contained: operators paste it once, edit the reply
logic if desired, and run it in a background terminal. This gives Kimi
push parity with Claude Code / Hermes channel tabs for laptop/NAT
setups without requiring ngrok or Cloudflare Tunnel.
Modal label updated to reflect the new capabilities.
Adds a 'Kimi' tab to the 'Connect your external agent' dialog alongside
Claude Code, Codex, Hermes, OpenClaw, etc.
- Backend: new externalKimiTemplate in external_connection.go with a
self-contained Python heartbeat script (register + 20s heartbeat loop).
- Frontend: ExternalConnectModal renders the Kimi tab when the platform
supplies kimi_snippet in the connection payload.
- Token substitution stamps MOLECULE_WORKSPACE_TOKEN into the shell
heredoc so the operator's copy-paste is ready-to-run.
- Tests updated: BuildExternalConnectionPayload placeholder check now
covers kimi_snippet; ExternalConnectionSection test fixture includes
the new field.
The Kimi tab appears after OpenClaw and before curl/Fields in the tab
order. The snippet keeps the workspace online in poll mode (NAT-safe)
without requiring a public HTTPS endpoint.
- Add AlertDialog.Description with sr-only text to satisfy Radix
aria-describedby requirement (fixes Radix console warning).
- Add eslint-disable for Discard button (AlertDialog.Action wires
keyboard events internally; no duplicate onKeyDown needed).
- Add explicit expect() assertion to overlay/ESC dismiss test (was
missing — test always passed regardless of behavior).
- Remove unnecessary vi.resetModules() from afterEach.
- Rewrite overlay test to click Keep editing button (Cancel) to
trigger onOpenChange(false) in jsdom, matching PR #708's pragmatic
pattern for asChild composite components.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Cover RemoteBadge and WorkspacePill — the last two rendering components in
components.tsx that were missing direct tests.
- RemoteBadge: ★ REMOTE badge rendering, span element, border-radius 4px,
palette color/background application, dark/light difference
- WorkspacePill: brand text, count display, LIVE indicator, string count,
border-radius pill shape, dark/light background variants
Total mobile test count now: 104 passing (was 90).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Restructure SearchDialog so the backdrop div is separate from the dialog
container. The outer div previously served as both backdrop and centering
wrapper, which made it impossible to add accessibility attributes
(aria-hidden="true") without hiding the dialog content from screen
readers.
New structure mirrors ConfirmDialog and KeyboardShortcutsDialog:
- Backdrop: aria-hidden="true", cursor-pointer, click-to-dismiss
- Dialog: role="dialog", aria-modal, aria-label, relative z-[71]
Also removes the now-unnecessary stopPropagation() on the dialog div.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Discovered during WCAG audit: useKeyboardShortcuts.ts had an
isModalOpen() guard for Arrow-key move/resize shortcuts but NOT for
Escape, Enter, Cmd+]/[, or Z. When a modal dialog (role="dialog",
aria-modal="true") is open, pressing Escape cleared the canvas
selection (because the canvas handler fired before the dialog's own
Escape handler), and Enter/Cmd+[/]/Z could interfere with dialog
interactions.
Fix: add isModalOpen() guard to all four shortcut groups, extracted
as a shared helper. Also added 4 new test cases covering the
modal-dialog guard for Esc, Enter, Cmd+[/], and Z.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
+ form-inputs.test.tsx: 35 cases across TextInput, NumberInput, Toggle,
TagList, and Section — pure presentational components in the Config tab.
Uses vi.hoisted() patterns from established suite; no jest-dom matchers.
+ form-inputs.tsx (Section): add aria-expanded + aria-controls to the
collapsible toggle button for WCAG 2.1 AA compliance. The content div
gets a stable id derived from the title; aria-controls links button to
region. Indicator span gains aria-hidden="true" (decorative only).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- role=group with aria-label containing service label
- Service icon aria-hidden, correct emoji per service name
- Count label: "1 key" vs "N keys"
- Renders SecretRow for each secret
- Header and rows div structure
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds Vitest coverage for AttachmentImage — inline image thumbnail with
click-to-fullscreen lightbox. Covers: loading skeleton (240×180),
ready state with blob URL, tone=user/agent border classes, lightbox
open/close on click and Escape, AttachmentChip error fallback, img
onError transition to chip, external URI direct href (no fetch), and
blob URL cleanup on unmount.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
12 passing: loading spinner, empty state, token list rendering,
each token's prefix/age/Revoke button, API URL correctness, revoke
confirm + cancel dialogs, new-token creation + dismiss, create error,
network error banner.
Root bug fixed: confirm button search was unscoped — when the dialog
opened, two "Revoke" buttons existed (tok2's row + dialog confirm);
find() returned tok2's button first. Scoped the search to
document.querySelector('[role="dialog"]') to hit the correct target.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Two pre-existing canvas test failures:
1. canvas/src/components/tabs/FilesTab/tree.ts:getIcon()
FILE_ICONS keys are lowercase (".json") but the extension was looked
up as-is (".JSON"). Result: FILE_ICONS[".JSON"] → undefined → fallback
"📄" instead of "{}".
Fix: lowercase the extension before FILE_ICONS lookup. Also added ?.
null-coalescing on split().pop() to handle filenames without extension.
2. canvas/src/store/__tests__/canvas-topology-pure.test.ts
sortParentsBeforeChildren test expectation was wrong: it assumed orphan
would come after root, but when parentId references a missing node
the orphan keeps its input order (orphan, then root). Updated the
expectation and corrected the comment to match the actual behaviour.
Closes#697.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds isolated tests for DropTargetBadge — the floating drag-target affordance.
Render-condition coverage:
- Renders nothing when dragOverNodeId is null
- Renders nothing when dragOverNodeId node has no store match
- Renders nothing when getInternalNode returns undefined
- Renders badge with correct name when all inputs are valid
- Badge text follows 'Drop into: <name>' format
- Badge contains exact target name from store
- Renders nothing when target name is null (empty data.name)
Ghost visibility (slot rect inside parent bounds) is deferred to
integration tests that render the full canvas — flowToScreenPosition
coordinate arithmetic is better covered there.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds isolated tests for the pure tree-traversal core of
useOrgDeployState. The buildDeployMap function handles:
- Root / leaf identification via parent-chain walk
- isDeployingRoot: true when any descendant is "provisioning"
- isActivelyProvisioning: true only for the node itself
- isLockedChild: true for non-root nodes in a deploying tree
- isLockedChild: also true for nodes in deletingIds (cross-cutting)
- descendantProvisioningCount: non-zero only on root nodes
- O(n) single-pass walk verified on 50-node tree
Also exports buildDeployMap for direct unit testing (was internal).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
React error #185 (Maximum update depth exceeded) on mobile chat tab.
Root cause: useCanvasStore((s) => s.agentMessages[agentId] ?? []) used
a `?? []` fallback in the selector. Zustand uses Object.is for selector
equality. When agentMessages[agentId] is undefined (initial state), the
fallback creates a NEW [] reference on every store update. Zustand sees
this as a state change and re-renders the component. The component reads
from the store again, gets another new [] reference, and the cycle
repeats until React hits the depth cap.
Fix: remove `?? []` from the selector (returns undefined when no messages)
and move the fallback to the useState initializer:
storedMessages = useCanvasStore(selector) // returns undefined | T[]
[messages] = useState(() => (storedMessages ?? []).map(...))
The useState initializer only runs once on mount, so the `?? []`
there is safe — it creates the initial state once, then messages are
managed via setMessages.
Fixes issue #651.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Implements the Claude Design handoff (Molecules AI Mobile.html) as a
viewport-gated React tree under canvas/src/components/mobile/. < 640px
renders the new shell instead of the desktop ReactFlow canvas.
Six screens, all bound to live store data:
- Home (agent list + filter chips + spawn FAB)
- Canvas (mini-graph with pinch-to-zoom + pan + reset)
- Detail (status pills, tabs: Overview / Activity / Config / Memory;
Activity hits /workspaces/:id/activity)
- Chat (textarea composer, IME-safe Enter, sendInFlightRef guard;
bootstraps from agentMessages so the prior thread shows on entry)
- Comms (live A2A feed via /workspaces/:id/activity + ACTIVITY_LOGGED)
- Spawn (bottom sheet; fetches /templates so users pick what's actually
installed on their platform)
Plus a Me tab for mobile theme/accent/density.
Design system (palette.ts + primitives.tsx) ports tokens 1:1 from the
handoff: cream + dark palettes, T1-T4 tier chips, status dots with
halo, JetBrains Mono for IDs/timestamps. Inter + JetBrains Mono are
self-hosted via next/font/google so CSP `font-src 'self'` is honoured.
URL routing: routes sync to ?m=<route>&a=<id>; popstate restores route;
deep links seed initial state. /?m=detail without ?a collapses to home.
Accent override flows through React context (MobileAccentProvider) —
not by mutating the static MOL_LIGHT/MOL_DARK singletons.
SSR flash: isMobile is tri-state; loading spinner stays up until
matchMedia resolves so mobile devices never paint the desktop tree.
Desktop responsiveness fixes (separate but ride along):
- Toolbar: full-width with overflow-x-auto on mobile, logo text + count
hidden < sm, divider/border collapse to sm: only.
- SidePanel: full-screen on mobile via matchMedia, resize handle hidden.
- Canvas: MiniMap hidden < sm (was overlapping the New Workspace FAB).
Tests (51 total, 33 new):
- palette.test.ts (12) - normalizeStatus, tierCode, light/dark parity
- components.test.ts (10) - toMobileAgent field mapping + classifyForFilter
- MobileApp.test.tsx (12) - route stack, deep links, popstate, tab bar
hidden on chat, spawn overlay
- SidePanel.tabs.test.tsx (18) - regression-clean
Verified: tsc --noEmit clean across mobile/, page.tsx, layout.tsx.
Not yet verified: live phone browser (needs CP backend hydrated).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tests canvas/src/lib/hydrate.ts: hydrateCanvas() with exponential backoff retry.
Cases:
1. Success on first attempt → { error: null }
2. Viewport fetch failure is non-fatal → store still hydrates
3. Success after 1 retry → onRetrying(1) called once, result { error: null }
4. onRetrying called correctly on each failed attempt
5. All attempts fail → error message after MAX_RETRIES
6. onRetrying called MAX_RETRIES-1 times before final exhausted attempt
7. Total elapsed time ≈ sum of exponential delays (1s + 2s = 3s)
Each attempt makes 2 parallel api.get calls (workspaces + viewport); mocks
set up per parallel-call to avoid Promise.all consuming wrong mock slots.
Issue: #701
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
React error #185 (Maximum update depth exceeded) on mobile chat tab.
Root cause: useCanvasStore((s) => s.agentMessages[agentId] ?? []) used
a `?? []` fallback in the selector. Zustand uses Object.is for selector
equality. When agentMessages[agentId] is undefined (initial state), the
fallback creates a NEW [] reference on every store update. Zustand sees
this as a state change and re-renders the component. The component reads
from the store again, gets another new [] reference, and the cycle
repeats until React hits the depth cap.
Fix: remove `?? []` from the selector (returns undefined when no messages)
and move the fallback to the useState initializer:
storedMessages = useCanvasStore(selector) // returns undefined | T[]
[messages] = useState(() => (storedMessages ?? []).map(...))
The useState initializer only runs once on mount, so the `?? []`
there is safe — it creates the initial state once, then messages are
managed via setMessages.
Fixes issue #651.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Two bugs in the test suite for SearchDialog.tsx:
1. Zustand-compatible mock: the old vi.fn-only mock updated
mockStoreState.searchOpen directly without notifying Zustand's
useSyncExternalStore subscriber, so the Cmd+K test opened the
dialog but the component never re-rendered (body stayed <div />).
Fix: add subscribe() + getState() to the mock so React flushes
the re-render when setSearchOpen fires. Also add act() wrapper
around the keydown event for additional safety.
2. Stale React state: fireEvent.change did not reliably flush the
onChange → query state update before ArrowDown fired, causing the
component to read stale filtered/nodes state. Fix: manually set
input.value, fire onChange inside act(), then call rerender() to
force the component to see the new query before keyboard events.
Affected tests:
- "clears the query when Cmd+K opens the dialog" (was: body=<div />)
- "Enter selects the highlighted workspace" (was: selected n2 not n1)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Fix test isolation in ApprovalBanner: replace vi.spyOn per-test with
module-level vi.hoisted + vi.mock so the mock is stable across tests.
Add EmptyState.test.tsx covering:
- Loading/empty/template-fetched states
- Template grid rendering (name, tier badge, model label)
- Deploy-on-click
- Create blank workspace (POST, loading, error, retry, canvas-store wiring)
- Rendering (welcome, tips, OrgTemplatesSection)
Fix vi.hoisted pattern for multiple vi.mock calls: use a single
vi.hoisted() returning all mock fns as m.<field>, then reference m.<field>
inside each vi.mock factory. This avoids "Cannot access before
initialization" errors that arise when vi.hoisted factories are called
before module-level vi.mock hoisting completes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
getSkills (DetailsTab): null/undefined/empty inputs, id+name priority,
description truthy-guard edge cases, id-name precedence, falsy coercion.
extractSkills (SkillsTab): same inputs plus tags/examples coercion,
"undefined" id vs "Unnamed skill" name distinction, mixed valid/invalid.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Add two test files that supersede the failing version in PR #611:
FilesTab.test.tsx (25 cases):
- NotAvailablePanel: heading, mono runtime, Chat tab hint, SVG aria-hidden,
layout classes
- FilesToolbar: directory selector, all four options, setRoot on change,
file count display, New/Upload/Clear conditional on /configs vs
/workspace/home/plugins, aria-labels on all buttons, click callbacks
BudgetSection.test.tsx (14 cases, new path tabs/__tests__/):
- Loading indicator, fetch errors, 402 as exceeded banner
- Used/limit stats, unlimited display, remaining credits
- Progress bar cap at 100%, bar hidden for unlimited
- Exceeded banner on 402, clears after save
- Save errors, input update after save, null for cleared input
- Saving state while patch in flight
- isApiError402 regression coverage
Fixes#608: removes the overly-prescriptive focus-visible:ring-2 test
(PR #611 added a test for a CSS class FilesToolbar does not implement).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
core-uiux
hongming-kimi-laptop
app-fe
fullstack-engineer
core-fe
hongming
infra-runtime-be
hongming-pc2
core-devops