aimeat 1.40.1 → 2.1.0

package/dist/public/cortex-bundled/aimeat-ui-motion.yaml

@@ -0,0 +1,86 @@
+apiVersion: cortex.aimeat.org/v1
+kind: Extension
+metadata:
+  name: aimeat-ui-motion
+  namespace: aimeat
+  description: "UX polish primitives every dashboard re-implements: animated count-up numbers, KPI stat-tile rows with sparklines, skeleton shimmer loaders, staggered list entrances, view transitions, and tasteful micro-bling (pulse, glow, confetti tick, row highlight). All transform/opacity (60fps), theme-aware, prefers-reduced-motion safe."
+  author: AIMEAT
+  tags: [motion, animation, dashboard, kpi, skeleton, transitions, ui]
+  labels:
+    domain: ui
+
+spec:
+  version: "1.0.0"
+  license: MIT
+  components:
+    - type: prompt
+      name: motion-assistant
+      content: |
+        You are a UI-motion assistant for an AIMEAT app. The user's node is at {{node_url}}.
+
+        The aimeat-ui-motion extension gives an app a smooth, alive "operator console" feel
+        without hand-rolled animation code. Everything is transform/opacity only (60fps) and
+        the whole pack honors prefers-reduced-motion (final states render instantly).
+
+        Include ONE tag:
+        <script src="{{node_url}}/v1/cortex/aimeat-ui-motion/libs/aimeat-ui-motion.js"></script>
+
+        API (var M = AIMEAT.ui.motion):
+
+        M.countUp(el, value, { duration?, format?, decimals? })
+          Animated number roll — use font-variant-numeric: tabular-nums on the element.
+
+        M.statTiles(el, [{ label, value, icon?, trend?: { value, dir: 'up'|'down'|'flat' },
+                           spark?: number[], format?, decimals? }]) -> { update(tiles), destroy() }
+          Responsive KPI tile row: count-up values, trend badges, inline SVG sparklines.
+
+        M.skeleton(el, { lines?, avatar?, height? }) / M.unskeleton(el, html?)
+          Shimmer loading placeholders. ALWAYS prefer skeletons over spinners: call skeleton()
+          before the fetch, unskeleton(el, html) with the rendered markup after.
+
+        M.staggerIn(listEl, { selector?, delay?, max? })
+          Staggered fade-slide entrance for table rows / cards — call right after rendering.
+
+        await M.viewTransition(container, () => renderNextView())
+          Cross-fade/slide between views (native View Transitions API when available). Wrap
+          your router's view swap in this.
+
+        M.pulse(el) -> stop()        gentle looping attention pulse ("needs you")
+        M.glow(el, color?)           one-off glow ring (e.g. newly created item)
+        M.highlightRow(el)           brief background flash for an SSE-updated row
+        M.confettiTick(el)           small success burst — ONE per user action, never per row
+
+        Recipes:
+        - Dashboard mount: skeleton() each panel → fetch → unskeleton + staggerIn; statTiles
+          for the KPI row.
+        - Live updates (aimeat-live): on a domain tick, re-fetch, patch the changed row and
+          highlightRow(row) instead of re-rendering the whole table.
+        - Keep bling tasteful: motion supports comprehension (what changed, what needs me);
+          it never decorates every element.
+      variables:
+        - "{{node_url}}"
+
+    - type: lib
+      name: aimeat-ui-motion
+      filename: aimeat-ui-motion.js
+      exports:
+        - countUp
+        - statTiles
+        - skeleton
+        - unskeleton
+        - staggerIn
+        - viewTransition
+        - pulse
+        - glow
+        - highlightRow
+        - confettiTick
+      api_surface: |
+        AIMEAT.ui.motion.countUp(el, value, { duration?, format?, decimals? })
+        AIMEAT.ui.motion.statTiles(el, tiles[]) -> { update(tiles), destroy() }
+        AIMEAT.ui.motion.skeleton(el, { lines?, avatar?, height? }) / unskeleton(el, html?)
+        AIMEAT.ui.motion.staggerIn(listEl, { selector?, delay?, max? })
+        AIMEAT.ui.motion.viewTransition(container, renderFn) -> Promise
+        AIMEAT.ui.motion.pulse(el) -> stop(); glow(el, color?); highlightRow(el); confettiTick(el)
+
+        All transform/opacity, theme via --card/--text/--border/--accent/--bg-dim,
+        prefers-reduced-motion renders final states with no motion. Zero dependencies.

package/dist/public/css/components/contact-picker.css

@@ -0,0 +1,26 @@
+/**
+ * @file public/css/components/contact-picker.css
+ * @description Shared ContactPicker component — input + suggestion dropdown (contacts, directory
+ *   hits, email-resolve action). Theme-variable driven; loaded globally from spa.html.
+ * @version-history
+ *   v1.0.0 — 2026-07-16 — Initial.
+ */
+.cp-root { position: relative; display: inline-block; min-width: 240px; }
+.cp-input { width: 100%; }
+.cp-drop {
+  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 60;
+  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); overflow: hidden; max-height: 280px; overflow-y: auto;
+}
+.cp-item {
+  display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
+  padding: 0.4rem 0.6rem; border: 0; background: transparent; cursor: pointer;
+  font-size: 0.83rem; color: var(--text);
+}
+.cp-item:hover, .cp-item-hi { background: var(--bg-dim); }
+.cp-item-icon { flex: 0 0 auto; }
+.cp-item-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cp-item-id { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
+.cp-item-src { color: var(--muted); font-size: 0.7rem; border: 1px solid var(--border); border-radius: 999px; padding: 0 0.35rem; }
+.cp-item-resolve { border-top: 1px solid var(--border); color: var(--accent); }
+.cp-item-miss { cursor: default; color: var(--muted); font-size: 0.76rem; border-top: 1px solid var(--border); }

package/dist/public/css/theme.css

@@ -10,6 +10,21 @@
    @usage Loaded first in spa.html <head>; the theme is toggled by /js/theme.js
      which flips the data-theme attribute on <html>.
    @version-history
+     v1.24.0 — 2026-07-21 — App-shell scroll model: html/body no longer scroll (height:100%;
+       overflow:hidden); #app is a full-viewport (100dvh) flex column with the topnav as a fixed-height
+       row and .page-content as the sole overflow-y:auto scroll region. Removes the ~nav-height phantom
+       overscroll and stops view content sliding under the (formerly sticky, now in-frame) header. Coupled
+       offset fixes: .pf-sidebar/.adm-sidebar stick to top:0 of the region and cap at 100dvh−nav-height.
+     v1.23.1 — 2026-07-20 — Mobile: pin .notif-dropdown to fixed viewport insets under 560px (the
+       320px, right:0-anchored panel ran off the LEFT edge — the bell sits mid-right of the bar — and
+       got clipped by body{overflow-x:hidden}); long notif titles/bodies wrap (overflow-wrap:anywhere).
+     v1.23.0 — 2026-07-18 — Notification bell inline actions: split .notif-item into a clickable
+       .notif-item-main + an actions row; add .notif-actions/.notif-action-btn/.notif-reply*/.notif-result.
+     v1.22.0 — 2026-07-17 — UI-unification foundation: extend the spacing scale (--sp-5=20/--sp-6=24/
+       --sp-8=32/--sp-12=48) and add a font-size scale (--text-xs..--text-xl) so views stop hardcoding
+       padding:24px / font-size:0.85rem inline; add .muted/.text-dim/.text-faint/.meta text utilities
+       (there was no muted/meta utility class, so ~8 views invented .xx-muted and ~30 invented .xx-*-meta).
+       Additive only — no existing rule changed, so appearance is preserved until views adopt them.
      v1.21.0 — 2026-07-06 — Toast variants + mobile width: add --toast-info-bg/--toast-warn-bg tokens +
        .toast-info/.toast-warn classes (call sites pass 'info'/'warning' kinds; they previously fell into the
        truthy-isError red path). .toast width fit-content → max-content: anchored at left:50%, fit-content
@@ -209,6 +224,20 @@
   --sp-2: 8px;
   --sp-3: 12px;
   --sp-4: 16px;
+  --sp-5: 20px;
+  --sp-6: 24px;
+  --sp-8: 32px;
+  --sp-12: 48px;
+
+  /* ── Font-size scale (theme-invariant) ──
+     A shared type scale so views stop hardcoding font-size:0.7rem / 0.85rem /
+     1.1rem inline. Adopt in new code; the raw rem values below are the common
+     ones already scattered across the view CSS, so migration is a clean swap. */
+  --text-xs: 0.72rem;
+  --text-sm: 0.82rem;
+  --text-base: 0.92rem;
+  --text-lg: 1.1rem;
+  --text-xl: 1.35rem;
 }
 
 /* ── Dark Theme Override ──
@@ -286,15 +315,22 @@
 }
 
 /* ── Base ── */
-html { scroll-behavior: smooth; }
+html { scroll-behavior: smooth; height: 100%; }
 
 body {
   font-family: var(--font);
   background: var(--bg);
   color: var(--text);
   line-height: 1.6;
-  min-height: 100vh;
-  overflow-x: hidden;
+  height: 100%;
+  margin: 0; /* zero the UA default 8px — with the fixed app-shell frame it would push #app past the viewport */
+  /* App-shell: the page (html/body) never scrolls. The topnav is a fixed-height
+     flex row and .page-content owns the ONLY scroll region (see #app +
+     .page-content). This is what stops view content sliding under the header and
+     removes the ~nav-height phantom overscroll that body-scroll + an in-flow
+     (sticky) header produced — the content fills the space below the header and
+     scrolls within it. overflow:hidden also subsumes the old overflow-x clip. */
+  overflow: hidden;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -381,14 +417,28 @@ a { color: inherit; text-decoration: none; }
 #app {
   position: relative;
   z-index: 1;
+  /* App-shell frame: a full-viewport flex column — topnav (fixed height) on top,
+     .page-content (the scroll region) filling the rest. dvh keeps the frame flush
+     with the visual viewport as mobile browser chrome shows/hides. */
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
 }
 
 /* ── Top Navigation ── */
 .topnav {
-  position: sticky;
-  top: 0;
+  /* App-shell: a fixed-height flex row inside #app (no longer sticky — #app
+     itself doesn't scroll, so the header stays put for free). z-index keeps the
+     header's own dropdowns (notifications, mobile menu) above .page-content. */
+  position: relative;
   z-index: 100;
+  flex: 0 0 auto;
   height: var(--nav-height);
+  /* border-box so the 1px border-bottom is INCLUDED in --nav-height — otherwise the
+     header renders 1px taller than the token and every `100dvh - var(--nav-height)`
+     scroll region (sidebars) is 1px too tall and can't stay pinned. */
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -460,14 +510,42 @@ a { color: inherit; text-decoration: none; }
 .notif-bell-btn:hover { background: var(--bg-dim); }
 .notif-badge { position: absolute; top: -1px; right: -1px; background: var(--accent); color: #fff; border-radius: 10px; font-size: 0.6rem; font-weight: 700; min-width: 15px; height: 15px; padding: 0 3px; display: flex; align-items: center; justify-content: center; }
 .notif-dropdown { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); z-index: 1200; }
-.notif-dropdown-head { font-weight: 700; font-size: 0.9rem; color: var(--text); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; background: var(--card); }
+.notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--text); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; background: var(--card); z-index: 1; }
+.notif-clear-all { font-weight: 600; font-size: 0.78rem; color: var(--muted); background: none; border: none; padding: 0.15rem 0.35rem; border-radius: 6px; cursor: pointer; }
+.notif-clear-all:hover:not(:disabled) { color: var(--brand); background: var(--bg-dim); }
+.notif-clear-all:disabled { opacity: 0.6; cursor: default; }
 .notif-empty { padding: 1rem 0.85rem; color: var(--muted); font-size: 0.85rem; }
-.notif-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border-subtle); padding: 0.55rem 0.85rem; cursor: pointer; }
-.notif-item:hover { background: var(--bg-dim); }
+.notif-item { display: block; border-bottom: 1px solid var(--border-subtle); }
 .notif-item.unread { background: var(--accent-subtle); }
+.notif-item-main { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.55rem 0.85rem; cursor: pointer; }
+.notif-item-main:hover { background: var(--bg-dim); }
 .notif-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
 .notif-item-body { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
 .notif-item-time { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
+/* Inline notification actions (reply / approve / deny …) */
+.notif-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.85rem 0.55rem; }
+.notif-action-btn { font-size: 0.74rem; padding: 0.25rem 0.7rem; border-radius: 7px; line-height: 1.3; }
+.notif-reply { padding: 0 0.85rem 0.6rem; }
+.notif-reply-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 0.8rem; padding: 0.4rem 0.5rem; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-dim); color: var(--text); }
+.notif-reply-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
+.notif-result { font-size: 0.76rem; padding: 0.3rem 0.85rem 0.55rem; }
+.notif-result.ok { color: var(--success, #4caf50); }
+.notif-result.err { color: var(--danger, #e0564a); }
+/* Long sender GHIIs / subjects wrap instead of forcing the panel wider than the screen. */
+.notif-item-title, .notif-item-body { overflow-wrap: anywhere; }
+/* Mobile: the 320px-wide, right:0-anchored dropdown runs off the LEFT edge (the bell sits
+   mid-right of the bar) and gets clipped by body{overflow-x:hidden}. Pin it to fixed viewport
+   insets so it spans the screen width minus small margins, regardless of the bell's position. */
+@media (max-width: 560px) {
+  .notif-dropdown {
+    position: fixed;
+    top: calc(var(--nav-height, 56px) + 4px);
+    right: 8px;
+    left: 8px;
+    width: auto;
+    max-height: 72vh;
+  }
+}
 
 .topnav-right a {
   font-size: 0.84rem;
@@ -806,6 +884,9 @@ a { color: inherit; text-decoration: none; }
 .stat-card-value.accent  { color: var(--accent); }
 .stat-card-value.success { color: var(--success-fg); }
 .stat-card-value.danger  { color: var(--danger-fg); }
+.stat-card-value.warn    { color: var(--warn); }
+.stat-card-value.purple  { color: var(--purple); }
+.stat-card-value.blue    { color: var(--blue); }
 .stat-card-value.mono    { font-family: var(--font-mono, monospace); }
 /* Shared responsive stat grid wrapper. */
 .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 32px; }
@@ -1184,6 +1265,22 @@ select.input-field { cursor: pointer; }
 }
 /* Optional icon for the canonical EmptyState component (#9). */
 .empty-icon { display: block; font-size: 2.5rem; opacity: 0.4; margin-bottom: 0.5rem; font-style: normal; }
+/* Richer EmptyState slots (#9 v1.1): bold title, body line, and an action row.
+   Lets the pkv title+desc, pwv icon+action gates, and mk/hb icon+text triads
+   fold into the one component. Body keeps the base .empty italic; title/action
+   are normal weight/style. */
+.empty-title { font-style: normal; font-weight: 600; font-size: var(--text-base); color: var(--text); margin-bottom: 0.25rem; }
+.empty-text { margin: 0 auto; max-width: 32rem; }
+.empty-action { margin-top: 0.85rem; font-style: normal; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
+
+/* ── Muted / meta text utilities ──
+   Shared replacements for the ~8 bespoke `.xx-muted` and ~30 `.xx-*-meta`
+   clones scattered across the view CSS. Colors are tokens so they flip in dark
+   mode. `.muted`/`.text-dim` dim to the mid tier; `.text-faint` to the dimmest;
+   `.meta` is the small dim caption used under cards/rows. */
+.muted, .text-dim { color: var(--text-dim); }
+.text-faint { color: var(--text-muted); }
+.meta { font-size: var(--text-sm); color: var(--text-dim); }
 
 /* ── Toggle Switch (canonical /components/ToggleSwitch.js, #14) ── */
 .toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
@@ -1227,7 +1324,10 @@ select.input-field { cursor: pointer; }
 }
 
 /* ── Page entrance ── */
-.page-content { animation: pageIn 0.8s ease; }
+/* App-shell scroll region: fills the space under the topnav and owns the only
+   scroll. min-height:0 lets the flex child shrink so overflow-y actually scrolls;
+   overflow-x:hidden replaces the clip that used to live on body. */
+.page-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; animation: pageIn 0.8s ease; }
 
 /* ── Responsive ── */
 @media (max-width: 480px) {

package/dist/public/css/views/admin.css

@@ -4,6 +4,10 @@
  *   its distinct indigo accent and a permanently-dark sidebar, but all content
  *   surfaces map to global theme.css tokens so they flip with dark/light mode.
  * @version-history
+ *   v1.10.0 — 2026-07-21 — App-shell scroll model (theme.css v1.24.0): .adm-sidebar height 100vh →
+ *     calc(100dvh − nav-height) so the sticky sidebar fills the .page-content scroll region instead of
+ *     overflowing the frame by the header's height.
+ *   v1.9.0 — 2026-07-16 — Drop the dead .adm-nav-item .icon rule (nav is label-only now).
  *   v1.8.0 — 2026-06-25 — Applications tab: .adm-apps-rowactions (Hide/Restore + Delete row).
  *   v1.7.0 — 2026-06-24 — Applications moderation tab: .adm-apps-* (filters row,
  *     hidden-only toggle, dimmed hidden rows, modal actions).
@@ -52,9 +56,13 @@
   border-right: none;
   padding: 16px 0;
   flex-shrink: 0;
+  /* App-shell: sticks to the top of the .page-content scroll region; height caps
+     at that region (viewport minus the fixed header) so the sidebar's own nav
+     scrolls instead of overflowing past the frame by the header's height. */
   position: sticky;
   top: 0;
-  height: 100vh;
+  height: calc(100dvh - var(--nav-height, 56px));
+  box-sizing: border-box; /* fold the 16px vertical padding into the height so it fits the scroll region */
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -102,7 +110,6 @@
   border-left-color: var(--accent);
   font-weight: 500;
 }
-.adm-nav-item .icon { font-size: .81rem; width: 16px; text-align: center; }
 .adm-nav-item .label { flex: 1; }
 .adm-nav-item .cnt {
   background: rgba(255,255,255,0.08);
@@ -176,6 +183,17 @@
 .adm-stat.red    { color: var(--danger); }
 .adm-stat-label { color: var(--text-muted); font-size: .69rem; margin-top: 2px; }
 
+/* Storage/Database tab — per-table growth deltas + the counts table. */
+.adm-delta-up   { color: var(--success); }
+.adm-delta-down { color: var(--danger); }
+.adm-delta-zero { color: var(--text-muted); }
+.adm-db-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
+.adm-db-table th, .adm-db-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.adm-db-table th { color: var(--text-muted); font-weight: 600; }
+.adm-db-table td.num, .adm-db-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
+.adm-db-bar { height: 6px; border-radius: 3px; background: var(--blue); min-width: 2px; }
+.adm-db-bar-track { background: var(--bg-dim); border-radius: 3px; width: 100%; }
+
 /* Badges */
 .adm-badge {
   display: inline-block;
@@ -192,6 +210,13 @@
 .adm-badge--info    { background: var(--info-bg); color: var(--info-fg); }
 .adm-badge--accent  { background: var(--purple-bg); color: var(--purple-fg); }
 .adm-badge--muted   { background: var(--bg-surface); color: var(--text-dim); }
+/* Single-dash aliases — the <Badge> component emits adm-badge-${type}, so these
+   semantic tones need the single-dash form too (were undefined → badges rendered
+   with no background in cortex/capabilities/federation tabs). neutral = muted. */
+.adm-badge-success { background: var(--success-bg); color: var(--success-fg); }
+.adm-badge-warning { background: var(--warn-bg); color: var(--warn-fg); }
+.adm-badge-muted,
+.adm-badge-neutral { background: var(--bg-surface); color: var(--text-dim); }
 
 /* Badge name aliases → semantic colors */
 .adm-badge-healthy,
@@ -588,6 +613,25 @@
   background: var(--danger); color: #fff; border-color: transparent;
 }
 .adm-btn-danger-solid:hover { background: var(--danger); filter: brightness(0.92); }
+/* Info / ghost button modifiers (combine with .adm-btn-sm like -danger/-success). */
+.adm-btn-info { color: var(--info-fg); border-color: var(--info-border); }
+.adm-btn-info:hover { background: var(--info-bg); }
+.adm-btn-ghost { color: var(--text-dim); border-color: var(--border); }
+.adm-btn-ghost:hover { background: var(--bg-surface); }
+
+/* Previously-undefined classes used by cortex/database/skills/feedback tabs
+   (they rendered unstyled). Defined to the admin design language — no markup
+   change needed. */
+.adm-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
+.adm-meta-row { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--text-dim); font-size: 0.85rem; margin: 0.5rem 0; }
+.adm-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
+.adm-row { padding: 0.35rem 0; border-bottom: 1px solid var(--border-subtle); }
+.adm-row:last-child { border-bottom: none; }
+.adm-table-wrap { overflow-x: auto; }
+.adm-link { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
+.adm-link:hover { text-decoration: underline; }
+.adm-desc, .adm-help-text { color: var(--text-dim); font-size: 0.85rem; }
+.adm-muted { color: var(--text-dim); }
 
 /* Subtabs row */
 .adm-subtabs { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
@@ -790,3 +834,16 @@
 .adm-skills-detail { margin-top: 0.5rem; }
 .adm-skills-frontmatter { background: var(--bg-dim); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.6rem; font-size: 0.74rem; color: var(--muted); white-space: pre-wrap; margin-bottom: 0.5rem; }
 .adm-skills-body-md { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.86rem; max-height: 32rem; overflow: auto; }
+
+/* ── Feedback tab (Node Feedback Channel operator inbox) ── */
+.adm-fb-filters { display: flex; gap: 0.5rem; margin: 0.75rem 0; flex-wrap: wrap; }
+.adm-fb-row { cursor: pointer; }
+.adm-fb-row:hover td { background: var(--bg-dim); }
+.adm-fb-thread-head { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; flex-wrap: wrap; }
+.adm-fb-status { margin-left: auto; }
+.adm-fb-msg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 0.6rem 0.8rem; margin-top: 0.5rem; white-space: pre-wrap; font-size: 0.88rem; }
+.adm-fb-msg-operator { background: var(--bg-dim); margin-left: 2rem; }
+.adm-fb-msg-sender { margin-right: 2rem; }
+.adm-fb-context { font-size: 0.76rem; color: var(--muted); margin-top: 0.4rem; }
+.adm-fb-replybox { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
+.adm-fb-replybox textarea { width: 100%; resize: vertical; }

package/dist/public/css/views/agents-detail.css

@@ -4,6 +4,16 @@
  *   Uses agd- prefix to avoid collisions with other profile styles.
  *   All colors use CSS variables from theme.css.
  * @version-history
+ *   v1.20.0 -- 2026-07-17 -- Generalize the card scheme: .pf-agd-card (standalone or
+ *     grid child) + .pf-agd-card-grid/--full replace the integration-only
+ *     .pf-agd-prod-grid; quality section titles drop the stacked-layout margin-top.
+ *   v1.19.0 -- 2026-07-17 -- Integration production view: .pf-agd-prod-grid two-column
+ *     card grid (+ --full spans); .pf-agd-info-row becomes a fixed 150px-label grid so
+ *     values and status dots align in one column.
+ *   v1.18.0 -- 2026-07-17 -- Style unification round: pf-agd-section-label matches
+ *     pf-agd-section-title (0.8rem); governance grid items stack label-over-value;
+ *     "Next:" inside the zone-2 banner title is no longer uppercased; the "+ Add tag"
+ *     chip is neutral (dim) until hover.
  *   v1.17.0 -- 2026-07-12 -- Add agent ID-card styles (.pf-agd-idcard*) — a hover/focus-revealed
  *     identity plate over each Shared Board mini-card (labelled GAII, issued date, last seen,
  *     task/message tallies, trust + morsels, issuer node). Absolutely positioned so reveal
@@ -161,6 +171,12 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
+/* When used as a standalone group heading (outside .pf-agd-section-header),
+   e.g. the Schedules tab's AIMEAT-dispatched / Agent-internal groups. */
+.pf .sch-section > .pf-agd-section-title {
+  display: block;
+  margin: 0.25rem 0 0.5rem;
+}
 
 /* Task list items */
 .pf .agd-task-item ,
@@ -1772,6 +1788,11 @@
   background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
   color: var(--blue, #3B82F6);
 }
+.pf .pf-agd-badge--model {
+  background: transparent;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+}
 .pf .pf-agd-badge--readiness-expert { background: var(--accent-subtle, rgba(16, 185, 129, 0.1)); color: var(--success, #10b981); }
 .pf .pf-agd-badge--readiness-full { background: var(--accent-subtle, rgba(16, 185, 129, 0.1)); color: var(--success, #10b981); }
 .pf .pf-agd-badge--readiness-standard { background: var(--accent-subtle, rgba(59, 130, 246, 0.1)); color: var(--blue, #3B82F6); }
@@ -1858,12 +1879,12 @@
   font-weight: 500;
   border-radius: 9999px;
   background: none;
-  color: var(--accent, #E8564A);
+  color: var(--text-dim, #6B7280);
   border: 1px dashed var(--border, #E5E7EB);
   cursor: pointer;
   white-space: nowrap;
 }
-.pf .pf-agd-tag-add-btn:hover { border-color: var(--accent, #E8564A); }
+.pf .pf-agd-tag-add-btn:hover { border-color: var(--accent, #E8564A); color: var(--accent, #E8564A); }
 .pf .pf-agd-tag-add-input {
   padding: 0.15rem 0.5rem;
   font-size: 0.75rem;
@@ -2089,6 +2110,13 @@
   color: var(--text-dim, #6B7280);
   line-height: 1.4;
 }
+/* "Next: <step>" nested inside the uppercase banner title reads as normal text,
+   not as a second shouting headline. */
+.pf .pf-agd-zone2-title .pf-agd-zone2-desc {
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 500;
+}
 .pf .pf-agd-zone2-actions {
   display: flex;
   gap: 0.5rem;
@@ -2449,30 +2477,61 @@
 .pf .pf-agd-section {
   margin-bottom: 1.25rem;
 }
+
+/* Card scheme shared by every agent-detail tab: content groups become bordered
+   cards (.pf-agd-card) and a tab that pairs short groups side by side wraps
+   them in .pf-agd-card-grid (responsive two-column; --full spans both). This
+   replaces the "one long ragged column with a dead right half" layout. */
+.pf .pf-agd-card {
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 10px;
+  padding: 0.85rem 1rem;
+  background: var(--card, #FFFFFF);
+  min-width: 0;
+}
+.pf .pf-agd-card + .pf-agd-card { margin-top: 0.85rem; }
+.pf .pf-agd-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 0.85rem;
+  align-items: stretch;
+}
+.pf .pf-agd-card-grid > .pf-agd-card {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.pf .pf-agd-card-grid > .pf-agd-card--full {
+  grid-column: 1 / -1;
+}
+/* Same visual as .pf-agd-section-title — kept as a separate name only because the
+   Integration tab wraps its sections differently. Keep the two in sync. */
 .pf .pf-agd-section-label {
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--text-dim, #6B7280);
   margin-bottom: 0.5rem;
 }
+/* Fixed label column so values (and their status dots) line up in ONE column
+   across every row of a section — ragged flex rows read as disarray. */
 .pf .pf-agd-info-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  column-gap: 0.75rem;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.3rem 0;
+  padding: 0.28rem 0;
   font-size: 0.82rem;
 }
 .pf .pf-agd-info-label {
   font-weight: 500;
-  min-width: 120px;
   color: var(--text-dim);
-  flex-shrink: 0;
+  min-width: 0;
 }
 .pf .pf-agd-info-value {
   color: var(--text);
-  word-break: break-all;
+  overflow-wrap: anywhere;
+  min-width: 0;
 }
 
 /* ── Delivery log table ── */
@@ -3215,16 +3274,19 @@
 .pf .agd-governance-grid ,
 .pf .pf-agd-governance-grid  {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px 16px;
   margin-bottom: 8px;
 }
 
+/* Label stacked above its value (stat-tile style) — side-by-side rows made the
+   long values ("Completed: 0, Active: 0, Failed: 0") collide with the labels. */
 .pf .agd-governance-item ,
 .pf .pf-agd-governance-item  {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
   padding: 4px 0;
 }
 
@@ -3333,8 +3395,10 @@
   line-height: 1.45;
 }
 
+/* Section titles sit at the top of their own card now — card padding + grid gap
+   provide the separation the old stacked layout needed a margin-top for. */
 .pf .pf-agd-quality .pf-agd-section-title {
-  margin-top: 1.25rem;
+  margin-top: 0;
 }
 
 /* Duration-by-context chips under the performance cards */

package/dist/public/css/views/app-grant.css

@@ -4,6 +4,7 @@
  *   screen where an owner reviews a published app's requested scopes (H-2 Phase 3).
  * @version-history
  *   v1.0.0 — 2026-06-20 — Initial (H-2 app-origin isolation, Phase 3).
+ *   v1.1.0 — 2026-07-19 — Own-app badge variant + "new" chip for newly requested scopes.
  */
 
 .agr-wrap { max-width: 540px; margin: 3rem auto; padding: 0 1.25rem; }
@@ -64,6 +65,23 @@
   padding: 0.18rem 0.6rem;
   margin-bottom: 0.6rem;
 }
+/* The signed-in owner's OWN app — reassuring, not warning */
+.agr-badge-own { color: var(--success, #3dbf6e); }
+
+/* Chip on a scope the app requests but the existing grant doesn't hold yet */
+.agr-scope-newbadge {
+  display: inline-block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  padding: 0 0.4rem;
+  margin-left: 0.45rem;
+  vertical-align: 0.08em;
+}
 
 /* Advanced toggle (link-style button) */
 .agr-advanced-toggle {

package/dist/public/css/views/capabilities.css

@@ -186,6 +186,8 @@
   font-weight: 500;
 }
 
+.cap-delete-btn { margin-top: 8px; }
+
 .cap-create-section {
   margin-top: 20px;
 }

package/dist/public/css/views/companies.css

@@ -19,7 +19,6 @@
 
 .cm-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
 .cm-col-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0 0 0.75rem; }
-.cm-empty { color: var(--text-muted); font-style: italic; margin: 0.5rem 0 1rem; }
 .cm-mini { color: var(--text-muted); font-size: 0.78rem; }
 .cm-form-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0.5rem 0 0.5rem; }