ompchamber 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/components/common/file-icon/index.tsx

@@ -9,6 +9,7 @@ import {
   FolderOpen,
 } from 'lucide-preact';
 import { BRAND_ICONS, BRAND_VIEWBOX, type BrandIconName } from '@/client/components/common/file-icon/brand-paths';
+import { getImageMimeType } from '@/shared/lib/fs/file-kind';
 
 interface FileIconProps {
   name: string;
@@ -110,7 +111,9 @@ export function FileIcon({ name, isFolder, isOpen, size = 14, className = '' }:
   if (lowerName.endsWith('.md') || lowerName.endsWith('.txt')) {
     return <FileText size={size} className={`text-ink/70 ${className}`} />;
   }
-  if (lowerName.endsWith('.png') || lowerName.endsWith('.jpg') || lowerName.endsWith('.jpeg') || lowerName.endsWith('.svg') || lowerName.endsWith('.ico') || lowerName.endsWith('.webp')) {
+  // SVG is text the editor edits as code, but it is still a picture to the eye,
+  // so the icon stays the image glyph for it.
+  if (getImageMimeType(lowerName) || lowerName.endsWith('.svg')) {
     return <FileImage size={size} color="#c084fc" className={className} />;
   }
   if (lowerName.endsWith('.sh') || lowerName.endsWith('.bash')) {

package/src/client/components/common/image-viewer/index.tsx

@@ -0,0 +1,224 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The picture surface used wherever a file is opened and turns out to be an
+ * image — the desktop editor panel, the phone's full-screen editor, and the
+ * chat `read` tool card. An image has no text, so this replaces the code
+ * surface entirely: an `<img>` against the raw-byte route, a checker backdrop
+ * for transparency, and zoom/pan that mirror the diagram viewer so the two
+ * full-size viewers behave the same way.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { TargetedPointerEvent, TargetedWheelEvent } from 'preact';
+import { AlertTriangle, Loader2 } from 'lucide-preact';
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 16;
+/** Zoom step for the buttons and the +/- keys. */
+const ZOOM_STEP = 1.4;
+/** Wheel `deltaY` → scale exponent, matching the diagram viewer's feel. */
+const WHEEL_SENSITIVITY = 0.0015;
+/** Pixels kept clear around a fitted picture. */
+const FIT_MARGIN = 48;
+
+interface ImageViewerProps {
+  /** Raw-byte URL; a different URL is a different picture. */
+  src: string;
+  name: string;
+  className?: string;
+}
+
+interface Drag {
+  pointerId: number;
+  x: number;
+  y: number;
+}
+
+/**
+ * The stateful surface, keyed on `src` by `ImageViewer` — remounting on a new
+ * URL is what guarantees a refresh cannot inherit the previous picture's fit,
+ * pan offset, or decode error.
+ */
+function ImageSurface({ src, name, className = '' }: ImageViewerProps) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const dragRef = useRef<Drag | null>(null);
+
+  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /** Read the decoded size off the element; false while it is not decodable yet. */
+  const measure = useCallback((): boolean => {
+    const image = imageRef.current;
+    if (!image || !image.complete || image.naturalWidth === 0) return false;
+    setNatural({ width: image.naturalWidth, height: image.naturalHeight });
+    return true;
+  }, []);
+
+  // A cached picture can be complete before its `load` handler is attached, so
+  // the size is read once on mount as well — otherwise a re-opened image sat
+  // at 100% with no dimensions reported and Fit had nothing to fit to.
+  useEffect(() => {
+    measure();
+  }, [measure]);
+
+  /** Scale that fits the whole picture without upscaling it past 1. */
+  const fitToView = useCallback(() => {
+    const image = imageRef.current;
+    const stage = stageRef.current?.getBoundingClientRect();
+    const width = image?.naturalWidth ?? 0;
+    const height = image?.naturalHeight ?? 0;
+    if (!stage || !width || !height) return;
+    setScale(
+      Math.min(
+        1,
+        Math.max(MIN_SCALE, (stage.width - FIT_MARGIN) / width, (stage.height - FIT_MARGIN) / height),
+      ),
+    );
+    setOffset({ x: 0, y: 0 });
+  }, []);
+
+  // Fit once per picture. Re-measuring on every render would fight an
+  // in-progress zoom, and `natural` only changes for a new decode.
+  useEffect(() => {
+    if (natural) fitToView();
+  }, [natural, fitToView]);
+
+  const zoomBy = useCallback((factor: number) => {
+    setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current * factor)));
+  }, []);
+
+  const handleWheel = useCallback(
+    (event: TargetedWheelEvent<HTMLDivElement>) => {
+      // Without this the editor panel scrolls while zooming.
+      event.preventDefault();
+      zoomBy(Math.exp(-event.deltaY * WHEEL_SENSITIVITY));
+    },
+    [zoomBy],
+  );
+
+  const handlePointerDown = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || !natural) return;
+    dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  }, [natural]);
+
+  const handlePointerMove = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const dx = event.clientX - drag.x;
+    const dy = event.clientY - drag.y;
+    drag.x = event.clientX;
+    drag.y = event.clientY;
+    setOffset((current) => ({ x: current.x + dx, y: current.y + dy }));
+  }, []);
+
+  const endDrag = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+  }, []);
+
+  const handleDoubleClick = useCallback(() => {
+    if (Math.abs(scale - 1) < 0.01) fitToView();
+    else {
+      setScale(1);
+      setOffset({ x: 0, y: 0 });
+    }
+  }, [scale, fitToView]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== '+' && event.key !== '=' && event.key !== '-' && event.key !== '_' && event.key !== '0') return;
+      // The stage owns these keys only while it has focus; a window-level
+      // listener would steal `-`/`0` from the composer and the file search box.
+      const target = event.target as HTMLElement | null;
+      if (!target || !stageRef.current?.contains(target)) return;
+      event.preventDefault();
+      if (event.key === '0') fitToView();
+      else if (event.key === '+' || event.key === '=') zoomBy(ZOOM_STEP);
+      else zoomBy(1 / ZOOM_STEP);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [zoomBy, fitToView]);
+
+  const percent = Math.round(scale * 100);
+  const dimensions = natural ? `${natural.width} × ${natural.height} px` : '';
+
+  return (
+    <div className={`relative flex h-full w-full flex-col bg-paper ${className}`}>
+      <div
+        ref={stageRef}
+        tabIndex={-1}
+        onWheel={handleWheel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onDblClick={handleDoubleClick}
+        className={`image-stage relative flex-1 overflow-hidden outline-none ${dragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+      >
+        {error ? (
+          <div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
+            <AlertTriangle size={20} className="text-error" />
+            <span className="font-sans text-xs text-error">Could not read {name}</span>
+            <span className="break-all font-mono text-[11px] text-ink/50">{error}</span>
+          </div>
+        ) : (
+          <>
+            {!natural && (
+              <div className="absolute inset-0 flex items-center justify-center gap-2 text-xs text-ink/40">
+                <Loader2 size={14} className="animate-spin" />
+                <span>Loading image…</span>
+              </div>
+            )}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <img
+                ref={imageRef}
+                src={src}
+                alt={name}
+                draggable={false}
+                onLoad={measure}
+                onError={() => setError('The file could not be decoded as an image.')}
+                className="image-canvas max-h-none max-w-none select-none"
+                style={{
+                  transform: `translate3d(${offset.x}px, ${offset.y}px, 0) scale(${scale})`,
+                  visibility: natural ? 'visible' : 'hidden',
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="flex flex-shrink-0 items-center justify-between border-t border-ink/10 bg-canvas px-3 py-1.5 font-mono text-[10px] text-ink/50">
+        <span>{dimensions}</span>
+        <div className="flex items-center gap-3">
+          <button type="button" onClick={() => zoomBy(1 / ZOOM_STEP)} className="hover:text-ink" title="Zoom out (-)">
+            −
+          </button>
+          <span className="w-10 text-center tabular-nums">{percent}%</span>
+          <button type="button" onClick={() => zoomBy(ZOOM_STEP)} className="hover:text-ink" title="Zoom in (+)">
+            +
+          </button>
+          <button type="button" onClick={fitToView} className="hover:text-ink" title="Fit to view (0)">
+            Fit
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ImageViewer(props: ImageViewerProps) {
+  return <ImageSurface key={props.src} {...props} />;
+}

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -2,6 +2,7 @@ import { useState } from 'preact/hooks';
 import { AlertTriangle, Loader2 } from 'lucide-preact';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { CodeSurface } from '@/client/components/common/code-surface';
+import { ImageViewer } from '@/client/components/common/image-viewer';
 import { EditorHeader } from '@/client/components/mobile/mobile-right-sidebar/Header';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { useFileEditor } from '@/client/hooks/editor/use-file-editor';
@@ -48,6 +49,7 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         isPreview={isPreview}
         wordWrap={wordWrap}
         copied={editor.copied}
+        isImage={editor.isImage}
         onClose={onClose}
         onTogglePreview={() => setIsPreview(!isPreview)}
         onToggleWrap={() => setWordWrap(!wordWrap)}
@@ -57,46 +59,52 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         onDownload={editor.download}
       />
 
-      {/* Editor Content Area - Desktop styled: bg-paper text-ink */}
-      <div onScroll={handleScroll} className={`flex-1 min-h-0 overflow-auto relative bg-paper text-ink select-text ${scrollbarFadeClass(isScrolling)}`}>
-        {editor.isLoading ? (
-          <div className="flex items-center justify-center h-full text-ink/40 text-xs gap-2">
-            <Loader2 size={14} className="animate-spin" />
-            <span>Loading file content...</span>
-          </div>
-        ) : editor.loadError ? (
-          <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
-            <AlertTriangle size={20} className="text-error" />
-            <span className="text-xs text-error font-sans">Could not read {file.name}</span>
-            <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
-          </div>
-        ) : isMd && isPreview ? (
-          /* Markdown Preview Mode */
-          <div className="p-4 bg-paper text-ink min-h-full font-sans prose prose-sm max-w-none">
-            <MarkdownRenderer content={content} />
-          </div>
-        ) : (
-          /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
-          <CodeSurface
-            value={content}
-            onValueChange={editor.onChange}
-            language={lang}
-            wordWrap={wordWrap}
-            rootClassName="flex min-h-full bg-paper"
-            gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
-            editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
-            editorClassName="focus:outline-none"
-            editorStyle={{
-              fontFamily: 'monospace',
-              fontSize: `${fontSize}px`,
-              lineHeight: '20px',
-              backgroundColor: 'transparent',
-              minHeight: '100%',
-              color: 'var(--theme-ink)',
-            }}
-          />
-        )}
-      </div>
+      {/* Editor Content Area - Desktop styled: bg-paper text-ink. An image owns
+          its own pan/zoom, so it replaces the scrolling text container rather
+          than living inside it. */}
+      {editor.isImage && editor.imageUrl ? (
+        <ImageViewer src={editor.imageUrl} name={file.name} className="flex-1 min-h-0" />
+      ) : (
+        <div onScroll={handleScroll} className={`flex-1 min-h-0 overflow-auto relative bg-paper text-ink select-text ${scrollbarFadeClass(isScrolling)}`}>
+          {editor.isLoading ? (
+            <div className="flex items-center justify-center h-full text-ink/40 text-xs gap-2">
+              <Loader2 size={14} className="animate-spin" />
+              <span>Loading file content...</span>
+            </div>
+          ) : editor.loadError ? (
+            <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
+              <AlertTriangle size={20} className="text-error" />
+              <span className="text-xs text-error font-sans">Could not read {file.name}</span>
+              <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
+            </div>
+          ) : isMd && isPreview ? (
+            /* Markdown Preview Mode */
+            <div className="p-4 bg-paper text-ink min-h-full font-sans prose prose-sm max-w-none">
+              <MarkdownRenderer content={content} />
+            </div>
+          ) : (
+            /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
+            <CodeSurface
+              value={content}
+              onValueChange={editor.onChange}
+              language={lang}
+              wordWrap={wordWrap}
+              rootClassName="flex min-h-full bg-paper"
+              gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
+              editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
+              editorClassName="focus:outline-none"
+              editorStyle={{
+                fontFamily: 'monospace',
+                fontSize: `${fontSize}px`,
+                lineHeight: '20px',
+                backgroundColor: 'transparent',
+                minHeight: '100%',
+                color: 'var(--theme-ink)',
+              }}
+            />
+          )}
+        </div>
+      )}
 
       {/* Bottom Status Bar - Desktop styled: bg-canvas border-t border-ink/10 */}
       <footer
@@ -109,9 +117,15 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         }}
       >
         <div className="flex items-center space-x-3">
-          <span>{linesCount} lines</span>
-          <span>{content.length} chars</span>
-          <span className="uppercase">{lang}</span>
+          {editor.isImage ? (
+            <span className="uppercase">Image</span>
+          ) : (
+            <>
+              <span>{linesCount} lines</span>
+              <span>{content.length} chars</span>
+              <span className="uppercase">{lang}</span>
+            </>
+          )}
         </div>
         <div className="flex items-center space-x-2">
           {editor.saveStatus === 'saving' && (

package/src/client/components/mobile/mobile-right-sidebar/Header.tsx

@@ -8,6 +8,8 @@ interface EditorHeaderProps {
   isPreview: boolean;
   wordWrap: boolean;
   copied: boolean;
+  /** Raster image: wrap and font zoom are text-only, so both are hidden. */
+  isImage?: boolean;
   onClose: () => void;
   onTogglePreview: () => void;
   onToggleWrap: () => void;
@@ -24,6 +26,7 @@ export function EditorHeader({
   isPreview,
   wordWrap,
   copied,
+  isImage = false,
   onClose,
   onTogglePreview,
   onToggleWrap,
@@ -71,32 +74,36 @@ export function EditorHeader({
           </button>
         )}
 
-        <button
-          type="button"
-          onClick={onToggleWrap}
-          className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${wordWrap ? 'text-ink' : ''}`}
-          title="Toggle word wrap"
-        >
-          <WrapText size={15} />
-        </button>
+        {!isImage && (
+          <>
+            <button
+              type="button"
+              onClick={onToggleWrap}
+              className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${wordWrap ? 'text-ink' : ''}`}
+              title="Toggle word wrap"
+            >
+              <WrapText size={15} />
+            </button>
 
-        <button
-          type="button"
-          onClick={onZoomOut}
-          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
-          title="Decrease font size"
-        >
-          <ZoomOut size={15} />
-        </button>
+            <button
+              type="button"
+              onClick={onZoomOut}
+              className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+              title="Decrease font size"
+            >
+              <ZoomOut size={15} />
+            </button>
 
-        <button
-          type="button"
-          onClick={onZoomIn}
-          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
-          title="Increase font size"
-        >
-          <ZoomIn size={15} />
-        </button>
+            <button
+              type="button"
+              onClick={onZoomIn}
+              className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+              title="Increase font size"
+            >
+              <ZoomIn size={15} />
+            </button>
+          </>
+        )}
 
         <button
           type="button"

package/src/client/components/settings/Modal.tsx

@@ -40,6 +40,7 @@ const DEFAULT_SETTINGS: SettingsState = {
   editorFont: 'JetBrains Mono',
   streamResponses: true,
   streamTransport: 'websocket',
+  autoSessionTitle: true,
   expandedThinking: true,
   detailedToolCalls: false,
   notificationsEnabled: true,

package/src/client/components/settings/categories/ChatSettings.tsx

@@ -1,6 +1,7 @@
 import type { SettingsState } from '@/shared/types';
 import { ChatFollowUpSection } from '@/client/components/settings/categories/chat-settings/FollowUpSection';
 import { ChatKeybindingsSection } from '@/client/components/settings/categories/chat-settings/KeybindingsSection';
+import { ChatTitleSection } from '@/client/components/settings/categories/chat-settings/TitleSection';
 import { ChatTransportSection } from '@/client/components/settings/categories/chat-settings/TransportSection';
 
 interface ChatSettingsProps {
@@ -14,10 +15,13 @@ export function ChatSettings({ settings, onUpdate }: ChatSettingsProps) {
       {/* 1. Streaming Transport (WebSocket vs SSE) */}
       <ChatTransportSection settings={settings} onUpdate={onUpdate} />
 
-      {/* 2. Follow-up Behavior (Interactive Selector Cards) */}
+      {/* 2. Session Titles (automatic generation) */}
+      <ChatTitleSection settings={settings} onUpdate={onUpdate} />
+
+      {/* 3. Follow-up Behavior (Interactive Selector Cards) */}
       <ChatFollowUpSection settings={settings} onUpdate={onUpdate} />
 
-      {/* 3. Keyboard Shortcuts Configurator */}
+      {/* 4. Keyboard Shortcuts Configurator */}
       <ChatKeybindingsSection settings={settings} onUpdate={onUpdate} />
     </div>
   );

package/src/client/components/settings/categories/chat-settings/TitleSection.tsx

@@ -0,0 +1,99 @@
+import { Check, Sparkles, Type } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+
+interface ChatTitleSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+const OPTIONS: Array<{
+  enabled: boolean;
+  label: string;
+  badge: string;
+  icon: typeof Sparkles;
+  description: string;
+  note: string;
+}> = [
+  {
+    enabled: true,
+    label: 'Generate Automatically',
+    badge: 'Default',
+    icon: Sparkles,
+    description:
+      'After the first run settles, the session is named from the conversation using omp\'s own tiny title model. Sessions stop showing "New Session - <timestamp>" in the sidebar.',
+    note: 'One small model call per session',
+  },
+  {
+    enabled: false,
+    label: 'Manual Only',
+    badge: 'Opt-out',
+    icon: Type,
+    description:
+      'Sessions keep their timestamp placeholder until you rename them from the sidebar. Choose this when every title should be deliberate, or to avoid the extra model call.',
+    note: 'No background model calls',
+  },
+];
+
+export function ChatTitleSection({ settings, onUpdate }: ChatTitleSectionProps) {
+  const active = settings.autoSessionTitle ?? true;
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold text-ink">Session Titles</h4>
+        <p className="text-[11px] text-ink/60 mt-0.5">
+          How a session gets its display name. A name you set yourself is never replaced.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {OPTIONS.map(({ enabled, label, badge, icon: Icon, description, note }) => {
+          const selected = active === enabled;
+          const select = () => onUpdate({ autoSessionTitle: enabled });
+          return (
+            <div
+              key={label}
+              onClick={select}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => e.key === 'Enter' && select()}
+              className={`p-3.5 rounded-lg border text-left transition-all cursor-pointer flex flex-col justify-between select-none ${
+                selected
+                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20 shadow-xs'
+                  : 'border-ink/15 bg-paper hover:border-ink/30 hover:bg-ink/[0.02]'
+              }`}
+            >
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`w-7 h-7 rounded-md flex items-center justify-center ${
+                        selected ? 'bg-ink text-paper' : 'bg-ink/5 text-ink/70'
+                      }`}
+                    >
+                      <Icon size={15} />
+                    </div>
+                    <span className="font-semibold text-xs text-ink">{label}</span>
+                  </div>
+                  <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70 font-medium">
+                    {badge}
+                  </span>
+                </div>
+                <p className="text-[11px] text-ink/70 leading-relaxed">{description}</p>
+              </div>
+
+              <div className="mt-3 pt-2.5 border-t border-ink/10 flex items-center justify-between text-[11px]">
+                <span className="text-ink/50">{note}</span>
+                {selected && (
+                  <span className="flex items-center gap-1 text-ink font-medium">
+                    <Check size={12} /> Active
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}