@antigenic-oss/paint 0.1.0

package/src/components/left-panel/terminal/TerminalPanel.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import { useRef, useEffect, useCallback } from 'react'
+import { useEditorStore } from '@/store'
+import { ScanOverlay } from './ScanOverlay'
+import '@xterm/xterm/css/xterm.css'
+
+export function TerminalPanel() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const termRef = useRef<import('@xterm/xterm').Terminal | null>(null)
+  const fitRef = useRef<import('@xterm/addon-fit').FitAddon | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const initRef = useRef(false)
+  const terminalStatus = useEditorStore((s) => s.terminalStatus)
+  const setTerminalStatus = useEditorStore((s) => s.setTerminalStatus)
+  const port = useEditorStore((s) => s.terminalServerPort)
+  const registerTerminalWriter = useEditorStore((s) => s.registerTerminalWriter)
+
+  const connectWebSocket = useCallback(
+    (
+      term: import('@xterm/xterm').Terminal,
+      fitAddon: import('@xterm/addon-fit').FitAddon,
+    ) => {
+      setTerminalStatus('connecting')
+      const ws = new WebSocket(`ws://localhost:${port}/ws`)
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        setTerminalStatus('connected')
+        fitAddon.fit()
+        const dims = fitAddon.proposeDimensions()
+        if (dims) {
+          ws.send('\x01' + JSON.stringify({ cols: dims.cols, rows: dims.rows }))
+        }
+      }
+
+      ws.onmessage = (event) => {
+        term.write(event.data)
+      }
+
+      ws.onclose = () => {
+        setTerminalStatus('disconnected')
+      }
+
+      ws.onerror = () => {
+        setTerminalStatus('error')
+      }
+
+      term.onData((data: string) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(data)
+        }
+      })
+
+      term.onResize((size: { cols: number; rows: number }) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send('\x01' + JSON.stringify({ cols: size.cols, rows: size.rows }))
+        }
+      })
+    },
+    [port, setTerminalStatus],
+  )
+
+  useEffect(() => {
+    if (initRef.current) return
+    initRef.current = true
+    let mounted = true
+
+    async function init() {
+      const [{ Terminal }, { FitAddon }] = await Promise.all([
+        import('@xterm/xterm'),
+        import('@xterm/addon-fit'),
+      ])
+
+      if (!mounted || !containerRef.current) return
+
+      const fitAddon = new FitAddon()
+      fitRef.current = fitAddon
+
+      const term = new Terminal({
+        theme: {
+          background: '#1e1e1e',
+          foreground: '#e0e0e0',
+          cursor: '#4a9eff',
+          selectionBackground: '#4a9eff44',
+          black: '#1e1e1e',
+          red: '#f87171',
+          green: '#4ade80',
+          yellow: '#fbbf24',
+          blue: '#4a9eff',
+          magenta: '#c084fc',
+          cyan: '#22d3ee',
+          white: '#e0e0e0',
+          brightBlack: '#666666',
+          brightRed: '#f87171',
+          brightGreen: '#4ade80',
+          brightYellow: '#fbbf24',
+          brightBlue: '#4a9eff',
+          brightMagenta: '#c084fc',
+          brightCyan: '#22d3ee',
+          brightWhite: '#ffffff',
+        },
+        fontSize: 12,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        cursorBlink: true,
+        scrollback: 1000,
+      })
+
+      term.loadAddon(fitAddon)
+      term.open(containerRef.current)
+      fitAddon.fit()
+
+      termRef.current = term
+      registerTerminalWriter((data: string) => term.write(data))
+      connectWebSocket(term, fitAddon)
+    }
+
+    init()
+
+    return () => {
+      mounted = false
+      registerTerminalWriter(null)
+      wsRef.current?.close()
+      termRef.current?.dispose()
+    }
+  }, [connectWebSocket, registerTerminalWriter])
+
+  // Refit terminal when container resizes
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+
+    const observer = new ResizeObserver(() => {
+      if (fitRef.current && termRef.current) {
+        fitRef.current.fit()
+      }
+    })
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  const reconnect = useCallback(() => {
+    if (termRef.current && fitRef.current) {
+      wsRef.current?.close()
+      termRef.current.clear()
+      connectWebSocket(termRef.current, fitRef.current)
+    }
+  }, [connectWebSocket])
+
+  return (
+    <div className="relative flex flex-col h-full">
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-3 py-1 flex-shrink-0"
+        style={{ borderBottom: '1px solid var(--border)' }}
+      >
+        <div className="flex items-center gap-1.5">
+          <span
+            className="w-1.5 h-1.5 rounded-full"
+            style={{
+              background:
+                terminalStatus === 'connected'
+                  ? 'var(--success)'
+                  : terminalStatus === 'error'
+                    ? 'var(--error)'
+                    : 'var(--text-muted)',
+            }}
+          />
+          <span
+            className="text-[11px]"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            Terminal
+          </span>
+        </div>
+        {(terminalStatus === 'disconnected' || terminalStatus === 'error') && (
+          <button
+            onClick={reconnect}
+            className="px-2 py-0.5 rounded text-[10px] font-medium"
+            style={{
+              background: 'var(--bg-hover)',
+              color: 'var(--text-secondary)',
+            }}
+          >
+            Reconnect
+          </button>
+        )}
+      </div>
+
+      {/* Terminal container */}
+      <div
+        ref={containerRef}
+        className="flex-1 overflow-hidden"
+        style={{ padding: '4px 0 0 4px' }}
+      />
+
+      {/* Error state overlay */}
+      {terminalStatus === 'error' && (
+        <div
+          className="absolute inset-0 flex flex-col items-center justify-center gap-2 pointer-events-none"
+          style={{ background: 'rgba(30,30,30,0.85)' }}
+        >
+          <span className="text-xs" style={{ color: 'var(--error)' }}>
+            Cannot connect to terminal server
+          </span>
+          <span className="text-[10px]" style={{ color: 'var(--text-muted)' }}>
+            Run: bun run terminal
+          </span>
+        </div>
+      )}
+
+      {/* AI Scan animation overlay */}
+      <ScanOverlay />
+    </div>
+  )
+}

package/src/components/right-panel/ElementLogBox.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import { useMemo, useState, useCallback, useRef } from 'react'
+import { useEditorStore } from '@/store'
+import {
+  buildInstructionsFooter,
+  BREAKPOINTS,
+  getBreakpointDeviceInfo,
+  getBreakpointRange,
+} from '@/lib/constants'
+import { EditablePre } from '@/components/common/EditablePre'
+import type { Breakpoint } from '@/types/changelog'
+
+function CopyIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  )
+}
+
+function CheckIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+function buildElementLogText(opts: {
+  tagName: string | null
+  className: string | null
+  elementId: string | null
+  selectorPath: string | null
+  attributes: Record<string, string>
+  innerText: string | null
+  computedStyles: Record<string, string>
+  pagePath: string
+  changeScope: 'all' | 'breakpoint-only'
+  activeBreakpoint: Breakpoint
+  changeCount: number
+  framework?: string | null
+  cssStrategy?: string[] | null
+}): string {
+  const lines: string[] = []
+  if (!opts.tagName) return ''
+
+  const attrParts: string[] = []
+  if (opts.elementId) attrParts.push(`id="${opts.elementId}"`)
+  if (opts.className) attrParts.push(`class="${opts.className}"`)
+  const tag = `<${opts.tagName}${attrParts.length ? ' ' + attrParts.join(' ') : ''}>`
+
+  const isMobileApp =
+    opts.framework === 'flutter' || opts.framework === 'react-native'
+  const { deviceName, range } = getBreakpointDeviceInfo(opts.activeBreakpoint)
+
+  lines.push('PAGE NAME')
+  lines.push(opts.pagePath || '/')
+  lines.push('')
+
+  lines.push('ELEMENT')
+  lines.push(tag)
+  lines.push('')
+
+  if (!isMobileApp) {
+    lines.push('DEVICE')
+    lines.push(`Device Name: ${deviceName}`)
+    lines.push(`Breakpoint: ${range}`)
+    lines.push('')
+
+    lines.push('APPLIES TO')
+    lines.push(
+      opts.changeScope === 'all'
+        ? 'All breakpoints'
+        : `${deviceName} (${range})`,
+    )
+    lines.push('')
+  }
+
+  const attrEntries = Object.entries(opts.attributes)
+  if (attrEntries.length > 0) {
+    lines.push('ATTRIBUTES')
+    for (const [key, value] of attrEntries) {
+      lines.push(`  ${key}: ${value}`)
+    }
+    lines.push('')
+  }
+
+  if (opts.innerText) {
+    lines.push('INNER TEXT')
+    lines.push(opts.innerText)
+    lines.push('')
+  }
+
+  lines.push(
+    buildInstructionsFooter(opts.changeCount, 1, {
+      framework: opts.framework,
+      cssStrategy: opts.cssStrategy,
+    }),
+  )
+
+  return lines.join('\n').trim()
+}
+
+export function ElementLogBox() {
+  const [copied, setCopied] = useState(false)
+  const editedTextRef = useRef<string | null>(null)
+
+  const tagName = useEditorStore((s) => s.tagName)
+  const className = useEditorStore((s) => s.className)
+  const elementId = useEditorStore((s) => s.elementId)
+  const selectorPath = useEditorStore((s) => s.selectorPath)
+  const attributes = useEditorStore((s) => s.attributes)
+  const innerText = useEditorStore((s) => s.innerText)
+  const computedStyles = useEditorStore((s) => s.computedStyles)
+  const currentPagePath = useEditorStore((s) => s.currentPagePath)
+  const changeScope = useEditorStore((s) => s.changeScope)
+  const activeBreakpoint = useEditorStore((s) => s.activeBreakpoint)
+  const styleChanges = useEditorStore((s) => s.styleChanges)
+  const targetUrl = useEditorStore((s) => s.targetUrl)
+  const getProjectScanForUrl = useEditorStore((s) => s.getProjectScanForUrl)
+
+  const projectScan = useMemo(() => {
+    return getProjectScanForUrl(targetUrl)
+  }, [targetUrl, getProjectScanForUrl])
+
+  const framework = projectScan?.framework ?? null
+  const cssStrategy = projectScan?.cssStrategy ?? null
+
+  const changeCount = useMemo(() => {
+    if (!selectorPath) return 0
+    return styleChanges.filter((c) => c.elementSelector === selectorPath).length
+  }, [styleChanges, selectorPath])
+
+  const logText = useMemo(
+    () =>
+      buildElementLogText({
+        tagName,
+        className,
+        elementId,
+        selectorPath,
+        attributes,
+        innerText,
+        computedStyles,
+        pagePath: currentPagePath,
+        changeScope,
+        activeBreakpoint,
+        changeCount,
+        framework,
+        cssStrategy,
+      }),
+    [
+      tagName,
+      className,
+      elementId,
+      selectorPath,
+      attributes,
+      innerText,
+      computedStyles,
+      currentPagePath,
+      changeScope,
+      activeBreakpoint,
+      changeCount,
+      framework,
+      cssStrategy,
+    ],
+  )
+
+  const handleTextChange = useCallback(
+    (edited: string) => {
+      editedTextRef.current = edited === logText ? null : edited
+    },
+    [logText],
+  )
+
+  const handleCopy = useCallback(async () => {
+    const textToCopy = editedTextRef.current ?? logText
+    if (!textToCopy) return
+    try {
+      await navigator.clipboard.writeText(textToCopy)
+    } catch {
+      const textarea = document.createElement('textarea')
+      textarea.value = textToCopy
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [logText])
+
+  if (!tagName) return null
+
+  return (
+    <div>
+      <div className="flex items-center justify-between px-3 py-1.5">
+        <span
+          className="text-xs font-medium"
+          style={{ color: 'var(--text-secondary)' }}
+        >
+          Element Info
+        </span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors"
+          style={{
+            color: copied ? 'var(--success)' : 'var(--text-muted)',
+            background: 'transparent',
+          }}
+          title="Copy to clipboard"
+        >
+          {copied ? <CheckIcon size={11} /> : <CopyIcon size={11} />}
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <div className="px-3 pb-3">
+        <EditablePre
+          text={logText}
+          onTextChange={handleTextChange}
+          className="text-[11px] font-mono whitespace-pre-wrap break-words leading-relaxed"
+          style={{ color: 'var(--text-muted)' }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/right-panel/PanelTabs.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useEditorStore } from '@/store'
+
+export function PanelTabs() {
+  const activeRightTab = useEditorStore((s) => s.activeRightTab)
+  const setActiveRightTab = useEditorStore((s) => s.setActiveRightTab)
+  const activeBreakpoint = useEditorStore((s) => s.activeBreakpoint)
+  const changeCount = useEditorStore(
+    (s) =>
+      s.styleChanges.filter((c) => c.breakpoint === activeBreakpoint).length,
+  )
+  const consoleErrorCount = useEditorStore((s) => s.consoleErrorCount)
+
+  const varCount = useEditorStore(
+    (s) => Object.keys(s.cssVariableDefinitions).length,
+  )
+
+  const tabs: Array<{
+    id: 'design' | 'variables' | 'changes' | 'claude' | 'console'
+    label: string
+  }> = [
+    { id: 'design', label: 'Design' },
+    { id: 'variables', label: 'Variables' },
+    { id: 'changes', label: 'Changes' },
+    // { id: 'claude', label: 'Claude' },
+    { id: 'console', label: 'Console' },
+  ]
+
+  return (
+    <div
+      className="flex items-center h-8 flex-shrink-0"
+      style={{ borderBottom: '1px solid var(--border)' }}
+    >
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          onClick={() => setActiveRightTab(tab.id)}
+          className="flex items-center gap-1.5 px-3 h-full text-xs font-medium transition-colors relative"
+          style={{
+            color:
+              activeRightTab === tab.id
+                ? 'var(--text-primary)'
+                : 'var(--text-muted)',
+            background: 'transparent',
+          }}
+        >
+          {tab.label}
+          {tab.id === 'variables' && varCount > 0 && (
+            <span
+              className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full text-[10px] font-medium"
+              style={{ background: 'var(--text-muted)', color: '#fff' }}
+            >
+              {varCount}
+            </span>
+          )}
+          {tab.id === 'changes' && changeCount > 0 && (
+            <span
+              className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full text-[10px] font-medium"
+              style={{ background: 'var(--accent)', color: '#fff' }}
+            >
+              {changeCount}
+            </span>
+          )}
+          {tab.id === 'console' && consoleErrorCount > 0 && (
+            <span
+              className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full text-[10px] font-medium"
+              style={{ background: 'var(--error)', color: '#fff' }}
+            >
+              {consoleErrorCount}
+            </span>
+          )}
+          {activeRightTab === tab.id && (
+            <div
+              className="absolute bottom-0 left-0 right-0 h-0.5"
+              style={{ background: 'var(--accent)' }}
+            />
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/right-panel/RightPanel.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { ResizablePanel } from '@/components/common/ResizablePanel'
+import { PanelTabs } from './PanelTabs'
+import { DesignPanel } from './design/DesignPanel'
+import { ChangesPanel } from './changes/ChangesPanel'
+import { ClaudeIntegrationPanel } from './claude/ClaudeIntegrationPanel'
+import { ConsolePanel } from './console/ConsolePanel'
+import { VariablesPanel } from './variables/VariablesPanel'
+import { useEditorStore } from '@/store'
+import { PANEL_DEFAULTS } from '@/lib/constants'
+
+interface RightPanelProps {
+  width: number
+}
+
+export function RightPanel({ width }: RightPanelProps) {
+  const setRightPanelWidth = useEditorStore((s) => s.setRightPanelWidth)
+  const activeRightTab = useEditorStore((s) => s.activeRightTab)
+
+  return (
+    <ResizablePanel
+      width={width}
+      minWidth={PANEL_DEFAULTS.rightMin}
+      maxWidth={PANEL_DEFAULTS.rightMax}
+      onResize={setRightPanelWidth}
+      side="right"
+    >
+      <div className="flex flex-col h-full">
+        <PanelTabs />
+        <div className="flex-1 overflow-y-auto">
+          {activeRightTab === 'design' && <DesignPanel />}
+          {activeRightTab === 'variables' && <VariablesPanel />}
+          {activeRightTab === 'changes' && <ChangesPanel />}
+          {activeRightTab === 'claude' && <ClaudeIntegrationPanel />}
+          {activeRightTab === 'console' && <ConsolePanel />}
+        </div>
+      </div>
+    </ResizablePanel>
+  )
+}