lael-labs/t3code

apps/web/src/components/ChatView.tsx+5−5

     <Command
       mode="none"
       onItemHighlighted={(highlightedValue) => {
-        props.onHighlightedItemChange(typeof highlightedValue === "string" ? highlightedValue : null);
+        props.onHighlightedItemChange(
+          typeof highlightedValue === "string" ? highlightedValue : null,
+        );
       }}
     >
       <div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
   );
   const keybindings = keybindingsQuery.data ?? EMPTY_KEYBINDINGS;
   const threadTerminalRuntimeEnv = useMemo(() => {
-    if (!activeProject) return {};
+    if (!activeProject?.cwd) return {};
     return projectScriptRuntimeEnv({
       project: {
         cwd: activeProject.cwd,
       }
       const targetCwd = options?.cwd ?? gitCwd ?? activeProject.cwd;
       const baseTerminalId =
-        activeThread.activeTerminalId ||
+        activeThread.activeTerminalId || activeThread.terminalIds[0] || DEFAULT_THREAD_TERMINAL_ID;
-        activeThread.terminalIds[0] ||
-        DEFAULT_THREAD_TERMINAL_ID;
       const isBaseTerminalBusy = activeThread.runningTerminalIds.includes(baseTerminalId);
       const wantsNewTerminal = Boolean(options?.preferNewTerminal) || isBaseTerminalBusy;
       const shouldCreateNewTerminal =

apps/web/src/components/GitActionsControl.logic.ts+3−3

   return [...commitStages, pushStage, "Creating PR..."];
 }
+const withDescription = (title: string, description: string | undefined) =>
+  description ? { title, description } : { title };
 export function summarizeGitResult(result: GitRunStackedActionResult): {
   title: string;
   description?: string;
 } {
-  const withDescription = (title: string, description: string | undefined) =>
-    description ? { title, description } : { title };
   if (result.pr.status === "created" || result.pr.status === "opened_existing") {
     const prNumber = result.pr.number ? ` #${result.pr.number}` : "";
     const title = `${result.pr.status === "created" ? "Created PR" : "Opened PR"}${prNumber}`;

apps/web/src/components/ui/toast.tsx+18−5

 import { Toast } from "@base-ui/react/toast";
 import { useEffect } from "react";
+import { useRouterState } from "@tanstack/react-router";
 import {
   CircleAlertIcon,
   CircleCheckIcon,
 import { cn } from "~/lib/utils";
 import { buttonVariants } from "~/components/ui/button";
-import { useStore } from "~/store";
 import { shouldHideCollapsedToastContent } from "./toast.logic";
 type ThreadToastData = {
   return toastThreadId === activeThreadId;
 }
+function useActiveThreadIdFromRoute(): string | null {
+  return useRouterState({
+    select: (routerState) => {
+      for (let index = routerState.matches.length - 1; index >= 0; index -= 1) {
+        const params = routerState.matches[index]?.params as Record<string, unknown> | undefined;
+        const threadId = params?.threadId;
+        if (typeof threadId === "string" && threadId.length > 0) {
+          return threadId;
+        }
+      }
+      return null;
+    },
+  });
+}
 function ThreadToastVisibleAutoDismiss({
   toastId,
   dismissAfterVisibleMs,
 }
 function Toasts({ position = "top-right" }: { position: ToastPosition }) {
-  const { state } = useStore();
   const { toasts } = Toast.useToastManager<ThreadToastData>();
-  const activeThreadId = state.activeThreadId;
+  const activeThreadId = useActiveThreadIdFromRoute();
   const isTop = position.startsWith("top");
   const visibleToasts = toasts.filter((toast) =>
     shouldRenderForActiveThread(toast.data, activeThreadId),
 }
 function AnchoredToasts() {
-  const { state } = useStore();
   const { toasts } = Toast.useToastManager<ThreadToastData>();
-  const activeThreadId = state.activeThreadId;
+  const activeThreadId = useActiveThreadIdFromRoute();
   return (
     <Toast.Portal data-slot="toast-portal-anchored">

apps/web/src/hooks/useTheme.ts+1−0

@@ -28,6 +28,7 @@ function applyTheme(theme: Theme, suppressTransitions = false) { · 27 unmodified lines
28	document.documentElement.classList.toggle("dark", isDark);	28	document.documentElement.classList.toggle("dark", isDark);
29	if (suppressTransitions) {	29	if (suppressTransitions) {
30	// Force a reflow so the no-transitions class takes effect before removal	30	// Force a reflow so the no-transitions class takes effect before removal
		31	// oxlint-disable-next-line no-unused-expressions
31	document.documentElement.offsetHeight;	32	document.documentElement.offsetHeight;
32	requestAnimationFrame(() => {	33	requestAnimationFrame(() => {
33	document.documentElement.classList.remove("no-transitions");	34	document.documentElement.classList.remove("no-transitions");

apps/web/src/main.tsx+10−14

 import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "@tanstack/react-router";
-import { AnchoredToastProvider, ToastProvider } from "./components/ui/toast";
 import { createHashHistory, createRouter, createBrowserHistory } from "@tanstack/react-router";
 import { StoreProvider } from "./store";
   context: {
     queryClient,
   },
-});
+  Wrap: ({ children }) => (
-function App() {
-  return (
     <QueryClientProvider client={queryClient}>
-      <StoreProvider>
+      <StoreProvider>{children}</StoreProvider>
-        <ToastProvider>
-          <AnchoredToastProvider>
-            <RouterProvider router={router} />
-          </AnchoredToastProvider>
-        </ToastProvider>
-      </StoreProvider>
     </QueryClientProvider>
-  );
+  ),
+});
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
 }
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 );

apps/web/src/persistenceSchema.test.ts+0−2

       { id: `group-${DEFAULT_THREAD_TERMINAL_ID}`, terminalIds: [DEFAULT_THREAD_TERMINAL_ID] },
     ]);
     expect(hydrated?.threads[0]?.activeTerminalGroupId).toBe(`group-${DEFAULT_THREAD_TERMINAL_ID}`);
-    expect(hydrated?.activeThreadId).toBe("t-1");
     expect(hydrated?.runtimeMode).toBe("full-access");
   });
         },
       ],
       threads: [thread],
-      activeThreadId: "t-1",
       runtimeMode: "full-access",
     });

apps/web/src/persistenceSchema.ts+1−9

 const persistedStateBodySchema = z.object({
   projects: z.array(persistedProjectSchema),
   threads: z.array(persistedThreadSchema),
-  activeThreadId: z.string().min(1).nullable(),
+  activeThreadId: z.string().min(1).nullable().optional(),
 });
 const runtimeModeSchema = z.enum(["approval-required", "full-access"]);
 export interface PersistedStoreSnapshot {
   projects: Project[];
   threads: Thread[];
-  activeThreadId: string | null;
   runtimeMode: RuntimeMode;
 }
   const threads = parsedState.data.threads
     .map((thread) => hydrateThread(thread, isLegacyPayload))
     .filter((thread) => projectIds.has(thread.projectId));
-  const hasActiveThread = Boolean(
-    parsedState.data.activeThreadId &&
-    threads.some((thread) => thread.id === parsedState.data.activeThreadId),
-  );
   return {
     projects,
     threads,
-    activeThreadId: hasActiveThread ? parsedState.data.activeThreadId : (threads[0]?.id ?? null),
     runtimeMode:
       "runtimeMode" in parsedState.data ? parsedState.data.runtimeMode : DEFAULT_RUNTIME_MODE,
   };
       branch: thread.branch,
       worktreePath: thread.worktreePath,
     })),
-    activeThreadId: state.activeThreadId,
     runtimeMode: state.runtimeMode,
   };
 }

apps/web/src/routes/__root.tsx+18−22

-import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import { Outlet, createRootRouteWithContext, useParams } from "@tanstack/react-router";
 import { useEffect, useRef } from "react";
 import { QueryClient, useQueryClient } from "@tanstack/react-query";
+import { AnchoredToastProvider, ToastProvider } from "../components/ui/toast";
 import { isElectron } from "../env";
 import { useNativeApi } from "../hooks/useNativeApi";
 import { invalidateGitQueries } from "../lib/gitReactQuery";
 import { DEFAULT_MODEL } from "../model-logic";
-import { createThread } from "../threadFactory";
 import { useStore } from "../store";
 import { onServerWelcome } from "../wsNativeApi";
   }
   return (
-    <>
+    <ToastProvider>
-      <EventRouter />
+      <AnchoredToastProvider>
-      <AutoProjectBootstrap />
+        <EventRouter />
-      <DesktopProjectBootstrap />
+        <AutoProjectBootstrap />
-      <Outlet />
+        <DesktopProjectBootstrap />
-    </>
+        <Outlet />
+      </AnchoredToastProvider>
+    </ToastProvider>
   );
 }
   const { dispatch } = useStore();
   const queryClient = useQueryClient();
   const activeAssistantItemRef = useRef<string | null>(null);
+  const activeThreadId = useParams({
+    strict: false,
+    select: (params) => params.threadId,
+  });
   useEffect(() => {
     if (!api) return;
       if (event.method === "turn/completed") {
         void invalidateGitQueries(queryClient);
       }
+      if (!activeThreadId) return;
       dispatch({
         type: "APPLY_EVENT",
         event,
         activeAssistantItemRef,
+        activeThreadId,
       });
     });
-  }, [api, dispatch, queryClient]);
+  }, [activeThreadId, api, dispatch, queryClient]);
   useEffect(() => {
     if (!api) return;
       const existing = state.projects.find((project) => project.cwd === payload.cwd);
       if (existing) {
         bootstrappedRef.current = true;
-        // Ensure a thread is active
-        const existingThread = state.threads.find((thread) => thread.projectId === existing.id);
-        if (existingThread && !state.activeThreadId) {
-          dispatch({
-            type: "SET_ACTIVE_THREAD",
-            threadId: existingThread.id,
-          });
-        }
         dispatch({ type: "SET_THREADS_HYDRATED", hydrated: true });
         return;
       }
           scripts: [],
         },
       });
-      dispatch({
-        type: "ADD_THREAD",
-        thread: createThread(projectId),
-      });
       dispatch({ type: "SET_THREADS_HYDRATED", hydrated: true });
     });
-  }, [state.projects, state.threads, state.activeThreadId, dispatch]);
+  }, [state.projects, dispatch]);
   return null;
 }

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

@@ -5,7 +5,7 @@ import ChatView from "../components/ChatView"; · 4 unmodified lines
5	import { useStore } from "../store";	5	import { useStore } from "../store";
6		6
7	function ChatThreadRouteView() {	7	function ChatThreadRouteView() {
8	const { state, dispatch } = useStore();	8	const { state } = useStore();
9	const navigate = useNavigate();	9	const navigate = useNavigate();
10	const { threadId } = Route.useParams();	10	const { threadId } = Route.useParams();
11	const threadExists = threadId ? state.threads.some((thread) => thread.id === threadId) : false;	11	const threadExists = threadId ? state.threads.some((thread) => thread.id === threadId) : false;
@@ -24,13 +24,7 @@ function ChatThreadRouteView() { · 12 unmodified lines
24	void navigate({ to: "/", replace: true });	24	void navigate({ to: "/", replace: true });
25	return;	25	return;
26	}	26	}
27		27	}, [navigate, state.threadsHydrated, threadExists, threadId]);
28	if (state.activeThreadId === threadId) {
29	return;
30	}
31
32	dispatch({ type: "SET_ACTIVE_THREAD", threadId });
33	}, [dispatch, navigate, state.activeThreadId, state.threadsHydrated, threadExists, threadId]);
34		28
35	if (!threadId \|\| !state.threadsHydrated \|\| !threadExists) {	29	if (!threadId \|\| !state.threadsHydrated \|\| !threadExists) {
36	return null;	30	return null;

apps/web/src/routes/_chat.index.tsx+12−72

@@ -1,82 +1,22 @@
1	import { createFileRoute, useNavigate } from "@tanstack/react-router";	1	import { createFileRoute } from "@tanstack/react-router";
2	import { type FormEvent, useMemo, useState } from "react";
3		2
4	import { Button } from "../components/ui/button";	3	import { isElectron } from "../env";
5	import { Textarea } from "../components/ui/textarea";
6	import { createThread } from "../threadFactory";
7	import { truncateTitle } from "../truncateTitle";
8	import { useStore } from "../store";
9		4
10	function ChatIndexRouteView() {	5	function ChatIndexRouteView() {
11	const { state, dispatch } = useStore();
12	const navigate = useNavigate();
13	const [draft, setDraft] = useState("");
14	const defaultProject = state.projects[0] ?? null;
15	const canCreateThread = defaultProject !== null;
16
17	const placeholder = useMemo(() => {
18	if (!canCreateThread) {
19	return "Add a project in the sidebar to start chatting.";
20	}
21	return "Start with a goal, bug report, or implementation idea...";
22	}, [canCreateThread]);
23
24	const onCreateThread = (event: FormEvent<HTMLFormElement>) => {
25	event.preventDefault();
26	if (!defaultProject) return;
27
28	const threadTitle = truncateTitle(draft);
29	const thread = createThread(
30	defaultProject.id,
31	threadTitle
32	? { model: defaultProject.model, title: threadTitle }
33	: { model: defaultProject.model },
34	);
35
36	dispatch({
37	type: "ADD_THREAD",
38	thread,
39	});
40
41	setDraft("");
42
43	void navigate({
44	to: "/$threadId",
45	params: { threadId: thread.id },
46	});
47	};
48
49	return (	6	return (
50	<section className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">	7	<div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-muted-foreground/40">
51	<div className="mx-auto flex h-full w-full max-w-3xl flex-col justify-center px-5 py-6">	8	{isElectron && (
52	<div className="mb-5">	9	<div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
53	<h1 className="text-xl font-semibold text-foreground">New chat</h1>	10	<span className="text-xs text-muted-foreground/50">No active thread</span>
54	<p className="mt-1 text-sm text-muted-foreground/70">
55	Create a thread and continue in the full chat workspace.
56	</p>
57	</div>	11	</div>
		12	)}
58		13
59	<form onSubmit={onCreateThread} className="space-y-3">	14	<div className="flex flex-1 items-center justify-center">
60	<Textarea	15	<div className="text-center">
61	value={draft}	16	<p className="text-sm">Select a thread or create a new one to get started.</p>
62	onChange={(event) => setDraft(event.target.value)}	17	</div>
63	placeholder={placeholder}
64	className="min-h-36 resize-y"
65	disabled={!canCreateThread}
66	/>
67	<div className="flex items-center justify-between">
68	<p className="text-xs text-muted-foreground/60">
69	{canCreateThread
70	? "Create a thread first, then send your first prompt."
71	: "Projects are required before creating threads."}
72	</p>
73	<Button type="submit" disabled={!canCreateThread}>
74	Create thread
75	</Button>
76	</div>
77	</form>
78	</div>	18	</div>
79	</section>	19	</div>
80	);	20	);
81	}	21	}
82		22

apps/web/src/routes/_chat.tsx+1−14

@@ -1,5 +1,4 @@
1	import { Outlet, createFileRoute, useNavigate, useParams } from "@tanstack/react-router";	1	import { Outlet, createFileRoute } from "@tanstack/react-router";
2	import { useEffect } from "react";
3		2
4	import DiffPanel from "../components/DiffPanel";	3	import DiffPanel from "../components/DiffPanel";
5	import Sidebar from "../components/Sidebar";	4	import Sidebar from "../components/Sidebar";
@@ -7,18 +6,6 @@ import { useStore } from "../store"; · 1 unmodified line
7		6
8	function ChatRouteLayout() {	7	function ChatRouteLayout() {
9	const { state } = useStore();	8	const { state } = useStore();
10	const navigate = useNavigate();
11	const params = useParams({ strict: false });
12	const routeThreadId = typeof params.threadId === "string" ? params.threadId : null;
13
14	useEffect(() => {
15	if (routeThreadId \|\| !state.activeThreadId) return;
16	void navigate({
17	to: "/$threadId",
18	params: { threadId: state.activeThreadId },
19	replace: true,
20	});
21	}, [navigate, routeThreadId, state.activeThreadId]);
22		9
23	return (	10	return (
24	<div className="flex h-screen overflow-hidden bg-background text-foreground isolate">	11	<div className="flex h-screen overflow-hidden bg-background text-foreground isolate">

apps/web/src/store.test.ts+1−23

       },
     ],
     threads: [thread],
-    activeThreadId: thread.id,
     threadsHydrated: true,
     runtimeMode: "full-access",
     diffOpen: false,
           projectId: "project-old-b",
         }),
       ],
-      activeThreadId: "thread-b",
       threadsHydrated: true,
       runtimeMode: "full-access",
       diffOpen: false,
     expect(next.threads).toHaveLength(1);
     expect(next.threads[0]?.id).toBe("thread-a");
     expect(next.threads[0]?.projectId).toBe("project-new-a");
-    expect(next.activeThreadId).toBe("thread-a");
   });
   it("treats empty scripts from sync as authoritative", () => {
         },
       ],
       threads: [makeThread({ id: "thread-a", projectId: "project-old-a" })],
-      activeThreadId: "thread-a",
       threadsHydrated: true,
       runtimeMode: "full-access",
       diffOpen: false,
           projectId: "project-2",
         }),
       ],
-      activeThreadId: "thread-a",
       threadsHydrated: true,
       runtimeMode: "full-access",
       diffOpen: false,
     expect(next.projects[0]?.id).toBe("project-2");
     expect(next.threads).toHaveLength(1);
     expect(next.threads[0]?.id).toBe("thread-b");
-    expect(next.activeThreadId).toBe("thread-b");
-  });
-  it("marks the active thread as visited when selected", () => {
-    const state = makeState(
-      makeThread({
-        lastVisitedAt: "2000-01-01T00:00:00.000Z",
-      }),
-    );
-    const next = reducer(state, {
-      type: "SET_ACTIVE_THREAD",
-      threadId: "thread-local-1",
-    });
-    expect(next.activeThreadId).toBe("thread-local-1");
-    expect(next.threads[0]?.lastVisitedAt).toBeDefined();
-    expect(next.threads[0]?.lastVisitedAt).not.toBe("2000-01-01T00:00:00.000Z");
   });
   it("marks completion as seen immediately for the active thread", () => {
         payload: { turn: { id: "turn-1", status: "completed" } },
       }),
       activeAssistantItemRef: { current: null },
+      activeThreadId: "thread-local-1",
     });
     expect(next.threads[0]?.latestTurnCompletedAt).toBe(completedAt);

apps/web/src/store.ts+5−36

   | { type: "TOGGLE_PROJECT"; projectId: string }
   | { type: "DELETE_PROJECT"; projectId: string }
   | { type: "ADD_THREAD"; thread: Thread }
-  | { type: "SET_ACTIVE_THREAD"; threadId: string }
   | { type: "TOGGLE_THREAD_TERMINAL"; threadId: string }
   | { type: "SET_THREAD_TERMINAL_OPEN"; threadId: string; open: boolean }
   | { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: string; height: number }
       type: "APPLY_EVENT";
       event: ProviderEvent;
       activeAssistantItemRef: { current: string | null };
+      activeThreadId?: string | null;
     }
   | { type: "APPLY_TERMINAL_EVENT"; event: TerminalEvent }
   | { type: "UPDATE_SESSION"; threadId: string; session: ProviderSession }
 export interface AppState {
   projects: Project[];
   threads: Thread[];
-  activeThreadId: string | null;
   threadsHydrated: boolean;
   runtimeMode: RuntimeMode;
   diffOpen: boolean;
 const initialState: AppState = {
   projects: [],
   threads: [],
-  activeThreadId: null,
   threadsHydrated: false,
   runtimeMode: DEFAULT_RUNTIME_MODE,
   diffOpen: false,
     if (!hydrated) return initialState;
     const threads = hydrated.threads.map((thread) => normalizeThreadTerminals(thread));
-    const activeThreadId = threads.some((thread) => thread.id === hydrated.activeThreadId)
-      ? hydrated.activeThreadId
-      : (threads[0]?.id ?? null);
     return {
       ...hydrated,
       threads,
-      activeThreadId,
       threadsHydrated: threads.length > 0,
       diffOpen: false,
     };
           });
         })
         .filter((thread): thread is Thread => thread !== null);
-      const activeThreadId = nextThreads.some((thread) => thread.id === state.activeThreadId)
-        ? state.activeThreadId
-        : (nextThreads[0]?.id ?? null);
       return {
         ...state,
         projects: nextProjects,
         threads: nextThreads,
-        activeThreadId,
       };
     }
       }
       const threads = state.threads.filter((thread) => thread.projectId !== action.projectId);
-      const activeThreadId = threads.some((thread) => thread.id === state.activeThreadId)
-        ? state.activeThreadId
-        : (threads[0]?.id ?? null);
       return {
         ...state,
         projects,
         threads,
-        activeThreadId,
       };
     }
       return {
         ...state,
         threads: [...state.threads, nextThread],
-        activeThreadId: action.thread.id,
-      };
-    }
-    case "SET_ACTIVE_THREAD": {
-      const visitedAt = new Date().toISOString();
-      return {
-        ...state,
-        activeThreadId: action.threadId,
-        threads: updateThread(state.threads, action.threadId, (t) => ({
-          ...t,
-          lastVisitedAt: visitedAt,
-        })),
       };
     }
       };
     case "APPLY_EVENT": {
-      const { event, activeAssistantItemRef } = action;
+      const { event, activeAssistantItemRef, activeThreadId } = action;
       const target = findThreadBySessionId(state.threads, event.sessionId);
       if (!target) return state;
       if (shouldIgnoreForeignThreadEvent(target, event)) return state;
           messages: applyEventToMessages(t.messages, event, activeAssistantItemRef),
           events: [event, ...t.events],
           ...updateTurnFields(t, event),
-          ...(event.method === "turn/completed" && t.id === state.activeThreadId
+          ...(event.method === "turn/completed" && t.id === activeThreadId
             ? { lastVisitedAt: event.createdAt }
             : {}),
         })),
         runtimeMode: action.mode,
       };
-    case "DELETE_THREAD": {
+    case "DELETE_THREAD":
-      const threads = state.threads.filter((t) => t.id !== action.threadId);
+      return { ...state, threads: state.threads.filter((t) => t.id !== action.threadId) };
-      const activeThreadId =
-        state.activeThreadId === action.threadId ? (threads[0]?.id ?? null) : state.activeThreadId;
-      return { ...state, threads, activeThreadId };
-    }
     default:
       return state;

apps/web/vite.config.js+41−0

@@ -0,0 +1,41 @@
	1	import tailwindcss from "@tailwindcss/vite";
	2	import react from "@vitejs/plugin-react";
	3	import { tanstackRouter } from "@tanstack/router-plugin/vite";
	4	import { defineConfig } from "vite";
	5	const port = Number(process.env.PORT ?? 5173);
	6	export default defineConfig({
	7	plugins: [
	8	tanstackRouter(),
	9	react({
	10	babel: {
	11	plugins: [["babel-plugin-react-compiler", { target: "19" }]],
	12	},
	13	}),
	14	tailwindcss(),
	15	],
	16	define: {
	17	// In dev mode, tell the web app where the WebSocket server lives
	18	"import.meta.env.VITE_WS_URL": JSON.stringify(process.env.VITE_WS_URL ?? ""),
	19	},
	20	experimental: {
	21	enableNativePlugin: true,
	22	},
	23	resolve: {
	24	tsconfigPaths: true,
	25	},
	26	server: {
	27	port,
	28	strictPort: true,
	29	hmr: {
	30	// Explicit config so Vite's HMR WebSocket connects reliably
	31	// inside Electron's BrowserWindow. Vite 8 uses console.debug for
	32	// connection logs — enable "Verbose" in DevTools to see them.
	33	protocol: "ws",
	34	host: "localhost",
	35	},
	36	},
	37	build: {
	38	outDir: "dist",
	39	emptyOutDir: true,
	40	},
	41	});