@dyyz1993/create-agent 2.0.0 → 2.1.0

package/templates/agent/src/mainview/components/todo/TodoPanel.tsx

@@ -2,140 +2,167 @@ import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Plus, Trash2, Circle, Clock, CheckCircle2, ListTodo } from "lucide-react";
 import { useTodoStore } from "../../stores/use-todo-store";
-import type { TodoStatus } from "../../../shared/modules/todo";
+import type { TodoStatus } from "@shared/modules/todo";
 
 const nextStatus: Record<TodoStatus, TodoStatus> = {
-  pending: "in_progress",
-  in_progress: "completed",
-  completed: "pending",
+	pending: "in_progress",
+	in_progress: "completed",
+	completed: "pending",
 };
 
 const statusFlow = ["pending", "in_progress", "completed"] as const;
 
 export function TodoPanel() {
-  const { t } = useTranslation();
-  const [showInput, setShowInput] = useState(false);
-  const [input, setInput] = useState("");
-  const items = useTodoStore((s) => s.items);
-  const fetchItems = useTodoStore((s) => s.fetchItems);
-  const addItem = useTodoStore((s) => s.addItem);
-  const updateItem = useTodoStore((s) => s.updateItem);
-  const removeItem = useTodoStore((s) => s.removeItem);
+	const { t } = useTranslation();
+	const [showInput, setShowInput] = useState(false);
+	const [input, setInput] = useState("");
+	const items = useTodoStore((s) => s.items);
+	const fetchItems = useTodoStore((s) => s.fetchItems);
+	const addItem = useTodoStore((s) => s.addItem);
+	const updateItem = useTodoStore((s) => s.updateItem);
+	const removeItem = useTodoStore((s) => s.removeItem);
 
-  useEffect(() => {
-    fetchItems();
-  }, [fetchItems]);
+	useEffect(() => {
+		fetchItems();
+	}, [fetchItems]);
 
-  const handleAdd = () => {
-    if (!input.trim()) return;
-    addItem(input.trim());
-    setInput("");
-    setShowInput(false);
-  };
+	const handleAdd = () => {
+		if (!input.trim()) return;
+		addItem(input.trim());
+		setInput("");
+		setShowInput(false);
+	};
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") handleAdd();
-    if (e.key === "Escape") setShowInput(false);
-  };
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") handleAdd();
+		if (e.key === "Escape") setShowInput(false);
+	};
 
-  const statusConfig: Record<TodoStatus, { icon: typeof Circle; color: string; label: string; circleColor: string }> = {
-    pending: { icon: Circle, color: "text-gray-400", label: t("todo.statusPending"), circleColor: "border-gray-500" },
-    in_progress: { icon: Clock, color: "text-yellow-400", label: t("todo.statusInProgress"), circleColor: "border-yellow-400 bg-yellow-400/20" },
-    completed: { icon: CheckCircle2, color: "text-green-400", label: t("todo.statusCompleted"), circleColor: "border-green-400 bg-green-400/20" },
-  };
+	const statusConfig: Record<
+		TodoStatus,
+		{ icon: typeof Circle; color: string; label: string; circleColor: string }
+	> = {
+		pending: {
+			icon: Circle,
+			color: "text-gray-400",
+			label: t("todo.statusPending"),
+			circleColor: "border-gray-500",
+		},
+		in_progress: {
+			icon: Clock,
+			color: "text-yellow-400",
+			label: t("todo.statusInProgress"),
+			circleColor: "border-yellow-400 bg-yellow-400/20",
+		},
+		completed: {
+			icon: CheckCircle2,
+			color: "text-green-400",
+			label: t("todo.statusCompleted"),
+			circleColor: "border-green-400 bg-green-400/20",
+		},
+	};
 
-  return (
-    <div className="flex flex-col h-full">
-      <div className="p-3 border-b border-[var(--color-border-primary)] flex items-center justify-between">
-        <span className="text-sm text-[var(--color-text-secondary)]">{t("todo.title")}</span>
-        <button
-          onClick={() => setShowInput(!showInput)}
-          className="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded text-[var(--color-text-primary)]"
-        >
-          <Plus className="w-3 h-3" />
-          {t("todo.add")}
-        </button>
-      </div>
+	return (
+		<div className="flex flex-col h-full">
+			<div className="p-3 border-b border-[var(--color-border-primary)] flex items-center justify-between">
+				<span className="text-sm text-[var(--color-text-secondary)]">{t("todo.title")}</span>
+				<button
+					onClick={() => setShowInput(!showInput)}
+					className="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded text-[var(--color-text-primary)]"
+				>
+					<Plus className="w-3 h-3" />
+					{t("todo.add")}
+				</button>
+			</div>
 
-      {showInput && (
-        <div className="p-3 border-b border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)] flex items-center gap-2">
-          <input
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={t("todo.placeholder")}
-            autoFocus
-            className="flex-1 bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
-          />
-          <button
-            onClick={handleAdd}
-            disabled={!input.trim()}
-            className="px-3 py-1 text-xs bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded text-white"
-          >
-            {t("todo.save")}
-          </button>
-        </div>
-      )}
+			{showInput && (
+				<div className="p-3 border-b border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)] flex items-center gap-2">
+					<input
+						type="text"
+						value={input}
+						onChange={(e) => setInput(e.target.value)}
+						onKeyDown={handleKeyDown}
+						placeholder={t("todo.placeholder")}
+						autoFocus
+						className="flex-1 bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+					/>
+					<button
+						onClick={handleAdd}
+						disabled={!input.trim()}
+						className="px-3 py-1 text-xs bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded text-white"
+					>
+						{t("todo.save")}
+					</button>
+				</div>
+			)}
 
-      <div className="flex-1 overflow-auto p-3">
-        {items.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-gray-600">
-            <ListTodo className="w-12 h-12 mb-3 opacity-30" />
-            <span className="text-sm">{t("todo.empty")}</span>
-            <span className="text-xs mt-1">{t("todo.emptyHint")}</span>
-          </div>
-        ) : (
-          <div className="space-y-2.5">
-            {items.map((item) => {
-              const cfg = statusConfig[item.status as TodoStatus];
-              const Icon = cfg.icon;
-              return (
-                <div
-                  key={item.id}
-                  className="group relative bg-[var(--color-bg-secondary)]/60 border border-[var(--color-border-primary)]/80 rounded-lg p-3 hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-border-secondary)] transition-all"
-                >
-                  <div className="flex items-start gap-3">
-                    <button
-                      onClick={() => updateItem(item.id, nextStatus[item.status as TodoStatus])}
-                      className={`flex-shrink-0 mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${cfg.circleColor} ${cfg.color} hover:scale-110`}
-                    >
-                      <Icon className="w-3 h-3" />
-                    </button>
-                    <div className="flex-1 min-w-0">
-                      <p className={`text-sm leading-relaxed ${
-                        item.status === "completed" ? "text-[var(--color-text-placeholder)] line-through" : "text-[var(--color-text-secondary)]"
-                      }`}>
-                        {item.content}
-                      </p>
-                      <div className="flex items-center gap-1.5 mt-2 text-[11px] text-[var(--color-text-placeholder)]">
-                        <span>{t("todo.status")}</span>
-                        {statusFlow.map((s) => {
-                          const sc = statusConfig[s];
-                          const isActive = s === item.status;
-                          return (
-                            <span key={s} className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + " font-medium" : ""}`}>
-                              {isActive && <sc.icon className="w-2.5 h-2.5" />}
-                              {sc.label}
-                              {s !== "completed" && <span className="text-gray-700 mx-0.5">&rarr;</span>}
-                            </span>
-                          );
-                        })}
-                      </div>
-                    </div>
-                    <button
-                      onClick={() => removeItem(item.id)}
-                      className="text-gray-600 hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+			<div className="flex-1 overflow-auto p-3">
+				{items.length === 0 ? (
+					<div className="flex flex-col items-center justify-center h-full text-gray-600">
+						<ListTodo className="w-12 h-12 mb-3 opacity-30" />
+						<span className="text-sm">{t("todo.empty")}</span>
+						<span className="text-xs mt-1">{t("todo.emptyHint")}</span>
+					</div>
+				) : (
+					<div className="space-y-2.5">
+						{items.map((item) => {
+							const cfg = statusConfig[item.status as TodoStatus]!;
+							const Icon = cfg.icon;
+							return (
+								<div
+									key={item.id}
+									className="group relative bg-[var(--color-bg-secondary)]/60 border border-[var(--color-border-primary)]/80 rounded-lg p-3 hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-border-secondary)] transition-all"
+								>
+									<div className="flex items-start gap-3">
+										<button
+											onClick={() => updateItem(item.id, nextStatus[item.status as TodoStatus]!)}
+											className={`flex-shrink-0 mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${cfg.circleColor} ${cfg.color} hover:scale-110`}
+										>
+											<Icon className="w-3 h-3" />
+										</button>
+										<div className="flex-1 min-w-0">
+											<p
+												className={`text-sm leading-relaxed ${
+													item.status === "completed"
+														? "text-[var(--color-text-placeholder)] line-through"
+														: "text-[var(--color-text-secondary)]"
+												}`}
+											>
+												{item.content}
+											</p>
+											<div className="flex items-center gap-1.5 mt-2 text-[11px] text-[var(--color-text-placeholder)]">
+												<span>{t("todo.status")}</span>
+												{statusFlow.map((s) => {
+													const sc = statusConfig[s]!;
+													const isActive = s === item.status;
+													return (
+														<span
+															key={s}
+															className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + " font-medium" : ""}`}
+														>
+															{isActive && <sc.icon className="w-2.5 h-2.5" />}
+															{sc.label}
+															{s !== "completed" && (
+																<span className="text-gray-700 mx-0.5">&rarr;</span>
+															)}
+														</span>
+													);
+												})}
+											</div>
+										</div>
+										<button
+											onClick={() => removeItem(item.id)}
+											className="text-gray-600 hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
+										>
+											<Trash2 className="w-3.5 h-3.5" />
+										</button>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }

package/templates/agent/src/mainview/hooks/use-input-history.ts

@@ -4,81 +4,90 @@ const HISTORY_KEY = "pi-input-history";
 const MAX_ITEMS = 10;
 
 function getStorageKey(sessionId: string): string {
-  return `${HISTORY_KEY}:${sessionId}`;
+	return `${HISTORY_KEY}:${sessionId}`;
 }
 
 function readHistory(sessionId: string): string[] {
-  try {
-    const raw = localStorage.getItem(getStorageKey(sessionId));
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    if (Array.isArray(parsed)) return parsed.slice(0, MAX_ITEMS);
-  } catch { /* ignore */ }
-  return [];
+	try {
+		const raw = localStorage.getItem(getStorageKey(sessionId));
+		if (!raw) return [];
+		const parsed = JSON.parse(raw);
+		if (Array.isArray(parsed)) return parsed.slice(0, MAX_ITEMS);
+	} catch {
+		/* ignore */
+	}
+	return [];
 }
 
 function writeHistory(sessionId: string, items: string[]) {
-  try {
-    localStorage.setItem(getStorageKey(sessionId), JSON.stringify(items.slice(0, MAX_ITEMS)));
-  } catch { /* ignore */ }
+	try {
+		localStorage.setItem(getStorageKey(sessionId), JSON.stringify(items.slice(0, MAX_ITEMS)));
+	} catch {
+		/* ignore */
+	}
 }
 
 export function useInputHistory(sessionId: string) {
-  const historyRef = useRef<string[]>(readHistory(sessionId));
-  const indexRef = useRef(-1);
-  const [, forceUpdate] = useState(0);
+	const historyRef = useRef<string[]>(readHistory(sessionId));
+	const indexRef = useRef(-1);
+	const [, forceUpdate] = useState(0);
 
-  const hasPrev = historyRef.current.length > 0 && indexRef.current < historyRef.current.length - 1;
-  const hasNext = indexRef.current > 0;
+	const hasPrev = historyRef.current.length > 0 && indexRef.current < historyRef.current.length - 1;
+	const hasNext = indexRef.current > 0;
 
-  const saveToHistory = useCallback((text: string) => {
-    const trimmed = text.trim();
-    if (!trimmed) return;
-    const h = historyRef.current;
-    const filtered = h.filter((item) => item !== trimmed);
-    const updated = [trimmed, ...filtered].slice(0, MAX_ITEMS);
-    historyRef.current = updated;
-    writeHistory(sessionId, updated);
-    indexRef.current = -1;
-    forceUpdate((n) => n + 1);
-  }, [sessionId]);
+	const saveToHistory = useCallback(
+		(text: string) => {
+			const trimmed = text.trim();
+			if (!trimmed) return;
+			const h = historyRef.current;
+			const filtered = h.filter((item) => item !== trimmed);
+			const updated = [trimmed, ...filtered].slice(0, MAX_ITEMS);
+			historyRef.current = updated;
+			writeHistory(sessionId, updated);
+			indexRef.current = -1;
+			forceUpdate((n) => n + 1);
+		},
+		[sessionId]
+	);
 
-  const navigatePrev = useCallback((): string | null => {
-    const h = historyRef.current;
-    if (h.length === 0) return null;
-    const nextIdx = Math.min(indexRef.current + 1, h.length - 1);
-    indexRef.current = nextIdx;
-    forceUpdate((n) => n + 1);
-    return h[nextIdx];
-  }, []);
+	const navigatePrev = useCallback((): string | null => {
+		const h = historyRef.current;
+		if (h.length === 0) return null;
+		const nextIdx = Math.min(indexRef.current + 1, h.length - 1);
+		indexRef.current = nextIdx;
+		forceUpdate((n) => n + 1);
+		return h[nextIdx] ?? null;
+	}, []);
 
-  const navigateNext = useCallback((): string | null => {
-    const h = historyRef.current;
-    if (h.length === 0) return null;
-    const nextIdx = indexRef.current - 1;
-    if (nextIdx < 0) {
-      indexRef.current = -1;
-      forceUpdate((n) => n + 1);
-      return "";
-    }
-    indexRef.current = nextIdx;
-    forceUpdate((n) => n + 1);
-    return h[nextIdx];
-  }, []);
+	const navigateNext = useCallback((): string | null => {
+		const h = historyRef.current;
+		if (h.length === 0) return null;
+		const nextIdx = indexRef.current - 1;
+		if (nextIdx < 0) {
+			indexRef.current = -1;
+			forceUpdate((n) => n + 1);
+			return "";
+		}
+		indexRef.current = nextIdx;
+		forceUpdate((n) => n + 1);
+		return h[nextIdx] ?? null;
+	}, []);
 
-  const clearHistory = useCallback(() => {
-    historyRef.current = [];
-    indexRef.current = -1;
-    try {
-      localStorage.removeItem(getStorageKey(sessionId));
-    } catch { /* ignore */ }
-    forceUpdate((n) => n + 1);
-  }, [sessionId]);
+	const clearHistory = useCallback(() => {
+		historyRef.current = [];
+		indexRef.current = -1;
+		try {
+			localStorage.removeItem(getStorageKey(sessionId));
+		} catch {
+			/* ignore */
+		}
+		forceUpdate((n) => n + 1);
+	}, [sessionId]);
 
-  const resetIndex = useCallback(() => {
-    indexRef.current = -1;
-    forceUpdate((n) => n + 1);
-  }, []);
+	const resetIndex = useCallback(() => {
+		indexRef.current = -1;
+		forceUpdate((n) => n + 1);
+	}, []);
 
-  return { saveToHistory, navigatePrev, navigateNext, clearHistory, resetIndex, hasPrev, hasNext };
+	return { saveToHistory, navigatePrev, navigateNext, clearHistory, resetIndex, hasPrev, hasNext };
 }