feat(settings): add About section with build metadata (#490)

Co-authored-by: Vladislav Forsh <forsh@eot.games>
Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

Author: 3 people

src-tauri/src/lib.rs

@@ -277,6 +277,7 @@ pub fn run() {
             dictation::dictation_cancel,
             local_usage::local_usage_snapshot,
             notifications::is_macos_debug_build,
+            notifications::app_build_type,
             notifications::send_notification_fallback,
             tailscale::tailscale_status,
             tailscale::tailscale_daemon_command_preview,

src-tauri/src/notifications.rs

@@ -6,6 +6,15 @@ pub(crate) async fn is_macos_debug_build() -> bool {
     cfg!(all(target_os = "macos", debug_assertions))
 }
 
+#[tauri::command]
+pub(crate) async fn app_build_type() -> String {
+    if cfg!(debug_assertions) {
+        "debug".to_string()
+    } else {
+        "release".to_string()
+    }
+}
+
 /// macOS dev-mode fallback for system notifications.
 ///
 /// In `tauri dev` (debug assertions enabled), the app is typically run as a

src/features/app/hooks/useSettingsModalState.ts

@@ -3,6 +3,7 @@ import { useCallback, useState } from "react";
 export type SettingsSection =
   | "projects"
   | "display"
+  | "about"
   | "dictation"
   | "shortcuts"
   | "open-apps"

src/features/settings/components/SettingsNav.tsx

@@ -10,6 +10,7 @@ import ExternalLink from "lucide-react/dist/esm/icons/external-link";
 import Layers from "lucide-react/dist/esm/icons/layers";
 import ServerCog from "lucide-react/dist/esm/icons/server-cog";
 import Bot from "lucide-react/dist/esm/icons/bot";
+import Info from "lucide-react/dist/esm/icons/info";
 import { PanelNavItem, PanelNavList } from "@/features/design-system/components/panel/PanelPrimitives";
 import type { CodexSection } from "./settingsTypes";
 
@@ -135,6 +136,15 @@ export function SettingsNav({
         >
           Features
         </PanelNavItem>
+        <PanelNavItem
+          className="settings-nav"
+          icon={<Info aria-hidden />}
+          active={activeSection === "about"}
+          showDisclosure={showDisclosure}
+          onClick={() => onSelectSection("about")}
+        >
+          About
+        </PanelNavItem>
       </PanelNavList>
     </aside>
   );

src/features/settings/components/sections/SettingsAboutSection.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { getAppBuildType, type AppBuildType } from "@services/tauri";
+
+export function SettingsAboutSection() {
+  const [appBuildType, setAppBuildType] = useState<AppBuildType | "unknown">("unknown");
+
+  useEffect(() => {
+    let active = true;
+    const loadBuildType = async () => {
+      try {
+        const value = await getAppBuildType();
+        if (active) {
+          setAppBuildType(value);
+        }
+      } catch {
+        if (active) {
+          setAppBuildType("unknown");
+        }
+      }
+    };
+    void loadBuildType();
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const buildDateValue = __APP_BUILD_DATE__.trim();
+  const parsedBuildDate = Date.parse(buildDateValue);
+  const buildDateLabel = Number.isNaN(parsedBuildDate)
+    ? buildDateValue || "unknown"
+    : new Date(parsedBuildDate).toLocaleString();
+
+  return (
+    <section className="settings-section">
+      <div className="settings-field">
+        <div className="settings-help">
+          Version: <code>{__APP_VERSION__}</code>
+        </div>
+        <div className="settings-help">
+          Build type: <code>{appBuildType}</code>
+        </div>
+        <div className="settings-help">
+          Branch: <code>{__APP_GIT_BRANCH__ || "unknown"}</code>
+        </div>
+        <div className="settings-help">
+          Commit: <code>{__APP_COMMIT_HASH__ || "unknown"}</code>
+        </div>
+        <div className="settings-help">
+          Build date: <code>{buildDateLabel}</code>
+        </div>
+      </div>
+    </section>
+  );
+}

src/features/settings/components/sections/SettingsSectionContainers.tsx

@@ -10,6 +10,7 @@ import { SettingsProjectsSection } from "./SettingsProjectsSection";
 import { SettingsServerSection } from "./SettingsServerSection";
 import { SettingsShortcutsSection } from "./SettingsShortcutsSection";
 import { SettingsAgentsSection } from "./SettingsAgentsSection";
+import { SettingsAboutSection } from "./SettingsAboutSection";
 import type { CodexSection } from "@settings/components/settingsTypes";
 import type { SettingsViewOrchestration } from "@settings/hooks/useSettingsViewOrchestration";
 
@@ -31,6 +32,9 @@ export function SettingsSectionContainers({
   if (activeSection === "display") {
     return <SettingsDisplaySection {...orchestration.displaySectionProps} />;
   }
+  if (activeSection === "about") {
+    return <SettingsAboutSection />;
+  }
   if (activeSection === "composer") {
     return <SettingsComposerSection {...orchestration.composerSectionProps} />;
   }

src/features/settings/components/settingsTypes.ts

@@ -4,6 +4,7 @@ type SettingsSection =
   | "projects"
   | "environments"
   | "display"
+  | "about"
   | "composer"
   | "dictation"
   | "shortcuts"

src/features/settings/components/settingsViewConstants.ts

@@ -77,6 +77,7 @@ export const SETTINGS_SECTION_LABELS: Record<CodexSection, string> = {
   projects: "Projects",
   environments: "Environments",
   display: "Display & Sound",
+  about: "About",
   composer: "Composer",
   dictation: "Dictation",
   shortcuts: "Shortcuts",

src/services/tauri.ts

@@ -1082,6 +1082,12 @@ export async function generateAgentDescription(
   return invoke("generate_agent_description", { workspaceId, description });
 }
 
+export type AppBuildType = "debug" | "release";
+
+export async function getAppBuildType(): Promise<AppBuildType> {
+  return invoke<AppBuildType>("app_build_type");
+}
+
 export async function sendNotification(
   title: string,
   body: string,

src/vite-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="vite/client" />
 
 declare const __APP_VERSION__: string;
+declare const __APP_COMMIT_HASH__: string;
+declare const __APP_BUILD_DATE__: string;
+declare const __APP_GIT_BRANCH__: string;