openclacky 1.3.2 → 1.3.4

data/lib/clacky/web/app.css

@@ -526,7 +526,7 @@ body {
 /* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
    BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
 #sidebar {
-  --sidebar-width: 15rem;
+  --sidebar-width: 16rem;
   width: var(--sidebar-width);
   min-width: var(--sidebar-width);
   background: var(--color-bg-primary);
@@ -1929,63 +1929,175 @@ body {
 #chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
 #chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
 
-/* ── Workspace panel (right file browser) ───────────────────────────────── */
-#workspace-panel {
-  --workspace-width: 280px;
-  width: var(--workspace-width);
+/* ── Session extension slots (agent-scoped panels mount here) ───────────────
+   Each slot is laid out by the host; an empty slot collapses to zero so it
+   never reserves space when no panel is mounted for the current agent. */
+/* ── Session aside — one resizable / collapsible right column with tabs ─────
+   The host owns the chrome (resize handle, collapse button, floating opener);
+   Clacky.ext renders the tab bar + bodies into #ext-slot-session-aside. When
+   the slot has no panels for the current agent it stays empty and the whole
+   column collapses to zero width. */
+#session-aside {
+  --session-aside-width: 16rem;
+  width: var(--session-aside-width);
   flex-shrink: 0;
+  position: relative;
   display: flex;
   flex-direction: column;
-  border-left: 1px solid var(--color-border-primary);
-  background: var(--color-bg-primary);
   overflow: hidden;
+  border-left: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
   transition: width var(--transition-base);
-  position: relative;
 }
-#workspace-panel.collapsed { width: 0; border-left: none; }
-#workspace-resize-handle {
+#session-aside.collapsed { width: 0; border-left: none; }
+/* Empty slot (no panels for this agent) → collapse the whole column. */
+#session-aside:has(.session-aside-slot:empty) { width: 0; border-left: none; }
+#session-aside:has(.session-aside-slot:empty) .session-aside-resize,
+#session-aside:has(.session-aside-slot:empty) .session-aside-collapse { display: none; }
+
+.session-aside-resize {
   position: absolute;
   top: 0;
-  left: -3px;
+  left: -6px;
   bottom: 0;
-  width: 6px;
+  width: 12px;
   cursor: col-resize;
   z-index: 10;
+  background: transparent;
 }
-#workspace-panel:has(#workspace-resize-handle.active) {
+.session-aside-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 6px;
+  width: 1px;
+  background: transparent;
   transition: background-color var(--transition-base);
 }
-#workspace-header {
-  display: flex;
+.session-aside-resize:hover::after,
+.session-aside-resize.active::after { background: transparent; }
+
+.session-aside-collapse {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  z-index: 11;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  height: 2.5rem;
-  min-height: 2.5rem;
-  padding: 0 0.5rem 0 0.75rem;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+.session-aside-collapse:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+
+.session-aside-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+
+/* Tab bar (rendered by Clacky.ext). Leaves room on the right for the collapse
+   button which is absolutely positioned over it. */
+.aside-tabs {
+  flex: none;
+  display: flex;
+  align-items: stretch;
+  height: 40px;
+  padding: 0 38px 0 4px;
+  gap: 2px;
   border-bottom: 1px solid var(--color-border-primary);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-.workspace-header-actions { display: flex; gap: 0.125rem; }
-.workspace-icon-btn {
+.aside-tabs::-webkit-scrollbar { display: none; }
+.aside-tab {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  gap: 6px;
+  padding: 0 12px;
+  white-space: nowrap;
+  cursor: pointer;
   border: none;
-  background: transparent;
+  background: none;
+  font-size: 12.5px;
+  color: var(--color-text-tertiary);
+  border-bottom: 2px solid transparent;
+}
+.aside-tab:hover { color: var(--color-text-secondary); }
+.aside-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-primary); font-weight: 600; }
+.aside-tab-badge {
+  font-size: 10px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent-primary);
+  color: var(--color-text-inverse);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aside-bodies { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.aside-panel { flex: 1; min-height: 0; overflow: auto; display: none; flex-direction: column; }
+.aside-panel.active { display: flex; }
+
+/* Floating opener shown when the column is collapsed. */
+.session-aside-opener {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
   color: var(--color-text-secondary);
   border-radius: var(--radius-sm);
   cursor: pointer;
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
   transition: background-color var(--transition-base), color var(--transition-base);
 }
-.workspace-icon-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
-#workspace-tree {
+.session-aside-opener:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+
+.session-banner:empty,
+.session-composer:empty { display: none; }
+.session-banner { flex-shrink: 0; }
+.session-composer { flex-shrink: 0; }
+
+/* ── File tree (used inside the Files tab) ──────────────────────────────── */
+.wt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.wt-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+.wt-bar-hint { font-size: 11px; color: var(--color-text-tertiary); }
+.wt-bar-btn {
+  flex: none;
+  padding: 3px 10px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+}
+.wt-bar-btn:hover { background: var(--color-bg-hover); }
+.wt-tree {
   flex: 1;
   overflow-y: auto;
-  padding: 0.375rem 0.25rem;
+  padding: 6px 8px;
   font-size: 0.8125rem;
   font-family: var(--font-mono);
 }
@@ -2022,26 +2134,6 @@ body {
 }
 .wt-error { color: var(--color-danger, #d23); }
 
-/* Collapsed-state opener tab — floats at the right edge of the chat area */
-#btn-workspace-open {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 8;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--color-border-primary);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background-color var(--transition-base), color var(--transition-base);
-}
-#btn-workspace-open:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
-
 /* Mobile-only floating back button — replaces the old in-header back button.
    Hidden on desktop; mobile media query enables it. Positioned absolutely so
    it doesn't take layout space or add visual chrome on desktop. */
@@ -2179,19 +2271,143 @@ body {
   /* Sit above the next message in case text would otherwise clip beneath it. */
   z-index: 1;
 }
-.msg:hover .msg-time {
+.msg:hover .msg-time,
+.msg-user-wrap:hover .msg-time {
   opacity: 1;
   transform: translateY(0);
 }
 /* Time color / alignment: anchor to the bubble's own side, let width be
    driven by content — prevents overflow on narrow bubbles. */
-.msg-user .msg-time      { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
+/* User timestamp: appended to .msg-user-wrap (not bubble), sits below action
+   buttons, right-aligned. */
+.msg-user-wrap > .msg-time { color: var(--color-text-secondary); top: auto; bottom: 0.2rem; right: 0; left: auto; padding-right: 0.25rem; }
 .msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
 
-.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; }
+.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); white-space: pre-wrap; }
 [data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
 .msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
 
+/* ── User message action bar (copy + edit) ─────────────────────────────── */
+.msg-user-wrap {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 3rem;
+}
+.msg-user-actions {
+  position: absolute;
+  bottom: 1.1rem;
+  right: 0;
+  display: flex;
+  gap: 0.125rem;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+  z-index: 3;
+}
+.msg-user-wrap:hover .msg-user-actions { opacity: 1; pointer-events: auto; }
+.msg-user-wrap:has(.msg-user.editing) { padding-bottom: 0; }
+.msg-user-wrap:has(.msg-user.editing) .msg-user-actions { display: none; }
+.msg-user-wrap:has(.msg-user.editing) .msg-time { display: none; }
+
+.msg-user-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  padding: 0;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 5px;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.msg-user-action-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-tertiary);
+}
+.msg-user-action-btn:active { transform: translateY(1px); }
+.msg-user-action-btn.is-copied {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+.msg-user-copy-icon-check { display: none; }
+.msg-user-action-btn.is-copied .msg-user-copy-icon { display: none; }
+.msg-user-action-btn.is-copied .msg-user-copy-icon-check { display: inline; }
+
+/* Keep the buttons reachable without hover on touch / narrow viewports. */
+@media (hover: none) {
+  .msg-user-actions { opacity: 0.65; pointer-events: auto; }
+}
+
+/* ── Edit mode ─────────────────────────────────────────────────────────── */
+.msg-user.editing {
+  background: var(--color-bg-primary);
+  padding: 0.625rem 0.75rem 0.5rem;
+  overflow: visible;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-primary);
+  max-width: min(42rem, 90%);
+  width: min(42rem, 90%);
+}
+.msg-user-edit-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+.msg-user-edit-textarea {
+  width: 100%;
+  min-height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  resize: none;
+  overflow: hidden;
+  outline: none;
+  white-space: pre-wrap;
+}
+.msg-user-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+}
+.msg-user-edit-cancel {
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.msg-user-edit-cancel:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.msg-user-edit-send {
+  padding: 0.25rem 0.75rem;
+  border: none;
+  border-radius: 5px;
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+.msg-user-edit-send:hover { opacity: 0.88; }
+.msg-user-edit-send:active { opacity: 0.76; }
+
 /* ── Copy button on assistant messages ────────────────────────────────────
    Hidden by default, revealed on bubble hover (same pattern as .msg-time).
    On touch devices (hover: none) we keep the button visible at low opacity
@@ -2225,8 +2441,8 @@ body {
 }
 .msg-copy-btn.is-copied {
   opacity: 1;
-  color: #10b981;               /* success green — same across themes */
-  border-color: #10b981;
+  color: var(--color-success);
+  border-color: var(--color-success);
   background: var(--color-bg-primary);
 }
 .msg-copy-btn .msg-copy-icon,
@@ -2838,7 +3054,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding: 0.375rem 0.75rem;
   margin-left: 1.5rem;
   margin-right: 1.5rem;
@@ -2848,13 +3064,17 @@ body {
   color: var(--color-text-tertiary);
   font-family: var(--font-mono, monospace);
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
   flex-shrink: 0;
   opacity: 0.95;
   transition: opacity 0.15s ease;
   cursor: default;
 }
 
+#session-info-bar::-webkit-scrollbar { display: none; }
+
 #session-info-bar .sib-sep {
   opacity: 0.3;
 }
@@ -4097,7 +4317,6 @@ body {
   padding: 2rem 2rem 1.5rem;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
 }
 .settings-section {
   display: flex;
@@ -4182,6 +4401,15 @@ body {
 }
 
 /* ── Backup section ── */
+.backup-auto-card {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  padding: 0.625rem 0.875rem;
+  background: var(--color-bg-secondary);
+}
+.backup-auto-card .backup-auto-row {
+  margin: 0.25rem 0;
+}
 .backup-option,
 .backup-auto-label {
   font-size: 0.8125rem;
@@ -4193,6 +4421,11 @@ body {
 .backup-option {
   margin: 0.75rem 0;
 }
+.backup-option-nested {
+  margin: 0.5rem 0 0.25rem 2.75rem;
+  font-size: 0.78125rem;
+  color: var(--color-text-secondary);
+}
 .backup-auto-row {
   display: flex;
   align-items: center;
@@ -4208,7 +4441,6 @@ body {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin: 0.75rem 0;
   flex-wrap: wrap;
 }
 
@@ -4355,7 +4587,6 @@ body {
   font-size: 0.8125rem;
   color: var(--color-text-primary);
   cursor: pointer;
-  margin-top: 0.5rem;
 }
 .model-field-checkbox input[type="checkbox"] {
   width: 15px;
@@ -4552,7 +4783,7 @@ body {
 /* ── Model Cards Grid Container ─────────────────────────────────────────────── */
 #model-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
 }
 
@@ -4609,7 +4840,6 @@ body {
   color: var(--color-text-secondary);
   font-family: var(--font-mono, monospace);
   background: var(--color-bg-tertiary);
-  padding: 0.125rem 0.375rem;
   border-radius: 4px;
   display: inline-block;
   max-width: 100%;
@@ -6471,24 +6701,14 @@ body {
   white-space: nowrap;
 }
 .brand-skill-version.installed {
-  background: #1f3a5f;
-  color: #7eb8f7;
-  border: 1px solid #1d4070;
+  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+  color: var(--color-accent-primary);
+  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
 }
 .brand-skill-version.latest {
-  background: #1f4e9e;
-  color: #bfdbfe;
-  border: 1px solid #1d4070;
-}
-[data-theme="light"] .brand-skill-version.installed {
-  background: #eff6ff;
-  color: #1d4ed8;
-  border: 1px solid #bfdbfe;
-}
-[data-theme="light"] .brand-skill-version.latest {
-  background: #1d4ed8;
+  background: var(--color-accent-primary);
   color: #ffffff;
-  border: 1px solid #1e40af;
+  border: 1px solid var(--color-accent-primary);
 }
 .brand-skill-update-arrow {
   color: var(--color-text-secondary);
@@ -6568,17 +6788,11 @@ body {
   border-color: var(--color-accent-primary);
 }
 .btn-brand-update {
-  background: #1f4e9e;
-  color: #bfdbfe;
-  border: 1px solid #1d4070;
-}
-.btn-brand-update:hover { background: #1a3f85; }
-[data-theme="light"] .btn-brand-update {
-  background: #1d4ed8;
+  background: var(--color-accent-primary);
   color: #ffffff;
-  border: 1px solid #1e40af;
+  border: 1px solid var(--color-accent-primary);
 }
-[data-theme="light"] .btn-brand-update:hover { background: #1e40af; }
+.btn-brand-update:hover { background: var(--color-accent-hover); }
 .btn-brand-install:disabled,
 .btn-brand-update:disabled {
   opacity: 0.5;
@@ -6619,6 +6833,139 @@ body {
   border-color: var(--color-error-border, #f5c6c6);
   background: var(--color-error-bg, #fff0f0);
 }
+.btn-skill-edit {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.btn-skill-edit:hover {
+  color: var(--color-text-primary);
+  border-color: var(--color-border-primary);
+  background: var(--color-bg-hover);
+}
+
+
+/* ── CodeEditor (CodeMirror 6) Modal ────────────────────────────────────── */
+.code-editor-modal {
+  background: var(--color-bg-secondary);
+  border-radius: 12px;
+  border: 1px solid var(--color-border-primary);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+  width: 92%;
+  max-width: 820px;
+  height: 82vh;
+  max-height: 860px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.code-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.code-editor-header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+  color: var(--color-text-primary);
+}
+.code-editor-close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 0;
+}
+.code-editor-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.code-editor-body {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.code-editor-body .cm-editor {
+  height: 100%;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  background: transparent;
+}
+.code-editor-body .cm-editor .cm-content {
+  background: transparent;
+}
+.code-editor-body .cm-editor.cm-focused {
+  outline: none;
+}
+.code-editor-body .cm-scroller {
+  overflow: auto;
+  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+}
+.code-editor-body .cm-gutters {
+  background: transparent;
+  border-right: 1px solid var(--color-border-primary);
+  color: var(--color-text-tertiary);
+}
+
+.code-editor-body .cm-activeLineGutter {
+  background: var(--color-bg-hover);
+}
+.code-editor-body .cm-activeLine {
+  background: var(--color-bg-hover);
+}
+.code-editor-body .cm-selectionBackground {
+  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent) !important;
+}
+.code-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+  gap: 0.75rem;
+}
+.code-editor-status {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
+.code-editor-status-error {
+  color: var(--color-error, #c0392b);
+}
+.code-editor-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.code-editor-modal--image .code-editor-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-primary);
+  overflow: auto;
+}
+.code-editor-img-preview {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+}
 
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
 #skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
@@ -7052,28 +7399,35 @@ body.setup-mode[data-theme="dark"] {
   transform: translateY(1px);
 }
 #setup-device-error {
-  margin-top: 0.5rem;
+  margin-top: 0;
+  min-height: 0;
 }
 #setup-device-error.result-fail { color: var(--color-error); }
 
 /* Manual-config collapsible (secondary path) */
-#setup-manual-details {
-  margin-top: 0.25rem;
-}
-#setup-manual-summary {
+#setup-manual-toggle {
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0;
+  background: none;
+  border: none;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--color-text-secondary);
   text-align: center;
-  list-style: none;
-  padding: 0.5rem 0;
+  text-decoration: underline;
+  text-underline-offset: 3px;
   user-select: none;
+  transition: color 0.15s;
 }
-#setup-manual-summary::-webkit-details-marker { display: none; }
-#setup-manual-summary:hover { color: var(--color-text-primary); }
-#setup-manual-details[open] #setup-manual-summary {
-  margin-bottom: 0.5rem;
-  border-bottom: 1px solid var(--color-border-primary);
+#setup-manual-toggle:hover {
+  color: var(--color-text-primary);
+}
+#setup-manual-section {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border-primary);
 }
 
 /* Bottom action row: [← Back]  [Test & Continue →] */
@@ -8690,6 +9044,29 @@ body.setup-mode[data-theme="dark"] {
   cursor: wait;
 }
 
+.profile-pane-footer-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.btn-profile-edit {
+  padding: 0.5rem 1.125rem;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.btn-profile-edit:hover {
+  border-color: var(--color-button-primary);
+  color: var(--color-button-primary);
+}
+
 /* ── Minimal-Markdown rendered body ───────────────────────────────────── */
 .profile-markdown {
   font-size: 0.8438rem;
@@ -8830,6 +9207,7 @@ body.setup-mode[data-theme="dark"] {
 
 /* Shared base for per-card buttons. */
 .btn-memory-curate,
+.btn-memory-edit,
 .btn-memory-delete,
 .btn-memory-expand {
   padding: 0.3125rem 0.625rem;
@@ -8845,7 +9223,8 @@ body.setup-mode[data-theme="dark"] {
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
-.btn-memory-curate:hover {
+.btn-memory-curate:hover,
+.btn-memory-edit:hover {
   border-color: var(--color-text-primary);
   background: var(--color-bg-hover);
 }
@@ -11712,4 +12091,35 @@ body.setup-mode[data-theme="dark"] {
     font-size: 0.7rem;
     color: var(--color-text-tertiary);
   }
+
+  /* Session aside: fixed overlay on mobile */
+  #session-aside {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    z-index: 200;
+    box-shadow: -4px 0 24px rgba(0,0,0,0.18);
+    transition: transform 0.3s ease, background-color 0.3s ease;
+    transform: translateX(0);
+    width: var(--session-aside-width);
+  }
+  #session-aside.collapsed {
+    transform: translateX(100%);
+    width: var(--session-aside-width);
+    border-left: 1px solid var(--color-border-primary);
+  }
+  #session-aside-resize { display: none; }
+
+  #workspace-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 199;
+    background: rgba(0,0,0,0.4);
+  }
+  #workspace-overlay.active {
+    display: block;
+  }
 }
+