@dyyz1993/create-agent 2.0.1 → 2.1.1

package/templates/agent/package.json

@@ -2,6 +2,54 @@
 	"name": "pi-agent-app",
 	"version": "1.0.0",
 	"description": "Coding agent template with Bash, Rules, and Todo management",
+	"author": {
+		"name": "xuyingzhou",
+		"email": "xuyingzhou@tuzhanai.com"
+	},
+	"homepage": "https://github.com/dyyz1993/pi-agent-template",
+	"main": "electron/main.js",
+	"build": {
+		"appId": "com.piagent.app",
+		"productName": "Pi Agent",
+		"directories": {
+			"output": "dist-electron"
+		},
+		"files": [
+			"dist/**/*",
+			"electron/**/*",
+			"package.json"
+		],
+		"mac": {
+			"category": "public.app-category.developer-tools",
+			"target": [
+				{
+					"target": "dmg",
+					"arch": [
+						"x64",
+						"arm64"
+					]
+				}
+			]
+		},
+		"win": {
+			"target": [
+				{
+					"target": "nsis",
+					"arch": [
+						"x64"
+					]
+				}
+			]
+		},
+		"linux": {
+			"maintainer": "xuyingzhou <xuyingzhou@tuzhanai.com>",
+			"target": [
+				"AppImage",
+				"deb"
+			],
+			"category": "Development"
+		}
+	},
 	"scripts": {
 		"start": "vite build && electrobun dev",
 		"dev": "electrobun dev --watch",
@@ -12,8 +60,15 @@
 		"build:mac": "vite build && electrobun build --env=canary",
 		"build:win": "vite build && electrobun build --env=canary",
 		"build:linux": "vite build && electrobun build --env=canary",
+		"electron:dev": "vite build && electron .",
+		"electron:build": "vite build && electron-builder --mac --win --linux",
+		"electron:build:mac": "vite build && electron-builder --mac",
+		"electron:build:win": "vite build && electron-builder --win",
+		"electron:build:linux": "vite build && electron-builder --linux",
 		"lint": "eslint .",
 		"lint:fix": "eslint . --fix",
+		"format": "prettier --write .",
+		"format:check": "prettier --check .",
 		"test": "vitest run",
 		"test:watch": "vitest",
 		"test:coverage": "vitest run --coverage",
@@ -45,10 +100,11 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@types/ws": "^8.18.1",
-		"ws": "^8.18.0",
 		"@vitejs/plugin-react": "^4.3.4",
 		"autoprefixer": "^10.4.20",
 		"concurrently": "^9.1.0",
+		"electron": "^42.1.0",
+		"electron-builder": "^26.8.1",
 		"eslint": "^9.0.0",
 		"eslint-plugin-jsx-a11y": "^6.10.0",
 		"eslint-plugin-react-hooks": "^5.2.0",
@@ -61,6 +117,23 @@
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^6.0.3",
-		"vitest": "^4.1.5"
+		"vitest": "^4.1.5",
+		"ws": "^8.18.0",
+		"@commitlint/cli": "^19.8.1",
+		"@commitlint/config-conventional": "^19.8.1",
+		"prettier": "^3.5.3",
+		"lint-staged": "^15.5.2"
+	},
+	"lint-staged": {
+		"*.{ts,tsx}": [
+			"eslint --fix",
+			"prettier --write"
+		],
+		"*.{json,md,css,html}": [
+			"prettier --write"
+		]
+	},
+	"overrides": {
+		"minimatch": "^10.0.1"
 	}
 }

package/templates/agent/src/mainview/App.tsx

@@ -1,41 +1,44 @@
+import type { ReactNode } from "react";
 import { useState } from "react";
 import { useConnectionStore } from "./stores/use-connection-store";
 import { useBreakpointSync } from "./hooks/use-breakpoint";
 import { useRpcInit } from "./hooks/use-rpc-init";
 import { useSidebarResize } from "./hooks/use-sidebar-resize";
 import { AppLayout, type CenterTab } from "./components/layout/AppLayout";
-import { ErrorBoundary } from "./components/common/ErrorBoundary";
+import { ErrorBoundary as _EB } from "./components/common/ErrorBoundary";
+
+const ErrorBoundary = _EB as unknown as React.FC<{ children: ReactNode }>;
 
 function App() {
-  const ready = useConnectionStore((s) => s.ready);
-  const [centerTab, setCenterTab] = useState<CenterTab>("chat");
+	const ready = useConnectionStore((s) => s.ready);
+	const [centerTab, setCenterTab] = useState<CenterTab>("chat");
 
-  useBreakpointSync();
-  useRpcInit();
+	useBreakpointSync();
+	useRpcInit();
 
-  const { sidebarWidth, handleResizeStart } = useSidebarResize();
+	const { sidebarWidth, handleResizeStart } = useSidebarResize();
 
-  if (!ready) {
-    return (
-      <div className="h-screen bg-gray-900 flex items-center justify-center">
-        <div className="text-center">
-          <div className="inline-block w-8 h-8 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin mb-4" />
-          <div className="text-gray-400 text-sm">Connecting to RPC server...</div>
-        </div>
-      </div>
-    );
-  }
+	if (!ready) {
+		return (
+			<div className="h-screen bg-gray-900 flex items-center justify-center">
+				<div className="text-center">
+					<div className="inline-block w-8 h-8 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin mb-4" />
+					<div className="text-gray-400 text-sm">Connecting to RPC server...</div>
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <ErrorBoundary>
-      <AppLayout
-        centerTab={centerTab}
-        setCenterTab={setCenterTab}
-        sidebarWidth={sidebarWidth}
-        handleResizeStart={handleResizeStart}
-      />
-    </ErrorBoundary>
-  );
+	return (
+		<ErrorBoundary>
+			<AppLayout
+				centerTab={centerTab}
+				setCenterTab={setCenterTab}
+				sidebarWidth={sidebarWidth}
+				handleResizeStart={handleResizeStart}
+			/>
+		</ErrorBoundary>
+	);
 }
 
 export default App;

package/templates/agent/src/mainview/components/chat/ChatPanel.tsx

@@ -6,97 +6,97 @@ import { useChatStore } from "../../stores/use-chat-store";
 import { MessageBubble } from "./MessageBubble";
 
 export function ChatPanel() {
-  const { t } = useTranslation();
-  const messages = useChatStore((s) => s.messages);
-  const inputText = useChatStore((s) => s.inputText);
-  const setInputText = useChatStore((s) => s.setInputText);
-  const sendMessage = useChatStore((s) => s.sendMessage);
-  const parentRef = useRef<HTMLDivElement>(null);
-  const prevMessageCountRef = useRef(0);
+	const { t } = useTranslation();
+	const messages = useChatStore((s) => s.messages);
+	const inputText = useChatStore((s) => s.inputText);
+	const setInputText = useChatStore((s) => s.setInputText);
+	const sendMessage = useChatStore((s) => s.sendMessage);
+	const parentRef = useRef<HTMLDivElement>(null);
+	const prevMessageCountRef = useRef(0);
 
-  const virtualizer = useVirtualizer({
-    count: messages.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 80,
-    overscan: 5,
-    measureElement: (element) => element?.getBoundingClientRect().height ?? 80,
-  });
+	const virtualizer = useVirtualizer({
+		count: messages.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 80,
+		overscan: 5,
+		measureElement: (element) => element?.getBoundingClientRect().height ?? 80,
+	});
 
-  useEffect(() => {
-    if (messages.length > prevMessageCountRef.current) {
-      virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
-    }
-    prevMessageCountRef.current = messages.length;
-  }, [messages.length, virtualizer]);
+	useEffect(() => {
+		if (messages.length > prevMessageCountRef.current) {
+			virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+		}
+		prevMessageCountRef.current = messages.length;
+	}, [messages.length, virtualizer]);
 
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden relative">
-      <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">
-          <MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
-          {t("chat.title")}
-          {messages.length > 0 && (
-            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
-              {messages.length}
-            </span>
-          )}
-        </h2>
-      </div>
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden relative">
+			<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">
+					<MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
+					{t("chat.title")}
+					{messages.length > 0 && (
+						<span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+							{messages.length}
+						</span>
+					)}
+				</h2>
+			</div>
 
-      <div ref={parentRef} className="flex-1 overflow-y-auto">
-        {messages.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
-            {t("chat.empty")}
-          </div>
-        ) : (
-          <div
-            style={{
-              height: virtualizer.getTotalSize(),
-              width: "100%",
-              position: "relative",
-            }}
-          >
-            {virtualizer.getVirtualItems().map((virtualItem) => {
-              const msg = messages[virtualItem.index];
-              return (
-                <div
-                  key={msg.id}
-                  data-index={virtualItem.index}
-                  ref={virtualizer.measureElement}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    transform: `translateY(${virtualItem.start}px)`,
-                    padding: "6px 16px",
-                  }}
-                >
-                  <MessageBubble message={msg} />
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
+			<div ref={parentRef} className="flex-1 overflow-y-auto">
+				{messages.length === 0 ? (
+					<div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
+						{t("chat.empty")}
+					</div>
+				) : (
+					<div
+						style={{
+							height: virtualizer.getTotalSize(),
+							width: "100%",
+							position: "relative",
+						}}
+					>
+						{virtualizer.getVirtualItems().map((virtualItem) => {
+							const msg = messages[virtualItem.index]!;
+							return (
+								<div
+									key={msg.id}
+									data-index={virtualItem.index}
+									ref={virtualizer.measureElement}
+									style={{
+										position: "absolute",
+										top: 0,
+										left: 0,
+										width: "100%",
+										transform: `translateY(${virtualItem.start}px)`,
+										padding: "6px 16px",
+									}}
+								>
+									<MessageBubble message={msg} />
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
 
-      <div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
-        <input
-          type="text"
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
-          placeholder={t("chat.placeholder")}
-          className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
-        />
-        <button
-          onClick={sendMessage}
-          className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
-        >
-          <Send className="w-4 h-4" />
-          {t("chat.send")}
-        </button>
-      </div>
-    </div>
-  );
+			<div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
+				<input
+					type="text"
+					value={inputText}
+					onChange={(e) => setInputText(e.target.value)}
+					onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
+					placeholder={t("chat.placeholder")}
+					className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+				/>
+				<button
+					onClick={sendMessage}
+					className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
+				>
+					<Send className="w-4 h-4" />
+					{t("chat.send")}
+				</button>
+			</div>
+		</div>
+	);
 }

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

@@ -4,96 +4,120 @@ import { Highlight, themes } from "prism-react-renderer";
 import { getLanguage } from "../../utils/file-utils";
 
 interface VirtualizedCodeViewProps {
-  code: string;
-  filename: string;
+	code: string;
+	filename: string;
 }
 
 /** Lines longer than this skip syntax highlighting (plain text instead) */
 const LONG_LINE_THRESHOLD = 5000;
 
 export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const language = getLanguage(filename);
-  const lines = useMemo(() => code.split("\n"), [code]);
+	const parentRef = useRef<HTMLDivElement>(null);
+	const language = getLanguage(filename);
+	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;
+	// Detect minified files: avg line length > 500 chars
+	const avgLineLength = code.length / Math.max(lines.length, 1);
+	const usePlainText = !language || avgLineLength > 500;
 
-  const virtualizer = useVirtualizer({
-    count: lines.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 20,
-    overscan: 20,
-  });
+	const virtualizer = useVirtualizer({
+		count: lines.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 20,
+		overscan: 20,
+	});
 
-  // --- Plain text path: no Prism tokenization ---
-  if (usePlainText) {
-    return (
-      <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
-        <div
-          style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
-        >
-          {virtualizer.getVirtualItems().map((vr) => (
-            <div
-              key={vr.key}
-              style={{
-                position: "absolute", top: 0, left: 0, 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">
-                {vr.index + 1}
-              </span>
-              <span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">{lines[vr.index]}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
+	// --- Plain text path: no Prism tokenization ---
+	if (usePlainText) {
+		return (
+			<div
+				ref={parentRef}
+				className="flex-1 min-h-0 overflow-auto"
+				style={{ background: "#011627" }}
+			>
+				<div
+					style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+				>
+					{virtualizer.getVirtualItems().map((vr) => (
+						<div
+							key={vr.key}
+							style={{
+								position: "absolute",
+								top: 0,
+								left: 0,
+								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">
+								{vr.index + 1}
+							</span>
+							<span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">
+								{lines[vr.index]}
+							</span>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
 
-  // --- Highlighted path: tokenize ONCE for the whole file, virtualize rendering ---
-  return (
-    <Highlight theme={themes.nightOwl} code={code} language={language}>
-      {({ tokens, getTokenProps }) => (
-        <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
-          <div
-            style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
-          >
-            {virtualizer.getVirtualItems().map((vr) => {
-              const lineTokens = tokens[vr.index];
-              const lineText = lines[vr.index];
-              const isLongLine = (lineText?.length ?? 0) > LONG_LINE_THRESHOLD;
+	// --- Highlighted path: tokenize ONCE for the whole file, virtualize rendering ---
+	return (
+		<Highlight theme={themes.nightOwl} code={code} language={language}>
+			{({ tokens, getTokenProps }) => (
+				<div
+					ref={parentRef}
+					className="flex-1 min-h-0 overflow-auto"
+					style={{ background: "#011627" }}
+				>
+					<div
+						style={{
+							height: `${virtualizer.getTotalSize()}px`,
+							width: "100%",
+							position: "relative",
+						}}
+					>
+						{virtualizer.getVirtualItems().map((vr) => {
+							const lineTokens = tokens[vr.index];
+							const lineText = lines[vr.index];
+							const isLongLine = (lineText?.length ?? 0) > LONG_LINE_THRESHOLD;
 
-              return (
-                <div
-                  key={vr.key}
-                  style={{
-                    position: "absolute", top: 0, left: 0, 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">
-                    {vr.index + 1}
-                  </span>
-                  {isLongLine ? (
-                    <span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">{lineText}</span>
-                  ) : (
-                    <span className="flex-1">
-                      {lineTokens.map((token, key) => (
-                        <span key={key} {...getTokenProps({ token })} />
-                      ))}
-                    </span>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </Highlight>
-  );
+							return (
+								<div
+									key={vr.key}
+									style={{
+										position: "absolute",
+										top: 0,
+										left: 0,
+										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">
+										{vr.index + 1}
+									</span>
+									{isLongLine ? (
+										<span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">
+											{lineText}
+										</span>
+									) : (
+										<span className="flex-1">
+											{lineTokens!.map((token, key) => (
+												<span key={key} {...getTokenProps({ token })} />
+											))}
+										</span>
+									)}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			)}
+		</Highlight>
+	);
 }