open-swe 前端实战基于 TanStack Start shadcn/ui 搭建异步编码 Agent 仪表盘【免费下载链接】open-sweAn Open-Source Asynchronous Coding Agent项目地址: https://gitcode.com/GitHub_Trending/op/open-swe导读本文聚焦 ui/README.md 所定义的前端工程基线open-swe一个开源异步编码 AgentAn Open-Source Asynchronous Coding Agent的控制台dashboard基于 TanStack Start React TypeScript shadcn/ui 构建。你将掌握如何向现有工程增量添加 shadcn/ui 组件、如何通过路径别名正确导入与复用它们并顺带理解该 UI 工程在 monorepo 中与 Python 后端LangGraph 服务协同的工程化细节从而能在此基础上独立开发新的界面功能。一、技术栈与工程定位open-swe 的前端位于仓库的 ui/ 目录其 ui/package.json 中name字段为open-swe-dashboard直接点明它是整个 Agent 产品的 Web 控制台。该工程由三套技术方案叠加而成TanStack Start基于 TanStack Router 的全栈 React 框架提供文件式路由、SSR 与 Server Functions。依赖集中在tanstack/react-start、tanstack/react-router与tanstack/react-router-ssr-query等包上路由树由 ui/src/router.tsx 中的createRouter组装routeTree来自自动生成的 ui/src/routeTree.gen.ts。shadcn/ui以复制粘贴 类名变体为理念的组件集合不安装运行时 UI 库而是把源码直接落到项目的components目录。React 19 Vite Tailwind CSS 4组件运行时与构建链路其中 React 编译通过oxc-transform-reactRust 移植版在 ui/vite.config.ts 中以viteReact({ compiler: true })开启。值得说明的是虽然依赖列表中还出现了 Lexical、Monaco Editor、Shiki、Zustand、TanStack Query 等重型库但它们属于功能特性层富文本、代码编辑、语法高亮、状态管理与服务端状态与组件如何添加与使用这一主题无直接关系本文不展开。二、添加组件shadcn CLI 的标准操作ui/README.md给出的核心命令是pnpm dlx shadcnlatest add button执行后组件源码会被放置在components目录中。README 中的表述是thecomponentsdirectory而在本仓库的 ui/components.json 中别名体系把组件落地位置精确化了{ style: base-mira, rsc: false, tsx: true, tailwind: { config: , css: src/styles.css, baseColor: mist, cssVariables: true, prefix: }, iconLibrary: phosphor, aliases: { components: /components, utils: /lib/utils, ui: /components/ui, lib: /lib, hooks: /hooks } }即组件源码最终写入ui/src/components/ui/对应别名/components/ui工具函数来自ui/src/lib/utils.ts对应别名/lib/utils图标库选用 Phosphor Icons对应依赖phosphor-icons/react。这一切都依赖 TypeScript 路径别名/* - ./src/*其定义在 ui/tsconfig.json 的paths字段中同时被 Vite 的resolve.tsconfigPaths与 Vitest 配置读取保证开发、构建、测试三套环境解析一致。仓库中已内置的组件清单在 ui/src/components/ui/ 下已存在 20 个按 shadcn 规范落地的组件说明该仓库正是在这个增量化工作流之上持续生长的alert、avatar、badge、button、card、combobox、input-group、input、kbd、label、menu、popover、scroll-area、select、separator、sheet、skeleton、switch、textarea、tooltip。新增组件前可以先查看这些已有实现尽量复用而非重复添加保持产物一致。三、使用组件导入约定与变体体系README 给出的用法示例import { Button } from /components/ui/button;这个导入路径之所以成立正是因为components.json中ui别名为/components/ui同时 TS 的paths配置把/*映射到ui/src/*。整个features目录如 ui/src/features/agents/components/ 下的AgentThreadPage.tsx、PlanReview.tsx、SkillsPage.tsx等都在大量使用/components/ui/...这种导入方式是上述约定的直接实践样本。以 Button 为例理解 shadcn 组件的内部结构以 ui/src/components/ui/button.tsx 为例可以看到 shadcn 组件的三个典型层次底层原语直接复用base-ui/react/button的ButtonPrimitive负责无障碍与交互语义shadcn 只做视觉与 API 包装。变体引擎通过class-variance-authority的cva定义variantdefault/outline/secondary/ghost/destructive/link与sizedefault/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg两套变体矩阵并导出buttonVariants供无组件场景如asChild或路由 Link 场景直接取类名。导出面同时导出Button、IconButton与buttonVariants其中IconButton是sizeicon的便捷封装且size变体中已经预置了图标尺寸随按钮尺寸联动的规则如[_svg:not([class*size-])]:size-3.5在渲染图标按钮时无需再手动调 SVG 尺寸。组件内部的类名合并统一走 ui/src/lib/utils.ts 的cn()工具——它是clsx与tailwind-merge的组合前者负责条件类名拼接后者负责将冲突的 Tailwind 类后者覆盖前者这正是 shadcn 组件允许外部className覆盖默认样式的底层机制。该文件还提供了formatElapsed、formatRelativeTime等与 Agent 运行时间展示相关的工具函数。四、样式接入组件落地的最后一公里shadcn 组件依赖 Tailwind 主题变量才能正确渲染。在 ui/src/styles.css 中可以看到完整的接入方式import tailwindcss; import tw-animate-css; import shadcn/tailwind.css; import fontsource-variable/inter; import ./styles/agents.css; import ./styles/markdown.css; source ../node_modules/streamdown/dist/*.js; custom-variant dark (:is(.dark *));其中shadcn/tailwind.css提供组件所需的语义色变量--color-primary、--color-destructive、--color-ring等并通过theme inline把它们映射为 Tailwind 4 的主题令牌tw-animate-css提供组件动画custom-variant dark声明暗色模式的激活方式。baseColor: mist与style: base-mira见 components.json决定了这些变量与组件风格的默认取值。如果新增组件后样式缺失或颜色异常优先检查这里对应的 CSS 变量是否齐全。五、验证与运行让改动可被测试仓库为 UI 提供了独立的测试配置 ui/vitest.config.ts测试不使用vite.config.ts因为后者加载了 nitro会干扰 Vitest 的模块解析而是单独启用tanstackStart()插件以便 Server Functions 在测试中降级为客户端 fetchjsdom 环境固定为http://localhost:3000避免opaque origin 无 localStorage的坑ui/package.json提供了testvitest run与typechecktsc --noEmit脚本新增组件后建议两者都跑一遍。本地开发则执行pnpm dev # 在 ui/ 目录下Vite 开发服务器默认端口 3000可用 PORT 环境变量覆盖生产构建为pnpm build注意其显式使用node --max-old-space-size4096提升 Node 堆上限说明该前端 bundle 规模较大预览为pnpm preview。整个 UI 工程处于 pnpm workspace 中见仓库根目录 pnpm-workspace.yaml 与 pnpm-lock.yaml因此在仓库根目录执行pnpm install即可安装全部前端依赖。六、进阶该 UI 在 open-swe 中的集成方式作为补充背景理解这个组件工作流所处的运行环境有助于你在添加组件时避免踩坑与后端同源代理浏览器端所有/dashboard/api/*请求都由该前端服务器代理到 Python 后端默认http://localhost:2024可用DASHBOARD_API_URL覆盖从而保持会话 Cookie 同源生产环境这一代理逻辑位于 ui/server/backend-proxy.ts其行为有对应的 ui/server/backend-proxy.test.ts 覆盖。挂载路径可配置通过DASHBOARD_BASE_PATH环境变量可改变资源 base 路径如被后端以http.mount_prefix挂载时路由的basepath在 ui/src/router.tsx 中取自import.meta.env.BASE_URL保持前后一致。E2E 场景结合E2E_HARNESS环境变量开发服务器可代理 mock 后端与假 SaaS 路由/fake-gh、/fake-slack等相关逻辑见 ui/vite.config.ts 中的mockHarnessProxy与 tests/e2e/ 下的 Playwright 测试套件。也就是说本文描述的添加 导入 shadcn 组件工作流最终服务的是一套与 LangGraph 后端紧密耦合的全栈 SSR 控制台而不是一个孤立的静态前端。七、小结围绕ui/README.md这短短几行说明open-swe 实际铺开了一条完整的组件工程链路pnpm dlx shadcnlatest add name生成源码到ui/src/components/ui/→ 通过/components/ui/...别名导入 → 依赖cn()做类名合并 → 由src/styles.css中的 Tailwind 主题变量提供视觉 → 用vitest与tsc --noEmit做质量闸门。掌握这一工作流你就能以与现有代码完全一致的方式为这个异步编码 Agent 的控制台持续添加新的界面能力。【免费下载链接】open-sweAn Open-Source Asynchronous Coding Agent项目地址: https://gitcode.com/GitHub_Trending/op/open-swe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 open-swe 前端实战：基于 TanStack Start + shadcn/ui 搭建异步编码 Agent 仪表盘
open-swe 前端实战基于 TanStack Start shadcn/ui 搭建异步编码 Agent 仪表盘【免费下载链接】open-sweAn Open-Source Asynchronous Coding Agent项目地址: https://gitcode.com/GitHub_Trending/op/open-swe导读本文聚焦 ui/README.md 所定义的前端工程基线open-swe一个开源异步编码 AgentAn Open-Source Asynchronous Coding Agent的控制台dashboard基于 TanStack Start React TypeScript shadcn/ui 构建。你将掌握如何向现有工程增量添加 shadcn/ui 组件、如何通过路径别名正确导入与复用它们并顺带理解该 UI 工程在 monorepo 中与 Python 后端LangGraph 服务协同的工程化细节从而能在此基础上独立开发新的界面功能。一、技术栈与工程定位open-swe 的前端位于仓库的 ui/ 目录其 ui/package.json 中name字段为open-swe-dashboard直接点明它是整个 Agent 产品的 Web 控制台。该工程由三套技术方案叠加而成TanStack Start基于 TanStack Router 的全栈 React 框架提供文件式路由、SSR 与 Server Functions。依赖集中在tanstack/react-start、tanstack/react-router与tanstack/react-router-ssr-query等包上路由树由 ui/src/router.tsx 中的createRouter组装routeTree来自自动生成的 ui/src/routeTree.gen.ts。shadcn/ui以复制粘贴 类名变体为理念的组件集合不安装运行时 UI 库而是把源码直接落到项目的components目录。React 19 Vite Tailwind CSS 4组件运行时与构建链路其中 React 编译通过oxc-transform-reactRust 移植版在 ui/vite.config.ts 中以viteReact({ compiler: true })开启。值得说明的是虽然依赖列表中还出现了 Lexical、Monaco Editor、Shiki、Zustand、TanStack Query 等重型库但它们属于功能特性层富文本、代码编辑、语法高亮、状态管理与服务端状态与组件如何添加与使用这一主题无直接关系本文不展开。二、添加组件shadcn CLI 的标准操作ui/README.md给出的核心命令是pnpm dlx shadcnlatest add button执行后组件源码会被放置在components目录中。README 中的表述是thecomponentsdirectory而在本仓库的 ui/components.json 中别名体系把组件落地位置精确化了{ style: base-mira, rsc: false, tsx: true, tailwind: { config: , css: src/styles.css, baseColor: mist, cssVariables: true, prefix: }, iconLibrary: phosphor, aliases: { components: /components, utils: /lib/utils, ui: /components/ui, lib: /lib, hooks: /hooks } }即组件源码最终写入ui/src/components/ui/对应别名/components/ui工具函数来自ui/src/lib/utils.ts对应别名/lib/utils图标库选用 Phosphor Icons对应依赖phosphor-icons/react。这一切都依赖 TypeScript 路径别名/* - ./src/*其定义在 ui/tsconfig.json 的paths字段中同时被 Vite 的resolve.tsconfigPaths与 Vitest 配置读取保证开发、构建、测试三套环境解析一致。仓库中已内置的组件清单在 ui/src/components/ui/ 下已存在 20 个按 shadcn 规范落地的组件说明该仓库正是在这个增量化工作流之上持续生长的alert、avatar、badge、button、card、combobox、input-group、input、kbd、label、menu、popover、scroll-area、select、separator、sheet、skeleton、switch、textarea、tooltip。新增组件前可以先查看这些已有实现尽量复用而非重复添加保持产物一致。三、使用组件导入约定与变体体系README 给出的用法示例import { Button } from /components/ui/button;这个导入路径之所以成立正是因为components.json中ui别名为/components/ui同时 TS 的paths配置把/*映射到ui/src/*。整个features目录如 ui/src/features/agents/components/ 下的AgentThreadPage.tsx、PlanReview.tsx、SkillsPage.tsx等都在大量使用/components/ui/...这种导入方式是上述约定的直接实践样本。以 Button 为例理解 shadcn 组件的内部结构以 ui/src/components/ui/button.tsx 为例可以看到 shadcn 组件的三个典型层次底层原语直接复用base-ui/react/button的ButtonPrimitive负责无障碍与交互语义shadcn 只做视觉与 API 包装。变体引擎通过class-variance-authority的cva定义variantdefault/outline/secondary/ghost/destructive/link与sizedefault/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg两套变体矩阵并导出buttonVariants供无组件场景如asChild或路由 Link 场景直接取类名。导出面同时导出Button、IconButton与buttonVariants其中IconButton是sizeicon的便捷封装且size变体中已经预置了图标尺寸随按钮尺寸联动的规则如[_svg:not([class*size-])]:size-3.5在渲染图标按钮时无需再手动调 SVG 尺寸。组件内部的类名合并统一走 ui/src/lib/utils.ts 的cn()工具——它是clsx与tailwind-merge的组合前者负责条件类名拼接后者负责将冲突的 Tailwind 类后者覆盖前者这正是 shadcn 组件允许外部className覆盖默认样式的底层机制。该文件还提供了formatElapsed、formatRelativeTime等与 Agent 运行时间展示相关的工具函数。四、样式接入组件落地的最后一公里shadcn 组件依赖 Tailwind 主题变量才能正确渲染。在 ui/src/styles.css 中可以看到完整的接入方式import tailwindcss; import tw-animate-css; import shadcn/tailwind.css; import fontsource-variable/inter; import ./styles/agents.css; import ./styles/markdown.css; source ../node_modules/streamdown/dist/*.js; custom-variant dark (:is(.dark *));其中shadcn/tailwind.css提供组件所需的语义色变量--color-primary、--color-destructive、--color-ring等并通过theme inline把它们映射为 Tailwind 4 的主题令牌tw-animate-css提供组件动画custom-variant dark声明暗色模式的激活方式。baseColor: mist与style: base-mira见 components.json决定了这些变量与组件风格的默认取值。如果新增组件后样式缺失或颜色异常优先检查这里对应的 CSS 变量是否齐全。五、验证与运行让改动可被测试仓库为 UI 提供了独立的测试配置 ui/vitest.config.ts测试不使用vite.config.ts因为后者加载了 nitro会干扰 Vitest 的模块解析而是单独启用tanstackStart()插件以便 Server Functions 在测试中降级为客户端 fetchjsdom 环境固定为http://localhost:3000避免opaque origin 无 localStorage的坑ui/package.json提供了testvitest run与typechecktsc --noEmit脚本新增组件后建议两者都跑一遍。本地开发则执行pnpm dev # 在 ui/ 目录下Vite 开发服务器默认端口 3000可用 PORT 环境变量覆盖生产构建为pnpm build注意其显式使用node --max-old-space-size4096提升 Node 堆上限说明该前端 bundle 规模较大预览为pnpm preview。整个 UI 工程处于 pnpm workspace 中见仓库根目录 pnpm-workspace.yaml 与 pnpm-lock.yaml因此在仓库根目录执行pnpm install即可安装全部前端依赖。六、进阶该 UI 在 open-swe 中的集成方式作为补充背景理解这个组件工作流所处的运行环境有助于你在添加组件时避免踩坑与后端同源代理浏览器端所有/dashboard/api/*请求都由该前端服务器代理到 Python 后端默认http://localhost:2024可用DASHBOARD_API_URL覆盖从而保持会话 Cookie 同源生产环境这一代理逻辑位于 ui/server/backend-proxy.ts其行为有对应的 ui/server/backend-proxy.test.ts 覆盖。挂载路径可配置通过DASHBOARD_BASE_PATH环境变量可改变资源 base 路径如被后端以http.mount_prefix挂载时路由的basepath在 ui/src/router.tsx 中取自import.meta.env.BASE_URL保持前后一致。E2E 场景结合E2E_HARNESS环境变量开发服务器可代理 mock 后端与假 SaaS 路由/fake-gh、/fake-slack等相关逻辑见 ui/vite.config.ts 中的mockHarnessProxy与 tests/e2e/ 下的 Playwright 测试套件。也就是说本文描述的添加 导入 shadcn 组件工作流最终服务的是一套与 LangGraph 后端紧密耦合的全栈 SSR 控制台而不是一个孤立的静态前端。七、小结围绕ui/README.md这短短几行说明open-swe 实际铺开了一条完整的组件工程链路pnpm dlx shadcnlatest add name生成源码到ui/src/components/ui/→ 通过/components/ui/...别名导入 → 依赖cn()做类名合并 → 由src/styles.css中的 Tailwind 主题变量提供视觉 → 用vitest与tsc --noEmit做质量闸门。掌握这一工作流你就能以与现有代码完全一致的方式为这个异步编码 Agent 的控制台持续添加新的界面能力。【免费下载链接】open-sweAn Open-Source Asynchronous Coding Agent项目地址: https://gitcode.com/GitHub_Trending/op/open-swe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考