Address PR feedback on router and thread hydration

Julius Marminge committed 9 months ago

Commit fe69e961 parent e9d40e412 files · +104 −20Browse files

Unified · Split

12 files

apps/web/src/components/BranchToolbar.tsx +3 −1
apps/web/src/components/ChatView.tsx +18 −4
apps/web/src/components/GitActionsControl.tsx +6 −4
apps/web/src/components/Sidebar.tsx +4 −2
apps/web/src/router.tsx +9 −2
apps/web/src/routes/__root.tsx +5 −0
apps/web/src/routes/_chat.$threadId.tsx +6 −2
apps/web/src/routes/_chat.index.tsx +2 −5
apps/web/src/store.test.ts +14 −0
apps/web/src/store.ts +13 −0
apps/web/src/truncateTitle.test.ts +17 −0
apps/web/src/truncateTitle.ts +7 −0

apps/web/src/components/BranchToolbar.tsx+3−1

 import { ChevronDownIcon } from "lucide-react";
 interface BranchToolbarProps {
+  threadId: string;
   envMode: "local" | "worktree";
   onEnvModeChange: (mode: "local" | "worktree") => void;
   envLocked: boolean;
 }
 export default function BranchToolbar({
+  threadId,
   envMode,
   onEnvModeChange,
   envLocked,
   const [isBranchMenuOpen, setIsBranchMenuOpen] = useState(false);
   const [branchQuery, setBranchQuery] = useState("");
-  const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId);
+  const activeThread = state.threads.find((thread) => thread.id === threadId);
   const activeProject = state.projects.find((project) => project.id === activeThread?.projectId);
   const activeThreadId = activeThread?.id;
   const activeThreadBranch = activeThread?.branch ?? null;

apps/web/src/components/ChatView.tsx+18−4

 } from "../session-logic";
 import { isScrollContainerNearBottom } from "../chat-scroll";
 import { useStore } from "../store";
+import { truncateTitle } from "../truncateTitle";
 import {
   DEFAULT_THREAD_TERMINAL_ID,
   MAX_THREAD_TERMINAL_COUNT,
       revokePreviewUrls(existing);
       return [];
     });
+    setPrompt("");
+    promptRef.current = "";
+    setIsSending(false);
     setComposerCursor(0);
     setComposerHighlightedItemId(null);
     dragDepthRef.current = 0;
         (composerImagesSnapshot.length > 0
           ? `Image: ${composerImagesSnapshot[0]?.name ?? "attachment"}`
           : "New thread");
-      const title = titleSeed.length > 50 ? `${titleSeed.slice(0, 50)}...` : titleSeed;
+      const title = truncateTitle(titleSeed);
       dispatch({
         type: "SET_THREAD_TITLE",
         threadId: activeThread.id,
         className={`flex items-center justify-between border-b border-border px-5 ${isElectron ? "drag-region h-[52px]" : "py-3"}`}
       >
         <ChatHeader
+          activeThreadId={activeThread.id}
           activeThreadTitle={activeThread.title}
           activeProjectName={activeProject?.name}
           activeProjectScripts={activeProject?.scripts}
       {isGitRepo && (
         <BranchToolbar
+          threadId={activeThread.id}
           envMode={envMode}
           onEnvModeChange={onEnvModeChange}
           envLocked={envLocked}
 }
 interface ChatHeaderProps {
+  activeThreadId: string;
   activeThreadTitle: string;
   activeProjectName: string | undefined;
   activeProjectScripts: ProjectScript[] | undefined;
 }
 const ChatHeader = memo(function ChatHeader({
+  activeThreadId,
   activeThreadTitle,
   activeProjectName,
   activeProjectScripts,
             onUpdateScript={onUpdateProjectScript}
           />
         )}
-        {activeProjectName && <OpenInPicker keybindings={keybindings} />}
+        {activeProjectName && (
-        {activeProjectName && <GitActionsControl api={api} gitCwd={gitCwd} />}
+          <OpenInPicker keybindings={keybindings} activeThreadId={activeThreadId} />
+        )}
+        {activeProjectName && (
+          <GitActionsControl api={api} gitCwd={gitCwd} activeThreadId={activeThreadId} />
+        )}
         <Toggle
           pressed={diffOpen}
           onPressedChange={onToggleDiff}
 const OpenInPicker = memo(function OpenInPicker({
   keybindings,
+  activeThreadId,
 }: {
   keybindings: ResolvedKeybindingsConfig;
+  activeThreadId: string | null;
 }) {
   const [lastEditor, setLastEditor] = useState<EditorId>(() => {
     const stored = localStorage.getItem(LAST_EDITOR_KEY);
   const api = useNativeApi();
   const { state } = useStore();
-  const activeThread = state.threads.find((t) => t.id === state.activeThreadId);
+  const activeThread = state.threads.find((t) => t.id === activeThreadId);
   const activeProject = state.projects.find((p) => p.id === activeThread?.projectId);
   const openInEditor = useCallback(

apps/web/src/components/GitActionsControl.tsx+6−4

   gitStatusQueryOptions,
   invalidateGitQueries,
 } from "~/lib/gitReactQuery";
-import { useStore } from "~/store";
 import { preferredTerminalEditor, resolvePathLinkTarget } from "~/terminal-links";
 interface GitActionsControlProps {
   api: NativeApi | undefined;
   gitCwd: string | null;
+  activeThreadId: string | null;
 }
 function getMenuActionDisabledReason(
   return <InfoIcon className={iconClassName} />;
 }
-export default function GitActionsControl({ api, gitCwd }: GitActionsControlProps) {
+export default function GitActionsControl({
-  const { state } = useStore();
+  api,
-  const activeThreadId = state.activeThreadId;
+  gitCwd,
+  activeThreadId,
+}: GitActionsControlProps) {
   const threadToastData = useMemo(
     () => (activeThreadId ? { threadId: activeThreadId } : undefined),
     [activeThreadId],

apps/web/src/components/Sidebar.tsx+4−2

   useEffect(() => {
     const onWindowKeyDown = (event: KeyboardEvent) => {
-      const activeThread = state.threads.find((t) => t.id === state.activeThreadId);
+      const activeThread = routeThreadId
+        ? state.threads.find((thread) => thread.id === routeThreadId)
+        : undefined;
       if (isChatNewLocalShortcut(event, keybindings)) {
         const projectId = activeThread?.projectId ?? state.projects[0]?.id;
         if (!projectId) return;
     return () => {
       window.removeEventListener("keydown", onWindowKeyDown);
     };
-  }, [handleNewThread, keybindings, state.activeThreadId, state.projects, state.threads]);
+  }, [handleNewThread, keybindings, routeThreadId, state.projects, state.threads]);
   return (
     <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-border bg-card">

apps/web/src/router.tsx+9−2

-import { createRouter } from "@tanstack/react-router";
+import { createHashHistory, createRouter } from "@tanstack/react-router";
+import { isElectron } from "./env";
 import { routeTree } from "./routeTree.gen";
-export const router = createRouter({ routeTree });
+const useHashHistory =
+  isElectron && typeof window !== "undefined" && window.location.protocol === "file:";
+export const router = createRouter({
+  routeTree,
+  ...(useHashHistory ? { history: createHashHistory() } : {}),
+});
 declare module "@tanstack/react-router" {
   interface Register {

apps/web/src/routes/__root.tsx+5−0

             threadId: existingThread.id,
           });
         }
+        dispatch({ type: "SET_THREADS_HYDRATED", hydrated: true });
         return;
       }
           cwd: payload.cwd,
           model: DEFAULT_MODEL,
           expanded: true,
+          scripts: [],
         },
       });
       dispatch({
         type: "ADD_THREAD",
         thread: createThread(projectId),
       });
+      dispatch({ type: "SET_THREADS_HYDRATED", hydrated: true });
     });
   }, [state.projects, state.threads, state.activeThreadId, dispatch]);
             cwd: project.cwd,
             model: DEFAULT_MODEL,
             expanded: true,
+            scripts: project.scripts,
           })),
         });
+        dispatch({ type: "SET_THREADS_HYDRATED", hydrated: true });
         bootstrappedRef.current = true;
       } catch {
         if (disposed) return;

apps/web/src/routes/_chat.$threadId.tsx+6−2

       return;
     }
+    if (!state.threadsHydrated) {
+      return;
+    }
     if (!threadExists) {
       void navigate({ to: "/", replace: true });
       return;
     }
     dispatch({ type: "SET_ACTIVE_THREAD", threadId });
-  }, [dispatch, navigate, state.activeThreadId, threadExists, threadId]);
+  }, [dispatch, navigate, state.activeThreadId, state.threadsHydrated, threadExists, threadId]);
-  if (!threadId || !threadExists) {
+  if (!threadId || !state.threadsHydrated || !threadExists) {
     return null;
   }

apps/web/src/routes/_chat.index.tsx+2−5

 import { Button } from "../components/ui/button";
 import { Textarea } from "../components/ui/textarea";
 import { createThread } from "../threadFactory";
+import { truncateTitle } from "../truncateTitle";
 import { useStore } from "../store";
 function ChatIndexRouteView() {
     event.preventDefault();
     if (!defaultProject) return;
-    const titleSeed = draft.trim();
+    const threadTitle = truncateTitle(draft);
-    const threadTitle =
-      titleSeed.length > 0
-        ? (titleSeed.length > 50 ? `${titleSeed.slice(0, 50)}...` : titleSeed)
-        : undefined;
     const thread = createThread(
       defaultProject.id,
       threadTitle

apps/web/src/store.test.ts+14−0

     ],
     threads: [thread],
     activeThreadId: thread.id,
+    threadsHydrated: true,
     runtimeMode: "full-access",
     diffOpen: false,
     diffThreadId: null,
         }),
       ],
       activeThreadId: "thread-b",
+      threadsHydrated: true,
       runtimeMode: "full-access",
       diffOpen: true,
       diffThreadId: "thread-b",
       ],
       threads: [makeThread({ id: "thread-a", projectId: "project-old-a" })],
       activeThreadId: "thread-a",
+      threadsHydrated: true,
       runtimeMode: "full-access",
       diffOpen: false,
       diffThreadId: null,
     ]);
   });
+  it("marks threads hydration state", () => {
+    const state = makeState(makeThread());
+    const next = reducer(state, {
+      type: "SET_THREADS_HYDRATED",
+      hydrated: false,
+    });
+    expect(next.threadsHydrated).toBe(false);
+  });
   it("deletes a project and all of its threads", () => {
     const state: AppState = {
       projects: [
         }),
       ],
       activeThreadId: "thread-a",
+      threadsHydrated: true,
       runtimeMode: "full-access",
       diffOpen: true,
       diffThreadId: "thread-a",

apps/web/src/store.ts+13−0

   | { type: "ADD_PROJECT"; project: Project }
   | { type: "SET_PROJECT_SCRIPTS"; projectId: string; scripts: ProjectScript[] }
   | { type: "SYNC_PROJECTS"; projects: Project[] }
+  | { type: "SET_THREADS_HYDRATED"; hydrated: boolean }
   | { type: "TOGGLE_PROJECT"; projectId: string }
   | { type: "DELETE_PROJECT"; projectId: string }
   | { type: "ADD_THREAD"; thread: Thread }
   projects: Project[];
   threads: Thread[];
   activeThreadId: string | null;
+  threadsHydrated: boolean;
   runtimeMode: RuntimeMode;
   diffOpen: boolean;
   diffThreadId: string | null;
   projects: [],
   threads: [],
   activeThreadId: null,
+  threadsHydrated: false,
   runtimeMode: DEFAULT_RUNTIME_MODE,
   diffOpen: false,
   diffThreadId: null,
       ...hydrated,
       threads,
       activeThreadId,
+      threadsHydrated: threads.length > 0,
       diffOpen: false,
       diffThreadId: null,
       diffTurnId: null,
         ),
       };
+    case "SET_THREADS_HYDRATED":
+      if (state.threadsHydrated === action.hydrated) {
+        return state;
+      }
+      return {
+        ...state,
+        threadsHydrated: action.hydrated,
+      };
     case "SYNC_PROJECTS": {
       const previousByCwd = new Map(
         state.projects.map((project) => [project.cwd, project] as const),

apps/web/src/truncateTitle.test.ts+17−0

@@ -0,0 +1,17 @@
	1	import { describe, expect, it } from "vitest";
	2
	3	import { truncateTitle } from "./truncateTitle";
	4
	5	describe("truncateTitle", () => {
	6	it("trims surrounding whitespace", () => {
	7	expect(truncateTitle(" hello world ")).toBe("hello world");
	8	});
	9
	10	it("returns trimmed text when within max length", () => {
	11	expect(truncateTitle("alpha", 10)).toBe("alpha");
	12	});
	13
	14	it("appends ellipsis when text exceeds max length", () => {
	15	expect(truncateTitle("abcdefghij", 5)).toBe("abcde...");
	16	});
	17	});

apps/web/src/truncateTitle.ts+7−0

@@ -0,0 +1,7 @@
	1	export function truncateTitle(text: string, maxLength = 50): string {
	2	const trimmed = text.trim();
	3	if (trimmed.length <= maxLength) {
	4	return trimmed;
	5	}
	6	return `${trimmed.slice(0, maxLength)}...`;
	7	}

Address PR feedback on router and thread hydration

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code