Skip to content

Add fixed workflow status indicator at bottom-left #3857

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 2 commits into from
Closed

Add fixed workflow status indicator at bottom-left #3857

wants to merge 2 commits into from

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Oct 23, 2025 •
edited
Loading

Issue

Why is this change needed?

The initial implementation of the workflow status indicator (PR #3857) needed refinements based on feedback to match the expected UI design and improve positioning behavior. The original implementation had CSS styling that didn't match the design specification and lacked conditional positioning based on the Output panel visibility.

What changed?

UI Design Updates

Updated FixedWorkflowStatusIndicator to match the design specification:

  • Green accent color (#22c55e) applied to border and title text
  • 2-line layout:
    • Line 1: Status text (e.g., "Updating schema...") in green, medium-large font
    • Line 2: Fixed description "Wait while schema is being updated" in gray, smaller font
  • Enhanced styling: 4px left border, dark background, proper padding

Conditional Positioning

Implemented dynamic positioning based on Output panel visibility:

  • No Output panel: Status bar centers at bottom of chat pane (absolute positioning with left: 50%)
  • With Output panel: Status bar fixes to bottom-left corner (fixed positioning)
  • Uses hasOutput prop passed from SessionDetailPageClient → Chat → FixedWorkflowStatusIndicator

Layout Improvements

Adjusted Chat component to prevent status bar from overlapping timeline:

  • Apply maxHeight: calc(100% - 80px) to message list when workflow is running
  • Reserves space at bottom for the status indicator

Review Checklist

High Priority:

  • Verify the green color (#22c55e) matches the expected design
  • Test positioning behavior - center when no Output panel, left-bottom when Output panel visible
  • Check that 80px height reduction is sufficient and doesn't cause issues
  • Verify no layout breaks with long status text or narrow screens
  • Confirm the 2-line layout displays correctly with proper spacing

Medium Priority:

  • Test that timeline items don't overlap with status bar during workflow execution
  • Verify animation smoothness (spinner and positioning transitions)
  • Check z-index doesn't conflict with other UI elements

Known Limitations:

  • Changes tested with lint/typecheck only, not with actual workflow execution
  • Status bar height (80px) is an estimate and may need adjustment based on actual rendering

Devin Session: https://app.devin.ai/sessions/ae9e52c1a1cf4741817f36bcabf5a070
Requested by: [email protected]

@devin-ai-integration @NoritakaIkeda
feat: add fixed workflow status indicator at bottom-left
5931c98 
- Create FixedWorkflowStatusIndicator component with fixed positioning at bottom-left
- Add useWorkflowStatus hook to extract current workflow stage from messages
- Display real-time status text based on active agent and tool calls
- Integrate with Chat component to show status during workflow execution
- Improve visibility of workflow progress for users viewing artifacts/ERD

Addresses: https://github.com/route06/liam-internal/issues/5835
Co-Authored-By: [email protected] <[email protected]>
@devin-ai-integration
Copy link
Contributor Author

devin-ai-integration bot commented Oct 23, 2025

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@giselles-ai
Copy link

giselles-ai bot commented Oct 23, 2025 •
edited
Loading

Finished running flow.

Step Status Updated(UTC)
1 ✅ Oct 23, 2025 12:36am
2 ✅ Oct 23, 2025 12:37am
3 ✅ Oct 23, 2025 12:37am

@vercel
Copy link

vercel bot commented Oct 23, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
liam-app Ready Ready Preview Comment Oct 23, 2025 1:06am
liam-assets Ready Ready Preview Comment Oct 23, 2025 1:06am
liam-storybook Ready Ready Preview Comment Oct 23, 2025 1:06am
2 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
liam-docs Ignored Ignored Preview Oct 23, 2025 1:06am
liam-erd-sample Skipped Skipped Oct 23, 2025 1:06am

@supabase
Copy link

supabase bot commented Oct 23, 2025 •
edited
Loading

Updates to Preview Branch (devin/1761179696-fixed-workflow-status-indicator) ↗︎

Deployments Status Updated
Database ✅ Thu, 23 Oct 2025 01:02:22 UTC
Services ✅ Thu, 23 Oct 2025 01:02:22 UTC
APIs ✅ Thu, 23 Oct 2025 01:02:22 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 ✅ Thu, 23 Oct 2025 01:02:24 UTC
Migrations ✅ Thu, 23 Oct 2025 01:02:24 UTC
Seeding ✅ Thu, 23 Oct 2025 01:02:24 UTC
Edge Functions ✅ Thu, 23 Oct 2025 01:02:24 UTC

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 23, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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

@giselles-ai
Copy link

giselles-ai bot commented Oct 23, 2025

Check changeset necessity

Status: NOT REQUIRED

Reason:

  • All changes are confined to the app codebase (frontend/apps/app), which corresponds to the ignored package @liam-hq/app.
  • No modifications to target packages that require changesets: @liam-hq/cli, @liam-hq/erd-core, @liam-hq/schema, or @liam-hq/ui.
  • Though user-facing (adds a fixed workflow status indicator UI), the Changeset Guide excludes ignored packages from requiring changesets.
  • Imports from @liam-hq/agent/client are used but that package is also on the ignore list and is not changed in this PR.

Changeset (copy & paste):

<!-- No changeset required for this PR (changes only in @liam-hq/app, which is ignored). -->

@devin-ai-integration @NoritakaIkeda
refactor: improve workflow status indicator UI and positioning
87fa351 
- Update UI to match design spec with green accent color (#22c55e)
- Add 2-line layout: title and description
- Implement conditional positioning based on Output panel visibility
  - Center position when no Output panel
  - Left-bottom fixed position when Output panel is visible
- Adjust Chat layout to prevent status bar overlap (max-height control)
- Use clsx for className composition
- Pass hasOutput prop from SessionDetailPageClient through Chat to FixedWorkflowStatusIndicator

Addresses feedback from: https://github.com/route06/liam-internal/issues/5835#issuecomment-3434702018

Co-Authored-By: [email protected] <[email protected]>
@vercel vercel bot temporarily deployed to Preview – liam-erd-sample October 23, 2025 01:01 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@NoritakaIkeda