Add Device Logs panel

[JoaoPauloCMarra]

Summary

Adds a dedicated Device Logs panel for viewing simulator logs from the serve-sim UI while preserving the existing browser-console log stream used by agent/browser tooling.

Changes

• Add a right-rail Device Logs entry with a resizable log viewer panel
• Stream simulator device logs through the existing /logs SSE endpoint with controlled verbosity
• Preserve browser-console mirroring of simulator logs for MCP and DevTools workflows
• Add search, level, process, current-app, follow-tail, pause, clear, export, and row expansion controls
• Batch incoming log rows, precompute filter/search keys, and bound pending rows when rendering is throttled
• Cover log parsing, filtering, buffer limits, stream-level parsing, and idle stream cleanup with focused tests

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a "Device Logs" sidebar with SSE streaming, client parsing/filtering utilities, a useDeviceLogs hook for buffered EventSource consumption, UI components (panel, tool, status, log row), client integration, and tests for parsing/filtering/buffering and server query-level handling.

Changes

Device Logs Feature

Layer / File(s)	Summary
Log types and client utilities packages/serve-sim/src/client/utils/logs.ts, packages/serve-sim/src/client/utils/panel-widths.ts, packages/serve-sim/src/__tests__/device-logs.test.ts	DeviceLogEntry/level types and functions for parsing raw log payloads, normalizing levels, building stream endpoints, buffering with limits, filtering by level/process/app/search, plus DEVICE_LOGS_PANEL_WIDTH. Tests cover normalization, parsing, filtering, app matching, buffer trimming, and simctl query-level mapping.
Server-side log level support packages/serve-sim/src/middleware.ts	queryLogLevel() parses the level query parameter (allowing debug/default, default info) and the /logs SSE route uses it to set xcrun simctl log stream --level.
React hook for SSE streaming packages/serve-sim/src/client/hooks/use-device-logs.ts	useDeviceLogs subscribes to an SSE endpoint, parses incoming JSON via parseDeviceLogEntry(), batches flushes with RAF/timeout, enforces max stored rows, exposes {entries, status, error, clear}, and cleans up on unmount.
Device logs UI components packages/serve-sim/src/client/components/device-logs-panel.tsx, packages/serve-sim/src/client/components/device-logs-tool.tsx	DeviceLogsPanel provides the titled resizable panel wrapper; DeviceLogsTool implements the viewer with pause/resume, tail follow, search, process/level filters, current-app scoping, export to NDJSON, DeviceLogsStatusLabel, and expandable LogRow.
Main client integration packages/serve-sim/src/client/client.tsx	Adds logsOpen state and resizable width, integrates a "Device Logs" sidebar toggle (closing other panels), updates layout width calculation, removes previous inline EventSource logging, and renders DeviceLogsPanel with resize/close handlers.
Test teardown fixes packages/serve-sim/src/__tests__/idle-floor.test.ts	Await reader.cancel() in two tests during teardown to ensure cancellation completes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I chased the SSE stream tonight,
Lines and levels in silver light,
Filters set and rows aligned,
A sidebar where the traces shine.
Hooray — the rabbit saved the lines!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 5.26% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title 'Add Device Logs panel' directly and accurately describes the main change: introducing a new Device Logs panel to the UI with log streaming, filtering, and viewing controls.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/serve-sim/src/client/hooks/use-device-logs.ts`:
- Around line 46-50: The enqueue function can let pendingEntries.current grow
without bound while RAF is paused; modify enqueue (and associated flush logic)
to cap the queue (e.g., trim to a MAX_PENDING constant, dropping oldest entries)
and to install a fallback timer: when you schedule requestAnimationFrame in
enqueue (frame.current), also set a fallback timeout (e.g., FLUSH_TIMEOUT_MS)
that calls flush if RAF never fires, and clear that timeout inside flush; ensure
frame.current and the fallback handle are cleared after flush. Target
functions/vars: enqueue, pendingEntries.current, frame.current, flush, and the
RAF/timeout scheduling.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: fdba749b-e880-4c16-a893-4dee59f14687

📥 Commits

Reviewing files that changed from the base of the PR and between 38fd446 and f9d5e41.

📒 Files selected for processing (8)

• packages/serve-sim/src/__tests__/device-logs.test.ts
• packages/serve-sim/src/client/client.tsx
• packages/serve-sim/src/client/components/device-logs-panel.tsx
• packages/serve-sim/src/client/components/device-logs-tool.tsx
• packages/serve-sim/src/client/hooks/use-device-logs.ts
• packages/serve-sim/src/client/utils/logs.ts
• packages/serve-sim/src/client/utils/panel-widths.ts
• packages/serve-sim/src/middleware.ts

[JoaoPauloCMarra]

Menu

Demo

[EvanBacon]

Logs are currently being sent to the browser console which allows agent MCP tools to query the logs like they would any other website.

[JoaoPauloCMarra]

Logs are currently being sent to the browser console which allows agent MCP tools to query the logs like they would any other website.

Yep, makes sense. I kept that path working, this PR is more for humans using serve-sim directly: searchable/filterable device logs in the UI without opening Xcode or digging through DevTools. If you’d rather keep logs console-only, I’m fine closing it.