@wrongstack/webui 0.319.1 → 1.0.0

package/dist/index.css

@@ -1,368 +1,3 @@
-/* src/components/MessageBubble/ledger.css */
-.ws-ledger {
-  position: relative;
-  background: hsl(var(--card) / 0.4);
-  border-left-width: 2px;
-  border-left-style: solid;
-}
-.ws-ledger--ok {
-  border-left-color: hsl(var(--success) / 0.75);
-}
-.ws-ledger--error {
-  border-left-color: hsl(var(--destructive) / 0.85);
-  background: hsl(var(--destructive) / 0.04);
-}
-.ws-ledger--running {
-  border-left-color: hsl(var(--warning) / 0.9);
-  animation: wsRailPulse 1.8s ease-in-out infinite;
-}
-.ws-ledger--running::before {
-  content: "";
-  position: absolute;
-  left: -2px;
-  top: 0;
-  width: 2px;
-  height: 34%;
-  background:
-    linear-gradient(
-      to bottom,
-      transparent,
-      hsl(var(--warning)),
-      transparent);
-  animation: wsRailSweep 1.9s ease-in-out infinite;
-  pointer-events: none;
-}
-.ws-ledger__dot {
-  width: 0.4rem;
-  height: 0.4rem;
-  flex-shrink: 0;
-  border-radius: 9999px;
-  background: currentColor;
-  box-shadow: 0 0 6px -1px currentColor;
-}
-.ws-ledger__dot--running {
-  animation: wsDotPulse 1.4s ease-in-out infinite;
-}
-.ws-reasoning {
-  position: relative;
-  border-left: 1px dashed hsl(var(--primary) / 0.35);
-  padding-left: 0.75rem;
-}
-.ws-reasoning__mark {
-  color: hsl(var(--primary));
-  filter: drop-shadow(0 0 5px hsl(var(--primary) / 0.4));
-}
-@keyframes wsRailPulse {
-  0%, 100% {
-    border-left-color: hsl(var(--warning) / 0.9);
-  }
-  50% {
-    border-left-color: hsl(var(--warning) / 0.4);
-  }
-}
-@keyframes wsRailSweep {
-  0% {
-    top: -34%;
-    opacity: 0;
-  }
-  25% {
-    opacity: 1;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    top: 100%;
-    opacity: 0;
-  }
-}
-@keyframes wsDotPulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.45;
-    transform: scale(0.82);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ws-ledger--running,
-  .ws-ledger--running::before,
-  .ws-ledger__dot--running {
-    animation: none;
-  }
-  .ws-ledger--running::before {
-    display: none;
-  }
-}
-
-/* src/components/ChatView/thinking-bubble.css */
-.thinking-bubble {
-  --thinking-color: hsl(var(--primary));
-  --thinking-glow: hsl(var(--primary) / 0.36);
-}
-.thinking-orb {
-  position: relative;
-  display: grid;
-  width: 2rem;
-  height: 2rem;
-  place-items: center;
-  color: var(--thinking-color);
-  border-radius: 9999px;
-  background:
-    radial-gradient(
-      circle at 35% 30%,
-      hsl(var(--primary) / 0.24),
-      transparent 42%),
-    hsl(var(--primary) / 0.08);
-  box-shadow:
-    0 0 0 2px hsl(var(--background)),
-    0 0 0 3px hsl(var(--primary) / 0.18),
-    0 0 22px -6px var(--thinking-glow);
-  overflow: hidden;
-}
-.thinking-orb::before {
-  content: "";
-  position: absolute;
-  inset: -45%;
-  background:
-    conic-gradient(
-      from 90deg,
-      transparent 0 22%,
-      var(--thinking-glow) 34%,
-      transparent 48% 100%);
-  animation: thinkingOrbit 2.4s linear infinite;
-}
-.thinking-orb::after {
-  content: "";
-  position: absolute;
-  inset: 3px;
-  border-radius: inherit;
-  background: hsl(var(--background) / 0.82);
-}
-.thinking-orb__icon {
-  position: relative;
-  z-index: 2;
-  animation: thinkingBrain 1.8s ease-in-out infinite;
-  filter: drop-shadow(0 0 6px var(--thinking-glow));
-}
-.thinking-orb__ring {
-  position: absolute;
-  inset: -2px;
-  z-index: 1;
-  border-radius: inherit;
-  border: 1px solid hsl(var(--primary) / 0.32);
-  animation: thinkingRipple 2.2s ease-out infinite;
-}
-.thinking-orb__ring--delay {
-  animation-delay: 1.1s;
-}
-.thinking-orb__spark {
-  position: absolute;
-  z-index: 3;
-  width: 0.3rem;
-  height: 0.3rem;
-  border-radius: 9999px;
-  background: currentColor;
-  box-shadow: 0 0 10px 1px currentColor;
-  opacity: 0.78;
-}
-.thinking-orb__spark--one {
-  animation: thinkingSparkOne 2.8s ease-in-out infinite;
-}
-.thinking-orb__spark--two {
-  animation: thinkingSparkTwo 3.2s ease-in-out infinite;
-}
-.thinking-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  letter-spacing: 0.02em;
-}
-.thinking-dots {
-  display: inline-flex;
-  gap: 0.18rem;
-  align-items: center;
-}
-.thinking-dots span {
-  width: 0.22rem;
-  height: 0.22rem;
-  border-radius: 9999px;
-  background: currentColor;
-  animation: thinkingDot 1.15s ease-in-out infinite;
-}
-.thinking-dots span:nth-child(2) {
-  animation-delay: 0.16s;
-}
-.thinking-dots span:nth-child(3) {
-  animation-delay: 0.32s;
-}
-.thinking-panel {
-  position: relative;
-  overflow: hidden;
-  border-color: hsl(var(--primary) / 0.22);
-  background:
-    linear-gradient(
-      115deg,
-      hsl(var(--primary) / 0.08),
-      transparent 38%,
-      hsl(var(--primary) / 0.05)),
-    hsl(var(--card) / 0.48);
-  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.06);
-}
-.thinking-panel::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  transform: translateX(-120%);
-  background:
-    linear-gradient(
-      90deg,
-      transparent,
-      hsl(var(--primary) / 0.16),
-      transparent);
-  animation: thinkingScan 2.6s ease-in-out infinite;
-  pointer-events: none;
-}
-.thinking-wave {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: end;
-  gap: 0.18rem;
-  height: 0.6rem;
-  margin-bottom: 0.25rem;
-  color: var(--thinking-color);
-}
-.thinking-wave span {
-  width: 0.18rem;
-  min-height: 0.14rem;
-  border-radius: 9999px;
-  background: currentColor;
-  opacity: 0.65;
-  animation: thinkingWave 0.9s ease-in-out infinite;
-}
-.thinking-wave span:nth-child(2) {
-  animation-delay: 0.08s;
-}
-.thinking-wave span:nth-child(3) {
-  animation-delay: 0.16s;
-}
-.thinking-wave span:nth-child(4) {
-  animation-delay: 0.24s;
-}
-.thinking-wave span:nth-child(5) {
-  animation-delay: 0.32s;
-}
-.thinking-text {
-  position: relative;
-  z-index: 1;
-}
-@keyframes thinkingOrbit {
-  to {
-    transform: rotate(1turn);
-  }
-}
-@keyframes thinkingBrain {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 0.86;
-  }
-  45% {
-    transform: scale(1.12);
-    opacity: 1;
-  }
-}
-@keyframes thinkingRipple {
-  0% {
-    transform: scale(0.82);
-    opacity: 0.65;
-  }
-  70%, 100% {
-    transform: scale(1.45);
-    opacity: 0;
-  }
-}
-@keyframes thinkingSparkOne {
-  0%, 100% {
-    transform: translate(-0.65rem, -0.55rem) scale(0.75);
-    opacity: 0.35;
-  }
-  45% {
-    transform: translate(0.72rem, -0.2rem) scale(1);
-    opacity: 0.95;
-  }
-}
-@keyframes thinkingSparkTwo {
-  0%, 100% {
-    transform: translate(0.55rem, 0.58rem) scale(0.7);
-    opacity: 0.28;
-  }
-  55% {
-    transform: translate(-0.72rem, 0.12rem) scale(1.05);
-    opacity: 0.9;
-  }
-}
-@keyframes thinkingDot {
-  0%, 80%, 100% {
-    transform: translateY(0);
-    opacity: 0.35;
-  }
-  40% {
-    transform: translateY(-0.18rem);
-    opacity: 1;
-  }
-}
-@keyframes thinkingScan {
-  0% {
-    transform: translateX(-120%);
-  }
-  48%, 100% {
-    transform: translateX(120%);
-  }
-}
-@keyframes thinkingWave {
-  0%, 100% {
-    height: 0.14rem;
-    opacity: 0.38;
-  }
-  45% {
-    height: 0.58rem;
-    opacity: 0.92;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .thinking-bubble,
-  .thinking-bubble *,
-  .thinking-orb,
-  .thinking-orb::before,
-  .thinking-orb::after,
-  .thinking-orb__icon,
-  .thinking-orb__ring,
-  .thinking-orb__spark,
-  .thinking-dots,
-  .thinking-dots span,
-  .thinking-panel,
-  .thinking-panel::before,
-  .thinking-wave,
-  .thinking-wave span,
-  .thinking-text {
-    animation: none;
-    animation-iteration-count: 1;
-    animation-duration: 0s;
-    animation-delay: 0s;
-    transition: none;
-    scroll-behavior: auto;
-  }
-  .thinking-orb__icon {
-    filter: none;
-  }
-  .thinking-panel {
-    transform: none;
-  }
-}
-
 /* src/components/AgentOfficeView.css */
 .agent-office {
   --office-line: hsl(var(--border) / 0.72);
@@ -3094,552 +2729,917 @@ button.agent-office__parcel:hover {
     transform: translateX(0) rotate(0);
   }
 }
-@keyframes agent-office-mail-out {
-  from {
-    opacity: 0;
-    transform: translateX(-42px) rotate(-3deg);
+@keyframes agent-office-mail-out {
+  from {
+    opacity: 0;
+    transform: translateX(-42px) rotate(-3deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) rotate(0);
+  }
+}
+@keyframes agent-office-belt {
+  to {
+    background-position: 70px 0;
+  }
+}
+@keyframes agent-office-brief-arrive {
+  from {
+    transform: skewX(-18deg) translateX(0);
+  }
+  to {
+    transform: skewX(-18deg) translateX(617%);
+  }
+}
+@keyframes agent-office-sync-line {
+  to {
+    background-position: -200% 0;
+  }
+}
+@keyframes agent-office-telemetry-wait {
+  0%, 100% {
+    opacity: 0.42;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes agent-office-task-assigned {
+  from {
+    opacity: 0;
+    transform: translateX(-12px) rotate(-1deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) rotate(0);
+  }
+}
+@keyframes agent-office-window-glow {
+  from {
+    opacity: 0.58;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes agent-office-plant-sway {
+  from {
+    transform: rotate(calc(var(--plant-angle) - 3deg)) scale(var(--plant-scale));
+  }
+  to {
+    transform: rotate(calc(var(--plant-angle) + 3deg)) scale(var(--plant-scale));
+  }
+}
+@keyframes agent-office-monitor-scan {
+  from {
+    background-position: 0 -110%;
+  }
+  to {
+    background-position: 0 110%;
+  }
+}
+@keyframes agent-office-mug-steam {
+  0%, 18% {
+    opacity: 0;
+    transform: translateY(3px) translateX(0);
+  }
+  42% {
+    opacity: 0.55;
+  }
+  78%, 100% {
+    opacity: 0;
+    transform: translateY(-6px) translateX(2px);
+  }
+}
+@keyframes agent-office-blink {
+  0%, 44%, 48%, 100% {
+    transform: scaleY(1);
+  }
+  46% {
+    transform: scaleY(0.12);
+  }
+}
+@keyframes agent-office-terminal-bars {
+  from {
+    transform: scaleY(0.45);
+    opacity: 0.42;
+  }
+  to {
+    transform: scaleY(1.15);
+    opacity: 1;
+  }
+}
+@keyframes agent-office-lane-arrive {
+  from {
+    transform: translateY(8px) scale(0.992);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes agent-office-memory-pulse {
+  0%, 100% {
+    transform: scale(0.72) rotate(0);
+    opacity: 0.35;
+  }
+  50% {
+    transform: scale(1.08) rotate(8deg);
+    opacity: 1;
+  }
+}
+@keyframes agent-office-web-signal {
+  0% {
+    transform: rotate(-38deg) scale(0.72);
+    opacity: 0;
+  }
+  45% {
+    opacity: 0.82;
+  }
+  100% {
+    transform: rotate(-38deg) scale(1.08);
+    opacity: 0;
+  }
+}
+@keyframes agent-office-inspect {
+  from {
+    transform: translate(0, 0) rotate(-4deg);
+  }
+  to {
+    transform: translate(13px, 3px) rotate(5deg);
+  }
+}
+@keyframes agent-office-inspect-handle {
+  from {
+    transform: translate(0, 0) rotate(42deg);
+  }
+  to {
+    transform: translate(13px, 3px) rotate(51deg);
+  }
+}
+@keyframes agent-office-write-stroke {
+  from {
+    transform: translateX(-4px) rotate(-27deg);
+  }
+  to {
+    transform: translateX(5px) rotate(-18deg);
+  }
+}
+@keyframes agent-office-charm-blink {
+  0%, 45%, 49%, 100% {
+    transform: scaleY(1);
+  }
+  47% {
+    transform: scaleY(0.12);
+  }
+}
+@keyframes agent-office-charm-bob {
+  0%, 76%, 100% {
+    transform: translateY(0) rotate(0);
+  }
+  84%, 91% {
+    transform: translateY(-2px) rotate(-5deg);
+  }
+}
+@keyframes agent-office-yawn-head {
+  0%, 72%, 100% {
+    transform: translateY(0) rotate(0);
+  }
+  78%, 90% {
+    transform: translateY(-2px) rotate(-7deg);
+  }
+}
+@keyframes agent-office-yawn-mouth {
+  0%, 72%, 100% {
+    transform: scaleY(1);
+  }
+  80%, 88% {
+    transform: scaleY(3.5);
+  }
+}
+@keyframes agent-office-idle-stretch {
+  0%, 72%, 100% {
+    transform: rotate(-11deg);
   }
-  to {
-    opacity: 1;
-    transform: translateX(0) rotate(0);
+  80%, 90% {
+    transform: translate(2px, -7px) rotate(-34deg);
   }
 }
-@keyframes agent-office-belt {
+@keyframes agent-office-type {
   to {
-    background-position: 70px 0;
+    transform: rotate(-4deg) translateY(2px);
   }
 }
-@keyframes agent-office-brief-arrive {
-  from {
-    transform: skewX(-18deg) translateX(0);
+@keyframes agent-office-nod {
+  0%, 70%, 100% {
+    transform: rotate(0);
   }
-  to {
-    transform: skewX(-18deg) translateX(617%);
+  82% {
+    transform: rotate(3deg);
   }
 }
-@keyframes agent-office-sync-line {
+@keyframes agent-office-ring {
+  from {
+    transform: scale(0.82);
+    opacity: 0.42;
+  }
   to {
-    background-position: -200% 0;
+    transform: scale(1.18);
+    opacity: 0;
   }
 }
-@keyframes agent-office-telemetry-wait {
+@keyframes agent-office-pulse {
   0%, 100% {
-    opacity: 0.42;
+    opacity: 0.55;
+    transform: scale(0.8);
   }
   50% {
     opacity: 1;
+    transform: scale(1);
   }
 }
-@keyframes agent-office-task-assigned {
+@keyframes agent-office-drawer {
   from {
-    opacity: 0;
-    transform: translateX(-12px) rotate(-1deg);
+    transform: translateX(35px);
+    opacity: 0.5;
   }
   to {
+    transform: translateX(0);
     opacity: 1;
-    transform: translateX(0) rotate(0);
   }
 }
-@keyframes agent-office-window-glow {
-  from {
-    opacity: 0.58;
+.agent-office__model-chip {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  padding: 1px 7px;
+  border: 1px solid hsl(var(--primary) / 0.3);
+  border-radius: 999px;
+  background: hsl(var(--primary) / 0.08);
+  color: hsl(var(--primary));
+  font: 600 9px / 1.5 var(--font-mono);
+  letter-spacing: 0.02em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-office__client-desks {
+  position: relative;
+}
+.agent-office__mail-routes {
+  position: absolute;
+  z-index: 6;
+  top: 9px;
+  bottom: 1px;
+  left: 206px;
+  width: 44px;
+  pointer-events: none;
+}
+.agent-office__mail-route {
+  position: absolute;
+  inset: 0;
+}
+.agent-office__mail-route-parcel {
+  position: absolute;
+  top: var(--from);
+  left: 0;
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid hsl(var(--info) / 0.55);
+  border-radius: 9px;
+  background: hsl(var(--card) / 0.94);
+  box-shadow: 0 4px 14px hsl(var(--info) / 0.3), 0 0 0 3px hsl(var(--info) / 0.08);
+  color: hsl(var(--info));
+  animation: agent-office-mail-travel 3.8s ease-in-out infinite;
+}
+.agent-office__mail-route-parcel svg {
+  width: 15px;
+  height: 15px;
+}
+@keyframes agent-office-mail-travel {
+  0% {
+    top: var(--from);
+    opacity: 0;
+    transform: translateY(-50%) scale(0.7);
   }
-  to {
+  12% {
     opacity: 1;
+    transform: translateY(-50%) scale(1);
   }
-}
-@keyframes agent-office-plant-sway {
-  from {
-    transform: rotate(calc(var(--plant-angle) - 3deg)) scale(var(--plant-scale));
+  86% {
+    opacity: 1;
   }
-  to {
-    transform: rotate(calc(var(--plant-angle) + 3deg)) scale(var(--plant-scale));
+  100% {
+    top: var(--to);
+    opacity: 0;
+    transform: translateY(-50%) scale(0.7);
   }
 }
-@keyframes agent-office-monitor-scan {
-  from {
-    background-position: 0 -110%;
-  }
-  to {
-    background-position: 0 110%;
-  }
+.agent-office__desks-empty {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 9px 9px;
+  padding: 13px 14px;
+  border: 1px dashed var(--office-line);
+  border-radius: 12px;
+  color: hsl(var(--muted-foreground));
+  font: 500 10.5px / 1.4 var(--font-mono);
+}
+.agent-office__desks-empty svg {
+  width: 14px;
+  height: 14px;
+  color: hsl(var(--warning));
+}
+.agent-office__lounge {
+  margin: 2px 9px 10px;
+  padding: 10px 12px 12px;
+  border: 1px dashed hsl(var(--border));
+  border-radius: 14px;
+  background:
+    linear-gradient(
+      160deg,
+      hsl(var(--warning) / 0.05),
+      transparent 62%),
+    var(--office-panel);
+}
+.agent-office__lounge-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 9px;
+  color: hsl(var(--muted-foreground));
+  font: 600 10px / 1 var(--font-mono);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+.agent-office__lounge-heading svg {
+  width: 14px;
+  height: 14px;
+  color: hsl(var(--warning));
+}
+.agent-office__lounge-heading > span {
+  margin-left: auto;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.agent-office__lounge-seats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.agent-office__lounge-seat {
+  display: flex;
+  min-width: 190px;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border: 1px solid var(--office-line);
+  border-radius: 11px;
+  background: hsl(var(--card) / 0.7);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+.agent-office__lounge-seat:disabled {
+  cursor: default;
+  opacity: 0.72;
+}
+.agent-office__lounge-seat:not(:disabled):hover {
+  border-color: hsl(var(--primary) / 0.4);
+  box-shadow: 0 6px 16px hsl(var(--shadow-color) / 0.1);
+  transform: translateY(-1px);
+}
+.agent-office__lounge-avatar {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid hsl(var(--border));
+  border-radius: 9px;
+  background: hsl(var(--accent) / 0.5);
+  color: hsl(var(--muted-foreground));
+}
+.agent-office__lounge-avatar svg {
+  width: 14px;
+  height: 14px;
+}
+.agent-office__lounge-seat.is-leader .agent-office__lounge-avatar {
+  border-color: hsl(var(--primary) / 0.35);
+  background: hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary));
+}
+.agent-office__lounge-seat.is-builder .agent-office__lounge-avatar {
+  border-color: hsl(var(--info) / 0.35);
+  background: hsl(var(--info) / 0.12);
+  color: hsl(var(--info));
+}
+.agent-office__lounge-seat.is-researcher .agent-office__lounge-avatar {
+  border-color: hsl(var(--success) / 0.35);
+  background: hsl(var(--success) / 0.12);
+  color: hsl(var(--success));
+}
+.agent-office__lounge-seat.is-reviewer .agent-office__lounge-avatar {
+  border-color: hsl(var(--destructive) / 0.32);
+  background: hsl(var(--destructive) / 0.1);
+  color: hsl(var(--destructive));
+}
+.agent-office__lounge-seat.is-planner .agent-office__lounge-avatar {
+  border-color: hsl(var(--warning) / 0.38);
+  background: hsl(var(--warning) / 0.12);
+  color: hsl(var(--warning));
+}
+.agent-office__lounge-seat.is-operator .agent-office__lounge-avatar {
+  border-color: hsl(var(--muted-foreground) / 0.34);
+  background: hsl(var(--muted-foreground) / 0.1);
+  color: hsl(var(--muted-foreground));
 }
-@keyframes agent-office-mug-steam {
-  0%, 18% {
-    opacity: 0;
-    transform: translateY(3px) translateX(0);
-  }
-  42% {
-    opacity: 0.55;
-  }
-  78%, 100% {
-    opacity: 0;
-    transform: translateY(-6px) translateX(2px);
-  }
+.agent-office__lounge-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1px;
 }
-@keyframes agent-office-blink {
-  0%, 44%, 48%, 100% {
-    transform: scaleY(1);
-  }
-  46% {
-    transform: scaleY(0.12);
-  }
+.agent-office__lounge-copy strong {
+  overflow: hidden;
+  color: hsl(var(--foreground));
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-@keyframes agent-office-terminal-bars {
-  from {
-    transform: scaleY(0.45);
-    opacity: 0.42;
-  }
-  to {
-    transform: scaleY(1.15);
-    opacity: 1;
-  }
+.agent-office__lounge-copy small {
+  overflow: hidden;
+  color: hsl(var(--muted-foreground));
+  font: 500 9px / 1.3 var(--font-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-@keyframes agent-office-lane-arrive {
-  from {
-    transform: translateY(8px) scale(0.992);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0) scale(1);
-    opacity: 1;
-  }
+.agent-office__lounge-meta {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-left: auto;
+  color: hsl(var(--muted-foreground));
+  font: 500 9px / 1 var(--font-mono);
 }
-@keyframes agent-office-memory-pulse {
-  0%, 100% {
-    transform: scale(0.72) rotate(0);
-    opacity: 0.35;
-  }
-  50% {
-    transform: scale(1.08) rotate(8deg);
-    opacity: 1;
-  }
+.agent-office__lounge-mail {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: hsl(var(--info));
 }
-@keyframes agent-office-web-signal {
-  0% {
-    transform: rotate(-38deg) scale(0.72);
-    opacity: 0;
-  }
-  45% {
-    opacity: 0.82;
-  }
-  100% {
-    transform: rotate(-38deg) scale(1.08);
-    opacity: 0;
-  }
+.agent-office__lounge-mail svg {
+  width: 11px;
+  height: 11px;
 }
-@keyframes agent-office-inspect {
-  from {
-    transform: translate(0, 0) rotate(-4deg);
-  }
-  to {
-    transform: translate(13px, 3px) rotate(5deg);
+@media (max-width: 1040px) {
+  .agent-office__briefing {
+    grid-template-columns: 1fr;
   }
-}
-@keyframes agent-office-inspect-handle {
-  from {
-    transform: translate(0, 0) rotate(42deg);
+  .agent-office__client-header {
+    flex-wrap: wrap;
   }
-  to {
-    transform: translate(13px, 3px) rotate(51deg);
+  .agent-office__client-stats {
+    width: 100%;
+    justify-content: flex-start;
   }
-}
-@keyframes agent-office-write-stroke {
-  from {
-    transform: translateX(-4px) rotate(-27deg);
+  .agent-office__column-headings,
+  .agent-office__lane {
+    grid-template-columns: 150px minmax(390px, 1fr) 230px;
   }
-  to {
-    transform: translateX(5px) rotate(-18deg);
+  .agent-office__mail-routes {
+    left: 176px;
   }
-}
-@keyframes agent-office-charm-blink {
-  0%, 45%, 49%, 100% {
-    transform: scaleY(1);
+  .agent-office__summary > div {
+    min-width: 72px;
   }
-  47% {
-    transform: scaleY(0.12);
+  .agent-office__summary span {
+    display: none;
   }
-}
-@keyframes agent-office-charm-bob {
-  0%, 76%, 100% {
-    transform: translateY(0) rotate(0);
+  .agent-office__title {
+    min-width: 185px;
   }
-  84%, 91% {
-    transform: translateY(-2px) rotate(-5deg);
+  .agent-office__title h1 {
+    max-width: 200px;
   }
 }
-@keyframes agent-office-yawn-head {
-  0%, 72%, 100% {
-    transform: translateY(0) rotate(0);
+@media (max-width: 820px) {
+  .agent-office__header {
+    flex-wrap: wrap;
+    gap: 8px;
   }
-  78%, 90% {
-    transform: translateY(-2px) rotate(-7deg);
+  .agent-office__summary {
+    order: 3;
+    width: 100%;
+    justify-content: flex-start;
   }
-}
-@keyframes agent-office-yawn-mouth {
-  0%, 72%, 100% {
-    transform: scaleY(1);
+  .agent-office__summary > div {
+    padding-block: 3px;
   }
-  80%, 88% {
-    transform: scaleY(3.5);
+  .agent-office__live-pill {
+    margin-left: auto;
   }
-}
-@keyframes agent-office-idle-stretch {
-  0%, 72%, 100% {
-    transform: rotate(-11deg);
+  .agent-office__column-headings {
+    display: none;
   }
-  80%, 90% {
-    transform: translate(2px, -7px) rotate(-34deg);
+  .agent-office__lane {
+    grid-template-columns: 132px minmax(380px, 1fr);
   }
-}
-@keyframes agent-office-type {
-  to {
-    transform: rotate(-4deg) translateY(2px);
+  .agent-office__mail-routes {
+    left: 158px;
   }
-}
-@keyframes agent-office-nod {
-  0%, 70%, 100% {
-    transform: rotate(0);
+  .agent-office__history {
+    display: none;
   }
-  82% {
-    transform: rotate(3deg);
+  .agent-office__floor {
+    overflow-x: auto;
   }
 }
-@keyframes agent-office-ring {
-  from {
-    transform: scale(0.82);
-    opacity: 0.42;
-  }
-  to {
-    transform: scale(1.18);
-    opacity: 0;
+@media (prefers-reduced-motion: reduce) {
+  .agent-office *,
+  .agent-office *::before,
+  .agent-office *::after {
+    scroll-behavior: auto;
+    animation-duration: 0.001ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.001ms;
   }
 }
-@keyframes agent-office-pulse {
-  0%, 100% {
-    opacity: 0.55;
-    transform: scale(0.8);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
+
+/* src/components/MessageBubble/ledger.css */
+.ws-ledger {
+  position: relative;
+  background: hsl(var(--card) / 0.4);
+  border-left-width: 2px;
+  border-left-style: solid;
 }
-@keyframes agent-office-drawer {
-  from {
-    transform: translateX(35px);
-    opacity: 0.5;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+.ws-ledger--ok {
+  border-left-color: hsl(var(--success) / 0.75);
 }
-.agent-office__model-chip {
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  padding: 1px 7px;
-  border: 1px solid hsl(var(--primary) / 0.3);
-  border-radius: 999px;
-  background: hsl(var(--primary) / 0.08);
-  color: hsl(var(--primary));
-  font: 600 9px / 1.5 var(--font-mono);
-  letter-spacing: 0.02em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.ws-ledger--error {
+  border-left-color: hsl(var(--destructive) / 0.85);
+  background: hsl(var(--destructive) / 0.04);
 }
-.agent-office__client-desks {
-  position: relative;
+.ws-ledger--running {
+  border-left-color: hsl(var(--warning) / 0.9);
+  animation: wsRailPulse 1.8s ease-in-out infinite;
 }
-.agent-office__mail-routes {
+.ws-ledger--running::before {
+  content: "";
   position: absolute;
-  z-index: 6;
-  top: 9px;
-  bottom: 1px;
-  left: 206px;
-  width: 44px;
+  left: -2px;
+  top: 0;
+  width: 2px;
+  height: 34%;
+  background:
+    linear-gradient(
+      to bottom,
+      transparent,
+      hsl(var(--warning)),
+      transparent);
+  animation: wsRailSweep 1.9s ease-in-out infinite;
   pointer-events: none;
 }
-.agent-office__mail-route {
-  position: absolute;
-  inset: 0;
+.ws-ledger__dot {
+  width: 0.4rem;
+  height: 0.4rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background: currentColor;
+  box-shadow: 0 0 6px -1px currentColor;
 }
-.agent-office__mail-route-parcel {
-  position: absolute;
-  top: var(--from);
-  left: 0;
-  display: grid;
-  width: 30px;
-  height: 30px;
-  place-items: center;
-  border: 1px solid hsl(var(--info) / 0.55);
-  border-radius: 9px;
-  background: hsl(var(--card) / 0.94);
-  box-shadow: 0 4px 14px hsl(var(--info) / 0.3), 0 0 0 3px hsl(var(--info) / 0.08);
-  color: hsl(var(--info));
-  animation: agent-office-mail-travel 3.8s ease-in-out infinite;
+.ws-ledger__dot--running {
+  animation: wsDotPulse 1.4s ease-in-out infinite;
 }
-.agent-office__mail-route-parcel svg {
-  width: 15px;
-  height: 15px;
+.ws-reasoning {
+  position: relative;
+  border-left: 1px dashed hsl(var(--primary) / 0.35);
+  padding-left: 0.75rem;
 }
-@keyframes agent-office-mail-travel {
+.ws-reasoning__mark {
+  color: hsl(var(--primary));
+  filter: drop-shadow(0 0 5px hsl(var(--primary) / 0.4));
+}
+@keyframes wsRailPulse {
+  0%, 100% {
+    border-left-color: hsl(var(--warning) / 0.9);
+  }
+  50% {
+    border-left-color: hsl(var(--warning) / 0.4);
+  }
+}
+@keyframes wsRailSweep {
   0% {
-    top: var(--from);
+    top: -34%;
     opacity: 0;
-    transform: translateY(-50%) scale(0.7);
   }
-  12% {
+  25% {
     opacity: 1;
-    transform: translateY(-50%) scale(1);
   }
-  86% {
+  75% {
     opacity: 1;
   }
   100% {
-    top: var(--to);
+    top: 100%;
     opacity: 0;
-    transform: translateY(-50%) scale(0.7);
   }
 }
-.agent-office__desks-empty {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 9px 9px;
-  padding: 13px 14px;
-  border: 1px dashed var(--office-line);
-  border-radius: 12px;
-  color: hsl(var(--muted-foreground));
-  font: 500 10.5px / 1.4 var(--font-mono);
-}
-.agent-office__desks-empty svg {
-  width: 14px;
-  height: 14px;
-  color: hsl(var(--warning));
-}
-.agent-office__lounge {
-  margin: 2px 9px 10px;
-  padding: 10px 12px 12px;
-  border: 1px dashed hsl(var(--border));
-  border-radius: 14px;
-  background:
-    linear-gradient(
-      160deg,
-      hsl(var(--warning) / 0.05),
-      transparent 62%),
-    var(--office-panel);
+@keyframes wsDotPulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
 }
-.agent-office__lounge-heading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 9px;
-  color: hsl(var(--muted-foreground));
-  font: 600 10px / 1 var(--font-mono);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+@media (prefers-reduced-motion: reduce) {
+  .ws-ledger--running,
+  .ws-ledger--running::before,
+  .ws-ledger__dot--running {
+    animation: none;
+  }
+  .ws-ledger--running::before {
+    display: none;
+  }
 }
-.agent-office__lounge-heading svg {
-  width: 14px;
-  height: 14px;
-  color: hsl(var(--warning));
+
+/* src/components/ChatView/thinking-bubble.css */
+.thinking-bubble {
+  --thinking-color: hsl(var(--primary));
+  --thinking-glow: hsl(var(--primary) / 0.36);
 }
-.agent-office__lounge-heading > span {
-  margin-left: auto;
-  font-weight: 500;
-  letter-spacing: 0;
-  text-transform: none;
+.thinking-orb {
+  position: relative;
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  color: var(--thinking-color);
+  border-radius: 9999px;
+  background:
+    radial-gradient(
+      circle at 35% 30%,
+      hsl(var(--primary) / 0.24),
+      transparent 42%),
+    hsl(var(--primary) / 0.08);
+  box-shadow:
+    0 0 0 2px hsl(var(--background)),
+    0 0 0 3px hsl(var(--primary) / 0.18),
+    0 0 22px -6px var(--thinking-glow);
+  overflow: hidden;
 }
-.agent-office__lounge-seats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.thinking-orb::before {
+  content: "";
+  position: absolute;
+  inset: -45%;
+  background:
+    conic-gradient(
+      from 90deg,
+      transparent 0 22%,
+      var(--thinking-glow) 34%,
+      transparent 48% 100%);
+  animation: thinkingOrbit 2.4s linear infinite;
 }
-.agent-office__lounge-seat {
-  display: flex;
-  min-width: 190px;
-  flex: 0 1 auto;
-  align-items: center;
-  gap: 9px;
-  padding: 7px 10px;
-  border: 1px solid var(--office-line);
-  border-radius: 11px;
-  background: hsl(var(--card) / 0.7);
-  cursor: pointer;
-  text-align: left;
-  transition:
-    border-color 160ms ease,
-    box-shadow 160ms ease,
-    transform 160ms ease;
+.thinking-orb::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: inherit;
+  background: hsl(var(--background) / 0.82);
 }
-.agent-office__lounge-seat:disabled {
-  cursor: default;
-  opacity: 0.72;
+.thinking-orb__icon {
+  position: relative;
+  z-index: 2;
+  animation: thinkingBrain 1.8s ease-in-out infinite;
+  filter: drop-shadow(0 0 6px var(--thinking-glow));
 }
-.agent-office__lounge-seat:not(:disabled):hover {
-  border-color: hsl(var(--primary) / 0.4);
-  box-shadow: 0 6px 16px hsl(var(--shadow-color) / 0.1);
-  transform: translateY(-1px);
+.thinking-orb__ring {
+  position: absolute;
+  inset: -2px;
+  z-index: 1;
+  border-radius: inherit;
+  border: 1px solid hsl(var(--primary) / 0.32);
+  animation: thinkingRipple 2.2s ease-out infinite;
 }
-.agent-office__lounge-avatar {
-  display: grid;
-  width: 28px;
-  height: 28px;
-  flex: 0 0 auto;
-  place-items: center;
-  border: 1px solid hsl(var(--border));
-  border-radius: 9px;
-  background: hsl(var(--accent) / 0.5);
-  color: hsl(var(--muted-foreground));
+.thinking-orb__ring--delay {
+  animation-delay: 1.1s;
 }
-.agent-office__lounge-avatar svg {
-  width: 14px;
-  height: 14px;
+.thinking-orb__spark {
+  position: absolute;
+  z-index: 3;
+  width: 0.3rem;
+  height: 0.3rem;
+  border-radius: 9999px;
+  background: currentColor;
+  box-shadow: 0 0 10px 1px currentColor;
+  opacity: 0.78;
 }
-.agent-office__lounge-seat.is-leader .agent-office__lounge-avatar {
-  border-color: hsl(var(--primary) / 0.35);
-  background: hsl(var(--primary) / 0.12);
-  color: hsl(var(--primary));
+.thinking-orb__spark--one {
+  animation: thinkingSparkOne 2.8s ease-in-out infinite;
 }
-.agent-office__lounge-seat.is-builder .agent-office__lounge-avatar {
-  border-color: hsl(var(--info) / 0.35);
-  background: hsl(var(--info) / 0.12);
-  color: hsl(var(--info));
+.thinking-orb__spark--two {
+  animation: thinkingSparkTwo 3.2s ease-in-out infinite;
 }
-.agent-office__lounge-seat.is-researcher .agent-office__lounge-avatar {
-  border-color: hsl(var(--success) / 0.35);
-  background: hsl(var(--success) / 0.12);
-  color: hsl(var(--success));
+.thinking-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  letter-spacing: 0.02em;
 }
-.agent-office__lounge-seat.is-reviewer .agent-office__lounge-avatar {
-  border-color: hsl(var(--destructive) / 0.32);
-  background: hsl(var(--destructive) / 0.1);
-  color: hsl(var(--destructive));
+.thinking-dots {
+  display: inline-flex;
+  gap: 0.18rem;
+  align-items: center;
 }
-.agent-office__lounge-seat.is-planner .agent-office__lounge-avatar {
-  border-color: hsl(var(--warning) / 0.38);
-  background: hsl(var(--warning) / 0.12);
-  color: hsl(var(--warning));
+.thinking-dots span {
+  width: 0.22rem;
+  height: 0.22rem;
+  border-radius: 9999px;
+  background: currentColor;
+  animation: thinkingDot 1.15s ease-in-out infinite;
 }
-.agent-office__lounge-seat.is-operator .agent-office__lounge-avatar {
-  border-color: hsl(var(--muted-foreground) / 0.34);
-  background: hsl(var(--muted-foreground) / 0.1);
-  color: hsl(var(--muted-foreground));
+.thinking-dots span:nth-child(2) {
+  animation-delay: 0.16s;
 }
-.agent-office__lounge-copy {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1px;
+.thinking-dots span:nth-child(3) {
+  animation-delay: 0.32s;
 }
-.agent-office__lounge-copy strong {
+.thinking-panel {
+  position: relative;
   overflow: hidden;
-  color: hsl(var(--foreground));
-  font-size: 11.5px;
-  font-weight: 600;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  border-color: hsl(var(--primary) / 0.22);
+  background:
+    linear-gradient(
+      115deg,
+      hsl(var(--primary) / 0.08),
+      transparent 38%,
+      hsl(var(--primary) / 0.05)),
+    hsl(var(--card) / 0.48);
+  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.06);
 }
-.agent-office__lounge-copy small {
-  overflow: hidden;
-  color: hsl(var(--muted-foreground));
-  font: 500 9px / 1.3 var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.thinking-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-120%);
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--primary) / 0.16),
+      transparent);
+  animation: thinkingScan 2.6s ease-in-out infinite;
+  pointer-events: none;
 }
-.agent-office__lounge-meta {
+.thinking-wave {
+  position: relative;
+  z-index: 1;
   display: flex;
-  align-items: center;
-  gap: 7px;
-  margin-left: auto;
-  color: hsl(var(--muted-foreground));
-  font: 500 9px / 1 var(--font-mono);
+  align-items: end;
+  gap: 0.18rem;
+  height: 0.6rem;
+  margin-bottom: 0.25rem;
+  color: var(--thinking-color);
 }
-.agent-office__lounge-mail {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: hsl(var(--info));
+.thinking-wave span {
+  width: 0.18rem;
+  min-height: 0.14rem;
+  border-radius: 9999px;
+  background: currentColor;
+  opacity: 0.65;
+  animation: thinkingWave 0.9s ease-in-out infinite;
 }
-.agent-office__lounge-mail svg {
-  width: 11px;
-  height: 11px;
+.thinking-wave span:nth-child(2) {
+  animation-delay: 0.08s;
 }
-@media (max-width: 1040px) {
-  .agent-office__briefing {
-    grid-template-columns: 1fr;
-  }
-  .agent-office__client-header {
-    flex-wrap: wrap;
-  }
-  .agent-office__client-stats {
-    width: 100%;
-    justify-content: flex-start;
+.thinking-wave span:nth-child(3) {
+  animation-delay: 0.16s;
+}
+.thinking-wave span:nth-child(4) {
+  animation-delay: 0.24s;
+}
+.thinking-wave span:nth-child(5) {
+  animation-delay: 0.32s;
+}
+.thinking-text {
+  position: relative;
+  z-index: 1;
+}
+@keyframes thinkingOrbit {
+  to {
+    transform: rotate(1turn);
   }
-  .agent-office__column-headings,
-  .agent-office__lane {
-    grid-template-columns: 150px minmax(390px, 1fr) 230px;
+}
+@keyframes thinkingBrain {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.86;
   }
-  .agent-office__mail-routes {
-    left: 176px;
+  45% {
+    transform: scale(1.12);
+    opacity: 1;
   }
-  .agent-office__summary > div {
-    min-width: 72px;
+}
+@keyframes thinkingRipple {
+  0% {
+    transform: scale(0.82);
+    opacity: 0.65;
   }
-  .agent-office__summary span {
-    display: none;
+  70%, 100% {
+    transform: scale(1.45);
+    opacity: 0;
   }
-  .agent-office__title {
-    min-width: 185px;
+}
+@keyframes thinkingSparkOne {
+  0%, 100% {
+    transform: translate(-0.65rem, -0.55rem) scale(0.75);
+    opacity: 0.35;
   }
-  .agent-office__title h1 {
-    max-width: 200px;
+  45% {
+    transform: translate(0.72rem, -0.2rem) scale(1);
+    opacity: 0.95;
   }
 }
-@media (max-width: 820px) {
-  .agent-office__header {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .agent-office__summary {
-    order: 3;
-    width: 100%;
-    justify-content: flex-start;
+@keyframes thinkingSparkTwo {
+  0%, 100% {
+    transform: translate(0.55rem, 0.58rem) scale(0.7);
+    opacity: 0.28;
   }
-  .agent-office__summary > div {
-    padding-block: 3px;
+  55% {
+    transform: translate(-0.72rem, 0.12rem) scale(1.05);
+    opacity: 0.9;
   }
-  .agent-office__live-pill {
-    margin-left: auto;
+}
+@keyframes thinkingDot {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.35;
   }
-  .agent-office__column-headings {
-    display: none;
+  40% {
+    transform: translateY(-0.18rem);
+    opacity: 1;
   }
-  .agent-office__lane {
-    grid-template-columns: 132px minmax(380px, 1fr);
+}
+@keyframes thinkingScan {
+  0% {
+    transform: translateX(-120%);
   }
-  .agent-office__mail-routes {
-    left: 158px;
+  48%, 100% {
+    transform: translateX(120%);
   }
-  .agent-office__history {
-    display: none;
+}
+@keyframes thinkingWave {
+  0%, 100% {
+    height: 0.14rem;
+    opacity: 0.38;
   }
-  .agent-office__floor {
-    overflow-x: auto;
+  45% {
+    height: 0.58rem;
+    opacity: 0.92;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .agent-office *,
-  .agent-office *::before,
-  .agent-office *::after {
-    scroll-behavior: auto;
-    animation-duration: 0.001ms;
+  .thinking-bubble,
+  .thinking-bubble *,
+  .thinking-orb,
+  .thinking-orb::before,
+  .thinking-orb::after,
+  .thinking-orb__icon,
+  .thinking-orb__ring,
+  .thinking-orb__spark,
+  .thinking-dots,
+  .thinking-dots span,
+  .thinking-panel,
+  .thinking-panel::before,
+  .thinking-wave,
+  .thinking-wave span,
+  .thinking-text {
+    animation: none;
     animation-iteration-count: 1;
-    transition-duration: 0.001ms;
+    animation-duration: 0s;
+    animation-delay: 0s;
+    transition: none;
+    scroll-behavior: auto;
+  }
+  .thinking-orb__icon {
+    filter: none;
+  }
+  .thinking-panel {
+    transform: none;
   }
 }