feat(ui): add tailwind style pipeline

apps/ui/package.json

@@ -16,10 +16,12 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.11",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "rimraf": "^6.0.1",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.7.3",
     "vite": "^6.0.5"
   }

apps/ui/src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles.css";
+import "./tailwind.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

apps/ui/src/tailwind.css

+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei UI", sans-serif;
+  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+@layer base {
+  :root {
+    --conversation-content-max-width: 900px;
+  }
+
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    font-family: var(--font-sans);
+    background: #f0f7ff;
+    color: #0f172a;
+  }
+}
+
+@layer utilities {
+  @keyframes user-bubble-in {
+    0% {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-user-bubble-in {
+    animation: user-bubble-in 220ms ease-out both;
+  }
+
+  .chat-scroll-smooth {
+    scroll-behavior: smooth;
+  }
+
+  .app-drag-region {
+    -webkit-app-region: drag;
+  }
+
+  .app-no-drag {
+    -webkit-app-region: no-drag;
+  }
+}
+
+@layer components {
+  .sidebar-logo-block .sidebar-logo-copy strong {
+    @apply text-[18px] font-semibold tracking-[0.02em] text-slate-900;
+  }
+
+  .nav-item-icon svg,
+  .expert-chip-icon svg,
+  .message-action-icon svg,
+  .composer-submit svg,
+  .attachment-trigger svg,
+  .markdown-code-copy svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .conversation-panel-copy {
+    @apply w-full min-w-0 max-w-none;
+  }
+
+  .conversation-content-width {
+    width: min(100%, var(--conversation-content-max-width));
+    margin-inline: auto;
+  }
+
+  .conversation-panel-head-layout {
+    grid-template-columns: minmax(0, var(--conversation-content-max-width)) minmax(72px, 1fr) auto;
+  }
+
+  .home-microcopy,
+  .expert-hero-kicker {
+    -webkit-app-region: no-drag;
+    @apply flex min-h-14 items-center gap-3 rounded-[20px] border border-[#dbeafe] bg-white/85 px-5 py-3 shadow-[0_18px_40px_rgba(148,163,184,0.08)];
+  }
+
+  .home-microcopy-icon,
+  .expert-hero-icon {
+    @apply flex h-11 w-11 items-center justify-center rounded-full bg-[#f0f7ff] text-[#2563eb] shadow-[inset_0_0_0_1px_rgba(191,219,254,0.95)];
+  }
+
+  .home-microcopy-text {
+    @apply flex-1 text-[15px] font-medium text-slate-900;
+  }
+
+  .home-microcopy-tag {
+    @apply rounded-full bg-[#f8fbff] px-3 py-1.5 text-[12px] text-slate-500 shadow-[inset_0_0_0_1px_rgba(219,234,254,0.9)];
+  }
+
+  .expert-hero-copy {
+    @apply flex min-w-0 flex-col;
+  }
+
+  .expert-hero-label {
+    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400;
+  }
+
+  .expert-hero-copy strong {
+    @apply truncate text-[18px] font-semibold text-slate-900;
+  }
+
+  .message-list {
+    @apply w-full;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
+  }
+
+  .message-card {
+    @apply w-full max-w-full min-w-0;
+  }
+
+  .message-bubble {
+    @apply min-w-0 max-w-full;
+  }
+
+  .message-card.user .message-bubble {
+    width: fit-content;
+    max-width: min(82%, 720px);
+  }
+
+  .message-card.assistant .message-bubble {
+    @apply w-full max-w-full;
+  }
+
+  .message-list::-webkit-scrollbar,
+  .markdown-code-pre::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  .message-list::-webkit-scrollbar-thumb,
+  .markdown-code-pre::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-slate-300/80;
+  }
+
+  .message-card.assistant .markdown-body > :first-child {
+    @apply mt-0;
+  }
+
+  .message-card.assistant .markdown-body > :last-child {
+    @apply mb-0;
+  }
+
+  .message-card.assistant .message-bubble {
+    @apply relative;
+  }
+
+  .message-card.user .message-plain-text {
+    @apply whitespace-pre-wrap;
+  }
+
+  .message-card.assistant .message-card-actions {
+    @apply pointer-events-none;
+  }
+
+  .message-card.assistant:hover .message-card-actions {
+    @apply pointer-events-auto;
+  }
+
+  .message-action-icon {
+    -webkit-app-region: no-drag;
+  }
+
+  .markdown-inline-code,
+  .markdown-code-pre,
+  .markdown-code-pre code {
+    font-family: var(--font-mono);
+  }
+
+  .markdown-code-block {
+    @apply rounded-[18px] border-[#111827] shadow-[0_20px_45px_rgba(15,23,42,0.22)];
+  }
+
+  .markdown-code-toolbar {
+    @apply min-h-11 px-4 text-[11px] tracking-[0.18em];
+  }
+
+  .markdown-code-copy {
+    -webkit-app-region: no-drag;
+  }
+
+  .markdown-code-copy.copied {
+    @apply bg-emerald-500/20 text-emerald-200;
+  }
+
+  .composer-shell {
+    @apply w-full;
+  }
+
+  .composer-field textarea {
+    min-height: 60px;
+    max-height: 126px;
+  }
+
+  .composer-left-tools {
+    align-items: center;
+    gap: 4px !important;
+  }
+
+  .composer-tool-button,
+  .attachment-trigger.icon-only,
+  .skill-trigger {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .attachment-trigger.icon-only svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .skill-trigger {
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .composer-attachment-remove,
+  .skill-chip,
+  .skill-menu,
+  .skill-menu-item,
+  .sidebar-session-close,
+  .sidebar-session-menu,
+  .sidebar-session-menu-item {
+    -webkit-app-region: no-drag;
+  }
+
+  @media (max-width: 960px) {
+    .conversation-panel-head-layout {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .conversation-panel-head-layout .conversation-drag-strip {
+      display: none;
+    }
+
+    .conversation-panel-head-layout .conversation-panel-actions {
+      justify-content: flex-start;
+    }
+  }
+}

apps/ui/vite.config.ts

-import { defineConfig } from "vite";
+import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 import path from "node:path";
 
 export default defineConfig({
   base: "./",
-  plugins: [react()],
+  plugins: [tailwindcss(), react()],
   build: {
     outDir: path.resolve(__dirname, "../desktop/dist/renderer"),
     emptyOutDir: true