@tutti-os/agent-gui 0.0.94 → 0.0.96

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));
@@ -4457,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;
@@ -4680,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 {
@@ -4846,6 +4892,13 @@ aside.workspace-agents-status-panel
   -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 {
@@ -4913,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"]
@@ -4979,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"])
@@ -5926,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;
 }
 
@@ -6477,7 +6546,7 @@ button.agent-gui-node__conversation-section-toggle:hover
 .agent-gui-message-locator__track-segment {
   position: absolute;
   top: var(--agent-message-locator-segment-position);
-  left: 50%;
+  left: calc(var(--agent-message-locator-hit-size) / 2);
   width: 1px;
   height: 8px;
   transform: translate(-50%, -50%);
@@ -7338,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);
@@ -7346,8 +7415,27 @@ 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"] {
+  /* Opaque backdrop for the footer strip: the timeline can slide beneath the
+     dock, and a transparent footer would show message rows behind the
+     toolbar controls. */
+  background: var(--agent-gui-session-flow-background);
+}
+
 .agent-gui-node__composer[data-layout="dock"]
   .agent-gui-node__composer-input-shell {
+  /* Reserve only the collapsed input height (56px, keep in sync with
+     DOCK_COMPOSER_INPUT_MIN_HEIGHT) in the layout flow. A growing draft
+     (long paste, attachments) expands the text box upward over the
+     conversation instead of enlarging the dock and pushing the message
+     stream up. */
+  grid-template-rows: 56px auto;
   gap: 6px;
   padding: 0;
   border: 0;
@@ -7364,6 +7452,7 @@ button.agent-gui-node__conversation-section-toggle:hover
   min-height: 56px;
   max-height: var(--agent-gui-composer-input-max-height, 110px);
   align-items: end;
+  align-self: end;
   overflow: hidden;
   padding: 0 12px;
   border: 1px solid var(--line-2);
@@ -7825,7 +7914,7 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 
 .agent-gui-node__composer-queued-prompt-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   gap: 4px;
   min-height: 20px;
@@ -7904,12 +7993,19 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 }
 
 .agent-gui-node__composer-queued-prompt-label {
+  min-width: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--agent-gui-accent-strong);
   line-height: 20px;
 }
 
+.agent-gui-node__composer-queued-prompt-panel[data-queue-status="paused_by_user"]
+  .agent-gui-node__composer-queued-prompt-label {
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
 .agent-gui-node__composer-queued-prompt-count {
   margin-left: 4px;
   color: var(--agent-gui-accent-strong);
@@ -8262,12 +8358,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 {
@@ -8493,7 +8589,10 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 }
 
 .agent-gui-node__composer[data-layout="dock"] .agent-gui-node__composer-footer {
-  padding: 0 2px;
+  position: relative;
+  margin: 0 -12px -12px;
+  padding: 0 14px 12px;
+  background: var(--agent-gui-session-flow-background);
 }
 
 .agent-gui-node__composer-footer-left,
@@ -8684,6 +8783,12 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   line-height: 1.2;
 }
 
+.agent-gui-node__composer-menu-item[data-disabled] {
+  cursor: not-allowed;
+  color: var(--text-disabled);
+  opacity: 0.5;
+}
+
 .agent-gui-node__composer-menu-content[data-agent-composer-settings-layout="model-primary"]
   .agent-gui-node__composer-menu-item,
 .agent-gui-node__composer-menu-content[data-agent-composer-settings-layout="model-submenu"]
@@ -8769,7 +8874,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(
@@ -8796,10 +8901,31 @@ 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: 0;
+}
+
+.agent-gui-node__provider-rail-sidebar-footer:last-child {
+  padding-bottom: 12px;
+}
+
+.agent-gui-node__provider-rail-sidebar-footer
+  + .agent-gui-node__provider-rail-config-footer {
+  margin-top: 8px;
+}
+
 .agent-gui-node__provider-rail-config-button {
   display: grid;
   width: 32px;
@@ -9037,6 +9163,114 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   animation: agent-gui-provider-target-loading 1.2s ease-in-out infinite;
 }
 
+.agent-gui-provider-manager-tile[data-dragging="true"] {
+  opacity: 0.45;
+}
+
+.agent-gui-provider-manager-drop-zone {
+  transition:
+    background-color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.agent-gui-provider-manager-drop-zone[data-drop-active="true"] {
+  background: color-mix(
+    in srgb,
+    var(--brand-primary, var(--tutti-purple)) 7%,
+    transparent
+  );
+  box-shadow: inset 0 0 0 1px
+    color-mix(
+      in srgb,
+      var(--brand-primary, var(--tutti-purple)) 42%,
+      transparent
+    );
+}
+
+.agent-gui-provider-manager-drop-zone[data-drop-blocked="true"] {
+  background: color-mix(in srgb, var(--state-danger) 6%, transparent);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--state-danger) 28%, transparent);
+}
+
+.agent-gui-provider-manager-tile
+  > :not(.agent-gui-provider-manager-drop-indicator) {
+  transition: translate 140ms ease;
+}
+
+.agent-gui-provider-manager-tile[data-drag-over="before"]
+  > :not(.agent-gui-provider-manager-drop-indicator) {
+  translate: 8px 0;
+}
+
+.agent-gui-provider-manager-tile[data-drag-over="after"]
+  > :not(.agent-gui-provider-manager-drop-indicator) {
+  translate: -8px 0;
+}
+
+.agent-gui-provider-manager-drop-indicator {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--brand-primary, var(--tutti-purple));
+  pointer-events: none;
+}
+
+.agent-gui-provider-manager-drop-indicator[data-position="before"] {
+  left: -9px;
+}
+
+.agent-gui-provider-manager-drop-indicator[data-position="after"] {
+  right: -9px;
+}
+
+.agent-gui-provider-manager-tile[data-long-press="true"] {
+  animation: agent-gui-provider-manager-long-press 550ms linear;
+}
+
+.agent-gui-provider-manager-tile[data-editing="true"] {
+  transform-origin: 50% 42%;
+  animation: agent-gui-provider-manager-wiggle 180ms ease-in-out infinite
+    alternate;
+}
+
+.agent-gui-provider-manager-tile[data-editing="true"]:nth-child(2n) {
+  animation-delay: -90ms;
+  animation-direction: alternate-reverse;
+}
+
+.agent-gui-provider-manager-tile[data-editing="true"][data-drag-active="true"] {
+  animation: none;
+}
+
+@keyframes agent-gui-provider-manager-wiggle {
+  0% {
+    transform: rotate(-1.2deg) translateY(0);
+  }
+
+  100% {
+    transform: rotate(1.2deg) translateY(-0.5px);
+  }
+}
+
+@keyframes agent-gui-provider-manager-long-press {
+  from {
+    scale: 1;
+  }
+
+  to {
+    scale: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-gui-provider-manager-tile[data-editing="true"] {
+    animation: none;
+  }
+}
+
 @keyframes agent-gui-provider-target-loading {
   0% {
     background-position: 100% 0;
@@ -9048,6 +9282,10 @@ 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%;
@@ -9061,6 +9299,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;
 }
@@ -9092,10 +9332,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: calc(50% - 210px);
+
+  /* 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 {
@@ -9123,63 +9367,6 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
     both;
 }
 
-.agent-gui-node__empty-hero-icon-rail {
-  display: flex;
-  width: min(216px, 44vw);
-  height: 64px;
-  align-items: center;
-  overflow: hidden;
-  object-fit: unset;
-}
-
-.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-node__empty-hero-icon-rail-scroller::-webkit-scrollbar {
-  display: none;
-}
-
-.agent-gui-node__empty-hero-icon-rail-item {
-  display: grid;
-  width: 48px;
-  height: 48px;
-  flex: 0 0 48px;
-  place-items: center;
-  scroll-snap-align: center;
-  transition:
-    opacity 140ms ease,
-    transform 140ms ease;
-}
-
-.agent-gui-node__empty-hero-icon-rail-item:hover {
-  transform: translateY(-1px);
-}
-
-.agent-gui-node__empty-hero-icon-rail-item > img {
-  display: block;
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-
 /* 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,
@@ -9431,14 +9618,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"]
@@ -9478,7 +9672,6 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
 .agent-gui-node__empty-provider-gate {
   max-width: 520px;
   gap: 8px;
-  transform: translateY(-40px);
 }
 
 /* Gate gap is 8px; add 16px so the icon-to-title spacing is 24px. */

package/dist/app/renderer/assets/icons/open-link-lined.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 3H21V10M20 4L10 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 13V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7C3 5.89543 3.89543 5 5 5H11" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>