@dyyz1993/create-agent 2.1.1 → 2.1.2

package/templates/agent/src/mainview/components/feed/FeedPanel.tsx

@@ -1,24 +1,24 @@
-import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Rss, Send } from "lucide-react";
-import { apiClient } from "../../lib/api-client";
-import { useLogStore } from "../../stores/use-log-store";
-import { useConnectionStore } from "../../stores/use-connection-store";
-import { useFeedStore, useEventStreamStore, type SubEventType } from "../../stores/use-feed-store";
-import type { FeedCategory } from "@shared/modules/feed";
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Rss, Send } from 'lucide-react';
+import { apiClient } from '../../lib/api-client';
+import { useLogStore } from '../../stores/use-log-store';
+import { useConnectionStore } from '../../stores/use-connection-store';
+import { useFeedStore, useEventStreamStore, type SubEventType } from '../../stores/use-feed-store';
+import type { FeedCategory } from '@shared/modules/feed';
 
-const CATEGORIES: FeedCategory[] = ["tech", "news", "general"];
-const EVENT_TYPES: SubEventType[] = ["feed.update", "chat.message", "timer.tick"];
+const CATEGORIES: FeedCategory[] = ['tech', 'news', 'general'];
+const EVENT_TYPES: SubEventType[] = ['feed.update', 'chat.message', 'timer.tick'];
 const FILTER_PRESETS: Record<SubEventType, string[]> = {
-	"feed.update": ["", '{"category":"tech"}', '{"category":"news"}', '{"author":"alice"}'],
-	"chat.message": ["", '{"role":"user"}', '{"role":"assistant"}'],
-	"timer.tick": ["", '{"channel":"default"}'],
+	'feed.update': ['', '{"category":"tech"}', '{"category":"news"}', '{"author":"alice"}'],
+	'chat.message': ['', '{"role":"user"}', '{"role":"assistant"}'],
+	'timer.tick': ['', '{"channel":"default"}'],
 };
 
 const CATEGORY_COLORS: Record<FeedCategory, string> = {
-	tech: "bg-blue-600/30 text-blue-300",
-	news: "bg-amber-600/30 text-amber-300",
-	general: "bg-green-600/30 text-green-300",
+	tech: 'bg-blue-600/30 text-blue-300',
+	news: 'bg-amber-600/30 text-amber-300',
+	general: 'bg-[var(--color-text-success)]/30 text-[var(--color-text-success)]',
 };
 
 export function FeedPanel() {
@@ -53,13 +53,13 @@ export function FeedPanel() {
 
 		const setup = async () => {
 			subId = await apiClient.subscribe(
-				"feed.update",
+				'feed.update',
 				(payload) => {
 					addPost(payload as (typeof posts)[number]);
 				},
-				{}
+				{},
 			);
-			addLog("Subscribed to feed.update (no filter)");
+			addLog('Subscribed to feed.update (no filter)');
 
 			await loadPosts();
 		};
@@ -75,7 +75,7 @@ export function FeedPanel() {
 			<div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
 				<h2 className="text-sm font-semibold flex items-center gap-1.5">
 					<Rss className="w-4 h-4 text-[var(--color-text-accent)]" />
-					{t("feed.title")}
+					{t('feed.title')}
 					{posts.length > 0 && (
 						<span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
 							{posts.length}
@@ -87,17 +87,18 @@ export function FeedPanel() {
 			<div className="flex-1 overflow-y-auto p-4 space-y-4">
 				<div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
 					<div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
-						{t("feed.newPost")}
+						{t('feed.newPost')}
 					</div>
 					<div className="flex gap-2">
 						<input
 							type="text"
 							value={author}
 							onChange={(e) => setAuthor(e.target.value)}
-							placeholder={t("feed.authorPlaceholder")}
+							placeholder={t('feed.authorPlaceholder')}
 							className="w-24 px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
 						/>
 						<select
+							aria-label={t('feed.newPost')}
 							value={category}
 							onChange={(e) => setCategory(e.target.value as FeedCategory)}
 							className="px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
@@ -114,8 +115,8 @@ export function FeedPanel() {
 							type="text"
 							value={content}
 							onChange={(e) => setContent(e.target.value)}
-							onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && createPost()}
-							placeholder={t("feed.postPlaceholder")}
+							onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && createPost()}
+							placeholder={t('feed.postPlaceholder')}
 							className="flex-1 px-3 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
 						/>
 						<button
@@ -124,21 +125,22 @@ export function FeedPanel() {
 							className="px-3 py-1.5 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 rounded transition-colors flex items-center gap-1"
 						>
 							<Send className="w-3 h-3" />
-							{t("feed.post")}
+							{t('feed.post')}
 						</button>
 					</div>
 				</div>
 
 				<div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
 					<div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
-						{t("feed.subscribeWithFilter")}
+						{t('feed.subscribeWithFilter')}
 					</div>
 					<div className="flex gap-2 items-center">
 						<select
+							aria-label={t('feed.eventStream')}
 							value={activeEventType}
 							onChange={(e) => {
 								setActiveEventType(e.target.value as SubEventType);
-								setActiveFilter("");
+								setActiveFilter('');
 							}}
 							className="px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
 						>
@@ -152,22 +154,22 @@ export function FeedPanel() {
 							type="text"
 							value={activeFilter}
 							onChange={(e) => setActiveFilter(e.target.value)}
-							placeholder={t("feed.filterPlaceholder")}
+							placeholder={t('feed.filterPlaceholder')}
 							className="flex-1 px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none font-mono"
 						/>
 						{!subscribed ? (
 							<button
 								onClick={handleSubscribe}
-								className="px-3 py-1.5 text-xs bg-green-600 hover:bg-green-700 rounded transition-colors whitespace-nowrap"
+								className="px-3 py-1.5 text-xs bg-[var(--color-text-success)] hover:opacity-80 rounded transition-colors whitespace-nowrap"
 							>
-								{t("feed.subscribe")}
+								{t('feed.subscribe')}
 							</button>
 						) : (
 							<button
 								onClick={handleUnsubscribe}
-								className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors whitespace-nowrap"
+								className="px-3 py-1.5 text-xs bg-[var(--color-text-error)] hover:opacity-80 rounded transition-colors whitespace-nowrap"
 							>
-								{t("feed.unsubscribe")}
+								{t('feed.unsubscribe')}
 							</button>
 						)}
 					</div>
@@ -178,11 +180,11 @@ export function FeedPanel() {
 								onClick={() => setActiveFilter(preset)}
 								className={`px-2 py-0.5 text-[10px] rounded border transition-colors ${
 									activeFilter === preset
-										? "border-[var(--color-accent)] bg-[var(--color-accent)]/30 text-[var(--color-text-accent)]"
-										: "border-[var(--color-border-secondary)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]"
+										? 'border-[var(--color-accent)] bg-[var(--color-accent)]/30 text-[var(--color-text-accent)]'
+										: 'border-[var(--color-border-secondary)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
 								}`}
 							>
-								{preset || t("feed.noFilter")}
+								{preset || t('feed.noFilter')}
 							</button>
 						))}
 					</div>
@@ -192,11 +194,11 @@ export function FeedPanel() {
 					<div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
 						<div className="flex items-center justify-between">
 							<div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
-								{t("feed.eventStream")}
+								{t('feed.eventStream')}
 							</div>
 							{subscribed && (
-								<span className="px-1.5 py-0.5 bg-green-600/30 text-green-400 rounded text-[10px] animate-pulse">
-									{t("feed.live")}
+								<span className="px-1.5 py-0.5 bg-[var(--color-text-success)]/30 text-[var(--color-text-success)] rounded text-[10px] animate-pulse">
+									{t('feed.live')}
 								</span>
 							)}
 						</div>
@@ -211,13 +213,13 @@ export function FeedPanel() {
 										<span className="text-[10px]">
 											{Object.keys(entry.filter).length > 0
 												? `filter: ${JSON.stringify(entry.filter)}`
-												: t("feed.noFilter")}
+												: t('feed.noFilter')}
 										</span>
 										<span className="text-[10px] ml-auto">
 											{new Date(entry.timestamp).toLocaleTimeString()}
 										</span>
 									</div>
-									<pre className="text-cyan-300 mt-0.5 whitespace-pre-wrap break-all">
+									<pre className="text-[var(--color-text-info)] mt-0.5 whitespace-pre-wrap break-all">
 										{JSON.stringify(entry.payload, null, 0)}
 									</pre>
 								</div>
@@ -228,7 +230,7 @@ export function FeedPanel() {
 
 				{posts.length === 0 ? (
 					<div className="flex items-center justify-center py-8 text-[var(--color-text-placeholder)] text-xs">
-						{t("feed.noPostsYet")}
+						{t('feed.noPostsYet')}
 					</div>
 				) : (
 					<div className="space-y-2">

package/templates/agent/src/mainview/components/file-preview/FilePreviewOverlay.tsx

@@ -1,56 +1,75 @@
-import { FileText, X } from "lucide-react";
-import type { FilePreview } from "../../types";
-import { formatSize } from "../../utils/file-utils";
-import { VirtualizedCodeView } from "./VirtualizedCodeView";
+import { FileText, X } from 'lucide-react';
+import type { FilePreview } from '../../types';
+import { formatSize } from '../../utils/file-utils';
+import { VirtualizedCodeView } from './VirtualizedCodeView';
 
 interface FilePreviewOverlayProps {
-  preview: FilePreview;
-  loading: boolean;
-  onClose: () => void;
+	preview: FilePreview;
+	loading: boolean;
+	onClose: () => void;
+	scrollToLine?: number;
+	onScrolledToLine?: () => void;
 }
 
-export function FilePreviewOverlay({ preview, loading, onClose }: FilePreviewOverlayProps) {
-  return (
-    <div className="absolute inset-0 z-10 bg-[var(--color-bg-primary)]/95 flex flex-col overflow-hidden">
-      {/* File header with close button */}
-      <div className="flex items-center justify-between px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
-        <div className="flex items-center gap-2">
-          <FileText className="w-4 h-4 text-[var(--color-text-tertiary)]" />
-          <span className="text-sm font-medium text-[var(--color-text-secondary)]">{preview.name}</span>
-          {preview.size > 0 && (
-            <span className="text-xs text-[var(--color-text-placeholder)]">{formatSize(preview.size)}</span>
-          )}
-          {preview.totalLines != null && (
-            <span className="text-xs text-[var(--color-text-placeholder)]">{preview.totalLines} lines</span>
-          )}
-        </div>
-        <button
-          onClick={onClose}
-          className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
+export function FilePreviewOverlay({
+	preview,
+	loading,
+	onClose,
+	scrollToLine,
+	onScrolledToLine,
+}: FilePreviewOverlayProps) {
+	return (
+		<div className="absolute inset-0 z-10 bg-[var(--color-bg-primary)]/95 flex flex-col overflow-hidden">
+			{/* File header with close button */}
+			<div className="flex items-center justify-between px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
+				<div className="flex items-center gap-2">
+					<FileText className="w-4 h-4 text-[var(--color-text-tertiary)]" />
+					<span className="text-sm font-medium text-[var(--color-text-secondary)]">
+						{preview.name}
+					</span>
+					{preview.size > 0 && (
+						<span className="text-xs text-[var(--color-text-placeholder)]">
+							{formatSize(preview.size)}
+						</span>
+					)}
+					{preview.totalLines != null && (
+						<span className="text-xs text-[var(--color-text-placeholder)]">
+							{preview.totalLines} lines
+						</span>
+					)}
+				</div>
+				<button
+					onClick={onClose}
+					className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors"
+				>
+					<X className="w-4 h-4" />
+				</button>
+			</div>
 
-      {/* File content — flex-col so VirtualizedCodeView's flex-1 works */}
-      <div className="flex-1 min-h-0 flex flex-col">
-        {loading ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-text-tertiary)] text-sm">
-            <div className="w-5 h-5 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mr-2" />
-            Loading...
-          </div>
-        ) : preview.isImage && preview.imageUrl ? (
-          <div className="flex items-center justify-center h-full p-4 bg-[#1a1a2e]">
-            <img
-              src={preview.imageUrl}
-              alt={preview.name}
-              className="max-w-full max-h-full object-contain rounded"
-            />
-          </div>
-        ) : preview.content ? (
-          <VirtualizedCodeView code={preview.content} filename={preview.name} />
-        ) : null}
-      </div>
-    </div>
-  );
+			{/* File content — flex-col so VirtualizedCodeView's flex-1 works */}
+			<div className="flex-1 min-h-0 flex flex-col">
+				{loading ? (
+					<div className="flex items-center justify-center h-full text-[var(--color-text-tertiary)] text-sm">
+						<div className="w-5 h-5 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mr-2" />
+						Loading...
+					</div>
+				) : preview.isImage && preview.imageUrl ? (
+					<div className="flex items-center justify-center h-full p-4 bg-[#1a1a2e]">
+						<img
+							src={preview.imageUrl}
+							alt={preview.name}
+							className="max-w-full max-h-full object-contain rounded"
+						/>
+					</div>
+				) : preview.content ? (
+					<VirtualizedCodeView
+						code={preview.content}
+						filename={preview.name}
+						scrollToLine={scrollToLine}
+						onScrolledToLine={onScrolledToLine}
+					/>
+				) : null}
+			</div>
+		</div>
+	);
 }

package/templates/agent/src/mainview/components/file-preview/VirtualizedCodeView.tsx

@@ -1,22 +1,28 @@
-import { useRef, useMemo } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { Highlight, themes } from "prism-react-renderer";
-import { getLanguage } from "../../utils/file-utils";
+import { useRef, useMemo, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Highlight, themes } from 'prism-react-renderer';
+import { getLanguage } from '../../utils/file-utils';
 
 interface VirtualizedCodeViewProps {
 	code: string;
 	filename: string;
+	scrollToLine?: number;
+	onScrolledToLine?: () => void;
 }
 
 /** Lines longer than this skip syntax highlighting (plain text instead) */
 const LONG_LINE_THRESHOLD = 5000;
 
-export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps) {
+export function VirtualizedCodeView({
+	code,
+	filename,
+	scrollToLine,
+	onScrolledToLine,
+}: VirtualizedCodeViewProps) {
 	const parentRef = useRef<HTMLDivElement>(null);
 	const language = getLanguage(filename);
-	const lines = useMemo(() => code.split("\n"), [code]);
+	const lines = useMemo(() => code.split('\n'), [code]);
 
-	// Detect minified files: avg line length > 500 chars
 	const avgLineLength = code.length / Math.max(lines.length, 1);
 	const usePlainText = !language || avgLineLength > 500;
 
@@ -27,31 +33,38 @@ export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps
 		overscan: 20,
 	});
 
+	useEffect(() => {
+		if (scrollToLine != null && scrollToLine > 0 && scrollToLine <= lines.length) {
+			virtualizer.scrollToIndex(scrollToLine - 1, { align: 'center' });
+			onScrolledToLine?.();
+		}
+	}, [scrollToLine, lines.length, virtualizer, onScrolledToLine]);
+
 	// --- Plain text path: no Prism tokenization ---
 	if (usePlainText) {
 		return (
 			<div
 				ref={parentRef}
 				className="flex-1 min-h-0 overflow-auto"
-				style={{ background: "#011627" }}
+				style={{ background: '#011627' }}
 			>
 				<div
-					style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+					style={{ height: `${virtualizer.getTotalSize()}px`, width: '100%', position: 'relative' }}
 				>
 					{virtualizer.getVirtualItems().map((vr) => (
 						<div
 							key={vr.key}
 							style={{
-								position: "absolute",
+								position: 'absolute',
 								top: 0,
 								left: 0,
-								width: "100%",
+								width: '100%',
 								height: `${vr.size}px`,
 								transform: `translateY(${vr.start}px)`,
 							}}
 							className="flex text-xs leading-5 font-mono"
 						>
-							<span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+							<span className="inline-block w-10 text-right pr-4 text-[var(--color-text-tertiary)] select-none shrink-0">
 								{vr.index + 1}
 							</span>
 							<span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">
@@ -71,13 +84,13 @@ export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps
 				<div
 					ref={parentRef}
 					className="flex-1 min-h-0 overflow-auto"
-					style={{ background: "#011627" }}
+					style={{ background: '#011627' }}
 				>
 					<div
 						style={{
 							height: `${virtualizer.getTotalSize()}px`,
-							width: "100%",
-							position: "relative",
+							width: '100%',
+							position: 'relative',
 						}}
 					>
 						{virtualizer.getVirtualItems().map((vr) => {
@@ -89,16 +102,16 @@ export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps
 								<div
 									key={vr.key}
 									style={{
-										position: "absolute",
+										position: 'absolute',
 										top: 0,
 										left: 0,
-										width: "100%",
+										width: '100%',
 										height: `${vr.size}px`,
 										transform: `translateY(${vr.start}px)`,
 									}}
 									className="flex text-xs leading-5 font-mono"
 								>
-									<span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+									<span className="inline-block w-10 text-right pr-4 text-[var(--color-text-tertiary)] select-none shrink-0">
 										{vr.index + 1}
 									</span>
 									{isLongLine ? (