PyPI - illusion-code - Versions diffs - 0.2.5__tar.gz → 0.2.6__tar.gz - Mend

illusion-code 0.2.5tar.gz → 0.2.6tar.gz

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (523) hide show

{illusion_code-0.2.5 → illusion_code-0.2.6}/.github/workflows/publish.yml RENAMED Viewed

@@ -10,6 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
+      id-token: write
     steps:
       - uses: actions/checkout@v4
@@ -43,7 +44,4 @@ jobs:
         run: twine check dist/*
       - name: Publish to PyPI
-        env:
-          TWINE_USERNAME: __token__
-          TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }}
-        run: twine upload dist/*
+        uses: pypa/gh-action-pypi-publish@release/v1

{illusion_code-0.2.5 → illusion_code-0.2.6}/PKG-INFO RENAMED Viewed

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: illusion-code
-Version: 0.2.5
+Version: 0.2.6
 Summary: Open-source Python port of Claude Code - an AI-powered CLI coding assistant
 Project-URL: Homepage, https://github.com/YunTaiHua/illusion-code
 Project-URL: Repository, https://github.com/YunTaiHua/illusion-code

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/terminal/package-lock.json RENAMED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "@illusion/terminal",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@illusion/terminal",
-      "version": "0.2.5",
+      "version": "0.2.6",
       "dependencies": {
         "chalk": "^5.6.2",
         "ink": "^5.1.0",

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/terminal/package.json RENAMED Viewed

@@ -24,5 +24,5 @@
     "tsx": "^4.19.2",
     "typescript": "^5.7.3"
   },
-  "version": "0.2.5"
+  "version": "0.2.6"
 }

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/terminal/src/components/TodoPanel.tsx RENAMED Viewed

@@ -41,10 +41,6 @@ export function TodoPanel({items}: {items: TodoItemSnapshot[]}): React.JSX.Eleme
 	const hideTimerRef = useRef<NodeJS.Timeout | null>(null);
 	const completionTimeRef = useRef<Record<string, number>>({});
-	if (items.length === 0 || hidden) {
-		return <></>;
-	}
 	const completed = items.filter((t) => t.status === 'completed').length;
 	const inProgress = items.filter((t) => t.status === 'in_progress').length;
 	const pending = items.filter((t) => t.status === 'pending').length;
@@ -58,7 +54,7 @@ export function TodoPanel({items}: {items: TodoItemSnapshot[]}): React.JSX.Eleme
 		}
 	}
-	// 所有任务完成后延迟隐藏
+	// 所有任务完成后延迟隐藏（必须在所有条件 return 之前，遵守 Hooks 规则）
 	useEffect(() => {
 		if (allDone) {
 			if (hideTimerRef.current === null) {
@@ -82,6 +78,11 @@ export function TodoPanel({items}: {items: TodoItemSnapshot[]}): React.JSX.Eleme
 		};
 	}, [allDone]);
+	// 条件 return 放在 useEffect 之后，避免违反 React Hooks 规则
+	if (items.length === 0 || hidden) {
+		return <></>;
+	}
 	// 排序：最近完成 > in_progress > pending > 较早完成
 	const sorted = [...items].sort((a, b) => {
 		const aRecent = a.status === 'completed' && (now - (completionTimeRef.current[a.content] ?? 0)) < RECENT_COMPLETED_TTL_MS;

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/terminal/src/version.ts RENAMED Viewed

@@ -6,4 +6,4 @@
  */
 /** 当前版本号 */
-export const VERSION = '0.2.5';
+export const VERSION = '0.2.6';

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/index.html RENAMED Viewed

@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet" />
     <title>Illusion Code</title>
   </head>
-  <body class="bg-white">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/package-lock.json RENAMED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "@illusion/web",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@illusion/web",
-      "version": "0.2.5",
+      "version": "0.2.6",
       "dependencies": {
         "highlight.js": "^11.11.0",
         "react": "^18.3.1",

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/package.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@illusion/web",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": true,
   "type": "module",
   "scripts": {

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/src/App.tsx RENAMED Viewed

@@ -55,18 +55,27 @@ export default function App() {
   // Toast 状态
   const [toastMessage, setToastMessage] = useState<{ text: string; type: 'success' | 'error' | 'info' } | null>(null);
+  const [toastExiting, setToastExiting] = useState(false);
   const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const toastHoverRef = useRef(false);
+  const toastKeyRef = useRef(0);
+  const closeToast = useCallback(() => {
+    setToastExiting(true);
+    setTimeout(() => { setToastMessage(null); setToastExiting(false); }, 200);
+  }, []);
   const showToast = useCallback((text: string, type: string) => {
     if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+    toastKeyRef.current += 1;
+    setToastExiting(false);
     setToastMessage({ text, type: type as 'success' | 'error' | 'info' });
     toastHoverRef.current = false;
     toastTimerRef.current = setTimeout(() => {
-      if (!toastHoverRef.current) { setToastMessage(null); }
+      if (!toastHoverRef.current) { closeToast(); }
       toastTimerRef.current = null;
     }, TOAST_DURATION);
-  }, []);
+  }, [closeToast]);
   const handleToastMouseEnter = useCallback(() => {
     toastHoverRef.current = true;
@@ -75,8 +84,8 @@ export default function App() {
   const handleToastMouseLeave = useCallback(() => {
     toastHoverRef.current = false;
-    toastTimerRef.current = setTimeout(() => { setToastMessage(null); toastTimerRef.current = null; }, TOAST_DURATION);
-  }, []);
+    toastTimerRef.current = setTimeout(() => { closeToast(); toastTimerRef.current = null; }, TOAST_DURATION);
+  }, [closeToast]);
   /**
    * 注册回调函数
@@ -317,7 +326,7 @@ export default function App() {
   };
   return (
-    <div className="flex h-screen bg-surface-main">
+    <div className="flex h-screen">
       <Sidebar lang={lang} connected={session.connected} sessions={session.sessions}
         onNewSession={handleNewSession} onSelectSession={handleSelectSession}
         onListSessions={handleListSessions}
@@ -363,8 +372,8 @@ export default function App() {
       {/* 删除会话弹窗（仅 sidebar 触发） */}
       {showDeleteModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={handleCloseDeleteModal} />
-          <div className="relative bg-white rounded-xl shadow-2xl border border-border-light w-[420px] max-h-[70vh] flex flex-col">
+          <div className="absolute inset-0 bg-black/35 backdrop-blur-md animate-fade-in" onClick={handleCloseDeleteModal} />
+          <div className="relative glass-overlay rounded-2xl w-[420px] max-h-[70vh] flex flex-col animate-scale-in modal-origin-center">
             <div className="px-6 py-4 border-b border-border-light">
               <h3 className="text-lg font-semibold text-content-primary">{t(lang, 'delete_session')}</h3>
             </div>
@@ -372,7 +381,7 @@ export default function App() {
               {regularSessions.length === 0 ? (
                 <div className="px-6 py-8 text-center text-sm text-content-disabled">{t(lang, 'no_sessions')}</div>
               ) : regularSessions.map((s) => (
-                <label key={s.value} className="flex items-center gap-3 px-6 py-3 cursor-pointer hover:bg-surface-hover transition-colors">
+                <label key={s.value} className="flex items-center gap-3 px-6 py-3 cursor-pointer glass-option-hover transition-colors rounded-lg mx-1">
                   <input type="checkbox" checked={deleteSelected.has(s.value)} onChange={() => toggleDeleteItem(s.value)} className="w-4 h-4 rounded accent-danger" />
                   <span className="text-sm text-content-secondary truncate flex-1">{s.label}</span>
                 </label>
@@ -384,10 +393,10 @@ export default function App() {
                   // 直接删除全部；后端会原子化地新建空会话，避免两阶段竞态
                   session.deleteSessions([], true);
                   setDeleteModalOpen(false); setDeleteSelected(new Set());
-                }} className="px-4 py-2 text-sm text-danger hover:bg-red-50 rounded-lg transition-colors cursor-pointer">{t(lang, 'delete_all')}</button>
+                }} className="danger-action px-4 py-2 text-sm text-danger rounded-lg cursor-pointer">{t(lang, 'delete_all')}</button>
               )}</div>
               <div className="flex gap-2">
-                <button onClick={handleCloseDeleteModal} className="px-4 py-2 text-sm text-content-secondary hover:bg-surface-hover rounded-lg transition-colors cursor-pointer border border-border-light">{t(lang, 'cancel')}</button>
+                <button onClick={handleCloseDeleteModal} className="px-4 py-2 text-sm text-content-secondary glass-option-hover rounded-lg transition-colors cursor-pointer border border-white/40">{t(lang, 'cancel')}</button>
                 <button onClick={handleConfirmDelete} disabled={deleteSelected.size === 0}
                   className="px-4 py-2 text-sm text-white bg-danger hover:bg-danger-hover rounded-lg transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed">
                   {t(lang, 'confirm_delete')} ({deleteSelected.size})
@@ -400,16 +409,28 @@ export default function App() {
       {/* Toast 通知 */}
       {toastMessage && (
-        <div className="fixed bottom-20 right-6 z-50 animate-fade-in"
-          onMouseEnter={handleToastMouseEnter} onMouseLeave={handleToastMouseLeave}>
-          <div className="bg-white rounded-lg shadow-lg px-4 py-3 max-w-sm">
-            <div className="flex items-start gap-3">
+        <div
+          key={toastKeyRef.current}
+          className={`fixed bottom-20 right-6 z-50 ${toastExiting ? 'animate-toast-out' : 'animate-toast-in'}`}
+          onMouseEnter={handleToastMouseEnter} onMouseLeave={handleToastMouseLeave}
+        >
+          <div className="glass-surface border border-black/10 rounded-2xl max-w-sm overflow-hidden">
+            <div className="flex items-start gap-3 px-4 py-3">
               <pre className="text-sm text-content-primary whitespace-pre-wrap font-mono leading-relaxed flex-1 max-h-40 overflow-y-auto">{toastMessage.text}</pre>
-              <button onClick={() => setToastMessage(null)}
-                className="shrink-0 w-5 h-5 flex items-center justify-center rounded text-content-disabled hover:text-content-primary hover:bg-surface-hover transition-colors cursor-pointer">
+              <button onClick={closeToast}
+                className="shrink-0 w-5 h-5 flex items-center justify-center rounded text-content-disabled hover:text-content-primary glass-option-hover transition-colors cursor-pointer">
                 <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M2 2l8 8M10 2l-8 8" /></svg>
               </button>
             </div>
+            <div className="h-0.5 bg-black/10">
+              <div
+                key={toastKeyRef.current}
+                className={`h-full animate-progress-shrink ${
+                  toastMessage.type === 'error' ? 'bg-danger/80' : toastMessage.type === 'success' ? 'bg-success/80' : 'bg-primary/80'
+                }`}
+                style={{ animationDuration: `${TOAST_DURATION}ms` }}
+              />
+            </div>
           </div>
         </div>
       )}

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/src/components/ChatArea.tsx RENAMED Viewed

@@ -103,7 +103,7 @@ export default function ChatArea({
   // 此条件返回在所有 hooks 之后，不违反 React Rules of Hooks
   if (restoringSessionId) {
     return (
-      <div className="flex-1 flex items-center justify-center bg-surface-main">
+      <div className="flex-1 flex items-center justify-center">
         <div className="flex flex-col items-center gap-3">
           <svg className="animate-spin w-8 h-8 text-primary" viewBox="0 0 24 24" fill="none">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
@@ -116,7 +116,7 @@ export default function ChatArea({
   }
   return (
-    <div className="flex-1 overflow-y-auto bg-surface-main">
+    <div className="flex-1 overflow-y-auto">
       {!connected && !hasContent && (
         <div className="flex items-center justify-center h-full text-content-disabled text-sm font-medium">
           {t(lang, 'connecting')}

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/src/components/MessageBubble.tsx RENAMED Viewed

@@ -51,7 +51,7 @@ export default function MessageBubble({ item, toolInputMap }: MessageBubbleProps
   if (item.role === 'assistant') {
     return (
-      <div className="py-1.5">
+      <div className="py-1.5 animate-fade-in-up">
         {item.reasoning && <ThinkingBlock text={item.reasoning} />}
         <div className="text-content-primary text-sm prose max-w-full select-text">
           <ReactMarkdown remarkPlugins={[remarkGfm, remarkSuperscript]} rehypePlugins={[rehypeHighlight, rehypeRaw]}>

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/src/components/ModalCard.tsx RENAMED Viewed

@@ -65,8 +65,8 @@ export function PermissionCard({ modal, lang, onRespond }: PermissionCardProps)
   const requestId = String(modal.request_id ?? '');
   return (
-    <div className="my-3 rounded-xl border border-border-light overflow-hidden shadow-soft">
-      <div className="bg-surface-main px-4 py-3 flex items-center gap-2">
+    <div className="my-3 rounded-2xl glass-surface overflow-hidden">
+      <div className="px-4 py-3 flex items-center gap-2 border-b border-white/30">
         <svg className="w-4 h-4 text-amber-500 shrink-0" viewBox="0 0 16 16" fill="currentColor">
           <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
         </svg>
@@ -82,16 +82,16 @@ export function PermissionCard({ modal, lang, onRespond }: PermissionCardProps)
           <div className="text-xs text-content-secondary mt-1 leading-relaxed">{reason}</div>
         )}
       </div>
-      <div className="px-4 py-3 border-t border-border-light flex items-center justify-end gap-2">
+      <div className="px-4 py-3 border-t border-white/30 flex items-center justify-end gap-2">
         <button
           onClick={() => onRespond(requestId, false, false, toolName)}
-          className="px-3 py-1.5 text-xs font-medium text-content-secondary hover:bg-surface-hover rounded-md transition-colors cursor-pointer"
+          className="px-3 py-1.5 text-xs font-medium text-content-secondary glass-option-hover rounded-md transition-colors cursor-pointer"
         >
           {t(lang, 'deny')}
         </button>
         <button
           onClick={() => onRespond(requestId, true, true, toolName)}
-          className="px-3 py-1.5 text-xs font-medium text-content-primary border border-border-light hover:bg-surface-hover rounded-md transition-colors cursor-pointer"
+          className="px-3 py-1.5 text-xs font-medium text-content-primary border border-white/40 glass-option-hover rounded-md transition-colors cursor-pointer"
         >
           {t(lang, 'always_allow')}
         </button>
@@ -319,11 +319,11 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
         if (next && cardRef.current?.contains(next)) return;
         submitSingleMultiSelect();
       }}
-      className={`my-3 rounded-xl border border-border-light overflow-hidden shadow-soft ${
+      className={`my-3 rounded-2xl glass-surface overflow-hidden ${
         isMultiSelect && !isMultiQuestion ? 'outline-none' : ''
       }`}
     >
-      <div className="bg-surface-main px-4 py-3">
+      <div className="px-4 py-3">
         {/* Tab 导航栏 — 仅多问题时显示 */}
         {isMultiQuestion && (
           <div className="flex items-center gap-1 mb-2 overflow-x-auto">
@@ -340,7 +340,7 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
                       ? 'bg-primary text-white'
                       : isAnswered
                         ? 'bg-primary-light text-primary border border-primary/20'
-                        : 'bg-surface-hover text-content-secondary hover:bg-surface-main'
+                        : 'glass-option-hover text-content-secondary'
                   }`}
                 >
                   {isAnswered && !isActive && <span className="mr-1">✓</span>}
@@ -376,8 +376,8 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
                   onClick={() => handleOptionClick(i, opt.label)}
                   className={`w-full text-left px-3 py-2.5 rounded-lg text-sm transition-colors cursor-pointer flex items-start gap-2.5 ${
                     isSelected
-                      ? 'bg-primary-light border border-primary/20'
-                      : 'bg-white border border-border-light hover:bg-surface-hover'
+                      ? 'glass-option-active'
+                      : 'border border-transparent glass-option-hover'
                   }`}
                 >
                   {isMultiSelect ? (
@@ -407,10 +407,10 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
               <div
                 className={`w-full text-left px-3 py-2.5 rounded-lg text-sm transition-colors cursor-pointer flex items-start gap-2.5 ${
                   isMultiSelect && selectedIndices.has(otherIdx)
-                    ? 'bg-primary-light border border-primary/20'
+                    ? 'glass-option-active'
                     : isOtherFocused
-                      ? 'bg-white border border-primary/30'
-                      : 'text-content-disabled hover:bg-surface-hover border border-border-light border-dashed'
+                      ? 'glass-option-active'
+                      : 'text-content-disabled glass-option-hover border border-black/[0.06] border-dashed'
                 }`}
                 onClick={() => handleOptionClick(otherIdx, lang === 'zh-CN' ? '其他' : 'Other')}
               >
@@ -501,7 +501,7 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
               }}
               placeholder={lang === 'zh-CN' ? '输入你的回答...' : 'Type your answer...'}
               rows={1}
-              className="flex-1 resize-none bg-white border border-border-light rounded-lg px-3 py-2 text-sm outline-none focus:border-content-disabled transition-colors"
+              className="flex-1 resize-none bg-white/60 border border-white/40 rounded-lg px-3 py-2 text-sm outline-none focus:border-primary/40 transition-colors"
             />
             <button
               onClick={() => {
@@ -523,7 +523,7 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
         )}
       </div>
-      <div className="px-4 py-3 border-t border-border-light flex items-center justify-between">
+      <div className="px-4 py-3 border-t border-white/30 flex items-center justify-between">
         {/* 左侧：重置按钮（多问题时） */}
         <div>
           {isMultiQuestion && Object.keys(multiAnswers).length > 0 && (
@@ -534,7 +534,7 @@ export function QuestionCard({ modal, lang, onRespond }: QuestionCardProps) {
                 setAllOtherText({});
                 setCurrentIndex(0);
               }}
-              className="px-3 py-1.5 text-xs font-medium text-content-secondary hover:bg-surface-hover rounded-md transition-colors cursor-pointer"
+              className="px-3 py-1.5 text-xs font-medium text-content-secondary glass-option-hover rounded-md transition-colors cursor-pointer"
             >
               {lang === 'zh-CN' ? '重置' : 'Reset'}
             </button>

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/src/components/PromptInput.tsx RENAMED Viewed

@@ -88,6 +88,31 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
   const [showCommands, setShowCommands] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // 点击外部关闭内联选项
+  useEffect(() => {
+    if (!inlineOptions || inlineOptions.options.length === 0) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onInlineClose?.();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [inlineOptions, onInlineClose]);
+  // 点击外部关闭命令补全
+  useEffect(() => {
+    if (!showCommands) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowCommands(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showCommands]);
   // 自动补全仅显示 B 类指令（与后端 ready 推送的完整命令列表取交集，无交集则用静态集合）
   const webCommands = useMemo(() => {
@@ -225,18 +250,19 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
   const showAutocomplete = showCommands && filteredCommands.length > 0 && !showInline;
   return (
-    <div className="px-4 md:px-5 pb-4 pt-2 relative">
+    <div className="px-4 md:px-5 pb-4 pt-2 relative" ref={containerRef}>
       {/* 内联选项 */}
       {showInline && (
-        <div className="absolute bottom-full left-4 right-4 md:left-5 md:right-5 mb-1 bg-white border border-border-light rounded-xl shadow-lg max-h-64 overflow-y-auto py-1 z-20">
-          <div className="px-3 py-1.5 text-xs text-content-disabled font-medium">{inlineOptions.title}</div>
+        <div className="absolute bottom-full left-4 right-4 md:left-5 md:right-5 mb-1 glass-surface rounded-xl max-h-64 overflow-y-auto py-1.5 z-20 animate-fade-in-up">
+          <div className="px-3 py-1.5 text-[10px] text-content-disabled font-semibold uppercase tracking-widest">{inlineOptions.title}</div>
           {inlineOptions.options.map((opt, idx) => (
             <button
               key={opt.value}
               onClick={() => onInlineSelect?.(inlineOptions.command, opt.value)}
-              className={`w-full text-left px-3 py-2 text-sm transition-colors cursor-pointer flex flex-col gap-0.5 ${
-                idx === selectedIndex ? 'bg-primary-light text-primary' : opt.active ? 'bg-surface-hover text-content-primary' : 'text-content-secondary hover:bg-surface-hover'
+              className={`w-full text-left px-3 py-2 text-sm transition-colors cursor-pointer flex flex-col gap-0.5 animate-fade-in-up rounded-md ${
+                idx === selectedIndex ? 'glass-option-active text-content-primary' : opt.active ? 'text-primary/70 glass-option-hover' : 'text-content-secondary glass-option-hover'
               }`}
+              style={{ animationDelay: `${(idx + 1) * 30}ms` }}
             >
               <span className="font-medium">{opt.label}</span>
               {opt.description && <span className="text-xs text-content-disabled">{opt.description}</span>}
@@ -249,15 +275,17 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
       {showAutocomplete && (
         <div
           ref={listRef}
-          className="absolute bottom-full left-4 right-4 md:left-5 md:right-5 mb-1 bg-white border border-border-light rounded-xl shadow-lg max-h-56 overflow-y-auto py-1 z-20"
+          className="absolute bottom-full left-4 right-4 md:left-5 md:right-5 mb-1 glass-surface rounded-xl max-h-56 overflow-y-auto py-1.5 z-20 animate-fade-in-up"
         >
+          <div className="px-3 py-1.5 text-[10px] text-content-disabled font-semibold uppercase tracking-widest">Commands</div>
           {filteredCommands.map((cmd, idx) => (
             <button
               key={cmd}
               onClick={() => selectCommand(cmd)}
-              className={`w-full text-left px-3 py-2 text-sm transition-colors cursor-pointer ${
-                idx === selectedIndex ? 'bg-primary-light text-primary' : 'text-content-secondary hover:bg-surface-hover'
+              className={`w-full text-left px-3 py-2 text-sm transition-colors cursor-pointer animate-fade-in-up rounded-md ${
+                idx === selectedIndex ? 'glass-option-active text-content-primary' : 'text-content-secondary glass-option-hover'
               }`}
+              style={{ animationDelay: `${idx * 30}ms` }}
             >
               <span className="font-mono">{cmd}</span>
             </button>
@@ -265,7 +293,7 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
         </div>
       )}
-      <div className="flex items-end bg-surface-card rounded-md border border-border-light shadow-soft focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
+      <div className="flex items-end glass-surface rounded-lg transition-all duration-200 focus-within:shadow-glow">
         <textarea
           value={value}
           onChange={handleChange}
@@ -284,14 +312,14 @@ export default function PromptInput({ lang, busy, connected, commands, onSubmit,
         <button
           onClick={handleSend}
           disabled={!connected && !busy}
-          className={`shrink-0 m-1.5 w-8 h-8 flex items-center justify-center rounded-full transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${
+          className={`shrink-0 m-1.5 w-8 h-8 flex items-center justify-center rounded-full transition-all duration-150 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:scale-105 active:scale-90 ${
             busy
               ? 'bg-danger/10 text-danger hover:bg-danger/20 animate-pulse'
-              : 'bg-primary text-white hover:bg-primary-hover'
+              : 'bg-primary text-white hover:bg-primary-hover hover:shadow-glow'
           }`}
           title={busy ? t(lang, 'task_stopped') : t(lang, 'send')}
         >
-          {busy ? '■' : '↑'}
+          {busy ? <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><rect width="10" height="10" rx="1.5" /></svg> : '↑'}
         </button>
       </div>
     </div>

{illusion_code-0.2.5 → illusion_code-0.2.6}/frontend/web/src/components/RightPanel.tsx RENAMED Viewed

@@ -67,15 +67,15 @@ export default function RightPanel({
   // 折叠态
   if (collapsed) {
     return (
-      <aside className="w-12 bg-surface-main border-l border-border-light flex flex-col items-center py-4 shrink-0 select-none">
+      <aside className="w-12 glass-panel border-l border-white/30 flex flex-col items-center py-4 shrink-0 select-none">
         <button onClick={onToggle} title={t(lang, 'expand_panel')}
-          className="w-8 h-8 flex items-center justify-center rounded-lg text-content-secondary hover:bg-surface-hover hover:text-content-primary transition-colors cursor-pointer">
+          className="w-8 h-8 flex items-center justify-center rounded-lg text-content-secondary glass-option-hover hover:text-content-primary transition-colors cursor-pointer">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M10 3l-5 5 5 5" />
           </svg>
         </button>
         <div className="mt-auto mb-2">
-          <span className={`block w-2.5 h-2.5 rounded-full ${connected ? (busy ? 'bg-warning animate-pulse' : 'bg-success') : 'bg-danger'}`} />
+          <span className={`block w-2.5 h-2.5 rounded-full ${connected ? (busy ? 'bg-warning animate-pulse' : 'bg-success') : 'bg-danger'}`} style={connected && !busy ? { boxShadow: '0 0 6px rgba(76, 175, 125, 0.5)' } : busy ? { boxShadow: '0 0 6px rgba(232, 168, 76, 0.5)' } : { boxShadow: '0 0 6px rgba(212, 91, 91, 0.4)' }} />
         </div>
       </aside>
     );
@@ -87,11 +87,11 @@ export default function RightPanel({
   const projectRules = rules.filter((r) => r.source === 'project');
   return (
-    <aside className="bg-surface-main border-l border-border-light flex flex-col h-full shrink-0 overflow-y-auto select-none" style={{ width: `${width}px` }}>
+    <aside className="glass-panel border-l border-white/30 flex flex-col h-full shrink-0 overflow-y-auto select-none" style={{ width: `${width}px` }}>
       {/* 折叠按钮 */}
       <div className="px-5 pt-3 pb-1 flex justify-end">
         <button onClick={onToggle} title={t(lang, 'collapse_panel')}
-          className="w-7 h-7 flex items-center justify-center rounded-lg text-content-secondary hover:bg-surface-hover hover:text-content-primary transition-colors cursor-pointer">
+          className="w-7 h-7 flex items-center justify-center rounded-lg text-content-secondary glass-option-hover hover:text-content-primary transition-colors cursor-pointer">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M6 3l5 5-5 5" />
           </svg>
@@ -164,9 +164,9 @@ export default function RightPanel({
           <div className="text-xs text-content-secondary font-medium mb-1.5">{t(lang, 'context_window')}</div>
           <div className="flex items-center gap-3">
             <span className="text-sm text-content-primary whitespace-nowrap tabular-nums">~{formatTokens(contextTokens)}/{formatTokens(contextWindow)}</span>
-            <div className="flex-1 h-2 bg-surface-hover rounded-full overflow-hidden">
+            <div className="flex-1 h-1.5 bg-black/10 rounded-full overflow-hidden">
               <div
-                className={`h-full rounded-full transition-all duration-500 ${contextPercent >= 95 ? 'bg-danger' : contextPercent >= 80 ? 'bg-warning' : 'bg-primary'}`}
+                className={`h-full rounded-full transition-all duration-500 ${contextPercent >= 95 ? 'bg-gradient-to-r from-warning to-danger' : contextPercent >= 80 ? 'bg-gradient-to-r from-primary to-warning' : 'bg-primary'}`}
                 style={{ width: `${contextPercent}%` }}
               />
             </div>
@@ -199,23 +199,25 @@ function CollapsibleSection({
     <div className="border-t border-border-light">
       <button
         onClick={() => setCollapsed((c) => !c)}
-        className="w-full px-5 py-2.5 flex items-center gap-2 hover:bg-surface-hover transition-colors cursor-pointer"
+        className="w-full px-5 py-2.5 flex items-center gap-2 glass-option-hover transition-colors cursor-pointer"
       >
         <svg
-          className={`w-3 h-3 text-content-disabled shrink-0 transition-transform duration-150 ${collapsed ? '' : 'rotate-90'}`}
+          className={`w-3 h-3 text-content-disabled shrink-0 transition-transform duration-200 ${collapsed ? '' : 'rotate-90'}`}
           viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
         >
           <path d="M6 3l5 5-5 5" />
         </svg>
-        <span className="text-xs font-medium text-content-primary">{title}</span>
-        <span className="text-xs text-content-disabled tabular-nums">{count}</span>
+        <span className="text-xs font-semibold text-content-primary tracking-wide">{title}</span>
+        <span className="text-[10px] text-content-secondary bg-white/50 px-1.5 py-0.5 rounded-full tabular-nums">{count}</span>
         {subtitle && <span className="text-xs text-content-disabled ml-auto">{subtitle}</span>}
       </button>
-      {!collapsed && (
-        <div className="px-5 pb-2.5 flex flex-col gap-0.5 max-h-[50vh] overflow-y-auto">
-          {children}
+      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: collapsed ? '0fr' : '1fr' }}>
+        <div className="overflow-hidden">
+          <div className={`px-5 pb-2.5 flex flex-col gap-0.5 max-h-[50vh] overflow-y-auto ${collapsed ? '' : 'animate-fade-in-up'}`} style={{ animationDelay: '80ms' }}>
+            {children}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
 }
@@ -230,12 +232,12 @@ function ItemRow({ name, description, tag }: { name: string; description: string
     <div>
       <button
         onClick={() => hasDesc && setExpanded((e) => !e)}
-        className={`w-full flex items-center gap-2 px-2 py-1 rounded text-xs transition-colors ${hasDesc ? 'hover:bg-surface-hover cursor-pointer' : 'cursor-default'}`}
+        className={`w-full flex items-center gap-2 px-2 py-1 rounded text-xs transition-colors ${hasDesc ? 'glass-option-hover cursor-pointer' : 'cursor-default'}`}
         title={hasDesc ? description : name}
       >
         <span className="text-content-primary font-medium truncate flex-1 text-left">{name}</span>
         {tag && (
-          <span className="text-[10px] text-content-disabled bg-surface-main px-1.5 py-0.5 rounded shrink-0">{tag}</span>
+          <span className="text-[10px] text-primary/80 bg-white/50 px-1.5 py-0.5 rounded-full font-medium shrink-0">{tag}</span>
         )}
       </button>
       {expanded && hasDesc && (

illusion-code 0.2.5__tar.gz → 0.2.6__tar.gz

illusion-code 0.2.5tar.gz → 0.2.6tar.gz