refactor(emcn): preserve outlined workflow inline chips

[BillLeoutsakosvl346]

Summary

• Preserve the existing outlined workflow summary chips in light and dark mode.
• Move their surface, text, inset outline, height, and padding into a named EMCN ChipTag recipe.
• Keep the workflow renderer's width cap, baseline alignment, and muted placeholder styling local to InlineChip.

The earlier gray-variant version changed the fill and ink. The revised implementation renders the original treatment exactly, including in the landing hero where the shared renderer is also used. The review comment contains matched before/after images and source examples.

Verification

• Actual component fixtures with product CSS and Season font: computed chip geometry and appearance matched staging in light and dark at 16px and 20px root sizes, for filled, placeholder, and truncated values.
• Workflow renderer: 144 tests passed; EMCN and workflow renderer type checks passed; changed-file Biome passed.
• The local design diff checker reports six expected EMCN central-definition review signals for the new variant, with no consumer violations or coverage failures.
• Immutable full scans of current staging and a temporary staging-plus-PR comparison commit: 1,138 → 1,134 findings. Exactly four InlineChip caller background/shadow findings disappear, with zero new finding IDs. Advisory items stay at 333, unchecked diagnostics at 1,955, and coverage failures at zero. The existing muted-placeholder text override remains visible for later design review.
• GitHub CI passed on the current head. The desktop Electron smoke job first hit an unrelated teardown timeout; it passed on the failed-job rerun.
• The local EMCN suite passed 348/349 tests; one unrelated modal Escape test fails in this checkout. App type check is blocked by an unrelated local uploaded TypeScript fixture under apps/sim/uploads.

Type of Change

• Improvement

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Existing workflow renderer tests passing
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 25, 2026 1:25am UTC

[cubic-dev-ai]

No issues found across 1 file

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[greptile-apps]

Confidence Score: 5/5

[Medium risk] Refactors chip styling for workflow inline display.

The PR appears safe to merge, with no outstanding correctness or repository-rule violations.

Summary

This PR centralizes the established outlined workflow-summary chip treatment in a named EMCN ChipTag recipe while retaining renderer-specific layout and placeholder behavior in InlineChip.

• Adds the workflow-inline EMCN variant with the existing surface, text, inset outline, height, and padding.
• Updates InlineChip to consume the shared variant while keeping its width cap, baseline alignment, and muted state local.
• The previous concern about retaining bespoke styling is no longer applicable because the clarified design requirement explicitly calls for preserving that outlined appearance.

_{Reviews (3) · Last reviewed commit: "refactor(emcn): preserve outlined workfl..."}

[BillLeoutsakosvl346]

Visual review: outlined workflow inline chips

The first version of this PR made the chips look filled and muted. This revision keeps the original outlined appearance and moves that exact recipe into EMCN. InlineChip still handles the local 160px cap, baseline alignment, and placeholder state. The shared renderer is used by the editor, read-only preview, and landing hero, so the visual treatment stays consistent across them.

Before — staging:

<ChipTag
  variant='mono'
  className={cn(
    'inline-flex max-w-[160px] translate-y-[-1px] bg-[var(--surface-2)] align-middle shadow-[inset_0_0_0_1px_var(--border-1)] dark:bg-[var(--surface-2)]',
    muted && 'text-[var(--text-muted)]'
  )}
>

After — this PR:

<ChipTag
  variant='workflow-inline'
  className={cn(
    'max-w-[160px] translate-y-[-1px] align-middle',
    muted && 'text-[var(--text-muted)]'
  )}
>

The new EMCN recipe owns the previous height, padding, surface, ink, and inset outline:

'workflow-inline':
  'h-5 gap-[3px] px-1 bg-[var(--surface-2)] text-[var(--text-primary)] shadow-[inset_0_0_0_1px_var(--border-1)]'

Matched images. Each image shows staging on the left and the revised PR on the right, with the actual InlineChip and ChipTag components, compiled product CSS, and Season font. Filled values, muted placeholders, and a truncated long value are shown in both themes. These are isolated component renders, not authenticated workflow screenshots. The computed background, text colour, outline, border, dimensions, padding, radius, and font match for all examples in both themes at both root sizes.

Root size	Before / After in light and dark
16px
20px

The outline uses --border-1, and the fill and text use --surface-2 and --text-primary from globals.css; the variant keeps the geometry in EMCN. No landing source file changes in this PR.

[BillLeoutsakosvl346]

@greptileai review this PR

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

[BillLeoutsakosvl346]

Design clarification for the current head: the gray filled chip was explicitly rejected after visual review. The intended result is the original outlined workflow-summary chip, with its exact recipe owned by EMCN instead of an InlineChip caller override. The updated PR body and visual comment show staging versus current head in light/dark at 16px and 20px; computed fill, ink, outline, dimensions, spacing, and font match. The earlier description advocating gray is superseded. @greptileai please review this PR against that intended appearance and the current head.

[cubic-dev-ai]

No issues found across 2 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}