@yagr/agent 0.1.0 → 0.2.5

package/dist/webui/styles.css

@@ -1,24 +1,89 @@
 /* src/webui/styles.css */
 :root {
   color-scheme: light;
-  --bg-a: #f4fbff;
-  --bg-b: #f7f3ff;
-  --panel: rgba(255, 255, 255, 0.8);
-  --panel-strong: rgba(255, 255, 255, 0.92);
-  --panel-border: rgba(83, 128, 255, 0.16);
-  --ink: #13233d;
-  --muted: #53627d;
-  --blue: #4fc4ff;
-  --blue-deep: #2f7cff;
-  --violet: #7f4dff;
-  --violet-deep: #5a2eff;
-  --shadow: 0 18px 44px rgba(48, 76, 159, 0.12);
+  --bg-a: #f4f5f3;
+  --bg-b: #ecefed;
+  --panel: #eff6f7;
+  --panel-strong: #e5f0f2;
+  --panel-soft: #dcebee;
+  --panel-border: #bfd1d7;
+  --panel-border-strong: #8ea8b2;
+  --panel-border-deep: #2c3f4a;
+  --panel-highlight: transparent;
+  --ink: #0d1020;
+  --muted: #4b616b;
+  --field-bg: #f7faf9;
+  --blue: #d5e7eb;
+  --blue-deep: #80bbc7;
+  --violet: #456874;
+  --violet-deep: #18222c;
+  --rose: #e63d7a;
+  --shadow: 0 8px 20px rgba(12, 16, 31, 0.06);
   font-family:
     "Space Grotesk",
     "Avenir Next",
     "Segoe UI",
     sans-serif;
 }
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg-a: #0f151c;
+    --bg-b: #131c25;
+    --panel: #18222c;
+    --panel-strong: #1d2833;
+    --panel-soft: #141d26;
+    --panel-border: #2d3f4c;
+    --panel-border-strong: #4d6975;
+    --panel-border-deep: #9ecdd7;
+    --ink: #edf3f5;
+    --muted: #9fb1b8;
+    --field-bg: #111922;
+    --blue: #23343d;
+    --blue-deep: #80bbc7;
+    --violet: #80bbc7;
+    --violet-deep: #80bbc7;
+    --shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
+  }
+}
+:root[data-theme-mode=light] {
+  color-scheme: light;
+  --bg-a: #f4f5f3;
+  --bg-b: #ecefed;
+  --panel: #eff6f7;
+  --panel-strong: #e5f0f2;
+  --panel-soft: #dcebee;
+  --panel-border: #bfd1d7;
+  --panel-border-strong: #8ea8b2;
+  --panel-border-deep: #2c3f4a;
+  --ink: #0d1020;
+  --muted: #4b616b;
+  --field-bg: #f7faf9;
+  --blue: #d5e7eb;
+  --blue-deep: #80bbc7;
+  --violet: #456874;
+  --violet-deep: #18222c;
+  --shadow: 0 8px 20px rgba(12, 16, 31, 0.06);
+}
+:root[data-theme-mode=dark] {
+  color-scheme: dark;
+  --bg-a: #0f151c;
+  --bg-b: #131c25;
+  --panel: #18222c;
+  --panel-strong: #1d2833;
+  --panel-soft: #141d26;
+  --panel-border: #2d3f4c;
+  --panel-border-strong: #4d6975;
+  --panel-border-deep: #9ecdd7;
+  --ink: #edf3f5;
+  --muted: #9fb1b8;
+  --field-bg: #111922;
+  --blue: #23343d;
+  --blue-deep: #80bbc7;
+  --violet: #80bbc7;
+  --violet-deep: #80bbc7;
+  --shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
+}
 * {
   box-sizing: border-box;
 }
@@ -31,19 +96,10 @@ body,
 body {
   color: var(--ink);
   background:
-    radial-gradient(
-      circle at top left,
-      rgba(79, 196, 255, 0.22),
-      transparent 26%),
-    radial-gradient(
-      circle at 85% 10%,
-      rgba(127, 77, 255, 0.2),
-      transparent 24%),
     linear-gradient(
       180deg,
-      var(--bg-a) 0%,
-      #fdfcff 50%,
-      var(--bg-b) 100%);
+      var(--bg-a),
+      var(--bg-b));
 }
 h1,
 h2,
@@ -89,10 +145,11 @@ textarea {
 }
 .sidebar {
   display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 1rem;
-  align-content: start;
+  align-content: stretch;
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
 }
 .panel {
   position: relative;
@@ -102,6 +159,8 @@ textarea {
   background: var(--panel);
   backdrop-filter: blur(18px);
   box-shadow: var(--shadow);
+  outline: 1px solid var(--panel-highlight);
+  outline-offset: -1px;
 }
 .panel::before {
   content: "";
@@ -110,8 +169,8 @@ textarea {
   background:
     linear-gradient(
       145deg,
-      rgba(255, 255, 255, 0.38),
-      rgba(255, 255, 255, 0) 42%);
+      rgba(255, 255, 255, 0.4),
+      rgba(255, 255, 255, 0) 44%);
   pointer-events: none;
 }
 .brandCard,
@@ -130,27 +189,63 @@ textarea {
   background:
     linear-gradient(
       135deg,
-      rgba(255, 255, 255, 0.94),
-      rgba(239, 248, 255, 0.82));
+      rgba(255, 255, 255, 0.96),
+      rgba(243, 252, 252, 0.84));
+}
+.brandCopy {
+  padding-top: 0.15rem;
+  padding-right: 7.25rem;
 }
 .brandMark {
-  width: 3.4rem;
-  height: 3.4rem;
-  border-radius: 1.2rem;
-  background:
-    radial-gradient(
-      circle at 30% 30%,
-      rgba(79, 196, 255, 0.9),
-      transparent 34%),
-    radial-gradient(
-      circle at 65% 65%,
-      rgba(127, 77, 255, 0.92),
-      transparent 40%),
-    linear-gradient(
-      135deg,
-      rgba(79, 196, 255, 0.28),
-      rgba(127, 77, 255, 0.26));
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 26px rgba(75, 124, 255, 0.2);
+  display: block;
+  width: clamp(3.6rem, 8vw, 5.25rem);
+  height: auto;
+  filter: drop-shadow(0 16px 24px rgba(128, 187, 199, 0.24));
+}
+.brandTitle {
+  max-width: 12ch;
+}
+.themeControl {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: calc(100% - 8.5rem);
+}
+.themeButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid var(--panel-border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--panel) 72%, transparent);
+  color: var(--muted);
+}
+.themeButton:hover {
+  background: var(--panel-soft);
+  border-color: var(--panel-border);
+  color: var(--ink);
+}
+.themeButton:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--blue-deep) 52%, transparent);
+  outline-offset: 2px;
+}
+.themeIcon {
+  width: 0.95rem;
+  height: 0.95rem;
+  display: block;
+}
+.brandTitleLine {
+  display: block;
+  white-space: nowrap;
+}
+.brandTitleAccent {
+  color: var(--violet);
 }
 .eyebrow {
   margin: 0 0 0.45rem;
@@ -186,8 +281,11 @@ label span,
   background:
     linear-gradient(
       135deg,
-      rgba(255, 255, 255, 0.94),
-      rgba(243, 247, 255, 0.86));
+      rgba(255, 255, 255, 0.96),
+      rgba(243, 252, 252, 0.9));
+}
+.chatHeroActions {
+  flex-wrap: wrap;
 }
 .setupHero {
   display: grid;
@@ -201,8 +299,10 @@ label span,
 }
 .sessionPanel {
   display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 1rem;
   background: var(--panel-strong);
+  min-height: 0;
 }
 .sessionFacts {
   display: grid;
@@ -213,15 +313,14 @@ label span,
   gap: 0.18rem;
   padding: 0.9rem 1rem;
   border-radius: 1rem;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(91, 114, 179, 0.12);
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--panel-border-strong);
 }
 .chatStage {
   height: 100%;
   min-height: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: 1rem;
+  grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
 }
 .chatPanelSingleScroll {
@@ -237,11 +336,28 @@ label span,
   overflow-y: auto;
   overflow-x: hidden;
   display: grid;
+  align-content: start;
+  align-items: start;
+  grid-auto-rows: max-content;
   gap: 0.9rem;
-  padding-right: 0.25rem;
+  margin-right: -0.7rem;
+  padding-right: 0.7rem;
   padding-bottom: 0.2rem;
-  scrollbar-gutter: stable;
   overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--panel-border-strong) transparent;
+}
+.chatLog::-webkit-scrollbar {
+  width: 10px;
+}
+.chatLog::-webkit-scrollbar-track {
+  background: transparent;
+}
+.chatLog::-webkit-scrollbar-thumb {
+  background: var(--panel-border-strong);
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
 }
 .composerDocked {
   display: grid;
@@ -251,12 +367,12 @@ label span,
   z-index: 1;
   margin: 0 -1.15rem -1.15rem;
   padding: 0.95rem 1.15rem 1.15rem;
-  border-top: 1px solid rgba(91, 114, 179, 0.1);
+  border-top: 1px solid var(--panel-border);
   background:
     linear-gradient(
       180deg,
       rgba(255, 255, 255, 0.45),
-      rgba(255, 255, 255, 0.92) 18%,
+      rgba(255, 255, 255, 0.9) 18%,
       rgba(255, 255, 255, 0.96) 100%);
   backdrop-filter: blur(18px);
 }
@@ -287,16 +403,20 @@ input,
 select,
 textarea {
   width: 100%;
-  border: 1px solid rgba(91, 114, 179, 0.18);
+  border: 1px solid var(--panel-border-strong);
   border-radius: 1rem;
   padding: 0.82rem 0.95rem;
   color: var(--ink);
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--field-bg);
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease,
     background 0.2s ease;
 }
+input::placeholder,
+textarea::placeholder {
+  color: var(--muted);
+}
 textarea {
   min-height: 7rem;
   resize: vertical;
@@ -305,8 +425,8 @@ input:focus,
 select:focus,
 textarea:focus {
   outline: none;
-  border-color: rgba(90, 46, 255, 0.44);
-  box-shadow: 0 0 0 4px rgba(90, 46, 255, 0.12);
+  border-color: rgba(128, 187, 199, 0.56);
+  box-shadow: 0 0 0 4px rgba(184, 236, 239, 0.34);
 }
 button {
   border: none;
@@ -319,30 +439,67 @@ button {
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
+  position: relative;
+  overflow: hidden;
   border-radius: 999px;
   font-weight: 700;
   text-decoration: none;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 12px 28px rgba(12, 16, 31, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
-    background 0.2s ease;
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+.primaryButton::before,
+.ghostButton::before,
+.linkButton::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.18),
+      rgba(255, 255, 255, 0) 42%);
+  pointer-events: none;
+}
+.primaryButton::after,
+.ghostButton::after,
+.linkButton::after {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  pointer-events: none;
 }
 .primaryButton {
   padding: 0.86rem 1rem;
-  color: white;
+  color: #f7fbfb;
   background:
     linear-gradient(
       135deg,
-      var(--blue-deep),
-      var(--violet));
-  box-shadow: 0 12px 28px rgba(90, 46, 255, 0.2);
+      #12182a 0%,
+      #1f3144 56%,
+      #7fb9c5 100%);
+  border: 1px solid rgba(140, 198, 211, 0.22);
+  box-shadow: 0 14px 34px rgba(12, 16, 31, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 .ghostButton,
 .linkButton {
   padding: 0.72rem 0.95rem;
   color: var(--ink);
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(91, 114, 179, 0.18);
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.7),
+      rgba(228, 238, 241, 0.52));
+  border: 1px solid rgba(128, 187, 199, 0.2);
+  box-shadow: 0 10px 24px rgba(12, 16, 31, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.24);
 }
 .dangerButton {
   color: #d94778;
@@ -358,6 +515,7 @@ button {
 .ghostButton:hover,
 .linkButton:hover {
   transform: translateY(-1px);
+  box-shadow: 0 16px 36px rgba(12, 16, 31, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
 }
 .checkboxRow {
   display: flex;
@@ -384,36 +542,48 @@ button {
   gap: 0.7rem;
   padding: 1rem;
   border-radius: 1.25rem;
-  background: rgba(255, 255, 255, 0.86);
-  border: 1px solid rgba(91, 114, 179, 0.14);
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid var(--panel-border-strong);
 }
 .message.user {
   background:
     linear-gradient(
       135deg,
-      rgba(47, 124, 255, 0.14),
-      rgba(127, 77, 255, 0.12));
+      rgba(184, 236, 239, 0.4),
+      rgba(128, 187, 199, 0.22));
 }
 .message.assistant {
   background:
     linear-gradient(
       135deg,
-      rgba(255, 255, 255, 0.96),
-      rgba(240, 248, 255, 0.92));
+      rgba(255, 255, 255, 0.97),
+      rgba(243, 252, 252, 0.92));
 }
 .message.system {
-  background: rgba(19, 35, 61, 0.05);
+  background: rgba(13, 16, 32, 0.04);
+}
+.message.system {
+  padding: 0.1rem 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.message.system .messageTopline {
+  margin-bottom: 0.15rem;
+}
+.message.system .messageText {
+  max-width: 70ch;
 }
 .message.streaming {
   background:
     linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.98),
-      rgba(240, 248, 255, 0.94)),
+      rgba(243, 252, 252, 0.94)),
     linear-gradient(
       90deg,
-      rgba(79, 196, 255, 0.08),
-      rgba(127, 77, 255, 0.08));
+      rgba(184, 236, 239, 0.14),
+      rgba(69, 104, 116, 0.08));
 }
 .messageTopline {
   display: flex;
@@ -426,7 +596,7 @@ button {
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--violet-deep);
+  color: var(--violet);
 }
 .messageBadges {
   display: flex;
@@ -442,12 +612,12 @@ button {
   font-size: 0.75rem;
   font-weight: 700;
   color: var(--ink);
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid rgba(91, 114, 179, 0.14);
+  background: var(--panel-soft);
+  border: 1px solid var(--panel-border);
 }
 .phaseBadge {
   color: var(--violet-deep);
-  background: rgba(127, 77, 255, 0.1);
+  background: rgba(128, 187, 199, 0.16);
 }
 .quietBadge {
   color: var(--muted);
@@ -462,9 +632,9 @@ button {
   background:
     linear-gradient(
       135deg,
-      rgba(47, 124, 255, 0.08),
-      rgba(127, 77, 255, 0.08));
-  border: 1px solid rgba(91, 114, 179, 0.12);
+      rgba(184, 236, 239, 0.16),
+      rgba(69, 104, 116, 0.08));
+  border: 1px solid var(--panel-border);
 }
 .compactWorkbench {
   padding: 0.82rem 0.95rem;
@@ -489,21 +659,21 @@ button {
       135deg,
       var(--blue-deep),
       var(--violet));
-  box-shadow: 0 0 0 0 rgba(90, 46, 255, 0.24);
+  box-shadow: 0 0 0 0 rgba(128, 187, 199, 0.26);
   animation: workPulse 1.6s ease-in-out infinite;
 }
 .workGlyphRing {
   position: absolute;
   inset: 0;
   border-radius: 999px;
-  border: 1px solid rgba(90, 46, 255, 0.2);
+  border: 1px solid rgba(69, 104, 116, 0.22);
 }
 .workGlyphRingA {
   animation: workOrbit 2.2s linear infinite;
 }
 .workGlyphRingB {
   inset: 0.34rem;
-  border-color: rgba(47, 124, 255, 0.28);
+  border-color: rgba(128, 187, 199, 0.34);
   animation: workOrbitReverse 2.8s linear infinite;
 }
 .progressTicker {
@@ -517,8 +687,8 @@ button {
   align-items: center;
   padding: 0.62rem 0.78rem;
   border-radius: 0.95rem;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(91, 114, 179, 0.1);
+  background: rgba(255, 255, 255, 0.74);
+  border: 1px solid var(--panel-border);
   font-size: 0.93rem;
 }
 .progressTickerEntry.info .progressDot {
@@ -546,14 +716,14 @@ button {
   width: 0.72rem;
   height: 0.72rem;
   border-radius: 999px;
-  box-shadow: 0 0 0 6px rgba(79, 196, 255, 0.08);
+  box-shadow: 0 0 0 6px rgba(184, 236, 239, 0.18);
 }
 .streamPreview {
   display: grid;
   gap: 0.32rem;
   padding: 0.9rem 1rem;
   border-radius: 1rem;
-  background: rgba(19, 35, 61, 0.03);
+  background: rgba(13, 16, 32, 0.03);
   color: var(--muted);
   font-size: 0.95rem;
   line-height: 1.55;
@@ -611,7 +781,7 @@ button {
   margin-top: 0.24rem;
 }
 .markdownBody a {
-  color: var(--blue-deep);
+  color: var(--violet);
   text-decoration: underline;
   text-underline-offset: 0.14em;
   word-break: break-word;
@@ -619,7 +789,7 @@ button {
 .markdownBody code {
   padding: 0.12rem 0.36rem;
   border-radius: 0.45rem;
-  background: rgba(19, 35, 61, 0.08);
+  background: rgba(13, 16, 32, 0.08);
   font-family:
     "IBM Plex Mono",
     "SFMono-Regular",
@@ -631,7 +801,7 @@ button {
   overflow: auto;
   padding: 0.9rem 1rem;
   border-radius: 0.9rem;
-  background: rgba(19, 35, 61, 0.06);
+  background: rgba(13, 16, 32, 0.06);
 }
 .markdownBody pre code {
   padding: 0;
@@ -639,12 +809,12 @@ button {
 }
 .markdownBody blockquote {
   padding-left: 0.9rem;
-  border-left: 3px solid rgba(90, 46, 255, 0.24);
+  border-left: 3px solid rgba(128, 187, 199, 0.38);
   color: var(--muted);
 }
 .markdownBody hr {
   border: 0;
-  border-top: 1px solid rgba(91, 114, 179, 0.16);
+  border-top: 1px solid var(--panel-border);
 }
 .notice {
   position: fixed;
@@ -654,22 +824,192 @@ button {
   max-width: 24rem;
   padding: 0.95rem 1rem;
   border-radius: 1rem;
-  color: white;
+  color: #f7fbfb;
   background:
     linear-gradient(
       135deg,
-      rgba(19, 35, 61, 0.94),
-      rgba(90, 46, 255, 0.94));
-  box-shadow: 0 12px 30px rgba(19, 35, 61, 0.24);
+      rgba(13, 16, 32, 0.96),
+      rgba(69, 104, 116, 0.96),
+      rgba(128, 187, 199, 0.94));
+  box-shadow: 0 12px 30px rgba(12, 16, 31, 0.24);
+}
+.panel,
+.brandCard,
+.chatHero,
+.setupHero,
+.sessionPanel,
+.formPanel,
+.factCard,
+.composerDocked,
+.message,
+.message.user,
+.message.assistant,
+.message.system,
+.message.streaming,
+.workbench,
+.progressTickerEntry,
+.streamPreview,
+.workflowCard,
+.workflowGraphWrap {
+  background: var(--panel);
+  box-shadow: none;
+}
+.panel {
+  backdrop-filter: none;
+  outline: none;
+}
+.sessionPanel {
+  background: var(--panel);
+}
+.panel::before,
+.primaryButton::before,
+.ghostButton::before,
+.linkButton::before,
+.primaryButton::after,
+.ghostButton::after,
+.linkButton::after {
+  content: none;
+}
+.brandCard,
+.chatHero,
+.setupHero,
+.sessionPanel,
+.formPanel,
+.factCard,
+.composerDocked,
+.message,
+.workbench,
+.progressTickerEntry,
+.streamPreview,
+.workflowCard,
+.workflowGraphWrap {
+  border-color: var(--panel-border);
+}
+.composerDocked {
+  backdrop-filter: none;
+}
+.brandTitleAccent,
+.messageRole,
+.markdownBody a {
+  color: var(--blue-deep);
+}
+.primaryButton,
+.ghostButton,
+.linkButton {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
+}
+.primaryButton {
+  background: var(--violet-deep);
+  border: 1px solid var(--panel-border-deep);
+  color: #f3f7f8;
+}
+.ghostButton,
+.linkButton {
+  background: var(--panel);
+  border: 1px solid var(--panel-border-strong);
+  color: var(--ink);
+}
+.primaryButton:hover,
+.ghostButton:hover,
+.linkButton:hover {
+  box-shadow: none;
+  filter: brightness(0.96);
+}
+.composerButtonGroup {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+.resetChatButton {
+  background: transparent;
+}
+.sessionFacts {
+  gap: 0;
+  border-top: 1px solid var(--panel-border);
+}
+.factCard {
+  padding: 0.9rem 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.factCard + .factCard {
+  border-top: 1px solid var(--panel-border);
+}
+.message,
+.message.user,
+.message.assistant,
+.message.system,
+.message.streaming,
+.progressTickerEntry,
+.workbench,
+.streamPreview {
+  background: var(--panel-soft);
+  border-color: transparent;
+}
+.composerDocked {
+  background: var(--panel);
+  border-top-color: var(--panel-border);
+}
+.sessionPanel .sectionHeader .primaryButton {
+  padding: 0.72rem 0.96rem;
+  border-radius: 1.35rem;
+  background: var(--panel-soft);
+  border-color: var(--panel-border-strong);
+  color: var(--ink);
+}
+.sessionPanel .sectionHeader .primaryButton:hover {
+  filter: brightness(0.98);
+}
+.message.user,
+.workbench,
+.phaseBadge {
+  background: var(--panel-strong);
+}
+.message.system,
+.streamPreview,
+.markdownBody code,
+.markdownBody pre {
+  background: var(--panel-strong);
+}
+.message.system {
+  background: transparent;
+  border-color: transparent;
+}
+.message.system .messageText,
+.message.system .markdownBody,
+.message.system .markdownBody p {
+  background: transparent;
+}
+.messageBadge.quietBadge {
+  color: var(--muted);
+  background: var(--panel);
+}
+.progressTickerEntry.info .progressDot,
+.workflowBadge {
+  background: var(--blue-deep);
+}
+.progressTickerEntry.success .progressDot {
+  background: #1f8f64;
+}
+.progressTickerEntry.error .progressDot {
+  background: #c94d72;
+}
+.notice {
+  background: var(--violet-deep);
+  color: #f3f7f8;
+  box-shadow: none;
 }
 @keyframes workPulse {
   0%, 100% {
     transform: scale(0.92);
-    box-shadow: 0 0 0 0 rgba(90, 46, 255, 0.16);
+    box-shadow: 0 0 0 0 rgba(128, 187, 199, 0.18);
   }
   50% {
     transform: scale(1);
-    box-shadow: 0 0 0 12px rgba(90, 46, 255, 0);
+    box-shadow: 0 0 0 12px rgba(128, 187, 199, 0);
   }
 }
 @keyframes workOrbit {
@@ -709,6 +1049,12 @@ button {
   .sidebar {
     overflow: visible;
   }
+  .brandTitle {
+    max-width: none;
+  }
+  .brandTitleLine {
+    white-space: normal;
+  }
 }
 @media (max-width: 720px) {
   .shell {
@@ -717,6 +1063,15 @@ button {
   .brandCard {
     grid-template-columns: 1fr;
   }
+  .brandCopy {
+    padding-right: 0;
+    padding-top: 0;
+  }
+  .themeControl {
+    position: static;
+    margin-top: 0.9rem;
+    max-width: none;
+  }
   .chatHero,
   .sectionHeader,
   .chatHeroActions,
@@ -737,4 +1092,62 @@ button {
     width: 100%;
   }
 }
+.workflowCard {
+  margin-top: 0.75rem;
+  border-radius: 12px;
+  background: var(--surface-elevated, rgba(255, 255, 255, 0.88));
+  border: 1px solid var(--border, var(--panel-border));
+  overflow: hidden;
+}
+.workflowHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+}
+.workflowHeaderLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+.workflowBadge {
+  display: inline-block;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  color: #fff;
+  background:
+    linear-gradient(
+      135deg,
+      var(--violet-deep),
+      var(--blue-deep));
+}
+.workflowTitle {
+  font-size: 0.9rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workflowHeader .primaryButton {
+  flex-shrink: 0;
+  width: auto;
+}
+.workflowGraphWrap {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border, var(--panel-border));
+  overflow-x: auto;
+  background: var(--surface-elevated, rgba(247, 252, 252, 0.92));
+  max-height: 640px;
+  overflow-y: auto;
+}
+.workflowGraph {
+  display: block;
+}
 /*# sourceMappingURL=styles.css.map */