@tangle-network/brand 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.21.0
+
+### Minor Changes
+
+- 02b2d30: One shell header height and one transcript type scale. Brand adds `--shell-header-height` (56px, utility `h-shell-header`) and `--shell-inset-gutter` so every shell header row shares one bottom divider, and `--transcript-font-size` / `--transcript-line-height` with the `tangle-transcript-text` rule. UI's `AgentTimeline`, `UserMessage` and `ChatMessage` set the person's and the agent's message text with the same `TRANSCRIPT_TEXT` treatment (exported), so they differ only by alignment and surface; an agent message no longer renders at a different leading from the person's. `tangle-drift` gates two new metrics: `header_height_literal` (a header row given its own height) and `transcript_type_override` (product CSS restyling transcript text).
+
 ## 1.20.0
 
 ### Minor Changes

package/bin/drift-baseline.json

@@ -5,7 +5,7 @@
    "src"
   ],
   "branch": "master",
-  "head": "ef34ced49ea3",
+  "head": "88cf5074ea42",
   "tsx_files": 33,
   "css_files": 5,
   "versions": {
@@ -89,7 +89,13 @@
     "src/pages/terms-of-service.astro": 1,
     "src/pages/what-is-tangle.astro": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {
+    "src/components/RunStory.astro": 1,
+    "src/components/quickstart-code.css": 2,
+    "src/pages/index.astro": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 29,
@@ -102,6 +108,8 @@
   "control_override": 0,
   "page_heading": 16,
   "shell_override": 0,
+  "header_height_literal": 4,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -207,7 +215,9 @@
    },
    "shell_override": {
     "products/sandbox/web/src/pages/dashboard/sandbox-session/AgentWorkspace.tsx": 6
-   }
+   },
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 21,
@@ -221,7 +231,9 @@
   "page_heading": 11,
   "shell_override": 6,
   "palette_top": [],
-  "local_primitives": {}
+  "local_primitives": {},
+  "header_height_literal": 0,
+  "transcript_type_override": 0
  },
  "platform": {
   "repo": "tangle-network/agent-dev-container",
@@ -454,7 +466,12 @@
    },
    "shell_override": {
     "products/platform/web/src/client/components/Icons.tsx": 1
-   }
+   },
+   "header_height_literal": {
+    "products/platform/web/src/client/components/NavigationFrame.tsx": 1,
+    "products/platform/web/src/client/vault.css": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 24,
@@ -475,7 +492,9 @@
   "native_control": 444,
   "control_override": 0,
   "page_heading": 37,
-  "shell_override": 1
+  "shell_override": 1,
+  "header_height_literal": 2,
+  "transcript_type_override": 0
  },
  "intelligence": {
   "repo": "tangle-network/agent-dev-container",
@@ -483,7 +502,7 @@
    "products/intelligence/web"
   ],
   "branch": "develop",
-  "head": "d34b2d630a92",
+  "head": "abe2f910be0c",
   "tsx_files": 83,
   "css_files": 1,
   "versions": {
@@ -511,7 +530,7 @@
    "hex": {},
    "arbitrary_color": {},
    "css_var_defs": {
-    "products/intelligence/web/src/globals.css": 10
+    "products/intelligence/web/src/globals.css": 5
    },
    "local_primitive_count": {},
    "font_size_literal": {
@@ -562,12 +581,14 @@
     "products/intelligence/web/src/pages/TraceDetail.tsx": 1,
     "products/intelligence/web/src/pages/spine/runs.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
   "arbitrary_color": 0,
-  "css_var_defs": 10,
+  "css_var_defs": 5,
   "local_primitive_count": 0,
   "font_size_literal": 14,
   "size_literal": 3,
@@ -575,6 +596,8 @@
   "control_override": 0,
   "page_heading": 7,
   "shell_override": 0,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -584,28 +607,28 @@
    ""
   ],
   "branch": "master",
-  "head": "a5956b145068",
-  "tsx_files": 126,
+  "head": "9c6b7a92901d",
+  "tsx_files": 134,
   "css_files": 3,
   "versions": {
    "agent-app": [
-    "0.60.2"
+    "0.60.54"
    ],
    "brand": [
-    "1.19.3"
+    "1.20.0"
    ],
    "sandbox-ui": [
-    "0.131.5"
+    "0.132.1"
    ],
    "ui": [
-    "11.30.2"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 3,
-   "ui": 7,
-   "sandbox-ui": 108,
-   "agent-app": 207
+   "ui": 9,
+   "sandbox-ui": 113,
+   "agent-app": 232
   },
   "by_file": {
    "raw_palette": {},
@@ -642,9 +665,15 @@
    },
    "shell_override": {
     "src/components/vault-chat-rail.tsx": 2,
-    "src/components/workspace-chat-surface.tsx": 1,
     "src/routes/app.workspace.vault.tsx": 2
-   }
+   },
+   "header_height_literal": {
+    "src/components/publishing/publish-header.tsx": 1,
+    "src/components/vault-chat-rail.tsx": 1,
+    "src/routes/app.workspace.designs.$documentId.tsx": 1,
+    "src/routes/app.workspace.sequences.$sequenceId.tsx": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -656,7 +685,9 @@
   "native_control": 0,
   "control_override": 4,
   "page_heading": 18,
-  "shell_override": 5,
+  "shell_override": 4,
+  "header_height_literal": 4,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -666,40 +697,40 @@
    "apps/web"
   ],
   "branch": "main",
-  "head": "53b2f8ca550e",
-  "tsx_files": 57,
+  "head": "54448faf7404",
+  "tsx_files": 58,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.58.20"
+    "0.60.19"
    ],
    "brand": [
-    "1.19.4"
+    "1.20.0"
    ],
    "override:agent-app": [
-    "0.58.20"
+    "0.60.19"
    ],
    "override:brand": [
-    "1.19.4"
+    "1.20.0"
    ],
    "override:sandbox-ui": [
-    "0.130.1"
+    "0.132.1"
    ],
    "override:ui": [
-    "11.30.2"
+    "11.31.2"
    ],
    "sandbox-ui": [
-    "0.130.1"
+    "0.132.1"
    ],
    "ui": [
-    "11.30.2"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 1,
-   "ui": 2,
+   "ui": 3,
    "sandbox-ui": 38,
-   "agent-app": 100
+   "agent-app": 105
   },
   "by_file": {
    "raw_palette": {},
@@ -721,7 +752,12 @@
     "apps/web/src/routes/app.$sessionId.tsx": 1,
     "apps/web/src/routes/app.billing.tsx": 2
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {
+    "apps/web/src/components/legal-page.tsx": 1,
+    "apps/web/src/routes/app.$sessionId.tsx": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -734,6 +770,8 @@
   "control_override": 3,
   "page_heading": 6,
   "shell_override": 0,
+  "header_height_literal": 2,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -743,28 +781,28 @@
    ""
   ],
   "branch": "main",
-  "head": "5e68b59dd0da",
+  "head": "075784fc5bc6",
   "tsx_files": 63,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.58.20"
+    "0.60.33"
    ],
    "brand": [
-    "1.19.4"
+    "1.20.0"
    ],
    "sandbox-ui": [
-    "0.130.1"
+    "0.132.1"
    ],
    "ui": [
-    "11.30.2"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 2,
    "ui": 33,
    "sandbox-ui": 25,
-   "agent-app": 120
+   "agent-app": 125
   },
   "by_file": {
    "raw_palette": {},
@@ -787,7 +825,9 @@
     "src/routes/app.workspace.contracts.redline.tsx": 1,
     "src/routes/app.workspace.templates.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -800,6 +840,8 @@
   "control_override": 0,
   "page_heading": 6,
   "shell_override": 0,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -809,18 +851,18 @@
    ""
   ],
   "branch": "main",
-  "head": "08130078bedc",
+  "head": "5ce0764e4f58",
   "tsx_files": 38,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.58.20"
+    "0.60.16"
    ],
    "brand": [
     "1.19.4"
    ],
    "sandbox-ui": [
-    "0.130.1"
+    "0.132.1"
    ],
    "ui": [
     "11.30.2"
@@ -830,7 +872,7 @@
    "brand": 1,
    "ui": 1,
    "sandbox-ui": 27,
-   "agent-app": 65
+   "agent-app": 66
   },
   "by_file": {
    "raw_palette": {
@@ -877,7 +919,9 @@
     "src/routes/_index.tsx": 1,
     "src/routes/app.workspace.chat.$threadId.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 72,
   "hex": 148,
@@ -890,6 +934,8 @@
   "control_override": 0,
   "page_heading": 3,
   "shell_override": 0,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [
    [
     "text-amber-600",
@@ -924,28 +970,28 @@
    ""
   ],
   "branch": "master",
-  "head": "8e5e3fff35e3",
-  "tsx_files": 54,
+  "head": "f0e2134d4499",
+  "tsx_files": 52,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.58.20"
+    "0.60.33"
    ],
    "brand": [
-    "1.19.4"
+    "1.20.0"
    ],
    "sandbox-ui": [
-    "0.130.0"
+    "0.132.1"
    ],
    "ui": [
-    "11.30.2"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 1,
    "ui": 2,
    "sandbox-ui": 36,
-   "agent-app": 128
+   "agent-app": 131
   },
   "by_file": {
    "raw_palette": {},
@@ -969,7 +1015,12 @@
     "src/routes/app.workspace.tsx": 1,
     "src/routes/invite.$token.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {
+    "src/routes/app.workspace.designs.$documentId.tsx": 1,
+    "src/routes/app.workspace.sequences.$sequenceId.tsx": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -982,6 +1033,8 @@
   "control_override": 0,
   "page_heading": 4,
   "shell_override": 0,
+  "header_height_literal": 2,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -991,38 +1044,37 @@
    "apps/web"
   ],
   "branch": "main",
-  "head": "2f94ff829aa1",
-  "tsx_files": 17,
+  "head": "ee37d9941628",
+  "tsx_files": 18,
   "css_files": 8,
   "versions": {
    "agent-app": [
-    "0.57.17",
-    "0.58.15"
+    "0.60.19"
    ],
    "brand": [
-    "1.17.0"
+    "1.20.0"
    ],
    "override:brand": [
-    "1.17.0"
+    "1.20.0"
    ],
    "override:sandbox-ui": [
-    "0.128.2"
+    "0.132.1"
    ],
    "override:ui": [
-    "11.26.0"
+    "11.31.2"
    ],
    "sandbox-ui": [
-    "0.128.2"
+    "0.132.1"
    ],
    "ui": [
-    "11.26.0"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 1,
    "ui": 8,
    "sandbox-ui": 6,
-   "agent-app": 6
+   "agent-app": 7
   },
   "by_file": {
    "raw_palette": {},
@@ -1062,10 +1114,17 @@
    },
    "control_override": {},
    "page_heading": {
-    "apps/web/src/ApiKeysPanel.tsx": 1,
     "apps/web/src/assembly/AssemblyBooklet.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {
+    "apps/web/src/styles.css": 1,
+    "apps/web/src/styles/canvas-nodes.css": 1,
+    "apps/web/src/styles/provenance.css": 1
+   },
+   "transcript_type_override": {
+    "apps/web/src/styles.css": 1
+   }
   },
   "raw_palette": 0,
   "hex": 0,
@@ -1076,8 +1135,10 @@
   "size_literal": 0,
   "native_control": 52,
   "control_override": 0,
-  "page_heading": 2,
+  "page_heading": 1,
   "shell_override": 0,
+  "header_height_literal": 3,
+  "transcript_type_override": 1,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1087,28 +1148,28 @@
    ""
   ],
   "branch": "main",
-  "head": "4239a87dcba3",
+  "head": "d9f4270af41c",
   "tsx_files": 29,
   "css_files": 14,
   "versions": {
    "agent-app": [
-    "0.58.20"
+    "0.60.23"
    ],
    "brand": [
-    "1.19.5"
+    "1.20.0"
    ],
    "sandbox-ui": [
-    "0.130.0"
+    "0.132.1"
    ],
    "ui": [
-    "11.30.2"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 0,
    "ui": 3,
    "sandbox-ui": 26,
-   "agent-app": 52
+   "agent-app": 54
   },
   "by_file": {
    "raw_palette": {},
@@ -1134,7 +1195,15 @@
     "src/web/WorkspaceAppsView.tsx": 3,
     "src/web/WorkspaceFilesView.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {
+    "src/ui/operator-dashboard.css": 2,
+    "src/web/workspace-files-view.css": 1,
+    "src/web/workspace.css": 5
+   },
+   "transcript_type_override": {
+    "src/web/workspace.css": 1
+   }
   },
   "raw_palette": 0,
   "hex": 0,
@@ -1147,6 +1216,8 @@
   "control_override": 0,
   "page_heading": 12,
   "shell_override": 0,
+  "header_height_literal": 8,
+  "transcript_type_override": 1,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1232,7 +1303,9 @@
    },
    "shell_override": {
     "packages/website/src/components/RedteamDashboardLayout.tsx": 4
-   }
+   },
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -1245,6 +1318,8 @@
   "control_override": 12,
   "page_heading": 10,
   "shell_override": 4,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1325,7 +1400,9 @@
    },
    "shell_override": {
     "src/components/layout/app-layout.tsx": 4
-   }
+   },
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -1338,6 +1415,8 @@
   "control_override": 10,
   "page_heading": 1,
   "shell_override": 4,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1347,40 +1426,40 @@
    ""
   ],
   "branch": "main",
-  "head": "b9a4f52dc41f",
+  "head": "97f77723ac9f",
   "tsx_files": 110,
   "css_files": 2,
   "versions": {
    "agent-app": [
-    "0.59.6"
+    "0.60.23"
    ],
    "brand": [
-    "1.19.5"
+    "1.20.0"
    ],
    "override:agent-app": [
-    "0.59.6"
+    "0.60.23"
    ],
    "override:brand": [
-    "1.19.5"
+    "1.20.0"
    ],
    "override:sandbox-ui": [
-    "0.131.5"
+    "0.132.1"
    ],
    "override:ui": [
-    "11.30.2"
+    "11.31.2"
    ],
    "sandbox-ui": [
-    "0.131.5"
+    "0.132.1"
    ],
    "ui": [
-    "11.30.2"
+    "11.31.2"
    ]
   },
   "importing_files": {
    "brand": 2,
    "ui": 3,
-   "sandbox-ui": 78,
-   "agent-app": 60
+   "sandbox-ui": 77,
+   "agent-app": 67
   },
   "by_file": {
    "raw_palette": {},
@@ -1416,7 +1495,11 @@
     "src/routes/login.tsx": 1,
     "src/routes/pay.$token.tsx": 1
    },
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {
+    "src/styles/listing.css": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -1429,6 +1512,8 @@
   "control_override": 1,
   "page_heading": 12,
   "shell_override": 0,
+  "header_height_literal": 1,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1438,7 +1523,7 @@
    "apps/web"
   ],
   "branch": "develop",
-  "head": "1ac4236f87c8",
+  "head": "978ff883f4f5",
   "tsx_files": 356,
   "css_files": 9,
   "versions": {
@@ -1703,7 +1788,11 @@
    },
    "shell_override": {
     "apps/web/src/components/header/Header.tsx": 2
-   }
+   },
+   "header_height_literal": {
+    "apps/web/src/components/@settings/tabs/connections/NetlifyConnection.tsx": 1
+   },
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
@@ -1716,6 +1805,8 @@
   "control_override": 18,
   "page_heading": 30,
   "shell_override": 2,
+  "header_height_literal": 1,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1725,15 +1816,21 @@
    "public"
   ],
   "branch": "main",
-  "head": "30e0cd52710f",
-  "tsx_files": 16,
-  "css_files": 5,
+  "head": "34483f7ae430",
+  "tsx_files": 1,
+  "css_files": 0,
   "versions": {
    "agent-app": [
-    "0.51.12"
+    "0.60.30"
    ],
    "brand": [
-    "1.15.1"
+    "1.20.0"
+   ],
+   "sandbox-ui": [
+    "0.132.2"
+   ],
+   "ui": [
+    "11.31.3"
    ]
   },
   "importing_files": {
@@ -1746,34 +1843,30 @@
    "raw_palette": {},
    "hex": {},
    "arbitrary_color": {},
-   "css_var_defs": {
-    "public/design-components.css": 8,
-    "public/style.css": 1
-   },
+   "css_var_defs": {},
    "local_primitive_count": {},
-   "font_size_literal": {
-    "public/design-components.css": 4,
-    "public/invite.css": 4,
-    "public/style.css": 386,
-    "public/timeline.css": 33
-   },
+   "font_size_literal": {},
    "size_literal": {},
    "native_control": {},
    "control_override": {},
    "page_heading": {},
-   "shell_override": {}
+   "shell_override": {},
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
   "arbitrary_color": 0,
-  "css_var_defs": 9,
+  "css_var_defs": 0,
   "local_primitive_count": 0,
-  "font_size_literal": 427,
+  "font_size_literal": 0,
   "size_literal": 0,
   "native_control": 0,
   "control_override": 0,
   "page_heading": 0,
   "shell_override": 0,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  }

package/bin/tangle-drift.mjs

@@ -78,11 +78,52 @@ export const PATTERNS = {
   // that moves the shell's controls or flattens its surface.
   shell_override: String.raw`md3-surface-dim|\bPanel(?:Right|Left)(?:Open|Close)?\b|\b(?:collapsedControlsPlacement|centerHeaderVisibility)\b|\bsurface=["'{]+flat\b`,
 };
+
+// Header-like: an element named `header`, or a class/id ending in one of the words below. It must be
+// the selector's last compound (pseudo-classes and attributes aside), so `.top-header .avatar`
+// and `.top-header-avatar` size something inside a header, not the header row.
+// A `-bar` row counts too (`.files-bar`), but not a progress, scroll, side or meter bar.
+const HEADER_WORD = String.raw`(?:header|head|topbar|toolbar|titlebar|appbar|navbar|(?<![\w-]*(?:progress|scroll|side|meter|loading|track|fill|status)-?)bar)`;
+const HEADER_COMPOUND = String.raw`(?:[\w#.:-]*[.#-]${HEADER_WORD}|(?<![\w.#-])header)(?![\w-])(?::{1,2}[\w-]+(?:\([^)]*\))?|\[[^\]]*\])*`;
+const LITERAL_HEIGHT_UTILITY = String.raw`(?<![\w-])(?:h|min-h|max-h)-(?:[0-9]|\[(?!var\())`;
+
+/**
+ * Metrics that span lines, so they read whole files rather than `git grep` lines. Each is a set
+ * of JavaScript patterns run over a file's text; `prefilter` selects candidate files with
+ * `git grep -l` and the same pathspecs, so the excluded paths match the line metrics.
+ */
+export const RULE_PATTERNS = {
+  // A header row given its own height. The shell owns one header height
+  // (`--shell-header-height`, `ShellHeader`); content fills the row and never sets it, so the
+  // main pane's divider lands on the sidebar's. Token references (`var(--shell-header-height)`)
+  // and non-length values (`auto`, `100%`) are not counted.
+  header_height_literal: {
+    prefilter: String.raw`height|\bh-`,
+    patterns: [
+      // CSS: `.x-header { min-height: 66px }`, `.page header { height: 4rem }`, across lines.
+      String.raw`(?<=^|[\s{},;>+~])${HEADER_COMPOUND}\s*(?:,[^{};]*)?\{[^{}]*?(?<![\w-])(?:min-|max-)?height\s*:\s*[0-9.]+(?:px|rem|em)\b`,
+      // JSX: `<header className="h-16">`, or any element whose class names a header row and a height.
+      String.raw`<header\b[^>]*?\bclassName=\{?["'\x60][^"'\x60]*?${LITERAL_HEIGHT_UTILITY}`,
+      String.raw`(?<!<header\b[^>]*)\bclassName=\{?["'\x60](?=[^"'\x60]*(?<![\w-])[\w-]*${HEADER_WORD}(?![\w-]))[^"'\x60]*?${LITERAL_HEIGHT_UTILITY}`,
+    ],
+  },
+  // Product CSS restyling transcript text. Brand's `tangle-transcript-text` gives the person's and
+  // the agent's messages one family, size and leading; an app rule on `.tangle-prose` or a
+  // timeline step re-splits them (an agent message at 16px beside a 15px user message).
+  transcript_type_override: {
+    prefilter: String.raw`tangle-prose|tangle-transcript-text|data-timeline-step|transcript`,
+    patterns: [
+      String.raw`(?:tangle-prose|tangle-transcript-text|data-timeline-step|transcript)[^{};]*\{[^{}]*?(?<![\w-])(?:font-size|line-height|font-family|font)\s*:`,
+      String.raw`\bclassName=\{?["'\x60](?=[^"'\x60]*\btangle-(?:prose|transcript-text)\b)[^"'\x60]*?(?<![\w-])(?:text-(?:xs|sm|base|lg|xl|\[)|leading-|font-(?:sans|serif|mono))`,
+    ],
+  },
+};
+
 const LOCAL_PRIM_NAME = new RegExp(String.raw`(?:function|const)\s+(${PRIMS})\b`);
 const SHARED = ["@tangle-network/brand", "@tangle-network/ui", "@tangle-network/sandbox-ui", "@tangle-network/agent-app"];
 
 /** The counts the gate ratchets. Everything else in a row is informational. */
-export const GATED = Object.keys(PATTERNS);
+export const GATED = [...Object.keys(PATTERNS), ...Object.keys(RULE_PATTERNS)];
 
 function extensions(surface, metric) {
   const extra = SURFACES[surface]?.extraExt ?? [];
@@ -98,6 +139,8 @@ function extensions(surface, metric) {
     case "control_override": return ["*.tsx", "*.jsx"];
     case "page_heading": return ["*.tsx", "*.jsx", "*.astro"];
     case "shell_override": return ["*.tsx", "*.jsx", "*.css", ...extra];
+    case "header_height_literal": return ["*.tsx", "*.jsx", "*.astro", "*.css", "*.vue", "*.svelte"];
+    case "transcript_type_override": return ["*.tsx", "*.jsx", "*.css"];
     case "imports": return ["*.tsx", "*.ts", "*.astro", "*.jsx"];
     default: return SRC_EXT;
   }
@@ -144,6 +187,30 @@ export function grepMatches(source, roots, pattern, exts) {
   return rows;
 }
 
+/** Every match of a multi-line metric: [{ path, line, match }], `line` being where the match starts. */
+export function ruleMatches(source, roots, metric, exts) {
+  const { prefilter, patterns } = RULE_PATTERNS[metric];
+  const args = ["grep", "-I", "-P", "-l", "--null", "-e", prefilter];
+  if (source.rev) args.push(source.rev);
+  else args.push("--untracked");
+  args.push("--", ...pathspecs(roots, exts), ...EXCLUDE);
+  const prefix = source.rev ? `${source.rev}:` : "";
+  const files = git(source.dir, args, { allowExit1: true }).split("\0").filter(Boolean)
+    .map((f) => (f.startsWith(prefix) ? f.slice(prefix.length) : f).trim()).filter(Boolean);
+  const rows = [];
+  for (const path of files) {
+    const text = readFile(source, path);
+    const found = new Map();
+    for (const pattern of patterns) {
+      for (const m of text.matchAll(new RegExp(pattern, "g"))) found.set(m.index, m[0]);
+    }
+    for (const [index, match] of [...found].sort(([a], [b]) => a - b)) {
+      rows.push({ path, line: text.slice(0, index).split("\n").length, match });
+    }
+  }
+  return rows.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : a.line - b.line));
+}
+
 /** Full text of matching lines in the named files, for failure reports. */
 function grepLines(source, pattern, files) {
   const args = ["grep", "-I", "-P", "-n", "--null", "-e", pattern];
@@ -224,7 +291,9 @@ export function measure(surface, source) {
   }
   row.by_file = {};
   for (const metric of GATED) {
-    const hits = grepMatches(source, roots, PATTERNS[metric], extensions(surface, metric));
+    const hits = RULE_PATTERNS[metric]
+      ? ruleMatches(source, roots, metric, extensions(surface, metric))
+      : grepMatches(source, roots, PATTERNS[metric], extensions(surface, metric));
     matches[metric] = hits;
     row[metric] = hits.length;
     row.by_file[metric] = sortedObject(countBy(hits.map((h) => h.path)));
@@ -442,7 +511,7 @@ export function main(argv = process.argv.slice(2), log = (s) => process.stdout.w
   }
 
   let failed = false;
-  for (const [surface, { row, source }] of Object.entries(measured)) {
+  for (const [surface, { row, source, matches }] of Object.entries(measured)) {
     const base = baseline[surface];
     log(describe(surface, row));
     if (!base) {
@@ -462,7 +531,10 @@ export function main(argv = process.argv.slice(2), log = (s) => process.stdout.w
         .sort((x, y) => y.now - x.now).slice(0, 10);
       log(files.length ? "  files above their baseline count:" : "  no single file rose (moved or renamed?); largest files:");
       for (const f of shown.slice(0, 10)) log(`    ${f.path}: ${f.base} -> ${f.now}`);
-      const lines = grepLines(source, PATTERNS[metric], shown.slice(0, 10).map((f) => f.path));
+      const shownPaths = shown.slice(0, 10).map((f) => f.path);
+      const lines = RULE_PATTERNS[metric]
+        ? matches[metric].filter((m) => shownPaths.includes(m.path)).map((m) => ({ path: m.path, line: m.line, text: m.match.replace(/\s+/g, " ") }))
+        : grepLines(source, PATTERNS[metric], shownPaths);
       for (const l of lines.slice(0, opts.top)) log(`    ${l.path}:${l.line}: ${l.text.slice(0, 160)}`);
       if (lines.length > opts.top) log(`    ... ${lines.length - opts.top} more lines`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/styles/globals.css

@@ -176,6 +176,16 @@
   /* Long URLs, emails and identifiers wrap inside the column. */
   overflow-wrap: break-word;
 }
+/* Transcript text: the one size and leading for every chat message body, the
+ * person's and the agent's alike, so the two differ only by alignment and
+ * surface. The doubled selector outranks .tangle-prose on an agent message;
+ * product CSS does not restyle either (tangle-drift transcript_type_override). */
+.tangle-transcript-text,
+.tangle-prose.tangle-transcript-text {
+  font-family: inherit;
+  font-size: var(--transcript-font-size);
+  line-height: var(--transcript-line-height);
+}
 .tangle-prose > * + * { margin-top: 0.85em; }
 .tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
   font-weight: 600;

package/src/styles/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: 524da3dda08c6fb6130bde802f96d6b961561a900caa939c1eea43ec4495b48d
+ * SHA-256: e280d0675dc36f1bd1c79e163d7b50c18a5dd2cb3a58f3138cddc85b02514b6b
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -297,6 +297,10 @@
     --font-size-help: 0.75rem;
     --panel-padding: 1rem;
     --content-max-width: 80rem;
+    --shell-header-height: 3.5rem;
+    --shell-inset-gutter: 0.5rem;
+    --transcript-font-size: var(--font-size-base);
+    --transcript-line-height: var(--line-height-base);
     --font-size-xs: 0.6875rem;
     --font-size-sm: 0.75rem;
     --font-size-base: 0.9375rem;
@@ -787,6 +791,7 @@
     --spacing-control-sm: var(--control-height-sm);
     --spacing-control-md: var(--control-height);
     --spacing-control-lg: var(--control-height-lg);
+    --spacing-shell-header: var(--shell-header-height);
     --color-scrim: var(--scrim);
     --color-scrim-strong: var(--scrim-strong);
     --color-on-media: var(--on-media);

package/src/styles/named-themes.css

@@ -27,6 +27,7 @@
   --spacing-control-sm: var(--control-height-sm);
   --spacing-control-md: var(--control-height);
   --spacing-control-lg: var(--control-height-lg);
+  --spacing-shell-header: var(--shell-header-height);
   --color-scrim: var(--scrim);
   --color-scrim-strong: var(--scrim-strong);
   --color-on-media: var(--on-media);

package/src/styles/theme.css

@@ -77,6 +77,7 @@
   --spacing-control-sm: var(--control-height-sm);
   --spacing-control-md: var(--control-height);
   --spacing-control-lg: var(--control-height-lg);
+  --spacing-shell-header: var(--shell-header-height);
 
   --color-scrim: var(--scrim);
   --color-scrim-strong: var(--scrim-strong);

package/src/styles/tokens.css

@@ -455,6 +455,17 @@
   --font-size-help: 0.75rem;      /* 12px */
   --panel-padding: 1rem;
   --content-max-width: 80rem;
+  /* Shell: every header row in the app shell (sidebar rail, main pane, side
+     panels, drawers, the assistant) is this tall, so their bottom dividers
+     share one y. Header content fills the row; it never sets the height.
+     An inset pane sits one gutter plus its 1px border below the shell top, so
+     its header is shorter by exactly that amount (see ShellHeader). */
+  --shell-header-height: 3.5rem;  /* 56px */
+  --shell-inset-gutter: 0.5rem;   /* 8px */
+  /* Transcript: the person's and the agent's messages share one family, size
+     and leading; they differ only by alignment and surface. */
+  --transcript-font-size: var(--font-size-base);
+  --transcript-line-height: var(--line-height-base);
 
   /* Typography scale — override per-app for custom type hierarchy.
      Components reference these instead of hardcoded pixel values. */