fix: polish ai agent and command palette

apps/web/index.html

@@ -23,10 +23,7 @@
 		<div id="app"></div>
 		<!-- Branded first paint; hidden once React populates #app (higher-specificity rule below). -->
 		<div id="initial-loader">
-			<svg width="48" height="48" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Reactive Resume">
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M173.611 166.311L132.877 219.804H173.524L193.973 191.813L213.183 219.804H256L215.673 165.707L215.15 165.046L207.461 155.332L195.329 140.004L195.258 139.915L193.813 138.089L193.923 138.001L176.286 112.861H134.061L173.611 166.311ZM199.89 133.554L214.959 112.861H254.619L219.874 158.8L199.89 133.554Z" fill="#FAFAFA"/>
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M0 36.1959V174.314H39.0678V137.614H60.3938L60.4323 137.671C60.8436 137.653 61.2517 137.634 61.6567 137.614C75.0665 136.968 85.1471 135.549 96.385 131.385C96.7596 131.246 97.1355 131.104 97.5128 130.959L97.4591 130.881C105.816 126.86 112.331 121.344 117.006 114.331C122.005 106.702 124.504 97.6915 124.504 87.2997C124.504 76.7764 122.005 67.7 117.006 60.0706C112.007 52.3097 104.904 46.3903 95.6964 42.3125C86.62 38.2347 75.7679 36.1959 63.1399 36.1959H0ZM102.156 137.725L64.8705 144.175L85.4361 174.314H127.266L102.156 137.725ZM39.0678 107.426H60.7721C68.9277 107.426 74.9786 105.65 78.9248 102.098C83.0026 98.5465 85.0415 93.6137 85.0415 87.2997C85.0415 80.8542 83.0026 75.8556 78.9248 72.304C74.9786 68.7523 68.9277 66.9765 60.7721 66.9765H39.0678V107.426Z" fill="#FAFAFA"/>
-			</svg>
+			<img src="/icon/dark.svg" width="48" height="48" alt="Reactive Resume" />
 			<div class="initial-loader__spinner"></div>
 			<span class="initial-loader__sr-only">Loading</span>
 		</div>

apps/web/package.json

@@ -76,6 +76,7 @@
 		"react-resizable-panels": "^4.12.1",
 		"react-window": "^2.2.7",
 		"react-zoom-pan-pinch": "^4.0.3",
+		"remark-gfm": "^4.0.1",
 		"sonner": "^2.0.7",
 		"ts-pattern": "^5.9.0",
 		"usehooks-ts": "^3.1.1",

apps/web/src/components/layout/loading-screen.test.tsx

@@ -1,17 +1,27 @@
 // @vitest-environment happy-dom
 
+import { readFileSync } from "node:fs";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { LoadingScreen } from "./loading-screen";
 
 describe("LoadingScreen", () => {
-	it("renders the Reactive Resume logo and spinner", () => {
+	it("renders the Reactive Resume icon and spinner", () => {
 		render(<LoadingScreen />);
 
-		expect(screen.getAllByAltText("Reactive Resume")).toHaveLength(2);
+		const icons = screen.getAllByAltText("Reactive Resume");
+		expect(icons).toHaveLength(2);
+		expect(icons.map((icon) => icon.getAttribute("src"))).toEqual(["/icon/dark.svg", "/icon/light.svg"]);
 		expect(screen.getByLabelText("Loading")).toBeInTheDocument();
 	});
 
+	it("uses the same icon asset as the initial HTML loader", () => {
+		const html = readFileSync("index.html", "utf8");
+
+		expect(html).toContain('src="/icon/dark.svg"');
+		expect(html).not.toContain('src="/logo/dark.svg"');
+	});
+
 	it("fills the viewport (fixed inset-0)", () => {
 		const { container } = render(<LoadingScreen />);
 

apps/web/src/components/layout/loading-screen.tsx

@@ -4,7 +4,7 @@ import { Spinner } from "@reactive-resume/ui/components/spinner";
 export function LoadingScreen() {
 	return (
 		<div className="fixed inset-0 z-50 flex h-svh w-svw flex-col items-center justify-center gap-y-6 bg-background">
-			<BrandIcon variant="logo" className="size-12" />
+			<BrandIcon variant="icon" className="size-12" />
 			<Spinner className="size-6" />
 		</div>
 	);

apps/web/src/features/command-palette/pages/resumes.test.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+
+import { render, screen } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
+import { useQuery } from "@tanstack/react-query";
+import { Command, CommandList } from "@reactive-resume/ui/components/command";
+import { useCommandPaletteStore } from "../store";
+
+const queryOptionsMock = vi.fn((options?: unknown) => options ?? {});
+
+vi.mock("@tanstack/react-query", () => ({
+	useQuery: vi.fn(),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+	useNavigate: () => vi.fn(),
+	useRouteContext: () => ({ session: { user: { id: "user-1" } } }),
+}));
+
+vi.mock("@/dialogs/store", () => ({
+	useDialogStore: () => ({ openDialog: vi.fn() }),
+}));
+
+vi.mock("@/libs/orpc/client", () => ({
+	orpc: {
+		resume: {
+			list: {
+				queryOptions: queryOptionsMock,
+			},
+		},
+	},
+}));
+
+const { ResumesCommandGroup } = await import("./resumes");
+
+beforeAll(() => {
+	i18n.loadAndActivate({ locale: "en", messages: {} });
+});
+
+afterEach(() => {
+	vi.clearAllMocks();
+	useCommandPaletteStore.setState({ open: false, search: "", pages: [] });
+});
+
+const renderGroup = () =>
+	render(
+		<I18nProvider i18n={i18n}>
+			<Command>
+				<CommandList>
+					<ResumesCommandGroup />
+				</CommandList>
+			</Command>
+		</I18nProvider>,
+	);
+
+describe("ResumesCommandGroup", () => {
+	it("loads resumes with the default list input on the resumes page", () => {
+		useCommandPaletteStore.setState({ pages: ["resumes"] });
+		vi.mocked(useQuery).mockReturnValue({
+			data: [{ id: "resume-1", name: "Evil Apricot Pike" }],
+			isLoading: false,
+		} as ReturnType<typeof useQuery>);
+
+		renderGroup();
+
+		expect(queryOptionsMock).toHaveBeenCalledWith({
+			enabled: true,
+			input: { sort: "lastUpdatedAt", tags: [] },
+		});
+		expect(screen.getByText("Evil Apricot Pike")).toBeInTheDocument();
+	});
+});

apps/web/src/features/command-palette/pages/resumes.tsx

@@ -24,6 +24,7 @@ export function ResumesCommandGroup() {
 	const { data: resumes, isLoading } = useQuery(
 		orpc.resume.list.queryOptions({
 			enabled: !!session && isResumesPage,
+			input: { sort: "lastUpdatedAt", tags: [] },
 		}),
 	);
 

apps/web/src/routes/agent/-components/agent-chat.test.tsx

@@ -0,0 +1,25 @@
+// @vitest-environment happy-dom
+
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AssistantMarkdown } from "./agent-chat";
+
+describe("AssistantMarkdown", () => {
+	it("renders GitHub-style pipe tables as tables", () => {
+		render(
+			<AssistantMarkdown
+				text={
+					"Before\n\n| Weak/Generic | Improved Version |\n| --- | --- |\n| Placeholder text | Mentored 3+ juniors |\n| Worked closely | Collaborated with 6+ artists |\n\nAfter"
+				}
+			/>,
+		);
+
+		const table = screen.getByRole("table");
+
+		expect(within(table).getByRole("columnheader", { name: "Weak/Generic" })).toBeInTheDocument();
+		expect(within(table).getByRole("columnheader", { name: "Improved Version" })).toBeInTheDocument();
+		expect(within(table).getByRole("cell", { name: "Mentored 3+ juniors" })).toBeInTheDocument();
+		expect(screen.getByText("Before")).toBeInTheDocument();
+		expect(screen.getByText("After")).toBeInTheDocument();
+	});
+});

apps/web/src/routes/agent/-components/agent-chat.tsx

@@ -27,6 +27,7 @@ import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
 import { m } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { toast } from "sonner";
 import {
 	Attachment,
@@ -380,10 +381,11 @@ function getMessagePartKey(messageId: string, part: UIMessage["parts"][number])
 	return `${messageId}-${part.type}-${JSON.stringify(part)}`;
 }
 
-function AssistantMarkdown({ text }: AssistantMarkdownProps) {
+export function AssistantMarkdown({ text }: AssistantMarkdownProps) {
 	return (
 		<ReactMarkdown
 			skipHtml
+			remarkPlugins={[remarkGfm]}
 			components={{
 				p: ({ children }) => <p className="my-2 leading-relaxed first:mt-0 last:mb-0">{children}</p>,
 				ul: ({ children }) => <ul className="my-2 ms-5 list-disc space-y-1">{children}</ul>,
@@ -407,6 +409,13 @@ function AssistantMarkdown({ text }: AssistantMarkdownProps) {
 				blockquote: ({ children }) => (
 					<blockquote className="my-3 border-l-2 ps-3 text-muted-foreground">{children}</blockquote>
 				),
+				table: ({ children }) => (
+					<div className="my-3 max-w-full overflow-x-auto">
+						<table className="w-full min-w-max border-collapse text-left text-sm">{children}</table>
+					</div>
+				),
+				th: ({ children }) => <th className="border px-3 py-2 font-semibold">{children}</th>,
+				td: ({ children }) => <td className="border px-3 py-2 align-top">{children}</td>,
 			}}
 		>
 			{text}