clay-server 5.0.2-beta.1 → 5.1.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/LICENSES/README.md +4 -0
  2. package/LICENSES/dicebear-avatars.md +16 -0
  3. package/lib/daemon-project-access.js +7 -1
  4. package/lib/daemon.js +2 -0
  5. package/lib/dicebear-avatar.js +62 -0
  6. package/lib/knowledge-db-service.js +175 -0
  7. package/lib/knowledge-db-validation.js +0 -0
  8. package/lib/knowledge-document-index.js +49 -0
  9. package/lib/knowledge-draft-store.js +56 -0
  10. package/lib/knowledge-file-store.js +199 -0
  11. package/lib/knowledge-markdown.js +128 -0
  12. package/lib/mate-knowledge-mcp-server.js +29 -6
  13. package/lib/mate-knowledge-service.js +23 -2
  14. package/lib/mate-knowledge-sync.js +36 -21
  15. package/lib/mate-workspace-color.js +4 -0
  16. package/lib/mates.js +18 -0
  17. package/lib/project-connection.js +36 -2
  18. package/lib/project-debate-proposal.js +6 -0
  19. package/lib/project-debate-workspace.js +43 -0
  20. package/lib/project-debate.js +1 -0
  21. package/lib/project-file-path.js +2 -3
  22. package/lib/project-knowledge.js +315 -136
  23. package/lib/project-mate-creation-proposal.js +1 -0
  24. package/lib/project-request-access.js +13 -1
  25. package/lib/project-sessions.js +39 -2
  26. package/lib/project-user-knowledge.js +60 -0
  27. package/lib/project.js +59 -18
  28. package/lib/public/app.js +73 -34
  29. package/lib/public/clay-studio-wordmark-bold.svg +20 -0
  30. package/lib/public/css/clay-workspace.css +105 -0
  31. package/lib/public/css/debates-workbench.css +47 -0
  32. package/lib/public/css/filebrowser.css +10 -0
  33. package/lib/public/css/home-debate-live.css +26 -0
  34. package/lib/public/css/home-hub.css +3 -1
  35. package/lib/public/css/home-mate-model-picker.css +15 -131
  36. package/lib/public/css/home-mate-settings.css +168 -16
  37. package/lib/public/css/icon-strip.css +249 -32
  38. package/lib/public/css/mate-conversation.css +176 -0
  39. package/lib/public/css/mate-knowledge-workbench.css +118 -0
  40. package/lib/public/css/mate-workspace-color.css +16 -0
  41. package/lib/public/css/mates.css +28 -28
  42. package/lib/public/css/messages.css +1 -114
  43. package/lib/public/css/mobile-nav.css +16 -16
  44. package/lib/public/css/overlays.css +8 -0
  45. package/lib/public/css/project-logs.css +7 -0
  46. package/lib/public/css/project-mate-creation.css +105 -0
  47. package/lib/public/css/right-workbench.css +3 -3
  48. package/lib/public/css/session-folders.css +80 -21
  49. package/lib/public/css/sidebar.css +183 -107
  50. package/lib/public/css/title-bar.css +151 -0
  51. package/lib/public/css/worker-delegation.css +47 -0
  52. package/lib/public/css/worker-proposal.css +72 -150
  53. package/lib/public/css/you.css +74 -0
  54. package/lib/public/index.html +33 -101
  55. package/lib/public/modules/account-island.js +230 -0
  56. package/lib/public/modules/app-cursors.js +19 -43
  57. package/lib/public/modules/app-debate-ui.js +4 -3
  58. package/lib/public/modules/app-header.js +106 -0
  59. package/lib/public/modules/app-message-router.js +12 -3
  60. package/lib/public/modules/app-messages.js +34 -9
  61. package/lib/public/modules/app-notifications.js +4 -7
  62. package/lib/public/modules/app-projects.js +5 -38
  63. package/lib/public/modules/app-rendering.js +12 -13
  64. package/lib/public/modules/avatar.js +25 -9
  65. package/lib/public/modules/chat-render-runtime.js +16 -4
  66. package/lib/public/modules/command-palette.js +2 -15
  67. package/lib/public/modules/cursor-sharing-preference.js +3 -3
  68. package/lib/public/modules/debate-controls.js +299 -0
  69. package/lib/public/modules/debate.js +2 -0
  70. package/lib/public/modules/debates-workbench.js +339 -0
  71. package/lib/public/modules/default-ai.js +81 -65
  72. package/lib/public/modules/filebrowser.js +28 -8
  73. package/lib/public/modules/home-debate-controls.js +18 -289
  74. package/lib/public/modules/home-mate-avatar-editor.js +228 -0
  75. package/lib/public/modules/home-mate-color-picker.js +66 -0
  76. package/lib/public/modules/home-mate-creation.js +1 -1
  77. package/lib/public/modules/home-mate-instructions.js +90 -0
  78. package/lib/public/modules/home-mate-model-picker.js +80 -271
  79. package/lib/public/modules/home-mate-profile-editor.js +72 -0
  80. package/lib/public/modules/home-mate-settings.js +118 -125
  81. package/lib/public/modules/home-shell.js +3 -0
  82. package/lib/public/modules/home-surface-boot.js +1 -9
  83. package/lib/public/modules/html-preview.js +19 -0
  84. package/lib/public/modules/icon-strip-tooltip.js +95 -0
  85. package/lib/public/modules/knowledge-db-edit-state.js +35 -0
  86. package/lib/public/modules/knowledge-db-workbench.js +234 -0
  87. package/lib/public/modules/knowledge-history-state.js +55 -0
  88. package/lib/public/modules/knowledge-markdown-editor.js +57 -0
  89. package/lib/public/modules/knowledge-preview-links.js +70 -0
  90. package/lib/public/modules/knowledge-workbench-shell.js +21 -0
  91. package/lib/public/modules/mate-knowledge-workbench-state.js +174 -0
  92. package/lib/public/modules/mate-knowledge-workbench.js +500 -0
  93. package/lib/public/modules/mate-knowledge.js +11 -3
  94. package/lib/public/modules/mate-management.js +54 -10
  95. package/lib/public/modules/mate-sidebar.js +11 -1
  96. package/lib/public/modules/mate-workspace-color.js +33 -0
  97. package/lib/public/modules/mention.js +5 -13
  98. package/lib/public/modules/profile.js +51 -18
  99. package/lib/public/modules/project-chat-identity.js +79 -0
  100. package/lib/public/modules/project-debate-planning-workspace.js +250 -0
  101. package/lib/public/modules/project-debate-workspace.js +185 -0
  102. package/lib/public/modules/project-header-identity.js +127 -0
  103. package/lib/public/modules/project-logs-render.js +9 -4
  104. package/lib/public/modules/project-mate-creation-workspace.js +414 -0
  105. package/lib/public/modules/project-mate-navigation.js +238 -0
  106. package/lib/public/modules/project-session-navigation.js +29 -0
  107. package/lib/public/modules/project-switcher.js +6 -8
  108. package/lib/public/modules/projects-hub-view.js +5 -6
  109. package/lib/public/modules/projects-hub.js +2 -6
  110. package/lib/public/modules/qrcode.js +27 -8
  111. package/lib/public/modules/search-clay-chat.js +8 -11
  112. package/lib/public/modules/session-activity-tooltip.js +12 -0
  113. package/lib/public/modules/session-create-form.js +86 -14
  114. package/lib/public/modules/session-create.js +50 -7
  115. package/lib/public/modules/session-list-visibility.js +41 -0
  116. package/lib/public/modules/session-presence-ui.js +4 -1
  117. package/lib/public/modules/session-title-marquee.js +51 -0
  118. package/lib/public/modules/sidebar-mates.js +3 -50
  119. package/lib/public/modules/sidebar-mobile.js +63 -60
  120. package/lib/public/modules/sidebar-projects.js +84 -97
  121. package/lib/public/modules/sidebar-session-folders-ui.js +2 -2
  122. package/lib/public/modules/sidebar-session-hierarchy.js +149 -70
  123. package/lib/public/modules/sidebar-sessions.js +49 -50
  124. package/lib/public/modules/sidebar.js +11 -13
  125. package/lib/public/modules/thinking-lifecycle.js +7 -6
  126. package/lib/public/modules/tool-palette-order.js +4 -3
  127. package/lib/public/modules/tool-palette.js +13 -3
  128. package/lib/public/modules/tools.js +22 -22
  129. package/lib/public/modules/worker-proposal.js +42 -8
  130. package/lib/public/modules/worker-runtime-picker.js +115 -0
  131. package/lib/public/modules/you-activity.js +121 -0
  132. package/lib/public/modules/you.js +251 -0
  133. package/lib/public/style.css +16 -8
  134. package/lib/public/vendor/codemirror/LICENSE +21 -0
  135. package/lib/public/vendor/codemirror/codemirror.css +344 -0
  136. package/lib/public/vendor/codemirror/codemirror.js +9884 -0
  137. package/lib/public/vendor/codemirror/continuelist.js +101 -0
  138. package/lib/public/vendor/codemirror/markdown.js +886 -0
  139. package/lib/public/vendor/codemirror/show-hint.css +37 -0
  140. package/lib/public/vendor/codemirror/show-hint.js +523 -0
  141. package/lib/sdk-bridge.js +15 -3
  142. package/lib/server-admin.js +11 -0
  143. package/lib/server-home-chat-events.js +1 -1
  144. package/lib/server-home-chat.js +25 -3
  145. package/lib/server-home-debate-planning.js +4 -1
  146. package/lib/server-home-debates.js +2 -0
  147. package/lib/server-home-mate-creation.js +4 -1
  148. package/lib/server-mate-instructions.js +44 -0
  149. package/lib/server-mates.js +12 -3
  150. package/lib/server-palette.js +1 -1
  151. package/lib/server-settings.js +65 -1
  152. package/lib/server-user-knowledge.js +119 -0
  153. package/lib/server.js +21 -1
  154. package/lib/session-visibility.js +7 -2
  155. package/lib/sessions.js +32 -6
  156. package/lib/user-knowledge-service.js +167 -0
  157. package/lib/users-permissions.js +7 -0
  158. package/lib/users-project-mate-filter-preferences.js +39 -0
  159. package/lib/users.js +6 -0
  160. package/lib/workspace-query-access.js +4 -1
  161. package/lib/ws-schema.js +50 -0
  162. package/package.json +10 -1
@@ -8,7 +8,6 @@
8
8
  max-width: 320px;
9
9
  background: var(--sidebar-bg);
10
10
  transition: width 0.2s ease;
11
- padding-bottom: 58px;
12
11
  }
13
12
 
14
13
  #sidebar {
@@ -539,31 +538,11 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
539
538
  filter: grayscale(0.9) brightness(0.9);
540
539
  transition: opacity 0.15s, filter 0.15s;
541
540
  }
542
- .session-vendor-mark {
543
- width: 16px;
544
- height: 16px;
545
- margin-right: 0;
546
- border-radius: 4px;
547
- background: transparent;
548
- box-shadow: none;
549
- opacity: 0.5;
550
- filter: grayscale(0.72) saturate(0.6);
551
- flex-shrink: 0;
552
- }
553
541
  .session-item:hover .session-vendor-icon,
554
542
  .session-item.active .session-vendor-icon {
555
543
  opacity: 1;
556
544
  filter: none;
557
545
  }
558
- .session-item:hover .session-vendor-mark {
559
- opacity: 0.76;
560
- filter: grayscale(0.28) saturate(0.82);
561
- }
562
- .session-item.active .session-vendor-mark {
563
- opacity: 0.88;
564
- filter: grayscale(0.12) saturate(0.9);
565
- }
566
-
567
546
  .session-item-text {
568
547
  flex: 1;
569
548
  line-height: 1.3;
@@ -572,6 +551,19 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
572
551
  white-space: nowrap;
573
552
  min-width: 0;
574
553
  }
554
+ .session-item-title {
555
+ display: inline-block;
556
+ max-width: none;
557
+ white-space: nowrap;
558
+ }
559
+ .session-item.session-title-marquee .session-item-title {
560
+ animation: session-title-marquee var(--session-marquee-duration, 6s) linear infinite;
561
+ }
562
+ @keyframes session-title-marquee {
563
+ 0%, 15% { transform: translateX(0); }
564
+ 50%, 65% { transform: translateX(var(--session-marquee-distance)); }
565
+ 100% { transform: translateX(0); }
566
+ }
575
567
 
576
568
  .session-item:hover {
577
569
  background: rgba(var(--overlay-rgb), 0.035);
@@ -598,6 +590,7 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
598
590
  }
599
591
 
600
592
  .session-driver-header {
593
+ position: relative;
601
594
  display: flex;
602
595
  align-items: center;
603
596
  }
@@ -605,11 +598,18 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
605
598
  .session-driver-header > .session-item {
606
599
  min-width: 0;
607
600
  flex: 1;
608
- padding-left: 0;
601
+ padding-left: 9px;
602
+ }
603
+
604
+ .session-driver-header > .session-driver-toggle {
605
+ position: absolute;
606
+ left: 0;
607
+ top: 6px;
608
+ z-index: 2;
609
609
  }
610
610
 
611
611
  .session-driver-toggle {
612
- width: 18px;
612
+ width: 13px;
613
613
  height: 24px;
614
614
  padding: 0;
615
615
  border: 0;
@@ -715,21 +715,6 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
715
715
  height: 13px;
716
716
  }
717
717
 
718
- .split-group-vendors {
719
- display: inline-flex;
720
- align-items: center;
721
- margin-right: 6px;
722
- flex-shrink: 0;
723
- }
724
-
725
- .split-group-vendors .session-vendor-icon {
726
- margin-right: 0;
727
- }
728
-
729
- .split-group-vendors .session-vendor-icon + .session-vendor-icon {
730
- margin-left: -3px;
731
- }
732
-
733
718
  .split-group-name {
734
719
  overflow: hidden;
735
720
  text-overflow: ellipsis;
@@ -758,14 +743,31 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
758
743
 
759
744
  .session-item .session-processing,
760
745
  .mate-session-item .session-processing {
746
+ position: absolute;
747
+ top: 50%;
761
748
  display: inline-block;
762
749
  width: 6px;
763
750
  height: 6px;
764
751
  border-radius: 50%;
765
752
  background: var(--success);
766
- margin-right: 8px;
753
+ margin-right: 0;
767
754
  vertical-align: middle;
755
+ transform: translateY(-50%);
756
+ }
757
+
758
+ .session-item-title-line,
759
+ .mate-session-title-line {
760
+ position: relative;
761
+ display: flex;
762
+ align-items: center;
763
+ flex: 1 1 auto;
764
+ min-width: 0;
765
+ }
766
+ .session-item-title-line > .session-processing,
767
+ .mate-session-title-line > .session-processing {
768
+ left: -14px;
768
769
  }
770
+ .mate-session-item > .session-processing { left: 2px; }
769
771
 
770
772
  /* IO blink on session processing dot */
771
773
  .session-item .session-processing.io,
@@ -967,6 +969,11 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
967
969
  flex: 0 0 auto;
968
970
  min-width: 0;
969
971
  margin-left: 1px;
972
+ transition: transform 0.15s ease;
973
+ }
974
+ .session-item:hover .session-presence,
975
+ .session-item:focus-within .session-presence {
976
+ transform: translateX(calc(-1 * var(--session-actions-width, 0px)));
970
977
  }
971
978
 
972
979
  .session-presence-avatar {
@@ -1343,18 +1350,19 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1343
1350
  .mermaid-diagram::after { display: none; }
1344
1351
  }
1345
1352
 
1346
- /* --- User Island (bottom bar spanning icon strip + sidebar) --- */
1353
+ /* --- User Island: compact account trigger anchored in the rail --- */
1347
1354
  #user-island {
1348
1355
  position: absolute;
1349
- bottom: 8px;
1350
- left: 8px;
1351
- width: calc(72px + 240px - 16px);
1352
- height: 58px;
1356
+ bottom: var(--account-rail-bottom, 12px);
1357
+ left: 0;
1358
+ width: 72px;
1359
+ height: auto;
1353
1360
  display: flex;
1354
1361
  align-items: center;
1355
- background: var(--bg);
1356
- padding: 0 8px 0 0;
1357
- gap: 0;
1362
+ background: transparent;
1363
+ padding: 0;
1364
+ gap: var(--account-rail-control-gap, 8px);
1365
+ flex-direction: column;
1358
1366
  z-index: 15;
1359
1367
  border-radius: 10px;
1360
1368
  }
@@ -1363,34 +1371,65 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1363
1371
  display: none;
1364
1372
  }
1365
1373
 
1366
- #user-island::before {
1367
- content: "";
1368
- position: absolute;
1369
- top: 100%;
1370
- left: -8px;
1371
- right: -8px;
1372
- height: 8px;
1373
- background: var(--sidebar-bg);
1374
- }
1375
-
1376
1374
  .user-island-profile {
1377
1375
  display: flex;
1378
1376
  align-items: center;
1379
- flex: 1;
1380
- min-width: 0;
1381
- padding: 6px 6px 6px 10px;
1382
- border-radius: 8px;
1377
+ justify-content: center;
1378
+ width: 44px;
1379
+ height: 44px;
1380
+ min-width: 44px;
1381
+ padding: 0;
1382
+ border: 0;
1383
+ background: transparent;
1384
+ border-radius: 10px;
1383
1385
  cursor: pointer;
1384
- transition: background 0.15s;
1386
+ transition: background 0.15s, transform 0.15s;
1385
1387
  }
1386
1388
 
1387
1389
  .user-island-profile:hover {
1388
1390
  background: var(--sidebar-hover);
1389
1391
  }
1392
+ .user-island-profile:active { transform: translateY(1px); }
1393
+ .user-island-profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
1394
+
1395
+ .cursor-share-toggle {
1396
+ position: relative;
1397
+ width: var(--account-rail-cursor-target, 28px);
1398
+ height: var(--account-rail-cursor-target, 28px);
1399
+ min-height: var(--account-rail-cursor-target, 28px);
1400
+ display: flex;
1401
+ align-items: center;
1402
+ justify-content: center;
1403
+ padding: 4px;
1404
+ border: 0;
1405
+ border-radius: 6px;
1406
+ background: transparent;
1407
+ color: var(--text-muted);
1408
+ cursor: pointer;
1409
+ font: inherit;
1410
+ line-height: 1;
1411
+ }
1412
+ .cursor-share-toggle:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
1413
+ .cursor-share-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
1414
+ .cursor-share-toggle:disabled { opacity: .62; cursor: wait; }
1415
+ .cursor-share-icon { width: 16px; height: 16px; color: var(--text-muted); }
1416
+ .cursor-share-toggle.on { color: var(--brand-indigo); }
1417
+ .cursor-share-toggle.on .cursor-share-icon { color: var(--brand-indigo); }
1418
+ .cursor-share-toggle.pending { color: var(--accent); }
1419
+ .cursor-share-toggle.off::after {
1420
+ content: "";
1421
+ position: absolute;
1422
+ width: 18px;
1423
+ height: 2px;
1424
+ border-radius: 2px;
1425
+ background: currentColor;
1426
+ transform: rotate(-45deg);
1427
+ pointer-events: none;
1428
+ }
1390
1429
 
1391
1430
  .user-island-avatar {
1392
- width: 36px;
1393
- height: 36px;
1431
+ width: 32px;
1432
+ height: 32px;
1394
1433
  flex-shrink: 0;
1395
1434
  display: flex;
1396
1435
  align-items: center;
@@ -1419,10 +1458,7 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1419
1458
  }
1420
1459
 
1421
1460
  .user-island-info {
1422
- flex: 1;
1423
- min-width: 0;
1424
- overflow: hidden;
1425
- margin-left: 8px;
1461
+ display: none;
1426
1462
  }
1427
1463
 
1428
1464
  .user-island-name {
@@ -1435,6 +1471,7 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1435
1471
  text-overflow: ellipsis;
1436
1472
  display: block;
1437
1473
  }
1474
+ .user-island-profile .user-island-name { display: none; }
1438
1475
 
1439
1476
  .user-island-cta {
1440
1477
  font-size: 11px;
@@ -1456,10 +1493,14 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1456
1493
  }
1457
1494
 
1458
1495
  .user-island-actions {
1459
- display: flex;
1460
- align-items: center;
1461
- gap: 2px;
1462
- flex-shrink: 0;
1496
+ position: absolute;
1497
+ visibility: hidden;
1498
+ pointer-events: none;
1499
+ left: 0;
1500
+ bottom: 0;
1501
+ width: 1px;
1502
+ height: 1px;
1503
+ overflow: hidden;
1463
1504
  }
1464
1505
 
1465
1506
  .user-island-actions button {
@@ -1486,42 +1527,76 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1486
1527
  color: var(--text-secondary);
1487
1528
  }
1488
1529
 
1489
- /* Cursor sharing toggle */
1490
- .cursor-share-btn {
1491
- position: relative;
1492
- }
1493
- .cursor-share-btn.on {
1494
- color: var(--accent, #0ACF83);
1495
- }
1496
- .cursor-share-btn.off {
1497
- color: var(--text-muted);
1498
- opacity: 0.5;
1499
- }
1500
- .cursor-share-btn.off::after {
1501
- content: "";
1502
- position: absolute;
1503
- top: 50%;
1504
- left: 50%;
1505
- width: 22px;
1506
- height: 2px;
1507
- background: var(--danger, #F24822);
1508
- transform: translate(-50%, -50%) rotate(-45deg);
1509
- border-radius: 1px;
1510
- pointer-events: none;
1511
- }
1512
- .cursor-share-btn.on:hover {
1513
- color: var(--accent, #0ACF83);
1514
- }
1515
- .cursor-share-btn.off:hover {
1516
- opacity: 0.7;
1517
- }
1518
-
1519
- #layout.sidebar-collapsed #user-island .user-island-info,
1520
- #layout.sidebar-collapsed #user-island .user-island-actions {
1521
- display: none;
1522
- }
1523
1530
  /* Mate DM: user island collapses with sidebar like project mode */
1524
1531
 
1532
+ .account-popover {
1533
+ position: fixed;
1534
+ z-index: 120;
1535
+ max-height: min(520px, calc(100vh - 24px));
1536
+ overflow-y: auto;
1537
+ padding: 6px;
1538
+ background: var(--bg-alt);
1539
+ border: 1px solid var(--border);
1540
+ border-radius: 10px;
1541
+ box-shadow: 0 3px 8px rgba(0,0,0,.16), 0 12px 30px rgba(0,0,0,.18);
1542
+ animation: account-popover-in .16s ease-out;
1543
+ }
1544
+ @keyframes account-popover-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
1545
+ .account-menu-identity { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--border); }
1546
+ .account-avatar-edit { position: relative; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--accent); cursor: pointer; }
1547
+ .account-avatar-edit img { width: 100%; height: 100%; object-fit: cover; }
1548
+ .account-avatar-edit:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
1549
+ .account-avatar-edit:focus-visible, .account-settings-button:focus-visible, .account-name-display:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
1550
+ .account-identity-copy { min-width: 0; flex: 1; }
1551
+ .account-name-display { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font: 600 13px var(--font-ui); cursor: pointer; }
1552
+ .account-name-display span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1553
+ .account-name-display .lucide { width: 12px; height: 12px; color: var(--text-muted); flex: 0 0 auto; }
1554
+ .account-name-input { box-sizing: border-box; width: 100%; min-height: 26px; padding: 4px 6px; border: 1px solid var(--accent); border-radius: 5px; background: var(--bg); color: var(--text); font: 13px var(--font-ui); }
1555
+ .account-identity-copy small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; }
1556
+ .account-menu-identity small { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
1557
+ .account-settings-button { width: 28px; height: 28px; flex: 0 0 auto; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
1558
+ .account-settings-button:hover { background: var(--sidebar-hover); color: var(--text); }
1559
+ .account-settings-button .lucide { width: 16px; height: 16px; }
1560
+ .account-avatar-editor { display: flex; gap: 5px; padding: 5px 8px 7px 54px; border-bottom: 1px solid var(--border); }
1561
+ .account-avatar-editor[hidden] { display: none; }
1562
+ .account-avatar-editor button, .default-ai-cancel { min-height: 25px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--text-secondary); font: 11px var(--font-ui); cursor: pointer; }
1563
+ .account-avatar-editor button:hover, .default-ai-cancel:hover { background: var(--sidebar-hover); color: var(--text); }
1564
+ .account-avatar-editor input { display: none; }
1565
+ .account-inline-section { padding: 7px 8px; border-bottom: 1px solid var(--border); }
1566
+ .account-inline-label, .default-ai-label { display: block; margin: 0 0 6px; color: var(--text-muted); font-size: 10px; }
1567
+ .account-inline-input, .default-ai-select { box-sizing: border-box; width: 100%; min-height: 28px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: 12px var(--font-ui); }
1568
+ .account-inline-input:focus-visible, .default-ai-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
1569
+ .account-profile-actions { display: flex; gap: 5px; margin-top: 6px; }
1570
+ .account-profile-actions button, .default-ai-save { min-height: 26px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-secondary); font: 11px var(--font-ui); cursor: pointer; }
1571
+ .account-profile-actions button:hover, .default-ai-save:hover { background: var(--sidebar-hover); color: var(--text); }
1572
+ .account-ai-section { padding: 6px 8px; border-bottom: 0; }
1573
+ .account-ai-section .default-ai-title, .account-ai-section .default-ai-copy { display: none; }
1574
+ .account-ai-section .default-ai-label { margin-top: 6px; }
1575
+ .account-ai-section .default-ai-label:first-of-type { margin-top: 0; }
1576
+ .account-ai-section .default-ai-status { margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.3; }
1577
+ .account-ai-section .default-ai-error { color: var(--danger); }
1578
+ .account-ai-section .default-ai-save { width: auto; margin-top: 7px; }
1579
+ .default-ai-summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 7px; width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
1580
+ .default-ai-summary:hover .default-ai-summary-value { color: var(--text); }
1581
+ .default-ai-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
1582
+ .default-ai-summary-label { font-size: 11px; font-weight: 650; }
1583
+ .default-ai-summary-value { min-width: 0; overflow: hidden; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
1584
+ .default-ai-summary .lucide { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 14px; height: 14px; color: var(--text-muted); }
1585
+ .default-ai-edit-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: var(--text-secondary); font-size: 11px; }
1586
+ .default-ai-edit-heading strong { font-weight: 650; }
1587
+ .account-ai-section .default-ai-label { margin-top: 5px; }
1588
+ .account-ai-section .default-ai-select { min-height: 27px; }
1589
+ .account-ai-section .default-ai-save:disabled { opacity: .5; cursor: default; }
1590
+ .account-menu-actions { padding-top: 4px; }
1591
+ .account-menu-row { width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 13px var(--font-ui); text-align: left; cursor: pointer; }
1592
+ .account-menu-row span { flex: 1; }
1593
+ .account-menu-row small { color: var(--text-muted); font-size: 11px; }
1594
+ .account-menu-row .lucide { width: 14px; height: 14px; color: var(--text-muted); }
1595
+ .account-menu-row:hover { background: var(--sidebar-hover); }
1596
+ .account-menu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
1597
+ .account-menu-row:disabled { opacity: .55; cursor: wait; }
1598
+ @media (prefers-reduced-motion: reduce) { .account-popover { animation: none; } }
1599
+
1525
1600
 
1526
1601
 
1527
1602
  .footer-version {
@@ -1666,7 +1741,8 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
1666
1741
  }
1667
1742
 
1668
1743
  #user-island {
1669
- display: none;
1744
+ display: flex;
1745
+ z-index: 30;
1670
1746
  }
1671
1747
 
1672
1748
  /* Mobile: hide both sidebars completely */
@@ -13,6 +13,53 @@
13
13
  gap: 8px;
14
14
  }
15
15
 
16
+ .top-bar-brand-link {
17
+ display: flex;
18
+ align-items: center;
19
+ flex: 0 0 auto;
20
+ width: 80px;
21
+ height: 18px;
22
+ color: var(--text-muted);
23
+ border-radius: 2px;
24
+ transition: color 180ms ease-out;
25
+ }
26
+
27
+ .top-bar-brand-wordmark {
28
+ display: block;
29
+ width: 100%;
30
+ height: 100%;
31
+ background: currentColor;
32
+ -webkit-mask: url("../clay-studio-wordmark-bold.svg") center / contain no-repeat;
33
+ mask: url("../clay-studio-wordmark-bold.svg") center / contain no-repeat;
34
+ opacity: 0.5;
35
+ transition: opacity 180ms ease-out;
36
+ user-select: none;
37
+ }
38
+
39
+ .top-bar-brand-link:hover,
40
+ .top-bar-brand-link:focus-visible {
41
+ color: var(--text);
42
+ }
43
+
44
+ .top-bar-brand-link:hover .top-bar-brand-wordmark,
45
+ .top-bar-brand-link:focus-visible .top-bar-brand-wordmark {
46
+ opacity: 1;
47
+ }
48
+
49
+ .top-bar-brand-link:focus-visible {
50
+ outline: 2px solid var(--accent);
51
+ outline-offset: 2px;
52
+ }
53
+
54
+ @media (max-width: 980px) {
55
+ .top-bar-brand-link { width: 72px; }
56
+ }
57
+
58
+ @media (prefers-reduced-motion: reduce) {
59
+ .top-bar-brand-link,
60
+ .top-bar-brand-wordmark { transition: none; }
61
+ }
62
+
16
63
  /* --- Update banner --- */
17
64
  .top-bar-update {
18
65
  display: flex;
@@ -262,6 +309,43 @@
262
309
  display: none;
263
310
  }
264
311
 
312
+ .title-bar-project-icon.is-mate-avatar {
313
+ overflow: visible;
314
+ padding: 0;
315
+ background: transparent;
316
+ box-shadow: none;
317
+ }
318
+
319
+ .title-bar-project-icon.is-clay-identity {
320
+ display: none;
321
+ }
322
+
323
+ .title-bar-mate-avatar {
324
+ display: block;
325
+ width: 28px;
326
+ height: 28px;
327
+ border: 1px solid rgba(var(--overlay-rgb), 0.14);
328
+ border-radius: 8px;
329
+ background: var(--bg-alt);
330
+ object-fit: cover;
331
+ box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.14);
332
+ }
333
+
334
+ .title-bar-mate-vendor {
335
+ position: absolute;
336
+ right: -4px;
337
+ bottom: -4px;
338
+ display: block;
339
+ width: 13px;
340
+ height: 13px;
341
+ padding: 1px;
342
+ border: 2px solid var(--sidebar-bg);
343
+ border-radius: 5px;
344
+ background: var(--bg);
345
+ object-fit: contain;
346
+ box-sizing: border-box;
347
+ }
348
+
265
349
  .title-bar-project-dropdown:hover .title-bar-project-icon,
266
350
  .title-bar-project-dropdown.open .title-bar-project-icon {
267
351
  background: var(--bg-alt);
@@ -269,6 +353,12 @@
269
353
  transform: translateY(-1px);
270
354
  }
271
355
 
356
+ .title-bar-project-dropdown:hover .title-bar-project-icon.is-mate-avatar,
357
+ .title-bar-project-dropdown.open .title-bar-project-icon.is-mate-avatar {
358
+ background: transparent;
359
+ box-shadow: none;
360
+ }
361
+
272
362
  .title-bar-project-icon .emoji {
273
363
  width: 18px;
274
364
  height: 18px;
@@ -293,6 +383,67 @@
293
383
  min-width: 0;
294
384
  }
295
385
 
386
+ .title-bar-project-label {
387
+ display: flex;
388
+ flex: 0 1 auto;
389
+ min-width: 0;
390
+ flex-direction: column;
391
+ }
392
+
393
+ .title-bar-project-default {
394
+ display: none;
395
+ overflow: hidden;
396
+ color: var(--text-dimmer);
397
+ font-size: 9px;
398
+ line-height: 1.15;
399
+ text-overflow: ellipsis;
400
+ white-space: nowrap;
401
+ }
402
+
403
+ .title-bar-project-dropdown[data-mate-defaults="true"][data-mate-bio="true"] .title-bar-project-default { display: block; }
404
+
405
+ /* One continuous identity surface; the crown and label are not controls. */
406
+ .title-bar-project-dropdown[data-clay-identity="true"] .title-bar-project-default {
407
+ display: inline-flex;
408
+ align-items: center;
409
+ width: fit-content;
410
+ max-width: 100%;
411
+ height: 18px;
412
+ margin-top: 1px;
413
+ padding: 0 6px;
414
+ border: 1px solid color-mix(in srgb, var(--brand-gold) 48%, var(--brand-ink));
415
+ border-radius: 5px;
416
+ background: color-mix(in srgb, var(--brand-indigo) 28%, var(--brand-ink));
417
+ color: #fff;
418
+ font-size: 10px;
419
+ font-weight: 600;
420
+ letter-spacing: 0.015em;
421
+ line-height: 1;
422
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 1px rgba(var(--shadow-rgb), 0.12);
423
+ }
424
+
425
+ .clay-role-badge {
426
+ display: inline-flex;
427
+ align-items: center;
428
+ gap: 5px;
429
+ white-space: nowrap;
430
+ }
431
+
432
+ .clay-role-insignia {
433
+ width: 12px;
434
+ height: 12px;
435
+ flex: 0 0 12px;
436
+ color: var(--brand-gold);
437
+ fill: currentColor;
438
+ stroke-width: 1.8;
439
+ }
440
+
441
+ .clay-role-label {
442
+ color: inherit;
443
+ }
444
+
445
+ .title-bar-project-dropdown[data-mate-defaults="true"] .title-bar-chevron { display: none; }
446
+
296
447
  .title-bar-chevron {
297
448
  width: 12px;
298
449
  height: 12px;
@@ -0,0 +1,47 @@
1
+ /* One attributed instruction brief, using the same material as its proposal. */
2
+ #messages > .msg-user-delegated {
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: stretch;
6
+ gap: 0;
7
+ box-sizing: border-box;
8
+ width: 100%;
9
+ max-width: var(--content-width);
10
+ margin: 12px auto;
11
+ padding: 0 20px;
12
+ }
13
+ #messages > .msg-user-delegated:hover { background: transparent; }
14
+ #messages > .msg-user-delegated > .dm-bubble-avatar,
15
+ #messages > .msg-user-delegated .dm-bubble-header { display: none; }
16
+ #messages > .msg-user-delegated > .dm-bubble-content { display: block; flex: none; width: 100%; min-width: 0; }
17
+ #messages > .msg-user-delegated .bubble {
18
+ box-sizing: border-box;
19
+ width: 100%;
20
+ max-width: 100%;
21
+ padding: 0;
22
+ background: var(--bg);
23
+ border: 1px solid var(--border);
24
+ border-radius: 10px;
25
+ box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .08);
26
+ white-space: normal;
27
+ overflow: hidden;
28
+ }
29
+ #messages .delegated-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; background: transparent; border-bottom: 1px solid var(--border-subtle); }
30
+ #messages .delegated-card-avatar { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
31
+ #messages .delegated-card-headtext { display: grid; gap: 1px; min-width: 0; flex: 1; }
32
+ #messages .delegated-card-eyebrow { color: var(--text-muted); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; }
33
+ #messages .delegated-card-from { font-size: 13px; font-weight: 550; line-height: 1.4; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
34
+ #messages .delegated-card-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
35
+ #messages .msg-user-delegated .delegated-brief { padding: 12px 14px 14px; color: var(--text); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
36
+ #messages .msg-user-delegated .delegated-brief :is(h1, h2, h3) { font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
37
+ #messages .msg-user-delegated .delegated-brief li::marker { color: var(--text-muted); }
38
+ #messages > .msg-user-delegated > .msg-actions { align-self: flex-end; margin-left: 0; padding-top: 2px; }
39
+ @media (max-width: 768px) { #messages > .msg-user-delegated { padding-inline: 12px; } }
40
+
41
+ #messages .delegated-brief > :first-child { margin-top: 0; }
42
+ #messages .delegated-brief > :last-child { margin-bottom: 0; }
43
+ #messages .delegated-brief p { margin: 8px 0; }
44
+ #messages .delegated-brief pre { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 8px; }
45
+ #messages .delegated-brief code { font-size: 12px; }
46
+ #messages .delegated-brief :is(ol, ul) { padding-left: 20px; margin: 6px 0; }
47
+ #messages .delegated-brief li { margin: 3px 0; }