@toolr/ui-design 0.1.0

package/components/ui/execution-details-panel.tsx

@@ -0,0 +1,93 @@
+/**
+ * ExecutionDetailsPanel - Shows AI execution configuration before running actions
+ *
+ * Displays tool, permissions, output format, CLI flags, and change handling.
+ * Optional "Allow direct edits" toggle with warning message.
+ * Used inside ActionDialog as the mandatory execution details section.
+ */
+
+import { AlertTriangle, Info } from 'lucide-react'
+import { Checkbox } from './checkbox.tsx'
+import { cn } from '../lib/cn.ts'
+
+export interface ExecutionDetailRow {
+  label: string
+  value: string
+  mono?: boolean
+}
+
+export interface ExecutionDetailsPanelProps {
+  details: ExecutionDetailRow[]
+  /** Show the "Allow direct edits" toggle */
+  allowDirectEdits?: boolean
+  onAllowDirectEditsChange?: (value: boolean) => void
+  /** Warning message shown below the toggle */
+  warningMessage?: string
+  className?: string
+}
+
+export function ExecutionDetailsPanel({
+  details,
+  allowDirectEdits,
+  onAllowDirectEditsChange,
+  warningMessage,
+  className,
+}: ExecutionDetailsPanelProps) {
+  const showToggle = onAllowDirectEditsChange !== undefined
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {/* Header */}
+      <div className="flex items-center gap-2">
+        <Info className="w-4 h-4 text-neutral-500" />
+        <span className="font-medium text-neutral-400 text-sm">Execution Details</span>
+      </div>
+
+      {/* Direct edits toggle */}
+      {showToggle && (
+        <div
+          className="flex items-start gap-2 cursor-pointer"
+          onClick={() => onAllowDirectEditsChange!(!allowDirectEdits)}
+        >
+          <div onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={allowDirectEdits ?? false}
+              onChange={onAllowDirectEditsChange!}
+              className="mt-0.5"
+            />
+          </div>
+          <div>
+            <span className="text-neutral-300 text-sm">Allow direct file edits</span>
+            <p className="text-neutral-500 text-xs mt-0.5">
+              {allowDirectEdits
+                ? 'AI will modify files directly. Changes saved immediately.'
+                : 'Changes will be shown in editor for review.'}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Warning */}
+      {warningMessage && (
+        <div className="rounded border border-red-500/50 bg-red-500/10 p-2">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
+            <p className="text-red-300 text-xs">{warningMessage}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Detail rows */}
+      {details.length > 0 && (
+        <div className="space-y-2">
+          {details.map((row) => (
+            <div key={row.label} className="flex items-start gap-3">
+              <span className="text-neutral-500 text-xs w-24 shrink-0">{row.label}:</span>
+              <span className={cn('text-neutral-300 text-xs', row.mono && 'font-mono')}>{row.value}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/ui/extension-list-card.tsx

@@ -0,0 +1,105 @@
+/**
+ * ExtensionListCard — Standardized card for extension list view items.
+ *
+ * Used across apps for skill, command, hook, agent, plugin, MCP server,
+ * Gemini extension, and marketplace cards.
+ *
+ * Features:
+ * - Colored left border for type indication
+ * - Icon, title, badges, description, actions slots
+ * - Inactive/dimmed state for disabled items
+ * - Hover-revealed action buttons (300ms delay)
+ * - Optional metadata row (static or hover-aware)
+ */
+
+import { memo, useState, useRef, useCallback, useEffect, type ReactNode, type ElementType } from 'react'
+import { cn } from '../lib/cn.ts'
+
+export interface ExtensionListCardProps {
+  /** Lucide icon component */
+  icon: ElementType
+  /** Tailwind color class for icon (e.g. 'text-teal-400') */
+  iconColor: string
+  /** Tailwind color class for left border (e.g. 'border-l-teal-400') */
+  borderColor: string
+  /** Card title */
+  title: string
+  /** Custom title class (defaults to 'text-white') */
+  titleClassName?: string
+  /** Badges rendered after the title */
+  badges?: ReactNode
+  /** Description text or node (can be string or ReactNode for custom formatting) */
+  description?: ReactNode
+  /** Action buttons (shown on hover) */
+  actions?: ReactNode
+  /** Metadata row at bottom. Can be a render function receiving hover state. */
+  metadata?: ReactNode | ((isHovered: boolean) => ReactNode)
+  /** Whether card is inactive/dimmed */
+  isInactive?: boolean
+  /** Test ID for E2E testing */
+  testId?: string
+}
+
+export const ExtensionListCard = memo(function ExtensionListCard({
+  icon: Icon,
+  iconColor,
+  borderColor,
+  title,
+  titleClassName = 'text-white',
+  badges,
+  description,
+  actions,
+  metadata,
+  isInactive,
+  testId,
+}: ExtensionListCardProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const hoverTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
+  useEffect(() => () => clearTimeout(hoverTimerRef.current), [])
+  const handleMouseEnter = useCallback(() => {
+    hoverTimerRef.current = setTimeout(() => setIsHovered(true), 300)
+  }, [])
+  const handleMouseLeave = useCallback(() => {
+    clearTimeout(hoverTimerRef.current)
+    setIsHovered(false)
+  }, [])
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col p-3 bg-neutral-800/50 rounded-lg border border-neutral-700/50 border-l-4 hover:bg-neutral-800 transition-colors',
+        borderColor,
+        isInactive && 'opacity-60',
+        isHovered ? 'h-auto z-10' : 'h-full',
+      )}
+      data-testid={testId}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-start gap-3 min-w-0 flex-1">
+          <Icon className={cn('w-5 h-5 shrink-0', iconColor)} />
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className={cn('text-sm font-medium', titleClassName)}>{title}</span>
+              {badges}
+            </div>
+            {description && (
+              <div className={cn('text-xs text-neutral-500 mt-1', !isHovered && 'line-clamp-2')}>{description}</div>
+            )}
+          </div>
+        </div>
+        {actions && (
+          <div className={cn('items-center gap-1.5 shrink-0', isHovered ? 'flex' : 'hidden')}>
+            {actions}
+          </div>
+        )}
+      </div>
+      {metadata != null && (
+        <div className="flex items-center justify-between mt-2 ml-8 mr-2 text-xs text-neutral-500">
+          {typeof metadata === 'function' ? metadata(isHovered) : metadata}
+        </div>
+      )}
+    </div>
+  )
+})

package/components/ui/file-structure-section.tsx

@@ -0,0 +1,373 @@
+import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
+import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
+import { CollapseButton } from './icon-button.tsx'
+import { SegmentedToggle } from './segmented-toggle.tsx'
+import { FileTree, collectDirPaths, type FileTreeNode } from './file-tree.tsx'
+
+export type PreviewMode = 'format' | 'language' | 'plain'
+export type AccentColor = 'blue' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky'
+
+const ACCENT_ICON: Record<AccentColor, string> = {
+  blue: 'text-blue-400', purple: 'text-purple-400', orange: 'text-orange-400',
+  green: 'text-green-400', pink: 'text-pink-400', amber: 'text-amber-400',
+  emerald: 'text-emerald-400', teal: 'text-teal-400', sky: 'text-sky-400',
+}
+
+export interface FileStructureSectionProps {
+  files: FileTreeNode[] | null
+  rootName: string
+  isLoading?: boolean
+  error?: string | null
+  onFetchContent: (relativePath: string) => Promise<string>
+  /** Enable the Format option in the mode toggle (renders markdown). */
+  format?: boolean
+  /** Enable the Language option in the mode toggle (syntax highlighting). */
+  language?: boolean
+  /**
+   * Default active mode when multiple options are enabled.
+   * Only relevant when both `format` and `language` are true.
+   * Defaults to `'format'` when both are set.
+   */
+  default?: PreviewMode
+  /** Accent color applied to icons, selected state, and the mode toggle. Defaults to 'blue'. */
+  accentColor?: AccentColor
+  /** Custom renderer called when mode is 'language'. Receives the resolved language as third arg. */
+  renderPreview?: (content: string, filePath: string, language: string) => ReactNode
+}
+
+export function getLanguageFromPath(filePath: string): string {
+  const ext = filePath.split('.').pop()?.toLowerCase() || ''
+  const map: Record<string, string> = {
+    js: 'javascript', ts: 'typescript', jsx: 'javascript', tsx: 'typescript',
+    json: 'json', md: 'markdown', yml: 'yaml', yaml: 'yaml',
+    sh: 'shell', bash: 'shell',
+    rs: 'rust', py: 'python', rb: 'ruby', go: 'go',
+    html: 'html', css: 'css', scss: 'scss',
+    toml: 'ini', xml: 'xml', sql: 'sql',
+  }
+  return map[ext] || 'plaintext'
+}
+
+function renderMarkdownContent(content: string) {
+  const lines = content.split('\n')
+  const nodes: ReactNode[] = []
+  let i = 0
+
+  // Frontmatter block
+  if (lines[0] === '---') {
+    const fmLines: string[] = []
+    i = 1
+    while (i < lines.length && lines[i] !== '---') { fmLines.push(lines[i]); i++ }
+    i++ // skip closing ---
+    nodes.push(
+      <div key="fm" className="mb-3 font-mono text-[11px] text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5">
+        <div className="text-neutral-600">---</div>
+        {fmLines.map((l, j) => <div key={j}>{l}</div>)}
+        <div className="text-neutral-600">---</div>
+      </div>
+    )
+  }
+
+  while (i < lines.length) {
+    const line = lines[i]
+    if (line.startsWith('```')) {
+      const codeLines: string[] = []
+      i++
+      while (i < lines.length && !lines[i].startsWith('```')) { codeLines.push(lines[i]); i++ }
+      nodes.push(
+        <pre key={i} className="mb-2 p-2 bg-black/30 rounded text-[11px] font-mono text-neutral-300 overflow-x-auto">
+          {codeLines.join('\n')}
+        </pre>
+      )
+    } else if (line.startsWith('### ')) {
+      nodes.push(<h3 key={i} className="text-[11px] font-semibold text-neutral-300 mt-2 mb-0.5">{line.slice(4)}</h3>)
+    } else if (line.startsWith('## ')) {
+      nodes.push(<h2 key={i} className="text-xs font-semibold text-neutral-200 mt-2.5 mb-1">{line.slice(3)}</h2>)
+    } else if (line.startsWith('# ')) {
+      nodes.push(<h1 key={i} className="text-sm font-semibold text-neutral-100 mb-1.5">{line.slice(2)}</h1>)
+    } else if (line === '' || line === '\r') {
+      nodes.push(<div key={i} className="h-1.5" />)
+    } else {
+      nodes.push(<p key={i} className="text-[11px] text-neutral-400 leading-relaxed">{line}</p>)
+    }
+    i++
+  }
+
+  return <div className="p-3">{nodes}</div>
+}
+
+const FORMAT_OPTION = { value: 'format' as const, icon: <AlignLeft className="w-3 h-3" />, tooltip: { description: 'Render as markdown' } }
+const LANGUAGE_OPTION = { value: 'language' as const, icon: <Code2 className="w-3 h-3" />, tooltip: { description: 'Syntax highlighting' } }
+const PLAIN_OPTION = { value: 'plain' as const, icon: <Type className="w-3 h-3" />, tooltip: { description: 'Plain text' } }
+
+export function FileStructureSection({
+  files,
+  rootName,
+  isLoading,
+  error,
+  onFetchContent,
+  format,
+  language,
+  default: defaultMode,
+  accentColor = 'blue',
+  renderPreview,
+}: FileStructureSectionProps) {
+  const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null)
+  const [fileContent, setFileContent] = useState<string | null>(null)
+  const [fetchedFilePath, setFetchedFilePath] = useState<string | null>(null)
+  const [fileError, setFileError] = useState<string | null>(null)
+
+  // Resolve initial mode from props
+  function resolveInitialMode(): PreviewMode {
+    if (defaultMode === 'format' && format) return 'format'
+    if (defaultMode === 'language' && language) return 'language'
+    if (defaultMode === 'plain') return 'plain'
+    if (format) return 'format'
+    if (language) return 'language'
+    return 'plain'
+  }
+  const [mode, setMode] = useState<PreviewMode>(resolveInitialMode)
+
+  // When format/language props change, fall back if current mode is no longer available
+  useEffect(() => {
+    setMode((prev: PreviewMode) => {
+      if (prev === 'format' && !format) return language ? 'language' : 'plain'
+      if (prev === 'language' && !language) return format ? 'format' : 'plain'
+      return prev
+    })
+  }, [format, language])
+
+  // Build toggle options based on enabled features
+  const toggleOptions = [
+    ...(format ? [FORMAT_OPTION] : []),
+    ...(language ? [LANGUAGE_OPTION] : []),
+    PLAIN_OPTION,
+  ]
+  const showToggle = !!(format || language)
+
+  const allDirPaths = useMemo(() => {
+    if (!files) return new Set<string>()
+    return collectDirPaths(files, rootName)
+  }, [files, rootName])
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set<string>())
+  useEffect(() => { setExpandedPaths(new Set(allDirPaths)) }, [allDirPaths])
+  const togglePath = useCallback((path: string) => {
+    setExpandedPaths((prev: Set<string>) => {
+      const next = new Set(prev)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+  }, [])
+  const allCollapsed = expandedPaths.size === 0
+
+  const [treeHeight, setTreeHeight] = useState<number | null>(null)
+  const sectionRef = useRef<HTMLDivElement>(null)
+  const resizing = useRef(false)
+  const startY = useRef(0)
+  const startHeight = useRef(0)
+
+  useEffect(() => {
+    if (treeHeight !== null || !sectionRef.current) return
+    const el = sectionRef.current
+    const scrollParent = el.closest('.overflow-y-auto') as HTMLElement | null
+    if (!scrollParent) return
+
+    const observer = new ResizeObserver(() => {
+      if (scrollParent.clientHeight === 0) return
+      const containerRect = scrollParent.getBoundingClientRect()
+      const sectionRect = el.getBoundingClientRect()
+      const contentAbove = (sectionRect.top - containerRect.top) + scrollParent.scrollTop
+      const remaining = scrollParent.clientHeight - contentAbove - 60
+      const maxHeight = Math.min(scrollParent.clientHeight - 100, window.innerHeight * 0.6)
+      setTreeHeight(Math.max(250, Math.min(remaining, maxHeight)))
+      observer.disconnect()
+    })
+    observer.observe(scrollParent)
+    return () => observer.disconnect()
+  }, [treeHeight, files])
+
+  const effectiveHeight = treeHeight ?? 250
+
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    resizing.current = true
+    startY.current = e.clientY
+    startHeight.current = effectiveHeight
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!resizing.current) return
+      setTreeHeight(Math.max(150, startHeight.current + (ev.clientY - startY.current)))
+    }
+    const onMouseUp = () => {
+      resizing.current = false
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+    document.addEventListener('mousemove', onMouseMove, { passive: true })
+    document.addEventListener('mouseup', onMouseUp, { passive: true })
+  }, [effectiveHeight])
+
+  const firstFilePath = useMemo(() => {
+    if (!files) return null
+    const findFirst = (nodes: FileTreeNode[], prefix = ''): string | null => {
+      for (const node of nodes) {
+        const path = prefix ? `${prefix}/${node.name}` : node.name
+        if (node.type === 'file') return path
+        if (node.children) {
+          const found = findFirst(node.children, path)
+          if (found) return found
+        }
+      }
+      return null
+    }
+    return findFirst(files, rootName)
+  }, [files, rootName])
+
+  const effectiveFilePath = selectedFilePath ?? firstFilePath
+  const fileIsLoading = effectiveFilePath != null && effectiveFilePath !== fetchedFilePath
+
+  useEffect(() => {
+    if (!effectiveFilePath) return
+
+    const relativePath = effectiveFilePath.startsWith(`${rootName}/`)
+      ? effectiveFilePath.slice(rootName.length + 1)
+      : effectiveFilePath
+
+    let cancelled = false
+
+    onFetchContent(relativePath)
+      .then((text) => {
+        if (!cancelled) {
+          setFileContent(text)
+          setFetchedFilePath(effectiveFilePath)
+          setFileError(null)
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setFileError(err instanceof Error ? err.message : 'Failed to load file')
+          setFetchedFilePath(effectiveFilePath)
+        }
+      })
+
+    return () => { cancelled = true }
+  }, [effectiveFilePath, rootName, onFetchContent])
+
+  const handleSelectFile = useCallback((filePath: string) => {
+    setSelectedFilePath(filePath)
+    setFileContent(null)
+    setFileError(null)
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div>
+        <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+        <div className="flex items-center gap-2 text-xs text-neutral-500 py-4">
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          Loading file tree...
+        </div>
+      </div>
+    )
+  }
+
+  if (!files || files.length === 0) {
+    return null
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+        <div className="flex items-center gap-2 text-xs text-red-400 py-4">
+          <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+          {error}
+        </div>
+      </div>
+    )
+  }
+
+  const selectedFileName = effectiveFilePath?.split('/').pop() || ''
+  const resolvedLanguage = (mode === 'language' && effectiveFilePath)
+    ? getLanguageFromPath(effectiveFilePath)
+    : 'plaintext'
+
+  function renderContent(content: string, filePath: string) {
+    if (mode === 'format') return renderMarkdownContent(content)
+    if (mode === 'language' && renderPreview) return renderPreview(content, filePath, resolvedLanguage)
+    return (
+      <pre className="p-3 text-xs font-mono text-white leading-relaxed whitespace-pre-wrap">
+        <code>{content}</code>
+      </pre>
+    )
+  }
+
+  return (
+    <div ref={sectionRef}>
+      <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">File Structure</h3>
+      <div className="flex gap-3" style={{ height: `${effectiveHeight}px` }}>
+        {/* Tree panel */}
+        <div className={`flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${effectiveFilePath ? 'w-1/3 shrink-0' : 'flex-1'}`}>
+          <div className="flex items-center px-3 py-2 border-b border-neutral-700 shrink-0 gap-2 min-w-0">
+            <FolderTree className={`w-3.5 h-3.5 shrink-0 ${ACCENT_ICON[accentColor]}`} />
+            <span className="text-xs text-neutral-200 truncate flex-1">Files</span>
+            <CollapseButton
+              collapsed={allCollapsed}
+              onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
+            />
+          </div>
+          <div className="flex-1 overflow-y-auto p-3">
+            <FileTree
+              nodes={files}
+              rootName={rootName}
+              selectedPath={effectiveFilePath}
+              onSelectFile={handleSelectFile}
+              expandedPaths={expandedPaths}
+              onTogglePath={togglePath}
+              accentColor={accentColor}
+            />
+          </div>
+        </div>
+
+        {/* Preview panel */}
+        {effectiveFilePath && (
+          <div className="flex-1 flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden">
+            <div className="flex items-center px-3 py-2 border-b border-neutral-700 shrink-0 gap-2 min-w-0">
+              <FileCode className={`w-3.5 h-3.5 shrink-0 ${ACCENT_ICON[accentColor]}`} />
+              <span className="text-xs text-neutral-200 truncate flex-1">{selectedFileName}</span>
+              {showToggle && (
+                <SegmentedToggle
+                  options={toggleOptions}
+                  value={mode}
+                  onChange={setMode}
+                  accentColor={accentColor}
+                  size="xss"
+                />
+              )}
+            </div>
+            <div className="flex-1 overflow-auto">
+              {fileIsLoading ? (
+                <div className="flex items-center gap-2 text-xs text-neutral-500 p-3">
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  Loading...
+                </div>
+              ) : fileError ? (
+                <p className="text-xs text-red-400 p-3">{fileError}</p>
+              ) : fileContent !== null ? (
+                renderContent(fileContent, effectiveFilePath)
+              ) : null}
+            </div>
+          </div>
+        )}
+      </div>
+      {/* Resize handle */}
+      <div
+        onMouseDown={handleResizeStart}
+        className="h-4 -mt-1.5 cursor-grab active:cursor-grabbing flex items-center justify-center group"
+      >
+        <div className="w-10 h-1 rounded-full bg-neutral-700 group-hover:bg-neutral-500 group-hover:w-14 group-hover:h-1.5 transition-all" />
+      </div>
+    </div>
+  )
+}