openrune 0.1.0

package/renderer/src/features/chat/message-bubble.tsx

@@ -0,0 +1,79 @@
+import { Paperclip, FileText } from 'lucide-react'
+import { MarkdownRenderer } from './markdown-renderer'
+
+interface MessageBubbleProps {
+  role: 'user' | 'assistant' | 'system'
+  text: string
+  files?: string[]
+  isStreaming?: boolean
+}
+
+const IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.svg'])
+
+function isImage(filePath: string): boolean {
+  const ext = filePath.slice(filePath.lastIndexOf('.')).toLowerCase()
+  return IMAGE_EXTS.has(ext)
+}
+
+function getFileName(filePath: string) {
+  return filePath.split('/').pop() || filePath
+}
+
+function FileAttachment({ file }: { file: string }) {
+  if (isImage(file)) {
+    return (
+      <div className="rounded-lg overflow-hidden border border-accent/10 max-w-[200px]">
+        <img
+          src={`file://${file}`}
+          alt={getFileName(file)}
+          className="max-w-full max-h-[160px] object-contain bg-black/20"
+          draggable={false}
+        />
+        <div className="flex items-center gap-1 px-2 py-1 text-[10px] text-muted-foreground truncate">
+          <Paperclip className="h-2.5 w-2.5 shrink-0 opacity-50" />
+          {getFileName(file)}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1 bg-accent/10 rounded-md px-2 py-0.5 text-[11px] text-accent">
+      <FileText className="h-2.5 w-2.5" />
+      {getFileName(file)}
+    </span>
+  )
+}
+
+export function MessageBubble({ role, text, files, isStreaming }: MessageBubbleProps) {
+  if (role === 'system') {
+    return (
+      <div className="flex justify-center">
+        <span className="text-[11px] text-muted/50">{text}</span>
+      </div>
+    )
+  }
+
+  if (role === 'user') {
+    return (
+      <div className="flex justify-end">
+        <div className="leading-[1.7] whitespace-pre-wrap break-words text-[13px] bg-user-bg border border-accent/15 rounded-2xl rounded-br-md px-4 py-3 max-w-[85%]">
+          {files && files.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-2">
+              {files.map((file, i) => (
+                <FileAttachment key={i} file={file} />
+              ))}
+            </div>
+          )}
+          {text}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col">
+      <MarkdownRenderer text={text} isStreaming={isStreaming} />
+    </div>
+  )
+}

package/renderer/src/features/chat/message-list.tsx

@@ -0,0 +1,178 @@
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react'
+import { Zap, Loader2 } from 'lucide-react'
+import { MessageBubble } from './message-bubble'
+import { ActivityBlock } from './activity-block'
+import { useIPCOn } from '@/hooks/use-ipc'
+import type { ChatMessage, ContentBlock } from './types'
+
+interface ToolActivity {
+  tool: string
+  status: 'running' | 'done'
+  preview?: string
+  ts: number
+}
+
+interface MessageListProps {
+  messages: ChatMessage[]
+  isStreaming: boolean
+  streamingDisplayText: string
+  streamingActivities?: ContentBlock[]
+  port?: number
+  folderPath?: string
+  connected?: boolean
+  visible?: boolean
+}
+
+export function MessageList({ messages, isStreaming, streamingDisplayText, streamingActivities, port, folderPath, connected = false, visible }: MessageListProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const shouldAutoScrollRef = useRef(true)
+  const [toolActivities, setToolActivities] = useState<ToolActivity[]>([])
+
+  useIPCOn('rune:toolActivity', (data: { port: number; type: 'tool_start' | 'tool_end'; tool: string; preview?: string }) => {
+    if (data.port !== port) return
+    if (data.type === 'tool_start') {
+      setToolActivities(prev => [...prev.slice(-4), { tool: data.tool, status: 'running', ts: Date.now() }])
+    } else {
+      setToolActivities(prev => {
+        const idx = prev.findIndex(a => a.tool === data.tool && a.status === 'running')
+        if (idx === -1) return prev
+        const updated = [...prev]
+        updated[idx] = { ...updated[idx], status: 'done', preview: data.preview }
+        return updated
+      })
+    }
+  })
+
+  // Clear old done activities
+  useEffect(() => {
+    if (toolActivities.length === 0) return
+    const timer = setInterval(() => {
+      const cutoff = Date.now() - 5000
+      setToolActivities(prev => prev.filter(a => a.status === 'running' || a.ts > cutoff))
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [toolActivities.length])
+
+  const handleScroll = useCallback(() => {
+    const el = containerRef.current
+    if (!el) return
+    shouldAutoScrollRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80
+  }, [])
+
+  useEffect(() => {
+    if (!shouldAutoScrollRef.current) return
+    requestAnimationFrame(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'instant' })
+    })
+  }, [messages.length, streamingDisplayText, streamingActivities?.length])
+
+  useEffect(() => {
+    shouldAutoScrollRef.current = true
+    requestAnimationFrame(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'instant' })
+    })
+  }, [messages.length])
+
+  useEffect(() => {
+    if (visible === false) return
+    shouldAutoScrollRef.current = true
+    requestAnimationFrame(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'instant' })
+    })
+  }, [visible])
+
+  const loadingMessages = useMemo(() => [
+    'Preparing your assistant...',
+    'Waking up the agent...',
+    'Getting things ready...',
+    'Waiting for assistant response...',
+    'Setting up the workspace...',
+    'Almost there...',
+    'Connecting the dots...',
+    'Brewing some intelligence...',
+  ], [])
+
+  const [loadingMsgIdx, setLoadingMsgIdx] = useState(() => Math.floor(Math.random() * 8))
+
+  useEffect(() => {
+    if (messages.length > 0 || isStreaming) return
+    const timer = setInterval(() => {
+      setLoadingMsgIdx(prev => {
+        let next: number
+        do { next = Math.floor(Math.random() * loadingMessages.length) } while (next === prev)
+        return next
+      })
+    }, 3000)
+    return () => clearInterval(timer)
+  }, [messages.length, isStreaming, loadingMessages])
+
+  if (messages.length === 0 && !isStreaming) {
+    return (
+      <div ref={containerRef} className="flex-1 overflow-y-auto flex flex-col items-center justify-center gap-3 px-10">
+        <Loader2 className="h-6 w-6 text-muted animate-spin" />
+        <p className="text-[12px] text-muted transition-opacity duration-500">
+          {!connected ? 'Connecting to channel...' : loadingMessages[loadingMsgIdx]}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className="flex-1 overflow-y-auto px-5 py-5 flex flex-col gap-5 min-h-0" onScroll={handleScroll}>
+      {!connected && (
+        <div className="flex items-center gap-2 px-3 py-2 bg-accent-red/8 border border-accent-red/20 rounded-lg text-[12px] text-accent-red shrink-0">
+          <Zap className="h-3.5 w-3.5 shrink-0" />
+          <span>Channel disconnected — waiting for Claude CLI on port :{port}</span>
+        </div>
+      )}
+      {messages.map((msg, i) => {
+        const isStreamingMsg = isStreaming && msg.role === 'assistant' && i === messages.length - 1
+        return (
+          <div key={i} className="flex flex-col gap-1.5">
+            {/* Show activity blocks for completed messages */}
+            {!isStreamingMsg && msg.blocks && msg.blocks.length > 0 && (
+              <div className="flex flex-col gap-1">
+                {msg.blocks.map((block, bi) => (
+                  <ActivityBlock key={`${block.type}-${block.ts}-${bi}`} block={block} />
+                ))}
+              </div>
+            )}
+            {/* Show streaming activity blocks */}
+            {isStreamingMsg && streamingActivities && streamingActivities.length > 0 && (
+              <div className="flex flex-col gap-1">
+                {streamingActivities.map((block, bi) => (
+                  <ActivityBlock key={`${block.type}-${block.ts}-${bi}`} block={block} />
+                ))}
+              </div>
+            )}
+            <MessageBubble
+              role={msg.role}
+              text={isStreamingMsg ? streamingDisplayText : msg.text}
+              files={msg.files}
+              isStreaming={isStreamingMsg}
+            />
+          </div>
+        )
+      })}
+      {toolActivities.length > 0 && (
+        <div className="flex flex-col gap-1 px-1">
+          {toolActivities.map((activity, i) => (
+            <div key={`${activity.tool}-${activity.ts}-${i}`} className="flex items-center gap-2 text-[11px] text-muted animate-in fade-in duration-200">
+              {activity.status === 'running' ? (
+                <Loader2 className="h-3 w-3 text-accent animate-spin shrink-0" />
+              ) : (
+                <div className="h-3 w-3 flex items-center justify-center shrink-0">
+                  <div className="h-1.5 w-1.5 rounded-full bg-accent/50" />
+                </div>
+              )}
+              <span className={activity.status === 'running' ? 'text-accent' : 'text-muted'}>{activity.tool}</span>
+              {activity.preview && <span className="text-muted truncate max-w-[280px]">— {activity.preview}</span>}
+            </div>
+          ))}
+        </div>
+      )}
+      <div ref={bottomRef} />
+    </div>
+  )
+}

package/renderer/src/features/chat/types.ts

@@ -0,0 +1,32 @@
+export interface ContentBlock {
+  type: 'thinking' | 'tool_use' | 'tool_result'
+  content?: string
+  tool?: string
+  args?: Record<string, unknown>
+  ts: number
+}
+
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system'
+  text: string
+  files?: string[]
+  blocks?: ContentBlock[]
+}
+
+export interface RuneInfo {
+  filePath: string
+  folderPath: string
+  port: number
+  name: string
+  role: string
+  icon?: string
+  history: { role: 'user' | 'assistant'; text: string; ts: number }[]
+}
+
+export interface ChatState {
+  messages: ChatMessage[]
+  isStreaming: boolean
+  shownText: string
+  typeQueue: string
+  activityBlocks: ContentBlock[]
+}

package/renderer/src/features/chat/use-chat.ts

@@ -0,0 +1,251 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { useIPCOn, useIPCSend } from '@/hooks/use-ipc'
+import type { ChatState, ChatMessage, ContentBlock, RuneInfo } from './types'
+
+export function useChat() {
+  const [runeInfo, setRuneInfo] = useState<RuneInfo | null>(null)
+  const [connected, setConnected] = useState(false)
+  const [state, setState] = useState<ChatState>({
+    messages: [],
+    isStreaming: false,
+    shownText: '',
+    typeQueue: '',
+    activityBlocks: [],
+  })
+  const typeTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const send = useIPCSend()
+
+  // Track channel connection status
+  useIPCOn('rune:channelStatus', (data: { port: number; connected: boolean }) => {
+    if (runeInfo && data.port === runeInfo.port) setConnected(data.connected)
+  })
+
+  // Initialize from main process
+  useIPCOn('rune:init', (data: RuneInfo) => {
+    setRuneInfo(data)
+    // Restore history
+    if (data.history && data.history.length > 0) {
+      setState(prev => ({
+        ...prev,
+        messages: data.history.map(h => ({ role: h.role, text: h.text })),
+      }))
+    }
+  })
+
+  // Typewriter engine
+  const startTyping = useCallback(() => {
+    if (typeTimerRef.current) return
+    typeTimerRef.current = setInterval(() => {
+      setState(prev => {
+        if (!prev.typeQueue) {
+          if (typeTimerRef.current) {
+            clearInterval(typeTimerRef.current)
+            typeTimerRef.current = null
+          }
+          return prev
+        }
+        const batch = Math.min(prev.typeQueue.length, 4)
+        return {
+          ...prev,
+          shownText: prev.shownText + prev.typeQueue.slice(0, batch),
+          typeQueue: prev.typeQueue.slice(batch),
+        }
+      })
+    }, 10)
+  }, [])
+
+  const appendChunk = useCallback((text: string) => {
+    setState(prev => ({ ...prev, typeQueue: prev.typeQueue + text }))
+    startTyping()
+  }, [startTyping])
+
+  const finishStream = useCallback(() => {
+    if (typeTimerRef.current) {
+      clearInterval(typeTimerRef.current)
+      typeTimerRef.current = null
+    }
+    setState(prev => {
+      const fullText = prev.shownText + prev.typeQueue
+      const messages = [...prev.messages]
+      if (messages.length > 0 && messages[messages.length - 1].role === 'assistant') {
+        messages[messages.length - 1] = {
+          role: 'assistant',
+          text: fullText,
+          blocks: prev.activityBlocks.length > 0 ? [...prev.activityBlocks] : undefined,
+        }
+      }
+      return { ...prev, messages, isStreaming: false, shownText: '', typeQueue: '', activityBlocks: [] }
+    })
+  }, [])
+
+  // IPC event listeners
+  useIPCOn('rune:streamStart', () => {
+    setState(prev => ({
+      ...prev,
+      isStreaming: true,
+      shownText: '',
+      typeQueue: '',
+      activityBlocks: [],
+      messages: [...prev.messages, { role: 'assistant', text: '' }],
+    }))
+  })
+
+  useIPCOn('rune:activity', (data: { port: number; activityType: string; content?: string; tool?: string; args?: Record<string, unknown> }) => {
+    const block: ContentBlock = {
+      type: data.activityType as ContentBlock['type'],
+      content: data.content,
+      tool: data.tool,
+      args: data.args,
+      ts: Date.now(),
+    }
+    setState(prev => ({
+      ...prev,
+      activityBlocks: [...prev.activityBlocks, block],
+    }))
+  })
+
+  useIPCOn('rune:streamChunk', (data: { text: string }) => {
+    const clean = data.text
+      .replace(/[\x00-\x08\x0e-\x1f\x7f]/g, '')
+      .replace(/\^[A-Z@\[\\\]\^_]/g, '')
+    appendChunk(clean)
+  })
+
+  useIPCOn('rune:streamEnd', () => {
+    finishStream()
+  })
+
+  useIPCOn('rune:streamError', (data: { error: string }) => {
+    if (typeTimerRef.current) {
+      clearInterval(typeTimerRef.current)
+      typeTimerRef.current = null
+    }
+    setState(prev => {
+      const messages = [...prev.messages]
+      if (messages.length > 0 && messages[messages.length - 1].role === 'assistant' && !messages[messages.length - 1].text) {
+        messages[messages.length - 1] = { role: 'assistant', text: data.error }
+      } else {
+        messages.push({ role: 'assistant', text: data.error })
+      }
+      return { ...prev, messages, isStreaming: false, shownText: '', typeQueue: '' }
+    })
+  })
+
+  useIPCOn('rune:pushMessage', (data: { text: string }) => {
+    setState(prev => ({
+      ...prev,
+      messages: [...prev.messages, { role: 'assistant', text: data.text }],
+    }))
+  })
+
+  // Handle Claude Code hook events
+  useIPCOn('rune:hook', (data: { event: string; tool_name?: string; tool_input?: Record<string, unknown>; tool_output?: string; prompt?: string; permission_prompt_reason?: string; notification_type?: string; message?: string }) => {
+    let block: ContentBlock | null = null
+
+    if (data.event === 'PreToolUse' && data.tool_name) {
+      block = {
+        type: 'tool_use',
+        tool: data.tool_name,
+        args: data.tool_input,
+        ts: Date.now(),
+      }
+    } else if (data.event === 'PostToolUse' && data.tool_name) {
+      block = {
+        type: 'tool_result',
+        tool: data.tool_name,
+        content: data.tool_output ? (data.tool_output.length > 500 ? data.tool_output.slice(0, 500) + '…' : data.tool_output) : 'done',
+        ts: Date.now(),
+      }
+    } else if (data.event === 'PermissionRequest') {
+      block = {
+        type: 'thinking',
+        content: `⚠️ Permission needed: ${data.tool_name} — ${data.permission_prompt_reason || ''}`,
+        tool: data.tool_name,
+        ts: Date.now(),
+      }
+    } else if (data.event === 'Notification') {
+      block = {
+        type: 'thinking',
+        content: `📢 ${data.message || data.notification_type || 'notification'}`,
+        ts: Date.now(),
+      }
+    }
+
+    if (block) {
+      setState(prev => ({
+        ...prev,
+        activityBlocks: [...prev.activityBlocks, block!],
+      }))
+    }
+  })
+
+  // Handle file rename
+  useIPCOn('rune:fileRenamed', (data: { name: string; newPath: string }) => {
+    setRuneInfo(prev => prev ? { ...prev, name: data.name, filePath: data.newPath } : prev)
+  })
+
+  // Actions
+  const sendMessage = useCallback((content: string, files?: string[]) => {
+    if (!runeInfo || (!content.trim() && (!files || files.length === 0))) return
+
+    // If streaming, cancel current response and finalize partial text
+    if (state.isStreaming) {
+      send('rune:cancelStream', { port: runeInfo.port })
+      finishStream()
+    }
+
+    // Build the actual content sent to channel: prepend file paths
+    let channelContent = content
+    if (files && files.length > 0) {
+      const fileSection = files.map(f => `[Attached file: ${f}]`).join('\n')
+      channelContent = fileSection + (content ? '\n\n' + content : '')
+    }
+
+    setState(prev => ({
+      ...prev,
+      messages: [...prev.messages, { role: 'user', text: content, files }],
+    }))
+    send('rune:sendMessage', { content: channelContent, port: runeInfo.port })
+  }, [runeInfo, state.isStreaming, send, finishStream])
+
+  const cancelStream = useCallback(() => {
+    send('rune:cancelStream', { port: runeInfo?.port })
+  }, [send, runeInfo?.port])
+
+  const clearHistory = useCallback(() => {
+    if (!runeInfo) return
+    setState(prev => ({ ...prev, messages: [], shownText: '', typeQueue: '' }))
+    send('rune:clearHistory', { port: runeInfo.port })
+  }, [runeInfo, send])
+
+  // Connect channel on mount
+  useEffect(() => {
+    if (runeInfo) {
+      send('rune:connectChannel', { port: runeInfo.port })
+    }
+  }, [runeInfo?.port]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      if (typeTimerRef.current) clearInterval(typeTimerRef.current)
+    }
+  }, [])
+
+  const getDisplayText = useCallback((): string => {
+    if (!state.isStreaming || !state.shownText) return ''
+    return state.shownText
+  }, [state.isStreaming, state.shownText])
+
+  return {
+    runeInfo,
+    connected,
+    messages: state.messages,
+    isStreaming: state.isStreaming,
+    streamingDisplayText: getDisplayText(),
+    streamingActivities: state.activityBlocks,
+    sendMessage,
+    cancelStream,
+    clearHistory,
+  }
+}

package/renderer/src/features/terminal/terminal-panel.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef } from 'react'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import '@xterm/xterm/css/xterm.css'
+
+interface TerminalPanelProps {
+  cwd?: string
+  autoCommand?: string
+}
+
+const THEME = {
+  background: '#18222d',
+  foreground: '#d4d8de',
+  cursor: '#d4d8de',
+  cursorAccent: '#18222d',
+  selectionBackground: '#2B5278',
+  black: '#1a2634',
+  red: '#ef5350',
+  green: '#26a69a',
+  yellow: '#ffb74d',
+  blue: '#42a5f5',
+  magenta: '#ab47bc',
+  cyan: '#26c6da',
+  white: '#d4d8de',
+  brightBlack: '#546e7a',
+  brightRed: '#ef5350',
+  brightGreen: '#26a69a',
+  brightYellow: '#ffb74d',
+  brightBlue: '#64b5f6',
+  brightMagenta: '#ab47bc',
+  brightCyan: '#26c6da',
+  brightWhite: '#ffffff',
+}
+
+export function TerminalPanel({ cwd, autoCommand }: TerminalPanelProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const termRef = useRef<Terminal | null>(null)
+  const fitRef = useRef<FitAddon | null>(null)
+  const ptyIdRef = useRef<string | null>(null)
+  const fittedRef = useRef(false)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const term = new Terminal({
+      theme: THEME,
+      fontSize: 13,
+      fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+      cursorBlink: true,
+      allowProposedApi: true,
+      scrollback: 5000,
+    })
+    const fit = new FitAddon()
+    term.loadAddon(fit)
+    term.open(containerRef.current)
+
+    termRef.current = term
+    fitRef.current = fit
+
+    const doFit = () => {
+      const el = containerRef.current
+      if (!el || el.clientWidth === 0 || el.clientHeight === 0) return
+      fit.fit()
+      if (!fittedRef.current) {
+        fittedRef.current = true
+        term.focus()
+      }
+      if (ptyIdRef.current) {
+        window.rune.send('terminal:resize', {
+          id: ptyIdRef.current,
+          cols: term.cols,
+          rows: term.rows,
+        })
+      }
+    }
+
+    // ResizeObserver fires on initial observe + any resize
+    const ro = new ResizeObserver(() => requestAnimationFrame(doFit))
+    ro.observe(containerRef.current)
+
+    window.rune.invoke('terminal:spawn', { cwd: cwd || undefined }).then(({ id }: { id: string }) => {
+      ptyIdRef.current = id
+      // Sync size now that pty is ready
+      window.rune.send('terminal:resize', { id, cols: term.cols, rows: term.rows })
+
+      const onOutput = (msg: { id: string; data: string }) => {
+        if (msg.id !== id) return
+        term.write(msg.data)
+      }
+      window.rune.on('terminal:output', onOutput)
+
+      const onExit = (msg: { id: string; exitCode: number }) => {
+        if (msg.id === id) {
+          term.write(`\r\n\x1b[90m[Process exited with code ${msg.exitCode}]\x1b[0m\r\n`)
+          ptyIdRef.current = null
+        }
+      }
+      window.rune.on('terminal:exit', onExit)
+
+      term.onData((data: string) => {
+        if (ptyIdRef.current) {
+          window.rune.send('terminal:input', { id: ptyIdRef.current, data })
+        }
+      })
+
+      if (autoCommand) {
+        setTimeout(() => {
+          window.rune.send('terminal:input', { id, data: autoCommand + '\n' })
+        }, 500)
+      }
+
+      ;(term as any).__cleanupOutput = onOutput
+      ;(term as any).__cleanupExit = onExit
+    })
+
+    return () => {
+      ro.disconnect()
+      if ((term as any).__cleanupOutput) window.rune.off('terminal:output', (term as any).__cleanupOutput)
+      if ((term as any).__cleanupExit) window.rune.off('terminal:exit', (term as any).__cleanupExit)
+      if (ptyIdRef.current) window.rune.send('terminal:kill', { id: ptyIdRef.current })
+      term.dispose()
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full w-full"
+      style={{ backgroundColor: '#18222d', padding: '4px 0 0 4px' }}
+    />
+  )
+}

package/renderer/src/global.d.ts

@@ -0,0 +1,29 @@
+type RuneSendChannel =
+  | 'rune:sendMessage' | 'rune:cancelStream' | 'rune:connectChannel' | 'rune:clearHistory'
+  | 'rune:permissionRespond'
+  | 'terminal:input' | 'terminal:resize' | 'terminal:kill'
+
+type RuneOnChannel =
+  | 'rune:init'
+  | 'rune:streamStart' | 'rune:streamChunk' | 'rune:streamStatus'
+  | 'rune:streamEnd' | 'rune:streamError'
+  | 'rune:pushMessage' | 'rune:channelStatus'
+  | 'rune:toolActivity'
+  | 'rune:activity'
+  | 'rune:permissionNeeded'
+  | 'terminal:output' | 'terminal:exit'
+
+type RuneInvokeChannel =
+  | 'terminal:spawn'
+  | 'rune:createFile'
+
+interface RuneAPI {
+  send(channel: RuneSendChannel, data?: unknown): void
+  on(channel: RuneOnChannel, callback: (data: any) => void): void
+  off(channel: RuneOnChannel, callback: (data: any) => void): void
+  invoke(channel: RuneInvokeChannel, data?: unknown): Promise<any>
+}
+
+interface Window {
+  rune: RuneAPI
+}