v1.6.8: UI polish — title bar search, panel shadows, chat separators, status bar groups; fix cloud model garbling (revert Fix 2A)

Author: Brendan Gray

package.json

@@ -1,6 +1,6 @@
 {
   "name": "guide-ide",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "guIDE - AI-Powered Offline IDE with local LLM, RAG, MCP tools, browser automation, and integrated terminal",
   "author": {
     "name": "Brendan Gray",

src/components/Chat/ChatPanel.tsx

@@ -2992,6 +2992,8 @@ ${e.message}`,
                 <Zap size={10} className={autoMode ? 'text-[#ffd700]' : ''} />
                 <span className="hidden sm:inline">Auto</span>
               </button>
+              {/* Auto/Plan separator */}
+              <div className="w-px h-3.5 flex-shrink-0 mx-0.5" style={{ backgroundColor: 'rgba(255,255,255,0.12)' }} />
               {/* Plan Mode toggle — inline */}
               <button
                 className={`flex items-center gap-0.5 text-[11px] px-1 py-0.5 rounded transition-colors ${
@@ -3007,6 +3009,8 @@ ${e.message}`,
                 <FileCode size={10} className={planMode ? 'text-white' : ''} />
                 <span className="hidden sm:inline">Plan</span>
               </button>
+              {/* Plan/Model separator */}
+              <div className="w-px h-3.5 flex-shrink-0 mx-0.5" style={{ backgroundColor: 'rgba(255,255,255,0.12)' }} />
               {/* Model picker — inline */}
               <button
                 className="flex items-center gap-1 text-[11px] text-[#858585] hover:text-[#cccccc] px-1 py-0.5 rounded hover:bg-[#4c4c4c] transition-colors chat-dropdown-panel max-w-[120px]"

src/components/Chat/hooks/useChatStreaming.ts

@@ -164,26 +164,12 @@ export function useChatStreaming(): ChatStreamingState {
       iterationStartOffsetRef.current = streamBufferRef.current.length;
     });
 
-    // Anti-hallucination: backend detected fake tool results
+    // Anti-hallucination: backend detected fake tool results, or tool-call iteration wipe.
+    // The backend (agenticChat.js) already routes any planning text to llm-thinking-token
+    // BEFORE sending llm-replace-last, so we just wipe this iteration's slot here.
     const cleanupReplace = api.onLlmReplaceLast?.((cleanedText: string) => {
       if (streamEpochRef.current !== activeEpochRef.current) return;
       const prefix = streamBufferRef.current.slice(0, iterationStartOffsetRef.current);
-      // When cleanedText is empty (tool-call iteration wipe), the streamed planning text
-      // would vanish abruptly from the main chat. Promote it to a thinking segment so it
-      // transitions visually rather than disappearing — prevents the jarring flash/blank effect.
-      if (!cleanedText) {
-        const iterationText = streamBufferRef.current.slice(iterationStartOffsetRef.current).trim();
-        if (iterationText.length > 10) {
-          // Avoid duplication: backend may have already sent this text as llm-thinking-token.
-          // Only push if last thinking segment doesn't already start with the same content.
-          const lastSeg = thinkingSegmentsRef.current[thinkingSegmentsRef.current.length - 1] || '';
-          const firstChunk = iterationText.substring(0, 80);
-          if (!lastSeg.includes(firstChunk)) {
-            thinkingSegmentsRef.current.push(iterationText);
-            scheduleThinkingUpdate();
-          }
-        }
-      }
       // Preserve text from prior iterations — only replace current iteration's portion
       streamBufferRef.current = prefix + cleanedText;
       // Jump display to buffer end — corrections show immediately, no typewriter delay

src/components/Layout/Layout.tsx

@@ -376,14 +376,39 @@ export const Layout: React.FC = () => {
   return (
     <div className="flex flex-col h-screen overflow-hidden" style={{ backgroundColor: 'var(--theme-bg)', color: 'var(--theme-foreground)' }}>
       {/* Title Bar with Menu */}
-      <div className="h-[40px] flex items-center select-none flex-shrink-0 relative z-50 pt-[2px]"
+      <div className="h-[34px] flex items-center select-none flex-shrink-0 relative z-50"
            style={{ backgroundColor: 'var(--theme-title-bar)', WebkitAppRegion: 'drag' } as any}>
         <div className="flex items-center text-[12px]" style={{ color: 'var(--theme-foreground)', opacity: 0.8, WebkitAppRegion: 'no-drag' } as any}>
           <span className="px-2 flex items-center" title="guIDE by Brendan Gray">
             <img src="zzz.png" alt="guIDE" className="w-5 h-5" style={{ filter: 'brightness(1.2)' }} />
           </span>
           <MenuBar onAction={handleMenuAction} />
         </div>
+        {/* Centered VS Code-style project search bar */}
+        <div
+          className="absolute left-1/2 -translate-x-1/2 flex items-center"
+          style={{ WebkitAppRegion: 'no-drag' } as any}
+        >
+          <button
+            className="flex items-center gap-2 h-[22px] rounded transition-all px-3 hover:opacity-100"
+            style={{
+              backgroundColor: 'var(--theme-input-bg, rgba(255,255,255,0.06))',
+              border: '1px solid var(--theme-border, rgba(255,255,255,0.10))',
+              color: 'var(--theme-foreground-muted)',
+              width: 'clamp(220px, 30vw, 440px)',
+              opacity: 0.75,
+            }}
+            onClick={() => handleMenuAction('command-palette')}
+            title="Search files, commands, and more (Ctrl+P)"
+            aria-label="Open command palette"
+          >
+            <Search size={11} className="flex-shrink-0 opacity-60" />
+            <span className="truncate flex-1 text-left text-[11px]">
+              {rootPath ? rootPath.split(/[\/\\]/).pop() : 'Search files by name...'}
+            </span>
+            <kbd className="text-[10px] opacity-35 flex-shrink-0 ml-1 font-sans">Ctrl+P</kbd>
+          </button>
+        </div>
         <div className="flex-1" />
         {/* VS Code–style layout toggle buttons */}
         <div className="flex items-center gap-0.5 mr-2" style={{ WebkitAppRegion: 'no-drag' } as any}>
@@ -572,7 +597,7 @@ export const Layout: React.FC = () => {
         ) : (
           <>
         {/* Sidebar — always mounted so panels stay alive; width animates open/close */}
-        <div className="flex flex-col flex-shrink-0 overflow-hidden" style={{ width: sidebarVisible ? sidebarWidth : 0, backgroundColor: 'var(--theme-sidebar)', borderRight: sidebarVisible ? '1px solid var(--theme-sidebar-border)' : 'none', transition: 'width 200ms cubic-bezier(0.4,0,0.2,1)' }}>
+        <div className="flex flex-col flex-shrink-0 overflow-hidden" style={{ width: sidebarVisible ? sidebarWidth : 0, backgroundColor: 'var(--theme-sidebar)', borderRight: sidebarVisible ? '1px solid var(--theme-sidebar-border)' : 'none', transition: 'width 200ms cubic-bezier(0.4,0,0.2,1)', boxShadow: sidebarVisible ? '2px 0 8px rgba(0,0,0,0.28)' : 'none' }}>
               <div className="h-[30px] flex items-center px-4 text-[11px] font-semibold uppercase tracking-wider flex-shrink-0" style={{ color: 'var(--theme-foreground-subtle)', borderBottom: '1px solid var(--theme-sidebar-border)' }}>
                 {sidebarView === 'explorer' && 'Explorer'}
                 {sidebarView === 'search' && 'Search'}
@@ -705,7 +730,7 @@ export const Layout: React.FC = () => {
         {chatVisible && (
           <>
             <div className="w-[4px] cursor-col-resize bg-transparent hover:bg-[#007acc] active:bg-[#007acc] transition-colors flex-shrink-0" onMouseDown={() => startResize('chat')} />
-            <div className="flex-shrink-0 border-l border-[#252526] overflow-hidden" style={{ width: chatWidth }}>
+            <div className="flex-shrink-0 border-l border-[#252526] overflow-hidden" style={{ width: chatWidth, boxShadow: '-2px 0 8px rgba(0,0,0,0.28)' }}>
               <ChatPanel
                 rootPath={rootPath}
                 currentFile={currentFile}

src/components/Layout/StatusBar.tsx

@@ -244,16 +244,18 @@ export const StatusBar: React.FC<StatusBarProps> = ({
           </div>
         )}
 
+        {/* Editor info group separator */}
+        <div className="w-px h-3 flex-shrink-0 mx-0.5" style={{ backgroundColor: 'rgba(255,255,255,0.10)' }} />
         {/* Cursor position */}
         <div className="cursor-pointer hover:bg-[#ffffff10] px-1 rounded flex-shrink-0 whitespace-nowrap">
           Ln {cursorPosition.line}, Col {cursorPosition.column}
         </div>
-
         {/* Language */}
         <div className="cursor-pointer hover:bg-[#ffffff10] px-1 rounded capitalize flex-shrink-0">
           {language}
         </div>
-
+        {/* AI status group separator */}
+        <div className="w-px h-3 flex-shrink-0 mx-0.5" style={{ backgroundColor: 'rgba(255,255,255,0.10)' }} />
         {/* LLM Status */}
         <div className="flex items-center gap-1 cursor-pointer hover:bg-[#ffffff10] px-1 rounded min-w-0 flex-shrink"
              title={llmStatus.modelInfo ? `${llmStatus.modelInfo.name}\nContext: ${llmStatus.modelInfo.contextSize || '?'} tokens\nGPU Layers: ${llmStatus.modelInfo.gpuLayers || '?'}\nBackend: ${llmStatus.modelInfo.gpuBackend || '?'}${llmStatus.modelInfo.flashAttention ? '\nFlash Attention: ON' : ''}` : llmStatus.message}>
@@ -266,6 +268,8 @@ export const StatusBar: React.FC<StatusBarProps> = ({
           )}
         </div>
 
+        {/* Actions group separator */}
+        <div className="w-px h-3 flex-shrink-0 mx-0.5" style={{ backgroundColor: 'rgba(255,255,255,0.10)' }} />
         {/* Voice Command */}
         {onAction && (
           <VoiceCommandButton onAction={onAction} onChatMessage={onChatMessage} />