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

package/lib/public/css/worker-proposal.css

@@ -1,160 +1,82 @@
-/* Inline approval surface for user-controlled Split Worker configuration. */
-
+/* Worker proposals are decisions first, and readable receipts after acceptance. */
 .worker-proposal-card {
+  box-sizing: border-box;
   width: min(var(--content-width), calc(100% - 40px));
   margin: 16px auto;
-  padding: 16px;
-  border: 1px solid color-mix(in srgb, var(--accent2) 30%, var(--border));
-  border-radius: 16px;
-  background:
-    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 42%),
-    var(--bg-alt);
-  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.12);
-}
-
-.worker-proposal-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.worker-proposal-mark {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  border-radius: 11px;
-  background: color-mix(in srgb, var(--accent2) 14%, var(--bg));
-  color: var(--accent2);
-}
-
-.worker-proposal-mark .lucide { width: 17px; height: 17px; }
-.worker-proposal-heading { min-width: 0; display: grid; gap: 1px; }
-.worker-proposal-heading strong { color: var(--text); font-size: 14px; line-height: 1.25; }
-.worker-proposal-kicker { color: var(--accent2); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; }
-
-.worker-proposal-status {
-  margin-left: auto;
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--accent2) 10%, transparent);
-  color: var(--accent2);
-  font-size: 9px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.worker-proposal-summary {
-  margin: 12px 0 10px;
-  color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.worker-proposal-plan {
-  display: grid;
-  gap: 5px;
-  margin: 0 0 14px;
-  padding: 10px 12px 10px 32px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 11px;
-  background: color-mix(in srgb, var(--bg) 72%, transparent);
-  color: var(--text-muted);
-  font-size: 11px;
-  line-height: 1.45;
-}
-
-.worker-proposal-plan li::marker { color: var(--accent2); font-weight: 700; }
-
-.worker-proposal-rationale {
-  display: grid;
-  gap: 4px;
-  margin: 0 0 14px;
-  padding: 10px 12px;
-  border-left: 2px solid color-mix(in srgb, var(--accent2) 62%, var(--border));
-  background: color-mix(in srgb, var(--accent2) 5%, transparent);
-}
-
-.worker-proposal-rationale > span {
-  color: var(--accent2);
-  font-size: 9px;
-  font-weight: 750;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.worker-proposal-rationale p {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: 11px;
-  line-height: 1.45;
-}
-
-.worker-proposal-config {
-  display: grid;
-  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.2fr) minmax(190px, auto);
-  gap: 9px;
-  align-items: end;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .08);
+  container-type: inline-size;
 }
-
+.worker-proposal-header { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
+.worker-proposal-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-alt); color: var(--text-muted); }
+.worker-proposal-mark .lucide { width: 15px; height: 15px; }
+.worker-proposal-heading { min-width: 0; flex: 1; display: grid; gap: 2px; }
+.worker-proposal-heading strong { color: var(--text); font-size: 14px; line-height: 1.35; font-weight: 600; }
+.worker-proposal-kicker { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
+.worker-proposal-status { color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 3px 6px; font-size: 11px; line-height: 1.3; }
+.worker-proposal-card[data-status="pending"] .worker-proposal-status { color: var(--text); }
+.worker-proposal-card[data-status="error"] .worker-proposal-status { color: var(--error); }
+.worker-proposal-card[data-status="completed"] .worker-proposal-status { color: var(--text); }
+.worker-proposal-summary { margin: 12px 0; color: var(--text); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
+.worker-proposal-brief { margin: 0 0 12px; }
+.worker-proposal-brief > summary { list-style: none; display: flex; align-items: center; gap: 5px; width: fit-content; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 3px 0; }
+.worker-proposal-brief > summary::-webkit-details-marker { display: none; }
+.worker-proposal-brief > summary .lucide { width: 13px; height: 13px; transition: transform 150ms ease; }
+.worker-proposal-brief[open] > summary .lucide { transform: rotate(90deg); }
+.worker-proposal-plan { margin: 7px 0 10px; padding: 0 0 0 21px; color: var(--text); font-size: 13px; line-height: 1.55; display: grid; gap: 4px; overflow-wrap: anywhere; }
+.worker-proposal-plan li::marker { color: var(--text-muted); font-size: 11px; }
+.worker-proposal-rationale { margin: 10px 0 0; }
+.worker-proposal-rationale > span { font-size: 12px; font-weight: 600; color: var(--text); }
+.worker-proposal-rationale p { margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); overflow-wrap: anywhere; }
+.worker-proposal-config { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
 .worker-proposal-field { min-width: 0; display: grid; gap: 5px; }
-.worker-proposal-field > span { color: var(--text-dimmer); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.worker-proposal-field > span { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
 .worker-proposal-vendor-control { position: relative; display: flex; align-items: center; }
-.worker-proposal-vendor-control img { position: absolute; left: 9px; width: 15px; height: 15px; border-radius: 4px; pointer-events: none; z-index: 1; }
-.worker-proposal-vendor-control .worker-proposal-select { padding-left: 30px; }
-
-.worker-proposal-select {
-  width: 100%;
-  height: 34px;
-  min-width: 0;
-  padding: 0 28px 0 10px;
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  background: var(--input-bg);
-  color: var(--text);
-  font: inherit;
-  font-size: 11px;
-  outline: none;
-}
-
-.worker-proposal-select:focus { border-color: var(--accent2); }
-.worker-proposal-effort-buttons { display: flex; height: 34px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); }
-.worker-proposal-effort-btn { flex: 1; min-width: 38px; border: 0; border-radius: 6px; background: transparent; color: var(--text-dimmer); font: inherit; font-size: 9px; font-weight: 650; cursor: pointer; }
+.worker-proposal-vendor-control img { position: absolute; left: 9px; width: 16px; height: 16px; border-radius: 4px; pointer-events: none; z-index: 1; }
+.worker-proposal-vendor-control .worker-runtime-trigger, .worker-proposal-vendor-control .worker-proposal-select { padding-left: 31px; }
+.worker-runtime-picker { min-width: 0; width: 100%; }
+.worker-proposal-select, .worker-runtime-trigger { width: 100%; height: 34px; min-width: 0; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text); font: inherit; font-size: 13px; }
+.worker-runtime-picker > select { display: none; }
+.worker-runtime-trigger { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
+.worker-runtime-trigger > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.worker-runtime-trigger .lucide { flex: none; width: 13px; height: 13px; color: var(--text-muted); }
+.worker-runtime-trigger:hover { border-color: var(--text-dimmer); }
+.worker-runtime-options { position: fixed; z-index: 10050; box-sizing: border-box; max-height: min(240px, calc(100dvh - 16px)); overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); box-shadow: 0 3px 12px rgba(var(--shadow-rgb), .15); }
+.worker-runtime-options button { display: block; width: 100%; min-height: 30px; border: 0; border-radius: 5px; padding: 5px 8px; text-align: left; font: inherit; font-size: 13px; background: transparent; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
+.worker-runtime-options button:hover, .worker-runtime-options button:focus { background: var(--bg-alt); }
+.worker-runtime-options [aria-selected="true"] { background: color-mix(in srgb, var(--brand-indigo) 10%, var(--bg)); }
+.worker-proposal-effort { grid-column: 1 / -1; }
+.worker-proposal-effort-buttons { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-alt); }
+.worker-proposal-effort-btn { flex: 1; min-width: 45px; min-height: 27px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-muted); font: inherit; font-size: 11px; cursor: pointer; }
 .worker-proposal-effort-btn:hover { color: var(--text); }
-.worker-proposal-effort-btn.active { background: color-mix(in srgb, var(--accent2) 18%, var(--bg)); color: var(--accent2); }
-
-.worker-proposal-decision {
-  margin-top: 9px;
-  color: var(--text-dimmer);
-  font-size: 9px;
-  line-height: 1.35;
+.worker-proposal-effort-btn.active { color: var(--text); background: var(--bg); border-color: color-mix(in srgb, var(--brand-indigo) 40%, var(--border)); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .08); }
+.worker-proposal-runtime { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-subtle); color: var(--text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
+.worker-proposal-decision { margin-top: 8px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
+.worker-proposal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 12px; }
+.worker-proposal-action { min-height: 32px; padding: 0 11px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; }
+.worker-proposal-action.secondary { border: 1px solid var(--border); background: var(--bg); color: var(--text); }
+.worker-proposal-action.primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--brand-indigo); background: var(--brand-indigo); color: #fff; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .1); }
+.worker-proposal-action.primary .lucide { width: 14px; height: 14px; }
+.worker-proposal-action:active:not(:disabled) { transform: translateY(1px); }
+.worker-proposal-action:disabled, .worker-proposal-select:disabled, .worker-runtime-trigger:disabled, .worker-proposal-effort-btn:disabled { cursor: default; opacity: .6; }
+.worker-proposal-error { margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--error); background: var(--error-8); }
+.worker-proposal-card .hidden { display: none; }
+.worker-proposal-card :is(button, select, summary):focus-visible, .worker-runtime-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@container (max-width: 340px) {
+  .worker-proposal-header { display: grid; grid-template-columns: 28px minmax(0, 1fr); }
+  .worker-proposal-status { grid-column: 2; justify-self: start; }
+  .worker-proposal-config { grid-template-columns: 1fr; }
+  .worker-proposal-actions > button { flex: 1 1 100%; }
 }
-
-.worker-proposal-decision.automatic { color: var(--accent2); }
-
-.worker-proposal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
-.worker-proposal-action { min-height: 34px; padding: 0 13px; border-radius: 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
-.worker-proposal-action.secondary { border: 1px solid var(--border); background: transparent; color: var(--text-muted); }
-.worker-proposal-action.primary { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--accent2) 55%, var(--border)); background: color-mix(in srgb, var(--accent2) 16%, var(--bg)); color: var(--accent2); }
-.worker-proposal-action.primary .lucide { width: 13px; height: 13px; }
-.worker-proposal-action:not(:disabled):hover { filter: brightness(1.12); }
-.worker-proposal-action:disabled, .worker-proposal-select:disabled, .worker-proposal-effort-btn:disabled { cursor: default; opacity: 0.58; }
-
-.worker-proposal-error { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 10px; line-height: 1.45; }
-.worker-proposal-error { color: var(--error); background: var(--error-8); }
-.worker-proposal-error.hidden { display: none; }
-.worker-proposal-card[data-status="starting"] .worker-proposal-status,
-.worker-proposal-card[data-status="running"] .worker-proposal-status { animation: worker-proposal-pulse 1.6s ease-in-out infinite; }
-.worker-proposal-card[data-status="completed"] { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
-.worker-proposal-card[data-status="completed"] .worker-proposal-status { color: var(--success); background: var(--success-8); }
-.worker-proposal-card[data-status="declined"] .worker-proposal-status { color: var(--text-muted); background: rgba(var(--overlay-rgb), 0.04); }
-
-@keyframes worker-proposal-pulse { 50% { opacity: 0.55; } }
-
 @media (max-width: 720px) {
-  .worker-proposal-card { width: calc(100% - 24px); padding: 14px; }
-  .worker-proposal-config { grid-template-columns: 1fr 1fr; }
-  .worker-proposal-effort { grid-column: 1 / -1; }
-  .worker-proposal-status { display: none; }
+  .worker-proposal-card { width: calc(100% - 24px); padding: 12px; }
+}
+@media (pointer: coarse) {
+  .worker-runtime-picker > select { display: block; }
+  .worker-runtime-trigger { display: none; }
+  .worker-proposal-action, .worker-proposal-select { min-height: 40px; }
 }
+@media (prefers-reduced-motion: reduce) { .worker-proposal-brief > summary .lucide { transition: none; } }

package/lib/public/css/you.css

@@ -0,0 +1,74 @@
+/* You shares the Logs workbench and adds Clay's shell-level voice. */
+/* Me is a fixed Clay-only tool, sharing the palette's geometry. */
+body.clay-workspace-active #session-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+body.clay-workspace-active #session-actions .tool-btn-label { display: block; white-space: nowrap; word-break: normal; }
+#you-button { display: none; }
+body.clay-workspace-active #you-button { display: flex; }
+body.clay-workspace-active #sidebar-column #you-button.palette-tile > .lucide {
+  color: var(--brand-indigo);
+  background: #fff;
+  box-shadow: inset 0 0 0 1px rgba(88,87,252,.18), 0 1px 2px rgba(var(--shadow-rgb),.1), 0 3px 7px rgba(88,87,252,.16);
+}
+body.clay-workspace-active #sidebar-column #you-button.palette-tile:hover > .lucide {
+  color: var(--brand-indigo);
+  background: #fff;
+  box-shadow: inset 0 0 0 1px rgba(88,87,252,.3), 0 2px 3px rgba(var(--shadow-rgb),.1), 0 4px 9px rgba(88,87,252,.22);
+}
+body.clay-workspace-active #sidebar-column #you-button.palette-tile.active > .lucide {
+  box-shadow: inset 0 0 0 1px rgba(88,87,252,.4), 0 0 0 2px rgba(88,87,252,.12), 0 3px 7px rgba(88,87,252,.18);
+}
+#you-button .tool-btn-label { font-weight: 600; }
+#you-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+#session-actions [data-fixed="true"] { -webkit-user-drag: none; }
+#you-panel button:focus-visible, #you-activity button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.you-status { margin: 0; padding: 7px 14px; color: var(--text-muted); font-size: 12px; }
+.you-status:empty { display: none; }
+.you-pending { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12px; }
+.you-pending.hidden { display: none; }
+#you-panel .you-more, .you-pending button { border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; }
+.you-more { margin: 6px 14px; }
+.you-evidence { white-space: pre-wrap; margin: 12px 24px 24px; padding-top: 12px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
+.you-categories { position: relative; }
+.you-categories summary { display: flex; align-items: center; cursor: pointer; white-space: nowrap; }
+.you-category-options { position: absolute; right: 0; top: 42px; z-index: 2; min-width: 160px; max-height: 240px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); box-shadow: 0 3px 9px rgba(0,0,0,.12); }
+.you-category-options button { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
+.you-category-options button:hover, .you-category-options button[aria-pressed="true"] { background: var(--bg-alt); }
+#you-activity { display: none; position: relative; margin-left: 0; min-width: 0; max-width: 360px; }
+#you-activity.announcing { display: block; }
+#you-activity.announcing ~ .top-bar-brand-link { display: none; }
+#you-activity-toggle { position: relative; display: flex; align-items: center; height: 28px; width: 100%; padding: 0 10px; border: 1.5px solid var(--text-muted); border-radius: 15px 16px 14px 7px; background: var(--bg-alt); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+#you-activity-toggle::before, #you-activity-toggle::after { content: ''; position: absolute; left: 14px; bottom: -13px; width: 17px; height: 14px; background: var(--text-muted); clip-path: polygon(0 0, 100% 0, 35% 100%); pointer-events: none; }
+#you-activity-toggle::after { left: 15px; bottom: -10px; width: 14px; height: 11px; background: var(--bg-alt); }
+#you-activity-text { overflow: hidden; white-space: nowrap; text-overflow: clip; }
+#you-activity-history { position: absolute; left: 0; top: 38px; width: min(390px, calc(100vw - 80px)); max-height: min(520px, calc(100dvh - 70px)); overflow-y: auto; z-index: 500; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); box-shadow: 0 5px 18px rgba(0,0,0,.16); color: var(--text); }
+#you-activity-history header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
+#you-activity-history button { font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
+#you-activity-close { border: 0; background: transparent; }
+.you-activity-entry { display: grid; gap: 5px; width: 100%; padding: 10px 12px; text-align: left; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; line-height: 1.5; }
+.you-activity-entry:hover { background: var(--bg-alt); }
+.you-activity-entry small { color: var(--text-dimmer); font-size: 10px; }
+.you-activity-empty { padding: 10px 12px; color: var(--text-dimmer); font-size: 12px; }
+#you-activity-open, #you-activity-more { margin: 8px 12px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); }
+@media (max-width: 1023px) { #you-wide, #you-fullscreen { display: none; } }
+@media (max-width: 768px) {
+  #you-activity { margin-left: 0; max-width: 190px; }
+  #you-activity-toggle::before, #you-activity-toggle::after { display: none; }
+  #you-activity-history { width: min(340px, calc(100vw - 20px)); }
+  #you-panel .project-logs-subtitle { display: none; }
+  #you-panel .project-logs-window-actions { margin-left: auto; }
+}
+#you-activity .hidden, #you-panel .hidden { display: none; }
+@media (min-width: 769px) { #you-activity { max-width: min(360px, calc(50vw - 270px)); } }
+
+#you-announcement-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* The personal mark echoes the raised sidebar tool faces. */
+.me-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent); background: color-mix(in srgb, var(--brand-indigo) 13%, var(--bg)); border: 1px solid color-mix(in srgb, var(--brand-indigo) 26%, var(--border)); border-radius: 8px 8px 6px 8px; }
+.me-mark .lucide { width: 15px; height: 15px; stroke-width: 2; }
+.me-unread-badge { position: absolute; top: 3px; right: calc(50% - 24px); border: 1px solid var(--sidebar-bg); min-width: 15px; height: 15px; box-sizing: border-box; padding: 0 4px; border-radius: 8px; background: var(--brand-indigo); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; }
+.me-unread-badge[hidden] { display: none; }
+.me-new-badge { flex: 0 0 auto; color: var(--accent); background: color-mix(in srgb, var(--brand-indigo) 10%, transparent); border-radius: 4px; padding: 2px 5px; font-size: 10px; font-weight: 600; }
+
+.me-introduction { flex: 0 0 auto; margin: 0; padding: 12px 16px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; border-bottom: 1px solid var(--border-subtle); }
+
+@media (prefers-reduced-motion: reduce) { .you-button, .you-button > .lucide { transition: none; transform: none; } }

package/lib/public/index.html

@@ -56,6 +56,7 @@
   <!-- === Top Bar (full width, forms reverse-ㄱ with icon strip) === -->
   <div id="top-bar">
     <div class="top-bar-left-pills">
+      <a class="top-bar-brand-link" href="https://github.com/chadbyte/clay" target="_blank" rel="noopener noreferrer" aria-label="Clay Studio repository"><span class="top-bar-brand-wordmark" aria-hidden="true"></span></a>
       <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Open as app"><i data-lucide="download"></i> Open as app</button>
       <div id="update-pill-wrap" class="top-bar-update hidden">
         <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
@@ -81,114 +82,40 @@
 
   <!-- === Icon Strip === -->
   <div id="icon-strip">
-    <div class="icon-strip-home" title="Clay Studio">
-      <span class="icon-strip-pill"></span>
-      <img class="icon-strip-logo" src="clay-studio-symbol.png" width="38" height="38" alt="Clay Studio">
-      <span class="icon-strip-home-badge" id="icon-strip-home-badge"></span>
-    </div>
+    <button type="button" class="icon-strip-home icon-strip-brand" aria-label="Open Clay" disabled>
+      <img class="icon-strip-logo" src="clay-studio-symbol.png" width="38" height="38" alt="">
+    </button>
     <div class="icon-strip-separator"></div>
     <button type="button" class="icon-strip-hint" id="icon-strip-hint-project" data-switcher-mode="project" aria-label="Switch project"></button>
+    <div class="icon-strip-filter" id="icon-strip-filter">
+      <button type="button" class="icon-strip-filter-knob" id="icon-strip-filter-knob" data-mode="all" aria-label="Showing all. Activate to show projects only">
+        <span class="icon-strip-filter-face" aria-hidden="true">
+          <span class="icon-strip-filter-pointer"></span>
+          <span class="icon-strip-filter-category" data-filter-icon="all"><i data-lucide="layout-grid"></i></span>
+          <span class="icon-strip-filter-category" data-filter-icon="projects"><i data-lucide="folder"></i></span>
+          <span class="icon-strip-filter-category" data-filter-icon="mates"><i data-lucide="users"></i></span>
+        </span>
+        <span class="icon-strip-filter-label" id="icon-strip-filter-label">All</span>
+      </button>
+    </div>
     <div class="icon-strip-projects" id="icon-strip-projects">
       <div class="skeleton-icon-strip-item"></div>
       <div class="skeleton-icon-strip-item"></div>
     </div>
-    <button class="icon-strip-add" id="icon-strip-add" title="Add project"><i data-lucide="plus"></i></button>
+    <button class="icon-strip-add" id="icon-strip-add" type="button" title="Add" aria-label="Add a Mate or project" aria-haspopup="dialog"><i data-lucide="plus"></i></button>
     <div class="icon-strip-mate-section" id="icon-strip-mate-section">
       <button type="button" class="icon-strip-hint hidden" id="icon-strip-hint-mate" data-switcher-mode="mate" aria-label="Switch mate"></button>
       <div class="icon-strip-users hidden" id="icon-strip-users"></div>
     </div>
-    <div class="icon-strip-me" id="icon-strip-me"></div>
   </div>
 
   <!-- === Main Area (sidebar + resize-handle + main-column) === -->
   <div id="main-area">
     <section id="projects-hub" class="hidden" aria-label="Projects"></section>
-    <div id="home-hub" class="hidden">
-      <div class="home-hub-inner">
-        <button id="home-sidebar-backdrop" class="home-sidebar-backdrop" type="button" aria-label="Close Home navigation"></button>
-        <aside id="home-sidebar" class="home-sidebar" aria-label="Home navigation">
-          <div class="home-sidebar-brand-row">
-            <div class="home-sidebar-brand"><img src="/clay-studio-symbol.png" alt=""><span class="home-sidebar-brand-wordmark">Clay Studio</span></div>
-            <div class="home-sidebar-brand-actions">
-              <button id="home-sidebar-all" class="home-sidebar-icon-btn" type="button" title="Search chats" aria-label="Search chats"><i data-lucide="search"></i></button>
-              <button id="home-sidebar-collapse" class="home-sidebar-icon-btn" type="button" title="Collapse sidebar" aria-label="Collapse Home sidebar"><i data-lucide="panel-left-close"></i></button>
-            </div>
-          </div>
-          <nav class="home-sidebar-primary-actions" aria-label="Home actions">
-            <button id="home-nav-projects" class="home-sidebar-action" type="button" title="Projects" aria-label="Projects"><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="folder"></i></span><span>Projects</span></button>
-            <button id="home-sidebar-new" class="home-sidebar-action home-sidebar-new" type="button" title="New Chat" aria-label="Start a new chat with the current Mate" disabled><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="message-square-plus"></i></span><span>New Chat</span></button>
-            <button id="home-sidebar-debate" class="home-sidebar-action" type="button" title="Browse debates" aria-label="Browse debates" aria-pressed="false"><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="messages-square"></i></span><span>Debates</span></button>
-            <button id="home-tools-btn" class="home-sidebar-action" type="button" title="Capsules" aria-label="Capsules" aria-expanded="false" aria-controls="home-tool-workbench"><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="box"></i></span><span id="home-tools-label">Capsules</span><span id="home-tools-activity" class="home-tools-activity" aria-hidden="true"></span></button>
-          </nav>
-          <section class="home-sidebar-section home-sidebar-mate-section" aria-labelledby="home-sidebar-mate-label">
-            <button id="home-sidebar-mate-label" class="home-sidebar-label home-sidebar-mate-toggle" type="button" aria-expanded="true" aria-controls="home-mate-list"><span>Mates</span><i data-lucide="chevron-down" aria-hidden="true"></i></button>
-            <div id="home-mate-list" class="home-mate-list" role="list" aria-label="Mates"></div>
-          </section>
-          <section class="home-sidebar-section home-sidebar-recents" aria-labelledby="home-sidebar-recent-label">
-            <div class="home-sidebar-recents-heading">
-              <div id="home-sidebar-recent-label" class="home-sidebar-label">Chats</div>
-              <div class="home-chat-scope" role="group" aria-label="Chat scope">
-                <button class="home-chat-scope-option" type="button" data-home-chat-scope="current" aria-pressed="false" aria-controls="home-sidebar-recent-list">Current</button>
-                <button class="home-chat-scope-option" type="button" data-home-chat-scope="all" aria-pressed="true" aria-controls="home-sidebar-recent-list">All</button>
-              </div>
-            </div>
-            <div id="home-sidebar-recent-list" class="home-sidebar-recent-list"></div>
-          </section>
-        </aside>
-        <div id="home-workspace" class="home-workspace">
-          <button id="home-sidebar-expand" class="home-sidebar-expand" type="button" title="Show sidebar" aria-label="Show Home sidebar" aria-describedby="home-sidebar-expand-brand-label"><i data-lucide="panel-left-open"></i><span id="home-sidebar-expand-brand-label" class="home-sidebar-brand-wordmark home-sidebar-expand-wordmark">Clay Studio</span></button>
-          <button id="home-close-control" class="home-close-control" type="button" title="Return to project" aria-label="Return to project"><i data-lucide="folder" aria-hidden="true"></i><span>Project</span></button>
-          <section id="home-project-empty" class="home-project-empty" aria-labelledby="home-project-empty-title" hidden>
-            <div class="home-project-empty-content">
-              <span class="home-project-empty-icon" aria-hidden="true"><i data-lucide="folder-plus"></i></span>
-              <p class="home-project-empty-eyebrow">PROJECT WORKSPACE</p>
-              <h1 id="home-project-empty-title" tabindex="-1">Start a new project</h1>
-              <p id="home-project-empty-status" class="home-project-empty-status" role="status">Create an empty project, then continue in its workspace.</p>
-              <button id="home-project-empty-create" type="button">Start a new project</button>
-            </div>
-          </section>
-          <div id="home-conversation-region" class="home-conversation-region">
-            <div id="home-mate-chat" class="home-mate-chat">
-              <div class="home-mate-chat-stage">
-                <section id="home-debates-archive" class="home-debates-archive" aria-labelledby="home-debates-title" hidden>
-                  <header class="home-debates-header">
-                    <div>
-                      <p class="home-debates-eyebrow">Home archive</p>
-                      <h1 id="home-debates-title" tabindex="-1">Debates</h1>
-                      <p id="home-debates-summary" class="home-debates-summary" role="status" aria-live="polite">Loading debates…</p>
-                    </div>
-                    <button id="home-debates-new" class="home-debates-new" type="button"><i data-lucide="messages-square" aria-hidden="true"></i><span>New debate</span></button>
-                  </header>
-                  <form id="home-debates-topic-form" class="home-debates-topic-form" hidden>
-                    <label for="home-debates-topic">What should the debate be about?</label>
-                    <textarea id="home-debates-topic" rows="2" maxlength="1000" required placeholder="Enter a question or topic"></textarea>
-                    <div class="home-debates-topic-actions">
-                      <p id="home-debates-topic-status" role="status" aria-live="polite">Press Ctrl or Command + Enter to start.</p>
-                      <button id="home-debates-topic-cancel" type="button">Cancel</button>
-                      <button id="home-debates-topic-submit" type="submit">Start debate</button>
-                    </div>
-                  </form>
-                  <div id="home-debates-list" class="home-debates-list" aria-label="Debate archive"></div>
-                </section>
-                <div class="home-mate-chat-messages" id="home-mate-chat-messages"></div>
-                <button id="home-chat-new-activity" class="home-chat-new-activity" type="button" hidden><i data-lucide="arrow-down" aria-hidden="true"></i><span>New activity</span></button>
-                <div id="home-mate-chat-composer-frame" class="home-mate-chat-composer-frame">
-                  <div id="home-mate-chat-composer" class="home-mate-chat-composer">
-                    <textarea id="home-mate-chat-input" rows="1" placeholder="Message"></textarea>
-                    <button id="home-stt-btn" type="button" aria-label="Start voice input"><i data-lucide="mic"></i></button>
-                    <button id="home-mate-chat-send" aria-label="Send message"><i data-lucide="arrow-up"></i></button>
-                  </div>
-                  <div id="home-mate-chat-session-model" class="home-mate-chat-session-model" role="status" aria-live="polite" title="Model for this conversation: Loading model…">
-                    <i data-lucide="cpu" aria-hidden="true"></i><span>Conversation model</span><span aria-hidden="true">·</span><span id="home-mate-chat-session-model-value">Loading model…</span><button id="home-mate-chat-session-model-choose" class="hidden" type="button">Choose model</button>
-                  </div>
-                  <div id="home-debate-controls-slot" class="home-debate-controls-slot" hidden></div>
-                </div>
-                <div id="home-mate-chat-suggestions" class="home-mate-chat-suggestions"></div>
-              </div>
-            </div>
-          </div>
-          <div id="home-dock-backdrop" class="home-dock-backdrop"></div>
-          <div id="home-dock-divider" class="home-dock-divider" role="separator" aria-label="Resize Capsules Workbench" aria-orientation="vertical" tabindex="0"></div>
+    <!-- Retained inert Capsule host markup. Capsules and their stored data are
+         preserved for a future placement without keeping the Home board live. -->
+    <template id="retained-capsule-host-template">
+    <section id="retained-capsule-host" aria-label="Retained Capsules Workbench">
           <section id="home-tool-workbench" class="home-tool-workbench" aria-label="Capsules Workbench">
             <div class="home-dock-header">
               <button id="home-dock-return" class="home-dock-return" type="button"><i data-lucide="arrow-left"></i><span>Return to conversation</span></button>
@@ -201,15 +128,14 @@
             </div>
             <div class="home-dock-content" id="home-dock-content"></div>
           </section>
-        </div>
-      </div>
-    </div>
+    </section>
+    </template>
 
     <div id="sidebar-column">
       <div class="title-bar-sidebar">
         <button class="title-bar-project-dropdown" id="title-bar-project-dropdown">
           <span class="title-bar-project-icon" id="title-bar-project-icon" aria-hidden="true"></span>
-          <span class="title-bar-project-name" id="title-bar-project-name"></span>
+          <span class="title-bar-project-label"><span class="title-bar-project-name" id="title-bar-project-name"></span><span class="title-bar-project-default" id="title-bar-project-default"></span></span>
           <i data-lucide="chevron-down" class="title-bar-chevron"></i>
         </button>
         <span id="sidebar-presence" class="sidebar-presence"></span>
@@ -655,7 +581,6 @@
   <div id="mobile-tab-bar">
     <button class="mobile-tab" data-tab="chat" id="mob-tab-chat"><i data-lucide="message-square"></i><span class="mobile-tab-label">Chat</span></button>
     <button class="mobile-tab" data-tab="search" id="mob-tab-search"><i data-lucide="search"></i><span class="mobile-tab-label">Search</span></button>
-    <button class="mobile-tab-home" id="mobile-home-btn"><img src="/clay-studio-symbol.png" alt="Clay Studio home" class="mobile-home-icon"></button>
     <button class="mobile-tab" data-tab="tools" id="mob-tab-tools"><i data-lucide="wrench"></i><span class="mobile-tab-label">Tools</span></button>
     <button class="mobile-tab" data-tab="settings" id="mob-tab-settings"><i data-lucide="settings"></i><span class="mobile-tab-label">Settings</span></button>
   </div>
@@ -941,13 +866,16 @@
 
   <!-- === User Island === -->
   <div id="user-island">
-    <div class="user-island-profile">
+    <button class="user-island-profile" id="user-account-trigger" type="button" aria-label="Open account menu" aria-controls="account-popover" aria-expanded="false">
       <div class="user-island-avatar"><span class="user-island-avatar-letter">?</span></div>
       <div class="user-island-info">
         <span class="user-island-name"></span>
         <span class="user-island-cta hidden">Personalize your name</span>
       </div>
-    </div>
+    </button>
+    <button id="cursor-share-toggle" class="cursor-share-toggle" type="button" aria-pressed="false" aria-label="Cursor sharing unavailable" disabled>
+      <i data-lucide="mouse-pointer-2" class="cursor-share-icon" aria-hidden="true"></i>
+    </button>
     <div class="user-island-actions">
       <button id="user-settings-btn" title="User settings"><i data-lucide="settings"></i></button>
     </div>
@@ -1161,7 +1089,7 @@
             <label class="settings-toggle-row">
               <div>
                 <span class="settings-label">Mate DMs in projects</span>
-                <div class="settings-hint">Show Mate DM shortcuts in project workspaces. Home, Debates, mentions, and Mate memory stay available.</div>
+                <div class="settings-hint">Show Mate DM shortcuts in project workspaces. Debates, mentions, and Mate memory stay available.</div>
               </div>
               <input type="checkbox" id="us-mates-enabled">
               <span class="toggle-track"><span class="toggle-thumb"></span></span>
@@ -2274,6 +2202,10 @@
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0/lib/addon-fit.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0/lib/addon-web-links.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0/lib/addon-webgl.min.js"></script>
+<script src="vendor/codemirror/codemirror.js"></script>
+<script src="vendor/codemirror/markdown.js"></script>
+<script src="vendor/codemirror/continuelist.js"></script>
+<script src="vendor/codemirror/show-hint.js"></script>
   <script type="module" src="app.js?v=20260913-scheduled-tasks4"></script>
 <div id="pwa-install-modal" class="pwa-modal hidden">
   <div class="pwa-modal-backdrop"></div>