privateboard 0.1.37 → 0.1.40

package/public/agent-profile.css

@@ -899,7 +899,7 @@
   color: var(--text-soft);
   text-transform: uppercase;
   background: transparent;
-  border: 0.5px solid var(--line-bright);
+  border: 0.5px solid var(--line-strong);
   padding: 3px 8px;
   cursor: pointer;
   transition: border-color 0.12s, color 0.12s, background 0.12s;
@@ -1167,7 +1167,7 @@
   line-height: 1;
 }
 .dream-z.z1 { left: 14%;  font-size: 18px; animation-delay: 0s;    }
-.dream-z.z2 { left: 30%;  font-size: 13px; animation-delay: 0.6s;  }
+.dream-z.z2 { left: 30%;  font-size: 14px; animation-delay: 0.6s;  }
 .dream-z.z3 { left: 50%;  font-size: 11px; animation-delay: 1.2s;  }
 .dream-z.z4 { left: 70%;  font-size: 16px; animation-delay: 1.7s;  }
 .dream-z.z5 { left: 86%;  font-size: 12px; animation-delay: 2.4s;  }
@@ -1639,13 +1639,6 @@
   height: 76px;
   margin-top: -46px;
   margin-bottom: 0;
-  border-radius: 50%;
-  background: var(--panel-2);
-  /* Ring color follows the page bg so the avatar reads as separated
-     from the cover gradient on every theme · in light themes the ring
-     is white against the gray cover; in dark themes the ring is the
-     near-black bg against the panel-toned cover. */
-  border: 4px solid var(--bg);
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -1657,8 +1650,9 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
+  /* The 3D-avatar portrait is a smooth downscaled PNG · keep it smooth
+     (pixelated would render it blocky at this size). */
+  image-rendering: auto;
 }
 /* Text column · sits to the right of the avatar in the same row,
    so name + meta read as one tight identifier block. */
@@ -2439,7 +2433,7 @@
 }
 .ap-stat-v {
   font-family: var(--mono);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text);
   letter-spacing: -0.005em;
@@ -2568,6 +2562,54 @@
   border-top: none;
   padding-top: 5px;
 }
+/* Cloned voices group · lime kicker so user-owned customs stand out
+   from system / premade voices below them. Same density as the
+   regular group header, just colored. */
+.ap-model-group.ap-model-group-cloned {
+  color: var(--lime);
+}
+.ap-model-opt.ap-model-opt-cloned .ap-model-opt-label {
+  color: var(--text);
+  font-weight: 600;
+}
+.ap-model-opt.ap-model-opt-cloned::before {
+  content: "✦";
+  color: var(--lime);
+  margin-right: 6px;
+  font-size: 10px;
+}
+/* Row wrapper for inline rename · holds the option button + an
+   optional ✎ chip. Hover anywhere on the row reveals the chip. */
+.ap-model-opt-row {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+.ap-model-opt-row .ap-model-opt {
+  flex: 1;
+  min-width: 0;
+}
+.ap-model-opt-rename {
+  flex-shrink: 0;
+  width: 28px;
+  background: transparent;
+  border: 0;
+  border-left: 0.5px solid var(--line);
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.14s, color 0.14s, background 0.14s;
+}
+.ap-model-opt-row:hover .ap-model-opt-rename,
+.ap-model-opt-rename:focus-visible {
+  opacity: 1;
+}
+.ap-model-opt-rename:hover {
+  color: var(--lime);
+  background: var(--panel-2);
+}
 
 /* Row · single-line label + uppercase mono hint, baseline-aligned,
    same vertical rhythm as .cmp-dd-opt. No per-row divider. */
@@ -2920,7 +2962,7 @@
 .ap-instr-view em { color: var(--text-soft); font-style: italic; }
 .ap-instr-view code {
   font-family: var(--mono);
-  font-size: 13px;
+  font-size: 14px;
   background: var(--bg);
   border: 0.5px solid var(--line-bright);
   padding: 1px 5px;
@@ -2937,7 +2979,7 @@
   background: transparent;
   border: none;
   padding: 0;
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.5;
 }
 
@@ -3419,7 +3461,7 @@
 }
 .ap-ulm-claim {
   font-family: var(--font-human);
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.5;
   color: var(--text);
   letter-spacing: -0.003em;
@@ -3432,7 +3474,7 @@
   border: 0.5px solid var(--text-soft);
   color: var(--text);
   font-family: var(--font-human);
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.5;
   padding: 8px 10px;
   outline: none;
@@ -3988,11 +4030,251 @@
 .ap-skill-info-configure-mark { font-size: 12px; }
 
 /* ── Voice configuration panel ───────────────────────────── */
-/* The wrapping `.ap-voice-config` no longer needs spacing of its
-   own — the parent `.ap-block-body` already handles padding now
-   that Voice Setup is its own section (was nested inside Track
-   Record before, where the inner offset disambiguated it from
-   the model row above). */
+/* The wrapping `.ap-voice-config` no longer needs outer spacing of
+   its own — `.ap-block-body` already handles padding. Inside, each
+   logical group (voice picker / emotion / preview line / clone /
+   advanced) lives in its own `.ap-voice-section`. Sections separate
+   with a hairline divider on top so the user can scan "what knob
+   am I touching" without the panel feeling like a wall of mixed
+   inputs. Each section can optionally carry an `.ap-voice-section-head`
+   mono kicker label naming the group. */
+.ap-voice-config {
+  display: flex;
+  flex-direction: column;
+}
+.ap-voice-section {
+  padding: 14px 0;
+  border-top: 0.5px solid var(--line-bright);
+}
+.ap-voice-section:first-child {
+  padding-top: 0;
+  border-top: none;
+}
+.ap-voice-section:last-child {
+  padding-bottom: 0;
+}
+.ap-voice-section-head {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 10px;
+  display: block;
+}
+.ap-voice-section-head::before {
+  content: "// ";
+  color: color-mix(in srgb, var(--lime) 60%, var(--text-faint));
+}
+
+/* Clone voice trigger · sits below the advanced sliders, reads
+   as a single CTA row (icon + title + hint) rather than a row of
+   chips, mirroring `.ap-skill-info-configure` button gravity.
+   Click opens the boardroomVoiceClone overlay (public/voice-clone.js). */
+/* Custom preview text row · the wrapping `.ap-voice-section` owns
+   the section header now; this just holds the textarea. */
+.ap-voice-preview-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ap-voice-preview-text {
+  width: 100%;
+  resize: vertical;
+  min-height: 48px;
+  max-height: 140px;
+  padding: 8px 10px;
+  background: var(--panel-2);
+  border: 0.5px solid var(--line-bright);
+  border-radius: 6px;
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color 0.12s;
+}
+.ap-voice-preview-text:focus { border-color: var(--lime); }
+.ap-voice-preview-text::placeholder {
+  color: var(--text-faint);
+  font-style: italic;
+}
+
+/* ── "Forge Voice" CTA · HUD-styled trigger ─────────────────────
+   The clone overlay is the most playful surface in the agent
+   profile, so the CTA gets a gamified hardware-HUD look rather
+   than a plain dashed-border card: lime L corners (same vocabulary
+   as the room-settings modal frame), a pulsing mic rune, mono
+   uppercase title with bracketed arrow, a slow horizontal
+   scan-line sweep on hover, and a soft lime glow when focused. */
+.ap-voice-forge {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  row-gap: 6px;
+  width: 100%;
+  padding: 14px 18px 12px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--lime) 6%, var(--panel-2)) 0%,
+    var(--panel-2) 68%
+  );
+  border: 0.5px solid color-mix(in srgb, var(--lime) 36%, var(--line-bright));
+  border-radius: 4px;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  isolation: isolate;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
+}
+.ap-voice-forge:hover {
+  border-color: var(--lime);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--lime) 24%, transparent),
+    0 8px 26px -14px color-mix(in srgb, var(--lime) 60%, transparent);
+}
+.ap-voice-forge:active { transform: translateY(1px); }
+
+/* Corner brackets · four lime L shapes pinned to each corner. */
+.ap-voice-forge-corner {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid var(--lime);
+  pointer-events: none;
+  z-index: 2;
+  transition: width 0.18s, height 0.18s;
+}
+.ap-voice-forge-corner-tl { top: -1px;    left: -1px;    border-right: none; border-bottom: none; }
+.ap-voice-forge-corner-tr { top: -1px;    right: -1px;   border-left: none;  border-bottom: none; }
+.ap-voice-forge-corner-bl { bottom: -1px; left: -1px;    border-right: none; border-top: none; }
+.ap-voice-forge-corner-br { bottom: -1px; right: -1px;   border-left: none;  border-top: none; }
+.ap-voice-forge:hover .ap-voice-forge-corner { width: 14px; height: 14px; }
+
+/* Horizontal scan-line sweep · slow lime gradient slides L→R on
+   hover. Sits behind text. */
+.ap-voice-forge-scan {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 38%,
+    color-mix(in srgb, var(--lime) 18%, transparent) 50%,
+    transparent 62%,
+    transparent 100%
+  );
+  background-size: 260% 100%;
+  background-position: -120% 0;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+.ap-voice-forge:hover .ap-voice-forge-scan {
+  opacity: 1;
+  animation: ap-voice-forge-scan-sweep 2.4s linear infinite;
+}
+@keyframes ap-voice-forge-scan-sweep {
+  0%   { background-position: -120% 0; }
+  100% { background-position:  220% 0; }
+}
+
+.ap-voice-forge-kicker {
+  position: relative;
+  z-index: 3;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--lime) 80%, var(--text));
+}
+
+.ap-voice-forge-body {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ap-voice-forge-rune {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--lime);
+  border: 0.5px solid color-mix(in srgb, var(--lime) 45%, transparent);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--lime) 8%, transparent);
+}
+.ap-voice-forge-rune svg { width: 18px; height: 18px; }
+.ap-voice-forge-rune::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: 6px;
+  border: 0.5px solid color-mix(in srgb, var(--lime) 50%, transparent);
+  opacity: 0;
+  transition: opacity 0.18s;
+  pointer-events: none;
+}
+.ap-voice-forge:hover .ap-voice-forge-rune::after {
+  opacity: 1;
+  animation: ap-voice-forge-rune-pulse 1.4s ease-in-out infinite;
+}
+@keyframes ap-voice-forge-rune-pulse {
+  0%, 100% { transform: scale(1);    opacity: 0.65; }
+  50%      { transform: scale(1.18); opacity: 0;    }
+}
+.ap-voice-forge-title {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--mono);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ap-voice-forge-title::before { content: "[ + "; color: var(--text-faint); }
+.ap-voice-forge-title::after  { content: " ]";   color: var(--text-faint); }
+.ap-voice-forge:hover .ap-voice-forge-title::before,
+.ap-voice-forge:hover .ap-voice-forge-title::after { color: var(--lime); }
+.ap-voice-forge-arrow {
+  flex-shrink: 0;
+  font-family: var(--mono);
+  font-size: 18px;
+  line-height: 1;
+  color: var(--lime);
+  transform: translateX(0);
+  transition: transform 0.18s ease;
+}
+.ap-voice-forge:hover .ap-voice-forge-arrow { transform: translateX(4px); }
+
+.ap-voice-forge-hint {
+  position: relative;
+  z-index: 3;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-faint);
+  letter-spacing: 0.02em;
+  line-height: 1.55;
+}
+.ap-voice-forge-hint::before {
+  content: "// ";
+  color: color-mix(in srgb, var(--lime) 60%, var(--text-faint));
+}
+
 .ap-voice-picker-row {
   display: flex;
   align-items: center;
@@ -4078,7 +4360,6 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  margin-top: 8px;
 }
 .ap-voice-emotion-row .ap-voice-emotion-trigger {
   width: 100%;
@@ -4299,45 +4580,54 @@
   pointer-events: none;
   z-index: 0;
 }
+/* Advanced tuning · sits at the very bottom of the voice block,
+   under the Forge CTA. Plain header row — no chip / no border / no
+   background — so it reads as "extra knobs if you need them" rather
+   than another card vying for attention. Only the top hairline
+   divider remains for section separation; the `+ / −` marker uses
+   lime to stay legible in both light and dark themes. */
+/* Advanced details wrapper · now lives inside its own
+   .ap-voice-section, which already supplies the top divider +
+   vertical padding. Strip the duplicate spacing/border so the
+   chevron row aligns with neighbouring section headers. */
 .ap-voice-advanced {
-  margin-top: 10px;
-  border-top: 1px solid var(--line);
-  padding-top: 8px;
+  margin: 0;
+  border-top: 0;
+  padding-top: 0;
 }
-/* Header row · label on the left, custom expand/collapse indicator
-   on the right. Removes the browser's default ▶ disclosure triangle
-   on the left so the row reads as a clean section header rather
-   than a list item. The right-edge `+ / −` glyph swaps when
-   [open] is set — same hairline mono register the rest of the
-   profile uses for header actions. */
 .ap-voice-advanced summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  padding: 4px 0;
   font-family: var(--mono, monospace);
-  font-size: 10px;
-  letter-spacing: 0.04em;
+  font-size: 11px;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--text-soft);
   cursor: pointer;
   user-select: none;
   list-style: none;
+  transition: color 0.12s;
 }
 .ap-voice-advanced summary::-webkit-details-marker { display: none; }
 .ap-voice-advanced summary::marker { display: none; content: ""; }
 .ap-voice-advanced summary::after {
   content: "+";
   font-family: var(--mono, monospace);
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 1;
-  color: var(--text-faint);
-  transition: color 0.12s;
+  color: var(--lime);
+  transition: color 0.12s, transform 0.18s ease;
+}
+.ap-voice-advanced[open] summary::after {
+  content: "−";
+  transform: rotate(180deg);
 }
-.ap-voice-advanced[open] summary::after { content: "−"; }
 .ap-voice-advanced summary:hover { color: var(--text); }
-.ap-voice-advanced summary:hover::after { color: var(--text); }
+.ap-voice-advanced summary:hover::after { color: var(--lime); }
 
 /* ────────────────────────────────────────────────────────────
    Persona dossier · Full-mode agents only
@@ -4687,7 +4977,7 @@ html.is-electron-mac .ap-persona-overlay-backdrop {
 }
 .ap-persona-overlay-md h3 {
   font-family: var(--font-human);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text);
   margin: 18px 0 6px;
@@ -4942,7 +5232,7 @@ body.ap-persona-overlay-open { overflow: hidden; }
 .ap-buildlog-phase-blurb {
   margin: 0;
   font-family: var(--font-human);
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.6;
   color: var(--text-soft);
   padding-left: 34px;