AI Tabs UI Vue

A tabbed file editor UI built with Vue 3, featuring a split-pane layout with file explorer, integrated terminal, command palette, and theme support. Runs both as an Electron renderer and as a standalone web app using the File System Access API.

Features

• Tab management — open, close, pin, reorder (drag-and-drop), and navigate tabs with keyboard shortcuts; right-click context menu
• File explorer — tree view with lazy loading, search filtering, hidden file toggling, and git pull
• Integrated terminal — xterm.js terminal with real shell process (Electron only), login shell, theme-driven ANSI colors, and exit handling
• Split pane — resizable explorer/editor and editor/terminal layouts with horizontal/vertical toggle
• Command palette — fuzzy-matched command search (Cmd+Shift+P)
• Themes — dark, light, VS Code, and high-contrast; persisted to localStorage
• Notifications — toast messages for errors and feedback
• Keybindings — Cmd+O open, Cmd+W close, Ctrl+Tab / Ctrl+Shift+Tab cycle, Cmd+1–9 jump to tab, Ctrl+` toggle terminal
• Dual environment — Electron adapter (proxies window.electronAPI) and web adapter (File System Access API)

Install

pnpm add @ai-tabs/ui-vue

Requires Vue 3.5+.

Usage

<script setup>
import { App } from '@ai-tabs/ui-vue'
import '@ai-tabs/ui-vue/style.css'
</script>

<template>
  <App />
</template>

For Electron integration (terminal, native dialogs), see docs/Use-with-Electron.md.

Development

pnpm install
pnpm dev

Scripts

| Command | Description | |---------|-------------| | pnpm dev | Start Vite dev server | | pnpm build | Production build | | pnpm test | Run tests with Vitest | | pnpm test:coverage | Run tests with v8 coverage | | pnpm lint | Lint and format with Biome |

Project Structure

src/
├── adapters/          # Environment adapters (Electron, Web)
├── components/        # Vue SFC components
│   └── editors/       # Editor pane implementations
├── composables/       # Shared state and logic (useTabs, useCommands, …)
├── editor/            # Editor input model
├── styles/            # Global CSS
├── themes/            # Color registry system
├── test/              # Test helpers and shared mocks
└── utils/             # Emitter, disposable, path utilities, tree filter

Documentation

• UI overview — layout, themes, keyboard shortcuts
• Tab bar — tabs, drag-and-drop, context menu, sizing modes
• File explorer — tree view, search, toolbar
• Editor pane — split view, terminal, editor registry
• Pane resizer — drag handle behavior
• Electron guide — preload script, IPC handlers, terminal setup

Tech Stack

• Vue 3 (Composition API, <script setup>)
• Vite 7
• Vitest 4 + @vue/test-utils + happy-dom
• xterm.js — integrated terminal
• VS Code Codicons — icon font

License

MIT