Frontend Architecture

frontend/src/
├── main.js                 # App entry point, router setup
├── App.vue                 # Root component (Naive UI providers)
├── styles/
│   └── tailwind.css        # Tailwind imports
├── views/
│   ├── Home.vue            # Main query interface
│   ├── Connections.vue     # Connection management window
│   └── Plugins.vue         # Plugin listing window
├── components/
│   ├── AppMenuBar.vue      # Menu bar (Windows/Linux only)
│   ├── ConnectionsPanel.vue # Left sidebar (connection tree)
│   ├── WorkspacePanel.vue  # Tab-based query workspace
│   ├── QueryEditor.vue     # SQL/query input editor
│   ├── ResultViewer.vue    # Multi-format result renderer
│   ├── ResultViewerRdbms.vue   # Table grid for SQL results
│   ├── ResultViewerKeyValue.vue # KV pair renderer
│   ├── ResultViewerDocument.vue # JSON/document renderer
│   ├── LogsPanel.vue       # Event log stream
│   ├── TwoColumnLayout.vue # Resizable 2-column container
│   ├── SafeZone.vue        # macOS drag zone wrapper
│   ├── AuthFormRenderer.vue # Dynamic form generator
│   └── ActionFormModal.vue # Tree action prompt modal
├── composables/
│   ├── useResize.ts        # Resizable panel logic
│   └── useConnectionTree.ts # Connection tree cache
└── lib/
    └── icons.js            # Lucide icon exports

const selectedConnection = ref(null)       // Currently selected connection
const activeConnectionId = ref(null)       // Connection ID for workspace tabs
const footerCollapsed = ref(true)          // Logs panel collapsed state
const footerHeight = ref(176)              // Logs panel height (px)
const logs = ref([])                       // Streamed log entries from backend
const leftWidth = ref(0)                   // Left panel width (px)

const connections = ref([])               // From ListConnections()
const expandedKeys = ref([])              // Tree nodes currently expanded
const treeData = ref([])                  // Hierarchical tree structure

{
  label: 'users',                         // Display name
  node_type: 'table',                     // Enum: database, table, column, etc.
  children: [...],                        // Recursive children
  actions: [                              // Context menu actions
    { label: 'SELECT *', query: 'SELECT * FROM users LIMIT 100' }
  ]
}

{
  key: 'tab-1234',                        // Unique tab ID
  title: 'SELECT * FROM users',           // Display title
  result: { ... },                        // ExecResponse from plugin
  error: 'syntax error',                  // Error message (if any)
  version: 1,                             // Incremented on refresh
  context: {                              // Metadata for refresh
    conn: { ... },                        // Connection object
    action: { ... },                      // Tree action object
    node: { ... }                         // Tree node object
  }
}

workspaceRef.value?.openTab(title, result, error, tabKey, version, context)

defineProps({
  modelValue: String,                     // Query text (v-model)
  disabled: Boolean                       // Disable during execution
})

defineProps({
  result: Object,                         // ExecResponse from plugin
  error: String                           // Error message (if any)
})

if (result?.result?.sql) {
  // Render as table grid
} else if (result?.result?.kv) {
  // Render as key-value pairs
} else if (result?.result?.document) {
  // Render as JSON tree
}

result.result.sql = {
  columns: ['id', 'name', 'email'],
  rows: [
    ['1', 'Alice', 'alice@example.com'],
    ['2', 'Bob', 'bob@example.com']
  ]
}

{
  level: 'info',                          // LogLevel enum
  message: 'CreateConnection: creating \'db1\' (driver: mysql)',
  timestamp: '2026-03-01T12:34:56.789Z'   // RFC3339Nano UTC
}

Events.On('app:log', (event) => {
  const entry = event?.data ?? event
  logs.value.push(entry)
})

defineProps({
  leftWidth: Number                       // Left column width (px)
})

emit('dragstart', event)                  // User starts dragging divider

defineProps({
  form: Object,                           // AuthForm from plugin
  modelValue: Object                      // Form data (v-model)
})

{
  host: 'localhost',
  port: 5432,
  user: 'admin',
  password: 'secret'
}

createHorizontalResizer({ containerRef, sizeRef, min, minOther })
createVerticalResizer({ sizeRef, min, getMax })

const horizontalResizer = createHorizontalResizer({
  containerRef,                           // Container element ref
  sizeRef: leftWidth,                     // Reactive size ref
  min: 250,                               // Min left width
  minOther: 200                           // Min right width
})

function startDrag(e) {
  horizontalResizer.start(e)              // Attach move/up listeners
}

onUnmounted(() => {
  horizontalResizer.destroy()             // Cleanup listeners
})

useConnectionTree(connRef?: Ref<Connection | null>)

{
  nodes: Ref<TreeNode[]>,                 // Cached tree nodes
  load: (conn) => Promise<void>,          // Manually load tree
  getTableNames: () => string[],          // Extract table names
  getColumns: (table) => string[],        // Extract column names
  cache: Record<string, TreeNode[]>       // Global cache (reactive)
}

const { nodes, load } = useConnectionTree()

await load(connection)                    // Fetch tree from backend
const tables = getTableNames()            // ['users', 'posts', 'comments']
const cols = getColumns('users')          // ['id', 'name', 'email']

const NODE_TYPE_ENUM_MAP = {
  1: 'database',
  2: 'table',
  3: 'column',
  4: 'schema',
  5: 'view',
  6: 'action',
  7: 'collection',
  8: 'key'
}

// Listen for connection creation
Events.On('connection:created', (event) => {
  const conn = event.data.connection
  connections.value.push(conn)            // Add to list immediately
})

// Listen for connection deletion
Events.On('connection:deleted', (event) => {
  const id = event.data.id
  connections.value = connections.value.filter(c => c.id !== id)
})

const routes = [
  { path: '/',            component: Home },
  { path: '/connections', component: Connections },
  { path: '/plugins',     component: Plugins }
]

<div class="flex flex-col h-screen bg-white">
  <div class="flex-1 min-h-0 overflow-hidden">
    <!-- Flexbox layout with overflow control -->
  </div>
</div>

const themeOverrides = {
  common: {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontFamilyMono: '"JetBrains Mono", ui-monospace, monospace'
  }
}

func (s *ConnectionService) ListConnections(ctx context.Context) ([]Connection, error)

export function ListConnections() {
  return window.wails.Call.ByName('ConnectionService.ListConnections')
}

import { ListConnections } from '@/bindings/github.com/felixdotgo/querybox/services/connectionservice'

const connections = await ListConnections()

import { Events } from '@wailsio/runtime'

const offAppLog = Events.On('app:log', (event) => {
  const entry = event.data
  logs.value.push(entry)
})

onUnmounted(() => {
  offAppLog()                             // Unsubscribe on component unmount
})

application.RegisterEvent[services.LogEntry]("app:log")

wails dev

wails build

<AppMenuBar v-if="!isMac" ref="menuBarRef" @toggle-logs="toggleFooter" />

go func() {
    time.Sleep(time.Second * 1)           // Delay 1 second
    app.ConnectionsWindow = app.NewConnectionsWindow()
    app.PluginsWindow = app.NewPluginsWindow()
}()

const treeCache: Record<string, TreeNode[]> = reactive({})

if (treeCache[conn.id]) {
  return                                  // Skip fetch if already loaded
}

const offAppLog = Events.On('app:log', handler)

onUnmounted(() => {
  offAppLog()                             // Prevent memory leaks
})