@tutti-os/agent-gui 0.0.93 → 0.0.95

package/dist/app/renderer/agentactivity.css

@@ -136,6 +136,22 @@
   background: rgb(0 0 0 / 0%);
 }
 
+.tsh-zoom-dialog[data-closing="true"] {
+  animation: tsh-zoom-dialog-close 180ms ease-out forwards;
+}
+
+@keyframes tsh-zoom-dialog-close {
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tsh-zoom-dialog[data-closing="true"] {
+    animation-duration: 1ms;
+  }
+}
+
 .tsh-zoom-dialog [data-rmiz-btn-unzoom] {
   position: fixed;
   top: max(20px, calc(var(--cove-titlebar-reserve, 0px) + 10px));
@@ -604,6 +620,7 @@
 
   .agent-gui-chrome__card--warning,
   .agent-gui-chrome__card--danger,
+  .agent-gui-chrome__card--success,
   .agent-gui-chrome__card--muted,
   .agent-gui-chrome__card--connecting {
     animation: none !important;
@@ -2750,6 +2767,7 @@ aside.workspace-agents-status-panel
 
 .agent-gui-chrome__card--warning,
 .agent-gui-chrome__card--danger,
+.agent-gui-chrome__card--success,
 .agent-gui-chrome__card--muted,
 .agent-gui-chrome__card--connecting {
   --agent-gui-chrome-card-spring: cubic-bezier(0.22, 1.18, 0.36, 1);
@@ -2915,6 +2933,58 @@ aside.workspace-agents-status-panel
   color: var(--status-danger-hover, var(--state-danger-hover));
 }
 
+.agent-gui-chrome__card--success {
+  /* --state-success alone reads ~2:1 against the light-theme card wash;
+     mixing toward --text-primary keeps the hue while adapting the contrast
+     in both themes (45% keeps 13px text past the 4.5:1 target). Borders and
+     backgrounds stay on the raw token. */
+  --agent-gui-chrome-success-foreground: color-mix(
+    in srgb,
+    var(--state-success) 45%,
+    var(--text-primary)
+  );
+
+  border-color: color-mix(in srgb, var(--state-success) 28%, transparent);
+  border-bottom: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background: color-mix(
+    in srgb,
+    var(--state-success) 10%,
+    var(--background-fronted)
+  );
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 36px;
+  padding: 6px 16px;
+  cursor: default;
+}
+
+.agent-gui-chrome__card--success .agent-gui-chrome__icon,
+.agent-gui-chrome__card--success .agent-gui-chrome__message {
+  color: var(--agent-gui-chrome-success-foreground, var(--state-success));
+}
+
+.agent-gui-chrome__success-ghost-button {
+  background: transparent;
+  color: var(--agent-gui-chrome-success-foreground, var(--state-success));
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.agent-gui-chrome__success-ghost-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--state-success) 14%, transparent);
+}
+
+.agent-gui-chrome__success-ghost-button:focus-visible {
+  border-color: var(--state-success);
+  color: var(--agent-gui-chrome-success-foreground, var(--state-success));
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--state-success) 25%, transparent);
+}
+
 .agent-gui-chrome__danger-ghost-button:focus-visible {
   border-color: var(--status-danger, var(--state-danger));
   color: var(--status-danger, var(--state-danger));
@@ -2959,6 +3029,8 @@ aside.workspace-agents-status-panel
   .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
 .agent-gui-chrome__card--danger
   .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
+.agent-gui-chrome__card--success
+  .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
 .agent-gui-chrome__card--muted
   .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
 .agent-gui-chrome__card--connecting
@@ -4401,6 +4473,20 @@ aside.workspace-agents-status-panel
   cursor: grabbing !important;
 }
 
+.workbench-window:has(
+    .agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
+  )
+  .workbench-window__header {
+  z-index: calc(var(--z-panel) + 1);
+}
+
+.workbench-window:has(
+    .agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
+  )
+  .agent-gui-workbench-header::after {
+  display: none;
+}
+
 .workbench-window:has([data-agent-gui-workbench-header="true"])
   .workbench-window__body {
   grid-row: 1;
@@ -4624,16 +4710,32 @@ aside.workspace-agents-status-panel
 .agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
   .agent-gui-workbench-header__primary {
   grid-column: 1 / -1;
-  width: min(100%, 720px);
+  width: 100%;
   background: transparent;
 }
 
+/*
+ * The standalone window's tool actions belong to native-window chrome, so
+ * collapsing the conversation rail must not pull them into the 720px content
+ * cap. Let the primary row span the window and keep the same trailing inset as
+ * the expanded detail row.
+ */
+.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"][data-agent-gui-workbench-header-collapsed="true"]
+  .agent-gui-workbench-header__primary {
+  width: 100%;
+}
+
+.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
+  .agent-gui-workbench-header__secondary-accessory {
+  padding-right: 0;
+}
+
 /*
  * In the collapsed empty state there is no session title to anchor the control
  * cluster, so the detached-window button's margin-left:auto would strand the
- * icons (in the middle of the 720px content cap, or at the far window edge).
- * Drop the auto push so the controls sit as a compact group right after the
- * traffic lights instead.
+ * icons at the far window edge. Drop the auto push so those window controls sit
+ * as a compact group right after the traffic lights instead. Secondary tool
+ * actions retain their own right alignment across the full header width.
  */
 .agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"][data-agent-gui-workbench-header-has-session="false"]
   .agent-gui-workbench-header__detached-window {
@@ -4763,6 +4865,40 @@ aside.workspace-agents-status-panel
   gap: 8px;
 }
 
+.agent-gui-workbench-header__primary-accessory {
+  display: inline-flex;
+  min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  -webkit-app-region: no-drag;
+}
+
+.agent-gui-workbench-header__detail {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  align-items: center;
+}
+
+.agent-gui-workbench-header__secondary-accessory {
+  display: inline-flex;
+  min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-left: auto;
+  padding-right: var(--agent-gui-workbench-header-padding-x);
+  pointer-events: auto;
+  -webkit-app-region: no-drag;
+}
+
+/* The collapsed primary row already supplies the header's right inset. Avoid
+   stacking the accessory inset when actions move out of the detail column. */
+.agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
+  .agent-gui-workbench-header__secondary-accessory {
+  padding-right: 0;
+}
+
 .agent-gui-workbench-header__agent-name,
 .agent-gui-workbench-header__session-title,
 .agent-gui-workbench-header__detail-title {
@@ -4821,6 +4957,7 @@ aside.workspace-agents-status-panel
 .agent-gui-workbench-header__detail-title {
   display: flex;
   height: 100%;
+  flex: 1 1 auto;
   max-width: min(100%, var(--agent-gui-workbench-header-title-max-width));
   min-width: 0;
   align-items: center;
@@ -4829,6 +4966,24 @@ aside.workspace-agents-status-panel
   pointer-events: none;
 }
 
+.workbench-window:has(
+    .agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
+  )
+  .agent-gui-workbench-header__session-title,
+.workbench-window:has(
+    .agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
+  )
+  .agent-gui-workbench-header__detail-title {
+  box-sizing: border-box;
+  width: auto;
+  max-width: calc(
+    100% - var(--agent-gui-tool-sidebar-layout-width, 0px) - 16px
+  );
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
   .agent-gui-workbench-header__agent-brand,
 .agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
@@ -4895,7 +5050,8 @@ aside.workspace-agents-status-panel
 
 .agent-gui-workbench-header__detached-window
   + .agent-gui-workbench-header__rail-toggle {
-  margin-left: 0;
+  /* The primary row gap is 12px; keep this icon pair at a net 8px. */
+  margin-left: -4px;
 }
 
 .workbench-window:has([data-workbench-node-render-error="true"])
@@ -5842,17 +5998,14 @@ button.agent-gui-node__conversation-section-toggle:hover
 
 .agent-gui-node__conversation-list-skeleton-rib {
   height: 12px;
-  transform-origin: left center;
 }
 
 .agent-gui-node__conversation-list-skeleton-rib-primary {
   width: 78%;
-  transform: rotate(1deg);
 }
 
 .agent-gui-node__conversation-list-skeleton-rib-secondary {
   width: 52%;
-  transform: rotate(-1deg);
   opacity: 0.72;
 }
 
@@ -7254,7 +7407,7 @@ button.agent-gui-node__conversation-section-toggle:hover
   isolation: isolate;
   z-index: 2;
   min-width: 0;
-  padding: 12px;
+  padding: 8px;
   border: 1px solid var(--agent-gui-border-subtle);
   border-radius: 12px;
   background: var(--agent-gui-surface-raised);
@@ -7262,6 +7415,12 @@ button.agent-gui-node__conversation-section-toggle:hover
   transition: box-shadow 140ms ease;
 }
 
+.agent-gui-node__composer-hero-prompt-input-area {
+  box-sizing: border-box;
+  width: calc(100% - 8px);
+  margin-inline: 4px;
+}
+
 .agent-gui-node__composer[data-layout="dock"]
   .agent-gui-node__composer-input-shell {
   gap: 6px;
@@ -8178,12 +8337,12 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 2px 12px;
+  padding: 2px 8px;
 }
 
 .agent-gui-node__composer-input-group-hero
   .agent-gui-node__composer-project-row {
-  padding: 2px 12px;
+  padding: 2px 8px;
 }
 
 .agent-gui-node__composer-project-row .agent-gui-node__composer-menu-trigger {
@@ -8685,7 +8844,7 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   flex: 1 1 auto;
   flex-direction: column;
   align-items: center;
-  padding: 2px 0 12px;
+  padding: 2px 0 16px;
   overflow-x: hidden;
   overflow-y: auto;
   mask-image: linear-gradient(
@@ -8712,10 +8871,22 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 0 0 12px;
+  padding: 0;
   -webkit-app-region: no-drag;
 }
 
+.agent-gui-node__provider-rail-config-footer {
+  padding-bottom: 8px;
+}
+
+.agent-gui-node__provider-rail-config-footer:last-child {
+  padding-bottom: 12px;
+}
+
+.agent-gui-node__provider-rail-sidebar-footer {
+  padding-bottom: 12px;
+}
+
 .agent-gui-node__provider-rail-config-button {
   display: grid;
   width: 32px;
@@ -8964,10 +9135,14 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 }
 
 .agent-gui-node__empty-hero {
+  /* Center one shared frame instead of each state's intrinsic content height.
+     Wrapped titles, composer controls, and readiness actions then grow down. */
+  --agent-gui-empty-hero-anchor-block-size: 398px;
+
   display: flex;
   width: 100%;
   min-height: 100%;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
   padding: 24px clamp(32px, 4vw, 48px) 40px;
 }
@@ -8977,6 +9152,8 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 
   display: grid;
   width: min(820px, 100%);
+  block-size: var(--agent-gui-empty-hero-anchor-block-size);
+  align-content: start;
   gap: var(--agent-gui-empty-hero-gap);
   justify-items: center;
 }
@@ -9000,6 +9177,7 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 
 .agent-gui-node__empty-hero-carousel-stage {
   position: relative;
+  top: -24px;
   width: 100%;
   min-height: 100%;
 }
@@ -9007,10 +9185,14 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 .agent-gui-node__empty-hero-carousel-layer {
   position: absolute;
   z-index: 1;
-  top: 24px;
+
+  /* The stage measures the body's placeholder slot and pins the layer to it;
+     the calc() remains only as the first-paint estimate. */
+  top: var(--agent-gui-hero-carousel-slot-top, calc(50% - 210px));
   left: 50%;
-  width: min(400px, calc(100% - 64px));
-  transform: translateX(-50%);
+  width: round(nearest, min(400px, calc(100% - 64px)), 1px);
+  transform: translateX(-50%) scale(0.8);
+  transform-origin: center center;
 }
 
 .agent-gui-node__empty-hero-carousel-placeholder {
@@ -9038,76 +9220,243 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
     both;
 }
 
-.agent-gui-node__empty-hero-icon-rail {
+/* Empty-hero agent carousel ("All" tab): a three.js ring of same-sized agent
+   records (see agentGuiHeroCarouselScene.ts). Records farther around the ring
+   genuinely shrink and fade with perspective; visuals live on the canvas,
+   while visually-hidden buttons keep the switcher reachable by keyboard,
+   screen readers, and DOM tests. */
+.agent-gui-node__empty-hero-carousel {
+  position: relative;
+  width: 100%;
+  height: 112px;
+  outline: none;
+  touch-action: pan-y;
+  animation: agent-gui-empty-hero-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms
+    both;
+}
+
+/* Reference VinylPlayer structure, scaled from 440px to the 112px hero slot. */
+.agent-gui-vinyl-player {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  width: 440px;
+  height: 440px;
+  overflow: visible;
+  border-radius: 40px;
+  background: transparent;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(0.25);
+  transform-origin: center;
+}
+
+.agent-gui-vinyl-player__chassis {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  z-index: 0;
+  width: 440px;
+  height: 416px;
+  object-fit: fill;
+  pointer-events: none;
+}
+
+.agent-gui-vinyl-player__indicator {
+  position: absolute;
+  top: 32px;
+  left: 32px;
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border: 1px solid #c0c2c4;
+  border-radius: 50%;
+  background: #9ea0a3;
+  box-shadow:
+    0 2px 4px rgb(0 0 0 / 10%),
+    inset 0 1px 2px rgb(255 255 255 / 80%);
+  display: none;
+}
+
+.agent-gui-vinyl-player__indicator-light {
   display: flex;
-  width: min(216px, 44vw);
-  height: 64px;
+  width: 20px;
+  height: 20px;
   align-items: center;
+  justify-content: center;
+  gap: 2px;
+  border: 1px solid #384a3c;
+  border-radius: 50%;
+  background: #4b6652;
+  box-shadow: inset 0 2px 6px rgb(0 0 0 / 40%);
+}
+
+.agent-gui-vinyl-player__indicator-light--playing {
+  border-color: #86f0a6;
+  background: #5edb84;
+  box-shadow:
+    0 0 12px rgb(74 222 128 / 70%),
+    inset 0 1px 4px rgb(255 255 255 / 60%);
+}
+
+.agent-gui-vinyl-player__indicator-light > span {
+  width: 1px;
+  height: 8px;
+  background: rgb(255 255 255 / 80%);
+}
+
+.agent-gui-vinyl-player__platter {
+  position: absolute;
+  top: 29px;
+  left: 24px;
+  display: grid;
+  width: 370px;
+  height: 370px;
+  place-items: center;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: none;
+}
+
+.agent-gui-vinyl-player__platter-inner {
+  display: grid;
+  width: 340px;
+  height: 340px;
+  place-items: center;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: none;
+}
+
+.agent-gui-vinyl-player__record {
+  position: relative;
+  display: grid;
+  width: 326px;
+  height: 326px;
+  place-items: center;
   overflow: hidden;
-  object-fit: unset;
+  border-radius: 50%;
+  background:
+    repeating-radial-gradient(
+      circle at center,
+      rgb(255 255 255 / 9%) 0 2px,
+      rgb(0 0 0 / 0%) 2px 8px
+    ),
+    #111;
+  box-shadow: 0 4px 15px rgb(0 0 0 / 60%);
 }
 
-.agent-gui-node__empty-hero-icon-rail-scroller {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  align-items: center;
-  gap: 12px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 8px 20px;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-  scroll-snap-type: x proximity;
-  mask-image: linear-gradient(
-    90deg,
-    transparent 0,
-    #000 24px,
-    #000 calc(100% - 24px),
-    transparent 100%
-  );
+.agent-gui-vinyl-player__groove,
+.agent-gui-vinyl-player__reflection,
+.agent-gui-vinyl-player__label,
+.agent-gui-vinyl-player__hole {
+  position: absolute;
+  border-radius: 50%;
 }
 
-.agent-gui-node__empty-hero-icon-rail-scroller::-webkit-scrollbar {
-  display: none;
+.agent-gui-vinyl-player__groove {
+  border: 2px solid rgb(255 255 255 / 12%);
+}
+
+.agent-gui-vinyl-player__reflection {
+  inset: 0;
+  background: conic-gradient(
+    from 0deg,
+    transparent 0deg,
+    rgb(255 255 255 / 15%) 45deg,
+    transparent 90deg,
+    transparent 180deg,
+    rgb(255 255 255 / 15%) 225deg,
+    transparent 270deg
+  );
+  mix-blend-mode: screen;
+  opacity: 0.35;
 }
 
-.agent-gui-node__empty-hero-icon-rail-item {
+.agent-gui-vinyl-player__label {
   display: grid;
-  width: 48px;
-  height: 48px;
-  flex: 0 0 48px;
+  width: 144px;
+  height: 144px;
   place-items: center;
-  scroll-snap-align: center;
-  transition:
-    opacity 140ms ease,
-    transform 140ms ease;
+  overflow: hidden;
+  background: #2a2a2a;
+  box-shadow: inset 0 0 12px rgb(0 0 0 / 60%);
 }
 
-.agent-gui-node__empty-hero-icon-rail-item:hover {
-  transform: translateY(-1px);
+.agent-gui-vinyl-player__label > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.agent-gui-node__empty-hero-icon-rail-item > img {
-  display: block;
-  width: 48px;
-  height: 48px;
+.agent-gui-vinyl-player__tonearm {
+  position: absolute;
+  top: -20px;
+  right: 14px;
+  z-index: 4;
+  width: 140px;
+  height: 400px;
   object-fit: contain;
+  pointer-events: none;
+  transform: rotate(15deg);
+  transform-origin: 50% 8%;
 }
 
-/* Empty-hero agent carousel ("All" tab): a three.js ring of same-sized agent
-   records (see agentGuiHeroCarouselScene.ts). Records farther around the ring
-   genuinely shrink and fade with perspective; visuals live on the canvas,
-   while visually-hidden buttons keep the switcher reachable by keyboard,
-   screen readers, and DOM tests. */
-.agent-gui-node__empty-hero-carousel {
-  position: relative;
-  width: 100%;
-  height: 112px;
-  outline: none;
-  touch-action: pan-y;
-  animation: agent-gui-empty-hero-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms
-    both;
+.agent-gui-vinyl-player__hole {
+  width: 12px;
+  height: 12px;
+  border: 0.5px solid #717171;
+  background: #e0e2e5;
+  box-shadow: inset 0 1px 4px rgb(0 0 0 / 80%);
+}
+
+.agent-gui-vinyl-player__power-control {
+  position: absolute;
+  bottom: 32px;
+  left: 32px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-gui-vinyl-player__lever {
+  display: block;
+  width: 16px;
+  height: 44px;
+  border: 1px solid #111;
+  border-radius: 10px;
+  background: linear-gradient(90deg, #1a1a1a, #3a3a3a, #1a1a1a);
+  box-shadow: 4px 2px 8px rgb(0 0 0 / 40%);
+  transform-origin: bottom;
+}
+
+.agent-gui-vinyl-player__power-label {
+  color: #3f4144;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.agent-gui-vinyl-player__tone-control {
+  position: absolute;
+  right: 32px;
+  bottom: 32px;
+  display: none;
+  align-items: center;
+  gap: 12px;
+  color: #65676b;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.agent-gui-vinyl-player__tone-control > span:first-child {
+  width: 30px;
+  height: 52px;
+  border: 1px solid #a0a2a4;
+  border-radius: 6px;
+  background: linear-gradient(#b0b2b5, #ced0d3);
+  box-shadow: inset 0 2px 5px rgb(0 0 0 / 30%);
 }
 
 .agent-gui-node__empty-hero-carousel:has(:focus-visible) {
@@ -9122,14 +9471,21 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   opacity: 0;
   transition: opacity 120ms ease-out;
 
-  /* Fade-out mask: a horizontal band dissolves tiles toward the stage sides
-     (the fully-transparent stops sit where the outermost tiles ride, not at
-     the canvas edges), intersected with a vertical band so tiles sinking
-     down the wheel melt away instead of being cut by the canvas bottom. */
+  /* Fade-out mask: the horizontal fade runs edge to edge so there is no dead
+     band beside the integer-aligned canvas buffer. The vertical band melts
+     tiles sinking down the wheel instead of clipping them at the bottom. */
   mask-image:
-    linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%),
-    linear-gradient(180deg, #000 0%, #000 70%, transparent 96%);
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      #000 20%,
+      #000 80%,
+      transparent 100%
+    ),
+    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
   mask-composite: intersect;
+  mask-size: 100% 100%;
+  mask-position: center;
 }
 
 .agent-gui-node__empty-hero-carousel[data-icons-ready="true"]