@flamingo-stack/openframe-frontend-core 0.0.319 → 0.0.321-snapshot.20260625085235

package/src/components/chat/types/component.types.ts

@@ -132,6 +132,17 @@ export interface ChatMessageEnhancedProps extends Omit<HTMLAttributes<HTMLDivEle
    * glyph). Optional — chips render label-only when omitted.
    */
   resolveContextIcon?: (item: ChatContextItem) => ReactNode
+  /**
+   * Host renderer that REPLACES the default label-only context chip for an
+   * attached item with a self-fetching entity chip — so a user's manually
+   * attached context renders IDENTICALLY to an inline `@marker:id` mention
+   * (same live name resolution, same link). Mirror of `renderMention`, but for
+   * the `contextItems` strip instead of inline tokens. Return `null` for an
+   * item the host can't render → the lib falls back to the label pill. Keep the
+   * function identity stable (module const / `useCallback`) so the message memo
+   * holds across streaming chunks.
+   */
+  renderContextItem?: (item: ChatContextItem) => ReactNode
   /**
    * Host renderer for inline AI mentions `@marker:id` — the ASSISTANT echoing
    * `@device:<machineId>` (etc.) in its reply. DIRECT MIRROR of
@@ -215,6 +226,10 @@ export interface ChatMessageListProps extends HTMLAttributes<HTMLDivElement> {
   /** Lead-icon resolver for per-message context chips (maps a context item to
    *  its entity-type glyph). Forwarded to every message's ChatMessageEnhanced. */
   resolveContextIcon?: (item: ChatContextItem) => ReactNode
+  /** Host renderer that REPLACES the default context chip with a self-fetching
+   *  entity chip (so attached context renders like an inline mention).
+   *  Forwarded verbatim to every message's ChatMessageEnhanced. */
+  renderContextItem?: (item: ChatContextItem) => ReactNode
   /** Host renderer for inline AI mentions `@marker:id` (mirror of
    *  `renderEntityCard`). Forwarded verbatim to every message's
    *  ChatMessageEnhanced; returns a self-fetching chip per entity type. */
@@ -408,13 +423,22 @@ export interface ChatInputRef {
    *  context item / closes the picker so the `@query` scaffolding doesn't get
    *  sent as literal text. No-op when no mention token is active. */
   removeMentionTrigger: () => void
-  /** Commit a SINGLE-SELECT mention: replace the trailing `@query` being typed
-   *  with the literal `@<type>:<id>` token (`token` = `"<type>:<id>"`, plus a
-   *  trailing space) and strip any previously committed token so only one
-   *  mention reference lives in the draft. Used by the composer's `@`-mention
-   *  flow so the picked entity stays visible in the input AND rides out in the
-   *  context — deleting the token text removes it from context. */
-  commitMention: (token: string) => void
+  /** Commit a mention: replace the trailing `@query` being typed with the
+   *  literal `@<type>:<id>` token (`token` = `"<type>:<id>"`, plus a trailing
+   *  space). MULTIPLE mentions coexist — prior committed tokens are left in
+   *  place. The optional `meta` gives the inline chip its display name + icon
+   *  (the contenteditable renders the token as a chip); without it the chip
+   *  falls back to the id. Used by the composer's `@`-mention flow so the picked
+   *  entity rides out in the context — deleting the chip removes it from context. */
+  commitMention: (token: string, meta?: MentionMeta) => void
+}
+
+/** Display metadata for an inline mention chip rendered inside the composer. */
+export interface MentionMeta {
+  /** Resolved entity name shown in the chip (e.g. `'ELK-PROD-07'`). */
+  label: string
+  /** Optional lead icon (entity-type glyph). */
+  icon?: ReactNode
 }
 
 // ========== Chat Typing Indicator Props ==========

package/src/components/features/index.ts

@@ -48,6 +48,7 @@ export * from './social-links-manager'
 export * from './start-with-openframe-button'
 export * from './status-filter-component'
 export * from './tags-selector'
+export * from './warning-block'
 // Unified video primitives — single source of truth across all platforms.
 // `<Video>` replaces the deleted `<VideoPlayer>` + `<YouTubeEmbed>` pair;
 // `<EntityVideoSection>` + `<VideoBitesDisplay>` are the public detail-page

package/src/components/features/paths-display.tsx

@@ -39,6 +39,13 @@ export interface PathsDisplayProps {
    * Size of the copy icon (default: 'w-6 h-6')
    */
   copyIconSize?: string
+
+  /**
+   * Optional icon rendered at the start of every row, before the path text.
+   * Useful for showing a platform logo next to a command (e.g. the Windows
+   * logo beside "Run PowerShell as Local Administrator").
+   */
+  leadingIcon?: React.ReactNode
 }
 
 /**
@@ -77,7 +84,8 @@ export function PathsDisplay({
   description,
   className,
   showCopyButtons = true,
-  copyIconSize = 'w-6 h-6'
+  copyIconSize = 'w-6 h-6',
+  leadingIcon
 }: PathsDisplayProps) {
   if (!paths || paths.length === 0) {
     return null
@@ -101,6 +109,9 @@ export function PathsDisplay({
             key={path}
             className="flex items-center gap-4 p-4 border-b border-ods-border last:border-b-0"
           >
+            {leadingIcon && (
+              <span className="shrink-0 text-ods-text-primary">{leadingIcon}</span>
+            )}
             <span className="flex-1 min-w-0 text-h4 text-ods-text-primary truncate">
               {path}
             </span>
@@ -152,3 +163,23 @@ export type OpenFramePathsPlatform = keyof typeof OPENFRAME_PATHS
 export function getOpenFramePaths(platform: OpenFramePathsPlatform): string[] {
   return [...OPENFRAME_PATHS[platform]]
 }
+
+/**
+ * Doctor command per platform. Run to diagnose installation issues and repair
+ * the agent (works even if the agent didn't install correctly).
+ */
+export const OPENFRAME_DOCTOR_COMMANDS: Record<OpenFramePathsPlatform, string> = {
+  // PowerShell: Invoke-WebRequest / .\openframe-client.exe, mirroring the
+  // Windows install command pattern.
+  windows:
+    "Set-Location ~; Invoke-WebRequest -Uri 'github.com/openframe-client' -OutFile 'openframe-client.exe'; .\\openframe-client.exe doctor",
+  darwin: 'cd ~; wget github.com/openframe-client; openframe-client doctor',
+  linux: 'cd ~; wget github.com/openframe-client; openframe-client doctor'
+} as const
+
+/**
+ * Get the OpenFrame doctor command for a specific platform
+ */
+export function getOpenFrameDoctorCommand(platform: OpenFramePathsPlatform): string {
+  return OPENFRAME_DOCTOR_COMMANDS[platform]
+}

package/src/components/features/warning-block.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { AlertTriangle } from 'lucide-react'
+import React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface WarningBlockProps {
+  /** Text rendered inside the highlighted warning banner header. */
+  title: React.ReactNode
+  /**
+   * Icon shown at the start of the banner. Defaults to a triangle alert icon.
+   * Pass `null` to hide the icon entirely.
+   */
+  icon?: React.ReactNode
+  /**
+   * Body content rendered below the banner — description paragraphs, one or more
+   * `PathsDisplay` lists, command rows, etc. Fully composable so a single block
+   * can mix text and multiple path groups (see the New Device warning blocks).
+   */
+  children?: React.ReactNode
+  /** Extra classes for the outer card container. */
+  className?: string
+}
+
+const DEFAULT_ICON = <AlertTriangle className="h-6 w-6" />
+
+/**
+ * WarningBlock - a card with a highlighted "attention / warning" banner header
+ * followed by arbitrary body content.
+ *
+ * The banner reproduces the ODS warning callout (warning color on a muted
+ * warning background). Body content is fully composable: pass description
+ * paragraphs, one or more `PathsDisplay` lists, command rows, etc. as children.
+ *
+ * Spacing follows the ODS scale: card padding 16px / gap 12px, banner padding
+ * 12px / gap 16px. Typography uses `text-h3`, which is responsive (14px on
+ * mobile, 18px from `md` up) and bold by design-token default.
+ */
+export function WarningBlock({ title, icon = DEFAULT_ICON, children, className }: WarningBlockProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-3 rounded-[6px] border border-ods-border bg-ods-card p-4',
+        className
+      )}
+    >
+      <div className="flex items-start gap-4 overflow-hidden rounded-[6px] bg-ods-warning-secondary p-3 text-ods-warning">
+        {icon != null && <span className="shrink-0">{icon}</span>}
+        <p className="min-w-0 flex-1 text-h3">{title}</p>
+      </div>
+      {children}
+    </div>
+  )
+}

package/src/stories/WarningBlock.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { OSTypeIcon } from '../components/features/os-type-badge';
+import { OPENFRAME_DOCTOR_COMMANDS, PathsDisplay } from '../components/features/paths-display';
+import { WarningBlock } from '../components/features/warning-block';
+
+const meta = {
+  title: 'Features/WarningBlock',
+  component: WarningBlock,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A card with a highlighted "attention / warning" banner header followed by composable body content. Body is passed as children, so a single block can mix description paragraphs with one or more `PathsDisplay` lists (see the New Device warning blocks). Typography is responsive via ODS tokens (14px on mobile, 18px from `md` up).',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 720 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof WarningBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const copyPath = (path: string) => {
+  if (typeof navigator !== 'undefined' && navigator.clipboard) {
+    void navigator.clipboard.writeText(path);
+  }
+};
+
+/** Minimal usage — a banner title with a single description paragraph. */
+export const Default: Story = {
+  args: {
+    title: 'Administrator privileges are required to install the OpenFrame agent.',
+    children: (
+      <p className="text-h4 text-ods-text-primary">
+        Run the command with the appropriate permissions for your platform.
+      </p>
+    ),
+  },
+};
+
+/**
+ * Antivirus warning from the New Device screen — description, a `PathsDisplay`
+ * list of exclusion folders, then a closing paragraph.
+ */
+export const AntivirusWarning: Story = {
+  args: {
+    title: 'Your antivirus may block OpenFrame installation. This is a false positive.',
+    children: (
+      <>
+        <PathsDisplay
+          title="If blocked, add these folders to your antivirus exclusions list:"
+          paths={['C:\\Program Files\\OpenFrame\\', 'C:\\Users\\[Username]\\AppData\\Local\\OpenFrame\\']}
+          onCopyPath={copyPath}
+        />
+        <p className="text-h4 text-ods-text-primary">
+          Or temporarily disable protection during installation. OpenFrame is safe open-source software.
+          Blocks happen because new software needs time to build reputation with security vendors.
+        </p>
+      </>
+    ),
+  },
+};
+
+/**
+ * Doctor mode warning from the New Device screen — description plus a single
+ * copyable command row.
+ */
+export const DoctorMode: Story = {
+  args: {
+    title: 'Device not appearing or stuck pending?',
+    children: (
+      <>
+        <p className="text-h4 text-ods-text-primary">
+          Run the doctor command to diagnose installation issues and repair the agent. It works even if
+          the agent didn&apos;t install correctly.
+        </p>
+        <PathsDisplay
+          paths={[OPENFRAME_DOCTOR_COMMANDS.windows]}
+          onCopyPath={copyPath}
+        />
+      </>
+    ),
+  },
+};
+
+/**
+ * Administrator privileges warning — a platform-specific instruction row (no
+ * copy button) framed by description paragraphs.
+ */
+export const AdministratorPrivileges: Story = {
+  args: {
+    title: 'Administrator privileges are required to install the OpenFrame agent.',
+    children: (
+      <>
+        <p className="text-h4 text-ods-text-primary">
+          Run the command with the appropriate permissions for your platform:
+        </p>
+        <PathsDisplay
+          paths={['Run PowerShell as Local Administrator']}
+          showCopyButtons={false}
+          leadingIcon={<OSTypeIcon osType="windows" size="w-6 h-6" />}
+        />
+        <p className="text-h4 text-ods-text-primary">
+          Without elevated privileges, the installation will fail silently. Right-click PowerShell and
+          select &quot;Run as administrator,&quot; or contact your IT admin if you don&apos;t have local
+          admin rights.
+        </p>
+      </>
+    ),
+  },
+};
+
+/** All three New Device warning blocks stacked, matching the Figma layout. */
+export const NewDeviceBlocks: Story = {
+  args: { title: '' },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <WarningBlock title="Administrator privileges are required to install the OpenFrame agent.">
+        <p className="text-h4 text-ods-text-primary">
+          Run the command with the appropriate permissions for your platform:
+        </p>
+        <PathsDisplay
+          paths={['Run PowerShell as Local Administrator']}
+          showCopyButtons={false}
+          leadingIcon={<OSTypeIcon osType="windows" size="w-6 h-6" />}
+        />
+        <p className="text-h4 text-ods-text-primary">
+          Without elevated privileges, the installation will fail silently. Right-click PowerShell and
+          select &quot;Run as administrator,&quot; or contact your IT admin if you don&apos;t have local
+          admin rights.
+        </p>
+      </WarningBlock>
+
+      <WarningBlock title="Your antivirus may block OpenFrame installation. This is a false positive.">
+        <PathsDisplay
+          title="If blocked, add these folders to your antivirus exclusions list:"
+          paths={['C:\\Program Files\\OpenFrame\\', 'C:\\Users\\[Username]\\AppData\\Local\\OpenFrame\\']}
+          onCopyPath={copyPath}
+        />
+        <p className="text-h4 text-ods-text-primary">
+          Or temporarily disable protection during installation. OpenFrame is safe open-source software.
+          Blocks happen because new software needs time to build reputation with security vendors.
+        </p>
+      </WarningBlock>
+
+      <WarningBlock title="Device not appearing or stuck pending?">
+        <p className="text-h4 text-ods-text-primary">
+          Run the doctor command to diagnose installation issues and repair the agent. It works even if
+          the agent didn&apos;t install correctly.
+        </p>
+        <PathsDisplay
+          paths={[OPENFRAME_DOCTOR_COMMANDS.windows]}
+          onCopyPath={copyPath}
+        />
+      </WarningBlock>
+    </div>
+  ),
+};