Skip to content

feat: improve quick execute page layout and conversation preview - #9

Merged
zvonimirfras merged 4 commits into
IBM:mainfrom
zvonimirfras:fix/quick-execute-jobs-navigation
Sep 10, 2026
Merged

zvonimirfras merged 4 commits into
IBM:mainfrom
zvonimirfras:fix/quick-execute-jobs-navigation

Conversation

@zvonimirfras

@zvonimirfras zvonimirfras commented Sep 10, 2026

Copy link
Copy Markdown
Member

Summary

Improves the Quick Execute page UI using the design mock as inspiration, bringing the layout and conversation preview panel in line with the intended design — without changing the overall Carbon color scheme.

Changes

Layout

  • Preview panel now top-aligns with the form column (removed margin-top, set padding: 0 on the tile)
  • Preview header has a border-bottom separator and the Chat icon now renders in the interactive blue color

Conversation preview

  • Conversation name renders as a distinct heading (previewName) rather than a plain <strong> inside a generic fieldGroup
  • Description has consistent previewDescription typography (13px, secondary color, 1.45 line-height)
  • Script section label (Script (N messages):) styled as a small muted heading

Script message items

  • Each message is now a left-bordered block:
    • user — blue left border (--cds-interactive) + tinted background
    • assistant — purple left border (#8a3ffc) + tinted background
  • Role labels (user: / assistant:) are colored to match their respective border

Success notification

  • Replaced generic "View jobs" button with a direct "View job #N →" inline link that navigates to /jobs?highlight=N
  • State refactored from successMessage: string to successJobId: string to carry the job ID cleanly

Signed-off-by: Zvonimir Fras <zvonimir@zvonimirfras.com>
Signed-off-by: Zvonimir Fras <zvonimir@zvonimirfras.com>
@zvonimirfras zvonimirfras changed the title fix: link quick execute success to jobs feat: improve quick execute page layout and conversation preview Sep 10, 2026
- Align preview panel with form column (remove top margin, zero padding on tile)
- Add border-bottom separator to preview header with blue Chat icon
- Render conversation name as distinct heading in preview body
- Style script messages with colored left-border blocks:
  user messages: blue border + tinted background
  assistant messages: purple border + tinted background
- Add colored role labels (user/assistant) matching message border colors
- Style script label as small muted heading (Script (N messages):)
- Replace generic 'View jobs' button with direct 'View job #N →' inline link
- Track job ID as string (matching API type) instead of success message string

Signed-off-by: Zvonimir Fras <zvonimir@zvonimirfras.com>
@zvonimirfras
zvonimirfras force-pushed the fix/quick-execute-jobs-navigation branch from 65f9959 to b3568d3 Compare September 10, 2026 15:45
Signed-off-by: Zvonimir Fras <zvonimir@zvonimirfras.com>
@zvonimirfras
zvonimirfras merged commit bb6cc57 into IBM:main Sep 10, 2026
4 checks passed
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