openrune 0.1.0

package/renderer/src/globals.css

@@ -0,0 +1,92 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.93 0.005 270);
+  --color-card: oklch(0.205 0 0);
+  --color-muted: oklch(0.455 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-border: oklch(1 0 0 / 10%);
+  --color-input: oklch(1 0 0 / 15%);
+  --color-ring: oklch(0.556 0 0);
+
+  --color-accent: oklch(0.777 0.152 181.912);
+  --color-accent-foreground: oklch(0.145 0 0);
+  --color-accent-red: oklch(0.704 0.191 22.216);
+
+  --color-background-secondary: oklch(0.17 0 0);
+  --color-background-tertiary: oklch(0.205 0 0);
+
+  --color-sidebar: oklch(0.17 0 0);
+  --color-sidebar-border: oklch(1 0 0 / 8%);
+  --color-surface: oklch(0.17 0 0);
+  --color-user-bg: oklch(0.19 0.02 181);
+}
+
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 8%); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 16%); }
+::-webkit-scrollbar-corner { background: transparent; }
+
+::selection { background: oklch(0.777 0.152 181.912 / 25%); color: inherit; }
+:focus-visible { outline: 2px solid oklch(0.556 0 0 / 50%); outline-offset: 2px; }
+
+.msg-content.rendered { white-space: normal; }
+.msg-content code { background: oklch(1 0 0 / 6%); border-radius: 4px; padding: 2px 6px; font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 0.875em; }
+.msg-content pre { background: oklch(0.13 0 0); border: 1px solid oklch(1 0 0 / 8%); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 8px 0; }
+.msg-content pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.6; }
+.msg-content h3 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
+.msg-content h4 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
+.msg-content h5 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
+.msg-content h6 { font-size: 12px; font-weight: 500; margin: 8px 0 2px; color: oklch(0.556 0 0); }
+.msg-content blockquote { border-left: 2px solid oklch(0.777 0.152 181.912 / 50%); padding: 4px 14px; margin: 8px 0; color: oklch(0.556 0 0); background: oklch(0.777 0.152 181.912 / 4%); border-radius: 0 6px 6px 0; }
+.msg-content ul { padding-left: 22px; margin: 4px 0; list-style-type: disc; }
+.msg-content ol { padding-left: 22px; margin: 4px 0; list-style-type: decimal; }
+.msg-content li { margin: 2px 0; line-height: 1.7; }
+.msg-content li::marker { color: oklch(0.556 0 0); }
+.msg-content hr { border: none; border-top: 1px solid oklch(1 0 0 / 8%); margin: 12px 0; }
+.msg-content strong { font-weight: 600; }
+.msg-content em { font-style: italic; color: oklch(0.65 0 0); }
+.msg-content p { margin: 4px 0; line-height: 1.7; }
+.msg-content br { display: block; content: ''; margin: 2px 0; }
+.msg-content a { color: oklch(0.777 0.152 181.912); text-decoration: none; }
+.msg-content a:hover { text-decoration: underline; }
+.msg-content table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 12.5px; }
+.msg-content th, .msg-content td { border: 1px solid oklch(1 0 0 / 8%); padding: 8px 12px; text-align: left; }
+.msg-content th { background: oklch(0.17 0 0); font-weight: 500; }
+
+.msg-content.streaming.empty-streaming::after { content: 'Thinking...'; animation: pulse 1.5s ease-in-out infinite; color: oklch(0.455 0 0); font-style: italic; }
+@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
+.msg-content.streaming.rendered { animation: fadeChunk 0.15s ease-out; }
+@keyframes fadeChunk { from { opacity: 0.7; } to { opacity: 1; } }
+
+/* ── Activity Blocks ──────────────────────────────── */
+.activity-block { border-radius: 8px; border: 1px solid oklch(1 0 0 / 6%); overflow: hidden; animation: activityIn 0.2s ease-out; }
+@keyframes activityIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+
+.activity-header { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; background: none; border: none; cursor: pointer; text-align: left; font-size: 11px; line-height: 1.4; color: oklch(0.65 0 0); transition: background 0.1s; }
+.activity-header:hover { background: oklch(1 0 0 / 3%); }
+.activity-icon { flex-shrink: 0; }
+.activity-label { font-weight: 600; font-size: 11px; white-space: nowrap; }
+.activity-preview { color: oklch(0.5 0 0); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+
+.activity-result-badge { font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 4px; background: oklch(0.45 0.12 155 / 15%); color: oklch(0.65 0.15 155); white-space: nowrap; }
+
+.activity-body { padding: 0 10px 8px 28px; font-size: 11px; color: oklch(0.6 0 0); line-height: 1.5; }
+.activity-thinking-body { font-style: italic; white-space: pre-wrap; word-break: break-word; }
+
+.activity-args, .activity-result-content { background: oklch(0.12 0 0); border: 1px solid oklch(1 0 0 / 6%); border-radius: 6px; padding: 6px 10px; font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 10.5px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; color: oklch(0.65 0 0); }
+.activity-result-content { max-height: 200px; overflow-y: auto; word-break: break-word; color: oklch(0.6 0 0); }
+
+.activity-thinking { border-left: 2px solid oklch(0.65 0.15 300); background: oklch(0.65 0.15 300 / 4%); }
+.activity-tool-use { border-left: 2px solid oklch(0.777 0.152 181.912); background: oklch(0.777 0.152 181.912 / 4%); }
+.activity-tool-result { border-left: 2px solid oklch(0.65 0.15 155); background: oklch(0.65 0.15 155 / 4%); }
+
+/* ── Sonner Toast ─────────────────────────────────── */
+[data-sonner-toaster] { pointer-events: none !important; }
+[data-sonner-toast] { pointer-events: auto !important; }

package/renderer/src/hooks/use-ipc.ts

@@ -0,0 +1,24 @@
+import { useEffect, useCallback, useRef } from 'react'
+
+export function useIPCOn(channel: RuneOnChannel, callback: (data: any) => void) {
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const handler = (data: any) => callbackRef.current(data)
+    window.rune.on(channel, handler)
+    return () => window.rune.off(channel, handler)
+  }, [channel])
+}
+
+export function useIPCSend() {
+  return useCallback((channel: RuneSendChannel, data?: unknown) => {
+    window.rune.send(channel, data)
+  }, [])
+}
+
+export function useIPCInvoke() {
+  return useCallback((channel: RuneInvokeChannel, data?: unknown) => {
+    return window.rune.invoke(channel, data)
+  }, [])
+}

package/renderer/src/lib/markdown.ts

@@ -0,0 +1,83 @@
+function escHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function inlineMd(s: string): string {
+  s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+  s = s.replace(/__(.+?)__/g, '<strong>$1</strong>')
+  s = s.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
+  s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" title="$1">$1</a>')
+  return s
+}
+
+export function renderMarkdown(src: string): string {
+  const blocks: string[] = []
+  let md = src.replace(/```([\w-]*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    blocks.push('<pre><code>' + escHtml(code) + '</code></pre>')
+    return '\x01' + (blocks.length - 1) + '\x01'
+  })
+  md = md.replace(/`([^`\n]+)`/g, (_, code) => {
+    blocks.push('<code>' + escHtml(code) + '</code>')
+    return '\x01' + (blocks.length - 1) + '\x01'
+  })
+
+  md = escHtml(md)
+
+  const lines = md.split('\n')
+  let out = '', inUl = false, inOl = false, inTable = false
+
+  for (let li = 0; li < lines.length; li++) {
+    const line = lines[li]
+    const isUl = /^[\-\*] /.test(line)
+    const isOl = /^\d+\. /.test(line)
+    const isTableRow = /^\|(.+)\|$/.test(line.trim())
+
+    if (inUl && !isUl) { out += '</ul>'; inUl = false }
+    if (inOl && !isOl) { out += '</ol>'; inOl = false }
+    if (inTable && !isTableRow) { out += '</tbody></table>'; inTable = false }
+
+    if (isTableRow) {
+      const cells = line.trim().slice(1, -1).split('|').map(c => c.trim())
+      if (cells.every(c => /^[-:]+$/.test(c))) continue
+      if (!inTable) {
+        inTable = true
+        out += '<table><thead><tr>' + cells.map(c => '<th>' + inlineMd(c) + '</th>').join('') + '</tr></thead><tbody>'
+      } else {
+        out += '<tr>' + cells.map(c => '<td>' + inlineMd(c) + '</td>').join('') + '</tr>'
+      }
+      continue
+    }
+
+    const hm = line.match(/^(#{1,4}) (.+)$/)
+    if (hm) {
+      const lv = Math.min(hm[1].length + 2, 6)
+      out += '<h' + lv + '>' + inlineMd(hm[2]) + '</h' + lv + '>'
+      continue
+    }
+    if (/^[-*_]{3,}$/.test(line.trim())) { out += '<hr>'; continue }
+    if (/^&gt; /.test(line)) {
+      out += '<blockquote>' + inlineMd(line.slice(5)) + '</blockquote>'
+      continue
+    }
+    if (isUl) {
+      if (!inUl) { out += '<ul>'; inUl = true }
+      out += '<li>' + inlineMd(line.replace(/^[\-\*] /, '')) + '</li>'
+      continue
+    }
+    if (isOl) {
+      if (!inOl) { out += '<ol>'; inOl = true }
+      out += '<li>' + inlineMd(line.replace(/^\d+\. /, '')) + '</li>'
+      continue
+    }
+    if (line.trim() === '') { out += '<br>'; continue }
+    out += '<p>' + inlineMd(line) + '</p>'
+  }
+  if (inUl) out += '</ul>'
+  if (inOl) out += '</ol>'
+  if (inTable) out += '</tbody></table>'
+
+  blocks.forEach((html, i) => {
+    out = out.replace('\x01' + i + '\x01', html)
+  })
+  return out
+}

package/renderer/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/renderer/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './App'
+import './globals.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/renderer/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}

package/renderer/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  root: __dirname,
+  plugins: [react(), tailwindcss()],
+  base: './',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  define: {
+    'process.env': '{}',
+    'process.platform': JSON.stringify('darwin'),
+  },
+  build: {
+    outDir: path.resolve(__dirname, '..', 'dist', 'renderer'),
+    emptyOutDir: true,
+  },
+})