From 4afad0860679d807888d821aaca72cf3f2fb8e21 Mon Sep 17 00:00:00 2001
From: Len Huang <lendevelops@gmail.com>
Date: Mon, 3 Feb 2025 23:24:08 -0500
Subject: [PATCH 1/5] first pass at spacing fix

---
 gui/src/components/InventoryPreview.tsx       | 78 +++++++------------
 gui/src/components/Layout.tsx                 | 10 +--
 gui/src/components/ProfileSwitcher.tsx        |  6 +-
 gui/src/components/StatusBar.tsx              | 16 ++--
 .../components/dialogs/KeyboardShortcuts.tsx  |  3 +-
 .../components/modelSelection/ModelSelect.tsx | 32 ++++----
 gui/src/pages/gui.tsx                         | 43 +++++-----
 7 files changed, 79 insertions(+), 109 deletions(-)

diff --git a/gui/src/components/InventoryPreview.tsx b/gui/src/components/InventoryPreview.tsx
index 7444656cae..b9516b9851 100644
--- a/gui/src/components/InventoryPreview.tsx
+++ b/gui/src/components/InventoryPreview.tsx
@@ -1,51 +1,35 @@
-import { Link, useNavigate } from "react-router-dom";
-import { useContext } from "react";
 import { getLogoPath } from "@/pages/welcome/setup/ImportExtensions";
-import { IdeMessengerContext } from "@/context/IdeMessenger";
-import { ShortcutButton } from "./ui/shortcutButton";
-import { useSelector } from "react-redux";
-import { RootState } from "@/redux/store";
-import { getMetaKeyLabel } from "@/util";
 
-const InventoryPreview = () => {
-  const navigate = useNavigate();
-  const ideMessenger = useContext(IdeMessengerContext);
-  const historyLength = useSelector((state: RootState) => state.state.history.length);
-
-  const menuItems = [
-    {
-      icon: "chat-default.svg",
-      path: "/inventory/aiderMode",
-      tooltip: "Inventory",
-      command: "pearai.toggleInventoryHome",
-    },
-    {
-      icon: "creator-default.svg",
-      path: "/inventory/aiderMode",
-      tooltip: "Creator",
-      command: "pearai.toggleCreator",
-    },
-    {
-      icon: "search-default.svg",
-      path: "/inventory/perplexityMode",
-      tooltip: "Search",
-      command: "pearai.toggleSearch",
-    },
-    {
-      icon: "memory-default.svg",
-      path: "/inventory/mem0Mode",
-      tooltip: "Memory",
-      command: "pearai.toggleMem0",
-    }
-  ];
-
-  const openInventory = () => {
-    ideMessenger.post("openInventoryHome", undefined);
-  };
+const menuItems = [
+  {
+    icon: "chat-default.svg",
+    path: "/inventory/aiderMode",
+    tooltip: "Inventory",
+    command: "pearai.toggleInventoryHome",
+  },
+  {
+    icon: "creator-default.svg",
+    path: "/inventory/aiderMode",
+    tooltip: "Creator",
+    command: "pearai.toggleCreator",
+  },
+  {
+    icon: "search-default.svg",
+    path: "/inventory/perplexityMode",
+    tooltip: "Search",
+    command: "pearai.toggleSearch",
+  },
+  {
+    icon: "memory-default.svg",
+    path: "/inventory/mem0Mode",
+    tooltip: "Memory",
+    command: "pearai.toggleMem0",
+  }
+];
 
+const InventoryPreview = () => {
   return (
-    <div className={`mt-2 relative w-full z-10`}>
-
+    <div className={`my-2 relative w-full z-10`}>
       <div
         className="flex cursor-pointer"
       >
@@ -57,7 +41,7 @@ const InventoryPreview = () => {
                 boxShadow: 'inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1)'
               }}
             />
-            <div className="flex gap-[6px] bg-clip-border bg-input p-[4px] cursor-pointer">
+            <div className="flex gap-[6px] bg-clip-border bg-input px-[6px] py-[4px] cursor-pointer">
               {menuItems.map((item, index) => (
                 <div
                   key={`${item.command}-${index}`}
@@ -85,10 +69,6 @@ const InventoryPreview = () => {
               ))}
             </div>
           </div>
-
-          {/* <div className="ml-1">
-            <ShortcutButton keys={["⌘", "E"]} label={"Inventory"} labelInside={true} />
-          </div> */}
         </div>
       </div>
 
diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
index 52f888a171..da8d77839b 100644
--- a/gui/src/components/Layout.tsx
+++ b/gui/src/components/Layout.tsx
@@ -4,12 +4,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import styled, { createGlobalStyle } from "styled-components";
 import {
-  CustomScrollbarDiv,
   defaultBorderRadius,
-  vscForeground,
-  vscInputBackground,
   vscBackground,
-  vscEditorBackground,
+  vscForeground,
+  vscInputBackground
 } from ".";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { useWebviewListener } from "../hooks/useWebviewListener";
@@ -22,10 +20,8 @@ import {
 import { RootState } from "../redux/store";
 import { getFontSize, isMetaEquivalentKeyPressed } from "../util";
 import { getLocalStorage, setLocalStorage } from "../util/localStorage";
-import PostHogPageView from "./PosthogPageView";
-import ShortcutContainer from "./ShortcutContainer";
-import InventoryPreview from "../components/InventoryPreview";
 import TextDialog from "./dialogs";
+import PostHogPageView from "./PosthogPageView";
 
 
 // check mac or window
diff --git a/gui/src/components/ProfileSwitcher.tsx b/gui/src/components/ProfileSwitcher.tsx
index 5a1eff47d6..4d9a995105 100644
--- a/gui/src/components/ProfileSwitcher.tsx
+++ b/gui/src/components/ProfileSwitcher.tsx
@@ -1,9 +1,8 @@
 import { Listbox, Transition } from "@headlessui/react";
 import {
   ChevronUpDownIcon,
-  Cog6ToothIcon,
   CogIcon,
-  UserCircleIcon,
+  UserCircleIcon
 } from "@heroicons/react/24/outline";
 import { ProfileDescription } from "core/config/ConfigHandler";
 import { Fragment, useContext, useEffect, useState } from "react";
@@ -235,7 +234,7 @@ function ProfileSwitcher(props: {}) {
       {/* Settings button (either opens config.json or /settings page in control plane) */}
       <HeaderButtonWithText
         tooltipPlacement="top-end"
-        className="z-10"
+        className="flex-none z-10"
         onClick={() => {
           if (selectedProfileId === "local") {
             ideMessenger.post("openConfigJson", undefined);
@@ -254,6 +253,7 @@ function ProfileSwitcher(props: {}) {
       {/* Only show login if beta explicitly enabled */}
       {controlServerBetaEnabled && (
         <HeaderButtonWithText
+          className="flex-nonee"
           tooltipPlacement="top-end"
           text={
             session?.account
diff --git a/gui/src/components/StatusBar.tsx b/gui/src/components/StatusBar.tsx
index 644db6e071..ba13a663a3 100644
--- a/gui/src/components/StatusBar.tsx
+++ b/gui/src/components/StatusBar.tsx
@@ -1,14 +1,14 @@
-import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useWebviewListener } from "@/hooks/useWebviewListener";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 import { IndexingProgressUpdate } from "core";
 import { useState } from "react";
-import ProfileSwitcher from "./ProfileSwitcher";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { defaultModelSelector } from "../redux/selectors/modelSelectors";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import IndexingProgressBar from "./loaders/IndexingProgressBar";
-import { defaultModelSelector } from "../redux/selectors/modelSelectors";
-import { useWebviewListener } from "@/hooks/useWebviewListener";
 import ModelSelect from "./modelSelection/ModelSelect";
+import ProfileSwitcher from "./ProfileSwitcher";
 
 const StatusBar = () => {
   const navigate = useNavigate();
@@ -23,14 +23,14 @@ const StatusBar = () => {
   });
 
   return (
-    <div className="items-center flex justify-between">
+    <div className="items-center flex justify-between gap-2 w-full overflow-hidden">
       <div className="flex items-center gap-2">
         {/* Indexing Progress Bar */}
         <IndexingProgressBar indexingState={indexingState} />
       </div>
 
       {/* Header Controls */}
-      <div className="flex items-center gap-1">
+      <div className="flex w-full items-center gap-1 justify-end min-w-0">
 				<ModelSelect />
 
         <ProfileSwitcher />
@@ -38,7 +38,7 @@ const StatusBar = () => {
         <HeaderButtonWithText
           tooltipPlacement="top-end"
           text="Help"
-          className="z-10"
+          className="flex-none z-10"
           onClick={() => {
             navigate(location.pathname === "/help" ? "/" : "/help");
           }}
diff --git a/gui/src/components/dialogs/KeyboardShortcuts.tsx b/gui/src/components/dialogs/KeyboardShortcuts.tsx
index 8c3f7ce225..1141851d49 100644
--- a/gui/src/components/dialogs/KeyboardShortcuts.tsx
+++ b/gui/src/components/dialogs/KeyboardShortcuts.tsx
@@ -4,9 +4,8 @@ import {
   StyledTooltip,
   defaultBorderRadius,
   lightGray,
-  vscBackground,
   vscEditorBackground,
-  vscForeground,
+  vscForeground
 } from "..";
 import { getPlatform, isJetBrains } from "../../util";
 
diff --git a/gui/src/components/modelSelection/ModelSelect.tsx b/gui/src/components/modelSelection/ModelSelect.tsx
index 72edb55fff..e2c0ac48a7 100644
--- a/gui/src/components/modelSelection/ModelSelect.tsx
+++ b/gui/src/components/modelSelection/ModelSelect.tsx
@@ -1,16 +1,17 @@
+import { isAiderMode } from "@/util/bareChatMode";
 import { Listbox } from "@headlessui/react";
 import {
-  ChevronDownIcon,
   CubeIcon,
   PlusIcon,
-  TrashIcon,
+  TrashIcon
 } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
-import { defaultBorderRadius, lightGray, vscEditorBackground } from "..";
+import { lightGray, vscEditorBackground } from "..";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
+import { providers } from "../../pages/AddNewModel/configs/providers";
 import { defaultModelSelector } from "../../redux/selectors/modelSelectors";
 import { setDefaultModel } from "../../redux/slices/stateSlice";
 import {
@@ -24,16 +25,13 @@ import {
   isMetaEquivalentKeyPressed,
 } from "../../util";
 import ConfirmationDialog from "../dialogs/ConfirmationDialog";
-import { isAiderMode, isPerplexityMode } from "@/util/bareChatMode";
-import { providers } from "../../pages/AddNewModel/configs/providers";
 
 const StyledListboxButton = styled(Listbox.Button)`
   border: solid 1px ${lightGray}30;
-  // background-color: ${lightGray}30;
   background-color: transparent;
-  border-radius: 4px;  
+  border-radius: 4px;
   padding: 2px 4px;
-  display: flex;
+  margin: 0 2px;
   align-items: center;
   gap: 2px;
 	user-select: none;
@@ -51,7 +49,7 @@ const StyledListboxOptions = styled(Listbox.Options) <{ newSession: boolean }>`
   white-space: nowrap;
   cursor: default;
   z-index: 50;
-  border: 1px solid ${lightGray}30; 
+  border: 1px solid ${lightGray}30;
   border-radius: 10px;
   background-color: ${vscEditorBackground};
   max-height: 300px;
@@ -177,7 +175,7 @@ function ModelOption({
           ) : (
             option.provider ? <img
               src={`${window.vscMediaUrl}/logos/${providers[option.provider]?.icon}`}
-              className="w-3.5 h-3.5 mr-2 flex-shrink-0 object-contain rounded-sm"
+              className="w-3.5 h-3.5 mr-2 flex-flex-none object-contain rounded-sm"
             /> : <CubeIcon className="w-3.5 h-3.5 stroke-2 mr-2 flex-shrink-0" />
           )}
           <span>{option.title}</span>
@@ -302,7 +300,7 @@ function ModelSelect() {
         dispatch(setDefaultModel({ title: val }));
       }}
       as="div"
-      className="relative inline-block"
+      className="flex max-w-[75%]"
     >
       {({ open }) => {
         useEffect(() => {
@@ -313,10 +311,10 @@ function ModelSelect() {
           <>
             <StyledListboxButton
               ref={buttonRef}
-              className="h-[18px] overflow-hidden"
+              className="h-[18px] flex overflow-hidden"
             >
               {defaultModel?.provider === 'pearai_server' ? (
-                <div className="flex items-center">
+                <div className="flex flex-initial items-center">
                   <img
                     src={`${window.vscMediaUrl}/logos/pearai-color.png`}
                     className="w-[15px] h-[15px] object-contain"
@@ -337,7 +335,7 @@ function ModelSelect() {
                           return 'default.png';
                       }
                     })()}`}
-                    className="w-[15px] h-[12px] object-contain rounded-sm  "
+                    className="w-[15px] h-[12px] object-contain rounded-sm"
                   />}
                 </div>
               ) : (
@@ -350,7 +348,9 @@ function ModelSelect() {
                   }}
                 />
               )}
-              {modelSelectTitle(defaultModel) || "Select model"}{" "}
+              <span className="truncate inline-block min-w-0">
+                {modelSelectTitle(defaultModel) || "Select model"}{" "}
+              </span>
             </StyledListboxButton>
 
             {open && (
diff --git a/gui/src/pages/gui.tsx b/gui/src/pages/gui.tsx
index 07714d2cc8..482b7b2871 100644
--- a/gui/src/pages/gui.tsx
+++ b/gui/src/pages/gui.tsx
@@ -1,3 +1,9 @@
+import InventoryPreview from "@/components/InventoryPreview";
+import ShortcutContainer from "@/components/ShortcutContainer";
+import StatusBar from "@/components/StatusBar";
+import WarningCard from "@/components/ui/warningcard";
+import { setActiveFilePath } from "@/redux/slices/uiStateSlice";
+import { getLocalStorage, setLocalStorage } from "@/util/localStorage";
 import {
   BackspaceIcon,
   ChatBubbleOvalLeftIcon,
@@ -49,21 +55,13 @@ import {
   isMetaEquivalentKeyPressed,
 } from "../util";
 import { FREE_TRIAL_LIMIT_REQUESTS } from "../util/freeTrial";
-import { getLocalStorage, setLocalStorage } from "@/util/localStorage";
 import OnboardingTutorial from "./onboarding/OnboardingTutorial";
-import StatusBar from "@/components/StatusBar";
-import InventoryPreview from "@/components/InventoryPreview";
-import { setActiveFilePath } from "@/redux/slices/uiStateSlice";
-import WarningCard from "@/components/ui/warningcard";
-import ShortcutContainer from "@/components/ShortcutContainer";
 
 const LENGTHY_MESSAGE_WARNING_INDEX = 14; // number of messages after which we show the warning card
 
 export const TopGuiDiv = styled.div<{ isNewSession: boolean }>`
   overflow-y: scroll;
   position: relative;
-  margin-top: -40px;
-  padding-top: 48px;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
@@ -229,11 +227,11 @@ function GUI() {
         const scrollTop = topGuiDivRef.current.scrollTop;
         const height = inputContainerRef.current.offsetHeight;
         const newPadding = isNewSession ? '0px' : `${height + 20}px`;
-        
+
         topGuiDivRef.current.style.paddingBottom = '0px';
         topGuiDivRef.current.offsetHeight;
         topGuiDivRef.current.style.paddingBottom = newPadding;
-        
+
         topGuiDivRef.current.scrollTop = scrollTop;
       }
     });
@@ -363,17 +361,19 @@ function GUI() {
 
   return (
     <>
-      {!window.isPearOverlay && !!showTutorialCard &&
+      {/* {!window.isPearOverlay && !!showTutorialCard &&
+        <TutorialCardDiv>
+          <OnboardingTutorial onClose={onCloseTutorialCard} />
+        </TutorialCardDiv>
+      } */}
+      {false &&
         <TutorialCardDiv>
           <OnboardingTutorial onClose={onCloseTutorialCard} />
         </TutorialCardDiv>
       }
-      <div className="pb-1 flex px-2">
-        <div
-          className="flex-col gap-2 "
-        >
-          <InventoryPreview />
-        </div>
+
+      <div className="flex px-2">
+        <InventoryPreview />
       </div>
 
       <TopGuiDiv ref={topGuiDivRef} onScroll={handleScroll} isNewSession={isNewSession}>
@@ -383,7 +383,6 @@ function GUI() {
 
           return (
             <Fragment key={index}>
-
               <ErrorBoundary
                 FallbackComponent={fallbackRender}
                 onReset={() => {
@@ -414,7 +413,6 @@ function GUI() {
                       </div>
                     </div>
                   ) : (
-                    // <div className="p-4 bg-orange-500 my-4">
                     <TimelineItem
                       item={item}
                       iconElement={
@@ -490,9 +488,6 @@ function GUI() {
                         </WarningCard>
                       )}
                     </TimelineItem>
-
-
-                    // </div>
                   )}
                 </div>
               </ErrorBoundary>
@@ -501,8 +496,8 @@ function GUI() {
         })}
       </TopGuiDiv>
       {!active && (
-        <InputContainer 
-          ref={inputContainerRef} 
+        <InputContainer
+          ref={inputContainerRef}
           isNewSession={isNewSession}>
           <ContinueInputBox
             onEnter={(editorContent, modifiers) => {

From 89f131e60ae22ed0261c726c33f293cd43567951 Mon Sep 17 00:00:00 2001
From: Len Huang <lendevelops@gmail.com>
Date: Mon, 3 Feb 2025 23:32:50 -0500
Subject: [PATCH 2/5] undo organize imports in layout tsx

---
 gui/src/components/Layout.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
index da8d77839b..cf6e2b1b1f 100644
--- a/gui/src/components/Layout.tsx
+++ b/gui/src/components/Layout.tsx
@@ -4,10 +4,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import styled, { createGlobalStyle } from "styled-components";
 import {
+  CustomScrollbarDiv,
   defaultBorderRadius,
-  vscBackground,
   vscForeground,
-  vscInputBackground
+  vscInputBackground,
+  vscBackground,
+  vscEditorBackground,
 } from ".";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { useWebviewListener } from "../hooks/useWebviewListener";
@@ -20,6 +22,9 @@ import {
 import { RootState } from "../redux/store";
 import { getFontSize, isMetaEquivalentKeyPressed } from "../util";
 import { getLocalStorage, setLocalStorage } from "../util/localStorage";
+import PostHogPageView from "./PosthogPageView";
+import ShortcutContainer from "./ShortcutContainer";
+import InventoryPreview from "../components/InventoryPreview";
 import TextDialog from "./dialogs";
 import PostHogPageView from "./PosthogPageView";
 

From b03a9d7f72775a7a492113a75d228ff12d9ce711 Mon Sep 17 00:00:00 2001
From: Len Huang <lendevelops@gmail.com>
Date: Mon, 3 Feb 2025 23:34:26 -0500
Subject: [PATCH 3/5] typos

---
 gui/src/components/Layout.tsx          | 1 -
 gui/src/components/ProfileSwitcher.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
index cf6e2b1b1f..52f888a171 100644
--- a/gui/src/components/Layout.tsx
+++ b/gui/src/components/Layout.tsx
@@ -26,7 +26,6 @@ import PostHogPageView from "./PosthogPageView";
 import ShortcutContainer from "./ShortcutContainer";
 import InventoryPreview from "../components/InventoryPreview";
 import TextDialog from "./dialogs";
-import PostHogPageView from "./PosthogPageView";
 
 
 // check mac or window
diff --git a/gui/src/components/ProfileSwitcher.tsx b/gui/src/components/ProfileSwitcher.tsx
index 4d9a995105..4990a3e4b8 100644
--- a/gui/src/components/ProfileSwitcher.tsx
+++ b/gui/src/components/ProfileSwitcher.tsx
@@ -253,7 +253,7 @@ function ProfileSwitcher(props: {}) {
       {/* Only show login if beta explicitly enabled */}
       {controlServerBetaEnabled && (
         <HeaderButtonWithText
-          className="flex-nonee"
+          className="flex-none"
           tooltipPlacement="top-end"
           text={
             session?.account

From c0ef7567db36e3c0132bbeb5c103d755a99414d3 Mon Sep 17 00:00:00 2001
From: Len Huang <lendevelops@gmail.com>
Date: Mon, 3 Feb 2025 23:35:04 -0500
Subject: [PATCH 4/5] undo keyboard short cut changes

---
 gui/src/components/dialogs/KeyboardShortcuts.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/gui/src/components/dialogs/KeyboardShortcuts.tsx b/gui/src/components/dialogs/KeyboardShortcuts.tsx
index 1141851d49..8c3f7ce225 100644
--- a/gui/src/components/dialogs/KeyboardShortcuts.tsx
+++ b/gui/src/components/dialogs/KeyboardShortcuts.tsx
@@ -4,8 +4,9 @@ import {
   StyledTooltip,
   defaultBorderRadius,
   lightGray,
+  vscBackground,
   vscEditorBackground,
-  vscForeground
+  vscForeground,
 } from "..";
 import { getPlatform, isJetBrains } from "../../util";
 

From 902f638ed3199c3d3fcb8f55359aba89266a9564 Mon Sep 17 00:00:00 2001
From: Len Huang <lendevelops@gmail.com>
Date: Mon, 3 Feb 2025 23:36:39 -0500
Subject: [PATCH 5/5] typeos, uncomment tutorial

---
 gui/src/components/modelSelection/ModelSelect.tsx | 2 +-
 gui/src/pages/gui.tsx                             | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/gui/src/components/modelSelection/ModelSelect.tsx b/gui/src/components/modelSelection/ModelSelect.tsx
index e2c0ac48a7..f144c3bebb 100644
--- a/gui/src/components/modelSelection/ModelSelect.tsx
+++ b/gui/src/components/modelSelection/ModelSelect.tsx
@@ -175,7 +175,7 @@ function ModelOption({
           ) : (
             option.provider ? <img
               src={`${window.vscMediaUrl}/logos/${providers[option.provider]?.icon}`}
-              className="w-3.5 h-3.5 mr-2 flex-flex-none object-contain rounded-sm"
+              className="w-3.5 h-3.5 mr-2 flex-none object-contain rounded-sm"
             /> : <CubeIcon className="w-3.5 h-3.5 stroke-2 mr-2 flex-shrink-0" />
           )}
           <span>{option.title}</span>
diff --git a/gui/src/pages/gui.tsx b/gui/src/pages/gui.tsx
index 482b7b2871..b4518f9382 100644
--- a/gui/src/pages/gui.tsx
+++ b/gui/src/pages/gui.tsx
@@ -361,12 +361,7 @@ function GUI() {
 
   return (
     <>
-      {/* {!window.isPearOverlay && !!showTutorialCard &&
-        <TutorialCardDiv>
-          <OnboardingTutorial onClose={onCloseTutorialCard} />
-        </TutorialCardDiv>
-      } */}
-      {false &&
+      {!window.isPearOverlay && !!showTutorialCard &&
         <TutorialCardDiv>
           <OnboardingTutorial onClose={onCloseTutorialCard} />
         </TutorialCardDiv>