Feat/design system compliance

[MyNameIsEdi]

Description

Fixes # (issue number)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Summary by CodeRabbit

Release Notes

• New Features

  • Real-time streaming of Playwright run summaries now displayed in team chat with detailed pass/fail metrics.

• Style

  • Updated Playwright Dashboard color palette for improved visual consistency and semantic status indicators.

• Documentation

  • Enhanced README with expanded feature descriptions for Multi-Agent Collaboration and Dashboard capabilities.
  • Fixed Troubleshooting documentation formatting.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bbbf8078-89c0-4c56-9ecc-b445d40df883

📥 Commits

Reviewing files that changed from the base of the PR and between e9899a2 and 967cad0.

📒 Files selected for processing (2)

• ui/src/pages/DocsPage.tsx
• ui/src/pages/PlaywrightDashboard.tsx

---

📝 Walkthrough

Walkthrough

PlaywrightDashboard gains structured SSE event handling for AI summary streaming, archived run log restoration, and a comprehensive design system color refresh. Documentation updated for Gemini/Ollama stack. CHANGELOG and README revised to reflect these changes.

Changes

Dashboard & Documentation Updates

Layer / File(s)	Summary
Documentation and changelog updates CHANGELOG.md, README.md, ui/src/pages/DocsPage.tsx	CHANGELOG adds entries for PlaywrightDashboard design system pass and DocsPage rewrite; README features table reformatted with expanded multi-agent collaboration and design token descriptions; DocsPage troubleshooting apostrophe escaped.
SSE summary event typing and QA summary streaming ui/src/pages/PlaywrightDashboard.tsx	runWithSSE and runDynamicTest parse structured JSON SSE events (summary_start/chunk/done) and stream QA summary chunks into a dedicated team-manager chat message; fetchResults restores runLog for archived runs and clears it when returning to latest.
Dashboard design system color palette refresh ui/src/pages/PlaywrightDashboard.tsx	Systematic color palette update across all dashboard UI: run history charts/tables, status icons/badges, KPI visualizations, timeline, editor controls, chat, header, settings, and filter pills adopt new hex-based accents (#1a3a8f, #34C759, #EF4444, #E8A728, #D97706, #16A34A).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• MyNameIsEdi/open-qa#109: Overlaps in SSE parsing for /api/run-dynamic-test endpoint and runDynamicTest summary event handling (summary_start/chunk/done phases).
• MyNameIsEdi/open-qa#111: Both modify PlaywrightDashboard SSE event handling for Phase 2 AI summary and archived run runLog rehydration.
• MyNameIsEdi/open-qa#113: Overlaps in PlaywrightDashboard SSE typing, summary event handling, and archived-run log restoration logic.

Poem

🐰 A spectrum blooms across the dash so bright,
New blues and greens and ambers paint the flight,
Each summary streams in chunks of wisdom true,
While archived runs remember all they knew,
Design and function dance—a perfect pair!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is entirely template boilerplate with no actual content filled in—no summary, no issue reference, no type of change selected, and no checklist items completed.	Fill in the Description section with a summary of changes, link any related issue, select the appropriate Type of change, and check off completed checklist items to accurately document the PR.
Docstring Coverage	⚠️ Warning	Docstring coverage is 55.56% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Feat/design system compliance' is directly related to the main changes in the PR, which broadly involve design system updates across multiple files including color/token updates and documentation adjustments.
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/design-system-compliance

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/src/pages/DocsPage.tsx (1)

35-308: ⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Localize Docs content instead of hardcoded English blocks

Most newly added user-facing strings are hardcoded in sections (for example Line 37, Line 78, Line 230, Line 268), so they cannot be translated through react-i18next. This makes the Docs page effectively English-only and hard to maintain as content evolves. Please move these strings into translation resources and reference them via t(...) (or structured translation objects) for each block.

🤖 Prompt for 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.

In `@ui/src/pages/DocsPage.tsx` around lines 35 - 308, The docs content is
hardcoded in the sections/blocks array (the constant named sections in
DocsPage.tsx) so it must be replaced with translation keys; extract each
user-facing string (paragraph text, list items, code labels, table headers/rows,
FAQ q/a, roadmap entries) into your i18n resource files (e.g. under
docs.sections.*) and update the sections data to reference
t('docs.sections.<key>') or structured translation objects (e.g.
t('docs.sections.env-vars.blocks.0.text', { returnObjects: true })) using the
useTranslation hook (t) in DocsPage.tsx so every block reads content via t(...)
instead of literal English strings. Ensure code block labels and table rows also
use translation keys and keep existing block type shape so UI rendering (blocks
map) continues to work.

🧹 Nitpick comments (1)

ui/src/pages/PlaywrightDashboard.tsx (1)

4807-4812: ⚡ Quick win

Keep the SSE payload parser strictly typed.

Falling back to Record<string, unknown> turns these API responses back into a generic bag, so any JSON object with an evt field is accepted and skipped out of the plain-log path. A small isSummaryEvent() guard would keep this aligned with the declared SummaryEvent contract in both parsers.

Possible fix

+ function isSummaryEvent(value: unknown): value is SummaryEvent {
+   if (!value || typeof value !== 'object' || !('evt' in value)) return false;
+   const evt = (value as { evt?: unknown }).evt;
+   return evt === 'summary_start' || evt === 'summary_chunk' || evt === 'summary_done';
+ }
+
  // First try to parse as a structured event object
- let evt: SummaryEvent | Record<string, unknown> | null = null;
+ let evt: SummaryEvent | null = null;
  try {
-   const parsed = JSON.parse(raw);
-   if (parsed && typeof parsed === 'object' && 'evt' in parsed) {
-     evt = parsed as SummaryEvent | Record<string, unknown>;
-   }
+   const parsed: unknown = JSON.parse(raw);
+   if (isSummaryEvent(parsed)) evt = parsed;
  } catch {
    /* not JSON — fall through to plain string */
  }

As per coding guidelines, **/*.{ts,tsx}: Use strict TypeScript interfaces/types for all test data, API responses, and parameters. No any types. Ever.

Also applies to: 4960-4965

🤖 Prompt for 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.

In `@ui/src/pages/PlaywrightDashboard.tsx` around lines 4807 - 4812, The SSE
payload parser currently falls back to a loose Record<string, unknown> (in the
block that assigns evt from JSON.parse(raw)), which weakens typing; add a strict
type guard function isSummaryEvent(obj: unknown): obj is SummaryEvent and use it
when validating parsed so evt is only set when isSummaryEvent(parsed) is true
(remove the Record<string, unknown> fallback), update both locations referenced
(the current parse at the evt assignment and the similar block at the other
occurrence around lines 4960-4965), and ensure downstream code expects
SummaryEvent or null so the compiler enforces the contract.

🤖 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 `@ui/src/pages/PlaywrightDashboard.tsx`:
- Around line 4636-4637: The current call to setRunLog unconditionally replaces
the live log and trims it to 999 lines; change it so the run log is only
replaced when viewing an archived run (i.e. when runId is truthy and data.runLog
is an array) and preserved on latest-run refreshes (do nothing / keep previous
state when runId is falsy). In the archived-run branch (where you still update),
stop trimming to 999 and either remove the slice or use the server window size
(e.g., 5000) so you don't truncate server-kept history; update the logic around
setRunLog, runId and data.runLog (the fetchResults post-stream refresh path)
accordingly.

---

Outside diff comments:
In `@ui/src/pages/DocsPage.tsx`:
- Around line 35-308: The docs content is hardcoded in the sections/blocks array
(the constant named sections in DocsPage.tsx) so it must be replaced with
translation keys; extract each user-facing string (paragraph text, list items,
code labels, table headers/rows, FAQ q/a, roadmap entries) into your i18n
resource files (e.g. under docs.sections.*) and update the sections data to
reference t('docs.sections.<key>') or structured translation objects (e.g.
t('docs.sections.env-vars.blocks.0.text', { returnObjects: true })) using the
useTranslation hook (t) in DocsPage.tsx so every block reads content via t(...)
instead of literal English strings. Ensure code block labels and table rows also
use translation keys and keep existing block type shape so UI rendering (blocks
map) continues to work.

---

Nitpick comments:
In `@ui/src/pages/PlaywrightDashboard.tsx`:
- Around line 4807-4812: The SSE payload parser currently falls back to a loose
Record<string, unknown> (in the block that assigns evt from JSON.parse(raw)),
which weakens typing; add a strict type guard function isSummaryEvent(obj:
unknown): obj is SummaryEvent and use it when validating parsed so evt is only
set when isSummaryEvent(parsed) is true (remove the Record<string, unknown>
fallback), update both locations referenced (the current parse at the evt
assignment and the similar block at the other occurrence around lines
4960-4965), and ensure downstream code expects SummaryEvent or null so the
compiler enforces the contract.

🪄 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: 400f344f-e2e8-4953-94a6-7cd91aa10b3a

📥 Commits

Reviewing files that changed from the base of the PR and between b7e4a42 and afdab98.

📒 Files selected for processing (5)

• CHANGELOG.md
• README.md
• server/index.ts
• ui/src/pages/DocsPage.tsx
• ui/src/pages/PlaywrightDashboard.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Don't wipe the run log during the post-run refresh.

Both SSE runners call fetchResults() as soon as streaming finishes, so this latest-run branch clears the just-streamed output and makes the Run Output panel disappear right after a successful run. It also trims archived snapshots back to 999 lines even though the server now keeps a 5000-line window. Preserve the current log on latest refreshes, and only replace it when you actually hydrate an archived run.

Possible fix

- const fetchResults = useCallback(async (runId?: string) => {
+ const fetchResults = useCallback(async (runId?: string, opts?: { preserveRunLog?: boolean }) => {
    setIsLoading(true);
    try {
      const url = runId
        ? `${API_BASE}/api/playwright/results/${runId}`
        : `${API_BASE}/api/playwright/results`;
      const res = await fetch(url);
      // ...
      setExpandedSuites(Object.fromEntries(data.suites.map((s) => [s.id, true])));
-     setRunLog(runId && Array.isArray(data.runLog) ? data.runLog.slice(-999) : []);
+     const hydratedLog = Array.isArray(data.runLog) ? data.runLog.slice(-5000) : [];
+     if (runId) {
+       setRunLog(hydratedLog);
+       setShowLog(hydratedLog.length > 0);
+     } else if (!opts?.preserveRunLog) {
+       setRunLog([]);
+     }
    } catch {
      setServerOnline(false);
      setDemoMode(true);
    } finally {
      setIsLoading(false);
    }
  }, []);

And keep the live log after streaming completes:

- await fetchResults();
+ await fetchResults(undefined, { preserveRunLog: true });

🤖 Prompt for 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.

In `@ui/src/pages/PlaywrightDashboard.tsx` around lines 4636 - 4637, The current
call to setRunLog unconditionally replaces the live log and trims it to 999
lines; change it so the run log is only replaced when viewing an archived run
(i.e. when runId is truthy and data.runLog is an array) and preserved on
latest-run refreshes (do nothing / keep previous state when runId is falsy). In
the archived-run branch (where you still update), stop trimming to 999 and
either remove the slice or use the server window size (e.g., 5000) so you don't
truncate server-kept history; update the logic around setRunLog, runId and
data.runLog (the fetchResults post-stream refresh path) accordingly.