@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/cowork/src/mainview/components/right/ContextPanel.tsx

@@ -0,0 +1,133 @@
+/**
+ * 上下文面板 — 文件夹 / 连接器 / 工作文件
+ */
+import { useEffect } from 'react';
+import { Folder, Globe, FileText, ChevronDown, ChevronRight } from 'lucide-react';
+import { useContextStore } from '../../stores/use-context-store';
+import { useViewStore } from '../../stores/use-view-store';
+
+function SubSection({
+	label,
+	icon: Icon,
+	count,
+	collapsed,
+	onToggle,
+	children,
+}: {
+	label: string;
+	icon: typeof Folder;
+	count?: number;
+	collapsed: boolean;
+	onToggle: () => void;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="mb-1">
+			<button
+				onClick={onToggle}
+				className="w-full flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
+			>
+				{collapsed ? (
+					<ChevronRight className="w-3.5 h-3.5" />
+				) : (
+					<ChevronDown className="w-3.5 h-3.5" />
+				)}
+				<Icon className="w-3.5 h-3.5" />
+				<span>{label}</span>
+				{count !== undefined && (
+					<span className="ml-auto text-[var(--color-text-tertiary)]">{count}</span>
+				)}
+			</button>
+			{!collapsed && <div className="pl-7 pt-0.5">{children}</div>}
+		</div>
+	);
+}
+
+export function ContextPanel() {
+	const folders = useContextStore((s) => s.folders);
+	const connectors = useContextStore((s) => s.connectors);
+	const workingFiles = useContextStore((s) => s.workingFiles);
+	const fetchAll = useContextStore((s) => s.fetchAll);
+
+	const collapsed = useViewStore((s) => s.rightPanelCollapsed['context']);
+	const toggle = useViewStore((s) => s.toggleRightPanel);
+	const rightCollapsed = useViewStore((s) => s.rightPanelCollapsed);
+
+	useEffect(() => {
+		fetchAll();
+	}, []);
+
+	return (
+		<div className="border-b border-[var(--color-border-secondary)]">
+			<button
+				onClick={() => toggle('context')}
+				className="w-full flex items-center gap-1.5 px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors"
+			>
+				{collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+				Context
+			</button>
+			{!collapsed && (
+				<div className="px-3 pb-3">
+					{/* Selected folders */}
+					<SubSection
+						label="Selected folders"
+						icon={Folder}
+						count={folders.length}
+						collapsed={!!rightCollapsed['context-folders']}
+						onToggle={() => toggle('context-folders')}
+					>
+						{folders.map((f) => (
+							<div
+								key={f.path}
+								className="flex items-center gap-2 px-2 py-1 text-xs text-[var(--color-text-secondary)]"
+							>
+								<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-text-accent)]" />
+								<span className="truncate">{f.name}</span>
+							</div>
+						))}
+					</SubSection>
+
+					{/* Connectors */}
+					<SubSection
+						label="Connectors"
+						icon={Globe}
+						count={connectors.filter((c) => c.enabled).length}
+						collapsed={!!rightCollapsed['context-connectors']}
+						onToggle={() => toggle('context-connectors')}
+					>
+						{connectors.map((c) => (
+							<div
+								key={c.id}
+								className="flex items-center gap-2 px-2 py-1 text-xs text-[var(--color-text-secondary)]"
+							>
+								<span
+									className={`w-1.5 h-1.5 rounded-full ${c.enabled ? 'bg-green-500' : 'bg-[var(--color-text-tertiary)]'}`}
+								/>
+								<span className="truncate">{c.name}</span>
+							</div>
+						))}
+					</SubSection>
+
+					{/* Working files */}
+					<SubSection
+						label="Working files"
+						icon={FileText}
+						count={workingFiles.length}
+						collapsed={!!rightCollapsed['context-files']}
+						onToggle={() => toggle('context-files')}
+					>
+						{workingFiles.map((f) => (
+							<div
+								key={f.path}
+								className="flex items-center gap-2 px-2 py-1 text-xs text-[var(--color-text-secondary)]"
+							>
+								<FileText className="w-3 h-3 text-[var(--color-text-tertiary)]" />
+								<span className="truncate">{f.name}</span>
+							</div>
+						))}
+					</SubSection>
+				</div>
+			)}
+		</div>
+	);
+}

package/templates/cowork/src/mainview/components/right/ElementPicker.tsx

@@ -0,0 +1,206 @@
+/**
+ * 元素选择器 — 在 iframe 中选取元素，提取 CSS selector
+ *
+ * 工作方式：
+ * 1. 启用 inspect 模式 → 在 iframe 内容文档添加事件监听
+ * 2. hover → 高亮元素；click → 提取 CSS selector
+ * 3. 用户可复制 selector 到聊天输入框
+ */
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { MousePointer2, Copy, Check } from 'lucide-react';
+
+interface ElementPickerProps {
+	iframeRef: React.RefObject<HTMLIFrameElement | null>;
+	onElementSelected: (selector: string, tagName: string) => void;
+	enabled: boolean;
+}
+
+function generateSelector(el: Element): string {
+	if (!el || el === document.documentElement) return 'html';
+	if (el.id) return `#${CSS.escape(el.id)}`;
+
+	const tag = el.tagName.toLowerCase();
+	const parent = el.parentElement;
+	if (!parent) return tag;
+
+	const siblings = Array.from(parent.children).filter((c) => c.tagName === el.tagName);
+	const path = generateSelector(parent);
+
+	if (siblings.length <= 1) return `${path} > ${tag}`;
+	const index = Array.from(parent.children).indexOf(el) + 1;
+	return `${path} > ${tag}:nth-child(${index})`;
+}
+
+export function ElementPicker({ iframeRef, onElementSelected, enabled }: ElementPickerProps) {
+	const [active, setActive] = useState(false);
+	const [selectedEl, setSelectedEl] = useState<{ selector: string; tagName: string } | null>(null);
+	const [copied, setCopied] = useState(false);
+
+	const highlightRef = useRef<Element | null>(null);
+	const activeRef = useRef(false);
+
+	// 用 ref 保存回调，避免事件监听中的闭包陈旧问题
+	const onElementSelectedRef = useRef(onElementSelected);
+	onElementSelectedRef.current = onElementSelected;
+
+	const removeHighlight = useCallback(() => {
+		if (highlightRef.current) {
+			(highlightRef.current as HTMLElement).style.outline = '';
+			highlightRef.current = null;
+		}
+	}, []);
+
+	// 用 ref 保存稳定的事件处理函数
+	const handleRef = useRef({
+		click: null as ((e: MouseEvent) => void) | null,
+		over: null as ((e: MouseEvent) => void) | null,
+		out: null as ((e: MouseEvent) => void) | null,
+	});
+
+	const addListeners = useCallback(
+		(doc: Document) => {
+			removeHighlight();
+
+			const clickHandler = (e: MouseEvent) => {
+				if (!activeRef.current) return;
+				e.preventDefault();
+				e.stopPropagation();
+
+				const target = e.target as Element;
+				if (target === doc.documentElement) return;
+
+				const selector = generateSelector(target);
+				const tagName = target.tagName.toLowerCase();
+
+				setSelectedEl({ selector, tagName });
+				onElementSelectedRef.current(selector, tagName);
+
+				setActive(false);
+				activeRef.current = false;
+				removeListeners(doc);
+				doc.body.style.cursor = '';
+			};
+
+			const overHandler = (e: MouseEvent) => {
+				if (!activeRef.current) return;
+				const target = e.target as Element;
+				if (target === doc.documentElement) return;
+				removeHighlight();
+				(target as HTMLElement).style.outline = '2px solid #6366f1';
+				(target as HTMLElement).style.outlineOffset = '-2px';
+				highlightRef.current = target;
+			};
+
+			const outHandler = (_e: MouseEvent) => {
+				removeHighlight();
+			};
+
+			handleRef.current = { click: clickHandler, over: overHandler, out: outHandler };
+
+			doc.addEventListener('click', clickHandler, true);
+			doc.addEventListener('mouseover', overHandler, true);
+			doc.addEventListener('mouseout', outHandler, true);
+			doc.body.style.cursor = 'crosshair';
+		},
+		[removeHighlight],
+	);
+
+	const removeListeners = useCallback((doc: Document) => {
+		const { click, over, out } = handleRef.current;
+		if (click) doc.removeEventListener('click', click, true);
+		if (over) doc.removeEventListener('mouseover', over, true);
+		if (out) doc.removeEventListener('mouseout', out, true);
+		doc.body.style.cursor = '';
+		handleRef.current = { click: null, over: null, out: null };
+	}, []);
+
+	const toggleInspect = useCallback(() => {
+		const nextActive = !active;
+		setActive(nextActive);
+		activeRef.current = nextActive;
+
+		if (!nextActive) {
+			setSelectedEl(null);
+		}
+
+		const iframe = iframeRef.current;
+		if (!iframe) return;
+
+		try {
+			const doc = iframe.contentDocument || iframe.contentWindow?.document;
+			if (!doc) return;
+
+			if (nextActive) {
+				addListeners(doc);
+			} else {
+				removeListeners(doc);
+				removeHighlight();
+			}
+		} catch {
+			setActive(false);
+			activeRef.current = false;
+		}
+	}, [active, iframeRef, addListeners, removeListeners, removeHighlight]);
+
+	const handleCopy = useCallback(() => {
+		if (!selectedEl) return;
+		navigator.clipboard.writeText(selectedEl.selector);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [selectedEl]);
+
+	// 组件卸载时清理
+	useEffect(() => {
+		return () => {
+			const iframe = iframeRef.current;
+			if (iframe) {
+				try {
+					const doc = iframe.contentDocument || iframe.contentWindow?.document;
+					if (doc) removeListeners(doc);
+				} catch {
+					/* ignore */
+				}
+			}
+			removeHighlight();
+		};
+	}, [iframeRef, removeListeners, removeHighlight]);
+
+	if (!enabled) return null;
+
+	return (
+		<div className="border-t border-[var(--color-border-secondary)]">
+			<div className="flex items-center gap-1 px-3 py-2">
+				<button
+					onClick={toggleInspect}
+					className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all ${
+						active
+							? 'bg-[var(--color-accent)] text-white shadow-sm'
+							: 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
+					}`}
+				>
+					<MousePointer2 className={`w-3.5 h-3.5 ${active ? 'animate-pulse' : ''}`} />
+					{active ? '选取中...' : '选取元素'}
+				</button>
+			</div>
+
+			{selectedEl && (
+				<div className="flex items-center gap-1.5 px-3 pb-2">
+					<div className="flex-1 px-2.5 py-1.5 rounded-md bg-[var(--color-bg-tertiary)] font-mono text-xs text-[var(--color-text-accent)] truncate">
+						{selectedEl.selector}
+					</div>
+					<button
+						onClick={handleCopy}
+						className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-tertiary)] hover:text-[var(--color-text-accent)]"
+						title="复制选择器"
+					>
+						{copied ? (
+							<Check className="w-3.5 h-3.5 text-green-500" />
+						) : (
+							<Copy className="w-3.5 h-3.5" />
+						)}
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}

package/templates/cowork/src/mainview/components/right/PreviewBlock.tsx

@@ -0,0 +1,155 @@
+/**
+ * 右侧预览区块 — 浏览器预览 + 地址栏 + 元素选择器
+ *
+ * 两种使用场景：
+ * - Code Tab 主内容：自带的标题栏 + 关闭（closeTab）
+ * - 聊天链接展开预览：由父级传入 onClose（closePreview），复用同一套 UI
+ */
+import { useRef, useCallback, useState } from 'react';
+import { Globe, X, ArrowLeft, RotateCw, Loader2 } from 'lucide-react';
+import { usePreviewStore } from '../../stores/use-preview-store';
+import { ElementPicker } from './ElementPicker';
+
+interface PreviewBlockProps {
+	/** 关闭按钮回调；未传则使用 store 的 closeTab（Code Tab 场景） */
+	onClose?: () => void;
+}
+
+export function PreviewBlock({ onClose }: PreviewBlockProps) {
+	const currentTab = usePreviewStore((s) => s.currentTab);
+	const closeTab = usePreviewStore((s) => s.closeTab);
+	const openUrl = usePreviewStore((s) => s.openUrl);
+	const navigate = usePreviewStore((s) => s.navigate);
+	const navState = usePreviewStore((s) => s.navState);
+	const iframeRef = useRef<HTMLIFrameElement | null>(null);
+	const [urlInput, setUrlInput] = useState(currentTab?.url ?? '');
+
+	const handleElementSelected = useCallback((selector: string, tagName: string) => {
+		console.warn(`[ElementPicker] Selected ${tagName}: ${selector}`);
+	}, []);
+
+	const handleUrlSubmit = useCallback(() => {
+		if (urlInput.trim()) openUrl(urlInput.trim());
+	}, [urlInput, openUrl]);
+
+	const handleClose = onClose ?? closeTab;
+
+	// 加载中且尚无 tab：显示加载态，避免空状态文案误闪
+	if (!currentTab && navState === 'loading') {
+		return (
+			<div className="flex-1 flex flex-col">
+				<div className="flex items-center justify-between px-3 py-2.5 border-b border-[var(--color-border-secondary)]">
+					<span className="text-sm font-semibold text-[var(--color-text-primary)]">Preview</span>
+					{onClose && (
+						<button
+							onClick={handleClose}
+							title="关闭预览"
+							className="p-1 rounded hover:bg-[var(--color-bg-hover)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+						>
+							<X className="w-4 h-4" />
+						</button>
+					)}
+				</div>
+				<div className="flex-1 flex items-center justify-center">
+					<Loader2 className="w-5 h-5 animate-spin text-[var(--color-text-tertiary)]" />
+				</div>
+			</div>
+		);
+	}
+
+	// 空状态：提示用户从聊天中点击 localhost 链接打开预览
+	if (!currentTab) {
+		return (
+			<div className="flex-1 flex flex-col">
+				<div className="flex items-center justify-between px-3 py-2.5 border-b border-[var(--color-border-secondary)]">
+					<span className="text-sm font-semibold text-[var(--color-text-primary)]">Preview</span>
+					{onClose && (
+						<button
+							onClick={handleClose}
+							title="关闭预览"
+							className="p-1 rounded hover:bg-[var(--color-bg-hover)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+						>
+							<X className="w-4 h-4" />
+						</button>
+					)}
+				</div>
+				<div className="flex-1 flex items-center justify-center px-4">
+					<div className="text-center w-full">
+						<div className="w-12 h-12 rounded-xl bg-[var(--color-bg-tertiary)] flex items-center justify-center mx-auto mb-3">
+							<Globe className="w-6 h-6 text-[var(--color-text-tertiary)]" />
+						</div>
+						<p className="text-sm text-[var(--color-text-secondary)] mb-1">暂无预览</p>
+						<p className="text-xs text-[var(--color-text-tertiary)] leading-relaxed">
+							当聊天中出现 localhost 链接时，点击即可在此打开预览。
+						</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col h-full">
+			{/* 标题栏 */}
+			<div className="flex items-center justify-between px-3 py-2 border-b border-[var(--color-border-secondary)]">
+				<div className="flex items-center gap-2 min-w-0">
+					<Globe className="w-3.5 h-3.5 text-[var(--color-text-accent)] flex-shrink-0" />
+					<span className="text-sm font-semibold text-[var(--color-text-primary)]">Preview</span>
+				</div>
+				<button
+					onClick={handleClose}
+					className="p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-tertiary)]"
+					title="关闭预览"
+				>
+					<X className="w-3.5 h-3.5" />
+				</button>
+			</div>
+
+			{/* 地址栏 */}
+			<div className="flex items-center gap-1 px-2 py-1.5 border-b border-[var(--color-border-secondary)]">
+				<button
+					onClick={() => navigate('back')}
+					disabled={!currentTab.canGoBack}
+					className="p-1 rounded hover:bg-[var(--color-bg-hover)] disabled:opacity-30 transition-colors text-[var(--color-text-tertiary)]"
+				>
+					<ArrowLeft className="w-3.5 h-3.5" />
+				</button>
+				<button
+					onClick={() => navigate('reload')}
+					className="p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-tertiary)]"
+				>
+					{navState === 'loading' ? (
+						<Loader2 className="w-3.5 h-3.5 animate-spin" />
+					) : (
+						<RotateCw className="w-3.5 h-3.5" />
+					)}
+				</button>
+				<input
+					value={urlInput || currentTab.url}
+					onChange={(e) => setUrlInput(e.target.value)}
+					onKeyDown={(e) => e.key === 'Enter' && handleUrlSubmit()}
+					placeholder="URL"
+					className="flex-1 min-w-0 px-2 py-1 rounded bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[11px] font-mono text-[var(--color-text-primary)] focus:border-[var(--color-text-accent)] outline-none transition-colors"
+				/>
+			</div>
+
+			{/* iframe 浏览器 */}
+			<div className="flex-1 min-h-[150px] overflow-hidden bg-white mx-3 my-2 rounded-lg border border-[var(--color-border-primary)]">
+				<iframe
+					ref={iframeRef}
+					src={currentTab.url}
+					className="w-full h-full border-0"
+					title={currentTab.url}
+					sandbox="allow-scripts allow-same-origin allow-forms"
+				/>
+			</div>
+
+			{/* 元素选择器 */}
+			<ElementPicker
+				iframeRef={iframeRef}
+				onElementSelected={handleElementSelected}
+				enabled={true}
+			/>
+		</div>
+	);
+}

package/templates/cowork/src/mainview/components/right/ProgressPanel.tsx

@@ -0,0 +1,85 @@
+/**
+ * 进度面板 — 步骤可视化（带状态文字 + 详情）
+ */
+import {
+	CheckCircle2,
+	Circle,
+	Loader2,
+	AlertCircle,
+	ChevronDown,
+	ChevronRight,
+	type LucideIcon,
+} from 'lucide-react';
+import { useTaskStore, type Step } from '../../stores/use-task-store';
+import { useViewStore } from '../../stores/use-view-store';
+
+const STEP_ICON: Record<Step['status'], { icon: LucideIcon; color: string; bg: string }> = {
+	pending: { icon: Circle, color: 'text-slate-400', bg: 'bg-slate-100 dark:bg-slate-700/50' },
+	running: { icon: Loader2, color: 'text-indigo-500', bg: 'bg-indigo-100 dark:bg-indigo-900/30' },
+	done: { icon: CheckCircle2, color: 'text-green-600', bg: 'bg-green-100 dark:bg-green-900/30' },
+	error: { icon: AlertCircle, color: 'text-red-500', bg: 'bg-red-100 dark:bg-red-900/30' },
+};
+
+export function ProgressPanel() {
+	const currentTaskId = useTaskStore((s) => s.currentTaskId);
+	const tasks = useTaskStore((s) => s.tasks);
+	const currentTask = tasks.find((t) => t.id === currentTaskId);
+	const steps = currentTask?.progress?.steps ?? [];
+
+	const collapsed = useViewStore((s) => s.rightPanelCollapsed['progress']);
+	const toggle = useViewStore((s) => s.toggleRightPanel);
+
+	return (
+		<div className="border-b border-[var(--color-border-secondary)]">
+			<button
+				onClick={() => toggle('progress')}
+				className="w-full flex items-center gap-2 px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors"
+			>
+				{collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+				Progress
+				{steps.length > 0 && (
+					<span className="ml-auto text-xs font-normal text-[var(--color-text-tertiary)]">
+						{steps.filter((s) => s.status === 'done').length}/{steps.length}
+					</span>
+				)}
+			</button>
+			{!collapsed && (
+				<div className="px-4 pb-4">
+					{steps.length === 0 ? (
+						<p className="text-xs text-[var(--color-text-tertiary)] leading-relaxed">
+							Steps will show as the task unfolds.
+						</p>
+					) : (
+						<div className="space-y-2.5">
+							{steps.map((step, i) => {
+								const cfg = STEP_ICON[step.status] ?? STEP_ICON.pending;
+								const Icon = cfg.icon;
+								return (
+									<div key={i} className="flex items-center gap-2.5">
+										<div
+											className={`w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 ${cfg.bg}`}
+										>
+											<Icon
+												className={`w-3.5 h-3.5 ${cfg.color} ${step.status === 'running' ? 'animate-spin' : ''}`}
+											/>
+										</div>
+										<div className="flex-1 min-w-0">
+											<div className="text-[13px] text-[var(--color-text-secondary)] truncate">
+												{step.label}
+											</div>
+											{step.detail && (
+												<div className="text-[11px] text-[var(--color-text-tertiary)] truncate mt-0.5">
+													{step.detail}
+												</div>
+											)}
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}