✨ New ReleaseVersion component into HelpButton

- Added `ReleaseVersion` component:
  - Displays the current CLI version, including:
    - Released version (e.g., `v0.0.11 (2024-12-19)`).
    - Unreleased version with short Git hash (e.g., `v0.0.11 + 0d6169a (2024-12-19)`).
  - Fetches version information from the `CliVersionProvider`.

- Updated `App.tsx`:
  - Initialized `cliVersion` using `import.meta.env.VITE_CLI_VERSION_*` environment variables.
  - Wrapped `ERDRenderer` with `CliVersionProvider` to provide version context globally.

frontend/.changeset/funny-jokes-add.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+New `ReleaseVersion` component into `HelpButton`

frontend/packages/cli/src/App.tsx

@@ -1,5 +1,10 @@
 import { dbStructureSchema } from '@liam-hq/db-structure'
-import { ERDRenderer, initDBStructureStore } from '@liam-hq/erd-core'
+import {
+  CliVersionProvider,
+  ERDRenderer,
+  cliVersionSchema,
+  initDBStructureStore,
+} from '@liam-hq/erd-core'
 import * as v from 'valibot'
 
 async function loadSchemaContent() {
@@ -20,8 +25,21 @@ async function loadSchemaContent() {
 
 loadSchemaContent()
 
+const cliVersionData = {
+  version: import.meta.env.VITE_CLI_VERSION_VERSION,
+  gitHash: import.meta.env.VITE_CLI_VERSION_GIT_HASH,
+  isReleasedGitHash:
+    import.meta.env.VITE_CLI_VERSION_IS_RELEASED_GIT_HASH === '1',
+  date: import.meta.env.VITE_CLI_VERSION_DATE,
+}
+const cliVersion = v.parse(cliVersionSchema, cliVersionData)
+
 function App() {
-  return <ERDRenderer />
+  return (
+    <CliVersionProvider cliVersion={cliVersion}>
+      <ERDRenderer />
+    </CliVersionProvider>
+  )
 }
 
 export default App

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.tsx

@@ -14,6 +14,7 @@ import {
 } from '@liam-hq/ui'
 import { forwardRef } from 'react'
 import styles from './HelpButton.module.css'
+import { ReleaseVersion } from './ReleaseVersion'
 
 const handleSelect = (url: string) => () => {
   window.open(url, '_blank', 'noreferrer')
@@ -41,6 +42,7 @@ export const HelpButton = forwardRef<HTMLButtonElement>((_, ref) => {
           sideOffset={4}
           className={styles.menuContent}
         >
+          <ReleaseVersion />
           <DropdownMenuItem
             size="sm"
             leftIcon={<BookText />}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.module.css

@@ -0,0 +1,12 @@
+.cliVersion {
+  padding: var(--spacing-2);
+}
+
+.cliVersionInner {
+  border-radius: var(--border-radius-full);
+  background: var(--pane-muted-background);
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--global-mute-text);
+  font-family: var(--code-font);
+  font-size: var(--font-size-1);
+}

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.tsx

@@ -0,0 +1,32 @@
+import { CliVersionProvider, useCliVersion } from '@/providers'
+import type { FC } from 'react'
+import styles from './ReleaseVersion.module.css'
+
+export const ReleaseVersion: FC = () => {
+  const { cliVersion } = useCliVersion()
+
+  // Example output for cliVersion:
+  // - Released version:
+  //   v0.0.11 (2024-12-19)
+  // - Unreleased version:
+  //   v0.0.11 + 0d6169a (2024-12-19)
+  //
+  // Explanation:
+  // - "Released version" means the current Git hash matches a tagged release.
+  // - "Unreleased version" includes a short Git hash prefix to indicate changes since the last release.
+  return (
+    <CliVersionProvider cliVersion={cliVersion}>
+      <div className={styles.cliVersion}>
+        <div className={styles.cliVersionInner}>
+          <span>{`v${cliVersion.version}`}</span>
+          <span>
+            {' '}
+            {cliVersion.isReleasedGitHash ||
+              `+ ${cliVersion.gitHash.slice(0, 7)} `}
+          </span>
+          <span>{cliVersion.date.length > 0 && ` (${cliVersion.date})`}</span>
+        </div>
+      </div>
+    </CliVersionProvider>
+  )
+}

frontend/packages/erd-core/src/index.ts

@@ -1,2 +1,4 @@
 export * from './components'
+export * from './providers'
+export * from './schemas'
 export * from './stores'

frontend/packages/erd-core/src/schemas/index.ts

@@ -0,0 +1,3 @@
+export * from './cliVersion'
+export * from './queryParam'
+export * from './showMode'