clay-server 5.1.0-beta.1 → 5.1.0-beta.3

package/lib/public/clay-studio-wordmark-bold.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4742 1156" role="img" aria-label="Clay Studio">
+  <title>Clay Studio</title>
+  <style>
+    g { fill: #171717; }
+    @media (prefers-color-scheme: dark) { g { fill: #f2f2ef; } }
+  </style>
+  <metadata>Source Serif 4 v4.005, weight 700, optical size 60, tracking -0.01em, word gap 0.18em. Converted to outlines from Adobe Source Serif 4 release 4.005R.</metadata>
+  <g transform="translate(53.619 820.549) scale(1 -1)">
+    <path d="M346.54 -16Q285.787 -16 230.018 4.606Q174.248 25.213 130.354 67.319Q86.46 109.425 61.421 174.071Q36.381 238.717 36.381 327.505Q36.381 417.416 62.775 482.624Q89.168 547.832 133.916 589.938Q178.664 632.044 234.079 652.651Q289.495 673.257 346.832 673.257Q389.619 673.257 431.495 664.049Q473.372 654.841 509.292 632.628L520 472.673H498.336L418.098 646.044L477.549 626.425L481.549 604.673Q450.044 629.009 417.022 638.155Q384 647.301 356.495 647.301Q311.362 647.301 271.835 613.757Q232.309 580.213 208.326 509.752Q184.344 439.292 184.344 326.921Q184.344 215.257 207.534 145.297Q230.724 75.336 269.813 42.646Q308.902 9.956 355.619 9.956Q385.079 9.956 418.5 19.664Q451.921 29.372 482.717 52.876L479.885 30.832L421.142 11.505L500.381 193.664H522.336L511.628 23.505Q477.124 4 433.978 -6Q390.832 -16 346.54 -16Z" transform="translate(0 0)"/>
+    <path d="M24.381 0V21.664L109.054 36.495H182.566L264.115 21.664V0ZM74.558 0Q77.266 25.832 78.12 62.062Q78.974 98.292 79.474 137.022Q79.974 175.752 79.974 209.168V648.682L20.381 664.974V683.222L203.15 730.549L216.813 719.717L212.813 521.231V209.168Q212.813 175.752 213.313 137.022Q213.813 98.292 214.813 62.062Q215.813 25.832 218.229 0Z" transform="translate(556 0)"/>
+    <path d="M147.505 -14.832Q94.965 -14.832 61.673 15.438Q28.381 45.708 28.381 100Q28.381 134.372 45.044 163.265Q61.708 192.159 100.141 216.783Q138.575 241.407 203.823 260.699Q221.654 266.407 246.256 273.115Q270.858 279.823 298.358 286.969Q325.858 294.115 350.946 300.699V279.035Q312.689 267.575 281.481 258.283Q250.273 248.991 234.858 241.575Q209.848 229.946 191.764 214.84Q173.68 199.734 163.786 179.256Q153.893 158.778 153.893 130.451Q153.893 90.283 171.853 71.783Q189.813 53.283 216.858 53.283Q232.486 53.283 245.469 57.575Q258.451 61.867 273.372 72.473Q288.292 83.079 308.381 101.752L316.381 62.336H286.381Q266.089 33.628 244.651 16.69Q223.213 -0.248 199.421 -7.54Q175.628 -14.832 147.505 -14.832ZM379.619 -13.664Q331.708 -13.664 306.898 7.836Q282.089 29.336 277.549 64.381V67.797V316.495Q277.549 365.495 270.881 392.933Q264.213 420.372 248.106 432.018Q232 443.664 202.832 443.664Q188.079 443.664 173.619 439.872Q159.159 436.079 146.946 430.495L176.362 456.575L169.397 385.07Q167.521 338.168 146.61 320.443Q125.699 302.717 101.619 302.717Q78.956 302.717 65.292 314.133Q51.628 325.549 45.381 348.921Q50.717 403.584 104.443 438.04Q158.168 472.495 245.53 472.495Q303.566 472.495 340.145 453.872Q376.724 435.248 393.702 396.354Q410.68 357.46 410.68 296.089V72.381Q410.68 56.956 416.702 49.703Q422.724 42.451 432.477 42.451Q442.645 42.451 450.229 47.389Q457.813 52.327 467.981 64.911L482.229 54.079Q470.105 23 443.964 4.668Q417.823 -13.664 379.619 -13.664Z" transform="translate(832 0)"/>
+    <path d="M88.858 -245.549Q71.026 -245.549 51.778 -239.987Q32.53 -234.425 17.283 -221.531Q2.035 -208.638 -4.381 -186.85Q-1.673 -163.479 15.367 -149.023Q32.407 -134.568 58.486 -134.568Q79.734 -134.568 99.605 -144.961Q119.477 -155.355 141.972 -183.346L161.724 -205.593L147.061 -219.505L130.309 -212.054Q149.521 -199.885 164.212 -182.943Q178.902 -166 193.008 -139.181Q207.115 -112.362 222.575 -72.566L258.654 26.505L261.07 34.044L349.813 281.397L412.362 457.664H443.902L248.991 -76.813Q229.946 -129.778 206.924 -167.597Q183.902 -205.416 155.318 -225.482Q126.734 -245.549 88.858 -245.549ZM238.451 -49.893 38.336 457.664H181.76L305.645 113.893L269.318 25.708ZM6.832 436V457.664H264.096V436.292L178.255 421.168H80.381ZM333.778 436.292V457.664H482.946V436L421.778 425.168H412.61Z" transform="translate(1283 0)"/>
+    <path d="M220.248 -16Q170.079 -16 124.579 -2.062Q79.079 11.876 38.584 36L46.584 190.832H68.248L128.362 12L81.53 41.664L78.699 54.832Q104.159 37.832 125.035 27.686Q145.911 17.54 167.579 13.748Q189.248 9.956 214.584 9.956Q249.381 9.956 278.071 24.602Q306.762 39.248 323.784 66.938Q340.806 94.628 340.806 134.47Q340.806 169.222 324.868 193.244Q308.93 217.266 282.554 235.912Q256.177 254.558 225.301 270.266L195.673 285.85Q159.089 305.558 125.213 330.474Q91.336 355.39 69.544 392.306Q47.752 429.222 47.752 483.93Q47.752 538.39 73.19 581.076Q98.628 623.762 147.876 648.509Q197.124 673.257 266.699 673.257Q314.575 673.257 354.407 659.695Q394.238 646.133 421.53 625.257L417.53 475.593H395.867L333.46 648.381L385.416 628.381L386.584 600.965Q357.54 626.054 331.473 636.677Q305.407 647.301 272.362 647.301Q238.194 647.301 211.296 633.593Q184.397 619.885 168.437 593.987Q152.477 568.089 152.477 531.956Q152.477 498.203 168.769 473.827Q185.061 449.451 212.145 431.159Q239.229 412.867 270.105 396.159L299.442 380.575Q338.026 360.159 372.756 335.597Q407.486 311.035 429.924 274.827Q452.362 238.619 452.362 181.911Q452.362 126.035 428.424 81.057Q404.486 36.079 353.446 10.04Q302.407 -16 220.248 -16Z" transform="translate(1953 0)"/>
+    <path d="M142.946 428V457.664H309.981V428ZM201.283 -14.832Q140.124 -14.832 105.752 15.978Q71.381 46.787 71.381 110.946Q71.381 142.486 71.027 167.048Q70.673 191.61 71.381 230.566L73.381 428H13.664V449.664L102.717 467.664L69.549 445.664L163.442 609.664H209.512L205.512 445.664V436V110.451Q205.512 74.991 220.866 60.969Q236.22 46.946 258.68 46.946Q278.68 46.946 292.14 54.03Q305.601 61.115 318.185 75.699L332.724 64.575Q321.309 39.203 303.915 21.456Q286.521 3.708 261.296 -5.562Q236.07 -14.832 201.283 -14.832Z" transform="translate(2427 0)"/>
+    <path d="M195.301 -14.832Q136.177 -14.832 101.846 22.562Q67.514 59.956 68.222 148.115L72.47 422.628L101.257 394.044L18.336 410.921V432L192.813 472.495L206.477 463.079L202.477 330V133.549Q202.477 89.787 218.083 74.367Q233.689 58.946 263.238 58.946Q279.451 58.946 297.495 65.676Q315.54 72.407 334.23 87.283Q352.921 102.159 370.133 125.867L372.47 84.381H359.974Q340.974 53.717 315.952 31.195Q290.93 8.673 260.908 -3.079Q230.885 -14.832 195.301 -14.832ZM351.39 -12.832V81.505V83.797V400.168L296.089 410.921V432L474.566 472.495L488.229 463.079L484.229 330V30.664L534.946 21.664V0Z" transform="translate(2753 0)"/>
+    <path d="M205.885 -14.832Q154.762 -14.832 116.239 11.376Q77.717 37.584 55.903 89.146Q34.089 140.708 34.089 215.292Q34.089 295 58.819 352.624Q83.549 410.248 126.487 441.372Q169.425 472.495 224.257 472.495Q251.965 472.495 275.341 461.725Q298.717 450.956 318.739 428.124Q338.762 405.292 354.638 367.752H367.222L354.558 350.54Q331.009 379.673 313.19 392.217Q295.372 404.762 267.115 404.762Q241.734 404.762 220.437 386.863Q199.14 368.965 186.45 328.982Q173.76 289 173.76 222.832Q173.76 159.372 185.45 122.035Q197.14 84.699 218.437 68.654Q239.734 52.61 267.115 52.61Q293.248 52.61 314.275 70.115Q335.301 87.619 353.39 113.752L360.098 92.54H350.638Q336.346 59.584 315.054 35.522Q293.762 11.46 266.824 -1.686Q239.885 -14.832 205.885 -14.832ZM337.39 -12.832V75.797V80.213V378.832L338.806 389.664V648.682L280.089 664.974V683.222L460.566 730.549L474.229 719.717L470.229 514.514V29.956L521.53 21.664V0Z" transform="translate(3299 0)"/>
+    <path d="M24.381 0V21.664L109.054 36.495H182.566L264.115 21.664V0ZM74.558 0Q77.266 25.832 78.12 62.062Q78.974 98.292 79.474 137.123Q79.974 175.954 79.974 209.446V239.28Q79.974 286.338 79.828 318.946Q79.682 351.554 77.682 385.46L20.381 401.752V420L203.15 472.495L216.813 461.693L212.813 330V209.493Q212.813 175.987 213.313 137.14Q213.813 98.292 214.813 62.062Q215.813 25.832 218.229 0ZM145.664 547.762Q116.975 547.762 96.324 566.548Q75.673 585.334 75.673 616.521Q75.673 646.708 96.324 665.664Q116.975 684.619 145.664 684.619Q175.352 684.619 195.503 665.617Q215.654 646.616 215.654 616.644Q215.654 585.673 195.503 566.717Q175.352 547.762 145.664 547.762Z" transform="translate(3833 0)"/>
+    <path d="M264.451 -14.832Q191.752 -14.832 140.151 15.562Q88.549 45.956 61.319 100.579Q34.089 155.203 34.089 228.248Q34.089 301.292 63.443 356.208Q92.797 411.124 144.752 441.81Q196.708 472.495 264.451 472.495Q337.858 472.495 389.105 442.102Q440.353 411.708 467.583 357.23Q494.813 302.752 494.813 229.416Q494.813 157.372 464.751 101.956Q434.689 46.54 382.734 15.854Q330.778 -14.832 264.451 -14.832ZM264.451 11.124Q292 11.124 311.381 31.314Q330.762 51.505 341.098 99.089Q351.434 146.673 351.434 229.416Q351.434 312.867 341.098 360.013Q330.762 407.159 311.381 426.849Q292 446.54 264.451 446.54Q236.902 446.54 217.375 426.349Q197.848 406.159 187.512 358.575Q177.175 310.991 177.175 228.248Q177.175 145.797 187.512 98.151Q197.848 50.505 217.375 30.814Q236.902 11.124 264.451 11.124Z" transform="translate(4104 0)"/>
+  </g>
+</svg>

package/lib/public/css/clay-workspace.css

@@ -0,0 +1,105 @@
+/* The fixed Clay entry keeps its original artwork and resting face. */
+.icon-strip-brand {
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.icon-strip-brand:hover::before {
+  background: var(--bg-alt);
+  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.08);
+}
+.icon-strip-brand.active::before {
+  background: color-mix(in srgb, var(--brand-indigo) 12%, var(--bg));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-indigo) 34%, transparent), 0 2px 5px color-mix(in srgb, var(--brand-indigo) 16%, transparent);
+}
+.icon-strip-brand:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -3px;
+  border-radius: 14px;
+}
+.icon-strip-brand:disabled { cursor: default; }
+
+/* Mate colors adapt to the theme; Clay always uses the pale mint default. */
+body.mate-workspace-active {
+  --clay-surround: var(--mate-surround-dark, color-mix(in srgb, var(--brand-green) 2%, #232322));
+  --clay-face: #2b2b29;
+  --clay-well: #1c1c1a;
+  --clay-edge: #41413d;
+  --clay-blue-ink: var(--brand-blue);
+  --clay-blue-edge: color-mix(in srgb, var(--brand-blue) 38%, var(--clay-edge));
+  --clay-highlight: rgba(255, 255, 255, 0.05);
+  --clay-contact: rgba(var(--shadow-rgb), 0.16);
+}
+:root.light-theme body.mate-workspace-active {
+  --clay-surround: var(--mate-surround-light, color-mix(in srgb, var(--brand-green) 3%, var(--brand-paper)));
+  --clay-face: #fafaf8;
+  --clay-well: #e7e7e2;
+  --clay-edge: #d4d4ce;
+  --clay-blue-ink: color-mix(in srgb, var(--brand-blue) 48%, var(--brand-ink));
+  --clay-highlight: rgba(255, 255, 255, 0.5);
+  --clay-contact: rgba(var(--shadow-rgb), 0.07);
+}
+
+body.mate-workspace-active #main-area,
+body.mate-workspace-active #main-column {
+  background: var(--clay-surround);
+}
+body.mate-workspace-active #main-area {
+  border-color: transparent;
+  border-top-left-radius: 12px;
+  box-shadow: inset 0 1px 0 var(--clay-highlight);
+}
+body.mate-workspace-active #sidebar-column,
+body.mate-workspace-active .title-bar-content {
+  --sidebar-bg: var(--clay-surround);
+  --sidebar-hover: color-mix(in srgb, var(--text) 4%, var(--clay-surround));
+  --text-muted: color-mix(in srgb, var(--text) 76%, var(--clay-surround));
+  --text-dimmer: color-mix(in srgb, var(--text) 68%, var(--clay-surround));
+  background: var(--clay-surround);
+}
+body.mate-workspace-active .title-bar-sidebar,
+body.mate-workspace-active .title-bar-content {
+  border-bottom-color: transparent;
+}
+body.mate-workspace-active .title-bar-mate-avatar {
+  border-color: var(--clay-blue-edge);
+  box-shadow: 0 1px 2px var(--clay-contact);
+}
+body.mate-workspace-active #sidebar-column .palette-tile:not(:hover):not(.active) > .lucide {
+  background: var(--clay-face);
+  box-shadow: 0 1px 2px var(--clay-contact), inset 0 0 0 1px var(--clay-edge), inset 0 1px 0 var(--clay-highlight);
+}
+body.mate-workspace-active #sidebar-column .palette-tile:hover > .lucide {
+  color: var(--clay-blue-ink);
+  box-shadow: 0 2px 4px var(--clay-contact), inset 0 0 0 1px var(--clay-blue-edge);
+}
+body.mate-workspace-active #sidebar-column .session-item.active {
+  color: var(--clay-blue-ink);
+  background: color-mix(in srgb, var(--brand-blue) 10%, var(--clay-face));
+  box-shadow: inset 0 0 0 1px var(--clay-blue-edge), 0 1px 2px var(--clay-contact);
+}
+
+/* The six-pixel edge is the only added space. Header, session rows, prose,
+   toolbar targets and composer padding keep their production proportions. */
+body.mate-workspace-active #main-panels {
+  margin: 0 6px 6px 0;
+  border-radius: 12px;
+  background: var(--bg);
+  box-shadow: 0 0 0 1px var(--clay-edge), 0 2px 3px var(--clay-contact);
+}
+/* Split iframes already sit inside the shared conversation surface. */
+body.mate-workspace-active.pane-mode #main-area {
+  border-radius: 0;
+  box-shadow: none;
+}
+body.mate-workspace-active.pane-mode #main-panels {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+@media (max-width: 768px) {
+  body.mate-workspace-active:not(.pane-mode) #main-panels {
+    margin: 0 4px 4px;
+    border-radius: 10px;
+  }
+}

package/lib/public/css/debates-workbench.css

@@ -0,0 +1,47 @@
+@media (min-width: 1024px) {
+  #debates-workbench { width: 46%; max-width: 720px; min-width: 380px; height: calc(100% - 16px); min-height: 0; align-self: center; margin: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
+  #debates-workbench.hidden { display: none; }
+  #debates-workbench.debates-workbench-wide { width: 68%; max-width: 1120px; }
+  #debates-workbench.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
+}
+@media (max-width: 1023px) {
+  #debates-workbench { position: fixed; inset: 0; z-index: 300; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
+  #debates-workbench.hidden { display: none; }
+  #debates-workbench [data-debates-action="wide"], #debates-workbench [data-debates-action="fullscreen"] { display: none; }
+}
+.debates-workbench-topbar { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
+.debates-workbench-title { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; color: var(--text); font-weight: 700; }
+.debates-workbench-title .lucide { width: 15px; color: var(--accent); }
+.debates-workbench-actions { display: flex; align-items: center; gap: 5px; }
+.debates-workbench-icon, .debates-workbench-new, .debates-workbench-filter { box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text-secondary); font: inherit; cursor: pointer; }
+.debates-workbench-icon { width: 30px; display: inline-flex; align-items: center; justify-content: center; }
+.debates-workbench-icon .lucide { width: 14px; }
+.debates-workbench-icon, .debates-workbench-new { height: 30px; }
+.debates-workbench-new { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-color: var(--accent); background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
+.debates-workbench-new .lucide { width: 14px; }
+.debates-workbench-filters { display: flex; gap: 5px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; }
+.debates-workbench-filter { height: 26px; padding: 0 9px; font-size: 11px; }
+.debates-workbench-filter[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
+.debates-workbench-summary { margin: 0; padding: 10px 14px; color: var(--text-dimmer); font-size: 11px; border-bottom: 1px solid var(--border-subtle); }
+.debates-workbench-list { flex: 1; min-height: 0; overflow-y: auto; }
+.debates-workbench-row { width: 100%; min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
+.debates-workbench-row:hover { background: var(--bg-alt); }
+.debates-workbench-row:focus-visible, .debates-workbench-icon:focus-visible, .debates-workbench-new:focus-visible, .debates-workbench-filter:focus-visible, .debates-workbench-form-actions button:focus-visible, .debates-workbench-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.debates-workbench-row strong, .debates-workbench-row span { min-width: 0; }
+.debates-workbench-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.debates-workbench-row-panel { grid-column: 1; color: var(--text-dimmer); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.debates-workbench-row-meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; color: var(--text-dimmer); font-size: 11px; }
+.debates-workbench-phase { padding: 2px 7px; border-radius: 999px; background: var(--bg-alt); color: var(--text-secondary); font-weight: 700; text-transform: capitalize; }
+.debates-workbench-empty { padding: 48px 24px; text-align: center; color: var(--text-dimmer); }
+.debates-workbench-empty strong { display: block; margin-bottom: 6px; color: var(--text); }
+.debates-workbench-form { padding: 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-alt); }
+.debates-workbench-form.hidden { display: none; }
+.debates-workbench-form label { display: block; margin-bottom: 7px; color: var(--text); font-size: 12px; font-weight: 700; }
+.debates-workbench-form textarea { box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; background: var(--bg); color: var(--text); font: inherit; }
+.debates-workbench-launch-status { min-height: 15px; margin: 6px 0 0; color: var(--danger); font-size: 11px; }
+.debates-workbench-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 8px; }
+.debates-workbench-form-actions button { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text-secondary); font: inherit; cursor: pointer; }
+.debates-workbench-form-actions button[type="submit"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
+.project-debate-planning-error { margin: 10px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--danger) 5%, var(--bg)); }
+.project-debate-planning-error p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
+.project-debate-planning-error button { min-height: 30px; margin-top: 8px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 7px; background: var(--bg); color: var(--accent); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }

package/lib/public/css/home-debate-live.css

@@ -144,3 +144,29 @@
   .home-mate-chat-transcript.home-chat-bubble-layout .home-debate-live-user > .dm-bubble-avatar { width: 32px; height: 32px; }
 }
 @media (prefers-reduced-motion: reduce) { .home-debate-live-activity i, .home-debate-control-dots i { animation: none; opacity: .7; } }
+
+/* The project shell hosts the same debate cards and participation controls. */
+#messages > .project-debate-transcript { width: 100%; max-width: 860px; min-height: 0; margin: 0 auto; padding: 16px 12px; }
+.project-debate-transcript .home-debate-live-header { margin-bottom: 24px; }
+.project-debate-controls { flex: none; width: min(100%, 884px); margin: 0 auto; padding: 12px 24px 18px; }
+#input-area[hidden] { display: none !important; }
+.project-debate-error { color: var(--error); font-size: 12px; margin: 8px 0 0; }
+@media (max-width: 600px) {
+  #messages > .project-debate-transcript { padding: 12px 4px; }
+  .project-debate-controls { padding: 8px 12px 12px; }
+}
+@media (max-width: 768px) {
+  .project-debate-controls { padding-bottom: calc(var(--safe-bottom) + 64px); }
+  body.keyboard-open .project-debate-controls { padding-bottom: 8px; }
+  #messages .project-debate-transcript .home-debate-live-user {
+    display: grid !important;
+    grid-template-columns: 32px minmax(0, 1fr);
+    gap: 9px;
+    padding: 4px 12px !important;
+    max-width: 100% !important;
+  }
+  #messages .project-debate-transcript .home-debate-live-user .dm-bubble-content {
+    align-items: flex-start !important;
+    min-width: 0;
+  }
+}

package/lib/public/css/home-hub.css

@@ -3,7 +3,6 @@
    ========================================================================== */
 
 body.home-active #top-bar,
-body.home-active #icon-strip,
 body.home-active #sidebar-column,
 body.home-active #mate-sidebar-column,
 body.home-active #sidebar-resize-handle,
@@ -19,6 +18,9 @@ body.capsules-disabled #home-tool-workbench { display: none !important; }
 
 body.home-active #main-area { border: 0; border-radius: 0; }
 
+/* Preserve rail targets when the 32px project top bar is hidden. */
+body.home-active #icon-strip { padding-top: 32px; }
+
 body.home-surface-boot-pending #connect-overlay.hidden {
   opacity: 1;
   pointer-events: auto;

package/lib/public/css/home-mate-model-picker.css

@@ -1,131 +1,15 @@
-/* Vendor and model controls shared by the Mate settings dialog. */
-
-.home-mate-model-note {
-  max-width: 560px;
-  margin: 0 0 18px;
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.home-mate-model-current {
-  margin: -8px 0 20px;
-  color: var(--text-dimmer);
-  font-size: 11px;
-}
-
-.home-mate-model-section-label {
-  margin: 18px 0 8px;
-  color: var(--text-dimmer);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.home-mate-vendor-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.home-mate-vendor-option {
-  padding: 7px 11px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  background: rgba(var(--overlay-rgb), 0.035);
-  color: var(--text-muted);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.home-mate-vendor-option:hover,
-.home-mate-vendor-option[aria-pressed="true"] {
-  border-color: var(--border-subtle);
-  background: rgba(var(--overlay-rgb), 0.075);
-  color: var(--text);
-}
-
-.home-mate-vendor-option[aria-pressed="true"] { font-weight: 650; }
-
-.home-mate-model-muted {
-  color: var(--text-dimmer);
-  font-size: 11px;
-}
-
-.home-mate-model-list {
-  display: grid;
-  gap: 6px;
-}
-
-.home-mate-model-option,
-.home-mate-model-retry {
-  border: 1px solid var(--border-subtle);
-  background: transparent;
-  color: var(--text-secondary);
-  font: inherit;
-  cursor: pointer;
-}
-
-.home-mate-model-option {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-  width: 100%;
-  padding: 11px 12px;
-  border-radius: 8px;
-  text-align: left;
-}
-
-.home-mate-model-option:hover,
-.home-mate-model-option[aria-pressed="true"] {
-  border-color: var(--border);
-  background: rgba(var(--overlay-rgb), 0.045);
-  color: var(--text);
-}
-
-.home-mate-model-option[aria-pressed="true"] { font-weight: 600; }
-.home-mate-vendor-option:disabled,
-.home-mate-model-option:disabled { cursor: wait; opacity: 0.62; }
-
-.home-mate-model-option small {
-  overflow: hidden;
-  color: var(--text-dimmer);
-  font-size: 10px;
-  font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-mate-model-state {
-  padding: 28px 0;
-  color: var(--text-muted);
-  font-size: 12px;
-  text-align: center;
-}
-
-.home-mate-model-retry {
-  display: block;
-  margin: 14px auto 0;
-  padding: 7px 11px;
-  border-radius: 7px;
-}
-
-.home-mate-model-retry:hover { background: rgba(var(--overlay-rgb), 0.045); color: var(--text); }
-
-.home-mate-model-selection-status {
-  min-height: 20px;
-  padding-top: 10px;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-.home-mate-vendor-option:focus-visible,
-.home-mate-model-option:focus-visible,
-.home-mate-model-retry:focus-visible {
-  border-radius: 4px;
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
+/* Provider/model share the compact setting-row vocabulary of account settings. */
+.mate-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
+.mate-settings-row > div:first-child { flex: 1; min-width: 0; }
+.mate-settings-row label { font-size: 13px; font-weight: 500; color: var(--text); }
+.mate-settings-row p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
+.mate-settings-value { width: 210px; flex: none; min-width: 0; }
+.mate-settings-value .worker-runtime-trigger, .mate-settings-value select { height: 36px; border-radius: 8px; font-size: 13px; }
+.mate-settings-value .worker-runtime-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.mate-settings-model-section > .mate-settings-help { margin-bottom: 12px; }
+.home-mate-model-retry { align-self: flex-start; margin-top: 8px; }
+@media (max-width: 600px) {
+  .mate-settings-row { flex-direction: column; align-items: stretch; gap: 10px; }
+  .mate-settings-value { width: 100%; }
+}
+@media (pointer: coarse) { .mate-settings-value select { height: 40px; } }

package/lib/public/css/home-mate-settings.css

@@ -48,7 +48,7 @@
 .home-mate-list-overflow-mark {
   display: block;
   font-family: sans-serif;
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
   line-height: 1;
@@ -108,15 +108,15 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
 
 .home-mate-settings-dialog {
   display: flex;
-  width: min(720px, calc(100vw - 48px));
-  height: min(590px, calc(100vh - 64px));
+  width: min(920px, calc(100vw - 48px));
+  height: min(720px, calc(100dvh - 48px));
   max-height: 720px;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--bg);
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
+  box-shadow: 0 8px 28px rgba(var(--shadow-rgb), 0.18);
   animation: home-mate-settings-in 140ms ease-out;
 }
 
@@ -145,7 +145,7 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
 .home-mate-settings-header span {
   overflow: hidden;
   color: var(--text-dimmer);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 620;
   letter-spacing: 0.02em;
   text-overflow: ellipsis;
@@ -155,7 +155,7 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
 .home-mate-settings-header h2 {
   margin: 0;
   color: var(--text);
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 650;
   letter-spacing: -0.015em;
 }
@@ -182,7 +182,7 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
   display: grid;
   min-height: 0;
   flex: 1 1 auto;
-  grid-template-columns: 172px minmax(0, 1fr);
+  grid-template-columns: 184px minmax(0, 1fr);
 }
 
 .home-mate-settings-nav {
@@ -196,8 +196,8 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
 
 .home-mate-settings-nav button {
   width: 100%;
-  min-height: 36px;
-  padding: 8px 10px;
+  min-height: 32px;
+  padding: 6px 10px;
   border: 0;
   border-radius: 7px;
   background: transparent;
@@ -210,7 +210,7 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
 }
 
 .home-mate-settings-nav button:hover { background: rgba(var(--overlay-rgb), 0.045); color: var(--text); }
-.home-mate-settings-nav button.is-active { background: rgba(var(--overlay-rgb), 0.065); color: var(--text); font-weight: 640; }
+.home-mate-settings-nav button.is-active { background: color-mix(in srgb, var(--brand-indigo) 9%, transparent); color: var(--text); font-weight: 640; }
 .home-mate-settings-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 
 .home-mate-settings-content { min-width: 0; min-height: 0; overflow-y: auto; }
@@ -219,8 +219,8 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
   display: flex;
   flex-direction: column;
   gap: 12px;
-  max-width: 520px;
-  padding: 24px 26px 30px;
+  max-width: 720px;
+  padding: 0 24px 24px;
 }
 
 .home-mate-settings-identity,
@@ -232,7 +232,7 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
 
 .home-mate-settings-identity > span {
   color: var(--text-dimmer);
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 680;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -256,6 +256,87 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
   line-height: 1.55;
 }
 
+.home-mate-avatar-editor {
+  padding: 2px 0 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.home-mate-avatar-heading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.home-mate-avatar-preview {
+  width: 52px;
+  height: 52px;
+  flex: 0 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg-alt);
+  object-fit: cover;
+}
+
+.home-mate-avatar-heading h3 { margin: 0 0 3px; color: var(--text); font-size: 13px; font-weight: 650; }
+.home-mate-avatar-heading p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
+
+.home-mate-avatar-choices {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.home-mate-avatar-choice {
+  display: flex;
+  min-width: 0;
+  padding: 5px 3px 6px;
+  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-dimmer);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.home-mate-avatar-choice img {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.home-mate-avatar-choice:hover { background: var(--bg-hover); color: var(--text); }
+.home-mate-avatar-choice[aria-pressed="true"] { border-color: var(--border); background: rgba(var(--overlay-rgb), 0.065); color: var(--text); font-weight: 650; }
+.home-mate-avatar-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.home-mate-avatar-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
+.home-mate-avatar-actions .home-mate-avatar-file-input,
+.home-mate-avatar-actions .home-mate-avatar-file-input[hidden] { display: none !important; }
+.home-mate-avatar-actions button {
+  min-height: 32px;
+  padding: 6px 9px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 620;
+  cursor: pointer;
+}
+.home-mate-avatar-actions button:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
+.home-mate-avatar-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.home-mate-avatar-actions button:disabled { cursor: default; opacity: 0.48; }
+
+.home-mate-avatar-status { min-height: 16px; padding-top: 7px; color: var(--text-dimmer); font-size: 12px; }
+.home-mate-avatar-status.is-error { color: var(--danger); }
+.home-mate-avatar-status.is-saved { color: var(--success); }
+
 .home-mate-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 
 .home-mate-settings-action {
@@ -269,14 +350,14 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
   background: var(--bg);
   color: var(--text-secondary);
   font: inherit;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 620;
   cursor: pointer;
 }
 
 .home-mate-settings-action:hover { background: var(--bg-hover); color: var(--text); }
 .home-mate-settings-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.home-mate-settings-action.is-danger { color: var(--danger); }
+.home-mate-settings-action.is-danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, var(--border)); }
 .home-mate-settings-action .lucide { width: 14px; height: 14px; }
 
 .home-mate-settings-empty {
@@ -335,10 +416,81 @@ body.home-mate-settings-open #confirm-modal { z-index: 9100; }
     border-bottom: 1px solid var(--border-subtle);
   }
   .home-mate-settings-nav button { width: auto; min-width: max-content; text-align: center; }
-  .home-mate-settings-body { padding: 20px 18px 28px; }
+  .home-mate-settings-body { padding: 0 16px 24px; }
+  .home-mate-avatar-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .home-mate-list-overflow { transition: none; }
   .home-mate-settings-dialog { animation: none; }
 }
+
+.home-mate-settings-content-title { margin: 0; padding: 24px 24px 8px; color: var(--text); font-size: 20px; font-weight: 600; }
+.home-mate-settings-nav button { font-size: 13px; }
+.home-mate-settings-header span { font-size: 12px; color: var(--text-muted); font-weight: 400; letter-spacing: 0; }
+.home-mate-settings-body { gap: 24px; }
+.home-mate-settings-body > .mate-settings-help { margin-bottom: 0; }
+.home-mate-settings-body .mate-instructions h4 { margin-top: 0; }
+.home-mate-settings-body h4 { font-size: 14px; margin: 12px 0 6px; font-weight: 600; }
+.mate-settings-help { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
+.mate-instructions-input { display: block; box-sizing: border-box; width: 100%; min-height: 280px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); font: 13px/1.6 var(--font-mono, monospace); }
+.mate-instructions-input:focus-visible, .mate-settings-button:focus-visible, .mate-settings-appearance > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.mate-settings-status { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
+.mate-settings-status:empty { display: none; }
+.mate-settings-status.is-error { color: var(--error); }
+.mate-settings-savebar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
+.mate-settings-savebar[hidden] { display: none; }
+.mate-settings-button { min-height: 32px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
+.mate-settings-button.primary { background: var(--brand-indigo); border-color: var(--brand-indigo); color: white; }
+.mate-settings-button:disabled { opacity: .5; cursor: default; }
+.mate-settings-appearance { padding: 0; }
+.home-mate-settings-body > section > h4 { margin-top: 0; }
+.mate-settings-appearance > summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 4px 0 12px; }
+.home-mate-avatar-editor { border: 0; padding-bottom: 0; }
+.home-mate-avatar-choice[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand-indigo) 35%, var(--border)); background: color-mix(in srgb, var(--brand-indigo) 7%, var(--bg)); }
+.home-mate-avatar-status:empty { display: none; }
+.home-mate-settings-actions { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
+@media (max-width: 768px) {
+  .home-mate-settings-content-title { padding: 16px 16px 8px; }
+  .home-mate-settings-nav button { flex: 1; min-width: 0; }
+  .home-mate-settings-nav { overflow: visible; }
+  .mate-instructions-input { min-height: 240px; }
+}
+
+.mate-settings-profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
+.mate-settings-profile-heading h4 { margin: 0; }
+.mate-settings-profile-name { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
+.mate-settings-profile > .mate-settings-help { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 0; }
+.mate-settings-profile-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; }
+.mate-settings-profile-field input, .mate-settings-profile-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); font: inherit; }
+.mate-settings-profile-field input { height: 36px; }
+.mate-settings-profile-field textarea { min-height: 80px; resize: vertical; }
+.mate-settings-profile-field :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.mate-settings-profile + .mate-settings-appearance { padding-top: 20px; border-top: 1px solid var(--border-subtle); }
+
+.home-mate-settings-actions { align-items: center; justify-content: space-between; gap: 12px; }
+.mate-settings-danger-copy { flex: 1; min-width: 180px; }
+.mate-settings-danger-copy h4 { color: var(--error); margin: 0 0 6px; }
+.mate-settings-danger-copy p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
+
+/* The resting General page is a profile summary, not an expanded avatar catalog. */
+.mate-settings-profile { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; }
+.mate-settings-profile-avatar { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); cursor: pointer; overflow: hidden; }
+.mate-settings-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.mate-settings-profile-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.mate-settings-profile-avatar:disabled { cursor: default; }
+.mate-settings-profile-heading, .mate-settings-profile > .mate-settings-help { grid-column: 2; }
+.mate-settings-profile-heading { min-height: 32px; margin-bottom: 4px; }
+.mate-settings-profile-heading h4 { font-size: 15px; }
+.mate-settings-profile-field, .mate-settings-profile > .mate-settings-status, .mate-settings-profile > .mate-settings-savebar { grid-column: 1 / -1; }
+.mate-settings-appearance .home-mate-avatar-heading { display: none; }
+.mate-settings-appearance > .mate-settings-button { margin-top: 12px; }
+.home-mate-settings-overlay[data-section="general"] .home-mate-settings-body { gap: 20px; }
+.home-mate-settings-overlay[data-section="general"] .home-mate-settings-actions { margin-top: auto; }
+/* Prompt takes the remaining content height, with its own text scrolling. */
+.home-mate-settings-overlay[data-section="prompt"] .home-mate-settings-content { display: flex; flex-direction: column; overflow: hidden; }
+.home-mate-settings-overlay[data-section="prompt"] .home-mate-settings-content-title { flex: none; }
+.home-mate-settings-overlay[data-section="prompt"] .home-mate-settings-body { flex: 1; min-height: 0; box-sizing: border-box; width: 100%; }
+.home-mate-settings-overlay[data-section="prompt"] .mate-instructions { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.home-mate-settings-overlay[data-section="prompt"] .mate-instructions-input { flex: 1; min-height: 80px; resize: none; }
+.home-mate-settings-overlay[data-section="prompt"] .mate-instructions > :not(textarea) { flex: none; }