openrune 1.1.2 → 2.0.0

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

@@ -1,151 +0,0 @@
-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="absolute inset-0 z-10" style={{ display: showTerminal ? 'block' : 'none' }}>
-            <TerminalPanel
-              cwd={chat.runeInfo.folderPath}
-              autoCommand={channelCommand}
-              visible={showTerminal}
-            />
-          </div>
-        )}
-        {/* Chat view */}
-        <div className="absolute inset-0 flex flex-col" style={{ display: showTerminal ? 'none' : 'flex' }}>
-          <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

@@ -1,26 +0,0 @@
-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}
-    />
-  )
-}

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

@@ -1,79 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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[]
-}