improvement(emcn): consolidate chip chrome, enforce ChipModalField, paint real chrome in loading fallbacks

[emir-karabeg]

Summary

• Consolidate chip chrome into a single source — chip/chip-chrome.ts — replacing chip-input/chip-field-chrome.ts. Adds the chip-content tokens (chipGeometryClass, chipContentGap, chipContentIconClass, chipContentLabelClass, cellIconNodeClass) so non-chip surfaces (e.g. resource table cells) compose the same chrome instead of duplicating class strings; all re-exported from the @/components/emcn barrel
• Rework Chip variants: ghost becomes the implicit default (omit variant to get it), and filled is reserved for chip fields/triggers — removed from Chip's public variant union, with all variant='filled' consumers migrated. Add shared ChipChevron
• Enforce "every labeled modal body field is a ChipModalField" — migrate hand-rolled field rows across knowledge, settings, tables, files, deploy, sidebar, auth, and ee modals so fields land at the canonical px-4 gutter matching header/footer
• Replace skeleton loading.tsx files with ResourceChromeFallback, which paints the page's REAL resource chrome (header icon/title or breadcrumbs, exact action chips, search/filter/sort, column headers) with an empty body — navigation never flashes a blank frame or a mismatched skeleton
• Rename resource-options-bar → resource-options; simplify resource.tsx and resource-header
• Delete legacy Breadcrumb, Callout, and FormField (emcn + the mcp-local copy) now that nothing uses them
• Add shared connector-config-fields for the knowledge connector modals and an ee InfoNote; add useTagUsageQuery (+ tagUsage key and invalidations); make useInlineRename save async with an isSaving flag, aligned to the sidebar rename pattern
• Update AGENTS.md / CLAUDE.md and the emcn/styling rules (with .cursor/.agents mirrors) to document the new chrome source, DropdownMenu as the canonical menu, and the ChipModalField rule

Type of Change

• Other: UI consistency / design-system consolidation

Testing

Tested manually. tsc --noEmit clean, bun run lint clean, bun run check:api-validation:strict passes

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Merge with staging

Merged origin/staging (68 conflicted files) reconciling this branch with the props-driven ChipModalFooter/ChipConfirmModal refactor (#4905): staging's modal structure + this branch's ChipModalField bodies and chip chrome. Staging features verified intact (stable column ids #4898, async CSV imports #4927, mothership v0.2 #4923, toast redesign #4909, suggested skills #4912).

Reviewer note (deliberate visual change):ChipModalFooter/ChipConfirmModal internals now render Cancel/dismiss/secondary chips as the bare default variant instead of filled, per this branch's rule that filled is reserved for chip fields/triggers and removed from Chip's public API. Footer action variant unions narrowed to 'primary' | 'destructive'. Same treatment for the "Added" chip in integration-skills-section.tsx.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 10, 2026 2:42am

[cursor]

PR Summary

Medium Risk
Broad, user-visible UI changes across files, knowledge, and shared resource components (headers, loading, inline rename); behavior should match prior flows but regressions are possible in navigation and rename/save edge cases.

Overview
This PR consolidates workspace resource UI around the chip design system and tightens agent-facing emcn documentation (chip chrome in chip-chrome.ts, ChipModal/ChipModalField, DropdownMenu, barrel imports).

Resource shell is now a compound API (Resource + Resource.Header / Resource.Options / Resource.Table). Headers and toolbars use Chip actions (ResourceAction with text/onSelect) instead of Button/subtle rows; the old monolithic create/headerActions props are gone in favor of explicit header chips (e.g. Files New file as primary). Breadcrumbs use chip geometry and plain <button> triggers for parity with static crumbs.

Loading UX shifts from skeleton tables to ResourceChromeFallback (real header, filter/sort/search chrome, column headers, empty body) on route loading.tsx and Files Suspense. Resource.Table keeps headers while loading and drops row skeletons; file previews use shared PreviewLoadingFrame / PREVIEW_LOADING_OVERLAY instead of per-viewer skeletons.

Rename flows align InlineRenameInput with the sidebar (blur commit, maxLength, disabled while saving) via ResourceCellEditing / breadcrumb editing.disabled. Modal footers drop redundant variant='filled'/ghost on Cancel chips; document-tags-modal wraps the tags block in ChipModalField type='custom'.

^{Reviewed by Cursor Bugbot for commit 0cf5314. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 0cf5314. Configure here.}

[emir-karabeg]

@greptile run

[greptile-apps]

Greptile Summary

Large-scale design-system consolidation across 113 files: chip chrome is centralized into chip/chip-chrome.ts, the ghost variant is renamed to default (implicit), filled is restricted to field/trigger use, and every labeled modal body field is migrated to ChipModalField. The Resource component is refactored into a compound pattern (Resource.Header / Resource.Options / Resource.Table), and route-transition loading skeletons are replaced by ResourceChromeFallback, which paints real page chrome during navigation.

• Chip system: chip-field-chrome.ts deleted; new chip-chrome.ts adds geometry/content tokens (chipGeometryClass, chipContentGap, chipContentIconClass, chipContentLabelClass, cellIconNodeClass) re-exported from the @/components/emcn barrel so table cells and non-chip surfaces can compose chip-aligned chrome without duplication.
• Resource compound refactor: ResourceHeader drops Button-based actions in favour of Chip, unifies padding to px-4, and renames create/leadingActions/trailingActions → aside/actions; useInlineRename becomes async with isSaving state and error recovery that restores the original name on rejection.
• Loading fallbacks: Per-route loading.tsx files replaced by ResourceChromeFallback, which renders the page's exact header, options bar, and column headers with no-op handlers — eliminating blank-frame flicker on route transitions.

Confidence Score: 5/5

• Safe to merge — no runtime regressions; all findings are documentation inconsistencies or minor cache-staleness concerns.
• The chip variant rename (ghost → default) and filled removal are enforced at the TypeScript layer and tsc --noEmit is confirmed clean, so no silent runtime breakage. The async useInlineRename refactor is well-guarded with a session-id check. The only gaps are: the Chip/ChipLink catalogue entry in the rule files still lists ghost and filled (stale docs, not runtime code), useSaveDocumentTagDefinitions skips tagUsage invalidation (data freshness, bounded by 60-second staleTime), and a one-line stale TSDoc in chip-switch.
• .claude/rules/emcn-components.md and .cursor/rules/emcn-components.mdc — the Chip/ChipLink variant catalogue entry needs updating to reflect the default/removed-filled API change so AI tools don't generate broken code.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/chip/chip-chrome.ts	New single source of truth for chip chrome tokens — surface fills, geometry, icon/label classes, and the new cellIconNodeClass for table cells. Consolidates what was split between chip-field-chrome.ts and inline strings.
apps/sim/components/emcn/components/chip/chip.tsx	Renames ghost variant to default (implicit), removes filled from ChipVariant public union, wires chipGeometryClass into CVA base, and tightens compound-variant active hover to --surface-6.
apps/sim/components/emcn/components/chip-modal/chip-modal.tsx	Adds mono prop to ChipModalInputField and ChipModalTextareaField, narrows footer/confirm action variant union to `'primary'
apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/resource-chrome-fallback.tsx	New loading fallback that renders real resource chrome (header + options bar + column headers) with no-op handlers — eliminates blank-frame flicker on route transitions.
apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx	Refactored from monolithic props-driven component to a compound pattern (Resource.Header, Resource.Options, Resource.Table). Removes CreateRow skeleton and adds ResourceCellEditing for inline rename support.
apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx	Replaces Button-based actions with Chip, unifies header padding to px-4 py-[8.5px], renames create/leadingActions/trailingActions/createTrigger to aside/actions, and adds BreadcrumbEditing.disabled for in-flight saves.
apps/sim/hooks/use-inline-rename.ts	Made submitRename async with isSaving state and error recovery (restores original name + re-arms doneRef on rejection). The session-guard around editingIdRef.current === id correctly handles concurrent renames.
apps/sim/hooks/queries/kb/knowledge.ts	Adds useTagUsageQuery with tagUsage cache key; useCreateTagDefinition and useDeleteTagDefinition invalidate it. useSaveDocumentTagDefinitions does not, which may leave usage counts stale after document tag assignment changes.
.claude/rules/emcn-components.md	Updated chrome source, ChipModalField rule, and DropdownMenu entry — but the Chip/ChipLink catalogue entry still lists ghost and filled as valid variants, both of which were removed from the public API in this PR.
apps/sim/components/emcn/components/chip-switch/chip-switch.tsx	Inactive-segment variant correctly updated from ghost to default in code, but the TSDoc comment at line 38 still references ghost.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["chip/chip-chrome.ts\n(single source)"] --> B[chipGeometryClass\nchipContentGap\nchipContentIconClass\nchipContentLabelClass\ncellIconNodeClass\nchipFilledSurfaceTokens]
B --> C["chip/chip.tsx\n(chipVariants CVA)"]
B --> D["resource/resource.tsx\n(CellContent, ResourceTable)"]
B --> E["resource-header.tsx\n(BreadcrumbSegment)"]
C --> F["ChipDropdown / ChipSelect\nChipDatePicker / ChipSwitch\n(variant='filled' + TRIGGER_BORDER_CLASS)"]
C --> G["Chip / ChipLink\n(variant: default | primary\n| destructive | border-shadow)"]
H["Resource (compound root)"] --> I["Resource.Header\n(icon/title/breadcrumbs\n+ ResourceAction chips)"]
H --> J["Resource.Options\n(search/sort/filter)"]
H --> K["Resource.Table\n(columns/rows/editing)"]
L["loading.tsx (each route)"] --> M["ResourceChromeFallback\n(real chrome, no-op handlers)"]
M --> H
N["useInlineRename (async)"] --> O["submitRename\n→ await onSave\n→ isSaving flag\n→ error recovery"]
O --> K

Loading

_{Reviews (2): Last reviewed commit: "fix(rename): type onSave as void | Promi..." | Re-trigger Greptile}

[emir-karabeg]

@greptile run