openrune 0.1.0

package/renderer/src/App.tsx

@@ -0,0 +1,43 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Bot } from 'lucide-react'
+import { ChatPanel } from './features/chat/chat-panel'
+import { useChat } from './features/chat/use-chat'
+
+export function App() {
+  const chat = useChat()
+  const [showTerminal, setShowTerminal] = useState(true)
+
+  // Auto-switch to chat when MCP channel connects
+  useEffect(() => {
+    const handler = (data: { port: number; connected: boolean }) => {
+      if (data.connected) setShowTerminal(false)
+    }
+    window.rune.on('rune:channelStatus', handler)
+    return () => window.rune.off('rune:channelStatus', handler)
+  }, [])
+
+  const toggleTerminal = useCallback(() => setShowTerminal(prev => !prev), [])
+
+  if (!chat.runeInfo) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background text-foreground">
+        <div className="flex flex-col items-center gap-4">
+          <Bot className="h-12 w-12 text-accent" />
+          <p className="text-sm text-muted">Open a .rune file to get started</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-screen bg-background text-foreground text-[13px] overflow-hidden">
+      <div className="flex-1 overflow-hidden">
+        <ChatPanel
+          chat={chat}
+          showTerminal={showTerminal}
+          onToggleTerminal={toggleTerminal}
+        />
+      </div>
+    </div>
+  )
+}

package/renderer/src/features/chat/activity-block.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { Brain, Terminal, FileText, Pencil, Search, FolderOpen, ChevronRight, ChevronDown, Code, FileCode } from 'lucide-react'
+import type { ContentBlock } from './types'
+
+const TOOL_ICONS: Record<string, typeof Terminal> = {
+  Bash: Terminal,
+  Read: FileText,
+  Write: FileCode,
+  Edit: Pencil,
+  Grep: Search,
+  Glob: FolderOpen,
+  Task: Code,
+}
+
+function getToolIcon(tool?: string) {
+  if (!tool) return Terminal
+  return TOOL_ICONS[tool] || Terminal
+}
+
+function formatArgs(args?: Record<string, unknown>): string {
+  if (!args) return ''
+  const entries = Object.entries(args)
+  if (entries.length === 0) return ''
+  return entries
+    .map(([k, v]) => {
+      const val = typeof v === 'string' ? v : JSON.stringify(v)
+      const truncated = val.length > 120 ? val.slice(0, 120) + '...' : val
+      return `${k}: ${truncated}`
+    })
+    .join('\n')
+}
+
+function ThinkingBlock({ block }: { block: ContentBlock }) {
+  const [expanded, setExpanded] = useState(false)
+  const hasContent = block.content && block.content.trim().length > 0
+  const preview = block.content
+    ? block.content.length > 80
+      ? block.content.slice(0, 80) + '...'
+      : block.content
+    : ''
+
+  return (
+    <div className="activity-block activity-thinking">
+      <button
+        className="activity-header"
+        onClick={() => hasContent && setExpanded(!expanded)}
+      >
+        <Brain className="activity-icon h-3.5 w-3.5 text-purple-400 shrink-0" />
+        <span className="activity-label text-purple-400">Thinking</span>
+        {!expanded && preview && (
+          <span className="activity-preview">{preview}</span>
+        )}
+        {hasContent && (
+          expanded
+            ? <ChevronDown className="h-3 w-3 text-muted shrink-0 ml-auto" />
+            : <ChevronRight className="h-3 w-3 text-muted shrink-0 ml-auto" />
+        )}
+      </button>
+      {expanded && hasContent && (
+        <div className="activity-body activity-thinking-body">
+          {block.content}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ToolUseBlock({ block }: { block: ContentBlock }) {
+  const [expanded, setExpanded] = useState(false)
+  const Icon = getToolIcon(block.tool)
+  const argsText = formatArgs(block.args)
+
+  return (
+    <div className="activity-block activity-tool-use">
+      <button
+        className="activity-header"
+        onClick={() => argsText && setExpanded(!expanded)}
+      >
+        <Icon className="activity-icon h-3.5 w-3.5 text-accent shrink-0" />
+        <span className="activity-label text-accent">{block.tool || 'Tool'}</span>
+        {!expanded && block.args && (
+          <span className="activity-preview">
+            {Object.entries(block.args).map(([k, v]) => {
+              const val = typeof v === 'string' ? v : JSON.stringify(v)
+              return val.length > 60 ? val.slice(0, 60) + '...' : val
+            }).join(' ')}
+          </span>
+        )}
+        {argsText && (
+          expanded
+            ? <ChevronDown className="h-3 w-3 text-muted shrink-0 ml-auto" />
+            : <ChevronRight className="h-3 w-3 text-muted shrink-0 ml-auto" />
+        )}
+      </button>
+      {expanded && argsText && (
+        <div className="activity-body">
+          <pre className="activity-args">{argsText}</pre>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ToolResultBlock({ block }: { block: ContentBlock }) {
+  const [expanded, setExpanded] = useState(false)
+  const Icon = getToolIcon(block.tool)
+  const hasContent = block.content && block.content.trim().length > 0
+  const preview = block.content
+    ? block.content.length > 100
+      ? block.content.slice(0, 100) + '...'
+      : block.content
+    : ''
+
+  return (
+    <div className="activity-block activity-tool-result">
+      <button
+        className="activity-header"
+        onClick={() => hasContent && setExpanded(!expanded)}
+      >
+        <Icon className="activity-icon h-3.5 w-3.5 text-emerald-400 shrink-0" />
+        <span className="activity-label text-emerald-400">{block.tool || 'Result'}</span>
+        <span className="activity-result-badge">done</span>
+        {!expanded && preview && (
+          <span className="activity-preview">{preview}</span>
+        )}
+        {hasContent && (
+          expanded
+            ? <ChevronDown className="h-3 w-3 text-muted shrink-0 ml-auto" />
+            : <ChevronRight className="h-3 w-3 text-muted shrink-0 ml-auto" />
+        )}
+      </button>
+      {expanded && hasContent && (
+        <div className="activity-body">
+          <pre className="activity-result-content">{block.content}</pre>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ActivityBlock({ block }: { block: ContentBlock }) {
+  switch (block.type) {
+    case 'thinking':
+      return <ThinkingBlock block={block} />
+    case 'tool_use':
+      return <ToolUseBlock block={block} />
+    case 'tool_result':
+      return <ToolResultBlock block={block} />
+    default:
+      return null
+  }
+}

package/renderer/src/features/chat/chat-header.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { Trash2, SquareTerminal } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useIPCOn } from '@/hooks/use-ipc'
+
+interface ChatHeaderProps {
+  name: string
+  role?: string
+  port: number
+  showTerminal?: boolean
+  onClearHistory: () => void
+  onToggleTerminal?: () => void
+}
+
+export function ChatHeader({ name, role, port, showTerminal, onClearHistory, onToggleTerminal }: ChatHeaderProps) {
+  const [connected, setConnected] = useState(false)
+  useIPCOn('rune:channelStatus', (data: { port: number; connected: boolean }) => {
+    if (data.port === port) setConnected(data.connected)
+  })
+
+  const dotColor = connected ? 'bg-accent' : 'bg-accent-red'
+
+  return (
+    <div
+      className="flex items-center justify-between px-4 h-[40px] border-b border-border shrink-0"
+      style={{ WebkitAppRegion: 'drag' as any }}
+    >
+      <div className="flex items-center gap-2" style={{ marginLeft: process.platform === 'darwin' ? 68 : 0 }}>
+        <span className="text-[13px] font-medium text-foreground">{name}</span>
+        <div className={cn('w-2 h-2 rounded-full', dotColor, !connected && 'animate-pulse')} />
+      </div>
+
+      <div className="flex items-center gap-1.5" style={{ WebkitAppRegion: 'no-drag' as any }}>
+        {onToggleTerminal && (
+          <button
+            className={cn(
+              'inline-flex items-center justify-center rounded-md h-7 w-7 transition-colors',
+              showTerminal
+                ? 'text-accent bg-accent/10'
+                : 'text-muted hover:text-foreground hover:bg-border'
+            )}
+            title="Toggle terminal"
+            onClick={() => onToggleTerminal?.()}
+          >
+            <SquareTerminal className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <button
+          className="inline-flex items-center justify-center rounded-md h-7 w-7 text-muted hover:text-foreground hover:bg-border transition-colors"
+          title="Clear history"
+          onClick={onClearHistory}
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  )
+}

package/renderer/src/features/chat/chat-input.tsx

@@ -0,0 +1,190 @@
+import { useRef, useCallback, useState, type DragEvent } from 'react'
+import { ArrowUp, Square, Paperclip, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ChatInputProps {
+  isStreaming: boolean
+  disabled?: boolean
+  onSend: (content: string, files?: string[]) => void
+  onCancel: () => void
+}
+
+export function ChatInput({ isStreaming, disabled, onSend, onCancel }: ChatInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [attachedFiles, setAttachedFiles] = useState<string[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
+
+  const handleSend = useCallback(() => {
+    if (disabled) return
+    const content = textareaRef.current?.value.trim()
+    if (!content && attachedFiles.length === 0) return
+    onSend(content || '', attachedFiles.length > 0 ? attachedFiles : undefined)
+    if (textareaRef.current) {
+      textareaRef.current.value = ''
+      textareaRef.current.style.height = 'auto'
+    }
+    setAttachedFiles([])
+  }, [disabled, onSend, attachedFiles])
+
+  const handleSendOrCancel = useCallback(() => {
+    const hasContent = textareaRef.current?.value.trim() || attachedFiles.length > 0
+    // If streaming but user typed something, send it (will auto-cancel current stream)
+    // If streaming with empty input, just cancel
+    if (isStreaming && !hasContent) onCancel()
+    else handleSend()
+  }, [isStreaming, onCancel, handleSend, attachedFiles.length])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault()
+      handleSend()
+    }
+  }, [handleSend])
+
+  const handleInput = useCallback(() => {
+    const el = textareaRef.current
+    if (el) {
+      el.style.height = 'auto'
+      el.style.height = `${Math.min(el.scrollHeight, 120)}px`
+    }
+  }, [])
+
+  const handleFileClick = useCallback(() => {
+    fileInputRef.current?.click()
+  }, [])
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files) return
+    const paths: string[] = []
+    for (let i = 0; i < files.length; i++) {
+      const f = files[i] as any
+      if (f.path) paths.push(f.path)
+    }
+    if (paths.length > 0) {
+      setAttachedFiles(prev => [...prev, ...paths])
+    }
+    // Reset input so same file can be re-selected
+    e.target.value = ''
+  }, [])
+
+  const removeFile = useCallback((index: number) => {
+    setAttachedFiles(prev => prev.filter((_, i) => i !== index))
+  }, [])
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    // Only set false if leaving the container (not entering a child)
+    if (e.currentTarget && !e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false)
+    }
+  }, [])
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(false)
+    const files = e.dataTransfer?.files
+    if (!files || files.length === 0) return
+    const paths: string[] = []
+    for (let i = 0; i < files.length; i++) {
+      const f = files[i] as any
+      if (f.path) paths.push(f.path)
+    }
+    if (paths.length > 0) {
+      setAttachedFiles(prev => [...prev, ...paths])
+    }
+  }, [])
+
+  const getFileName = (filePath: string) => {
+    return filePath.split('/').pop() || filePath
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-2 px-4 py-3.5 border-t shrink-0 relative transition-colors',
+        isDragOver ? 'border-accent bg-accent/5' : 'border-border'
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {isDragOver && (
+        <div className="absolute inset-0 flex items-center justify-center bg-accent/10 border-2 border-dashed border-accent rounded-lg z-10 pointer-events-none">
+          <span className="text-[12px] font-medium text-accent">Drop files here</span>
+        </div>
+      )}
+      {attachedFiles.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {attachedFiles.map((file, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-1.5 bg-muted/30 border border-border rounded-lg px-2.5 py-1.5 text-[11px] text-muted-foreground max-w-[200px]"
+            >
+              <Paperclip className="h-3 w-3 shrink-0 opacity-50" />
+              <span className="truncate">{getFileName(file)}</span>
+              <button
+                onClick={() => removeFile(i)}
+                className="shrink-0 hover:text-foreground transition-colors"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="flex gap-2.5 items-end">
+        <button
+          className="inline-flex items-center justify-center rounded-xl h-[38px] w-[38px] shrink-0 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted/30"
+          onClick={handleFileClick}
+          title="Attach file"
+        >
+          <Paperclip className="h-4 w-4" />
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={handleFileChange}
+        />
+        <textarea
+          ref={textareaRef}
+          className={cn(
+            'flex-1 rounded-xl border border-input bg-transparent px-3.5 py-2.5 text-[13px] text-foreground resize-none outline-none min-h-[42px] max-h-[120px] leading-[1.5] transition-colors placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+          placeholder={disabled ? 'Waiting for channel connection...' : 'Type a message...'}
+          rows={1}
+          spellCheck={false}
+          disabled={disabled}
+          onKeyDown={handleKeyDown}
+          onInput={handleInput}
+        />
+        <button
+          className={cn(
+            'inline-flex items-center justify-center rounded-xl h-[38px] w-[38px] shrink-0 transition-colors',
+            disabled
+              ? 'bg-muted text-muted-foreground cursor-not-allowed'
+              : isStreaming
+                ? 'bg-accent-red text-white hover:bg-accent-red/90'
+                : 'bg-accent text-accent-foreground hover:bg-accent/90'
+          )}
+          onClick={handleSendOrCancel}
+          disabled={disabled}
+        >
+          {isStreaming ? <Square className="h-3.5 w-3.5" /> : <ArrowUp className="h-4 w-4 stroke-[2.5]" />}
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,150 @@
+import { useEffect, useState, useCallback } from 'react'
+import { Toaster, toast } from 'sonner'
+import { ShieldAlert } from 'lucide-react'
+import { ChatHeader } from './chat-header'
+import { MessageList } from './message-list'
+import { ChatInput } from './chat-input'
+import { TerminalPanel } from '../terminal/terminal-panel'
+import type { useChat } from './use-chat'
+
+interface PermissionPrompt {
+  ptyId: string
+  context: string
+}
+
+interface ChatPanelProps {
+  chat: ReturnType<typeof useChat>
+  showTerminal?: boolean
+  onToggleTerminal?: () => void
+}
+
+export function ChatPanel({ chat, showTerminal, onToggleTerminal }: ChatPanelProps) {
+  const [permissionPrompt, setPermissionPrompt] = useState<PermissionPrompt | null>(null)
+
+  // Listen for permission prompts
+  useEffect(() => {
+    const handler = (data: { id: string; context: string }) => {
+      setPermissionPrompt({ ptyId: data.id, context: data.context || '' })
+    }
+    window.rune.on('rune:permissionNeeded', handler)
+    return () => window.rune.off('rune:permissionNeeded', handler)
+  }, [])
+
+  const handlePermissionResponse = useCallback((response: 'allow' | 'always' | 'deny') => {
+    if (!permissionPrompt) return
+    window.rune.send('rune:permissionRespond', { ptyId: permissionPrompt.ptyId, allow: response !== 'deny', response })
+    setPermissionPrompt(null)
+  }, [permissionPrompt])
+
+  // Toast notifications for channel status
+  useEffect(() => {
+    const handler = (data: { port: number; connected: boolean }) => {
+      if (data.connected) {
+        toast.success(`Connected to channel :${data.port}`, { duration: 3000 })
+      } else {
+        toast.error(`Disconnected from channel :${data.port}`, { duration: 4000 })
+      }
+    }
+    window.rune.on('rune:channelStatus', handler)
+    return () => window.rune.off('rune:channelStatus', handler)
+  }, [])
+
+  const channelCommand = chat.runeInfo
+    ? `RUNE_CHANNEL_PORT=${chat.runeInfo.port} RUNE_FOLDER_PATH=${chat.runeInfo.folderPath} claude --permission-mode auto --enable-auto-mode --dangerously-load-development-channels server:rune-channel`
+    : ''
+
+  return (
+    <div className="flex flex-col h-full bg-background text-foreground relative">
+      <ChatHeader
+        name={chat.runeInfo?.name || 'Rune'}
+        role={chat.runeInfo?.role}
+        port={chat.runeInfo?.port || 0}
+        showTerminal={showTerminal}
+        onClearHistory={chat.clearHistory}
+        onToggleTerminal={onToggleTerminal}
+      />
+      <div className="flex-1 overflow-hidden relative">
+        {/* Terminal */}
+        {chat.runeInfo && (
+          <div className={showTerminal ? 'absolute inset-0' : 'absolute inset-0 invisible'}>
+            <TerminalPanel
+              cwd={chat.runeInfo.folderPath}
+              autoCommand={channelCommand}
+            />
+          </div>
+        )}
+        {/* Chat view */}
+        <div className={showTerminal ? 'absolute inset-0 invisible' : 'absolute inset-0 flex flex-col'}>
+          <MessageList
+            messages={chat.messages}
+            isStreaming={chat.isStreaming}
+            streamingDisplayText={chat.streamingDisplayText}
+            streamingActivities={chat.streamingActivities}
+            port={chat.runeInfo?.port}
+            folderPath={chat.runeInfo?.folderPath}
+            connected={chat.connected}
+            visible={!showTerminal}
+          />
+
+          {/* Permission prompt banner */}
+          {permissionPrompt && !showTerminal && (
+            <div className="mx-3 mb-2 rounded-lg border border-amber-500/30 bg-amber-500/10 overflow-hidden">
+              <div className="flex items-center gap-2 px-3 py-2">
+                <ShieldAlert className="h-4 w-4 text-amber-400 shrink-0" />
+                <span className="text-[12px] font-medium text-amber-300">Permission Required</span>
+              </div>
+              {permissionPrompt.context && (
+                <pre className="px-3 pb-2 text-[11px] text-muted leading-relaxed max-h-[160px] overflow-y-auto whitespace-pre-wrap break-words">
+                  {permissionPrompt.context.split('\n').slice(-12).join('\n')}
+                </pre>
+              )}
+              <div className="flex gap-2 px-3 pb-3">
+                <button
+                  onClick={() => handlePermissionResponse('allow')}
+                  className="flex-1 px-3 py-1.5 rounded-md text-[12px] font-medium bg-accent text-white hover:brightness-110 transition-all"
+                >
+                  Allow
+                </button>
+                <button
+                  onClick={() => handlePermissionResponse('always')}
+                  className="flex-1 px-3 py-1.5 rounded-md text-[12px] font-medium bg-accent/20 text-accent hover:bg-accent/30 border border-accent/30 transition-all"
+                >
+                  Always
+                </button>
+                <button
+                  onClick={() => handlePermissionResponse('deny')}
+                  className="px-3 py-1.5 rounded-md text-[12px] font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 transition-all"
+                >
+                  Deny
+                </button>
+              </div>
+            </div>
+          )}
+
+          <Toaster
+            position="top-center"
+            style={{ top: '56px' }}
+            toastOptions={{
+              style: {
+                fontSize: '12px',
+                padding: '8px 14px',
+                background: 'oklch(0.25 0.065 300)',
+                color: 'oklch(0.93 0.015 300)',
+                border: '1px solid oklch(1 0.03 300 / 10%)',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+              },
+            }}
+          />
+          {(chat.messages.length > 0 || chat.isStreaming) && (
+            <ChatInput
+              isStreaming={chat.isStreaming}
+              disabled={!chat.connected}
+              onSend={chat.sendMessage}
+              onCancel={chat.cancelStream}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/renderer/src/features/chat/markdown-renderer.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react'
+import { cn } from '@/lib/utils'
+import { renderMarkdown } from '@/lib/markdown'
+
+interface MarkdownRendererProps {
+  text: string
+  isStreaming?: boolean
+}
+
+export function MarkdownRenderer({ text, isStreaming }: MarkdownRendererProps) {
+  const html = useMemo(() => {
+    if (!text) return ''
+    return renderMarkdown(text)
+  }, [text])
+
+  return (
+    <div
+      className={cn(
+        'msg-content rendered leading-[1.65] break-words text-[13px]',
+        isStreaming && 'streaming',
+        isStreaming && !text && 'empty-streaming'
+      )}
+      dangerouslySetInnerHTML={text ? { __html: html } : undefined}
+    />
+  )
+}