feat: new LogViewer design

[Alw3ys]

No description provided.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a connection-status callback to the LogViewer, reworks its loading/error overlays and UI, and refactors services page layout into a sidebar + main area with parent-managed connectionStatus state wired to the LogViewer.

Changes

Cohort / File(s)	Summary
Services Log Viewer Redesign dashboard/app/(private)/devices/[serial]/services/LogViewer.tsx, dashboard/app/(private)/devices/[serial]/services/page.tsx	Added `onStatusChange?: (status: "connecting"
Commands — ID templating dashboard/app/(private)/commands/page.tsx	Replaced string concatenation with template literals for clipboard IDs (cmd-${bundle.uuid}, resp-${response.cmd_id}) and corresponding equality checks only; no functional behavior changes.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	No description was provided by the author, making it impossible to assess relevance to the changeset.	Add a pull request description explaining the design changes, motivation, and any visual/behavioral improvements made to the LogViewer component.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: introducing a new design for the LogViewer component across the dashboard.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/nice-logs-design

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@dashboard/app/`(private)/devices/[serial]/services/LogViewer.tsx:
- Around line 102-112: The useEffect reporting connection status can get stuck
on "connecting" if the WebSocket closes before onopen; update the WebSocket
close handler so it clears the connecting flag (e.g., call
setIsConnecting(false)) inside ws.onclose (and optionally ws.onerror) in
LogViewer.tsx so isConnecting is reset and onStatusChange will emit
"disconnected" instead of staying "connecting".

In `@dashboard/app/`(private)/devices/[serial]/services/page.tsx:
- Around line 21-29: When a new service is selected the UI can show stale
connectionStatus; update handleSelectService to also reset connectionStatus by
calling setConnectionStatus("connecting") (in addition to
setSelectedService(serviceName)) so the header shows the fresh state while
LogViewer updates; locate the connectionStatus state and the handleSelectService
function and add the setConnectionStatus call there.

🧹 Nitpick comments (2)

dashboard/app/(private)/devices/[serial]/services/LogViewer.tsx (1)

115-155: Make the copy button visible on keyboard focus.

It’s currently hover-only; keyboard users can land on an invisible control. Consider revealing it on focus and adding a focus-visible style.

♿ Suggested tweak

- className="absolute top-2 right-2 p-1.5 bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white rounded transition-colors opacity-0 group-hover:opacity-100 cursor-pointer"
+ className="absolute top-2 right-2 p-1.5 bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white rounded transition-colors opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"

dashboard/app/(private)/devices/[serial]/services/page.tsx (1)

136-155: Add accessible status/close labeling.

The status dot is color-only, and the close button is icon-only. Consider adding an aria-label (or sr-only text) so screen readers can identify them.

♿ Suggested tweak

 <div
   className={`w-2 h-2 rounded-full ${
     connectionStatus === "connecting"
       ? "bg-yellow-400 animate-pulse"
       : connectionStatus === "connected"
         ? "bg-green-500"
         : "bg-gray-400"
   }`}
+  role="status"
+  aria-label={`Connection status: ${connectionStatus}`}
 />
 ...
 <button
   onClick={handleCloseLogs}
   className="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-200 rounded transition-colors cursor-pointer"
+  aria-label="Close log viewer"
 >