feat(web-ui): markdown editor, FlowChat markdown vars, loading UI

src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx

@@ -19,6 +19,7 @@ import { createLogger } from '@/shared/utils/logger';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
 import { useAgentIdentityDocument } from '@/app/scenes/my-agent/useAgentIdentityDocument';
 import { MEditor } from '@/tools/editor/meditor';
+import { useTheme } from '@/infrastructure/theme/hooks/useTheme';
 import { PersonaRadar } from './PersonaRadar';
 import { useNurseryStore } from '../nurseryStore';
 import { useTokenEstimate, formatTokenCount } from './useTokenEstimate';
@@ -62,6 +63,7 @@ function computeRadarDims(
 
 const AssistantConfigPage: React.FC = () => {
   const { t } = useTranslation('scenes/profile');
+  const { isLight } = useTheme();
   const { openGallery, activeWorkspaceId } = useNurseryStore();
   const { assistantWorkspacesList } = useWorkspaceContext();
 
@@ -337,6 +339,7 @@ const AssistantConfigPage: React.FC = () => {
                     value={identityDocument.body}
                     onChange={handleBodyChange}
                     mode="ir"
+                    theme={isLight ? 'light' : 'dark'}
                   />
                 </div>
               </>

src/web-ui/src/app/styles/global.scss

@@ -5,6 +5,8 @@
 
 /* ========== Import design tokens ========== */
 @use '../../component-library/styles/tokens.scss' as *;
+@use '../../component-library/styles/flowchat-markdown-table-vars.scss';
+@use '../../component-library/styles/flowchat-markdown-code-vars.scss';
 
 /* ========== Global CSS variables ========== */
 :root {
@@ -137,8 +139,8 @@ blockquote {
   font-style: italic;
 }
 
-/* Divider */
-hr {
+/* Divider (skip m-editor: ProseMirror uses border-top hairline; global height+background stacks visually) */
+hr:not(:is(.m-editor hr)) {
   border: none;
   height: 1px;
   background: var(--border-base);

src/web-ui/src/component-library/components/CubeLoading/CubeLoading.tsx

@@ -29,23 +29,16 @@ export const CubeLoading: React.FC<CubeLoadingProps> = ({
       style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}
     >
       <div
-        className="spiral-container"
+        className="panda-breath-container"
         style={{
           '--uib-size': sizeMap[size],
           '--uib-color': 'currentColor',
           '--uib-speed': '0.9s',
         } as React.CSSProperties}
       >
-        <div className="spiral-inner">
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-          <div className="spiral-dot" />
-        </div>
+        <div className="panda-face" />
+        <div className="panda-eye panda-eye--left" />
+        <div className="panda-eye panda-eye--right" />
       </div>
       {text && <div className="cube-loading__text">{text}</div>}
     </div>

src/web-ui/src/component-library/components/CubeLoading/Spiral.scss

@@ -1,121 +1,54 @@
-.spiral-container {
+// --uib-size  : square container side (24px / 40px / 60px)
+// --uib-color : currentColor (inherits foreground / theme)
+// --uib-speed : base animation duration 0.9s
+
+.panda-breath-container {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--uib-size);
   width: var(--uib-size);
-}
-
-.spiral-inner {
-  --uib-center: calc(var(--uib-size) / 2 - var(--uib-size) / 5 / 2);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
   height: var(--uib-size);
-  width: var(--uib-size);
-  animation: spiral-rotate calc(var(--uib-speed) * 3) linear infinite;
+  position: relative;
 }
 
-.spiral-dot {
+.panda-face {
   position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 100%;
-  width: 100%;
-
-  &::before {
-    content: '';
-    height: 20%;
-    width: 20%;
-    border-radius: 50%;
-    background-color: var(--uib-color);
-    animation: spiral-oscillate var(--uib-speed) ease-in-out infinite alternate;
-    transition: background-color 0.3s ease;
-  }
-}
-
-.spiral-dot:nth-child(1)::before {
-  transform: translateX(var(--uib-center));
-}
-
-.spiral-dot:nth-child(2) {
-  transform: rotate(45deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.125);
-  }
+  inset: 0;
+  border-radius: 50%;
+  border: calc(var(--uib-size) * 0.07) solid var(--uib-color);
+  opacity: 0.9;
+  animation: panda-breathe calc(var(--uib-speed) * 2.2) ease-in-out infinite;
 }
 
-.spiral-dot:nth-child(3) {
-  transform: rotate(90deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.25);
-  }
-}
-
-.spiral-dot:nth-child(4) {
-  transform: rotate(135deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.375);
-  }
-}
-
-.spiral-dot:nth-child(5) {
-  transform: rotate(180deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.5);
-  }
-}
-
-.spiral-dot:nth-child(6) {
-  transform: rotate(225deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.625);
-  }
+.panda-eye {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--uib-color);
+  width: calc(var(--uib-size) * 0.16);
+  height: calc(var(--uib-size) * 0.16);
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.spiral-dot:nth-child(7) {
-  transform: rotate(270deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.75);
-  }
+.panda-eye--left {
+  left: calc(50% - var(--uib-size) * 0.27);
+  animation: panda-blink calc(var(--uib-speed) * 2.2) ease-in-out infinite;
 }
 
-.spiral-dot:nth-child(8) {
-  transform: rotate(315deg);
-  &::before {
-    transform: translateX(var(--uib-center));
-    animation-delay: calc(var(--uib-speed) * -0.875);
-  }
+.panda-eye--right {
+  left: calc(50% + var(--uib-size) * 0.11);
+  animation: panda-blink calc(var(--uib-speed) * 2.2) ease-in-out infinite;
+  animation-delay: calc(var(--uib-speed) * 0.08);
 }
 
-@keyframes spiral-oscillate {
-  0% {
-    transform: translateX(var(--uib-center)) scale(0);
-    opacity: 0.25;
-  }
-
-  100% {
-    transform: translateX(0) scale(1);
-    opacity: 1;
-  }
+@keyframes panda-breathe {
+  0%   { transform: scale(0.92); opacity: 0.55; }
+  50%  { transform: scale(1.06); opacity: 0.95; }
+  100% { transform: scale(0.92); opacity: 0.55; }
 }
 
-@keyframes spiral-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+@keyframes panda-blink {
+  0%, 55%, 67%, 100% { transform: translateY(-50%) scaleY(1);    }
+  60%                 { transform: translateY(-50%) scaleY(0.08); }
 }

src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss

@@ -0,0 +1,56 @@
+/**
+ * Flow-chat markdown inline code / pre / blockquote palette for m-editor.
+ * Values mirror component-library Markdown.scss (.markdown-renderer) defaults + light overrides.
+ * Do not import this into Markdown.scss — flow chat styles stay unchanged.
+ */
+:root {
+  --flowchat-md-code-font-mono: 'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
+
+  --flowchat-md-inline-code-bg: rgba(255, 255, 255, 0.05);
+  --flowchat-md-inline-code-border: rgba(255, 255, 255, 0.1);
+  --flowchat-md-inline-code-fg: #a8b4c8;
+  --flowchat-md-inline-code-hover-bg: rgba(255, 255, 255, 0.08);
+  --flowchat-md-inline-code-hover-border: rgba(255, 255, 255, 0.15);
+  --flowchat-md-inline-code-hover-fg: #c5d0e2;
+
+  --flowchat-md-pre-bg: var(--color-bg-primary);
+  --flowchat-md-pre-border: rgba(255, 255, 255, 0.1);
+  --flowchat-md-pre-border-style: dashed;
+  --flowchat-md-pre-radius: 4px;
+  --flowchat-md-pre-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --flowchat-md-pre-padding: 1.25rem;
+  --flowchat-md-pre-font-size: 0.85rem;
+  --flowchat-md-pre-hover-border: rgba(255, 255, 255, 0.15);
+  --flowchat-md-pre-hover-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
+  --flowchat-md-pre-code-fg: var(--color-text-secondary);
+
+  --flowchat-md-bq-bg: rgba(255, 255, 255, 0.02);
+  --flowchat-md-bq-border: rgba(255, 255, 255, 0.15);
+  --flowchat-md-bq-radius: 0 4px 4px 0;
+  --flowchat-md-bq-fg: rgba(255, 255, 255, 0.7);
+  --flowchat-md-bq-padding: 1rem 1.2rem;
+  --flowchat-md-bq-margin: 1.5rem 0;
+}
+
+:root[data-theme-type="light"] {
+  --flowchat-md-inline-code-bg: rgba(0, 0, 0, 0.05);
+  --flowchat-md-inline-code-border: rgba(0, 0, 0, 0.12);
+  --flowchat-md-inline-code-fg: #24292f;
+  --flowchat-md-inline-code-hover-bg: rgba(0, 0, 0, 0.08);
+  --flowchat-md-inline-code-hover-border: rgba(0, 0, 0, 0.18);
+  --flowchat-md-inline-code-hover-fg: #1f2328;
+
+  --flowchat-md-pre-bg: #f6f8fa;
+  --flowchat-md-pre-border: rgba(0, 0, 0, 0.1);
+  --flowchat-md-pre-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
+  --flowchat-md-pre-hover-border: rgba(0, 0, 0, 0.15);
+  --flowchat-md-pre-hover-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
+  --flowchat-md-pre-code-fg: var(--color-text-primary, #24292f);
+
+  --flowchat-md-bq-bg: rgba(0, 0, 0, 0.03);
+  --flowchat-md-bq-border: rgba(0, 0, 0, 0.12);
+  --flowchat-md-bq-fg: var(--color-text-muted, #57606a);
+}

src/web-ui/src/component-library/styles/flowchat-markdown-table-vars.scss

@@ -0,0 +1,32 @@
+/**
+ * Flow-chat markdown table surface (same palette as Markdown.scss `.table-wrapper`).
+ * Single source for `.markdown-renderer` and m-editor tables.
+ */
+:root {
+  --flowchat-md-table-radius: 12px;
+  --flowchat-md-table-border: rgba(255, 255, 255, 0.12);
+  --flowchat-md-table-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+  --flowchat-md-table-surface: transparent;
+  --flowchat-md-table-cell-border: rgba(255, 255, 255, 0.1);
+  --flowchat-md-table-col-divider: transparent;
+  --flowchat-md-table-th-bg: rgba(255, 255, 255, 0.03);
+  --flowchat-md-table-th-fg: var(--color-text-primary);
+  --flowchat-md-table-td-fg: var(--color-text-primary);
+  --flowchat-md-table-row-base: transparent;
+  --flowchat-md-table-row-stripe: rgba(255, 255, 255, 0.02);
+  --flowchat-md-table-hover: rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme-type="light"] {
+  --flowchat-md-table-border: rgba(15, 23, 42, 0.12);
+  --flowchat-md-table-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
+  --flowchat-md-table-surface: #ffffff;
+  --flowchat-md-table-cell-border: rgba(15, 23, 42, 0.1);
+  --flowchat-md-table-col-divider: rgba(15, 23, 42, 0.08);
+  --flowchat-md-table-th-bg: #f3f6fb;
+  --flowchat-md-table-th-fg: #0f172a;
+  --flowchat-md-table-td-fg: var(--color-text-primary, #1f2937);
+  --flowchat-md-table-row-base: #ffffff;
+  --flowchat-md-table-row-stripe: #f8fafc;
+  --flowchat-md-table-hover: #eef4ff;
+}

src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss

@@ -67,7 +67,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: $size-gap-1;
+    gap: 0;
   }
 
   &__turn-nav-button {