Skip to content

✨ feat(SessionDetailPage): Add output section and integrate new components #2030

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

junkisai
Copy link
Member

  • Added Output component to manage output display with tabs for DB Design and Artifact.
  • Introduced Artifact and DBDesign components for structured content rendering.
  • Implemented Header component with export functionality and version selection.
  • Removed deprecated Artifact component and its related styles.
  • Updated styles for new components using CSS Modules.
  • Added rehype-raw dependency for handling raw HTML in Markdown.

This refactor enhances the modularity and maintainability of the SessionDetailPage output section.

Issue

  • resolve:

Why is this change needed?

What would you like reviewers to focus on?

Testing Verification

What was done

pr_agent:summary

Detailed Changes

pr_agent:walkthrough

Additional Notes

Copy link

changeset-bot bot commented Jun 16, 2025

⚠️ No Changeset found

Latest commit: e211f29

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Jun 16, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
liam-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 2:40am
liam-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 2:40am
liam-erd-sample ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 2:40am
liam-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 2:40am

Copy link

supabase bot commented Jun 16, 2025

Updates to Preview Branch (poc/artifact-v2) ↗︎

Deployments Status Updated
Database Wed, 18 Jun 2025 02:37:10 UTC
Services Wed, 18 Jun 2025 02:37:10 UTC
APIs Wed, 18 Jun 2025 02:37:10 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks Status Updated
Configurations Wed, 18 Jun 2025 02:37:10 UTC
Migrations Wed, 18 Jun 2025 02:37:12 UTC
Seeding Wed, 18 Jun 2025 02:37:12 UTC
Edge Functions Wed, 18 Jun 2025 02:37:13 UTC

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

…nents

- Added `Output` component to manage output display with tabs for DB Design and Artifact.
- Introduced `Artifact` and `DBDesign` components for structured content rendering.
- Implemented `Header` component with export functionality and version selection.
- Removed deprecated `Artifact` component and its related styles.
- Updated styles for new components using CSS Modules.
- Added `rehype-raw` dependency for handling raw HTML in Markdown.

This refactor enhances the modularity and maintainability of the SessionDetailPage output section.
junkisai added 4 commits June 18, 2025 10:36
…chemaUpdates

- Replaced the existing ERDRenderer with a new `ERD` component for better modularity.
- Added `SchemaUpdates` component to display schema migration details.
- Introduced CSS Modules for styling in both `ERD` and `SchemaUpdates` components.
- Created mock data for migrations and review comments to enhance functionality.
- Implemented a new `MigrationsViewer` to handle migration documentation and comments.

This refactor improves the structure and maintainability of the DBDesign section in the SessionDetailPage.
…sibility

- Updated `MigrationsViewer` component to accept a new `showComments` prop for controlling the display of review comments.
- Modified `useMigrationsViewer` hook to handle the `showComments` state and adjust the editor's extensions accordingly.
- Improved the rendering logic to ensure comments are displayed when the `showComments` prop is true and review comments are available.

This enhancement improves the user experience by allowing users to toggle the visibility of migration review comments in the SchemaUpdates section.
…view comments display

- Introduced `Comment` component to render review comments with severity levels.
- Added `CommentWidget` for displaying comments as DOM elements within the editor.
- Created CSS Modules for styling the comment display.
- Implemented helper functions to manage comment decorations in the editor.

This enhancement improves the visibility and organization of review comments in the MigrationsViewer, enhancing the user experience during schema updates.
…ge handling

- Added `initialMessage` prop to `Chat` component to support pre-filled messages.
- Implemented `onSendMessage` callback to handle message sending from `Chat`.
- Updated `ChatInput` to set the initial message and adjust textarea height accordingly.
- Enhanced `SessionDetailPage` to pass quick fix messages to `Chat` and handle message sending.

This enhancement improves user experience by allowing initial messages to be displayed and sent effectively in the chat interface.
Copy link
Contributor

qodo-merge-for-open-source bot commented Jun 18, 2025

CI Feedback 🧐

(Feedback updated until commit e211f29)

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: _e2e-tests (chromium)

Failed stage: Run e2e tests [❌]

Failed test name: [chromium] › tests/vrt/vrt.test.ts:24:5 › top

Failure summary:

The action failed due to a Visual Regression Test (VRT) failure in the Playwright test suite. The
test "top" in tests/vrt/vrt.test.ts:24:5 failed because the actual screenshot differed from the
expected screenshot by 69-123 pixels (ratio 0.01 of all image pixels). The test was retried 5 times
but continued to fail with the same visual differences. The failure occurred at line 11 in the
screenshot function within vrt.test.ts.

Relevant error logs:
1:  ##[group]Runner Image Provisioner
2:  Hosted Compute Agent
...

218:  Progress: resolved 2082, reused 0, downloaded 492, added 489
219:  Progress: resolved 2082, reused 0, downloaded 580, added 544
220:  Progress: resolved 2082, reused 0, downloaded 609, added 560
221:  Progress: resolved 2082, reused 0, downloaded 700, added 646
222:  Progress: resolved 2082, reused 0, downloaded 861, added 808
223:  Progress: resolved 2082, reused 0, downloaded 1066, added 1079
224:  Progress: resolved 2082, reused 0, downloaded 1246, added 1259
225:  Progress: resolved 2082, reused 0, downloaded 1398, added 1414
226:  Packages are hard linked from the content-addressable store to the virtual store.
227:  Content-addressable store is at: /home/runner/setup-pnpm/node_modules/.bin/store/v10
228:  Virtual store is at:             node_modules/.pnpm
229:  Progress: resolved 2082, reused 0, downloaded 1496, added 1486
230:  Progress: resolved 2082, reused 0, downloaded 1730, added 1747
231:  Progress: resolved 2082, reused 0, downloaded 1975, added 1992
232:  Progress: resolved 2082, reused 0, downloaded 2064, added 2082, done
233:  WARN  Failed to create bin at /home/runner/work/liam/liam/node_modules/.pnpm/node_modules/.bin/supabase. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/node_modules/.pnpm/node_modules/supabase/bin/supabase'
234:  WARN  Failed to create bin at /home/runner/work/liam/liam/node_modules/.pnpm/[email protected]/node_modules/supabase/node_modules/.bin/supabase. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/node_modules/.pnpm/[email protected]/node_modules/supabase/bin/supabase'
235:  .../node_modules/supabase postinstall$ node scripts/postinstall.js
236:  .../node_modules/supabase postinstall: Downloading https://github.com/supabase/cli/releases/download/v2.24.3/supabase_2.24.3_checksums.txt
237:  .../node_modules/supabase postinstall: Downloading https://github.com/supabase/cli/releases/download/v2.24.3/supabase_linux_amd64.tar.gz
238:  .../node_modules/supabase postinstall: Checksum verified.
239:  .../node_modules/supabase postinstall: Installed Supabase CLI successfully
240:  .../node_modules/supabase postinstall: Done
241:  WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/packages/cli/dist-cli/bin/cli.js'
242:  devDependencies:
...

253:  + vercel 41.7.8
254:  ╭ Warning ─────────────────────────────────────────────────────────────────────╮
255:  │                                                                              │
256:  │   Ignored build scripts: @biomejs/biome, @bundled-es-modules/glob,           │
257:  │   @depot/cli, @prisma/engines, @sentry/cli, @tailwindcss/oxide,              │
258:  │   core-js-pure, esbuild, protobufjs, sharp, style-dictionary.                │
259:  │   Run "pnpm approve-builds" to pick which dependencies should be allowed     │
260:  │   to run scripts.                                                            │
261:  │                                                                              │
262:  ╰──────────────────────────────────────────────────────────────────────────────╯
263:  frontend/apps/docs postinstall$ fumadocs-mdx
264:  frontend/apps/docs postinstall: [MDX] types generated
265:  frontend/apps/docs postinstall: Done
266:  frontend/internal-packages/jobs postinstall$ cp ../../packages/db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm
267:  frontend/internal-packages/jobs postinstall: Done
268:  WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/@liam-hq/cli/dist-cli/bin/cli.js'
269:  frontend/apps/app postinstall$ cp ../../packages/db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm
...

273:  with:
274:  path: ~/.cache/ms-playwright
275:  key: playwright-Linux-eadad90b5ea21ec19c40a246820b61c7becf8f445786e3382c8d4aec6152153a
276:  restore-keys: playwright-Linux-
277:  
278:  enableCrossOsArchive: false
279:  fail-on-cache-miss: false
280:  lookup-only: false
281:  save-always: false
282:  env:
283:  CI: true
284:  URL: https://liam-jgtoywsqv-liambx.vercel.app
285:  ENVIRONMENT: Preview – liam-app
286:  PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
287:  ##[endgroup]
288:  [warning]Event Validation Error: The event type deployment_status is not supported because it's not tied to a branch or tag ref.
289:  ##[group]Run pnpm exec playwright install --with-deps
...

1548:  |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 2.3 MiB
1549:  |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 2.3 MiB
1550:  FFMPEG playwright build v1011 downloaded to /home/runner/.cache/ms-playwright/ffmpeg-1011
1551:  ##[group]Run pnpm exec playwright test --project="chromium"
1552:  �[36;1mpnpm exec playwright test --project="chromium"�[0m
1553:  shell: /usr/bin/bash -e {0}
1554:  env:
1555:  CI: true
1556:  URL: https://liam-jgtoywsqv-liambx.vercel.app
1557:  ENVIRONMENT: Preview – liam-app
1558:  PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
1559:  ##[endgroup]
1560:  Running 17 tests using 1 worker
1561:  ················×××××F
1562:  1) [chromium] › tests/vrt/vrt.test.ts:24:5 › top ─────────────────────────────────────────────────
1563:  Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
1564:  123 pixels (ratio 0.01 of all image pixels) are different.
...

1586:  |                      ^
1587:  12 | }
1588:  13 |
1589:  14 | interface TargetPage {
1590:  at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:11:22)
1591:  at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:25:3
1592:  attachment #1: top-1-expected.png (image/png) ──────────────────────────────────────────────────
1593:  tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png
1594:  ────────────────────────────────────────────────────────────────────────────────────────────────
1595:  attachment #2: top-1-actual.png (image/png) ────────────────────────────────────────────────────
1596:  test-results/vrt-vrt-top-chromium/top-1-actual.png
1597:  ────────────────────────────────────────────────────────────────────────────────────────────────
1598:  attachment #3: top-1-diff.png (image/png) ──────────────────────────────────────────────────────
1599:  test-results/vrt-vrt-top-chromium/top-1-diff.png
1600:  ────────────────────────────────────────────────────────────────────────────────────────────────
1601:  Error Context: test-results/vrt-vrt-top-chromium/error-context.md
1602:  Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
1603:  Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
1604:  69 pixels (ratio 0.01 of all image pixels) are different.
...

1626:  |                      ^
1627:  12 | }
1628:  13 |
1629:  14 | interface TargetPage {
1630:  at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:11:22)
1631:  at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:25:3
1632:  attachment #1: top-1-expected.png (image/png) ──────────────────────────────────────────────────
1633:  tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png
1634:  ────────────────────────────────────────────────────────────────────────────────────────────────
1635:  attachment #2: top-1-actual.png (image/png) ────────────────────────────────────────────────────
1636:  test-results/vrt-vrt-top-chromium-retry1/top-1-actual.png
1637:  ────────────────────────────────────────────────────────────────────────────────────────────────
1638:  attachment #3: top-1-diff.png (image/png) ──────────────────────────────────────────────────────
1639:  test-results/vrt-vrt-top-chromium-retry1/top-1-diff.png
1640:  ────────────────────────────────────────────────────────────────────────────────────────────────
1641:  Error Context: test-results/vrt-vrt-top-chromium-retry1/error-context.md
1642:  attachment #5: trace (application/zip) ─────────────────────────────────────────────────────────
1643:  test-results/vrt-vrt-top-chromium-retry1/trace.zip
1644:  Usage:
1645:  pnpm exec playwright show-trace test-results/vrt-vrt-top-chromium-retry1/trace.zip
1646:  ────────────────────────────────────────────────────────────────────────────────────────────────
1647:  Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
1648:  Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
1649:  69 pixels (ratio 0.01 of all image pixels) are different.
...

1671:  |                      ^
1672:  12 | }
1673:  13 |
1674:  14 | interface TargetPage {
1675:  at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:11:22)
1676:  at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:25:3
1677:  attachment #1: top-1-expected.png (image/png) ──────────────────────────────────────────────────
1678:  tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png
1679:  ────────────────────────────────────────────────────────────────────────────────────────────────
1680:  attachment #2: top-1-actual.png (image/png) ────────────────────────────────────────────────────
1681:  test-results/vrt-vrt-top-chromium-retry2/top-1-actual.png
1682:  ────────────────────────────────────────────────────────────────────────────────────────────────
1683:  attachment #3: top-1-diff.png (image/png) ──────────────────────────────────────────────────────
1684:  test-results/vrt-vrt-top-chromium-retry2/top-1-diff.png
1685:  ────────────────────────────────────────────────────────────────────────────────────────────────
1686:  Error Context: test-results/vrt-vrt-top-chromium-retry2/error-context.md
1687:  Retry #3 ───────────────────────────────────────────────────────────────────────────────────────
1688:  Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
1689:  69 pixels (ratio 0.01 of all image pixels) are different.
...

1711:  |                      ^
1712:  12 | }
1713:  13 |
1714:  14 | interface TargetPage {
1715:  at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:11:22)
1716:  at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:25:3
1717:  attachment #1: top-1-expected.png (image/png) ──────────────────────────────────────────────────
1718:  tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png
1719:  ────────────────────────────────────────────────────────────────────────────────────────────────
1720:  attachment #2: top-1-actual.png (image/png) ────────────────────────────────────────────────────
1721:  test-results/vrt-vrt-top-chromium-retry3/top-1-actual.png
1722:  ────────────────────────────────────────────────────────────────────────────────────────────────
1723:  attachment #3: top-1-diff.png (image/png) ──────────────────────────────────────────────────────
1724:  test-results/vrt-vrt-top-chromium-retry3/top-1-diff.png
1725:  ────────────────────────────────────────────────────────────────────────────────────────────────
1726:  Error Context: test-results/vrt-vrt-top-chromium-retry3/error-context.md
1727:  Retry #4 ───────────────────────────────────────────────────────────────────────────────────────
1728:  Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
1729:  69 pixels (ratio 0.01 of all image pixels) are different.
...

1751:  |                      ^
1752:  12 | }
1753:  13 |
1754:  14 | interface TargetPage {
1755:  at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:11:22)
1756:  at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:25:3
1757:  attachment #1: top-1-expected.png (image/png) ──────────────────────────────────────────────────
1758:  tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png
1759:  ────────────────────────────────────────────────────────────────────────────────────────────────
1760:  attachment #2: top-1-actual.png (image/png) ────────────────────────────────────────────────────
1761:  test-results/vrt-vrt-top-chromium-retry4/top-1-actual.png
1762:  ────────────────────────────────────────────────────────────────────────────────────────────────
1763:  attachment #3: top-1-diff.png (image/png) ──────────────────────────────────────────────────────
1764:  test-results/vrt-vrt-top-chromium-retry4/top-1-diff.png
1765:  ────────────────────────────────────────────────────────────────────────────────────────────────
1766:  Error Context: test-results/vrt-vrt-top-chromium-retry4/error-context.md
1767:  Retry #5 ───────────────────────────────────────────────────────────────────────────────────────
1768:  Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
1769:  69 pixels (ratio 0.01 of all image pixels) are different.
...

1791:  |                      ^
1792:  12 | }
1793:  13 |
1794:  14 | interface TargetPage {
1795:  at screenshot (/home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:11:22)
1796:  at /home/runner/work/liam/liam/frontend/internal-packages/e2e/tests/vrt/vrt.test.ts:25:3
1797:  attachment #1: top-1-expected.png (image/png) ──────────────────────────────────────────────────
1798:  tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png
1799:  ────────────────────────────────────────────────────────────────────────────────────────────────
1800:  attachment #2: top-1-actual.png (image/png) ────────────────────────────────────────────────────
1801:  test-results/vrt-vrt-top-chromium-retry5/top-1-actual.png
1802:  ────────────────────────────────────────────────────────────────────────────────────────────────
1803:  attachment #3: top-1-diff.png (image/png) ──────────────────────────────────────────────────────
1804:  test-results/vrt-vrt-top-chromium-retry5/top-1-diff.png
1805:  ────────────────────────────────────────────────────────────────────────────────────────────────
1806:  Error Context: test-results/vrt-vrt-top-chromium-retry5/error-context.md
1807:  1 failed
1808:  [chromium] › tests/vrt/vrt.test.ts:24:5 › top ──────────────────────────────────────────────────
1809:  16 passed (1.6m)
1810:  ##[error]Process completed with exit code 1.
1811:  ##[group]Run actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02

junkisai added 2 commits June 18, 2025 11:36
…ion management

- Removed the `schema` prop from the `Output` component to streamline its interface.
- Introduced `OutputUIProvider` and `useOutputUI` hook for managing output state and version data.
- Updated `DBDesign` and `SchemaUpdates` components to accept new props for schema updates and comments.
- Created mock data for version management and integrated it into the `VersionDropdown` component.
- Removed unused mock data files to clean up the codebase.

This refactor improves the modularity and maintainability of the output section in the SessionDetailPage, enhancing the user experience with better version management.
…ema updates

- Added support for displaying previous version's schema updates in the `Output` component.
- Updated `DBDesign` and `SchemaUpdates` components to accept new props for previous schema updates.
- Introduced `unifiedMergeView` from `@codemirror/merge` for improved diff visualization between current and previous schema updates.
- Refactored `useMigrationsViewer` to handle previous document comparison and display differences effectively.

This enhancement improves the user experience by allowing users to view changes between schema updates, facilitating better understanding and management of version history.
…der component

- Added `getChangeStatus` utility function to determine the change status of tables in the schema.
- Enhanced `TableHeader` component to display visual indicators for added, removed, and modified tables based on schema diffs.
- Updated styles in `TableHeader.module.css` to support new diff visualization features.
- Introduced `ts-pattern` for improved type matching in the `TableHeader` component.
- Refactored `SchemaProvider` and related types to better manage schema state and diff items.

This enhancement improves the user experience by providing clear visual feedback on schema changes, facilitating better understanding of modifications in the ERD.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant