1

prisma/components/ChatArea.tsx

@@ -1,7 +1,9 @@
+
 import React from 'react';
 import { ChatMessage, AppState, AnalysisResult, ExpertResult } from '../types';
 import ChatMessageItem from './ChatMessage';
 import ProcessFlow from './ProcessFlow';
+import Logo from './Logo';
 
 interface ChatAreaProps {
   messages: ChatMessage[];
@@ -26,12 +28,12 @@ const ChatArea = ({
     <div className="flex-1 overflow-y-auto custom-scrollbar scroll-smooth">
       <div className="pb-40">
         {messages.length === 0 && appState === 'idle' && (
-           <div className="h-full flex flex-col items-center justify-center pt-32 opacity-50 px-4 text-center">
-              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl mb-6 shadow-lg rotate-3 flex items-center justify-center text-white font-bold text-2xl">
-                Pr
-              </div>
-              <p className="text-lg font-medium">Prisma</p>
-              <p className="text-sm">Ask a complex question to start.</p>
+           <div className="h-full flex flex-col items-center justify-center pt-32 opacity-70 px-4 text-center">
+              <Logo className="w-24 h-24 mb-6 drop-shadow-xl animate-pulse-slow" />
+              <p className="text-xl font-bold text-slate-900">Prisma</p>
+              <p className="text-sm text-slate-500 max-w-xs mt-2">
+                Deep multi-agent reasoning.
+              </p>
            </div>
         )}
 
@@ -87,4 +89,4 @@ const ChatArea = ({
   );
 };
 
-export default ChatArea;
+export default ChatArea;

prisma/components/Header.tsx

@@ -1,7 +1,9 @@
+
 import React from 'react';
-import { Settings, ChevronDown, Menu, History } from 'lucide-react';
+import { Settings, ChevronDown, Menu } from 'lucide-react';
 import { MODELS } from '../config';
 import { ModelOption } from '../types';
+import Logo from './Logo';
 
 interface HeaderProps {
   selectedModel: ModelOption;
@@ -13,7 +15,7 @@ interface HeaderProps {
 
 const Header = ({ selectedModel, setSelectedModel, onOpenSettings, onToggleSidebar, onNewChat }: HeaderProps) => {
   return (
-    <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md">
+    <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-100">
       <div className="w-full px-4 h-16 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <button 
@@ -25,15 +27,13 @@ const Header = ({ selectedModel, setSelectedModel, onOpenSettings, onToggleSideb
           </button>
           
           <div 
-            className="flex items-center gap-2 cursor-pointer group"
+            className="flex items-center gap-3 cursor-pointer group"
             onClick={onNewChat}
             title="Start New Chat"
           >
-            <h1 className="font-bold text-lg tracking-tight text-slate-900 hidden sm:block group-hover:opacity-70 transition-opacity">
-              Gemini <span className="text-blue-600 font-light">Prisma</span>
-            </h1>
-            <h1 className="font-bold text-lg tracking-tight text-slate-900 sm:hidden group-hover:opacity-70 transition-opacity">
-              Prisma
+            <Logo className="w-8 h-8 transition-transform group-hover:scale-110" />
+            <h1 className="font-bold text-lg tracking-tight text-blue-600 group-hover:opacity-70 transition-opacity">
+              <span className="font-light">Prisma</span>
             </h1>
           </div>
         </div>
@@ -65,4 +65,4 @@ const Header = ({ selectedModel, setSelectedModel, onOpenSettings, onToggleSideb
   );
 };
 
-export default Header;
+export default Header;

prisma/components/InputSection.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useLayoutEffect, useState } from 'react';
+import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
 import { ArrowUp, Square } from 'lucide-react';
 import { AppState } from '../types';
 
@@ -34,6 +34,13 @@ const InputSection = ({ query, setQuery, onRun, onStop, appState }: InputSection
     }
   };
 
+  // Focus input on mount and when app becomes idle (e.g. after "New Chat" or completion)
+  useEffect(() => {
+    if (appState === 'idle' && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [appState]);
+
   // useLayoutEffect prevents visual flickering by adjusting height before paint
   useLayoutEffect(() => {
     adjustHeight();
@@ -70,6 +77,7 @@ const InputSection = ({ query, setQuery, onRun, onStop, appState }: InputSection
           onCompositionEnd={() => setIsComposing(false)}
           placeholder="Ask a complex question..."
           rows={1}
+          autoFocus
           className="flex-1 max-h-[200px] py-3 pl-4 pr-2 bg-transparent border-none focus:ring-0 resize-none outline-none text-slate-800 placeholder:text-slate-400 leading-relaxed custom-scrollbar text-base"
           style={{ minHeight: '48px' }}
         />

prisma/components/Logo.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+interface LogoProps {
+  className?: string;
+}
+
+const Logo = ({ className = "w-8 h-8" }: LogoProps) => {
+  return (
+    <svg 
+      viewBox="0 0 600 600" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g id="prism">
+        {/* Inner Triangle */}
+        <path 
+          fill="none" 
+          stroke="currentColor" 
+          strokeWidth="16" 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          d="M300 180 L200 420 L400 420 Z" 
+          className="text-slate-700"
+        />
+        
+        {/* Connecting Struts */}
+        <path 
+          fill="none" 
+          stroke="currentColor" 
+          strokeWidth="16" 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          d="M300 50 L300 180" 
+          className="text-slate-700"
+        />
+        <path 
+          fill="none" 
+          stroke="currentColor" 
+          strokeWidth="16" 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          d="M100 480 L200 420" 
+          className="text-slate-700"
+        />
+        <path 
+          fill="none" 
+          stroke="currentColor" 
+          strokeWidth="16" 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          d="M500 480 L400 420" 
+          className="text-slate-700"
+        />
+
+        {/* Outer Triangle */}
+        <path 
+          fill="none" 
+          stroke="currentColor" 
+          strokeWidth="16" 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          d="M300 50 L100 480 L500 480 Z" 
+          className="text-slate-700"
+        />
+      </g>
+
+      <g id="beams">
+        {/* Input Beam */}
+        <line x1="0" y1="275" x2="195" y2="275" stroke="currentColor" strokeWidth="12" className="text-slate-700" />
+
+        {/* Blue Beam */}
+        <polyline 
+          points="194,270 380,225 600,245" 
+          fill="none" 
+          stroke="#2563eb" 
+          strokeWidth="12" 
+          strokeLinejoin="round" 
+          opacity="0.95" 
+        />
+
+        {/* Green Beam */}
+        <polyline 
+          points="194,275 400,275 600,305" 
+          fill="none" 
+          stroke="#4ade80" 
+          strokeWidth="12" 
+          strokeLinejoin="round" 
+          opacity="0.95" 
+        />
+
+        {/* Purple Beam */}
+        <polyline 
+          points="194,280 420,325 600,370" 
+          fill="none" 
+          stroke="#9333ea" 
+          strokeWidth="12" 
+          strokeLinejoin="round" 
+          opacity="0.95" 
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default Logo;

prisma/components/MarkdownRenderer.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Copy, Check, Terminal } from 'lucide-react';
@@ -70,14 +72,35 @@ const CodeBlock = ({ node, inline, className, children, ...props }: any) => {
 };
 
 const MarkdownRenderer = ({ content, className }: { content: string, className?: string }) => {
+  /**
+   * Pre-process content to handle common LaTeX delimiters from Gemini
+   * and optimize Markdown compatibility.
+   */
+  const preprocessMarkdown = (text: string) => {
+    if (!text) return "";
+    
+    return text
+      // Replace \[ ... \] with $$ ... $$
+      .replace(/\\\[/g, '$$$$')
+      .replace(/\\\]/g, '$$$$')
+      // Replace \( ... \) with $ ... $
+      .replace(/\\\(/g, '$$')
+      .replace(/\\\)/g, '$$')
+      // Fix potential spacing issues between bold marks and math delimiters
+      .replace(/\*\*(\$)/g, '** $1')
+      .replace(/(\$)\*\*/g, '$1 **');
+  };
+
   return (
     <div className={className}>
       <ReactMarkdown
+        remarkPlugins={[remarkMath]}
+        rehypePlugins={[[rehypeKatex, { throwOnError: false, strict: false }]]}
         components={{
           code: CodeBlock
         }}
       >
-        {content}
+        {preprocessMarkdown(content)}
       </ReactMarkdown>
     </div>
   );

prisma/components/settings/ApiSection.tsx

@@ -0,0 +1,62 @@
+
+import React from 'react';
+import { Key, Globe } from 'lucide-react';
+import { AppConfig } from '../../types';
+
+interface ApiSectionProps {
+  config: AppConfig;
+  setConfig: (c: AppConfig) => void;
+}
+
+const ApiSection = ({ config, setConfig }: ApiSectionProps) => {
+  return (
+    <div className="space-y-4 pt-1">
+      <div className="flex items-center justify-between mb-2">
+         <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">API Connection</h3>
+         <label className="relative inline-flex items-center cursor-pointer">
+            <input 
+              type="checkbox" 
+              checked={config.enableCustomApi ?? false} 
+              onChange={(e) => setConfig({ ...config, enableCustomApi: e.target.checked })} 
+              className="sr-only peer" 
+            />
+            <div className="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+          </label>
+      </div>
+      
+      {config.enableCustomApi && (
+        <div className="space-y-4 p-4 bg-slate-50 rounded-lg border border-slate-100 animate-in fade-in slide-in-from-top-1 duration-200">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-slate-700 flex items-center gap-2">
+              <Key size={14} className="text-slate-400" />
+              Custom API Key
+            </label>
+            <input 
+              type="password"
+              placeholder="sk-..."
+              value={config.customApiKey || ''}
+              onChange={(e) => setConfig({ ...config, customApiKey: e.target.value })}
+              className="w-full bg-white border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none placeholder:text-slate-400"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-slate-700 flex items-center gap-2">
+              <Globe size={14} className="text-slate-400" />
+              Custom Base URL
+            </label>
+            <input 
+              type="text"
+              placeholder="https://generativelanguage.googleapis.com"
+              value={config.customBaseUrl || ''}
+              onChange={(e) => setConfig({ ...config, customBaseUrl: e.target.value })}
+              className="w-full bg-white border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none placeholder:text-slate-400"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ApiSection;

prisma/components/settings/GithubSection.tsx

@@ -0,0 +1,50 @@
+
+import React, { useState, useEffect } from 'react';
+import { Github, Star } from 'lucide-react';
+
+const GithubSection = ({ isOpen }: { isOpen: boolean }) => {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetch('https://api.github.com/repos/yeahhe365/Prisma')
+        .then(res => res.json())
+        .then(data => {
+          if (data && typeof data.stargazers_count === 'number') {
+            setStars(data.stargazers_count);
+          }
+        })
+        .catch(err => console.error("Error fetching stars:", err));
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="border-t border-slate-100 pt-6">
+      <a 
+        href="https://github.com/yeahhe365/Prisma" 
+        target="_blank" 
+        rel="noopener noreferrer"
+        className="flex items-center justify-between p-3 rounded-lg border border-slate-200 bg-slate-50 hover:bg-slate-100 transition-colors group"
+      >
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-slate-900 text-white rounded-lg group-hover:scale-110 transition-transform">
+            <Github size={18} />
+          </div>
+          <div>
+            <p className="text-sm font-semibold text-slate-800">yeahhe365 / Prisma</p>
+            <p className="text-xs text-slate-500">Open source on GitHub</p>
+          </div>
+        </div>
+        
+        {stars !== null && (
+          <div className="flex items-center gap-1 px-2 py-1 bg-white border border-slate-200 rounded-md shadow-sm">
+            <Star size={14} className="text-amber-500 fill-amber-500" />
+            <span className="text-xs font-bold text-slate-700">{stars.toLocaleString()}</span>
+          </div>
+        )}
+      </a>
+    </div>
+  );
+};
+
+export default GithubSection;

prisma/components/settings/LevelSelect.tsx

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { ThinkingLevel } from '../../types';
+
+interface LevelSelectProps {
+  label: string;
+  value: ThinkingLevel;
+  validLevels: ThinkingLevel[];
+  onChange: (v: ThinkingLevel) => void;
+  desc: string;
+}
+
+const LevelSelect = ({ 
+  label, 
+  value, 
+  validLevels,
+  onChange,
+  desc 
+}: LevelSelectProps) => (
+  <div className="space-y-2">
+    <div className="flex justify-between items-baseline">
+      <label className="text-sm font-medium text-slate-700">{label}</label>
+      <span className="text-xs text-slate-500 uppercase tracking-wider bg-slate-100 border border-slate-200 px-2 py-0.5 rounded">{value}</span>
+    </div>
+    <div className="relative">
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as ThinkingLevel)}
+        className="w-full bg-slate-50 border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none appearance-none cursor-pointer transition-colors hover:border-slate-300"
+      >
+        {validLevels.map(l => (
+          <option key={l} value={l}>{l.charAt(0).toUpperCase() + l.slice(1)}</option>
+        ))}
+      </select>
+      <ChevronDown className="absolute right-3 top-3 text-slate-400 pointer-events-none" size={14} />
+    </div>
+    <p className="text-xs text-slate-500 leading-relaxed">{desc}</p>
+  </div>
+);
+
+export default LevelSelect;

prisma/components/settings/ThinkingSection.tsx

@@ -0,0 +1,69 @@
+
+import React from 'react';
+import { RefreshCw } from 'lucide-react';
+import { AppConfig, ModelOption } from '../../types';
+import { getValidThinkingLevels } from '../../config';
+import LevelSelect from './LevelSelect';
+
+interface ThinkingSectionProps {
+  config: AppConfig;
+  setConfig: (c: AppConfig) => void;
+  model: ModelOption;
+}
+
+const ThinkingSection = ({ config, setConfig, model }: ThinkingSectionProps) => {
+  const validLevels = getValidThinkingLevels(model);
+
+  return (
+    <div className="border-t border-slate-100 pt-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Thinking Process</h3>
+      </div>
+       
+       <div className="p-3 bg-indigo-50 border border-indigo-100 rounded-lg flex items-center justify-between">
+          <div className="flex items-center gap-2">
+             <RefreshCw size={16} className="text-indigo-600" />
+             <div>
+                <p className="text-sm font-medium text-indigo-900">Recursive Refinement</p>
+                <p className="text-[10px] text-indigo-600/80">Loops expert generation until satisfied.</p>
+             </div>
+          </div>
+          <label className="relative inline-flex items-center cursor-pointer">
+            <input 
+              type="checkbox" 
+              checked={config.enableRecursiveLoop ?? false} 
+              onChange={(e) => setConfig({ ...config, enableRecursiveLoop: e.target.checked })} 
+              className="sr-only peer" 
+            />
+            <div className="w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
+          </label>
+       </div>
+
+      <LevelSelect 
+        label="Manager: Planning Strategy" 
+        value={config.planningLevel} 
+        validLevels={validLevels}
+        onChange={(v) => setConfig({ ...config, planningLevel: v })}
+        desc="Controls the depth of initial query analysis and expert delegation."
+      />
+      
+      <LevelSelect 
+        label="Experts: Execution Depth" 
+        value={config.expertLevel} 
+        validLevels={validLevels}
+        onChange={(v) => setConfig({ ...config, expertLevel: v })}
+        desc="Determines how deeply each expert persona thinks about their specific task."
+      />
+      
+      <LevelSelect 
+        label="Manager: Final Synthesis" 
+        value={config.synthesisLevel} 
+        validLevels={validLevels}
+        onChange={(v) => setConfig({ ...config, synthesisLevel: v })}
+        desc="Controls the reasoning effort for aggregating results into the final answer."
+      />
+    </div>
+  );
+};
+
+export default ThinkingSection;