From 2f603e1e8cc720fcf40a300051d04dadb0417cde Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 31 Mar 2026 23:52:31 -0500
Subject: [PATCH 1/2] Polish skill detail dialog layout

- Add icon, tag chips, and improved command/path presentation
- Make dialog content and skills page scrollable within available height
---
 apps/web/src/components/skills/SkillsPage.tsx | 55 +++++++++++++------
 apps/web/src/components/ui/dialog.tsx         |  8 ++-
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/skills/SkillsPage.tsx b/apps/web/src/components/skills/SkillsPage.tsx
index a7f3f2a2d..88ec65f9c 100644
--- a/apps/web/src/components/skills/SkillsPage.tsx
+++ b/apps/web/src/components/skills/SkillsPage.tsx
@@ -138,30 +138,53 @@ function SkillDetailDialog(props: {
   const mutable = isCatalog ? !skill.immutable && skill.installed : skill.mutable;
   const pathValue = skill.path;
   const slashName = isCatalog ? skill.name.toLowerCase().replace(/\s+/g, "-") : skill.name;
+  const tags = "tags" in skill ? skill.tags : [];
+  const Icon = skillIcon("icon" in skill ? skill.icon : "file");
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
       <DialogPopup>
         <DialogHeader>
-          <DialogTitle>{skill.name}</DialogTitle>
-          <DialogDescription>{skill.description}</DialogDescription>
-        </DialogHeader>
-        <DialogPanel className="space-y-4">
-          <div className="flex flex-wrap gap-2">
-            {("tags" in skill ? skill.tags : []).map((tag) => (
-              <Badge key={tag} variant="secondary">
-                {tag}
-              </Badge>
-            ))}
+          <div className="flex items-center gap-3">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-accent/70 text-foreground">
+              <Icon className="size-5" />
+            </div>
+            <div className="min-w-0">
+              <DialogTitle>{skill.name}</DialogTitle>
+              <DialogDescription className="mt-1">{skill.description}</DialogDescription>
+            </div>
           </div>
+          {tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {tags.map((tag) => (
+                <Badge key={tag} variant="secondary" className="text-xs">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </DialogHeader>
+        <DialogPanel className="space-y-3">
           <div className="rounded-xl border bg-muted/35 p-3 text-sm">
-            <p className="font-medium text-foreground">Slash commands</p>
-            <p className="mt-2 font-mono text-xs text-muted-foreground">/{slashName}</p>
-            <p className="mt-1 font-mono text-xs text-muted-foreground">/skill read {slashName}</p>
+            <p className="font-medium text-foreground text-xs uppercase tracking-wider text-muted-foreground">
+              Slash commands
+            </p>
+            <div className="mt-2 space-y-1">
+              <p className="rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground">
+                /{slashName}
+              </p>
+              <p className="rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground">
+                /skill read {slashName}
+              </p>
+            </div>
           </div>
           {pathValue ? (
             <div className="rounded-xl border bg-muted/35 p-3 text-sm">
-              <p className="font-medium text-foreground">Path</p>
-              <p className="mt-1 break-all font-mono text-xs text-muted-foreground">{pathValue}</p>
+              <p className="font-medium text-xs uppercase tracking-wider text-muted-foreground">
+                Installed path
+              </p>
+              <p className="mt-2 break-all rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground">
+                {pathValue}
+              </p>
             </div>
           ) : null}
         </DialogPanel>
@@ -422,7 +445,7 @@ export function SkillsPage(props: {
             <SkillLibraryTabs current="skills" />
           </div>
         </div>
-        <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:px-6">
+        <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 overflow-y-auto px-4 py-8 sm:px-6">
           <div className="space-y-6">
             <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
               <div className="space-y-2">
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 774047fee..73ae52e11 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -90,7 +90,13 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function DialogPanel({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("px-6 pb-6", className)} data-slot="dialog-panel" {...props} />;
+  return (
+    <div
+      className={cn("min-h-0 overflow-y-auto px-6 pb-6", className)}
+      data-slot="dialog-panel"
+      {...props}
+    />
+  );
 }
 
 function DialogFooter({

From c80dfb122d41141e1edd1dbf00c1dd1c691fb9f3 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 04:02:54 -0500
Subject: [PATCH 2/2] Use Carbon as default theme

---
 apps/web/src/hooks/useTheme.ts         |  3 ++-
 apps/web/src/routes/_chat.settings.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/hooks/useTheme.ts b/apps/web/src/hooks/useTheme.ts
index 327dabcfa..71dcd4077 100644
--- a/apps/web/src/hooks/useTheme.ts
+++ b/apps/web/src/hooks/useTheme.ts
@@ -42,6 +42,7 @@ const STORAGE_KEY = "okcode:theme";
 const COLOR_THEME_STORAGE_KEY = "okcode:color-theme";
 const FONT_FAMILY_STORAGE_KEY = "okcode:font-family";
 const MEDIA_QUERY = "(prefers-color-scheme: dark)";
+export const DEFAULT_COLOR_THEME: ColorTheme = "carbon";
 
 let listeners: Array<() => void> = [];
 let lastSnapshot: ThemeSnapshot | null = null;
@@ -74,7 +75,7 @@ function getStoredColorTheme(): ColorTheme {
   ) {
     return raw;
   }
-  return "default";
+  return DEFAULT_COLOR_THEME;
 }
 
 function getStoredFontFamily(): FontFamily {
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index b553c7775..6accd1dbb 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -42,7 +42,7 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../components/ui/tooltip"
 import { CustomThemeDialog } from "../components/CustomThemeDialog";
 import { resolveAndPersistPreferredEditor } from "../editorPreferences";
 import { isElectron } from "../env";
-import { useTheme, COLOR_THEMES, FONT_FAMILIES } from "../hooks/useTheme";
+import { useTheme, COLOR_THEMES, DEFAULT_COLOR_THEME, FONT_FAMILIES } from "../hooks/useTheme";
 import {
   environmentVariablesQueryKeys,
   globalEnvironmentVariablesQueryOptions,
@@ -327,7 +327,7 @@ function SettingsRouteView() {
     settings.codexHomePath !== defaults.codexHomePath;
   const changedSettingLabels = [
     ...(theme !== "system" ? ["Theme"] : []),
-    ...(colorTheme !== "default" ? ["Color theme"] : []),
+    ...(colorTheme !== DEFAULT_COLOR_THEME ? ["Color theme"] : []),
     ...(fontFamily !== "inter" ? ["Font"] : []),
     ...(settings.timestampFormat !== defaults.timestampFormat ? ["Time format"] : []),
     ...(settings.diffWordWrap !== defaults.diffWordWrap ? ["Diff line wrapping"] : []),
@@ -475,7 +475,7 @@ function SettingsRouteView() {
     if (!confirmed) return;
 
     setTheme("system");
-    setColorTheme("default");
+    setColorTheme(DEFAULT_COLOR_THEME);
     setFontFamily("inter");
     resetSettings();
     setOpenInstallProviders({
@@ -579,11 +579,11 @@ function SettingsRouteView() {
                 title="Color theme"
                 description="Pick a color palette for light and dark modes."
                 resetAction={
-                  colorTheme !== "default" ? (
+                  colorTheme !== DEFAULT_COLOR_THEME ? (
                     <SettingResetButton
                       label="color theme"
                       onClick={() => {
-                        setColorTheme("default");
+                        setColorTheme(DEFAULT_COLOR_THEME);
                         clearStoredCustomTheme();
                         removeCustomTheme();
                       }}