fix: GUI polish (#7927)

* fix: assistant listbox styling

* fix: replace tool truncation icon

* fix: tool call ui tweaks

* fix: cubic feedback

Author: RomneyDa

gui/src/components/AssistantAndOrgListbox/SelectedAssistantButton.tsx

@@ -48,9 +48,7 @@ export function SelectedAssistantButton({
           ) : (
             <>
               <AssistantIcon assistant={selectedProfile} size={iconSize} />
-              <span
-                className={`select-none truncate text-xs ${isSidebar && "hidden md:block"}`}
-              >
+              <span className={`xs:line-clamp-1 hidden select-none text-xs`}>
                 {selectedProfile.title}
               </span>
             </>

gui/src/components/AssistantAndOrgListbox/index.tsx

@@ -150,7 +150,7 @@ export function AssistantAndOrgListbox({
         />
         <Transition>
           <ListboxOptions
-            className="max-h-32 -translate-x-1.5 overflow-y-auto pb-0"
+            className="max-h-32 scale-x-[97%] overflow-y-auto pb-0"
             style={{ zIndex: 200 }}
           >
             <div className="flex items-center justify-between px-1.5 py-1">

gui/src/components/StyledMarkdownPreview/index.tsx

@@ -84,6 +84,26 @@ const StyledMarkdown = styled.div<{
     font-family: var(--vscode-editor-font-family);
   }
 
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    padding-left: 1.5em;
+    margin-top: 1em;
+  }
+
+  li {
+    margin-bottom: 0.8em;
+  }
+  li:last-child {
+    margin-bottom: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 2em;
+  }
+
   code:not(pre > code) {
     font-family: var(--vscode-editor-font-family);
   }

gui/src/components/mainInput/InputToolbar.tsx

@@ -56,7 +56,6 @@ function InputToolbar(props: InputToolbarProps) {
   const hasReasoningEnabled = useAppSelector(
     (store) => store.session.hasReasoningEnabled,
   );
-
   const isEnterDisabled =
     props.disabled || (isInEdit && codeToEdit.length === 0);
 

gui/src/components/mainInput/Lump/LumpToolbar/BlockSettingsTopToolbar.tsx

@@ -105,7 +105,7 @@ export function BlockSettingsTopToolbar() {
   };
 
   return (
-    <div className="flex flex-1 items-center justify-between gap-1.5">
+    <div className="flex flex-1 items-center justify-between gap-3">
       <div className="flex items-center gap-1">
         {shouldShowError && (
           <ToolTip delayShow={700} content="View configuration errors">

gui/src/components/ui/Button.tsx

@@ -40,7 +40,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(
           "cursor-pointer transition-all duration-200",
           "hover:enabled:cursor-pointer",
-          "disabled:text-description-muted disabled:pointer-events-none disabled:opacity-50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
           buttonVariants[variant],
           isIcon
             ? iconButtonSizes[size]

gui/src/pages/gui/ToolCallDiv/SimpleToolCallUI.tsx

@@ -7,6 +7,7 @@ import {
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { ToggleWithIcon } from "./ToggleWithIcon";
 import { ToolCallStatusMessage } from "./ToolCallStatusMessage";
+import { ToolTruncateHistoryIcon } from "./ToolTruncateHistoryIcon";
 import { toolCallStateToContextItems } from "./utils";
 
 interface SimpleToolCallUIProps {
@@ -61,6 +62,10 @@ export function SimpleToolCallUI({
           />
           <ToolCallStatusMessage tool={tool} toolCallState={toolCallState} />
         </div>
+
+        {!!toolCallState.output?.length && (
+          <ToolTruncateHistoryIcon historyIndex={historyIndex} />
+        )}
       </div>
 
       {isToggleable && (

gui/src/pages/gui/ToolCallDiv/ToolCallDisplay.tsx

@@ -1,5 +1,6 @@
 import { Tool, ToolCallState } from "core";
 import { ToolCallStatusMessage } from "./ToolCallStatusMessage";
+import { ToolTruncateHistoryIcon } from "./ToolTruncateHistoryIcon";
 
 interface ToolCallDisplayProps {
   children: React.ReactNode;
@@ -19,7 +20,7 @@ export function ToolCallDisplay({
   return (
     <div className="flex flex-col justify-center px-4">
       <div className="mb-2 flex flex-col">
-        <div className="flex flex-row items-center justify-between gap-1.5">
+        <div className="flex flex-row items-start justify-between gap-1.5">
           <div className="flex min-w-0 flex-row items-center gap-2">
             <div className="mt-[1px] h-4 w-4 flex-shrink-0 font-semibold">
               {icon}
@@ -29,6 +30,9 @@ export function ToolCallDisplay({
             )}
             <ToolCallStatusMessage tool={tool} toolCallState={toolCallState} />
           </div>
+          {!!toolCallState.output?.length && (
+            <ToolTruncateHistoryIcon historyIndex={historyIndex} />
+          )}
         </div>
       </div>
       <div>{children}</div>

gui/src/pages/gui/ToolCallDiv/ToolCallStatusMessage.tsx

@@ -53,7 +53,7 @@ export function ToolCallStatusMessage({
 
   return (
     <div
-      className="text-description line-clamp-4 min-w-0 break-all"
+      className="text-description line-clamp-4 min-w-0 break-words"
       data-testid="tool-call-title"
     >
       {`Continue ${intro} ${message}`}

gui/src/pages/gui/ToolCallDiv/ToolTruncateHistoryIcon.tsx

@@ -21,7 +21,8 @@ export function ToolTruncateHistoryIcon({
   const { mainEditor } = useMainEditor();
 
   if (historyIndex === lastMessageIndex) {
-    return null;
+    // filler so doesn't jump in
+    return <div className="h-3 w-3" />;
   }
 
   return (