Fix onboard intro capture and Git instructions routing (#297)

* Fix onboard intro output capture

* Fix onboard intro capture

Author: 0xroylee

packages/web/src/app/(operator)/git/page.tsx

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+
+import { GitInstructionsPanel } from "@/components/git/git-instructions-panel";
+
+export default function GitPage(): ReactElement {
+	return (
+		<section className="grid h-[100dvh] max-h-[100dvh] content-start gap-4 overflow-auto p-[clamp(0.75rem,3vw,1.25rem)]">
+			<GitInstructionsPanel />
+		</section>
+	);
+}

packages/web/src/app/(operator)/settings/git/page.tsx

@@ -23,12 +23,6 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { ComponentType, ReactElement } from "react";
-
-import {
-	isSettingsNavItemActive,
-	settingsNavItems,
-} from "@/components/settings/settings-navigation";
-import type { SettingsView } from "@/components/settings/types/settings-navigation.types";
 import { Button } from "@/components/ui/button";
 import { Typography } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
@@ -39,6 +33,7 @@ const iconByKey: Record<
 	ComponentType<{ size?: number }>
 > = {
 	agents: Bot,
+	git: Bot,
 	autopilot: Sparkles,
 	chat: MessageSquare,
 	inbox: Inbox,
@@ -52,14 +47,6 @@ const iconByKey: Record<
 	usage: ChartColumn,
 };
 
-const settingsIconByKey: Record<
-	SettingsView,
-	ComponentType<{ size?: number }>
-> = {
-	git: GitBranch,
-	models: SlidersHorizontal,
-};
-
 export function ChatRoomSettingsSidebar({
 	isActive,
 	onBack,
@@ -107,31 +94,6 @@ export function ChatRoomSettingsSidebar({
 				<Typography className="mb-2 px-2" variant="eyebrow">
 					Settings
 				</Typography>
-				<div className="grid gap-1">
-					{settingsNavItems.map((item) => {
-						const Icon = settingsIconByKey[item.key];
-						const isActiveItem = isSettingsNavItemActive(pathname, item.href);
-						return (
-							<Link
-								aria-current={isActiveItem ? "page" : undefined}
-								className={cn(
-									"flex h-9 items-center gap-2 rounded-md px-2 text-xs",
-									isActiveItem
-										? "bg-surface-active text-zinc-100"
-										: "text-muted-foreground hover:bg-surface-hover hover:text-zinc-200",
-								)}
-								href={item.href}
-								key={item.key}
-								onClick={onNavigate}
-							>
-								<Icon size={15} />
-								<Typography as="span" className="truncate" variant="muted">
-									{item.label}
-								</Typography>
-							</Link>
-						);
-					})}
-				</div>
 				<Typography className="mb-2 mt-4 px-2" variant="eyebrow">
 					Workspace
 				</Typography>

packages/web/src/app/(operator)/settings/page.tsx

@@ -8,13 +8,10 @@ import type {
 	ProjectSessionListToggleMode,
 	VisibleProjectSessions,
 } from "./types/chat-room-sidebar.types";
-import type { ChatRoomSidebarView } from "./types/chat-room.types";
 
 const UNASSIGNED_GROUP_ID = "unassigned";
 const UNASSIGNED_GROUP_LABEL = "Unassigned";
 const DEFAULT_VISIBLE_PROJECT_SESSION_COUNT = 5;
-const DEFAULT_CHAT_ROOM_SIDEBAR_VIEW: ChatRoomSidebarView = "main";
-const CHAT_ROOM_SIDEBAR_VIEW_STORAGE_KEY = "devos.chatRoom.sidebarView";
 
 export function buildChatSessionSidebarContent({
 	activeSessionId,
@@ -98,49 +95,6 @@ export function buildProjectSessionListToggleMode(
 	return input.isExpanded ? "expanded" : "collapsed";
 }
 
-export function getBrowserChatRoomSidebarViewStorage():
-	| Pick<Storage, "getItem" | "setItem">
-	| undefined {
-	if (typeof window === "undefined") {
-		return undefined;
-	}
-	try {
-		return window.localStorage;
-	} catch {
-		return undefined;
-	}
-}
-
-export function readStoredChatRoomSidebarView(
-	storage: Pick<Storage, "getItem"> | undefined,
-): ChatRoomSidebarView {
-	if (!storage) {
-		return DEFAULT_CHAT_ROOM_SIDEBAR_VIEW;
-	}
-	try {
-		const storedValue = storage.getItem(CHAT_ROOM_SIDEBAR_VIEW_STORAGE_KEY);
-		return isChatRoomSidebarView(storedValue)
-			? storedValue
-			: DEFAULT_CHAT_ROOM_SIDEBAR_VIEW;
-	} catch {
-		return DEFAULT_CHAT_ROOM_SIDEBAR_VIEW;
-	}
-}
-
-export function writeStoredChatRoomSidebarView(
-	storage: Pick<Storage, "setItem"> | undefined,
-	view: ChatRoomSidebarView,
-): void {
-	if (!storage) {
-		return;
-	}
-	try {
-		storage.setItem(CHAT_ROOM_SIDEBAR_VIEW_STORAGE_KEY, view);
-	} catch {
-		return;
-	}
-}
-
 function createSessionProjectGroup(
 	id: string,
 	label: string,
@@ -152,9 +106,3 @@ function createSessionProjectGroup(
 		sessions: [],
 	};
 }
-
-function isChatRoomSidebarView(
-	value: string | null,
-): value is ChatRoomSidebarView {
-	return value === "main" || value === "settings";
-}

packages/web/src/components/chat-room/chat-room-settings-sidebar.tsx

@@ -10,12 +10,7 @@ import { cn } from "@/lib/utils";
 import { ChatRoomSessionList } from "./chat-room-session-list";
 import { ChatRoomSettingsSidebar } from "./chat-room-settings-sidebar";
 import { ChatRoomSidebarHeader } from "./chat-room-sidebar-header";
-import {
-	buildChatSessionSidebarContent,
-	getBrowserChatRoomSidebarViewStorage,
-	readStoredChatRoomSidebarView,
-	writeStoredChatRoomSidebarView,
-} from "./chat-room-sidebar-utils";
+import { buildChatSessionSidebarContent } from "./chat-room-sidebar-utils";
 import type { ChatRoomSidebarProps } from "./types/chat-room-sidebar.types";
 import type { ChatRoomSidebarView } from "./types/chat-room.types";
 
@@ -36,12 +31,13 @@ export function ChatRoomSidebar({
 	onSelectSession,
 	onToggleCollapsed,
 }: ChatRoomSidebarProps): ReactElement {
-	const [sidebarView, setSidebarViewState] = useState<ChatRoomSidebarView>(() =>
-		readStoredChatRoomSidebarView(getBrowserChatRoomSidebarViewStorage()),
-	);
 	const [collapsedProjectIds, setCollapsedProjectIds] = useState<Set<string>>(
 		() => new Set(),
 	);
+	const sidebarView = useUiStore((state) => state.chatRoomSidebarView);
+	const setSidebarViewState = useUiStore(
+		(state) => state.setChatRoomSidebarView,
+	);
 	const pinnedSessionIds = useUiStore((state) => state.pinnedSessionIds);
 	const pinSession = useUiStore((state) => state.pinSession);
 	const unpinSession = useUiStore((state) => state.unpinSession);
@@ -57,10 +53,6 @@ export function ChatRoomSidebar({
 		if (view !== sidebarView) {
 			setSidebarViewState(view);
 		}
-		writeStoredChatRoomSidebarView(
-			getBrowserChatRoomSidebarViewStorage(),
-			view,
-		);
 	}
 
 	function showMainSidebar(): void {
@@ -72,6 +64,7 @@ export function ChatRoomSidebar({
 	}
 
 	function handleSettingsClick(): void {
+		console.log("sidebarView", sidebarView)
 		if (isCollapsed) {
 			onToggleCollapsed();
 		}

packages/web/src/components/chat-room/chat-room-sidebar-utils.ts

@@ -13,7 +13,7 @@ import {
 } from "@/lib/api/queries";
 import type { SettingsGithubUpdateRequest } from "@/lib/api/types/client.types";
 
-export function SettingsGithubPanel(): ReactElement {
+export function GitInstructionsPanel(): ReactElement {
 	const [draft, setDraft] = useState<Partial<SettingsGithubUpdateRequest>>({});
 	const query = useGitHubSettingsQuery({ refetchIntervalMs: false });
 	const mutation = useUpdateGitHubSettingsMutation();
@@ -39,7 +39,7 @@ export function SettingsGithubPanel(): ReactElement {
 		return (
 			<section className="grid gap-4 text-zinc-100">
 				<Typography variant="description">
-					Loading GitHub settings...
+					Loading Git instructions...
 				</Typography>
 			</section>
 		);
@@ -49,7 +49,7 @@ export function SettingsGithubPanel(): ReactElement {
 		return (
 			<section className="grid gap-4 text-zinc-100">
 				<Typography className="text-red-200" variant="description">
-					GitHub settings are unavailable.
+					Git instructions are unavailable.
 				</Typography>
 			</section>
 		);
@@ -58,7 +58,7 @@ export function SettingsGithubPanel(): ReactElement {
 	return (
 		<section className="grid gap-4 text-zinc-100">
 			<div className="flex flex-wrap items-start justify-between gap-3">
-				<Typography variant="sectionTitle">GitHub Workflow</Typography>
+				<Typography variant="sectionTitle">Git Instructions</Typography>
 				<div className="flex gap-2">
 					<Button
 						disabled={mutation.isPending || !hasChanges}
@@ -83,9 +83,9 @@ export function SettingsGithubPanel(): ReactElement {
 			</div>
 			<div className="grid gap-3 rounded-md border border-border bg-surface-panel p-3">
 				<div className="grid gap-1.5">
-					<Label htmlFor="github-commit-instruction">Commit</Label>
+					<Label htmlFor="git-commit-instruction">Commit</Label>
 					<Textarea
-						id="github-commit-instruction"
+						id="git-commit-instruction"
 						onChange={(event) =>
 							setDraft((current) => ({
 								...current,
@@ -97,9 +97,9 @@ export function SettingsGithubPanel(): ReactElement {
 					/>
 				</div>
 				<div className="grid gap-1.5">
-					<Label htmlFor="github-pr-instruction">Pull request</Label>
+					<Label htmlFor="git-pr-instruction">Pull request</Label>
 					<Textarea
-						id="github-pr-instruction"
+						id="git-pr-instruction"
 						onChange={(event) =>
 							setDraft((current) => ({
 								...current,
@@ -113,7 +113,7 @@ export function SettingsGithubPanel(): ReactElement {
 			</div>
 			{mutation.isError ? (
 				<Typography className="text-red-200" variant="description">
-					Could not save GitHub settings.
+					Could not save Git instructions.
 				</Typography>
 			) : null}
 		</section>