sparkdesign 0.0.1 → 0.2.6

package/cli/registry/chat/permission-card.tsx

@@ -0,0 +1,178 @@
+import { forwardRef, useState } from 'react'
+import type { HTMLAttributes, ButtonHTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+import type { ReactNode } from 'react'
+import { Button } from '../basic/button'
+import { CloseLine, WarningLine } from '../basic/icons-inline'
+import { Scrollbar } from '../basic/scrollbar'
+
+export interface PermissionCardAction extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  label: string
+}
+
+export interface PermissionCardProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string
+  description?: string
+  command: string
+  commandIntent?: string
+  isLoadingIntent?: boolean
+  onClose?: () => void
+  actions?: {
+    deny?: PermissionCardAction
+    allowOnce?: PermissionCardAction
+  }
+  closeIcon?: ReactNode
+  warningIcon?: ReactNode
+  /** 主库 i18n：展开/折叠按钮文案 */
+  expandLabel?: string
+  collapseLabel?: string
+  commaLabel?: string
+}
+
+const COMMAND_COLLAPSE_THRESHOLD = 80
+
+function omitLabel(a: PermissionCardAction | undefined): Omit<PermissionCardAction, 'label'> {
+  if (!a) return {}
+  const { label: _label, ...rest } = a
+  void _label
+  return rest
+}
+
+const defaultTitle = 'Permission required'
+const defaultDescription = 'This action requires your permission.'
+const defaultExpand = 'Expand'
+const defaultCollapse = 'Collapse'
+const defaultComma = ', '
+
+export const PermissionCard = forwardRef<HTMLDivElement, PermissionCardProps>(
+  (
+    {
+      title,
+      description,
+      command,
+      commandIntent,
+      isLoadingIntent = false,
+      onClose,
+      actions,
+      className,
+      closeIcon,
+      warningIcon,
+      expandLabel = defaultExpand,
+      collapseLabel = defaultCollapse,
+      commaLabel = defaultComma,
+      ...props
+    },
+    ref
+  ) => {
+    const displayTitle = title ?? defaultTitle
+    const displayDescription = description ?? defaultDescription
+    const shouldCollapse = command.length > COMMAND_COLLAPSE_THRESHOLD
+    const [isExpanded, setIsExpanded] = useState(!shouldCollapse)
+    const defaultClose = closeIcon ?? <CloseLine className="h-3.5 w-3.5" />
+    const defaultWarning = warningIcon ?? <WarningLine className="h-4 w-4" />
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative rounded-lg border border-border-tertiary bg-bg-base p-3',
+          className
+        )}
+        {...props}
+      >
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute top-3 right-3 flex h-4 w-4 cursor-pointer items-center justify-center text-text-secondary transition-colors duration-200 hover:text-text"
+            aria-label="Close"
+          >
+            {defaultClose}
+          </button>
+        )}
+
+        <div className="mb-1 flex items-center gap-2">
+          <div className="flex h-4 w-4 shrink-0 items-center justify-center text-warning">
+            {defaultWarning}
+          </div>
+          <h3 className="min-w-0 flex-1 text-base leading-base font-semibold text-text">
+            {displayTitle}
+          </h3>
+        </div>
+
+        <p className="mb-2 ml-6 text-xs leading-xs text-text-tertiary">
+          {isLoadingIntent ? (
+            <span className="inline-flex items-center gap-1.5">
+              <div className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-text-tertiary border-t-transparent" />
+              <span>{displayDescription}</span>
+            </span>
+          ) : (
+            <>
+              {displayDescription}
+              {commandIntent && <span>{commaLabel}{commandIntent}</span>}
+            </>
+          )}
+        </p>
+
+        <div className="mb-4 ml-6">
+          <div className="rounded p-2 bg-fill-tertiary">
+            {isExpanded || !shouldCollapse ? (
+              <div title={command}>
+                <Scrollbar
+                  scrollbarVisibility="auto"
+                  maxHeight={240}
+                  className="text-xs leading-xs font-medium text-text break-all"
+                  style={{ fontFamily: 'Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' }}
+                >
+                  {command}
+                </Scrollbar>
+              </div>
+            ) : (
+              <div
+                className="text-xs leading-xs font-medium text-text break-all line-clamp-2 overflow-hidden"
+                style={{ fontFamily: 'Fira Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' }}
+                title={command}
+              >
+                {command}
+              </div>
+            )}
+            {shouldCollapse && (
+              <button
+                type="button"
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="mt-1 flex items-center gap-1 text-xs leading-xs text-text-tertiary hover:text-text transition-colors"
+              >
+                {isExpanded ? collapseLabel : expandLabel}
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2">
+          {actions?.deny && (
+            <Button variant="ghost" {...omitLabel(actions.deny)}>
+              {actions.deny.label}
+            </Button>
+          )}
+          {actions?.allowOnce && (
+            <button
+              type="button"
+              className={cn(
+                'rounded-full inline-flex items-center justify-center',
+                'px-3 py-1 text-sm leading-sm font-medium',
+                'text-text-on-primary bg-error',
+                'cursor-pointer hover:opacity-90 active:opacity-95 transition-opacity',
+                'disabled:opacity-50 disabled:cursor-not-allowed'
+              )}
+              {...omitLabel(actions.allowOnce)}
+            >
+              {actions.allowOnce.label}
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+PermissionCard.displayName = 'PermissionCard'

package/cli/registry/chat/plan-part.tsx

@@ -0,0 +1,168 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import { IconButton } from '../basic/icon-button'
+import { FileList2Line, CheckLine, DownloadLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+
+export interface PlanPartProps {
+  title?: string
+  description?: string
+  content: string
+  viewText?: string
+  buildText?: string
+  builtText?: string
+  isBuilt?: boolean
+  isGenerating?: boolean
+  onView?: () => void
+  onBuild?: () => void
+  onDownload?: () => void
+  defaultExpanded?: boolean
+  contentMaxHeight?: number
+  collapsible?: boolean
+  className?: string
+  headerIcon?: ReactNode
+  downloadIcon?: ReactNode
+  builtIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <FileList2Line className={`${ICON_CLASS} text-text-secondary`} />
+const defaultDownloadIcon = <DownloadLine className={ICON_CLASS} />
+const defaultBuiltIcon = <CheckLine className={cn(ICON_CLASS, 'text-success')} />
+
+export function PlanPart({
+  title = 'Plan',
+  description,
+  content,
+  viewText = 'View',
+  buildText = 'Build ⌘⏎',
+  builtText = 'Built',
+  isBuilt = false,
+  isGenerating = false,
+  onView,
+  onBuild,
+  onDownload,
+  defaultExpanded = true,
+  contentMaxHeight,
+  collapsible = false,
+  className,
+  headerIcon,
+  downloadIcon,
+  builtIcon,
+}: PlanPartProps) {
+  const lines = content.split('\n')
+  const hasTitle = lines.length > 1 && lines[1].trim() === ''
+  const contentTitle = hasTitle ? lines[0] : null
+  const contentBody = hasTitle ? lines.slice(2).join('\n') : content
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          {isGenerating ? (
+            <span className="text-left">Planning...</span>
+          ) : (
+            <>
+              <span className="text-left">{title}</span>
+              {description != null && (
+                <span className="text-left flex-1 truncate text-text-quaternary">{description}</span>
+              )}
+            </>
+          )}
+        </div>
+      }
+      titleShimmer={isGenerating}
+      headerRight={
+        !isGenerating && onDownload ? (
+          <IconButton
+            variant="iconOnly"
+            size="sm"
+            icon={downloadIcon ?? defaultDownloadIcon}
+            onClick={(e) => { e.stopPropagation(); onDownload?.() }}
+            title="Download as Markdown"
+            aria-label="Download"
+            className="!min-h-0 !min-w-0 h-[var(--font-size-sm)] w-[var(--font-size-sm)] text-text-secondary hover:text-text [&_svg]:w-[var(--font-size-sm)] [&_svg]:h-[var(--font-size-sm)]"
+          />
+        ) : undefined
+      }
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      defaultExpanded={defaultExpanded}
+      contentMaxHeight={contentMaxHeight}
+      collapsible={collapsible}
+      footer={
+        !isGenerating ? (
+          <>
+            <Button variant="text" size="sm" onClick={onView}>
+              {viewText}
+            </Button>
+            <div className="flex-1" />
+            {isBuilt ? (
+              <div className="flex items-center gap-1 text-xs text-success [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
+                <span>{builtText}</span>
+                {builtIcon ?? defaultBuiltIcon}
+              </div>
+            ) : (
+              <Button variant="secondary" size="sm" onClick={onBuild}>
+                {buildText}
+              </Button>
+            )}
+          </>
+        ) : undefined
+      }
+      className={className}
+    >
+      {isGenerating ? (
+        <div className="flex flex-col gap-1 relative overflow-hidden min-h-[var(--spacing-14)]">
+          {/* 点阵背景层 - 基础灰色点（与 QodeChatPanel PlanPart 一致） */}
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: 'radial-gradient(circle, var(--color-text-tertiary) 1px, transparent 1px)',
+              backgroundSize: '16px 16px',
+              backgroundRepeat: 'repeat',
+              opacity: 0.25,
+            }}
+          />
+          {/* 逐行点亮的点阵层 - 高亮带的竖向移动动画（与 QodeChatPanel 一致） */}
+          <div
+            className="absolute inset-0 pointer-events-none plan-part-shimmer-layer"
+            style={{
+              backgroundImage: 'radial-gradient(circle, var(--color-text-tertiary) 1px, transparent 1px)',
+              backgroundSize: '16px 16px',
+              backgroundRepeat: 'repeat',
+              maskImage: 'linear-gradient(to bottom, transparent 0%, var(--color-mask-shimmer-weak) 15%, var(--color-mask-shimmer-strong) 30%, var(--color-mask-shimmer-full) 50%, var(--color-mask-shimmer-strong) 70%, var(--color-mask-shimmer-weak) 85%, transparent 100%)',
+              maskSize: '100% 64px',
+              WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, var(--color-mask-shimmer-weak) 15%, var(--color-mask-shimmer-strong) 30%, var(--color-mask-shimmer-full) 50%, var(--color-mask-shimmer-strong) 70%, var(--color-mask-shimmer-weak) 85%, transparent 100%)',
+              WebkitMaskSize: '100% 64px',
+            }}
+          />
+          <style>{`
+            @keyframes plan-part-shimmer {
+              0% { mask-position: 0 -64px; -webkit-mask-position: 0 -64px; }
+              100% { mask-position: 0 calc(100% + 64px); -webkit-mask-position: 0 calc(100% + 64px); }
+            }
+            .plan-part-shimmer-layer {
+              animation: plan-part-shimmer 3s linear infinite;
+            }
+          `}</style>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-1">
+          {contentTitle != null && (
+            <div className="text-sm font-medium text-text">{contentTitle}</div>
+          )}
+          {contentBody != null && contentBody !== '' && (
+            <span className="text-xs leading-xs text-text whitespace-pre-wrap break-words">
+              {contentBody}
+            </span>
+          )}
+        </div>
+      )}
+    </CollapsibleCard>
+  )
+}
+
+PlanPart.displayName = 'PlanPart'

package/cli/registry/chat/question-part.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import { QuestionnaireLine, ArrowDownSLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 text-text-secondary'
+
+export interface QuestionPartProps {
+  title?: string
+  question: string
+  skipText?: string
+  runText?: string
+  askTimeText?: string
+  onSkip?: () => void
+  onRun?: () => void
+  onAskTimeChange?: (value: string) => void
+  contentMaxHeight?: number
+  collapsible?: boolean
+  className?: string
+  headerIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <QuestionnaireLine className={ICON_CLASS} />
+
+export function QuestionPart({
+  title = 'Initializing agent…',
+  question,
+  skipText = 'Skip ⌘⌫',
+  runText = 'Run ⌘⏎',
+  askTimeText = 'Ask any time',
+  onSkip,
+  onRun,
+  contentMaxHeight,
+  collapsible = true,
+  className,
+  headerIcon,
+}: QuestionPartProps) {
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="text-left">{title}</span>}
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      defaultExpanded
+      contentMaxHeight={contentMaxHeight}
+      collapsible={collapsible}
+      footer={
+        <>
+          <Button variant="ghost" size="sm" className="gap-1 py-0.5 px-0 text-text-secondary hover:text-text">
+            <span className="text-xs">{askTimeText}</span>
+            <ArrowDownSLine className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0" />
+          </Button>
+          <div className="flex-1" />
+          <Button variant="ghost" size="sm" onClick={onSkip} className="bg-fill text-text-tertiary hover:bg-fill-secondary hover:text-text-secondary">
+            {skipText}
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onRun}>
+            {runText}
+          </Button>
+        </>
+      }
+      className={className}
+    >
+      <div className="text-sm text-left">
+        <span className="text-text">{question}</span>
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+QuestionPart.displayName = 'QuestionPart'

package/cli/registry/chat/queue-indicator.tsx

@@ -0,0 +1,234 @@
+import { memo, useState, useCallback, useEffect } from 'react'
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Tooltip } from '../basic/tooltip'
+import { IconButton } from '../basic/icon-button'
+import { ArrowUpLine, CloseLine, ArrowDownSLine } from '../basic/icons-inline'
+import { Scrollbar } from '../basic/scrollbar'
+
+export interface QueueIndicatorItem {
+  id: string
+  label: ReactNode
+  attachmentCount?: number
+}
+
+export interface QueueIndicatorLabels {
+  title?: string
+  sendNowTip?: string
+  removeTip?: string
+  fileLabel?: string
+  filesLabel?: string
+}
+
+const DEFAULT_LABELS: Required<QueueIndicatorLabels> = {
+  title: 'In queue',
+  sendNowTip: 'Send now',
+  removeTip: 'Remove',
+  fileLabel: 'file',
+  filesLabel: 'files',
+}
+
+export interface QueueIndicatorProps {
+  items: QueueIndicatorItem[]
+  onRemoveItem?: (itemId: string) => void
+  onSendNow?: (itemId: string) => void
+  isStreaming?: boolean
+  hasStatusCardBelow?: boolean
+  labels?: QueueIndicatorLabels
+  defaultExpanded?: boolean
+  storageKey?: string
+  arrowUpIcon?: ReactNode
+  closeIcon?: ReactNode
+  arrowDownSIcon?: ReactNode
+}
+
+const arrowUpClass = 'w-3.5 h-3.5'
+const closeClass = 'w-3.5 h-3.5'
+const arrowDownClass = 'w-4 h-4 text-text-tertiary transition-transform duration-200'
+
+const QueueItemRow = memo(function QueueItemRow({
+  item,
+  onRemove,
+  onSendNow,
+  labels,
+  arrowUpIcon,
+  closeIcon,
+}: {
+  item: QueueIndicatorItem
+  onRemove?: (itemId: string) => void
+  onSendNow?: (itemId: string) => void
+  labels: Required<QueueIndicatorLabels>
+  arrowUpIcon: ReactNode
+  closeIcon: ReactNode
+}) {
+  const handleRemove = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onRemove?.(item.id)
+    },
+    [item.id, onRemove]
+  )
+
+  const handleSendNow = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onSendNow?.(item.id)
+    },
+    [item.id, onSendNow]
+  )
+
+  const attachmentCount = item.attachmentCount ?? 0
+  const fileWord = attachmentCount === 1 ? labels.fileLabel : labels.filesLabel
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 text-xs leading-xs hover:bg-fill-tertiary transition-colors cursor-default">
+      <span className="truncate flex-1 text-text">{item.label}</span>
+      {attachmentCount > 0 && (
+        <span className="shrink-0 text-xs leading-xs text-text-tertiary">
+          +{attachmentCount} {fileWord}
+        </span>
+      )}
+      <div className="flex items-center gap-0.5">
+        {onSendNow && (
+          <Tooltip content={labels.sendNowTip} side="top">
+            <IconButton
+              size="sm"
+              variant="ghost"
+              icon={arrowUpIcon}
+              aria-label={labels.sendNowTip}
+              className="shrink-0"
+              onClick={handleSendNow}
+            />
+          </Tooltip>
+        )}
+        {onRemove && (
+          <Tooltip content={labels.removeTip} side="top">
+            <IconButton
+              size="sm"
+              variant="ghost"
+              icon={closeIcon}
+              aria-label={labels.removeTip}
+              className="shrink-0"
+              onClick={handleRemove}
+            />
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  )
+})
+
+export const QueueIndicator = memo(function QueueIndicator({
+  items,
+  onRemoveItem,
+  onSendNow,
+  isStreaming = false,
+  hasStatusCardBelow = false,
+  labels: labelsProp,
+  defaultExpanded = true,
+  storageKey,
+  arrowUpIcon,
+  closeIcon,
+  arrowDownSIcon,
+}: QueueIndicatorProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+
+  const defaultArrowUp = arrowUpIcon ?? <ArrowUpLine className={arrowUpClass} />
+  const defaultClose = closeIcon ?? <CloseLine className={closeClass} />
+  const defaultArrowDown =
+    arrowDownSIcon ?? <ArrowDownSLine className={arrowDownClass} />
+
+  const [isExpanded, setIsExpanded] = useState(() => {
+    if (typeof window === 'undefined') return defaultExpanded
+    if (storageKey) {
+      const saved = localStorage.getItem(storageKey)
+      return saved !== null ? saved === 'true' : defaultExpanded
+    }
+    return defaultExpanded
+  })
+
+  useEffect(() => {
+    if (storageKey) {
+      localStorage.setItem(storageKey, String(isExpanded))
+    }
+  }, [storageKey, isExpanded])
+
+  if (items.length === 0) return null
+
+  const containerStyles = cn(
+    'w-full overflow-hidden flex flex-col',
+    'border border-b-0 border-border border-border-tertiary bg-bg-base',
+    !hasStatusCardBelow && 'rounded-t-xl'
+  )
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+      className={containerStyles}
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsExpanded(!isExpanded)
+          }
+        }}
+        aria-expanded={isExpanded}
+        aria-label={`${isExpanded ? 'Collapse' : 'Expand'} queue`}
+        className="flex items-center justify-between px-3 py-1 h-7 cursor-pointer bg-fill-tertiary hover:bg-fill-secondary transition-colors duration-150 focus:outline-none"
+      >
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <span
+            className={cn(
+              'inline-flex items-center justify-center',
+              !isExpanded && '-rotate-90'
+            )}
+          >
+            {defaultArrowDown}
+          </span>
+          <span className="text-xs leading-xs font-medium text-text-secondary">
+            {labels.title}
+          </span>
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="overflow-hidden"
+          >
+            <Scrollbar
+              scrollbarVisibility="auto"
+              maxHeight={208}
+              className="border-t border-border-tertiary scroll-smooth"
+            >
+              {items.map((item) => (
+                <QueueItemRow
+                  key={item.id}
+                  item={item}
+                  onRemove={onRemoveItem}
+                  onSendNow={onSendNow}
+                  labels={labels}
+                  arrowUpIcon={defaultArrowUp}
+                  closeIcon={defaultClose}
+                />
+              ))}
+            </Scrollbar>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  )
+})
+
+QueueIndicator.displayName = 'QueueIndicator'