Add query result display in timeline #2592

NoritakaIkeda · 2025-07-17T05:53:15Z

Issue

resolve: #[ISSUE_NUMBER]

Why is this change needed?

This PR implements a new QueryResultMessage component that displays SQL query execution results in the chat timeline, similar to how VersionMessage displays schema patches. This allows users to see the results of their SQL queries directly in the conversation flow.

2025-07-17.15.11.21.mov

Summary

Created QueryResultMessage component following the structure of VersionMessage
Added database migration for query_result timeline type
Updated type definitions across the codebase
Modified executeDdlNode to emit query results to the timeline
Implemented TDD practices throughout development

Implementation Details

QueryResultMessage Component: Displays query results in a collapsible format with:
- SQL query display
- Expandable results section using QueryResultBox
- Consistent styling with other timeline messages
Database Changes: Added query_result timeline type with:
- query_result_id field
- query_results JSONB field for storing results
Integration: Connected executeQuery function to emit timeline items when queries are executed

Test plan

Unit tests for QueryResultMessage component
All existing tests pass
Lint and type checks pass
Manual testing of query execution and result display
Verify collapsible UI behavior
Test with various query result sizes

🤖 Generated with Claude Code

…ts in timeline - Create QueryResultMessage component that mimics VersionMessage structure - Add database migration to support query_result timeline items - Update executeDdlNode to emit query results to timeline - Integrate QueryResultBox component into the timeline display - Add comprehensive tests following TDD practices - Update types and schemas to handle new timeline item type 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

changeset-bot · 2025-07-17T05:53:20Z

⚠️ No Changeset found

Latest commit: f1d0bb4

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

vercel · 2025-07-17T05:53:21Z

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	Jul 22, 2025 7:06am
liam-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 22, 2025 7:06am

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
liam-docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 22, 2025 7:06am
liam-erd-sample	⬜️ Skipped (Inspect)			Jul 22, 2025 7:06am

supabase · 2025-07-17T05:53:28Z

Updates to Preview Branch (feature/add-query-result-timeline-display) ↗︎

Deployments	Status	Updated
Database	✅	Tue, 22 Jul 2025 07:03:23 UTC
Services	✅	Tue, 22 Jul 2025 07:03:23 UTC
APIs	✅	Tue, 22 Jul 2025 07:03:23 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	✅	Tue, 22 Jul 2025 07:03:24 UTC
Migrations	✅	Tue, 22 Jul 2025 07:03:24 UTC
Seeding	✅	Tue, 22 Jul 2025 07:03:24 UTC
Edge Functions	✅	Tue, 22 Jul 2025 07:03:24 UTC

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

qodo-merge-for-open-source · 2025-07-17T05:53:41Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review JSON Parsing The code attempts to parse JSON strings in the results array without proper error handling. If the JSON.parse() call fails, it could crash the application. Consider adding try-catch blocks around JSON parsing operations. result: typeof r.result === 'string' ? JSON.parse(r.result) : r.result, Error Handling The error handling in the queryResultLogger only logs errors to console but doesn't propagate them or handle them appropriately. This could lead to silent failures where query results aren't saved to the timeline but the workflow continues. result.mapErr((error) => { // Log error but don't throw to avoid breaking workflow console.error('Failed to create query result timeline item:', error) }) Type Safety The results prop is typed as SqlResult[] but the component checks if it's an array and handles undefined case. The type checking logic suggests the actual data structure might be different from the declared type, which could lead to runtime errors. `<div className={styles.container}> <div className={styles.header}>`

Copilot

Pull Request Overview

This PR adds support for displaying SQL query execution results inline in the chat timeline by introducing a new QueryResultMessage component and the necessary backend/schema changes.

Added query_result type and related columns/indexes/constraints to timeline tables
Extended TypeScript types and repository methods to handle query_result timeline items
Implemented QueryResultMessage component with its accompanying tests and wiring in the agent’s workflow

Reviewed Changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend/internal-packages/db/supabase/migrations/20250717004636_add_query_result_timeline_type.sql	Add `query_result` enum value, columns, index, and foreign key for timeline items
frontend/internal-packages/db/supabase/database.types.ts	Extend DB type definitions (`query_result_id`, `query_results`)
frontend/internal-packages/db/schema/schema.sql	Update full-schema representation with `query_result` additions
frontend/internal-packages/agent/src/chat/workflow/utils/queryResultLogger.ts	New helper to log query results
frontend/internal-packages/agent/src/chat/workflow/nodes/executeDdlNode.ts	Wire `logQueryResults` into DDL execution step
frontend/apps/app/components/SessionDetailPage/services/convertTimelineItemToTimelineItemEntry.ts	Map raw timeline items to `QueryResultTimelineItemEntry`
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/QueryResultMessage.tsx	Create UI component for query results
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/QueryResultMessage.test.tsx	Add tests for the new component
frontend/apps/app/components/PGlitePage/QueryResultBox.tsx	Minor import change

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

frontend/apps/app/components/SessionDetailPage/services/convertTimelineItemToTimelineItemEntry.ts:60

There's no unit test covering the new query_result branch in this pattern match—add tests to verify correct parsing and handling of query_results arrays.

frontend/internal-packages/agent/src/chat/workflow/utils/queryResultLogger.ts

frontend/apps/app/components/PGlitePage/QueryResultBox.tsx

qodo-merge-for-open-source · 2025-07-17T05:54:50Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Handle JSON parsing errors gracefully The `JSON.parse()` call can throw an error if the string is malformed JSON. Wrap it in a try-catch block to handle parsing errors gracefully and prevent the entire conversion from failing. frontend/apps/app/components/SessionDetailPage/services/convertTimelineItemToTimelineItemEntry.ts [76] .with( { type: 'query_result', query_result_id: P.string, query_results: P.array(), }, (item): QueryResultTimelineItemEntry => { let results = item.query_results // Parse the results if they are an array if (Array.isArray(results)) { results = results.map((r) => { if (typeof r === 'object' && r !== null && 'result' in r) { + let parsedResult = r.result + if (typeof r.result === 'string') { + try { + parsedResult = JSON.parse(r.result) + } catch (error) { + console.warn('Failed to parse query result JSON:', error) + parsedResult = r.result // Keep original string if parsing fails + } + } return { ...r, - result: - typeof r.result === 'string' - ? JSON.parse(r.result) - : r.result, + result: parsedResult, } } return r }) } ... `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly points out that an unhandled `JSON.parse` could crash the application if the data is malformed, and proposes adding a `try-catch` block, which is a critical improvement for robustness.	Medium
General	Add structured error logging context The error handling silently swallows errors without proper logging context. Add structured logging with relevant context like `designSessionId` and `queryResultId` to aid debugging. frontend/internal-packages/agent/src/chat/workflow/utils/queryResultLogger.ts [41-44] result.mapErr((error) => { // Log error but don't throw to avoid breaking workflow - console.error('Failed to create query result timeline item:', error) + console.error('Failed to create query result timeline item:', { + error, + designSessionId: state.designSessionId, + queryResultId, + resultsCount: results.length + }) }) Apply / Chat Suggestion importance[1-10]: 6 __ Why: This suggestion correctly identifies that adding structured context to the error log will improve debuggability, which is a good practice for maintainability.	Low
More

coderabbitai · 2025-07-17T05:56:30Z

Walkthrough

This change introduces a new "query_result" timeline item type across the frontend, backend, and database layers. It adds support for logging, storing, and displaying SQL query results in the timeline, including schema changes, type updates, validation, UI components, and database migrations. Error handling and parsing logic are also improved.

Changes

File(s) / Path(s)	Change Summary
.../TimelineItem/TimelineItem.tsx	Added rendering logic for new 'query_result' timeline item type, integrating the new QueryResultMessage component.
.../TimelineItem/components/QueryResultMessage/QueryResultMessage.tsx	New React component for displaying SQL query results in a collapsible UI block.
.../TimelineItem/components/QueryResultMessage/QueryResultMessage.module.css	New CSS module for QueryResultMessage styles.
.../TimelineItem/components/QueryResultMessage/QueryResultMessage.stories.tsx	New Storybook stories for QueryResultMessage with various result scenarios.
.../TimelineItem/components/QueryResultMessage/index.ts	Barrel export for QueryResultMessage component.
.../SessionDetailPage/services/convertTimelineItemToTimelineItemEntry.ts	Added support for parsing and converting 'query_result' timeline items.
.../SessionDetailPage/services/designSessionWithTimelineItems/fetchDesignSessionWithTimelineItems.ts	Extended data selection to fetch query result and validation query details for timeline items.
.../SessionDetailPage/types.ts	Extended TimelineItem and TimelineItemEntry types for 'query_result' and related data structures.
.../SessionDetailPage/hooks/useRealtimeTimelineItems/useRealtimeTimelineItems.ts	Refactored timeline item parsing to use explicit result checking instead of try-catch.
.../app/eslint-suppressions.json	Removed ESLint suppression for no-throw-error in useRealtimeTimelineItems.ts.
.../agent/src/chat/workflow/nodes/executeDdlNode.ts	Added logging of query results to timeline after DDL execution using new utility.
.../agent/src/chat/workflow/utils/queryResultLogger.ts	New utility function to log query results as timeline items.
.../agent/src/repositories/supabase.ts	createTimelineItem now supports optional queryResultId param and includes it in DB inserts.
.../agent/src/repositories/types.ts	Added 'query_result' variant to CreateTimelineItemParams type.
.../agent/src/deepModeling.test.ts	Mock timeline item extended with query_result_id field in test setup.
.../db/schema/schema.sql	Added 'query_result' to timeline_item_type_enum, new query_result_id column, index, and foreign key to timeline_items table.
.../db/supabase/database.types.ts	Added query_result_id to timeline_items types, updated enums, and foreign key relationships.
.../db/supabase/migrations/20250717004636_add_query_result_timeline_type.sql	Migration: add query_result_id and query_results columns, index, and foreign key to timeline_items.
.../db/supabase/migrations/20250722055613_drop-query-results-column.sql	Migration: drop redundant query_results column from timeline_items.
.../db/src/schema.ts	Added 'query_result' to timelineItemsSchema and query_result_id field.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI
    participant Backend
    participant DB

    User->>UI: Executes DDL or triggers SQL validation
    UI->>Backend: Request to execute DDL/validation
    Backend->>DB: Store validation_queries and results
    Backend->>DB: Insert timeline_item (type: 'query_result', query_result_id)
    Backend-->>UI: Response with timeline item data
    UI->>UI: Parse and render TimelineItem
    UI->>UI: If type == 'query_result', render QueryResultMessage
    User->>UI: Expands/collapses QueryResultMessage

Estimated code review effort

4 (~90 minutes)

Suggested reviewers

hoshinotsuyoshi
MH4GF
FunamaYukina

Poem

🐇
A hop and a skip through the query log,
Now results appear—no more in a fog!
Collapsible boxes, success and some error,
Each SQL adventure shown clearer than ever.
With types and migrations, the schema’s just right—
The timeline grows smarter,
Code rabbits delight!

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 3

🔭 Outside diff range comments (1)

frontend/internal-packages/db/schema/schema.sql (1)
118-125: Add a CHECK constraint for the new query_result type

The enum extension itself is fine, but nothing enforces that rows whose type = 'query_result' actually populate the new columns (query_result_id, query_results) and that every other type keeps them NULL.
A lightweight CHECK such as
ALTER TABLE public.timeline_items
  ADD CONSTRAINT timeline_items_query_result_consistency_chk
  CHECK (
    (type = 'query_result' AND query_result_id IS NOT NULL AND query_results IS NOT NULL)
    OR
    (type <> 'query_result' AND query_result_id IS NULL AND query_results IS NULL)
  );
will prevent silent data-quality issues later on.

🧹 Nitpick comments (3)

frontend/apps/app/components/PGlitePage/QueryResultBox.tsx (1)
4-4: Remove unnecessary React import.

The React import is not needed since the component only uses JSX and the useState hook, neither of which require the React namespace with modern JSX Transform.
-import React, { useState } from 'react'
+import { useState } from 'react'
frontend/internal-packages/db/schema/schema.sql (1)

1773-1774: Index name is duplicated with the new FK

The partial index timeline_items_query_result_id_idx is great, but once the FK column gets queried it is common to rely on Postgres’ automatic index that backs the FK.
Two alternatives:

Drop the explicit index – Postgres will create one automatically for the FK.

Keep only one (rename if needed) to avoid duplicate storage.

Choose whichever matches your query plans, but avoid redundant b-tree indexes.
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/QueryResultMessage.tsx (1)
16-44: Loading state implementation could be improved.

The loading state correctly disables the button and provides appropriate accessibility attributes. However, the component structure could be more consistent with the main content rendering.

Consider extracting the loading state into a separate function for better readability:
+const renderLoadingState = () => (
+  <div className={styles.container}>
+    <div className={styles.header}>
+      <button
+        type="button"
+        className={styles.headerButton}
+        disabled
+        aria-label="Loading query results"
+        aria-expanded={false}
+      >
+        <div className={styles.collapseButton}>
+          <ChevronRight />
+        </div>
+        <span className={styles.queryResultNumber}>
+          Loading query results...
+        </span>
+      </button>
+    </div>
+  </div>
+)

 if (!results) {
-   return (
-     <div className={styles.container}>
-       <div className={styles.header}>
-         <button
-           type="button"
-           className={styles.headerButton}
-           disabled
-           aria-label="Loading query results"
-           aria-expanded={false}
-         >
-           <div className={styles.collapseButton}>
-             <ChevronRight />
-           </div>
-           <span className={styles.queryResultNumber}>
-             Loading query results...
-           </span>
-         </button>
-       </div>
-     </div>
-   )
+   return renderLoadingState()
 }

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5262a2d and 5742ba4.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (21)

frontend/apps/app/components/PGlitePage/QueryResultBox.tsx (1 hunks)
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/TimelineItem.tsx (2 hunks)
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/QueryResultMessage.module.css (1 hunks)
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/QueryResultMessage.test.tsx (1 hunks)
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/QueryResultMessage.tsx (1 hunks)
frontend/apps/app/components/SessionDetailPage/components/Chat/components/TimelineItem/components/QueryResultMessage/index.ts (1 hunks)
frontend/apps/app/components/SessionDetailPage/schema.ts (1 hunks)
frontend/apps/app/components/SessionDetailPage/services/convertTimelineItemToTimelineItemEntry.ts (2 hunks)
frontend/apps/app/components/SessionDetailPage/services/designSessionWithTimelineItems/fetchDesignSessionWithTimelineItems.ts (1 hunks)
frontend/apps/app/components/SessionDetailPage/types.ts (2 hunks)
frontend/apps/app/package.json (1 hunks)
frontend/apps/app/vitest.config.ts (1 hunks)
frontend/apps/app/vitest.setup.ts (1 hunks)
frontend/internal-packages/agent/src/chat/workflow/nodes/executeDdlNode.ts (2 hunks)
frontend/internal-packages/agent/src/chat/workflow/utils/queryResultLogger.ts (1 hunks)
frontend/internal-packages/agent/src/deepModeling.test.ts (1 hunks)
frontend/internal-packages/agent/src/repositories/supabase.ts (2 hunks)
frontend/internal-packages/agent/src/repositories/types.ts (2 hunks)
frontend/internal-packages/db/schema/schema.sql (5 hunks)
frontend/internal-packages/db/supabase/database.types.ts (6 hunks)
frontend/internal-packages/db/supabase/migrations/20250717004636_add_query_result_timeline_type.sql (1 hunks)

🧰 Additional context used

📓 Path-based instructions (10)

**/*.{ts,tsx}

Instructions used from: