@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/knowledge-base/components/use-skill-registry-modal.ts

@@ -1,68 +0,0 @@
-import { App, Form } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { ConfigResponse } from '@vibe-forge/types'
-
-import { getApiErrorMessage, updateConfig } from '#~/api.js'
-import { buildPluginsWithRegistry, buildRegistrySource } from './skill-hub-utils'
-import type { RegistryFormValues } from './skill-hub-utils'
-
-export function useSkillRegistryModal({
-  configRes,
-  mutateConfig,
-  mutateHub,
-  setRegistry
-}: {
-  configRes?: ConfigResponse
-  mutateConfig: () => Promise<unknown>
-  mutateHub: () => Promise<unknown>
-  setRegistry: (value: string) => void
-}) {
-  const { t } = useTranslation()
-  const { message } = App.useApp()
-  const [open, setOpen] = React.useState(false)
-  const [saving, setSaving] = React.useState(false)
-  const [form] = Form.useForm<RegistryFormValues>()
-
-  const save = async () => {
-    const values = await form.validateFields()
-    const id = values.id.trim()
-    const projectPlugins = configRes?.sources?.project?.plugins ?? {}
-    const existingMarketplaces = projectPlugins.marketplaces ?? {}
-    if (id === 'skills' || Object.hasOwn(existingMarketplaces, id)) {
-      void message.warning(t('knowledge.skills.registryExists'))
-      return
-    }
-
-    setSaving(true)
-    try {
-      await updateConfig(
-        'project',
-        'plugins',
-        buildPluginsWithRegistry(
-          projectPlugins,
-          id,
-          buildRegistrySource(values)
-        )
-      )
-      setRegistry(id)
-      setOpen(false)
-      form.resetFields()
-      await Promise.all([mutateConfig(), mutateHub()])
-      void message.success(t('knowledge.skills.registrySaved'))
-    } catch (error) {
-      void message.error(getApiErrorMessage(error, t('config.saveFailed')))
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return {
-    form,
-    open,
-    save,
-    saving,
-    setOpen
-  }
-}

package/src/components/knowledge-base/index.tsx

@@ -1 +0,0 @@
-export { KnowledgeBaseView } from './KnowledgeBaseView.js'

package/src/components/layout/@hooks/use-mobile-sidebar-modal.ts

@@ -1,190 +0,0 @@
-import { useEffect, useRef } from 'react'
-import type { RefObject } from 'react'
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])'
-].join(', ')
-
-const getFocusableElements = (container: HTMLElement) => {
-  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-    .filter((element) =>
-      !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true' &&
-      element.offsetParent !== null
-    )
-}
-
-const focusElement = (element: HTMLElement) => {
-  try {
-    element.focus({ preventScroll: true })
-  } catch {
-    element.focus()
-  }
-}
-
-const focusFirstElement = (container: HTMLElement) => {
-  const focusableElements = getFocusableElements(container)
-  const firstFocusableElement = focusableElements[0]
-  if (firstFocusableElement != null) {
-    focusElement(firstFocusableElement)
-  } else {
-    focusElement(container)
-  }
-  return focusableElements
-}
-
-export function useMobileSidebarModal({
-  backgroundRefs,
-  isCompactLayout,
-  isMobileSidebarOpen,
-  setIsMobileSidebarOpen,
-  sheetRef
-}: {
-  backgroundRefs: Array<RefObject<HTMLElement | null>>
-  isCompactLayout: boolean
-  isMobileSidebarOpen: boolean
-  setIsMobileSidebarOpen: (nextOpen: boolean) => void
-  sheetRef: RefObject<HTMLDivElement | null>
-}) {
-  const restoreFocusRef = useRef<HTMLElement | null>(null)
-
-  useEffect(() => {
-    if (!isCompactLayout) {
-      backgroundRefs.forEach((ref) => {
-        ref.current?.removeAttribute('inert')
-      })
-      return
-    }
-
-    backgroundRefs.forEach((ref) => {
-      const element = ref.current
-      if (element == null) {
-        return
-      }
-
-      if (isMobileSidebarOpen) {
-        element.setAttribute('inert', '')
-      } else {
-        element.removeAttribute('inert')
-      }
-    })
-
-    return () => {
-      backgroundRefs.forEach((ref) => {
-        ref.current?.removeAttribute('inert')
-      })
-    }
-  }, [backgroundRefs, isCompactLayout, isMobileSidebarOpen])
-
-  useEffect(() => {
-    if (!isCompactLayout || !isMobileSidebarOpen) {
-      return
-    }
-
-    const activeElement = document.activeElement
-    restoreFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null
-
-    const focusFrame = window.requestAnimationFrame(() => {
-      const sheet = sheetRef.current
-      if (sheet == null) {
-        return
-      }
-
-      focusFirstElement(sheet)
-    })
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsMobileSidebarOpen(false)
-        return
-      }
-
-      if (event.key !== 'Tab') {
-        return
-      }
-
-      const sheet = sheetRef.current
-      if (sheet == null) {
-        return
-      }
-
-      const focusableElements = getFocusableElements(sheet)
-      if (focusableElements.length === 0) {
-        event.preventDefault()
-        focusElement(sheet)
-        return
-      }
-
-      const firstElement = focusableElements[0]
-      const lastElement = focusableElements[focusableElements.length - 1]
-      const activeTarget = document.activeElement
-
-      if (event.shiftKey) {
-        if (activeTarget === firstElement || activeTarget === sheet) {
-          event.preventDefault()
-          focusElement(lastElement)
-        }
-        return
-      }
-
-      if (activeTarget === lastElement) {
-        event.preventDefault()
-        focusElement(firstElement)
-      }
-    }
-
-    const handleFocusIn = (event: FocusEvent) => {
-      const sheet = sheetRef.current
-      const focusTarget = event.target
-      if (sheet == null || !(focusTarget instanceof HTMLElement)) {
-        return
-      }
-
-      if (sheet.contains(focusTarget)) {
-        return
-      }
-
-      focusFirstElement(sheet)
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    document.addEventListener('focusin', handleFocusIn)
-    return () => {
-      window.cancelAnimationFrame(focusFrame)
-      window.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('focusin', handleFocusIn)
-
-      const restoreFocusTarget = restoreFocusRef.current
-      if (restoreFocusTarget != null && document.contains(restoreFocusTarget)) {
-        window.requestAnimationFrame(() => {
-          if (document.contains(restoreFocusTarget)) {
-            focusElement(restoreFocusTarget)
-          }
-        })
-      }
-      restoreFocusRef.current = null
-    }
-  }, [isCompactLayout, isMobileSidebarOpen, setIsMobileSidebarOpen, sheetRef])
-
-  useEffect(() => {
-    if (!isCompactLayout || !isMobileSidebarOpen) {
-      return
-    }
-
-    const { body, documentElement } = document
-    const previousBodyOverflow = body.style.overflow
-    const previousDocumentOverflow = documentElement.style.overflow
-
-    body.style.overflow = 'hidden'
-    documentElement.style.overflow = 'hidden'
-
-    return () => {
-      body.style.overflow = previousBodyOverflow
-      documentElement.style.overflow = previousDocumentOverflow
-    }
-  }, [isCompactLayout, isMobileSidebarOpen])
-}

package/src/components/layout/AppShell.scss

@@ -1,157 +0,0 @@
-.app-shell {
-  min-height: 100vh;
-  height: 100dvh;
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-  overflow: hidden;
-  background:
-    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, 0)),
-    var(--sub-bg-color);
-}
-
-.app-shell__sidebar-region {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  min-height: 0;
-}
-
-.app-shell__content-region {
-  flex: 1;
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-}
-
-.app-shell__content {
-  flex: 1;
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  border-radius: 0;
-  background-color: var(--sub-bg-color);
-  box-shadow:
-    0 16px 40px rgba(15, 23, 42, .05),
-    0 2px 8px rgba(15, 23, 42, .04);
-}
-
-.app-shell__content.app-shell__content--session {
-  padding: 12px 12px 12px 0;
-}
-
-.app-shell__content.app-shell__content--session.is-sidebar-collapsed {
-  padding: 4px;
-}
-
-.app-shell__content > * {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.app-shell__content.is-flat {
-  padding: 0;
-  background-color: var(--sub-bg-color);
-  box-shadow: none;
-}
-
-.app-shell__content.is-flat > * {
-  border-radius: 0;
-}
-
-.app-shell__mobile-sidebar-backdrop {
-  position: fixed;
-  inset: 0;
-  border: none;
-  background: rgba(0, 0, 0, .28);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity .24s ease, visibility 0s linear .24s;
-  z-index: 60;
-}
-
-.app-shell__mobile-sidebar-backdrop.is-open {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transition-delay: 0s;
-}
-
-.app-shell__mobile-sidebar-sheet {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: min(320px, calc(100vw - 24px));
-  max-width: calc(100vw - 24px);
-  padding: max(4px, env(safe-area-inset-top)) 0
-    max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
-  transform: translateX(-100%);
-  visibility: hidden;
-  transition:
-    transform .24s cubic-bezier(.4, 0, .2, 1),
-    visibility 0s linear .24s;
-  z-index: 61;
-  pointer-events: none;
-  overscroll-behavior: contain;
-}
-
-.app-shell__mobile-sidebar-sheet.is-open {
-  transform: translateX(0);
-  visibility: visible;
-  pointer-events: auto;
-  transition-delay: 0s;
-}
-
-.app-shell__mobile-sidebar-sheet > * {
-  height: 100%;
-  overflow: hidden;
-  border-radius: 0 8px 8px 0;
-  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
-  overscroll-behavior: contain;
-}
-
-.app-shell--compact {
-  flex-direction: column;
-
-  .app-shell__content {
-    padding: max(4px, env(safe-area-inset-top)) 4px 4px;
-    box-shadow: none;
-    background-color: var(--sub-bg-color);
-  }
-
-  .app-shell__content > * {
-    border-radius: 8px;
-  }
-}
-
-.app-shell--dark {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
-    #111111;
-
-  .app-shell__content {
-    background-color: var(--sub-bg-color);
-    box-shadow: none;
-  }
-
-  .app-shell__mobile-sidebar-backdrop {
-    background: rgba(0, 0, 0, .48);
-  }
-
-  .app-shell__mobile-sidebar-sheet > * {
-    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
-  }
-
-  .app-shell__content.is-flat {
-    box-shadow: none;
-  }
-}

package/src/components/layout/AppShell.tsx

@@ -1,168 +0,0 @@
-import './AppShell.scss'
-
-import { Layout } from 'antd'
-import { useAtom, useSetAtom } from 'jotai'
-import { useEffect, useMemo, useRef } from 'react'
-import type { PropsWithChildren } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
-
-import type { Session } from '@vibe-forge/core'
-
-import { NavRail } from '#~/components/NavRail'
-import { Sidebar } from '#~/components/Sidebar'
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { useSidebarQueryState } from '#~/hooks/use-sidebar-query-state'
-import { isMobileSidebarOpenAtom, isSidebarCollapsedAtom } from '#~/store/index'
-import { useMobileSidebarModal } from './@hooks/use-mobile-sidebar-modal'
-import { MOBILE_SIDEBAR_DIALOG_ID } from './mobile-sidebar-constants'
-
-type AppShellProps = PropsWithChildren<{
-  activeSessionId?: string
-  isDarkMode: boolean
-  onDeletedSession: (deletedId: string, nextId?: string) => void
-  onSelectSession: (session: Session, isNew?: boolean) => void
-  showSidebar: boolean
-  sidebarWidth: number
-}>
-
-export function AppShell({
-  activeSessionId,
-  children,
-  isDarkMode,
-  onDeletedSession,
-  onSelectSession,
-  showSidebar,
-  sidebarWidth
-}: AppShellProps) {
-  const { t } = useTranslation()
-  const { isSidebarCollapsed } = useSidebarQueryState()
-  const location = useLocation()
-  const { isCompactLayout } = useResponsiveLayout()
-  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useAtom(isMobileSidebarOpenAtom)
-  const setIsSidebarCollapsed = useSetAtom(isSidebarCollapsedAtom)
-  const isDesktopSidebarCollapsed = !isCompactLayout && isSidebarCollapsed
-  const contentRegionRef = useRef<HTMLDivElement | null>(null)
-  const mobileNavRegionRef = useRef<HTMLDivElement | null>(null)
-  const mobileSidebarSheetRef = useRef<HTMLDivElement | null>(null)
-  const mobileSidebarBackgroundRefs = useMemo(
-    () => [contentRegionRef, mobileNavRegionRef],
-    []
-  )
-
-  useEffect(() => {
-    setIsSidebarCollapsed(isCompactLayout ? false : isSidebarCollapsed)
-  }, [isCompactLayout, isSidebarCollapsed, setIsSidebarCollapsed])
-
-  useEffect(() => {
-    setIsMobileSidebarOpen(false)
-  }, [isCompactLayout, location.pathname, setIsMobileSidebarOpen])
-
-  useEffect(() => {
-    if (!isCompactLayout || showSidebar) {
-      return
-    }
-
-    setIsMobileSidebarOpen(false)
-  }, [isCompactLayout, setIsMobileSidebarOpen, showSidebar])
-
-  useMobileSidebarModal({
-    backgroundRefs: mobileSidebarBackgroundRefs,
-    isCompactLayout,
-    isMobileSidebarOpen,
-    setIsMobileSidebarOpen,
-    sheetRef: mobileSidebarSheetRef
-  })
-
-  const resolvedSidebarWidth = isCompactLayout ? Math.min(sidebarWidth, 320) : sidebarWidth
-  const contentClassName = [
-    'app-shell__content',
-    showSidebar ? 'app-shell__content--session' : '',
-    isDesktopSidebarCollapsed ? 'is-sidebar-collapsed' : '',
-    showSidebar ? '' : 'is-flat'
-  ].filter(Boolean).join(' ')
-  const content = (
-    <div
-      ref={contentRegionRef}
-      className='app-shell__content-region'
-      aria-hidden={isCompactLayout && isMobileSidebarOpen ? true : undefined}
-    >
-      <Layout.Content className={contentClassName}>
-        {children}
-      </Layout.Content>
-    </div>
-  )
-
-  if (isCompactLayout) {
-    return (
-      <Layout className={`app-shell app-shell--compact ${isDarkMode ? 'app-shell--dark' : ''}`}>
-        {content}
-
-        {showSidebar && (
-          <>
-            <button
-              type='button'
-              className={`app-shell__mobile-sidebar-backdrop ${isMobileSidebarOpen ? 'is-open' : ''}`}
-              aria-label={t('common.close')}
-              aria-hidden={!isMobileSidebarOpen}
-              tabIndex={-1}
-              onClick={() => setIsMobileSidebarOpen(false)}
-            />
-            <div
-              ref={mobileSidebarSheetRef}
-              id={MOBILE_SIDEBAR_DIALOG_ID}
-              className={`app-shell__mobile-sidebar-sheet ${isMobileSidebarOpen ? 'is-open' : ''}`}
-              role='dialog'
-              aria-modal={isMobileSidebarOpen ? 'true' : undefined}
-              aria-label={t('common.sessions')}
-              aria-hidden={!isMobileSidebarOpen}
-              tabIndex={-1}
-            >
-              <Sidebar
-                width={resolvedSidebarWidth}
-                activeId={activeSessionId}
-                onSelectSession={(session, isNew) => {
-                  setIsMobileSidebarOpen(false)
-                  onSelectSession(session, isNew)
-                }}
-                onDeletedSession={(deletedId, nextId) => {
-                  setIsMobileSidebarOpen(false)
-                  onDeletedSession(deletedId, nextId)
-                }}
-                isCompactLayout
-                isMobileOpen={isMobileSidebarOpen}
-                onRequestClose={() => setIsMobileSidebarOpen(false)}
-              />
-            </div>
-          </>
-        )}
-
-        <div ref={mobileNavRegionRef}>
-          <NavRail
-            isCompactLayout
-            ariaHidden={isMobileSidebarOpen}
-            showSidebar={showSidebar}
-            onOpenSidebar={() => setIsMobileSidebarOpen(true)}
-          />
-        </div>
-      </Layout>
-    )
-  }
-
-  return (
-    <Layout className={`app-shell ${isDarkMode ? 'app-shell--dark' : ''}`}>
-      <div className='app-shell__sidebar-region'>
-        <NavRail />
-        {showSidebar && (
-          <Sidebar
-            width={sidebarWidth}
-            activeId={activeSessionId}
-            onSelectSession={onSelectSession}
-            onDeletedSession={onDeletedSession}
-          />
-        )}
-      </div>
-      {content}
-    </Layout>
-  )
-}

package/src/components/layout/PageShell.scss

@@ -1,41 +0,0 @@
-.page-shell {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background: var(--sub-bg-color);
-  --subpage-secondary-panel-width: 300px;
-  --subpage-content-card-gap: 12px;
-  --subpage-content-card-radius: 12px;
-  --subpage-content-card-bg: var(--bg-color);
-  --subpage-tertiary-padding: 8px;
-  --subpage-tertiary-gap: 8px;
-  --subpage-tertiary-radius: 8px;
-  --subpage-tertiary-border: 1px solid var(--border-color);
-  --subpage-tertiary-bg: var(--bg-color);
-  --subpage-tertiary-hover-bg: var(--sidebar-hover-bg, #e5e5e5);
-  --subpage-tertiary-hover-border: var(--sidebar-hover-bg, #e5e5e5);
-}
-
-.page-shell__header {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px 12px 8px;
-}
-
-.page-shell__body {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-@media (max-width: 720px) {
-  .page-shell {
-    padding: 0;
-  }
-}

package/src/components/layout/PageShell.tsx

@@ -1,32 +0,0 @@
-import './PageShell.scss'
-
-import type { PropsWithChildren, ReactNode } from 'react'
-
-type PageShellProps = PropsWithChildren<{
-  bodyClassName?: string
-  className?: string
-  header?: ReactNode
-}>
-
-export function PageShell({
-  bodyClassName,
-  children,
-  className,
-  header
-}: PageShellProps) {
-  const rootClassName = ['page-shell', className].filter(Boolean).join(' ')
-  const bodyClasses = ['page-shell__body', bodyClassName].filter(Boolean).join(' ')
-
-  return (
-    <div className={rootClassName}>
-      {header != null && (
-        <div className='page-shell__header'>
-          {header}
-        </div>
-      )}
-      <div className={bodyClasses}>
-        {children}
-      </div>
-    </div>
-  )
-}

package/src/components/layout/mobile-sidebar-constants.ts

@@ -1 +0,0 @@
-export const MOBILE_SIDEBAR_DIALOG_ID = 'mobile-sidebar-dialog'

package/src/components/monaco/monaco-runtime.ts

@@ -1,44 +0,0 @@
-import { loader } from '@monaco-editor/react'
-import * as monacoApi from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import TypeScriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-
-type MonacoWorkerFactory = (_moduleId: string, label: string) => Worker
-
-const createMonacoWorker: MonacoWorkerFactory = (_moduleId, label) => {
-  if (label === 'json') {
-    return new JsonWorker()
-  }
-
-  if (label === 'css' || label === 'scss' || label === 'less') {
-    return new CssWorker()
-  }
-
-  if (label === 'html' || label === 'handlebars' || label === 'razor') {
-    return new HtmlWorker()
-  }
-
-  if (label === 'typescript' || label === 'javascript') {
-    return new TypeScriptWorker()
-  }
-
-  return new EditorWorker()
-}
-
-const monacoRuntime = globalThis as typeof globalThis & {
-  MonacoEnvironment?: {
-    getWorker: MonacoWorkerFactory
-  }
-}
-
-monacoRuntime.MonacoEnvironment = {
-  ...monacoRuntime.MonacoEnvironment,
-  getWorker: createMonacoWorker
-}
-
-loader.config({ monaco: monacoApi })
-
-export { monacoApi }