stylessh · stylessh · Apr 13, 2026 · Apr 13, 2026
diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
@@ -1,4 +1,6 @@
 import {
+	BugIcon,
+	ExternalLinkIcon,
 	GitPullRequestIcon,
 	HomeIcon,
 	IssuesIcon,
@@ -7,6 +9,7 @@ import {
 	ReviewsIcon,
 	SettingsIcon,
 	UserCircleIcon,
+	XLogo,
 } from "@diffkit/icons";
 import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
 import { Button } from "@diffkit/ui/components/button";
@@ -300,13 +303,50 @@ export function DashboardTopbar({
 			</div>
 
 			<div className="hidden shrink-0 md:block">
-				<Button
-					variant="ghost"
-					size="icon"
-					iconLeft={<MoreHorizontalIcon className="size-5" strokeWidth={2} />}
-					className="size-8 text-muted-foreground hover:bg-surface-1"
-					aria-label="More actions"
-				/>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							iconLeft={
+								<MoreHorizontalIcon className="size-5" strokeWidth={2} />
+							}
+							className="size-8 text-muted-foreground hover:bg-surface-1"
+							aria-label="More actions"
+						/>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-48">
+						<DropdownMenuItem asChild>
+							<Link
+								to="/$owner/$repo"
+								params={{ owner: "stylessh", repo: "diffkit" }}
+							>
+								<ExternalLinkIcon size={16} strokeWidth={2} />
+								View GitHub repo
+							</Link>
+						</DropdownMenuItem>
+						<DropdownMenuItem asChild>
+							<Link
+								to="/$owner/$repo/issues/new"
+								params={{ owner: "stylessh", repo: "diffkit" }}
+							>
+								<BugIcon size={16} strokeWidth={2} />
+								Report an issue
+							</Link>
+						</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem asChild>
+							<a
+								href="https://x.com/stylesshDev"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<XLogo className="size-3.5" />
+								Check for updates
+							</a>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
 			</div>
 		</nav>
 	);

diff --git a/apps/dashboard/src/components/repo/file-tree.tsx b/apps/dashboard/src/components/repo/file-tree.tsx
@@ -29,7 +29,7 @@ function FileTreeRow({
 	return (
 		<div
 			className={cn(
-				"grid grid-cols-[200px_minmax(0,1fr)_80px] items-center gap-4 px-4 py-2 text-sm hover:bg-surface-0",
+				"grid grid-cols-[200px_minmax(0,1fr)_80px] items-center gap-4 px-4 py-2 text-sm hover:bg-surface-1",
 				!isLast && "border-b",
 			)}
 		>

diff --git a/apps/dashboard/src/routeTree.gen.ts b/apps/dashboard/src/routeTree.gen.ts
@@ -583,3 +583,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}
diff --git a/packages/icons/src/brand-logos.tsx b/packages/icons/src/brand-logos.tsx
@@ -31,6 +31,27 @@ export function GitHubLogo(props: React.ComponentProps<"svg">) {
   );
 }
 
+export function XLogo(props: React.ComponentProps<"svg">) {
+  const { className, ...rest } = props;
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={withClassName(className)}
+      fill="none"
+      focusable="false"
+      viewBox="0 0 1200 1227"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
 export function GitHubWordmarkLogo(props: React.ComponentProps<"svg">) {
   const { className, ...rest } = props;
 

diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
@@ -68,6 +68,6 @@ export {
   ViewIcon,
   WifiDisconnected01Icon as WifiOffIcon,
 } from "@hugeicons/react";
-export { GitHubLogo, GitHubWordmarkLogo } from "./brand-logos";
+export { GitHubLogo, GitHubWordmarkLogo, XLogo } from "./brand-logos";
 export { PenIcon } from "./pen-icon";
 export { SeparatorHorizontalIcon } from "./separator-horizontal-icon";
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -48,6 +48,7 @@
 		"react-resizable-panels": "^3.0.3",
 		"rehype-raw": "^7.0.0",
 		"remark-gfm": "^4.0.1",
+		"remark-github-blockquote-alert": "^2.1.0",
 		"shiki": "^4.0.2",
 		"sonner": "^2.0.1",
 		"tailwind-merge": "^3.3.0",

diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx
@@ -2,6 +2,7 @@ import { Md } from "@m2d/react-markdown/client";
 import { Suspense, use, useCallback, useRef, useState } from "react";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
+import { remarkAlert } from "remark-github-blockquote-alert";
 import type { BundledLanguage, Highlighter } from "shiki";
 import { vercelDark, vercelLight } from "../lib/shiki-themes";
 import { cn } from "../lib/utils";
@@ -140,7 +141,7 @@ function ShikiCode({ code, lang }: { code: string; lang: string }) {
 		<Suspense
 			fallback={
 				<div className="group/code relative mb-2">
-					<pre className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs">
+					<pre className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs text-foreground">
 						<code>{code}</code>
 					</pre>
 				</div>
@@ -200,15 +201,15 @@ const components: Record<string, React.FC<any>> = {
 	),
 	ul: ({ node: _, children, ...props }) => (
 		<ul
-			className="text-sm list-disc pl-5 mb-2 flex flex-col gap-0.5"
+			className="text-sm list-disc pl-5 mb-2 flex flex-col gap-1.5"
 			{...props}
 		>
 			{children}
 		</ul>
 	),
 	ol: ({ node: _, children, ...props }) => (
 		<ol
-			className="text-sm list-decimal pl-5 mb-2 flex flex-col gap-0.5"
+			className="text-sm list-decimal pl-5 mb-2 flex flex-col gap-1.5"
 			{...props}
 		>
 			{children}
@@ -256,7 +257,7 @@ const components: Record<string, React.FC<any>> = {
 		}
 		return (
 			<pre
-				className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs mb-2"
+				className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs mb-2 text-foreground"
 				{...props}
 			>
 				{children}
@@ -274,7 +275,7 @@ const components: Record<string, React.FC<any>> = {
 		/>
 	),
 	table: ({ node: _, children, ...props }) => (
-		<div className="overflow-hidden mb-2 rounded-lg border border-border bg-surface-0">
+		<div className="flex flex-col overflow-hidden mb-2 rounded-lg border border-border bg-surface-0">
 			<table className="w-full text-sm border-collapse" {...props}>
 				{children}
 			</table>
@@ -368,9 +369,9 @@ export function Markdown({
 	className?: string;
 }) {
 	return (
-		<div className={cn("text-foreground", className)}>
+		<div className={cn("not-prose text-foreground", className)}>
 			<Md
-				remarkPlugins={[remarkGfm]}
+				remarkPlugins={[remarkGfm, remarkAlert]}
 				rehypePlugins={[rehypeRaw]}
 				components={components}
 			>

diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
@@ -340,3 +340,59 @@ input[type="search"] {
 		transparent
 	);
 }
+
+/* GitHub-flavored markdown alerts */
+.markdown-alert {
+	padding: 0.75rem 1rem;
+	margin-bottom: 0.5rem;
+	border-left: 3px solid var(--alert-color);
+	border-radius: 0.375rem;
+	background: color-mix(in srgb, var(--alert-color) 8%, transparent);
+}
+
+.markdown-alert-title {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.8125rem;
+	font-weight: 600;
+	color: var(--alert-color);
+	margin-bottom: 0.25rem;
+}
+
+.markdown-alert-title .octicon {
+	fill: var(--alert-color);
+	flex-shrink: 0;
+}
+
+.markdown-alert-note {
+	--alert-color: oklch(0.55 0.15 255);
+}
+.markdown-alert-tip {
+	--alert-color: oklch(0.55 0.16 155);
+}
+.markdown-alert-important {
+	--alert-color: oklch(0.55 0.18 290);
+}
+.markdown-alert-warning {
+	--alert-color: oklch(0.65 0.16 75);
+}
+.markdown-alert-caution {
+	--alert-color: oklch(0.55 0.2 25);
+}
+
+.dark .markdown-alert-note {
+	--alert-color: oklch(0.7 0.15 255);
+}
+.dark .markdown-alert-tip {
+	--alert-color: oklch(0.7 0.16 155);
+}
+.dark .markdown-alert-important {
+	--alert-color: oklch(0.7 0.18 290);
+}
+.dark .markdown-alert-warning {
+	--alert-color: oklch(0.75 0.14 75);
+}
+.dark .markdown-alert-caution {
+	--alert-color: oklch(0.7 0.2 25);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml