@steerable/agent-shell-web 0.6.15

package/src/styles/index.css

@@ -0,0 +1,156 @@
+/*
+ * Tailwind v4 入口 + Steerable design tokens。
+ *
+ * @steerable/agent-ui 的官方 `tailwind-preset.ts` 是为 Tailwind v3 的
+ * `presets: [...]` API 设计的；v4 取消了 preset 概念，token 改成在 CSS
+ * 里用 `@theme` 块声明。下面这份 token 镜像 framework Storybook 里
+ * preview.css 的定义（packages/agent-ui/ts/.storybook/preview.css），
+ * 保持与框架视觉一致。
+ *
+ * 如果将来 framework 发布了 v4 兼容的 preset CSS（subpath export），
+ * 切换到 `@import "@steerable/agent-ui/tailwind-preset.css"` 即可。
+ */
+@import "tailwindcss";
+
+@source "../**/*.{ts,tsx}";
+@source "../../node_modules/@steerable/agent-ui/dist/**/*.js";
+
+@theme {
+  --color-agent-canvas: hsl(0 0% 100%);
+  --color-agent-foreground: hsl(240 10% 3.9%);
+  --color-agent-muted: hsl(240 4.8% 95.9%);
+  --color-agent-muted-foreground: hsl(240 5% 32%);
+  --color-agent-border: hsl(240 5.9% 90%);
+  --color-agent-accent: hsl(217 91% 42%);
+  --color-agent-accent-foreground: hsl(0 0% 100%);
+  --color-agent-destructive: hsl(0 75% 42%);
+  --color-agent-tool-read: hsl(142 71% 22%);
+  --color-agent-tool-write: hsl(28 90% 28%);
+  --color-agent-tool-destructive: hsl(0 75% 42%);
+
+  --radius-agent-sm: calc(0.75rem - 4px);
+  --radius-agent-md: calc(0.75rem - 2px);
+  --radius-agent-lg: 0.75rem;
+
+  --animate-agent-cursor-blink: agent-cursor-blink 1s steps(1) infinite;
+  --animate-agent-shimmer: agent-shimmer 2s linear infinite;
+}
+
+@keyframes agent-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0; }
+}
+
+@keyframes agent-shimmer {
+  0%   { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+:root {
+  color-scheme: light;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/*
+ * .markdown-content — applied to the wrapper around <Markdown>. Per-element
+ * margins are handled inside Markdown.tsx; this rule just collapses the
+ * first / last element's outer margin so a chat bubble doesn't accumulate
+ * dead space at the top or bottom edge.
+ */
+.markdown-content > :first-child { margin-top: 0; }
+.markdown-content > :last-child  { margin-bottom: 0; }
+
+/*
+ * ToolExecutionCard header: CJK status labels (已完成 / 失败 / …) wrap at
+ * every character when the flex row is squeezed. Keep the trailing status
+ * cluster at content width; let the truncated summary take the leftover.
+ * Host-side until @steerable/agent-ui ships the same layout classes.
+ */
+.steerable-tool-execution > button > span.truncate {
+  min-width: 0;
+  flex: 1 1 0%;
+}
+
+.steerable-tool-execution > button > span.ml-auto {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/*
+ * ChatInput overlay: the contenteditable must keep a real text fill.
+ * macOS Pinyin inspects fill during the first letter's keydown — before
+ * `compositionstart` and before React's delegated keydown — so
+ * `color: transparent` or `-webkit-text-fill-color: transparent` on the
+ * editor commits that letter as ASCII (`ni好` instead of 你好).
+ *
+ * Glyphs therefore paint in the editor. The mirror only draws mention
+ * chip backgrounds; its own text is invisible so the two layers do not
+ * double-print. Hide the placeholder/mirror while IME marked text is
+ * showing so the underline is not covered.
+ */
+.chat-input-mirror {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+[data-mention-chip] {
+  pointer-events: auto;
+  color: #4f46e5;
+  -webkit-text-fill-color: currentColor;
+  background-color: color-mix(in oklab, var(--color-agent-canvas) 82%, #6366f1);
+}
+
+[data-mention-chip][data-mention-type="chat"] {
+  color: #059669;
+  -webkit-text-fill-color: currentColor;
+  background-color: color-mix(in oklab, var(--color-agent-canvas) 82%, #10b981);
+}
+
+[data-mention-chip][data-mention-type="skill"] {
+  color: #d97706;
+  -webkit-text-fill-color: currentColor;
+  background-color: color-mix(in oklab, var(--color-agent-canvas) 82%, #f59e0b);
+}
+
+[data-mention-chip][data-mention-type="mcp"] {
+  color: #0284c7;
+  -webkit-text-fill-color: currentColor;
+  background-color: color-mix(in oklab, var(--color-agent-canvas) 82%, #0ea5e9);
+}
+
+[data-mention-chip][data-mention-type="plain"] {
+  color: var(--color-agent-foreground);
+  -webkit-text-fill-color: currentColor;
+  background-color: color-mix(in oklab, var(--color-agent-canvas) 88%, #71717a);
+}
+
+[data-mention-chip] [data-mention-remove],
+[data-mention-chip] [data-mention-remove] * {
+  color: #fff;
+  -webkit-text-fill-color: #fff;
+}
+
+[data-mention-chip] [data-mention-remove] {
+  opacity: 0;
+}
+
+[data-mention-chip]:hover [data-mention-remove],
+[data-mention-chip]:focus-visible [data-mention-remove] {
+  opacity: 1;
+}
+
+.chat-input-surface:has(.chat-input-editor[data-composing]) .chat-input-placeholder,
+.chat-input-surface:has(.chat-input-editor[data-composing]) .chat-input-mirror {
+  visibility: hidden;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.base.ts

@@ -0,0 +1,94 @@
+/**
+ * 产品 web 构建的共享 vite 配置工厂（2.3）。
+ *
+ * 每个产品（products/<id>/web/）有自己的 vite 入口：index.html +
+ * main.tsx（静态注册本产品的包渲染层贡献）+ vite.config.ts（调本工厂）。
+ * 产品的编译单元只含自己的包——未激活包代码不进 bundle，不依赖树摇
+ * 正确性（物理隔离与 node 侧对称）。
+ *
+ * Electron 加载产物时走 file:// 协议，必须用相对路径，否则资源 404。
+ * dev server 跑在固定端口，主进程的 IS_DEV 分支 loadURL('http://localhost:5173')。
+ */
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { existsSync, readFileSync } from 'node:fs';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+
+export interface ProductViteConfigOptions {
+  /** 产品目录（products/<id>/web 的上一级…即 products/<id>）。 */
+  productDir: string;
+  /** 产品 flavor（决定品牌 define 与激活包集合）。 */
+  flavor: string;
+}
+
+export function createProductViteConfig(options: ProductViteConfigOptions) {
+  const { productDir, flavor } = options;
+  const repoRoot = path.resolve(productDir, '../..');
+  // shell 渲染层源码锚到本包自身（3.2 起住在框架仓库
+  // packages/agent-shell/web/src），产品经 `@/` 别名引用。
+  const webSrcDir = path.resolve(HERE, 'src');
+  const readJson = (p: string) => JSON.parse(readFileSync(p, 'utf8'));
+
+  // 产品品牌（3.1）：product.json 的 brand 字段优先（无包产品的品牌
+  // 来源）；否则取激活包 pack.json 的 brand（0.3g 机制，读
+  // products/manifest.json 的 flavor→包映射，第一个带 brand 的包）。
+  // 都没有则用 shell 中性默认（Agent Shell）。
+  const productJsonPath = path.join(productDir, 'product.json');
+  const product = existsSync(productJsonPath) ? readJson(productJsonPath) : {};
+  const manifest = readJson(path.join(repoRoot, 'products/manifest.json'));
+  let packBrand: Record<string, string> | null = null;
+  for (const packId of manifest.flavors?.[flavor] ?? []) {
+    const pack = readJson(path.join(repoRoot, 'packages', `pack-${packId}`, 'pack.json'));
+    if (pack.brand) {
+      packBrand = pack.brand;
+      break;
+    }
+  }
+  const brand = product.brand ?? packBrand;
+
+  return defineConfig({
+    // root 默认取 config 文件所在目录（products/<id>/web）。
+    base: './',
+    plugins: [react(), tailwindcss()],
+    define: {
+      // 显式 define 让 flavor 条件在构建期可静态折叠。
+      'import.meta.env.VITE_APP_FLAVOR': JSON.stringify(flavor),
+      // 品牌 define：产品/包声明覆盖 shell 中性默认（Agent Shell）。
+      // logo 不走 define——资产必须静态 import 才进 bundle，由包 web 模块
+      // 在注册时经 setBrandLogoUrl 注入（本包 src/brand.ts）。
+      'import.meta.env.VITE_BRAND_NAME': JSON.stringify(brand?.displayName ?? 'Steerable Shell'),
+      'import.meta.env.VITE_BRAND_TAGLINE': JSON.stringify(brand?.tagline ?? '一款本地桌面 AI 伙伴'),
+      'import.meta.env.VITE_DEFAULT_AGENT_ID': JSON.stringify(brand?.defaultAgentId ?? 'local-assistant'),
+    },
+    resolve: {
+      alias: {
+        // shell 渲染层源码（产品入口与包 web 模块都以 `@/` 引用它）。
+        '@': webSrcDir,
+      },
+    },
+    // 静态资产（favicon 等中性默认）随 shell web 包分发；产品可在自己的
+    // web root 放 public/ 覆盖（vite 不合并双 publicDir——需要产品级资产
+    // 时在产品 vite.config 里显式覆盖本字段）。
+    publicDir: path.resolve(HERE, 'public'),
+    server: {
+      port: 5173,
+      strictPort: true,
+      host: '127.0.0.1',
+      // 产品 root 在 products/<id>/web；shell 渲染层源码在框架仓库
+      // （3.2 起经 file: 依赖符号链接）——两个根都放行。
+      fs: { allow: [repoRoot, path.resolve(webSrcDir, '..')] },
+    },
+    build: {
+      // 产物落在产品目录：products/<id>/web/dist（打包期被 electron-builder
+      // 映射为包内 web-dist/）。
+      outDir: 'dist',
+      emptyOutDir: true,
+      sourcemap: true,
+      target: 'chrome120',
+    },
+  });
+}