@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/workspace-file-editor/workspace-file-editor-language.ts

@@ -0,0 +1,55 @@
+const LANGUAGE_BY_EXTENSION: Record<string, string> = {
+  css: 'css',
+  go: 'go',
+  html: 'html',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'javascript',
+  less: 'less',
+  md: 'markdown',
+  mjs: 'javascript',
+  py: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  scss: 'scss',
+  sh: 'shell',
+  ts: 'typescript',
+  tsx: 'typescript',
+  yaml: 'yaml',
+  yml: 'yaml'
+}
+
+const LANGUAGE_BY_FILE_NAME: Record<string, string> = {
+  Dockerfile: 'dockerfile'
+}
+
+const IMAGE_EXTENSIONS = new Set([
+  'apng',
+  'avif',
+  'bmp',
+  'gif',
+  'ico',
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'webp'
+])
+
+const getWorkspaceFileExtension = (path: string) => {
+  const fileName = path.split('/').pop() ?? path
+  return fileName.includes('.') ? fileName.split('.').pop()?.toLowerCase() ?? '' : ''
+}
+
+export const getWorkspaceFileEditorLanguage = (path: string) => {
+  const fileName = path.split('/').pop() ?? path
+  const exactLanguage = LANGUAGE_BY_FILE_NAME[fileName]
+  if (exactLanguage != null) {
+    return exactLanguage
+  }
+
+  const extension = getWorkspaceFileExtension(path)
+  return LANGUAGE_BY_EXTENSION[extension] ?? 'plaintext'
+}
+
+export const isWorkspaceImagePreviewPath = (path: string) => IMAGE_EXTENSIONS.has(getWorkspaceFileExtension(path))

package/src/components/composer-landing/ComposerLanding.scss

@@ -0,0 +1,75 @@
+.composer-landing {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px 24px 12px;
+  }
+}
+
+.composer-landing--compact {
+  .composer-landing__content {
+    align-items: stretch;
+    justify-content: flex-start;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    -webkit-overflow-scrolling: touch;
+    padding: max(8px, env(safe-area-inset-top))
+      max(12px, env(safe-area-inset-right)) 12px
+      max(12px, env(safe-area-inset-left));
+  }
+}
+
+.composer-stack {
+  flex: 0;
+  min-width: 0;
+  padding: 0 12px max(8px, env(safe-area-inset-bottom));
+}
+
+.composer-stack__inner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.composer-stack__inner > * {
+  width: 100%;
+}
+
+.composer-stack__inner > :not(:first-child).chat-composer-card,
+.composer-stack__inner > :not(:first-child) .chat-composer-card {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.composer-stack__inner > :not(:last-child).chat-composer-card,
+.composer-stack__inner > :not(:last-child) .chat-composer-card {
+  margin-bottom: -1px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.composer-stack__inner > :not(:first-child):not(:last-child).chat-composer-card,
+.composer-stack__inner
+  > :not(:first-child):not(:last-child)
+  .chat-composer-card {
+  border-radius: 0;
+}
+
+@media (max-width: 768px) {
+  .composer-stack {
+    padding: 0 max(12px, env(safe-area-inset-right))
+      max(8px, env(safe-area-inset-bottom))
+      max(12px, env(safe-area-inset-left));
+  }
+}

package/src/components/composer-landing/ComposerLanding.tsx

@@ -0,0 +1,47 @@
+import './ComposerLanding.scss'
+
+import type { ReactNode } from 'react'
+
+interface ComposerStackProps {
+  children: ReactNode
+  className?: string
+}
+
+interface ComposerLandingProps {
+  children: ReactNode
+  className?: string
+  compact?: boolean
+  composer: ReactNode
+  contentClassName?: string
+}
+
+export function ComposerStack({ children, className }: ComposerStackProps) {
+  return (
+    <div className={['composer-stack', className].filter(Boolean).join(' ')}>
+      <div className='composer-stack__inner'>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export function ComposerLanding({
+  children,
+  className,
+  compact = false,
+  composer,
+  contentClassName
+}: ComposerLandingProps) {
+  return (
+    <div
+      className={['composer-landing', compact ? 'composer-landing--compact' : '', className].filter(Boolean).join(' ')}
+    >
+      <div className={['composer-landing__content', contentClassName].filter(Boolean).join(' ')}>
+        {children}
+      </div>
+      <ComposerStack>
+        {composer}
+      </ComposerStack>
+    </div>
+  )
+}

package/src/components/config/AGENTS.md

@@ -0,0 +1,45 @@
+# Config 组件维护说明
+
+本目录承载配置页与 worktree environment 编辑器；涉及以下入口时，先读本文件：
+
+- `../ConfigView.tsx`
+- `WorktreeEnvironmentPanel.tsx`
+- `use-worktree-environment-auto-save.ts`
+- `configConflict.ts`
+- `../../hooks/use-session-subscription.ts`
+- `../../hooks/session-subscription-cache.ts`
+
+## 当前设计
+
+配置文件被 CLI、手动编辑或 extends 链路中的文件改动后，后端会通过 websocket 广播 `config_updated`。前端订阅层只负责刷新 `/api/config` 及其派生缓存，不直接覆盖本地草稿；真正的冲突处理留在配置编辑器内部完成。
+
+配置页和 worktree environment 编辑器都遵循相同的“三份状态”模型：
+
+- `base`：开始编辑时或上次成功保存后的远端基线。
+- `draft`：用户当前正在修改的本地草稿。
+- `server`：收到 `config_updated` 后重新拉取到的最新远端值。
+
+## 不变式
+
+- 不要在 `use-session-subscription.ts` 收到 `config_updated` 后直接覆盖本地编辑状态；订阅层只能触发 revalidate。
+- 主配置编辑器按 `source + section` 做冲突判断，不要退化成整页级别的统一提示。
+- `draft === base` 且 `server !== base` 时，说明用户未改动，可直接把草稿同步到远端最新值。
+- `draft !== base` 且 `server !== base` 且 `draft !== server` 时，必须视为真实冲突：暂停自动保存并要求用户显式选择。
+- 冲突出现时，不允许静默偏向本地或远端；必须通过确认框让用户选择“保留当前编辑”或“采用外部修改”。
+- 用户选择前，该草稿的自动保存必须保持阻断状态，避免背景定时器把另一份内容写回去。
+- `ConfigView.tsx` 与 `use-worktree-environment-auto-save.ts` 的行为需要保持一致；不要只修一条编辑链路，另一条继续静默覆盖。
+- `configConflict.ts` 负责共享比较逻辑；比较时需要归一化对象 key 顺序，避免仅因字段顺序不同而误判冲突。
+
+## 修改建议
+
+- 如果需要调整冲突交互，优先保留 “先拦截自动保存，再让用户选择” 这个顺序。
+- 如果需要新增配置编辑入口，接入同样的 `base / draft / server` 语义，而不是只复用自动保存逻辑。
+- 如果需要修改 websocket 或缓存刷新逻辑，确认配置草稿仍然只在编辑器内部合并，不要把合并责任上提到订阅层。
+
+## 最低验证
+
+修改这块后，至少验证：
+
+- `pnpm exec eslint apps/client/src/components/ConfigView.tsx apps/client/src/components/config/*.ts* apps/client/src/hooks/use-session-subscription.ts apps/client/src/hooks/session-subscription-cache.ts`
+- `pnpm exec vitest run --workspace vitest.workspace.ts apps/client/__tests__/config-conflict.spec.ts apps/client/__tests__/session-subscription-cache.spec.ts`
+- 如果改动了配置表单渲染，再补 `apps/client/__tests__/config-schema-form.spec.tsx`