@worca/ui 0.38.0 → 0.40.0

package/app/styles.css

@@ -10,6 +10,16 @@
   --bg: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;
+  /* Card / panel surface. `--surface` was used in several places
+   * (`.run-card`, sidebar widgets, settings cards) without ever
+   * being defined, so it silently resolved to `unset` → no
+   * background. That was invisible while the page background and
+   * cards were both white, but the moment a parent panel tinted
+   * itself gray (e.g. `.pipelines-tier-section` → `--bg-secondary`)
+   * the cards turned transparent. Alias it to `--bg` so cards
+   * always render on a white (light) / dark-slate (dark) surface
+   * regardless of what's behind them. */
+  --surface: var(--bg);
   --border: #e2e8f0;
   --border-subtle: rgba(226, 232, 240, 0.6);
   --muted: #94a3b8;
@@ -2942,7 +2952,18 @@ sl-option.template-grouped::part(label) {
   font-weight: 500;
 }
 
-/* Description wraps below name, aligned with label */
+/* Description wraps below name, aligned with the label's left edge.
+ * Shoelace renders the option as `[checked-icon] [prefix] [label] [suffix]`
+ * on a single flex row. With `flex-wrap: wrap`, the suffix lands on
+ * a new line — but at the parent's left edge, NOT under the label.
+ * We push it back so "ID: foo" sits directly under "Foo" instead of
+ * indented to the prefix slot. Shoelace's prefix slot is ~24px wide
+ * by default; we use the same offset as the label's apparent x.
+ *
+ * The 14px is empirical: 24px ::part(base) padding-left minus the
+ * ~10px the prefix slot is currently empty (no checkmark on
+ * non-selected items). Adjust if Shoelace changes its inner spacing.
+ */
 sl-option.template-grouped::part(suffix) {
   flex-basis: 100%;
   font-size: 11px;
@@ -2951,7 +2972,7 @@ sl-option.template-grouped::part(suffix) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 0 0 4px;
+  padding: 0 0 4px 14px;
 }
 
 /* Fix contrast on selected/current option description */
@@ -6739,3 +6760,1048 @@ sl-dialog.markdown-dialog::part(body) {
   font-size: 0.8rem;
   word-break: break-all;
 }
+
+/* --- Pipelines view --- */
+
+.pipelines-view {
+  padding: 24px 0;
+}
+
+.pipelines-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pipelines-loading-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 48px;
+  font-size: 32px;
+}
+
+/*
+ * Tier sections are sl-details collapsibles. The summary slot holds a
+ * 2-row grid: top row [icon | TITLE | count | spacer], bottom row a
+ * one-line description that wraps under the title. Shoelace's own
+ * chevron sits to the right of our summary content.
+ */
+.pipelines-tier-section {
+  margin-bottom: 0;
+}
+.pipelines-tier-section::part(base) {
+  border: 1px solid var(--border-subtle, var(--border));
+  border-radius: var(--radius-lg);
+  /* Match the new-run-section panel chrome so the tier sections
+   * read as the same kind of grouping (gray-tinted surface holding
+   * a heading + a stack of items). Previously these were on the
+   * default `--surface`, which left the cards floating with no
+   * visual hierarchy against the page background. */
+  background: var(--bg-secondary);
+}
+.pipelines-tier-section::part(header) {
+  padding: 12px 16px;
+}
+.pipelines-tier-section::part(content) {
+  padding: 12px 16px 16px;
+}
+
+/* The summary's flex container: lay out icon + title + count + desc. */
+.tier-section-header {
+  display: grid;
+  grid-template-columns: auto auto auto 1fr;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 4px 10px;
+  width: 100%;
+}
+.tier-section-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg-muted);
+  grid-row: 1;
+}
+.tier-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  grid-row: 1;
+}
+.tier-section-count {
+  grid-row: 1;
+  font-size: 11px;
+  justify-self: start;
+}
+.tier-section-desc {
+  grid-row: 2;
+  grid-column: 2 / -1;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.4;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+/*
+ * Empty-tier placeholder — sits inside an otherwise normal
+ * .pipelines-tier-section so the page never collapses around an empty
+ * tier. Uses the dashed Settings-style border to read as "absence,
+ * not error".
+ */
+.tier-section-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 18px 20px;
+  border: 1px dashed var(--border-subtle, var(--border));
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+}
+.tier-section-empty-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--fg);
+}
+.tier-section-empty-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--fg-muted);
+}
+
+.pipelines-grid {
+  display: grid;
+  /* Cards 50% wider than the original 320px min — fewer per row, more
+     room for the description text and tag chips to breathe. The gap
+     scales with the new width so the grid still feels balanced. */
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
+  gap: 20px;
+}
+
+.template-card {
+  /* +50% on the original 140px to stay proportional with the wider
+     grid track; longer descriptions now have headroom before the card
+     needs to grow further. */
+  min-height: 210px;
+}
+
+/*
+ * "ID: <slug>" badge — pill-shaped with a subtle gray background to
+ * read as a handle/identifier chip rather than incidental text. Sits
+ * inline with the file-text icon, name, and Default badge on the
+ * card's top row (mirrors the tier section header layout). Uses
+ * Settings-style tokens (--bg-secondary, --border-subtle) so it
+ * lands in the same visual family as our other chips and badges.
+ */
+.template-card-id-badge {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle, var(--border));
+  max-width: max-content;
+  min-width: 0;
+}
+.template-card-id-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  flex-shrink: 0;
+}
+.template-card-id {
+  font-family: var(--sl-font-mono);
+  font-size: 12px;
+  color: var(--fg);
+  background: transparent;
+  padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * Template cards inherit `cursor: pointer` and a hover lift from the
+ * base `.run-card` rule. The `--clickable` modifier is added by the
+ * view only when an edit/duplicate handler is wired up; in the degraded
+ * read-only state we strip those affordances so the card looks (and
+ * feels) inert.
+ */
+.template-card:not(.template-card--clickable) {
+  cursor: default;
+}
+.template-card:not(.template-card--clickable):hover {
+  background: var(--surface);
+  box-shadow: none;
+  transform: none;
+}
+.template-card--clickable:focus-visible {
+  outline: 2px solid var(--accent, #4f9eff);
+  outline-offset: 2px;
+}
+
+.template-default-badge {
+  margin-right: 8px;
+  font-weight: 600;
+}
+
+/*
+ * Top row is just icon + name + (optional) ★ Default. The shared
+ * `.run-card-title { flex: 1 }` rule does the right thing here:
+ * the title soaks up the horizontal space and pushes the Default
+ * badge to the right edge.
+ *
+ * The "ID:slug" handle and the description below it are both
+ * indented to align with the title's left edge (i.e. past the
+ * icon's column). The icon is 16px wide and the .run-card-top
+ * gap is 10px, so 26px of left padding aligns subsequent rows
+ * with the title.
+ */
+.template-card-id-row {
+  display: flex;
+  margin-top: 6px;
+  padding-left: 26px;
+}
+.template-card .run-card-meta {
+  padding-left: 26px;
+}
+
+/*
+ * Buttons pin to the card's bottom so cards of varying heights
+ * (description length, badge presence) line their action rows up
+ * with each other in a tier-section grid. `margin-top: auto` on
+ * the last child of a column-flex container absorbs the extra
+ * vertical space.
+ */
+.template-card .run-card-actions {
+  margin-top: auto;
+}
+
+.template-tier-badge {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.template-card .run-card-stages sl-tag {
+  margin-right: 4px;
+  margin-bottom: 4px;
+}
+
+.pipelines-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 64px 24px;
+  gap: 16px;
+  color: var(--fg-muted);
+}
+
+.pipelines-empty .empty-state-icon {
+  color: var(--fg-muted);
+  opacity: 0.5;
+  margin-bottom: 8px;
+}
+
+.pipelines-empty h2 {
+  margin: 0;
+  color: var(--fg);
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.pipelines-empty p {
+  max-width: 480px;
+  margin: 0 0 16px;
+  line-height: 1.5;
+  color: var(--fg-muted);
+}
+
+.pipelines-empty .empty-state-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.pipelines-empty .empty-state-hint {
+  font-size: 13px;
+  color: var(--fg-muted);
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+}
+
+/* Deep-link card for template-driven settings (W-062 Phase 6) */
+.pipelines-deep-link-card {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-secondary);
+  padding: 16px;
+  margin-bottom: 24px;
+  box-shadow: var(--shadow-sm);
+}
+
+.pipelines-deep-link-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.pipelines-deep-link-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius);
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.pipelines-deep-link-text {
+  flex: 1;
+}
+
+.pipelines-deep-link-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+  margin-bottom: 4px;
+}
+
+.pipelines-deep-link-desc {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.pipelines-deep-link-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fg);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  white-space: nowrap;
+}
+
+.pipelines-deep-link-btn:hover {
+  background: var(--bg);
+  border-color: var(--border-subtle);
+  color: var(--fg-active);
+}
+
+
+/* ─── Pipelines Editor ─────────────────────────────────────────────── */
+
+.pipelines-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: calc(100vh - 120px);
+}
+
+/*
+ * Editor sub-header: lives below the page chrome's "Edit Template" title.
+ * Shows the template name + scope badge on the left, view-mode toggle on
+ * the right. No back button here — the page chrome already provides one.
+ */
+.editor-subheader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.editor-subheader-title-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+ * Inline editable Name + ID + read-only Storage in the editor
+ * subheader. All three share the same gray-pill chassis
+ * (`.editor-field-pill`) so the row reads as a single field group;
+ * size/weight variants live on the per-pill modifier class.
+ *
+ * Name is the widest (flex-grow), ID is mid-width with a monospace
+ * input, Storage is a fixed compact pill showing the tier.
+ */
+.editor-field-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 8px;
+  border-radius: 9999px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle, var(--border));
+  min-width: 0;
+}
+.editor-field-pill-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  flex-shrink: 0;
+}
+
+.editor-name-pill {
+  flex: 1 1 240px;
+  padding-right: 4px;
+}
+.editor-name-input {
+  flex: 1;
+  min-width: 0;
+}
+.editor-name-input::part(form-control-input) {
+  font-weight: 600;
+}
+.editor-name-input::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  min-height: 22px;
+}
+
+.editor-id-badge {
+  flex: 0 1 240px;
+}
+.editor-id-input {
+  flex: 1;
+  min-width: 0;
+}
+.editor-id-input::part(form-control-input) {
+  font-family: var(--sl-font-mono);
+  font-size: 12px;
+  padding: 0 6px;
+}
+.editor-id-input::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  min-height: 22px;
+}
+
+.editor-storage-pill {
+  flex: 0 0 auto;
+  padding: 2px 10px 2px 8px;
+}
+
+/*
+ * Description section sits above the tab group inside the scroll
+ * area — outside any tab so it always shows. Matches the
+ * settings-section header style (h3.settings-section-title +
+ * settings-field + label + textarea) so the editor reads like
+ * the rest of the app.
+ */
+.editor-description-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 16px;
+  margin-bottom: 4px;
+}
+.editor-description-input {
+  width: 100%;
+}
+.editor-description-input::part(textarea) {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--fg);
+}
+.editor-storage-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fg);
+  text-transform: capitalize;
+}
+
+/*
+ * Visual error state on a field pill — used when the ID collides
+ * with an existing template in the same tier. The border turns
+ * warning-amber to match the inline badge that appears next to
+ * the input and the disabled Save button.
+ */
+.editor-field-pill--invalid {
+  border-color: var(--sl-color-warning-600, #d97706);
+}
+.editor-id-collision-badge {
+  flex-shrink: 0;
+}
+
+.editor-subheader-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--fg-muted);
+  transition: var(--transition-fast);
+}
+
+.icon-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--fg);
+}
+
+.editor-mode-toggle {
+  margin-left: auto;
+}
+
+/*
+ * Read-only badge in the editor subheader. Sits next to the tier
+ * badge whenever we're viewing a built-in template; visually warns
+ * the user that nothing they type here will save.
+ */
+.editor-readonly-badge {
+  margin-left: 4px;
+}
+
+/*
+ * Editor content gate: when readOnly, the form controls inside each
+ * tab panel (and the JSON view) become non-interactive — but the
+ * tab nav stays clickable so users can move between Models /
+ * Stages / Agents / etc. to inspect the whole template. We scope
+ * pointer-events:none to the panels (not the whole content) so the
+ * `<sl-tab slot="nav">` items still take clicks.
+ *
+ * `aria-disabled="true"` on the wrapper tells assistive tech the
+ * surface is locked; the per-panel muted opacity signals "look,
+ * don't touch". Inputs visually keep their value so users can still
+ * read and copy from them.
+ *
+ * Cheaper than threading a `disabled` flag through every section
+ * and every input; tradeoff is screen readers won't announce each
+ * control as disabled — only the panel container. Acceptable for a
+ * read-only inspector mode.
+ */
+.editor-content--readonly sl-tab-panel,
+.editor-content--readonly .editor-section--json {
+  pointer-events: none;
+  opacity: 0.7;
+  user-select: text; /* let users still highlight + copy values */
+}
+.editor-content--readonly sl-tab-panel *,
+.editor-content--readonly .editor-section--json * {
+  cursor: default !important;
+}
+
+/*
+ * Editor uses the same .settings-tab-content / .settings-section-title /
+ * .settings-cards primitives as Project Settings — define one supporting
+ * helper here (the lead-in paragraph under a section title) and a few
+ * tab-group tweaks so the editor's tab nav sits naturally inside its
+ * scroll container.
+ */
+.settings-section-desc {
+  margin: -2px 0 14px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.settings-section-desc code {
+  background: var(--bg-secondary);
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.editor-tab-group {
+  --indicator-color: var(--accent, var(--sl-color-primary-600, #4f9eff));
+  /* Keep Shoelace's default track color (subtle border under the tab
+   * row) so the editor matches the Project Settings convention of a
+   * horizontal line between the nav and the panel content. Used to
+   * be `transparent` which suppressed that divider. */
+}
+.editor-tab-group::part(base) {
+  /* Hand the scroll to .editor-content so the tab nav stays sticky. */
+  height: 100%;
+}
+/*
+ * Tab nav style mirrors the project Settings tabs: 13px medium,
+ * 10/16 padding, and a clear gap between the icon and the label
+ * so the icon doesn't visually fuse with the first letter.
+ */
+.editor-tab-group sl-tab::part(base) {
+  font-size: 13px;
+  font-weight: 500;
+  padding: 10px 16px;
+  gap: 6px;
+  display: flex;
+  align-items: center;
+}
+.editor-tab-group sl-tab svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+.editor-tab-group sl-tab-panel::part(base) {
+  padding: 16px 4px 0;
+}
+
+/*
+ * Pipeline tab holds three sections (Stage configuration, Loop
+ * limits, Circuit breaker) on one panel — the same shape as the
+ * Project Settings → Pipeline tab. Each section is its own
+ * `.settings-tab-content` flex column with gap:20px between fields
+ * but no margin above the section heading, so without an explicit
+ * separator they jam right up against each other. Give the three
+ * direct children real vertical breathing room.
+ */
+.editor-pipeline-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.editor-pipeline-tab > .settings-tab-content + .settings-tab-content {
+  /* Visual separator on top of the gap so it reads as a fresh
+   * section rather than a continuation of the previous one. */
+  border-top: 1px solid var(--border-subtle, var(--border));
+  padding-top: 24px;
+}
+
+/*
+ * Shared chrome for the template action dialogs (Create / Duplicate /
+ * Rename / Import). Wraps the Settings-style form primitives so the
+ * dialog body looks like a one-screen mini Settings tab.
+ */
+.template-action-dialog::part(panel) {
+  min-width: min(520px, 100vw - 32px);
+}
+.template-action-dialog .dialog-lead {
+  margin: 0 0 14px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.template-action-dialog .dialog-lead code {
+  background: var(--bg-secondary);
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.template-action-dialog .settings-field {
+  margin-bottom: 14px;
+}
+.template-action-dialog .dialog-error {
+  margin-top: 8px;
+}
+.template-action-dialog .dialog-bundle-list {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+.template-action-dialog .dialog-bundle-list code {
+  font-family: var(--sl-font-mono);
+  color: var(--fg);
+}
+
+.editor-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Editor Sections */
+
+.editor-section {
+  max-width: 900px;
+}
+
+.editor-section--json {
+  max-width: 1000px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--fg);
+}
+
+/* Stages List */
+
+.stages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stage-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: var(--transition-fast);
+}
+
+.stage-row--disabled {
+  opacity: 0.5;
+}
+
+.stage-row-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.stage-name {
+  font-weight: 500;
+  font-family: var(--sl-font-mono);
+}
+
+.stage-row.disabled .stage-name {
+  text-decoration: line-through;
+}
+
+.stage-row-agent {
+  width: 200px;
+}
+
+/* Agents Matrix */
+
+.agents-matrix {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.agent-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.agent-name {
+  flex: 0 0 100px;
+  font-weight: 500;
+  font-family: var(--sl-font-mono);
+}
+
+.agent-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+  flex: 1;
+}
+
+.agent-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Loops Grid */
+
+.loops-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.loop-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Circuit Breaker Grid */
+
+.circuit-breaker-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.cb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cb-field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Governance */
+
+.governance-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* JSON Editor */
+
+.json-editor-wrapper {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px;
+}
+
+.json-editor {
+  font-family: var(--sl-font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  min-height: 300px;
+  resize: vertical;
+}
+
+.json-editor-hint {
+  font-size: 12px;
+  color: var(--fg-muted);
+  margin-top: 8px;
+}
+
+/* Diff view styles */
+.diff-hint {
+  font-size: 13px;
+  color: var(--fg-muted);
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.diff-reset-icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 4px;
+  color: var(--accent);
+}
+
+.diff-no-changes {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--status-completed);
+}
+
+.diff-no-changes svg {
+  margin-bottom: 16px;
+  color: var(--status-completed);
+}
+
+.diff-no-changes h3 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.diff-no-changes p {
+  margin: 0;
+  color: var(--fg-muted);
+}
+
+.diff-empty,
+.diff-loading {
+  padding: 24px;
+  text-align: center;
+  color: var(--fg-muted);
+}
+
+.diff-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.diff-table-container {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.diff-table th {
+  text-align: left;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border-bottom: 2px solid var(--border);
+  font-weight: 600;
+  color: var(--fg);
+  position: sticky;
+  top: 0;
+}
+
+.diff-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+
+.diff-row--changed {
+  background: rgba(251, 191, 36, 0.05);
+}
+
+.diff-row--changed .diff-path {
+  font-weight: 600;
+}
+
+.diff-path code {
+  display: block;
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
+  font-size: 11px;
+  color: var(--fg-muted);
+  margin-bottom: 4px;
+}
+
+.diff-label {
+  display: block;
+  font-size: 12px;
+  color: var(--fg);
+}
+
+.diff-value {
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
+  font-size: 12px;
+  max-width: 300px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.diff-value--builtin {
+  color: var(--fg-muted);
+  background: var(--bg-tertiary);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.diff-value--current {
+  color: var(--fg);
+  background: rgba(59, 130, 246, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.diff-actions {
+  white-space: nowrap;
+}
+
+/* Common field styles */
+
+.field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fg-muted);
+}
+
+.field-hint {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+/* Footer */
+
+.editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+/* Save alert */
+
+.editor-save-alert {
+  margin-bottom: 16px;
+}
+
+.editor-validation-alert {
+  margin-bottom: 16px;
+}
+
+.validation-list {
+  margin: 8px 0 0 16px;
+  padding-left: 20px;
+  font-size: 13px;
+}
+
+.validation-list li {
+  margin-bottom: 4px;
+}
+
+.validation-list code {
+  font-family: var(--sl-font-mono);
+  background: var(--bg-tertiary);
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+/* Loading state */
+
+.editor-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  font-size: 14px;
+  color: var(--fg-muted);
+  gap: 8px;
+}