@dyyz1993/create-agent 2.1.0 → 2.1.2

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

@@ -1,66 +1,91 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { MessageSquare, Send } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useChatStore } from "../../stores/use-chat-store";
+import { useInputHistory } from "../../hooks/use-input-history";
 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 messagesEndRef = useRef<HTMLDivElement>(null);
+	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 messagesEndRef = useRef<HTMLDivElement>(null);
+	const { saveToHistory, navigatePrev, navigateNext } = useInputHistory("default");
 
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+	const handleSend = useCallback(() => {
+		const text = inputText.trim();
+		if (!text) return;
+		saveToHistory(text);
+		sendMessage();
+	}, [inputText, saveToHistory, sendMessage]);
 
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden relative">
-      {/* Chat header */}
-      <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>
+	useEffect(() => {
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messages]);
 
-      {/* Messages list */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {messages.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
-            {t("chat.empty")}
-          </div>
-        ) : (
-          messages.map((msg) => <MessageBubble key={msg.id} message={msg} />)
-        )}
-        <div ref={messagesEndRef} />
-      </div>
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden relative">
+			{/* Chat header */}
+			<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>
 
-      {/* Input bar */}
-      <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>
-  );
+			{/* Messages list */}
+			<div className="flex-1 overflow-y-auto p-4 space-y-3">
+				{messages.length === 0 ? (
+					<div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
+						{t("chat.empty")}
+					</div>
+				) : (
+					messages.map((msg) => <MessageBubble key={msg.id} message={msg} />)
+				)}
+				<div ref={messagesEndRef} />
+			</div>
+
+			{/* Input bar */}
+			<form
+				onSubmit={(e) => e.preventDefault()}
+				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) => {
+						if (e.key === "Enter" && !e.shiftKey) {
+							e.preventDefault();
+							handleSend();
+						} else if (e.key === "ArrowUp" && !inputText) {
+							e.preventDefault();
+							const prev = navigatePrev();
+							if (prev !== null) setInputText(prev);
+						} else if (e.key === "ArrowDown") {
+							e.preventDefault();
+							const next = navigateNext();
+							if (next !== null) setInputText(next);
+						}
+					}}
+					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={handleSend}
+					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>
+			</form>
+		</div>
+	);
 }

package/templates/general/src/mainview/components/common/ThemeToggle.tsx

@@ -1,25 +1,45 @@
 import { useThemeStore } from "../../stores/use-theme-store";
 
 export function ThemeToggle() {
-  const theme = useThemeStore((s) => s.theme);
-  const toggleTheme = useThemeStore((s) => s.toggleTheme);
+	const theme = useThemeStore((s) => s.theme);
+	const toggleTheme = useThemeStore((s) => s.toggleTheme);
 
-  return (
-    <button
-      data-testid="theme-toggle"
-      onClick={toggleTheme}
-      className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
-      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
-    >
-      {theme === "dark" ? (
-        <svg className="w-4 h-4 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-        </svg>
-      ) : (
-        <svg className="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-        </svg>
-      )}
-    </button>
-  );
+	return (
+		<button
+			data-testid="theme-toggle"
+			onClick={toggleTheme}
+			className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
+			title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+		>
+			{theme === "dark" ? (
+				<svg
+					className="w-4 h-4 text-yellow-400"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					strokeWidth={2}
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+					/>
+				</svg>
+			) : (
+				<svg
+					className="w-4 h-4 text-[var(--color-text-tertiary)]"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					strokeWidth={2}
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+					/>
+				</svg>
+			)}
+		</button>
+	);
 }

package/templates/general/src/mainview/components/debug/DebugPanel.tsx

@@ -8,169 +8,183 @@ import type { DemoMethod } from "../../types";
 const COLLAPSED_KEY = "debug-panel-collapsed";
 
 function readCollapsed(): boolean {
-  try {
-    return localStorage.getItem(COLLAPSED_KEY) === "true";
-  } catch {
-    return false;
-  }
+	try {
+		return localStorage.getItem(COLLAPSED_KEY) === "true";
+	} catch {
+		return false;
+	}
 }
 
 export function DebugPanel() {
-  const { t } = useTranslation();
-  const [collapsed, setCollapsed] = useState(readCollapsed);
+	const { t } = useTranslation();
+	const [collapsed, setCollapsed] = useState(readCollapsed);
 
-  useEffect(() => {
-    try {
-      localStorage.setItem(COLLAPSED_KEY, String(collapsed));
-    } catch { /* ignore */ }
-  }, [collapsed]);
+	useEffect(() => {
+		try {
+			localStorage.setItem(COLLAPSED_KEY, String(collapsed));
+		} catch {
+			/* ignore */
+		}
+	}, [collapsed]);
 
-  const method = useAppStore((s) => s.method);
-  const result = useAppStore((s) => s.result);
-  const logs = useLogStore((s) => s.logs);
-  const tickEvents = useAppStore((s) => s.tickEvents);
-  const tickCount = useAppStore((s) => s.tickCount);
-  const subscriptionId = useAppStore((s) => s.subscriptionId);
-  const timerRunning = useAppStore((s) => s.timerRunning);
-  const setMethod = useAppStore((s) => s.setMethod);
-  const callRPC = useAppStore((s) => s.callRPC);
-  const handleSubscribe = useAppStore((s) => s.handleSubscribe);
-  const handleUnsubscribe = useAppStore((s) => s.handleUnsubscribe);
-  const clearDebug = useAppStore((s) => s.clearDebug);
+	const method = useAppStore((s) => s.method);
+	const result = useAppStore((s) => s.result);
+	const logs = useLogStore((s) => s.logs);
+	const tickEvents = useAppStore((s) => s.tickEvents);
+	const tickCount = useAppStore((s) => s.tickCount);
+	const subscriptionId = useAppStore((s) => s.subscriptionId);
+	const timerRunning = useAppStore((s) => s.timerRunning);
+	const setMethod = useAppStore((s) => s.setMethod);
+	const callRPC = useAppStore((s) => s.callRPC);
+	const handleSubscribe = useAppStore((s) => s.handleSubscribe);
+	const handleUnsubscribe = useAppStore((s) => s.handleUnsubscribe);
+	const clearDebug = useAppStore((s) => s.clearDebug);
 
-  if (collapsed) {
-    return (
-      <div className="w-12 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col items-center justify-start pt-2 flex-shrink-0">
-        <button
-          onClick={() => setCollapsed(false)}
-          title="Expand Debug Panel"
-          className="w-10 h-6 flex items-center gap-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
-        >
-          <ChevronRight className="w-3 h-3" />
-          {t("tabs.debug")}
-        </button>
-      </div>
-    );
-  }
+	if (collapsed) {
+		return (
+			<div className="w-12 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col items-center justify-start pt-2 flex-shrink-0">
+				<button
+					onClick={() => setCollapsed(false)}
+					title={t("debug.expandPanel")}
+					className="w-10 h-6 flex items-center gap-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+				>
+					<ChevronRight className="w-3 h-3" />
+					{t("tabs.debug")}
+				</button>
+			</div>
+		);
+	}
 
-  return (
-    <div className="w-72 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-y-auto">
-      <div className="flex items-center justify-between px-2 py-1.5 border-b border-[var(--color-border-primary)]">
-        <button
-          onClick={() => setCollapsed(true)}
-          title="Collapse Debug Panel"
-          className="flex items-center gap-1 text-[11px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
-        >
-          <ChevronDown className="w-3 h-3" />
-          {t("tabs.debug")}
-        </button>
-        <button
-          onClick={clearDebug}
-          title="Clear all debug data"
-          className="flex items-center gap-1 text-[11px] text-[var(--color-text-placeholder)] hover:text-red-400 transition-colors"
-        >
-          <Trash2 className="w-3 h-3" />
-          Clear
-        </button>
-      </div>
-      {/* RPC Calls */}
-      <div className="p-3 border-b border-[var(--color-border-primary)]">
-        <div className="flex items-center justify-between mb-2">
-          <h2 className="text-xs font-semibold flex items-center gap-1.5">
-            <Send className="w-3.5 h-3.5 text-[var(--color-text-accent)]" />
-            {t("debug.rpcCalls")}
-          </h2>
-        </div>
-        <div className="flex gap-2 mb-2">
-          <select
-            value={method}
-            onChange={(e) => setMethod(e.target.value as DemoMethod)}
-            className="flex-1 px-2 py-1 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
-          >
-            <option value="system.ping">system.ping</option>
-            <option value="system.hello">system.hello</option>
-            <option value="system.echo">system.echo</option>
-            <option value="chat.send">chat.send</option>
-          </select>
-          <button
-            onClick={() => callRPC("")}
-            className="px-3 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors flex items-center gap-1"
-          >
-            <Play className="w-3 h-3" />
-            {t("debug.call")}
-          </button>
-        </div>
-        {!!result && (
-          <div className="bg-[var(--color-bg-tertiary)] rounded p-2">
-            <pre className="text-[var(--color-text-success)] text-[11px] overflow-x-auto whitespace-pre-wrap">
-              {JSON.stringify(result, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
+	return (
+		<div className="w-72 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-y-auto">
+			<div className="flex items-center justify-between px-2 py-1.5 border-b border-[var(--color-border-primary)]">
+				<button
+					onClick={() => setCollapsed(true)}
+					title={t("debug.collapsePanel")}
+					className="flex items-center gap-1 text-[11px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+				>
+					<ChevronDown className="w-3 h-3" />
+					{t("tabs.debug")}
+				</button>
+				<button
+					onClick={clearDebug}
+					title={t("debug.clearAll")}
+					className="flex items-center gap-1 text-[11px] text-[var(--color-text-placeholder)] hover:text-[var(--color-text-error)] transition-colors"
+				>
+					<Trash2 className="w-3 h-3" />
+					{t("debug.clear")}
+				</button>
+			</div>
+			{/* RPC Calls */}
+			<div className="p-3 border-b border-[var(--color-border-primary)]">
+				<div className="flex items-center justify-between mb-2">
+					<h2 className="text-xs font-semibold flex items-center gap-1.5">
+						<Send className="w-3.5 h-3.5 text-[var(--color-text-accent)]" />
+						{t("debug.rpcCalls")}
+					</h2>
+				</div>
+				<div className="flex gap-2 mb-2">
+					<select
+						aria-label={t("debug.rpcCalls")}
+						value={method}
+						onChange={(e) => setMethod(e.target.value as DemoMethod)}
+						className="flex-1 px-2 py-1 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
+					>
+						<option value="system.ping">system.ping</option>
+						<option value="system.hello">system.hello</option>
+						<option value="system.echo">system.echo</option>
+						<option value="chat.send">chat.send</option>
+					</select>
+					<button
+						onClick={() => callRPC("")}
+						className="px-3 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors flex items-center gap-1"
+					>
+						<Play className="w-3 h-3" />
+						{t("debug.call")}
+					</button>
+				</div>
+				{!!result && (
+					<div className="bg-[var(--color-bg-tertiary)] rounded p-2">
+						<pre className="text-[var(--color-text-success)] text-[11px] overflow-x-auto whitespace-pre-wrap">
+							{JSON.stringify(result, null, 2)}
+						</pre>
+					</div>
+				)}
+			</div>
 
-      {/* Subscriptions */}
-      <div className="p-3 border-b border-[var(--color-border-primary)]">
-        <div className="flex items-center justify-between mb-2">
-          <h2 className="text-xs font-semibold flex items-center gap-1.5">
-            {timerRunning ? (
-              <Square className="w-3.5 h-3.5 text-green-400 fill-green-400" />
-            ) : (
-              <Play className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
-            )}
-            {t("debug.subscriptions")}
-            {timerRunning && (
-                <span className="ml-1 px-1.5 py-0.5 bg-green-600/30 text-green-400 rounded text-[10px]">
-                  {t("feed.live")}
-              </span>
-            )}
-          </h2>
-          <div className="flex gap-2 items-center">
-            <span className="text-[11px] text-[var(--color-text-tertiary)]">
-              {t("debug.events", { count: tickCount })}
-            </span>
-            {!subscriptionId ? (
-              <button
-                onClick={handleSubscribe}
-                className="px-2 py-0.5 text-xs bg-green-600 hover:bg-green-700 rounded transition-colors"
-              >
-                {t("debug.subscribe")}
-              </button>
-            ) : (
-              <button
-                onClick={handleUnsubscribe}
-                className="px-2 py-0.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors"
-              >
-                {t("debug.unsubscribe")}
-              </button>
-            )}
-          </div>
-        </div>
-        <div className="bg-[var(--color-bg-tertiary)] rounded p-2 max-h-32 overflow-y-auto font-mono text-[11px]">
-          {tickEvents.length === 0 ? (
-            <div className="text-[var(--color-text-placeholder)] text-center py-1">{t("debug.noEvents")}</div>
-          ) : (
-            tickEvents.map((ev, i) => (
-              <div key={i} className="text-cyan-400">{ev}</div>
-            ))
-          )}
-        </div>
-      </div>
+			{/* Subscriptions */}
+			<div className="p-3 border-b border-[var(--color-border-primary)]">
+				<div className="flex items-center justify-between mb-2">
+					<h2 className="text-xs font-semibold flex items-center gap-1.5">
+						{timerRunning ? (
+							<Square className="w-3.5 h-3.5 text-[var(--color-text-success)] fill-[var(--color-text-success)]" />
+						) : (
+							<Play className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+						)}
+						{t("debug.subscriptions")}
+						{timerRunning && (
+							<span className="ml-1 px-1.5 py-0.5 bg-[var(--color-text-success)]/30 text-[var(--color-text-success)] rounded text-[10px]">
+								{t("feed.live")}
+							</span>
+						)}
+					</h2>
+					<div className="flex gap-2 items-center">
+						<span className="text-[11px] text-[var(--color-text-tertiary)]">
+							{t("debug.events", { count: tickCount })}
+						</span>
+						{!subscriptionId ? (
+							<button
+								onClick={handleSubscribe}
+								className="px-2 py-0.5 text-xs bg-[var(--color-text-success)] hover:opacity-80 rounded transition-colors"
+							>
+								{t("debug.subscribe")}
+							</button>
+						) : (
+							<button
+								onClick={handleUnsubscribe}
+								className="px-2 py-0.5 text-xs bg-[var(--color-text-error)] hover:opacity-80 rounded transition-colors"
+							>
+								{t("debug.unsubscribe")}
+							</button>
+						)}
+					</div>
+				</div>
+				<div className="bg-[var(--color-bg-tertiary)] rounded p-2 max-h-32 overflow-y-auto font-mono text-[11px]">
+					{tickEvents.length === 0 ? (
+						<div className="text-[var(--color-text-placeholder)] text-center py-1">
+							{t("debug.noEvents")}
+						</div>
+					) : (
+						tickEvents.map((ev, i) => (
+							<div key={i} className="text-[var(--color-text-info)]">
+								{ev}
+							</div>
+						))
+					)}
+				</div>
+			</div>
 
-      {/* Logs */}
-      <div className="p-3 flex flex-col flex-1 min-h-0">
-        <h2 className="text-xs font-semibold mb-2 flex-shrink-0 flex items-center gap-1.5">
-          <File className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
-          {t("debug.logs")}
-        </h2>
-        <div className="flex-1 bg-black rounded p-2 overflow-y-auto font-mono text-[11px]">
-          {logs.map((log, i) => (
-            <div key={i} className={log.includes("Error") ? "text-red-400" : "text-green-400"}>
-              {log}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+			{/* Logs */}
+			<div className="p-3 flex flex-col flex-1 min-h-0">
+				<h2 className="text-xs font-semibold mb-2 flex-shrink-0 flex items-center gap-1.5">
+					<File className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+					{t("debug.logs")}
+				</h2>
+				<div className="flex-1 bg-black rounded p-2 overflow-y-auto font-mono text-[11px]">
+					{logs.map((log, i) => (
+						<div
+							key={i}
+							className={
+								log.includes("Error")
+									? "text-[var(--color-text-error)]"
+									: "text-[var(--color-text-success)]"
+							}
+						>
+							{log}
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }