Main stable

.github/workflows/agent_gui_build.yml

@@ -10,6 +10,7 @@ on:
     paths:
       - "refact-agent/gui/**"
       - ".github/workflows/agent_gui_*"
+  workflow_dispatch:
 
 defaults:
   run:
@@ -33,13 +34,13 @@ jobs:
           cache: "npm"
           cache-dependency-path: refact-agent/gui/package-lock.json
 
-      # Disable Husky install during npm ci
+      # Disable Husky install during npm install --prefer-offline
       - name: Install dependencies
         run: |
           sudo apt update
           sudo apt install -y libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev librsvg2-dev
           npm pkg delete scripts.prepare
-          npm ci
+          npm install --prefer-offline
 
       - run: npm run test
       - run: npm run format:check

refact-agent/gui/src/app/storage.ts

@@ -52,12 +52,17 @@ function pruneHistory(key: string, item: string) {
 }
 
 function removeOldEntry(key: string) {
-  if (localStorage.getItem(key)) {
+  if (
+    typeof localStorage !== "undefined" &&
+    typeof localStorage.getItem === "function" &&
+    localStorage.getItem(key)
+  ) {
     localStorage.removeItem(key);
   }
 }
 
 function cleanOldEntries() {
+  if (typeof localStorage === "undefined") return;
   removeOldEntry("tour");
   removeOldEntry("tipOfTheDay");
   removeOldEntry("chatHistory");

refact-agent/gui/src/components/Buttons/ContextCapButton.tsx

@@ -0,0 +1,143 @@
+import React, { useCallback, useMemo } from "react";
+import { useAppDispatch, useAppSelector, useGetCapsQuery } from "../../hooks";
+import {
+  selectChatId,
+  selectContextTokensCap,
+  selectModel,
+  setContextTokensCap,
+} from "../../features/Chat/Thread";
+
+import { Select, type SelectProps } from "../Select";
+import { Skeleton } from "@radix-ui/themes";
+
+const formatContextSize = (tokens: number): string => {
+  if (tokens >= 1000000) {
+    const m = tokens / 1000000;
+    return Number.isInteger(m) ? `${m}M` : `${Math.round(m)}M`;
+  }
+  if (tokens >= 1000) {
+    const k = tokens / 1000;
+    return Number.isInteger(k) ? `${k}K` : `${Math.round(k)}K`;
+  }
+  return String(tokens);
+};
+
+const FIXED_OPTIONS = [
+  256 * 1024, // 256K
+  200 * 1024, // 200K
+  128 * 1024, // 128K
+  64 * 1024, // 64K
+  32 * 1024, // 32K
+  16 * 1024, // 16K (minimum)
+];
+
+const MIN_CONTEXT_CAP = 16 * 1024; // 16K minimum
+
+export const ContextCapButton: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const chatId = useAppSelector(selectChatId);
+  const contextCap = useAppSelector(selectContextTokensCap);
+  const threadModel = useAppSelector(selectModel);
+  const capsQuery = useGetCapsQuery();
+
+  // Derive maxTokens directly from caps data and current model
+  // This avoids timing issues with threadMaxTokens state updates
+  const maxTokens = useMemo(() => {
+    if (!capsQuery.data) return undefined;
+
+    // Use thread model if available in caps
+    const modelToUse =
+      threadModel && threadModel in capsQuery.data.chat_models
+        ? threadModel
+        : capsQuery.data.chat_default_model;
+
+    if (modelToUse in capsQuery.data.chat_models) {
+      return capsQuery.data.chat_models[modelToUse].n_ctx;
+    }
+
+    return undefined;
+  }, [capsQuery.data, threadModel]);
+
+  const capOptions: SelectProps["options"] = useMemo(() => {
+    if (!maxTokens) return [];
+    const options: SelectProps["options"] = [];
+
+    const maxLabel = `${formatContextSize(maxTokens)} (max)`;
+    options.push({
+      value: String(maxTokens),
+      textValue: maxLabel,
+      children: maxLabel,
+    });
+
+    for (const fixedValue of FIXED_OPTIONS) {
+      if (fixedValue < maxTokens && fixedValue >= MIN_CONTEXT_CAP) {
+        const isMin = fixedValue === MIN_CONTEXT_CAP;
+        const label = isMin
+          ? `${formatContextSize(fixedValue)} (min)`
+          : formatContextSize(fixedValue);
+        options.push({
+          value: String(fixedValue),
+          textValue: label,
+          children: label,
+        });
+      }
+    }
+
+    return options;
+  }, [maxTokens]);
+
+  const handleCapChange = useCallback(
+    (value: string) => {
+      dispatch(
+        setContextTokensCap({
+          chatId,
+          value: parseInt(value, 10),
+        }),
+      );
+    },
+    [dispatch, chatId],
+  );
+
+  // Compute a safe default value that's guaranteed to exist in options
+  const safeDefaultValue = useMemo(() => {
+    if (!maxTokens || capOptions.length === 0) return undefined;
+
+    // Get all valid option values as numbers
+    const optionValues = capOptions
+      .filter(
+        (opt): opt is SelectProps["options"][number] & { value: string } =>
+          typeof opt === "object" && "value" in opt,
+      )
+      .map((opt) => Number(opt.value));
+
+    const desiredValue = contextCap ?? maxTokens;
+
+    // If desired value exists in options, use it
+    if (optionValues.includes(desiredValue)) {
+      return String(desiredValue);
+    }
+
+    // Otherwise fall back to maxTokens (always the first option)
+    return String(maxTokens);
+  }, [capOptions, contextCap, maxTokens]);
+
+  // Show skeleton while loading caps
+  if (capsQuery.isLoading || capsQuery.isFetching) {
+    return <Skeleton width="80px" height="24px" />;
+  }
+
+  if (!maxTokens || capOptions.length === 0 || !safeDefaultValue) return null;
+
+  // Use model + maxTokens as key to force remount when either changes
+  const selectKey = `${threadModel}-${maxTokens}`;
+
+  return (
+    <Select
+      key={selectKey}
+      title="Context cap"
+      options={capOptions}
+      defaultValue={safeDefaultValue}
+      onChange={handleCapChange}
+    />
+  );
+};

refact-agent/gui/src/components/Buttons/index.tsx

@@ -9,4 +9,5 @@ export {
 } from "./Buttons";
 
 export { ThinkingButton } from "./ThinkingButton";
+export { ContextCapButton } from "./ContextCapButton";
 export { FadedButton } from "./FadedButton";

refact-agent/gui/src/components/Chat/Chat.tsx

@@ -7,7 +7,6 @@ import {
   useAppDispatch,
   useSendChatRequest,
   useAutoSend,
-  useCapsForToolUse,
 } from "../../hooks";
 import { type Config } from "../../features/Config/configSlice";
 import {
@@ -25,6 +24,7 @@ import { DropzoneProvider } from "../Dropzone";
 import { useCheckpoints } from "../../hooks/useCheckpoints";
 import { Checkpoints } from "../../features/Checkpoints";
 import { SuggestNewChat } from "../ChatForm/SuggestNewChat";
+import { EnhancedModelSelector } from "./EnhancedModelSelector";
 
 export type ChatProps = {
   host: Config["host"];
@@ -51,7 +51,6 @@ export const Chat: React.FC<ChatProps> = ({
   const chatToolUse = useAppSelector(getSelectedToolUse);
   const threadNewChatSuggested = useAppSelector(selectThreadNewChatSuggested);
   const messages = useAppSelector(selectMessages);
-  const capsForToolUse = useCapsForToolUse();
 
   const { shouldCheckpointsPopupBeShown } = useCheckpoints();
 
@@ -61,7 +60,7 @@ export const Chat: React.FC<ChatProps> = ({
   const preventSend = useAppSelector(selectPreventSend);
   const onEnableSend = () => dispatch(enableSend({ id: chatId }));
 
-  const handleSummit = useCallback(
+  const handleSubmit = useCallback(
     (value: string) => {
       submit({ question: value });
       if (isViewingRawJSON) {
@@ -80,11 +79,10 @@ export const Chat: React.FC<ChatProps> = ({
   return (
     <DropzoneProvider asChild>
       <Flex
-        style={style}
+        style={{ ...style, minHeight: 0 }}
         direction="column"
         flexGrow="1"
         width="100%"
-        overflowY="auto"
         justify="between"
         px="1"
       >
@@ -115,7 +113,7 @@ export const Chat: React.FC<ChatProps> = ({
 
         <ChatForm
           key={chatId} // TODO: think of how can we not trigger re-render on chatId change (checkboxes)
-          onSubmit={handleSummit}
+          onSubmit={handleSubmit}
           onClose={maybeSendToSidebar}
           unCalledTools={unCalledTools}
         />
@@ -124,13 +122,18 @@ export const Chat: React.FC<ChatProps> = ({
           {/* Two flexboxes are left for the future UI element on the right side */}
           {messages.length > 0 && (
             <Flex align="center" justify="between" width="100%">
-              <Flex align="center" gap="1">
-                <Text size="1">model: {capsForToolUse.currentModel} </Text> •{" "}
+              <Flex align="center" gap="2">
+                <EnhancedModelSelector disabled={isStreaming} />
+                <Text size="1" color="gray">
+                  •
+                </Text>
                 <Text
                   size="1"
+                  color="gray"
                   onClick={() => setIsDebugChatHistoryVisible((prev) => !prev)}
+                  style={{ cursor: "pointer" }}
                 >
-                  mode: {chatToolUse}{" "}
+                  mode: {chatToolUse}
                 </Text>
               </Flex>
               {messages.length !== 0 &&