@fatdoge/wtree 0.1.0

package/src/pages/Worktrees.tsx

@@ -0,0 +1,354 @@
+import { Copy, ExternalLink, Plus, RefreshCw, Settings, Trash2, Lock, Unlock, Code } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import Button from '@/components/Button'
+import Modal from '@/components/Modal'
+import { useToastStore } from '@/stores/toastStore'
+import { useWorktreeStore } from '@/stores/worktreeStore'
+
+function truncatePath(p: string) {
+  if (p.length <= 70) return p
+  return `${p.slice(0, 28)}…${p.slice(-38)}`
+}
+
+export default function Worktrees() {
+  const { t } = useTranslation()
+  const loading = useWorktreeStore((s) => s.loading)
+  const items = useWorktreeStore((s) => s.items)
+  const selectedId = useWorktreeStore((s) => s.selectedId)
+  const refresh = useWorktreeStore((s) => s.refresh)
+  const select = useWorktreeStore((s) => s.select)
+  const remove = useWorktreeStore((s) => s.remove)
+  const open = useWorktreeStore((s) => s.open)
+  const lock = useWorktreeStore((s) => s.lock)
+  const unlock = useWorktreeStore((s) => s.unlock)
+  const toast = useToastStore((s) => s.push)
+
+  const [removeId, setRemoveId] = useState<string | null>(null)
+  const [forceDelete, setForceDelete] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const selected = useMemo(() => items.find((x) => x.id === selectedId), [items, selectedId])
+  const toRemove = useMemo(() => items.find((x) => x.id === removeId), [items, removeId])
+
+  useEffect(() => {
+    refresh()
+  }, [refresh])
+
+  const closeModal = () => {
+    setRemoveId(null)
+    setForceDelete(false)
+    setIsDeleting(false)
+  }
+
+  const handleDelete = async () => {
+    if (!removeId) return
+    setIsDeleting(true)
+    try {
+      const res = await remove(removeId, forceDelete)
+      if (res.success) {
+        toast({ type: 'success', title: forceDelete ? t('worktrees.toast.forceDeleteSuccess') : t('worktrees.toast.deleteSuccess') })
+        closeModal()
+      } else {
+        const msg = res.error || ''
+        if (msg.toLowerCase().includes('force') || msg.includes('modified') || msg.includes('untracked')) {
+          setForceDelete(true)
+          toast({
+            type: 'error',
+            title: t('worktrees.toast.deleteFailed'),
+            detail: t('worktrees.toast.deleteWarning'),
+          })
+        } else {
+          toast({ type: 'error', title: t('worktrees.toast.deleteFailed'), detail: msg })
+        }
+      }
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      toast({ type: 'error', title: t('worktrees.toast.deleteFailed'), detail: msg })
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const onCopy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      toast({ type: 'success', title: t('worktrees.toast.copySuccess') })
+    } catch {
+      toast({ type: 'error', title: t('worktrees.toast.copyFailed') })
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 py-6">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="text-lg font-semibold text-slate-900 dark:text-slate-100">{t('worktrees.title')}</div>
+          <div className="mt-1 truncate text-xs text-slate-500 dark:text-slate-400">{t('worktrees.subtitle')}</div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Link to="/settings">
+            <Button variant="ghost" size="sm">
+              <Settings className="h-4 w-4" />
+            </Button>
+          </Link>
+          <Button variant="secondary" size="sm" onClick={refresh} disabled={loading}>
+            <RefreshCw className={loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} />
+          </Button>
+          <Link to="/create">
+            <Button variant="primary" size="sm">
+              <Plus className="h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <div className="mt-5 grid grid-cols-12 gap-4">
+        <div className="col-span-12 lg:col-span-9 order-2 lg:order-1">
+          <div className="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
+            <div className="hidden md:grid grid-cols-12 gap-2 border-b border-slate-100 dark:border-slate-800 px-3 py-2 text-xs text-slate-500 dark:text-slate-400">
+              <div className="col-span-5">{t('worktrees.table.path')}</div>
+              <div className="col-span-3">{t('worktrees.table.branch')}</div>
+              <div className="col-span-2">{t('worktrees.table.flags')}</div>
+              <div className="col-span-2 text-right">{t('worktrees.table.actions')}</div>
+            </div>
+
+            {loading ? (
+              <div className="p-4">
+                <div className="h-10 animate-pulse rounded-lg bg-slate-100 dark:bg-slate-900" />
+              </div>
+            ) : items.length === 0 ? (
+              <div className="p-6 text-sm text-slate-500 dark:text-slate-300">{t('worktrees.empty')}</div>
+            ) : (
+              <div className="max-h-[520px] overflow-auto">
+                {items.map((wt) => {
+                  const active = wt.id === selectedId
+                  const flags = [
+                    wt.isMain ? 'Main' : null,
+                    wt.isLocked ? 'Locked' : null,
+                  ].filter(Boolean)
+
+                  return (
+                    <div
+                      key={wt.id}
+                      className={
+                        active
+                          ? 'flex flex-col md:grid md:grid-cols-12 gap-2 bg-slate-100 dark:bg-slate-900/60 px-3 py-3 md:py-2 text-sm border-b md:border-b-0 border-slate-100 dark:border-slate-800/50'
+                          : 'flex flex-col md:grid md:grid-cols-12 gap-2 px-3 py-3 md:py-2 text-sm hover:bg-slate-50 dark:hover:bg-slate-900/40 border-b md:border-b-0 border-slate-100 dark:border-slate-800/50'
+                      }
+                      onClick={() => select(wt.id)}
+                      role="button"
+                      tabIndex={0}
+                    >
+                      <div className="col-span-5 min-w-0">
+                        <div className="md:hidden text-xs text-slate-500 dark:text-slate-400 mb-0.5">{t('worktrees.table.path')}</div>
+                        <div className="truncate font-mono text-xs text-slate-900 dark:text-slate-100" title={wt.path}>
+                          {truncatePath(wt.path)}
+                        </div>
+                      </div>
+                      <div className="col-span-3 min-w-0 mt-2 md:mt-0">
+                        <div className="md:hidden flex items-center gap-2 mb-0.5">
+                          <span className="text-xs text-slate-500 dark:text-slate-400">{t('worktrees.table.branch')}</span>
+                          <span className="font-mono text-xs text-slate-500">{wt.head.slice(0, 10)}</span>
+                        </div>
+                        <div className="truncate text-slate-900 dark:text-slate-100">
+                          {wt.branch ? wt.branch : 'HEAD'}
+                        </div>
+                        <div className="hidden md:block truncate font-mono text-xs text-slate-500">{wt.head.slice(0, 10)}</div>
+                      </div>
+                      <div className="col-span-2 flex flex-wrap items-center gap-1 mt-2 md:mt-0">
+                        {flags.length === 0 ? (
+                          <span className="text-xs text-slate-400 dark:text-slate-500 hidden md:inline">—</span>
+                        ) : (
+                          flags.map((f) => (
+                            <span
+                              key={f}
+                              className="rounded border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-900 px-1.5 py-0.5 text-[11px] text-slate-600 dark:text-slate-300"
+                            >
+                              {f}
+                            </span>
+                          ))
+                        )}
+                      </div>
+                      <div className="col-span-2 mt-3 md:mt-0 flex md:justify-end gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            open(wt.id).then((ok) =>
+                              toast({
+                                type: ok ? 'success' : 'error',
+                                title: ok ? t('worktrees.toast.folderSuccess') : t('worktrees.toast.folderFailed'),
+                              }),
+                            )
+                          }}
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onCopy(wt.path)
+                          }}
+                          title={t('worktrees.actions.copy')}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          disabled={wt.isMain}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setRemoveId(wt.id)
+                          }}
+                          title={t('worktrees.actions.delete')}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="col-span-12 lg:col-span-3 order-1 lg:order-2 mb-4 lg:mb-0">
+          <div className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('worktrees.details')}</div>
+            {selected ? (
+              <div className="mt-3 space-y-2 text-xs">
+                <div>
+                  <div className="text-slate-500 dark:text-slate-400">{t('worktrees.detailsPanel.path')}</div>
+                  <div className="mt-1 break-all font-mono text-slate-900 dark:text-slate-100">{selected.path}</div>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <div className="text-slate-500 dark:text-slate-400">{t('worktrees.detailsPanel.branch')}</div>
+                    <div className="mt-1 truncate text-slate-900 dark:text-slate-100" title={selected.branch || 'HEAD'}>{selected.branch || 'HEAD'}</div>
+                  </div>
+                  <div>
+                    <div className="text-slate-500 dark:text-slate-400">{t('worktrees.detailsPanel.main')}</div>
+                    <div className="mt-1 text-slate-900 dark:text-slate-100">{selected.isMain ? t('worktrees.detailsPanel.yes') : t('worktrees.detailsPanel.no')}</div>
+                  </div>
+                </div>
+                <div>
+                  <div className="text-slate-500 dark:text-slate-400">{t('worktrees.detailsPanel.head')}</div>
+                  <div className="mt-1 break-all font-mono text-slate-900 dark:text-slate-100">{selected.head}</div>
+                </div>
+                <div className="flex flex-col sm:flex-row flex-wrap gap-2 pt-2">
+                  <Button className="w-full sm:w-auto" variant="secondary" size="sm" onClick={() => onCopy(selected.path)}>
+                    <Copy className="h-4 w-4" />
+                    {t('worktrees.actions.copy')}
+                  </Button>
+                  <Button
+                    className="w-full sm:w-auto"
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => {
+                      const action = selected.isLocked ? unlock : lock
+                      const msg = selected.isLocked ? t('worktrees.toast.unlockSuccess') : t('worktrees.toast.lockSuccess')
+                      const msgFail = selected.isLocked ? t('worktrees.toast.unlockFailed') : t('worktrees.toast.lockFailed')
+                      action(selected.id).then((ok) =>
+                        toast({
+                          type: ok ? 'success' : 'error',
+                          title: ok ? msg : msgFail,
+                        }),
+                      )
+                    }}
+                  >
+                    {selected.isLocked ? <Unlock className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+                    {selected.isLocked ? t('worktrees.actions.unlock') : t('worktrees.actions.lock')}
+                  </Button>
+                  <Button
+                    className="w-full sm:w-auto"
+                    variant="primary"
+                    size="sm"
+                    onClick={() =>
+                      open(selected.id, 'editor').then((ok) =>
+                        toast({
+                          type: ok ? 'success' : 'error',
+                          title: ok ? t('worktrees.toast.ideSuccess') : t('worktrees.toast.ideFailed'),
+                        }),
+                      )
+                    }
+                  >
+                    <Code className="h-4 w-4" />
+                    {t('worktrees.actions.ide')}
+                  </Button>
+                  <Button
+                    className="w-full sm:w-auto"
+                    variant="secondary"
+                    size="sm"
+                    onClick={() =>
+                      open(selected.id, 'folder').then((ok) =>
+                        toast({
+                          type: ok ? 'success' : 'error',
+                          title: ok ? t('worktrees.toast.folderSuccess') : t('worktrees.toast.folderFailed'),
+                        }),
+                      )
+                    }
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                    {t('worktrees.actions.folder')}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="mt-3 text-xs text-slate-500 dark:text-slate-400">{t('worktrees.selectToView')}</div>
+            )}
+          </div>
+
+          <div className="mt-3 rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('worktrees.help.title')}</div>
+            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">{t('worktrees.help.desc')}</div>
+            <div className="mt-3">
+              <Link to="/help">
+                <Button variant="secondary" size="sm">{t('worktrees.help.viewCommands')}</Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        title={forceDelete ? t('worktrees.deleteModal.forceTitle') : t('worktrees.deleteModal.title')}
+        open={Boolean(removeId)}
+        onClose={closeModal}
+        footer={
+          <>
+            <Button variant="secondary" size="sm" onClick={closeModal} disabled={isDeleting}>
+              {t('worktrees.deleteModal.cancel')}
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={handleDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? t('worktrees.deleteModal.deleting') : forceDelete ? t('worktrees.deleteModal.forceConfirm') : t('worktrees.deleteModal.confirm')}
+            </Button>
+          </>
+        }
+      >
+        <div className="text-xs text-slate-600 dark:text-slate-300">{t('worktrees.deleteModal.desc')}</div>
+        <div className="mt-2 rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2 font-mono text-xs text-slate-900 dark:text-slate-100">
+          {toRemove ? toRemove.path : '—'}
+        </div>
+        {forceDelete ? (
+          <div className="mt-2 rounded bg-rose-100 dark:bg-rose-500/10 px-2 py-1 text-xs text-rose-600 dark:text-rose-400">
+            {t('worktrees.deleteModal.warning')}
+          </div>
+        ) : (
+          <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">{t('worktrees.deleteModal.normalNote')}</div>
+        )}
+      </Modal>
+    </div>
+  )
+}
+

package/src/stores/themeStore.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+type ThemeState = {
+  theme: Theme
+  setTheme: (t: Theme) => void
+  initTheme: () => void
+}
+
+function applyTheme(theme: Theme) {
+  const root = window.document.documentElement
+  root.classList.remove('light', 'dark')
+
+  if (theme === 'system') {
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    root.classList.add(systemTheme)
+  } else {
+    root.classList.add(theme)
+  }
+}
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  theme: (localStorage.getItem('wtui-theme') as Theme) || 'system',
+  setTheme: (t) => {
+    localStorage.setItem('wtui-theme', t)
+    set({ theme: t })
+    applyTheme(t)
+  },
+  initTheme: () => {
+    const t = (localStorage.getItem('wtui-theme') as Theme) || 'system'
+    applyTheme(t)
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = () => {
+      const currentTheme = useThemeStore.getState().theme
+      if (currentTheme === 'system') {
+        applyTheme('system')
+      }
+    }
+    mediaQuery.addEventListener('change', handler)
+  },
+}))

package/src/stores/toastStore.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand'
+
+export type ToastItem = {
+  id: string
+  type: 'success' | 'error' | 'info'
+  title: string
+  detail?: string
+}
+
+type ToastState = {
+  items: ToastItem[]
+  push: (t: Omit<ToastItem, 'id'>) => void
+  remove: (id: string) => void
+}
+
+function id() {
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+export const useToastStore = create<ToastState>((set, get) => ({
+  items: [],
+  push: (t) => {
+    const item: ToastItem = { id: id(), ...t }
+    set((s) => ({ items: [item, ...s.items].slice(0, 5) }))
+    setTimeout(() => get().remove(item.id), 3800)
+  },
+  remove: (id) => set((s) => ({ items: s.items.filter((x) => x.id !== id) })),
+}))
+

package/src/stores/worktreeStore.ts

@@ -0,0 +1,93 @@
+import { create } from 'zustand'
+import type { CreateWorktreeRequest, WorktreeItem } from '../../shared/wtui-types'
+import { apiDelete, apiGet, apiPost } from '@/utils/api'
+
+type WorktreeState = {
+  loading: boolean
+  items: WorktreeItem[]
+  selectedId?: string
+  refresh: () => Promise<void>
+  select: (id?: string) => void
+  create: (req: CreateWorktreeRequest) => Promise<WorktreeItem | null>
+  remove: (id: string, force?: boolean) => Promise<{ success: boolean; error?: string }>
+  open: (id: string, type?: 'folder' | 'editor') => Promise<boolean>
+  lock: (id: string) => Promise<boolean>
+  unlock: (id: string) => Promise<boolean>
+  prune: () => Promise<boolean>
+  branches: string[]
+  fetchBranches: () => Promise<void>
+}
+
+export const useWorktreeStore = create<WorktreeState>((set, get) => ({
+  loading: false,
+  items: [],
+  branches: [],
+  selectedId: undefined,
+  select: (id) => set({ selectedId: id }),
+  refresh: async () => {
+    set({ loading: true })
+    try {
+      const r = await apiGet<WorktreeItem[]>('/api/worktrees')
+      if (r.ok) {
+        set({ items: r.data })
+        const sel = get().selectedId
+        if (sel && !r.data.some((x) => x.id === sel)) {
+          set({ selectedId: undefined })
+        }
+      }
+    } finally {
+      set({ loading: false })
+    }
+  },
+  create: async (req) => {
+    const r = await apiPost<WorktreeItem, CreateWorktreeRequest>('/api/worktrees', req)
+    if (!r.ok) return null
+    await get().refresh()
+    return r.data
+  },
+  remove: async (id, force) => {
+    const url = force ? `/api/worktrees/${encodeURIComponent(id)}?force=1` : `/api/worktrees/${encodeURIComponent(id)}`
+    const r = await apiDelete<{ removed: true }>(url)
+    if (!r.ok) {
+      const err = (r as { error: { message: string; details?: string } }).error
+      return { success: false, error: err.details || err.message }
+    }
+    await get().refresh()
+    return { success: true }
+  },
+  open: async (id, type) => {
+    const r = await apiPost<{ launched: true }, { type?: 'folder' | 'editor' }>(
+      `/api/worktrees/${encodeURIComponent(id)}/open`,
+      { type: type || 'folder' },
+    )
+    return r.ok
+  },
+  lock: async (id) => {
+    const r = await apiPost<{ locked: true }, Record<string, never>>(
+      `/api/worktrees/${encodeURIComponent(id)}/lock`,
+      {},
+    )
+    if (!r.ok) return false
+    await get().refresh()
+    return true
+  },
+  unlock: async (id) => {
+    const r = await apiPost<{ unlocked: true }, Record<string, never>>(
+      `/api/worktrees/${encodeURIComponent(id)}/unlock`,
+      {},
+    )
+    if (!r.ok) return false
+    await get().refresh()
+    return true
+  },
+  prune: async () => {
+    const r = await apiPost<{ pruned: true }, Record<string, never>>('/api/worktrees/prune', {})
+    if (!r.ok) return false
+    await get().refresh()
+    return true
+  },
+  fetchBranches: async () => {
+    const r = await apiGet<string[]>('/api/branches')
+    if (r.ok) set({ branches: r.data })
+  },
+}))

package/src/utils/api.ts

@@ -0,0 +1,36 @@
+import type { ApiResult } from '../../shared/wtui-types'
+
+const apiBase = import.meta.env.VITE_WTUI_API_URL as string | undefined
+
+function withBase(path: string) {
+  if (!apiBase) return path
+  return new URL(path, apiBase).toString()
+}
+
+export async function apiGet<T>(path: string): Promise<ApiResult<T>> {
+  const res = await fetch(withBase(path))
+  return (await res.json()) as ApiResult<T>
+}
+
+export async function apiPost<T, B>(path: string, body: B): Promise<ApiResult<T>> {
+  const res = await fetch(withBase(path), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  return (await res.json()) as ApiResult<T>
+}
+
+export async function apiPut<T, B>(path: string, body: B): Promise<ApiResult<T>> {
+  const res = await fetch(withBase(path), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  return (await res.json()) as ApiResult<T>
+}
+
+export async function apiDelete<T>(path: string): Promise<ApiResult<T>> {
+  const res = await fetch(withBase(path), { method: 'DELETE' })
+  return (await res.json()) as ApiResult<T>
+}

package/src/vite-env.d.ts

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

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  darkMode: 'class',
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {},
+  },
+  plugins: [],
+};

package/vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from "vite-tsconfig-paths";
+import { traeBadgePlugin } from 'vite-plugin-trae-solo-badge';
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+const hasDevLocator = (() => {
+  try {
+    require.resolve('babel-plugin-react-dev-locator')
+    return true
+  } catch {
+    return false
+  }
+})()
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: hasDevLocator ? ['react-dev-locator'] : [],
+      },
+    }),
+    traeBadgePlugin({
+      variant: 'dark',
+      position: 'bottom-right',
+      prodOnly: true,
+      clickable: true,
+      clickUrl: 'https://www.trae.ai/solo?showJoin=1',
+      autoTheme: true,
+      autoThemeTarget: '#root'
+    }), 
+    tsconfigPaths(),
+  ],
+  server: {
+    proxy: {
+      '/api': {
+        target: process.env.WTUI_API_URL || 'http://localhost:3001',
+        changeOrigin: true,
+        secure: false,
+        localAddress: '127.0.0.1',
+      }
+    }
+  }
+})