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

package/lib/public/css/mate-knowledge-workbench.css

@@ -0,0 +1,118 @@
+#mate-knowledge-workbench { position: relative; width: 68%; max-width: 1120px; min-width: 620px; height: calc(100% - 16px); margin: 8px; display: flex; flex-direction: column; flex: 0 0 auto; overflow: hidden; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-sans); }
+#mate-knowledge-workbench.hidden { display: none; }
+#mate-knowledge-workbench [hidden] { display: none !important; }
+#mate-knowledge-workbench.knowledge-wide { width: 82%; max-width: 1440px; }
+#mate-knowledge-workbench.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
+.knowledge-topbar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
+.knowledge-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
+.knowledge-title .lucide { width: 15px; color: var(--accent); }
+.knowledge-subtitle { flex: 1; color: var(--text-dimmer); font-size: 11px; }
+.knowledge-topbar > button, .knowledge-document-toolbar > button { height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; color: var(--text-secondary); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 11px; cursor: pointer; }
+.knowledge-topbar > button { width: 30px; padding: 0; }
+.knowledge-topbar .lucide, .knowledge-document-toolbar .lucide { width: 14px; }
+.knowledge-topbar > button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
+.knowledge-status { min-height: 0; padding: 0 14px; color: var(--danger); font-size: 11px; line-height: 0; transition: min-height .16s ease, padding .16s ease, line-height .16s ease; }
+.knowledge-status:not(:empty) { min-height: 30px; padding-block: 7px; line-height: 16px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); }
+.knowledge-status button { margin-left: 5px; padding: 0; color: inherit; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
+.knowledge-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 178px minmax(0, 1fr) 170px; }
+.knowledge-explorer, .knowledge-details { min-width: 0; background: color-mix(in srgb, var(--bg-alt) 74%, var(--bg)); }
+.knowledge-explorer { display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); }
+.knowledge-search { height: 32px; margin: 8px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text-dimmer); }
+.knowledge-search .lucide { width: 13px; }
+.knowledge-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; }
+.knowledge-explorer-heading { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: var(--text-dimmer); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.knowledge-explorer-list { flex: 1; min-height: 0; overflow: auto; padding: 2px 6px 12px; }
+.knowledge-file-row { width: 100%; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 7px; color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px; text-align: left; cursor: pointer; }
+.knowledge-folder-row { height: 24px; display: flex; align-items: center; gap: 6px; padding: 4px 7px 0; color: var(--text-dimmer); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
+.knowledge-folder-row .lucide { width: 11px; }
+.knowledge-file-row { padding-left: calc(7px + var(--knowledge-depth, 0) * 9px); }
+.knowledge-file-row:hover { color: var(--text); background: var(--bg-hover); }
+.knowledge-file-row[aria-current="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.knowledge-file-row .lucide { width: 14px; flex: 0 0 auto; }
+.knowledge-file-row span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.knowledge-file-row span em { display: block; overflow: hidden; color: var(--text-dimmer); font-size: 9px; font-style: normal; text-overflow: ellipsis; }
+.knowledge-file-row:has(em) { height: 42px; }
+.knowledge-file-row small { color: var(--text-dimmer); font-size: 9px; }
+.knowledge-search-more { width: calc(100% - 14px); margin: 5px 7px; padding: 6px; color: var(--text-secondary); background: var(--bg-hover); border: 0; border-radius: 6px; font-size: 10px; cursor: pointer; }
+.knowledge-search-more:disabled { cursor: default; opacity: .65; }
+.knowledge-empty { margin: 18px 8px; color: var(--text-dimmer); font-size: 11px; line-height: 1.55; }
+.knowledge-document { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
+.knowledge-tabs { height: 34px; display: flex; align-items: end; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--border-subtle); background: var(--bg-alt); }
+.knowledge-tab-shell { height: 30px; max-width: 190px; display: flex; align-items: center; border-right: 1px solid var(--border-subtle); background: transparent; }
+.knowledge-tab-shell:has(.knowledge-tab[aria-selected="true"]) { background: var(--bg); box-shadow: inset 0 2px 0 var(--accent); }
+.knowledge-tab { min-width: 0; height: 30px; flex: 1; display: flex; align-items: center; padding: 0 4px 0 10px; color: var(--text-dimmer); background: transparent; border: 0; font: inherit; font-size: 11px; cursor: pointer; }
+.knowledge-tab[aria-selected="true"] { color: var(--text); }
+.knowledge-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-tab-close { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; margin-right: 4px; padding: 0; color: var(--text-dimmer); background: transparent; border: 0; border-radius: 4px; font: inherit; font-size: 15px; cursor: pointer; }
+.knowledge-tab-close:hover { color: var(--text); background: var(--bg-hover); }
+.knowledge-document-toolbar { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); }
+.knowledge-preview-name { min-width: 0; flex: 1; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-save-state { margin-right: auto; color: var(--text-dimmer); font-size: 10px; }
+.knowledge-name { min-width: 110px; max-width: 260px; flex: 1; display: flex; align-items: center; border: 1px solid transparent; border-radius: 6px; }
+.knowledge-name:focus-within { border-color: var(--accent); }
+.knowledge-name input { min-width: 0; width: 100%; height: 28px; padding: 0 2px 0 7px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
+.knowledge-name span { padding-right: 7px; color: var(--text-dimmer); font-size: 11px; }
+.knowledge-view-toggle { display: flex; padding: 2px; background: var(--bg-alt); border-radius: 7px; }
+.knowledge-view-toggle button { height: 24px; padding: 0 7px; color: var(--text-dimmer); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 10px; cursor: pointer; }
+.knowledge-view-toggle button[aria-pressed="true"] { color: var(--text); background: var(--bg); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12); }
+.knowledge-document-toolbar > button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
+.knowledge-document-toolbar > button.danger { color: var(--danger); background: transparent; }
+.knowledge-document-toolbar button:disabled { opacity: .45; cursor: default; }
+.knowledge-readonly { color: var(--text-dimmer); font-size: 10px; }
+.knowledge-inline-error { flex-basis: 100%; color: var(--danger); font-size: 10px; }
+.knowledge-inline-error button { padding: 0; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
+.knowledge-document-body { flex: 1; min-height: 0; position: relative; }
+.knowledge-editor-split { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.knowledge-editor-host, .knowledge-live-preview { min-width: 0; min-height: 0; }
+.knowledge-editor-host { border-right: 1px solid var(--border-subtle); overflow: hidden; }
+.knowledge-editor-host .CodeMirror { height: 100%; color: var(--text); background: var(--bg); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
+.knowledge-editor-host .CodeMirror-scroll { padding: 24px clamp(18px, 4vw, 64px) 70px; box-sizing: border-box; }
+.knowledge-editor-host .CodeMirror-cursor { border-left-color: var(--text); }
+.knowledge-editor-host .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+.knowledge-editor-host .cm-header { color: var(--text); font-weight: 700; }.knowledge-editor-host .cm-link { color: var(--accent); }.knowledge-editor-host .cm-comment { color: var(--text-dimmer); }
+.knowledge-live-preview { overflow: auto; padding: 24px clamp(18px, 4vw, 64px) 70px; font-size: 14px; line-height: 1.75; }
+.knowledge-editor-fallback { box-sizing: border-box; width: 100%; height: 100%; resize: none; padding: 24px; border: 0; background: var(--bg); color: var(--text); font: 13px/1.7 var(--font-mono); }
+.knowledge-editor { box-sizing: border-box; width: 100%; height: 100%; resize: none; padding: 30px clamp(24px, 6vw, 76px); color: var(--text); background: var(--bg); border: 0; outline: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; tab-size: 2; }
+.knowledge-preview { box-sizing: border-box; height: 100%; overflow: auto; padding: 30px clamp(24px, 6vw, 76px) 80px; font-size: 14px; line-height: 1.75; }
+.knowledge-inline-link { display: inline; padding: 0; color: var(--accent); background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
+.knowledge-welcome { max-width: 340px; margin: 18vh auto 0; padding: 0 24px; color: var(--text-dimmer); text-align: center; }
+.knowledge-welcome .lucide { width: 28px; }
+.knowledge-welcome h2 { margin: 12px 0 6px; color: var(--text); font-family: var(--font-display); font-size: 22px; }
+.knowledge-welcome p { font-size: 12px; line-height: 1.6; }
+.knowledge-details { overflow: auto; border-left: 1px solid var(--border-subtle); }
+.knowledge-detail-section { border-bottom: 1px solid var(--border-subtle); }
+.knowledge-detail-heading { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--text-secondary); background: transparent; border: 0; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
+.knowledge-detail-heading .lucide { width: 12px; transition: transform .16s ease; }
+.knowledge-detail-heading[aria-expanded="false"] .lucide { transform: rotate(-90deg); }
+[data-detail-content] { padding: 3px 7px 10px; }
+[data-detail-content] > p { margin: 8px 4px; color: var(--text-dimmer); font-size: 10px; line-height: 1.5; }
+[data-detail-content] > small { display: block; margin: 8px 4px 4px; color: var(--text-dimmer); font-size: 8px; letter-spacing: .06em; }
+.knowledge-outline-item, .knowledge-link-item { width: 100%; min-height: 25px; display: flex; align-items: center; gap: 5px; padding: 3px 5px; overflow: hidden; color: var(--text-secondary); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 10px; text-align: left; }
+.knowledge-outline-item.depth-2 { padding-left: 13px; }.knowledge-outline-item.depth-3 { padding-left: 21px; }.knowledge-outline-item.depth-4 { padding-left: 29px; }
+.knowledge-link-item .lucide { width: 11px; flex: 0 0 auto; }.knowledge-link-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-link-item.unresolved { color: var(--text-dimmer); }.knowledge-backlink { align-items: flex-start; height: auto; }.knowledge-backlink span { white-space: normal; }.knowledge-backlink b, .knowledge-backlink em { display: block; }.knowledge-backlink em { margin-top: 2px; color: var(--text-dimmer); font-size: 9px; font-style: normal; line-height: 1.35; }
+.knowledge-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 4px 9px; }.knowledge-tags span { padding: 2px 5px; border: 1px solid var(--border-subtle); border-radius: 5px; color: var(--text-secondary); font-size: 9px; }
+.knowledge-properties { display: grid; grid-template-columns: minmax(44px, auto) minmax(0, 1fr); gap: 4px 7px; margin: 3px 4px 9px; font-size: 9px; }.knowledge-properties dt { color: var(--text-dimmer); }.knowledge-properties dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }.knowledge-property-error { color: var(--danger) !important; }
+#mate-knowledge-workbench.panel-fullscreen .knowledge-layout { grid-template-columns: minmax(0, 1fr); }
+#mate-knowledge-workbench.panel-fullscreen .knowledge-explorer, #mate-knowledge-workbench.panel-fullscreen .knowledge-details, #mate-knowledge-workbench.panel-fullscreen .knowledge-tabs { display: none; }
+button.knowledge-link-item { cursor: pointer; }.knowledge-outline-item:hover, button.knowledge-link-item:hover { color: var(--text); background: var(--bg-hover); }
+.knowledge-delete-dialog { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.38); }
+.knowledge-delete-dialog.hidden { display: none; }.knowledge-delete-dialog > div { width: min(360px, 100%); padding: 22px; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.24); }
+.knowledge-delete-dialog h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; }.knowledge-delete-dialog p { color: var(--text-secondary); font-size: 12px; line-height: 1.55; }.knowledge-delete-dialog > div > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.knowledge-delete-dialog button { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text); }.knowledge-delete-dialog button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
+#mate-knowledge-workbench :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+@media (max-width: 1023px) { #mate-knowledge-workbench, #mate-knowledge-workbench.knowledge-wide { position: fixed; inset: 0; z-index: 300; width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; padding-block: var(--safe-top, 0) var(--safe-bottom, 0); box-sizing: border-box; }.knowledge-topbar [data-knowledge-wide], .knowledge-topbar [data-knowledge-full] { display: none; }.knowledge-layout { grid-template-columns: 148px minmax(0, 1fr); }.knowledge-details { display: none; }.knowledge-subtitle { display: none; } }
+@media (max-width: 600px) { .knowledge-layout { grid-template-columns: 112px minmax(0, 1fr); }.knowledge-search { margin: 6px; }.knowledge-search .lucide { display: none; }.knowledge-file-row { padding-inline: 5px; }.knowledge-file-row .lucide, .knowledge-file-row small { display: none; }.knowledge-document-toolbar { flex-wrap: wrap; }.knowledge-name { flex-basis: calc(100% - 110px); }.knowledge-editor, .knowledge-preview { padding: 22px 16px 70px; }.knowledge-topbar { padding-left: 10px; }.knowledge-editor-split { grid-template-columns: minmax(0, 1fr); }.knowledge-live-preview { display: none; } }
+@media (prefers-reduced-motion: reduce) { #mate-knowledge-workbench * { transition: none !important; animation: none !important; } }
+
+.knowledge-create-menu { position: absolute; z-index: 5; top: 42px; right: 104px; width: 190px; padding: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
+.knowledge-create-menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--text); background: transparent; border: 0; border-radius: 6px; text-align: left; cursor: pointer; }
+.knowledge-create-menu button:hover { background: var(--bg-hover); }.knowledge-create-menu .lucide { width: 15px; }.knowledge-create-menu span { display: grid; gap: 1px; font-size: 11px; }.knowledge-create-menu small { color: var(--text-dimmer); font-size: 9px; }
+.knowledge-db-table-wrap { height: 100%; overflow: auto; }.knowledge-db-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }.knowledge-db-table th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 9px; color: var(--text-dimmer); background: var(--bg-alt); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-subtle); font-size: 9px; text-align: left; text-transform: uppercase; letter-spacing: .04em; }.knowledge-db-table td { min-width: 110px; max-width: 260px; height: 31px; padding: 0 9px; overflow: hidden; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); text-overflow: ellipsis; white-space: nowrap; }.knowledge-db-table tbody tr { cursor: pointer; }.knowledge-db-table tbody tr:hover td, .knowledge-db-table tbody tr:focus td { background: var(--bg-hover); }.knowledge-db-empty { color: var(--text-dimmer); }.knowledge-db-pill { display: inline-block; margin-right: 3px; padding: 1px 5px; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 9px; }
+.knowledge-db-reference { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; overflow: hidden; color: var(--accent); background: none; border: 0; font: inherit; text-overflow: ellipsis; cursor: pointer; }.knowledge-db-reference .lucide { width: 11px; flex: 0 0 auto; }
+.knowledge-db-view-select { height: 28px; max-width: 150px; padding: 0 24px 0 8px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; font: 10px var(--font-sans); }
+.knowledge-db-record { max-width: 720px; margin: 0 auto; padding: 28px clamp(20px,5vw,64px) 70px; }.knowledge-db-record > button { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--text-secondary); background: none; border: 0; font: inherit; font-size: 11px; cursor: pointer; }.knowledge-db-record > button .lucide { width: 13px; }.knowledge-db-record h2 { margin: 24px 0; font: 600 24px var(--font-display); }.knowledge-db-record dl { display: grid; grid-template-columns: minmax(100px,160px) minmax(0,1fr); gap: 0; border-top: 1px solid var(--border-subtle); }.knowledge-db-record dt,.knowledge-db-record dd { min-height: 34px; box-sizing: border-box; margin: 0; padding: 8px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; }.knowledge-db-record dt { color: var(--text-dimmer); }.knowledge-db-attribution { margin-top: 18px; color: var(--text-dimmer); font-size: 9px; }
+.knowledge-db-form { width: min(680px,calc(100% - 40px)); margin: 0 auto; padding: 30px 0 80px; }.knowledge-db-form h2 { margin: 0 0 22px; font: 600 23px var(--font-display); }.knowledge-db-form > p { color: var(--text-dimmer); font-size: 11px; line-height: 1.55; }.knowledge-db-form > label { display: grid; gap: 6px; margin: 0 0 15px; color: var(--text-secondary); font-size: 10px; font-weight: 600; }.knowledge-db-form input:not([type=checkbox]),.knowledge-db-form select { width: 100%; min-height: 36px; box-sizing: border-box; padding: 7px 9px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; font: 12px var(--font-sans); }.knowledge-db-form select[multiple] { min-height: 90px; }.knowledge-db-schema fieldset { display: grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap: 10px; margin: 0 0 10px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; }.knowledge-db-schema legend { padding: 0 5px; color: var(--text-dimmer); font-size: 9px; text-transform: uppercase; }.knowledge-db-schema fieldset > label:first-of-type { display:grid; gap:4px; font-size:9px; }.knowledge-db-check { display:flex; align-items:center; gap:4px; min-height:36px; font-size:10px; }
+.knowledge-db-dialog { position:absolute; inset:0; z-index:7; display:grid; place-items:center; background:rgba(0,0,0,.38); }.knowledge-db-dialog > div { width:min(360px,calc(100% - 36px)); padding:22px; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.24); }.knowledge-db-dialog h2 { margin:0 0 8px; font:600 18px var(--font-display); }.knowledge-db-dialog p { color:var(--text-secondary); font-size:12px; }.knowledge-db-dialog > div > div { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }.knowledge-db-dialog button { height:32px; padding:0 10px; color:var(--text); background:var(--bg-alt); border:1px solid var(--border); border-radius:7px; }.knowledge-db-dialog button.danger { color:#fff; background:var(--danger); border-color:var(--danger); }
+.knowledge-db-form fieldset { margin:0 0 15px; padding:10px; border:1px solid var(--border-subtle); border-radius:8px; }.knowledge-db-form fieldset legend { padding:0 5px; color:var(--text-dimmer); font-size:9px; text-transform:uppercase; }.knowledge-db-schema fieldset { grid-template-columns:minmax(0,1fr) minmax(100px,150px) auto auto; }.knowledge-db-schema fieldset > label:not(.knowledge-db-check) { display:grid; gap:4px; color:var(--text-secondary); font-size:9px; }
+.knowledge-db-schema .knowledge-db-options { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; grid-column:1 / -1; align-items:stretch; }.knowledge-db-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }.knowledge-db-option .knowledge-db-check { margin:0; }
+@media (max-width:600px) { .knowledge-db-table td { min-width:92px; }.knowledge-db-form { width:calc(100% - 28px); }.knowledge-db-schema fieldset { grid-template-columns:minmax(0,1fr); }.knowledge-db-record dl { grid-template-columns:90px minmax(0,1fr); } }

package/lib/public/css/mate-workspace-color.css

@@ -0,0 +1,16 @@
+/* Curated pigments, with both theme treatments visible before choosing. */
+.mate-color-picker { margin: 24px 0; }
+.mate-color-picker h4 { margin: 0 0 6px; font-size: 14px; }
+.mate-color-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
+.mate-color-preview { border-radius: 10px; border: 1px solid rgba(127,127,127,.22); padding: 10px; color: #252522; }
+.mate-color-preview.dark { color: #e8e8e2; }
+.mate-color-preview-label { display: block; font-size: 11px; margin-bottom: 8px; }
+.mate-color-preview-canvas { display: flex; flex-direction: column; gap: 5px; background: #fafaf8; border-radius: 6px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+.dark .mate-color-preview-canvas { background: #2b2b29; }
+.mate-color-preview-canvas strong { font-size: 12px; font-weight: 500; }
+.mate-color-preview-canvas span { font-size: 11px; line-height: 1.4; }
+.mate-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
+.mate-color-swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); color: #171717; border: 1px solid rgba(0,0,0,.16); font-size: 15px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
+.mate-color-swatch[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
+.mate-color-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.mate-color-swatch[aria-disabled="true"] { cursor: wait; opacity: .6; }

package/lib/public/css/mates.css

@@ -2396,7 +2396,7 @@ body.mate-dm-active .turn-meta {
 
 /* --- Mate Thinking: flex layout matching msg-assistant --- */
 /* Applies in both Mate DM and channel project chat */
-body.mate-dm-active .mate-thinking,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking,
 body.wide-view .mate-thinking {
   display: flex;
   flex-direction: row;
@@ -2406,11 +2406,11 @@ body.wide-view .mate-thinking {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-thinking:hover,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking:hover,
 body.wide-view .mate-thinking:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-thinking > .dm-bubble-avatar,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking > .dm-bubble-avatar,
 body.wide-view .mate-thinking > .dm-bubble-avatar {
   display: block;
   width: 36px;
@@ -2419,7 +2419,7 @@ body.wide-view .mate-thinking > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-thinking > .dm-bubble-content,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking > .dm-bubble-content,
 body.wide-view .mate-thinking > .dm-bubble-content {
   flex: 1;
   min-width: 0;
@@ -2431,7 +2431,7 @@ body.wide-view .mate-thinking > .dm-bubble-content {
   gap: 4px;
   padding: 4px 0;
 }
-body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking:not(.done) .mate-thinking-row,
 body.wide-view .mate-thinking:not(.done) .mate-thinking-row {
   display: flex;
 }
@@ -2459,15 +2459,15 @@ body.wide-view .mate-thinking:not(.done) .mate-thinking-row {
 }
 
 /* When done, hide mate row (JS does this too), show compact expandable header */
-body.mate-dm-active .mate-thinking.done .mate-thinking-row,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking.done .mate-thinking-row,
 body.wide-view .mate-thinking.done .mate-thinking-row {
   display: none;
 }
-body.mate-dm-active .mate-thinking.done .mate-thinking-activity,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking.done .mate-thinking-activity,
 body.wide-view .mate-thinking.done .mate-thinking-activity {
   display: none;
 }
-body.mate-dm-active .mate-thinking.done .thinking-header,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking.done .thinking-header,
 body.wide-view .mate-thinking.done .thinking-header {
   display: inline-flex !important;
   font-size: 12px;
@@ -2477,24 +2477,24 @@ body.wide-view .mate-thinking.done .thinking-header {
   opacity: 0.7;
   transition: opacity 0.15s;
 }
-body.mate-dm-active .mate-thinking.done .thinking-header:hover,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking.done .thinking-header:hover,
 body.wide-view .mate-thinking.done .thinking-header:hover {
   opacity: 1;
   background: rgba(var(--overlay-rgb), 0.08);
 }
-body.mate-dm-active .mate-thinking .thinking-content,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking .thinking-content,
 body.wide-view .mate-thinking .thinking-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease;
 }
-body.mate-dm-active .mate-thinking.expanded .thinking-content,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-thinking.expanded .thinking-content,
 body.wide-view .mate-thinking.expanded .thinking-content {
   max-height: 2000px;
 }
 
 /* --- Mate Tool Group: flex layout matching msg-assistant --- */
-body.mate-dm-active .mate-tool-group {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2503,10 +2503,10 @@ body.mate-dm-active .mate-tool-group {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-tool-group:hover {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-tool-group > .dm-bubble-avatar {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group > .dm-bubble-avatar {
   display: block;
   width: 36px;
   height: 36px;
@@ -2514,12 +2514,12 @@ body.mate-dm-active .mate-tool-group > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-tool-group > .dm-bubble-content {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group > .dm-bubble-content {
   flex: 1;
   min-width: 0;
   padding-top: 6px;
 }
-body.mate-dm-active .mate-tool-group .tool-group-header {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group .tool-group-header {
   font-size: 12px;
   padding: 4px 10px;
   background: rgba(var(--overlay-rgb), 0.04);
@@ -2527,26 +2527,26 @@ body.mate-dm-active .mate-tool-group .tool-group-header {
   opacity: 0.7;
   transition: opacity 0.15s;
 }
-body.mate-dm-active .mate-tool-group .tool-group-header:hover {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group .tool-group-header:hover {
   opacity: 1;
   background: rgba(var(--overlay-rgb), 0.08);
 }
-body.mate-dm-active .mate-tool-group .tool-group-label {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group .tool-group-label {
   font-size: 12px;
 }
-body.mate-dm-active .mate-tool-group .tool-item {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group .tool-item {
   border: none;
   background: none;
   padding: 2px 0;
 }
-body.mate-dm-active .mate-tool-group .tool-name {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-tool-group .tool-name {
   font-size: 13px;
   color: var(--text-muted);
 }
 
 /* --- Conversational Permission: flex layout matching msg-assistant --- */
 /* Applies in both Mate DM and channel project chat */
-body.mate-dm-active .mate-permission,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-permission,
 body.wide-view .mate-permission {
   display: flex;
   flex-direction: row;
@@ -2560,11 +2560,11 @@ body.wide-view .mate-permission {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-permission:hover,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-permission:hover,
 body.wide-view .mate-permission:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-permission > .dm-bubble-avatar,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-permission > .dm-bubble-avatar,
 body.wide-view .mate-permission > .dm-bubble-avatar {
   display: block;
   width: 36px;
@@ -2573,7 +2573,7 @@ body.wide-view .mate-permission > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-permission > .dm-bubble-content,
+body:is(.mate-dm-active, .mate-workspace-active) .mate-permission > .dm-bubble-content,
 body.wide-view .mate-permission > .dm-bubble-content {
   flex: 1;
   min-width: 0;
@@ -2657,7 +2657,7 @@ body.wide-view .mate-permission > .dm-bubble-content {
 /* --- Mate Activity: avatar + text --- */
 
 /* --- Mate AskUserQuestion: avatar + content layout (matches msg-assistant) --- */
-body.mate-dm-active .mate-ask-user {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-ask-user {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2666,10 +2666,10 @@ body.mate-dm-active .mate-ask-user {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-ask-user:hover {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-ask-user:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-ask-user > .dm-bubble-avatar {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-ask-user > .dm-bubble-avatar {
   display: block;
   width: 36px;
   height: 36px;
@@ -2677,7 +2677,7 @@ body.mate-dm-active .mate-ask-user > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-ask-user > .dm-bubble-content {
+body:is(.mate-dm-active, .mate-workspace-active) .mate-ask-user > .dm-bubble-content {
   flex: 1;
   min-width: 0;
 }

package/lib/public/css/menus.css

@@ -226,6 +226,7 @@
 
 /* --- Terminal toggle button (mobile only) --- */
 #footer-status,
+#shared-browser-toggle-btn,
 #terminal-toggle-btn {
   display: flex;
   align-items: center;
@@ -239,8 +240,10 @@
   transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
 #footer-status .lucide,
+#shared-browser-toggle-btn .lucide,
 #terminal-toggle-btn .lucide { width: 15px; height: 15px; }
 #footer-status:hover,
+#shared-browser-toggle-btn:hover,
 #terminal-toggle-btn:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.04); border-color: var(--border); }
 #terminal-toggle-btn { position: relative; }
 #terminal-count {

package/lib/public/css/messages.css

@@ -174,120 +174,7 @@
   display: flex;
 }
 
-/* --- Delegated work-order card ------------------------------------- */
-/* Self-contained: the generic bubble avatar/name/time are hidden and the
-   identity lives in the card's own header strip. The body stays on a
-   neutral background, with a restrained routing color for metadata. */
-.msg-user-delegated .dm-bubble-avatar,
-.msg-user-delegated .dm-bubble-header {
-  display: none;
-}
-
-.msg-user-delegated .bubble {
-  padding: 0;
-  overflow: hidden;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-top: 1px solid color-mix(in srgb, var(--link) 55%, var(--border));
-  border-radius: 12px;
-  max-width: min(720px, 100%);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.08);
-}
-
-.delegated-card-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: linear-gradient(to bottom,
-    color-mix(in srgb, var(--link) 3%, var(--bg-alt)),
-    var(--bg-alt));
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.delegated-card-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
-  flex-shrink: 0;
-}
-
-.delegated-card-headtext {
-  display: grid;
-  gap: 1px;
-  min-width: 0;
-  flex: 1;
-}
-
-.delegated-card-eyebrow {
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: color-mix(in srgb, var(--link) 68%, var(--text-secondary));
-  line-height: 1;
-}
-
-.delegated-card-from {
-  font-size: 12.5px;
-  font-weight: 650;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.delegated-card-time {
-  font-size: 10px;
-  color: var(--text-dimmer);
-  flex-shrink: 0;
-  align-self: flex-start;
-  margin-top: 2px;
-}
-
-.msg-user-delegated .delegated-brief {
-  padding: 13px 16px 15px;
-  font-size: 13px;
-  line-height: 1.7;
-}
-.msg-user-delegated .delegated-brief > :first-child { margin-top: 0; }
-.msg-user-delegated .delegated-brief > :last-child { margin-bottom: 0; }
-.msg-user-delegated .delegated-brief p { margin: 8px 0; }
-.msg-user-delegated .delegated-brief pre {
-  max-width: 100%;
-  overflow-x: auto;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-}
-.msg-user-delegated .delegated-brief code {
-  font-size: 12px;
-}
-.msg-user-delegated .delegated-brief h1,
-.msg-user-delegated .delegated-brief h2,
-.msg-user-delegated .delegated-brief h3 {
-  font-size: 13px;
-  font-weight: 700;
-  margin: 14px 0 4px;
-}
-.msg-user-delegated .delegated-brief ol,
-.msg-user-delegated .delegated-brief ul {
-  padding-left: 20px;
-  margin: 6px 0;
-}
-.msg-user-delegated .delegated-brief li { margin: 3px 0; }
-.msg-user-delegated .delegated-brief li::marker {
-  color: color-mix(in srgb, var(--link) 52%, var(--text-muted));
-  font-weight: 600;
-}
-
-.msg-user-delegated .dm-bubble-avatar-other {
-  border-radius: 7px;
-}
-
-.msg-user-delegated .dm-bubble-name {
-  color: color-mix(in srgb, var(--link) 62%, var(--text-secondary));
-  font-weight: 600;
-}
+/* Delegated instruction briefs are styled in worker-delegation.css. */
 
 /* --- User message action bar --- */
 .msg-actions {

package/lib/public/css/mobile-nav.css

@@ -332,22 +332,6 @@
     padding-bottom: calc(var(--safe-bottom) + 16px);
   }
 
-  /* No hover on touch: rest state stays dimmed, the active session shows color. */
-  .mobile-session-vendor-icon {
-    width: 14px;
-    height: 14px;
-    flex-shrink: 0;
-    border-radius: 3px;
-    object-fit: cover;
-    margin-right: 8px;
-    opacity: 0.5;
-    filter: grayscale(0.9) brightness(0.9);
-  }
-  .mobile-session-item.active .mobile-session-vendor-icon {
-    opacity: 1;
-    filter: none;
-  }
-
   /* --- Chat filter bar (horizontal scroll chips) --- */
   .mobile-chat-filter-bar {
     display: flex;
@@ -474,6 +458,7 @@
 
   /* --- Session items inside sheet --- */
   .mobile-session-item {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 10px;
@@ -595,13 +580,28 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .mobile-session-title-line {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+  .mobile-session-item.session-title-marquee .mobile-session-title {
+    animation: session-title-marquee var(--session-marquee-duration, 6s) linear infinite;
+    text-overflow: clip;
+  }
 
   .mobile-session-processing {
+    position: absolute;
+    left: -8px;
+    top: 50%;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--success);
     flex-shrink: 0;
+    transform: translateY(-50%);
   }
 
   .mobile-session-processing.io {

package/lib/public/css/overlays.css

@@ -1357,6 +1357,13 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   filter: drop-shadow(0 12px 28px rgb(88 87 252 / 0.12));
 }
 
+.connect-wordmark {
+  display: block;
+  width: clamp(142px, 15vw, 184px);
+  height: auto;
+  filter: brightness(0);
+}
+
 #connect-overlay-msg {
   color: var(--text-dimmer);
   font-family: var(--font-mono);
@@ -1379,3 +1386,11 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
     opacity: 0.92;
   }
 }
+
+.mate-delete-confirm .confirm-dialog { max-width: 420px; box-sizing: border-box; }
+.mate-delete-confirm h3 { margin: 0 0 12px; font-size: 18px; color: var(--error); }
+.mate-delete-confirm p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
+.mate-delete-challenge { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; font-size: 13px; color: var(--text); }
+.mate-delete-challenge input { height: 36px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
+.mate-delete-challenge input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.mate-delete-confirm .confirm-btn:disabled { opacity: .4; cursor: not-allowed; }

package/lib/public/css/project-logs.css

@@ -3,6 +3,7 @@
 /* Wide screens: bounded workbench window beside #app, matching the geometry of
    the document viewer and the terminal. */
 @media (min-width: 1024px) {
+  #you-panel,
   #project-logs-panel {
     width: 50%;
     max-width: 720px;
@@ -19,11 +20,14 @@
     overflow: hidden;
     flex-shrink: 0;
   }
+  #you-panel.hidden,
   #project-logs-panel.hidden { display: none; }
+  #you-panel.project-logs-wide,
   #project-logs-panel.project-logs-wide {
     width: 70%;
     max-width: 1200px;
   }
+  #you-panel.panel-fullscreen,
   #project-logs-panel.panel-fullscreen {
     width: 100%;
     max-width: none;
@@ -38,6 +42,7 @@
 
 /* Narrow screens: full overlay, like the other workbench tools. */
 @media (max-width: 1023px) {
+  #you-panel,
   #project-logs-panel {
     position: fixed;
     top: 0;
@@ -52,6 +57,7 @@
     flex-direction: column;
     overflow: hidden;
   }
+  #you-panel.hidden,
   #project-logs-panel.hidden { display: none; }
   /* Sizing controls are meaningless in the overlay presentation. */
   #project-logs-wide,
@@ -127,6 +133,7 @@
 .project-logs-detail { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
 .project-logs-detail.hidden { display: none; }
 .project-log-document { max-width: 760px; margin: 0 auto; padding: 32px 28px 52px; }
+#you-panel.panel-fullscreen .project-log-document,
 #project-logs-panel.panel-fullscreen .project-log-document { padding: clamp(28px, 5vw, 64px); }
 .project-log-doc-chips { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
 .project-log-document h1 { margin: 0 0 10px; color: var(--text); font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.025em; line-height: 1.12; }