Initial commit

src/components/terminal/terminal-panel.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useTerminalContext } from "@/contexts/terminal-context"
+import { TerminalTabBar } from "./terminal-tab-bar"
+import { TerminalView } from "./terminal-view"
+
+export function TerminalPanel() {
+  const { isOpen, tabs, activeTabId } = useTerminalContext()
+
+  return (
+    <section
+      data-terminal-panel-region="true"
+      className="flex h-full min-h-0 flex-col bg-background"
+    >
+      <TerminalTabBar />
+      <div className="relative flex-1 min-h-0 overflow-hidden">
+        {tabs.map((tab) => (
+          <TerminalView
+            key={tab.id}
+            terminalId={tab.id}
+            isActive={tab.id === activeTabId}
+            isVisible={isOpen}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}

src/components/terminal/terminal-tab-bar.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { Minus, Plus, X } from "lucide-react"
+import { useTerminalContext } from "@/contexts/terminal-context"
+import { Button } from "@/components/ui/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+
+export function TerminalTabBar() {
+  const {
+    tabs,
+    activeTabId,
+    switchTerminal,
+    closeTerminal,
+    closeOtherTerminals,
+    closeAllTerminals,
+    renameTerminal,
+    createTerminal,
+    toggle,
+  } = useTerminalContext()
+
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editValue, setEditValue] = useState("")
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const startRename = (id: string, title: string) => {
+    setEditingId(id)
+    setEditValue(title)
+    setTimeout(() => inputRef.current?.select(), 0)
+  }
+
+  const commitRename = () => {
+    if (editingId && editValue.trim()) {
+      renameTerminal(editingId, editValue.trim())
+    }
+    setEditingId(null)
+  }
+
+  return (
+    <div className="flex items-center h-8 bg-muted/50 border-b gap-0.5 px-1 shrink-0">
+      {tabs.map((tab) => (
+        <ContextMenu key={tab.id}>
+          <ContextMenuTrigger asChild>
+            <div
+              className={`flex items-center gap-1 h-6 px-2 rounded-sm text-xs cursor-pointer select-none ${
+                tab.id === activeTabId
+                  ? "bg-background text-foreground"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
+              }`}
+              onClick={() => switchTerminal(tab.id)}
+            >
+              {editingId === tab.id ? (
+                <input
+                  ref={inputRef}
+                  className="bg-transparent outline-none border border-primary/50 rounded px-0.5 w-20 text-xs"
+                  value={editValue}
+                  onChange={(e) => setEditValue(e.target.value)}
+                  onBlur={commitRename}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") commitRename()
+                    if (e.key === "Escape") setEditingId(null)
+                  }}
+                />
+              ) : (
+                <span className="truncate max-w-[120px]">{tab.title}</span>
+              )}
+              <button
+                className="ml-1 rounded-sm hover:bg-muted-foreground/20 p-0.5"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  closeTerminal(tab.id)
+                }}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem onSelect={() => startRename(tab.id, tab.title)}>
+              重命名
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem onSelect={() => closeTerminal(tab.id)}>
+              关闭
+            </ContextMenuItem>
+            <ContextMenuItem
+              onSelect={() => closeOtherTerminals(tab.id)}
+              disabled={tabs.length <= 1}
+            >
+              关闭其它
+            </ContextMenuItem>
+            <ContextMenuItem onSelect={() => closeAllTerminals()}>
+              关闭所有
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      ))}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-6 w-6 shrink-0"
+        onClick={() => createTerminal()}
+      >
+        <Plus className="h-3 w-3" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-6 w-6 shrink-0 ml-auto"
+        onClick={toggle}
+        title="Hide Terminal (Ctrl+J)"
+      >
+        <Minus className="h-3 w-3" />
+      </Button>
+    </div>
+  )
+}

src/components/terminal/terminal-view.tsx

@@ -0,0 +1,267 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { listen } from "@tauri-apps/api/event"
+import { terminalWrite, terminalResize } from "@/lib/tauri"
+import type { TerminalEvent } from "@/lib/types"
+import type { ITheme } from "@xterm/xterm"
+
+const DARK_THEME: ITheme = {
+  background: "#1a1a1a",
+  foreground: "#e0e0e0",
+  cursor: "#e0e0e0",
+  cursorAccent: "#1a1a1a",
+  selectionBackground: "#444444",
+  black: "#1a1a1a",
+  red: "#f87171",
+  green: "#4ade80",
+  yellow: "#facc15",
+  blue: "#60a5fa",
+  magenta: "#c084fc",
+  cyan: "#22d3ee",
+  white: "#e0e0e0",
+  brightBlack: "#737373",
+  brightRed: "#fca5a5",
+  brightGreen: "#86efac",
+  brightYellow: "#fde68a",
+  brightBlue: "#93c5fd",
+  brightMagenta: "#d8b4fe",
+  brightCyan: "#67e8f9",
+  brightWhite: "#ffffff",
+}
+
+const LIGHT_THEME: ITheme = {
+  background: "#ffffff",
+  foreground: "#1a1a1a",
+  cursor: "#1a1a1a",
+  cursorAccent: "#ffffff",
+  selectionBackground: "#b4d5fe",
+  black: "#1a1a1a",
+  red: "#dc2626",
+  green: "#16a34a",
+  yellow: "#ca8a04",
+  blue: "#2563eb",
+  magenta: "#9333ea",
+  cyan: "#0891b2",
+  white: "#e5e5e5",
+  brightBlack: "#a3a3a3",
+  brightRed: "#ef4444",
+  brightGreen: "#22c55e",
+  brightYellow: "#eab308",
+  brightBlue: "#3b82f6",
+  brightMagenta: "#a855f7",
+  brightCyan: "#06b6d4",
+  brightWhite: "#ffffff",
+}
+
+function isDarkMode() {
+  return document.documentElement.classList.contains("dark")
+}
+
+function resolveBackgroundColor(
+  element: HTMLElement | null | undefined
+): string | null {
+  let current = element
+  while (current) {
+    const color = getComputedStyle(current).backgroundColor
+    if (color && color !== "transparent" && color !== "rgba(0, 0, 0, 0)") {
+      return color
+    }
+    current = current.parentElement
+  }
+  return null
+}
+
+function getTerminalTheme(container: HTMLDivElement | null): ITheme {
+  const baseTheme = isDarkMode() ? DARK_THEME : LIGHT_THEME
+  const background = resolveBackgroundColor(container)
+  if (!background) return baseTheme
+
+  return {
+    ...baseTheme,
+    background,
+    cursorAccent: background,
+  }
+}
+
+interface TerminalViewProps {
+  terminalId: string
+  isActive: boolean
+  isVisible: boolean
+}
+
+export function TerminalView({
+  terminalId,
+  isActive,
+  isVisible,
+}: TerminalViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const fitAddonRef = useRef<{ fit: () => void } | null>(null)
+  const termRef = useRef<{ focus: () => void } | null>(null)
+  const lastResizeRef = useRef<{ cols: number; rows: number } | null>(null)
+  const isActiveRef = useRef(isActive)
+  const isVisibleRef = useRef(isVisible)
+
+  useEffect(() => {
+    isActiveRef.current = isActive
+    isVisibleRef.current = isVisible
+  }, [isActive, isVisible])
+
+  useEffect(() => {
+    let cancelled = false
+    let cleanup: (() => void) | undefined
+
+    async function init() {
+      const { Terminal } = await import("@xterm/xterm")
+      const { FitAddon } = await import("@xterm/addon-fit")
+      const { WebLinksAddon } = await import("@xterm/addon-web-links")
+
+      if (cancelled || !containerRef.current) return
+
+      const fitAddon = new FitAddon()
+      const webLinksAddon = new WebLinksAddon()
+
+      const term = new Terminal({
+        cursorBlink: true,
+        fontSize: 13,
+        fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+        theme: getTerminalTheme(containerRef.current),
+        allowProposedApi: true,
+      })
+
+      term.loadAddon(fitAddon)
+      term.loadAddon(webLinksAddon)
+      term.open(containerRef.current)
+
+      fitAddonRef.current = fitAddon
+      termRef.current = term
+
+      // Watch <html> class changes for theme switching
+      const themeObserver = new MutationObserver(() => {
+        term.options.theme = getTerminalTheme(containerRef.current)
+      })
+      themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"],
+      })
+
+      // Send input to PTY
+      const onDataDisposable = term.onData((data: string) => {
+        // Some apps toggle focus reporting; don't leak focus in/out sequences
+        // into the shell prompt when tabs are switched.
+        if (data === "\x1b[I" || data === "\x1b[O") return
+        terminalWrite(terminalId, data).catch(() => {})
+      })
+
+      // Debounced resize — avoid flooding IPC during drag
+      let resizeTimer: ReturnType<typeof setTimeout> | null = null
+      const onResizeDisposable = term.onResize(
+        ({ cols, rows }: { cols: number; rows: number }) => {
+          const last = lastResizeRef.current
+          if (last && last.cols === cols && last.rows === rows) return
+          lastResizeRef.current = { cols, rows }
+          if (resizeTimer) clearTimeout(resizeTimer)
+          resizeTimer = setTimeout(() => {
+            terminalResize(terminalId, cols, rows).catch(() => {})
+          }, 50)
+        }
+      )
+
+      // Set up event listeners BEFORE fit so initial output is captured
+      const unlisten = await listen<TerminalEvent>(
+        `terminal://output/${terminalId}`,
+        (event) => {
+          term.write(event.payload.data)
+        }
+      )
+
+      const unlistenExit = await listen<TerminalEvent>(
+        `terminal://exit/${terminalId}`,
+        () => {
+          term.write("\r\n\x1b[90m[Process exited]\x1b[0m\r\n")
+        }
+      )
+
+      if (cancelled) {
+        themeObserver.disconnect()
+        onDataDisposable.dispose()
+        onResizeDisposable.dispose()
+        unlisten()
+        unlistenExit()
+        term.dispose()
+        return
+      }
+
+      const fitIfReady = () => {
+        const el = containerRef.current
+        if (!el) return
+        if (!isActiveRef.current || !isVisibleRef.current) return
+        if (el.clientWidth <= 0 || el.clientHeight <= 0) return
+        fitAddon.fit()
+      }
+
+      // Only fit when terminal is actually visible/active.
+      requestAnimationFrame(() => {
+        if (!cancelled) fitIfReady()
+      })
+
+      // Debounced fit on container resize while active
+      let fitTimer: ReturnType<typeof setTimeout> | null = null
+      const resizeObserver = new ResizeObserver(() => {
+        if (fitTimer) clearTimeout(fitTimer)
+        fitTimer = setTimeout(() => {
+          fitIfReady()
+        }, 30)
+      })
+      resizeObserver.observe(containerRef.current)
+
+      cleanup = () => {
+        if (resizeTimer) clearTimeout(resizeTimer)
+        if (fitTimer) clearTimeout(fitTimer)
+        themeObserver.disconnect()
+        onDataDisposable.dispose()
+        onResizeDisposable.dispose()
+        unlisten()
+        unlistenExit()
+        resizeObserver.disconnect()
+        term.dispose()
+        fitAddonRef.current = null
+        termRef.current = null
+        lastResizeRef.current = null
+      }
+    }
+
+    init()
+
+    return () => {
+      cancelled = true
+      cleanup?.()
+    }
+  }, [terminalId])
+
+  // Refit and focus when becoming active or panel becomes visible
+  useEffect(() => {
+    if (isActive && isVisible) {
+      requestAnimationFrame(() => {
+        const el = containerRef.current
+        if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+          fitAddonRef.current?.fit()
+        }
+        termRef.current?.focus()
+      })
+    }
+  }, [isActive, isVisible])
+
+  return (
+    <div
+      className="absolute inset-0 h-full w-full p-2"
+      style={{
+        visibility: isActive ? "visible" : "hidden",
+        pointerEvents: isActive ? "auto" : "none",
+      }}
+      aria-hidden={!isActive}
+    >
+      <div ref={containerRef} className="h-full w-full" />
+    </div>
+  )
+}