feat(FR-2578): add BAIId component for truncated UUID/globalId display (#6700)

resolves [FR-2578](https://lablup.atlassian.net/browse/FR-2578)

## Summary

Adds a new `BAIId` component to the `backend.ai-ui` package for rendering identifiers (plain UUIDs or Relay global IDs) in a compact, copyable form.

The component wraps `BAIText` with the defaults the project already uses inline at many call sites:

```tsx
<BAIText copyable ellipsis monospace style={{ maxWidth: 100 }}>
  {toLocalId(record.id)}
</BAIText>
```

## API

- Accepts exactly one of two mutually exclusive props: `uuid` or `globalId` (no `children`).
- `globalId` is decoded via `toLocalId`; decode failures (non-base64 or non-Relay payloads) fall back to the raw input so a bad value doesn't crash the subtree.
- Props interface **extends `Omit<BAITextProps, 'children'>`** per the `component-props-extension` rule, so every `BAIText` prop passes through.
- Defaults (`copyable`, `ellipsis`, `monospace`, `style.maxWidth: 100`) are all overridable via props.

## Files

- `packages/backend.ai-ui/src/components/BAIId.tsx` — component
- `packages/backend.ai-ui/src/components/BAIId.stories.tsx` — Storybook story (UUID, global ID, override defaults)
- `packages/backend.ai-ui/src/components/index.ts` — export

## Screenshots (Storybook)

### UUID
![BAIId — UUID](https://raw.githubusercontent.com/lablup/backend.ai-webui/assets/images/screenshots/pr-6700/20260414-235552-baiid-uuid.png)

### Global ID
![BAIId — Global ID](https://raw.githubusercontent.com/lablup/backend.ai-webui/assets/images/screenshots/pr-6700/20260414-235556-baiid-global-id.png)

### Override defaults
![BAIId — Override defaults](https://raw.githubusercontent.com/lablup/backend.ai-webui/assets/images/screenshots/pr-6700/20260414-235600-baiid-override-defaults.png)

## Verification

`bash scripts/verify.sh` → `=== ALL PASS ===` (Relay, Lint, Format, TypeScript).

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-2578]: https://lablup.atlassian.net/browse/FR-2578?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yomybaby

packages/backend.ai-ui/src/components/BAIId.stories.tsx

@@ -0,0 +1,103 @@
+import BAIFlex from './BAIFlex';
+import BAIId from './BAIId';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const SAMPLE_UUID = '5a59ce9b-afa1-4059-9341-683110eb4408';
+const SAMPLE_GLOBAL_ID = btoa(`UserNode:${SAMPLE_UUID}`);
+
+const meta: Meta<typeof BAIId> = {
+  title: 'Text/BAIId',
+  component: BAIId,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+**BAIId** is a thin wrapper around \`BAIText\` for rendering identifiers
+(plain UUIDs or Relay global IDs) in a compact, copyable form.
+
+It accepts exactly one of two mutually exclusive props:
+
+- \`uuid\`: a plain UUID string.
+- \`globalId\`: a base64-encoded Relay global ID; decoded via \`toLocalId\`.
+
+By default it renders with:
+- \`copyable\`
+- \`ellipsis\` (CSS-based, Safari-compatible)
+- \`monospace\`
+- \`style={{ maxWidth: 100 }}\`
+
+All defaults are overridable via props; all other \`BAIText\` props pass through.
+`,
+      },
+    },
+  },
+  argTypes: {
+    uuid: {
+      control: { type: 'text' },
+      description: 'Plain UUID string. Mutually exclusive with `globalId`.',
+      table: { type: { summary: 'string' } },
+    },
+    globalId: {
+      control: { type: 'text' },
+      description:
+        'Relay global ID (base64). Decoded to the local id via `toLocalId`. Mutually exclusive with `uuid`.',
+      table: { type: { summary: 'string' } },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BAIId>;
+
+export const Default: Story = {
+  name: 'Basic',
+  args: {
+    uuid: SAMPLE_UUID,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a plain UUID in a compact, copyable form. The displayed text may be truncated with ellipsis depending on the available width and `style.maxWidth`; the copy icon copies the full id.',
+      },
+    },
+  },
+};
+
+export const WithGlobalId: Story = {
+  name: 'Global ID',
+  args: {
+    globalId: SAMPLE_GLOBAL_ID,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a Relay global ID after decoding the base64 payload and extracting the local id with `toLocalId`. The copy icon copies the decoded local id.',
+      },
+    },
+  },
+};
+
+export const OverrideDefaults: Story = {
+  name: 'Override defaults',
+  render: () => (
+    <BAIFlex direction="column" gap="sm">
+      <BAIId uuid={SAMPLE_UUID} copyable={false} />
+      <BAIId uuid={SAMPLE_UUID} monospace={false} />
+      <BAIId uuid={SAMPLE_UUID} style={{ maxWidth: 200 }} />
+      <BAIId uuid={SAMPLE_UUID} ellipsis={false} style={{ maxWidth: 'none' }} />
+    </BAIFlex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'All defaults (`copyable`, `ellipsis`, `monospace`, `style.maxWidth`) can be overridden. Other `BAIText` props pass through.',
+      },
+    },
+  },
+};

packages/backend.ai-ui/src/components/BAIId.tsx

@@ -0,0 +1,44 @@
+import { toLocalId } from '../helper';
+import BAIText, { type BAITextProps } from './BAIText';
+import React from 'react';
+
+export type BAIIdProps = Omit<BAITextProps, 'children'> &
+  ({ uuid: string; globalId?: never } | { uuid?: never; globalId: string });
+
+// Safely decode a Relay global id to its local id.
+// Falls back to the raw input when the value is not a valid Relay global id
+// (e.g., not base64, or decoded payload has no `:` separator), so a bad
+// backend value doesn't crash the subtree.
+const safeDecodeGlobalId = (globalId: string): string => {
+  try {
+    return toLocalId(globalId) ?? globalId;
+  } catch {
+    return globalId;
+  }
+};
+
+const BAIId: React.FC<BAIIdProps> = ({
+  uuid,
+  globalId,
+  copyable = true,
+  ellipsis = true,
+  monospace = true,
+  style,
+  ...restProps
+}) => {
+  const value = uuid ?? safeDecodeGlobalId(globalId as string);
+
+  return (
+    <BAIText
+      copyable={copyable}
+      ellipsis={ellipsis}
+      monospace={monospace}
+      style={{ maxWidth: 100, ...style }}
+      {...restProps}
+    >
+      {value}
+    </BAIText>
+  );
+};
+
+export default BAIId;

packages/backend.ai-ui/src/components/index.ts

@@ -43,6 +43,8 @@ export { default as BAIBackButton } from './BAIBackButton';
 export type { BAIBackButtonProps } from './BAIBackButton';
 export { default as BAIText } from './BAIText';
 export type { BAITextProps } from './BAIText';
+export { default as BAIId } from './BAIId';
+export type { BAIIdProps } from './BAIId';
 export { default as BAISelect } from './BAISelect';
 export type { BAISelectProps } from './BAISelect';
 export { default as BAINotificationItem } from './BAINotificationItem';