@flame0510/project-aether 1.1.9

package/app/components/DashboardHeader.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { Costs } from '@/lib/types';
+import { formatUsd } from '@/lib/utils/format';
+import { useScreenshot } from '@/lib/hooks/useScreenshot';
+import { useRev4aTimezone } from '@/lib/hooks/useRev4aTimezone';
+import { formatDateTimeInTimezone } from '@/lib/timezone';
+import { Skeleton } from './Skeleton';
+
+interface DashboardHeaderProps {
+  costs: Costs;
+  loading?: boolean;
+  hideLogo?: boolean;
+  title?: string;
+}
+
+const CameraIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+    <circle cx="12" cy="13" r="4"/>
+  </svg>
+);
+
+export default function DashboardHeader({ costs, loading: dataLoading = false, hideLogo = false, title }: DashboardHeaderProps) {
+  const [clock, setClock] = useState('');
+  const { loading, takeScreenshot } = useScreenshot();
+  const timezone = useRev4aTimezone();
+
+  useEffect(() => {
+    const tick = () =>
+      setClock(formatDateTimeInTimezone(Date.now(), {
+        day: '2-digit', month: '2-digit', year: 'numeric',
+        hour: '2-digit', minute: '2-digit', second: '2-digit',
+        hour12: false,
+      }, timezone));
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [timezone]);
+
+  return (
+    <header className="header">
+      <div className="logo">
+        {!hideLogo && <img src="/rev4a-logo.svg" alt="Rev4a" style={{ width: 22, height: 22, objectFit: 'contain' }} />}
+        <span>{title ?? 'REV4A'}</span>
+      </div>
+      <div className="meta">
+        <div suppressHydrationWarning>
+          <span className="meta-value" suppressHydrationWarning>{clock}</span>
+        </div>
+        <div>
+          <span className="meta-label">TODAY COST</span>
+          <span className="meta-value cost">{dataLoading ? <Skeleton className="skeleton--text" style={{ width: 58 }} /> : formatUsd(costs.today)}</span>
+        </div>
+        <div>
+          <span className="meta-label">ALL TIME</span>
+          <span className="meta-value cost">{dataLoading ? <Skeleton className="skeleton--text" style={{ width: 72 }} /> : formatUsd(costs.allTime)}</span>
+        </div>
+        <button
+          type="button"
+          className="agent-btn screenshot-btn-desktop"
+          onClick={takeScreenshot}
+          disabled={loading}
+          title="Screenshot"
+          style={{ padding: '4px 8px' }}
+        >
+          {loading ? '…' : <CameraIcon />}
+        </button>
+      </div>
+    </header>
+  );
+}

package/app/components/DashboardLayout.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useResponsive } from '../design-system';
+import type { Costs } from '@/lib/types';
+import { useDashboard } from '@/lib/hooks/useDashboard';
+import { useScreenshot } from '@/lib/hooks/useScreenshot';
+import DashboardHeader from './DashboardHeader';
+import SystemCockpit from './SystemCockpit';
+import SessionDrawer from './SessionDrawer';
+
+interface DashboardLayoutProps {
+  initialCosts?: Partial<Costs>;
+}
+
+export default function DashboardLayout({ initialCosts }: DashboardLayoutProps) {
+  const {
+    sessions,
+    events,
+    costs,
+    filter,
+    visibleEvents,
+    selectedSessionId,
+    selectSession,
+    hasSessionsLoaded,
+    hasCostLoaded,
+  } = useDashboard({ initialCosts });
+
+  const isMobile = useResponsive('md');
+  const { loading: screenshotLoading, takeScreenshot } = useScreenshot();
+
+  return (
+    <main className="shell">
+      <DashboardHeader costs={costs} loading={!hasCostLoaded} hideLogo title="DASHBOARD" />
+      {isMobile && (
+        <div style={{ display: 'flex', gap: 8, padding: '8px 12px', borderBottom: '1px solid var(--border)', background: 'var(--bg2)', justifyContent: 'flex-end' }}>
+          <button
+            type="button"
+            onClick={takeScreenshot}
+            disabled={screenshotLoading}
+            title="Screenshot"
+            style={{
+              padding: '6px 10px',
+              border: '1px solid var(--border)',
+              background: 'transparent',
+              color: 'var(--text-dim)',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+              <circle cx="12" cy="13" r="4"/>
+            </svg>
+          </button>
+        </div>
+      )}
+
+      <section className="layout layout--cockpit">
+        <SystemCockpit
+          sessions={sessions}
+          events={events}
+          costs={costs}
+          filter={filter}
+          visibleEvents={visibleEvents}
+          loading={!hasSessionsLoaded}
+        />
+      </section>
+
+      <SessionDrawer
+        sessionId={selectedSessionId}
+        onClose={() => selectSession(null)}
+      />
+    </main>
+  );
+}

package/app/components/DashboardToolbar.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { FilterConfig, Period } from '@/lib/types';
+import { PERIODS } from '@/lib/types';
+
+interface DashboardToolbarProps {
+  filter: FilterConfig;
+  onChange: (patch: Partial<FilterConfig>) => void;
+  agents?: string[];
+}
+
+export default function DashboardToolbar({ filter, onChange, agents = ['all'] }: DashboardToolbarProps) {
+  return (
+    <section className="toolbar">
+      <span className="toolbar-label">AGENTI</span>
+
+      {agents.map((name) => (
+        <button
+          key={name}
+          type="button"
+          className={`agent-btn ${filter.agent === name ? 'active' : ''}`}
+          onClick={() => onChange({ agent: name })}
+        >
+          {name}
+        </button>
+      ))}
+
+      <span className="toolbar-sep">|</span>
+
+      <button
+        type="button"
+        className={`agent-btn ${filter.showOnlyActive ? 'active' : ''}`}
+        onClick={() => onChange({ showOnlyActive: !filter.showOnlyActive })}
+      >
+        solo attivi
+      </button>
+
+      <button
+        type="button"
+        className={`agent-btn ${!filter.showCron ? 'active' : ''}`}
+        onClick={() => onChange({ showCron: !filter.showCron })}
+      >
+        no cron
+      </button>
+
+      <span className="toolbar-sep">|</span>
+      <span className="toolbar-label">PERIODO</span>
+
+      {PERIODS.map((p) => (
+        <button
+          key={p}
+          type="button"
+          className={`agent-btn ${filter.period === p ? 'active' : ''}`}
+          onClick={() => onChange({ period: p })}
+        >
+          {p}
+        </button>
+      ))}
+    </section>
+  );
+}

package/app/components/FloatingActions.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import PulseChat from './PulseChat';
+import WizardButton from './WizardButton';
+
+/**
+ * FloatingActions
+ *
+ * Single container wrapping both floating buttons:
+ * - WizardButton (left)
+ * - PulseChat (right)
+ *
+ * Hidden on login, setup, and /wizard full-page.
+ */
+export default function FloatingActions() {
+  const pathname = usePathname();
+
+  if (pathname === '/login' || pathname === '/setup' || pathname === '/wizard') {
+    return null;
+  }
+
+  return (
+    <div className="floating-actions">
+      <div className="floating-actions__left">
+        <WizardButton />
+      </div>
+      <div className="floating-actions__right">
+        <PulseChat />
+      </div>
+    </div>
+  );
+}

package/app/components/Icons.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { SVGProps } from 'react';
+
+type IconProps = SVGProps<SVGSVGElement> & { size?: number };
+
+export function EyeIcon({ size = 20, ...props }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function EyeOffIcon({ size = 20, ...props }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
+  );
+}
+
+/** Shared wrapper so all section icons render with identical stroke styling. */
+function Svg({ size = 20, children, ...props }: IconProps & { children: React.ReactNode }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      {children}
+    </svg>
+  );
+}
+
+// PROPERTIES
+export function InfoIcon(p: IconProps) {
+  return <Svg {...p}><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></Svg>;
+}
+
+// CONFIG (openclaw.json)
+export function BracesIcon(p: IconProps) {
+  return <Svg {...p}><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1" /><path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1" /></Svg>;
+}
+
+// ACCESS TOKEN
+export function KeyIcon(p: IconProps) {
+  return <Svg {...p}><path d="m15.5 7.5 3 3L22 7l-3-3" /><path d="m21 2-9.6 9.6" /><circle cx="7.5" cy="15.5" r="5.5" /></Svg>;
+}
+
+// DANGER ZONE (delete)
+export function TrashIcon(p: IconProps) {
+  return <Svg {...p}><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></Svg>;
+}
+
+// ENV (AGENT_ / MODEL_)
+export function TerminalIcon(p: IconProps) {
+  return <Svg {...p}><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></Svg>;
+}
+
+// INTEGRATIONS
+export function LinkIcon(p: IconProps) {
+  return <Svg {...p}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></Svg>;
+}
+
+// BACKUP
+export function ArchiveIcon(p: IconProps) {
+  return <Svg {...p}><polyline points="21 8 21 21 3 21 3 8" /><rect x="1" y="3" width="22" height="5" /><line x1="10" y1="12" x2="14" y2="12" /></Svg>;
+}
+
+// RESTART
+export function RotateIcon(p: IconProps) {
+  return <Svg {...p}><polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" /></Svg>;
+}
+
+// RECREATE (rebuild from image)
+export function PackageIcon(p: IconProps) {
+  return <Svg {...p}><line x1="16.5" y1="9.4" x2="7.5" y2="4.21" /><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /><polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" /></Svg>;
+}

package/app/components/LineageGraphPage.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useResponsive } from '../design-system';
+import type { CSSProperties } from 'react';
+import type { Costs } from '@/lib/types';
+import { useDashboard } from '@/lib/hooks/useDashboard';
+import { useScreenshot } from '@/lib/hooks/useScreenshot';
+import DashboardHeader from './DashboardHeader';
+import DashboardToolbar from './DashboardToolbar';
+import LiveFeed from './LiveFeed';
+import CostBreakdown from './CostBreakdown';
+import SessionTopology, { type SessionTopologyHandle } from './SessionTopology';
+import SessionDrawer from './SessionDrawer';
+
+interface LineageGraphPageProps {
+  initialCosts?: Partial<Costs>;
+}
+
+export default function LineageGraphPage({ initialCosts }: LineageGraphPageProps) {
+  const {
+    costs,
+    filter,
+    selectedSessionId,
+    availableAgents,
+    visibleSessions,
+    visibleEvents,
+    setFilter,
+    selectSession,
+    hasSessionsLoaded,
+    hasCostLoaded,
+  } = useDashboard({ initialCosts });
+
+  const topologyRef = useRef<SessionTopologyHandle>(null);
+  const isMobile = useResponsive('md');
+  const { loading: screenshotLoading, takeScreenshot } = useScreenshot();
+  const [mobileTab, setMobileTab] = useState<'graph' | 'feed' | 'costs'>('graph');
+
+  const resetButtonStyle: CSSProperties = isMobile
+    ? { width: '100%', justifyContent: 'center', minHeight: 38 }
+    : { flexShrink: 0, minWidth: 138 };
+
+  return (
+    <main className="shell">
+      <DashboardHeader costs={costs} loading={!hasCostLoaded} hideLogo title="LINEAGE" />
+      <DashboardToolbar filter={filter} onChange={setFilter} agents={availableAgents} />
+
+      {isMobile && (
+        <div style={{ display: 'flex', gap: 8, padding: '8px 12px', borderBottom: '1px solid var(--border)', background: 'var(--bg2)' }}>
+          {[
+            { key: 'graph', label: 'GRAFO' },
+            { key: 'feed', label: 'FEED' },
+            { key: 'costs', label: 'COSTI' },
+          ].map((t) => (
+            <button
+              key={t.key}
+              onClick={() => setMobileTab(t.key as 'graph' | 'feed' | 'costs')}
+              style={{
+                fontSize: 10,
+                letterSpacing: '0.08em',
+                padding: '6px 10px',
+                border: '1px solid var(--border)',
+                background: mobileTab === t.key ? 'var(--bg3)' : 'transparent',
+                color: mobileTab === t.key ? 'var(--violet)' : 'var(--text-dim)',
+              }}
+            >
+              {t.label}
+            </button>
+          ))}
+          <button
+            type="button"
+            onClick={takeScreenshot}
+            disabled={screenshotLoading}
+            title="Screenshot"
+            style={{
+              marginLeft: 'auto',
+              padding: '6px 10px',
+              border: '1px solid var(--border)',
+              background: 'transparent',
+              color: 'var(--text-dim)',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+              <circle cx="12" cy="13" r="4"/>
+            </svg>
+          </button>
+        </div>
+      )}
+
+      <section className="layout" style={isMobile ? { display: 'block', height: 'calc(100vh - 150px)' } : undefined}>
+        {(!isMobile || mobileTab === 'graph') && (
+          <article className="panel graph-panel" style={isMobile ? { height: '100%', borderRight: 'none', padding: 16 } : { padding: 16 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12, gap: 12 }}>
+              <div style={{ color: 'var(--text-dim)', fontSize: 11 }}>
+                Lineage map of sessions, sub-agents and operational relationships.
+              </div>
+              <button
+                type="button"
+                className="agent-btn"
+                aria-label="Reimposta vista grafo"
+                onClick={() => topologyRef.current?.resetView()}
+                style={resetButtonStyle}
+              >
+                ⊙ Reimposta vista
+              </button>
+            </div>
+            {hasSessionsLoaded ? (
+              <SessionTopology
+                ref={topologyRef}
+                sessions={visibleSessions}
+                filter={filter.agent}
+                onNodeClick={selectSession}
+                emptyMessage={filter.showOnlyActive ? 'No active sessions in the selected period' : 'No sessions visible with current filters'}
+              />
+            ) : (
+              <div className="empty-state">
+                <span className="empty-state-icon">◎</span>
+                <span className="empty-state-msg">Loading lineage…</span>
+              </div>
+            )}
+          </article>
+        )}
+
+        {(!isMobile || mobileTab !== 'graph') && (
+          <aside className="side" style={isMobile ? { height: '100%' } : undefined}>
+            {(!isMobile || mobileTab === 'feed') && <LiveFeed events={hasSessionsLoaded ? visibleEvents : []} />}
+            {(!isMobile || mobileTab === 'costs') && <CostBreakdown byModel={costs.byModel} />}
+          </aside>
+        )}
+      </section>
+
+      <SessionDrawer
+        sessionId={selectedSessionId}
+        onClose={() => selectSession(null)}
+      />
+    </main>
+  );
+}

package/app/components/LiveFeed.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import type { SessionEvent } from '@/lib/types';
+import { deriveSessionDisplayLabel } from '@/lib/patterns/sessionPresentation';
+import { formatTimeFromUnixSeconds } from '@/lib/utils/format';
+import { SkeletonLines } from './Skeleton';
+
+interface LiveFeedProps {
+  events: SessionEvent[];
+  loading?: boolean;
+}
+
+export default function LiveFeed({ events, loading = false }: LiveFeedProps) {
+  return (
+    <article className="panel feed-panel">
+      <h2>Live Events</h2>
+      <div>
+        {loading ? (
+          <div style={{ padding: 12 }}>
+            <SkeletonLines count={5} />
+          </div>
+        ) : events.length === 0 ? (
+          <div className="empty-state">
+            <div className="empty-state-msg">Waiting for activity…</div>
+          </div>
+        ) : (
+          events.map((item, index) => (
+            <div
+              key={`${item.ts ?? 0}-${item.event ?? 'evt'}-${index}`}
+              className="feed-item"
+            >
+              <span className="feed-time">{formatTimeFromUnixSeconds(item.ts)}</span>
+              &nbsp;<span className="feed-type">{item.type ?? item.event ?? 'event'}</span>
+              <span className="feed-label">
+                {deriveSessionDisplayLabel({
+                  session_id: item.session_id ?? '',
+                  label: item.session_label ?? item.label ?? null,
+                  lineage_label: null,
+                  task_preview: null,
+                })}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+    </article>
+  );
+}

package/app/components/MobileBottomNav.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navItems = [
+  {
+    label: 'Home',
+    path: '/',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 9l6-7 6 7v6a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+        <polyline points="7,17 7,10 11,10 11,17"/>
+      </svg>
+    ),
+  },
+  {
+    label: 'Agents',
+    path: '/agents',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M9 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"/>
+        <path d="M5 16v-1.5A3.5 3.5 0 018.5 11h1A3.5 3.5 0 0113 14.5V16"/>
+        <circle cx="5" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="13" cy="5" r="1" fill="currentColor" stroke="none"/>
+      </svg>
+    ),
+  },
+  {
+    label: 'Workspace',
+    path: '/workspace',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M2.5 5a1.5 1.5 0 0 1 1.5-1.5h2.3l1.2 1.5H14a1.5 1.5 0 0 1 1.5 1.5v6A1.5 1.5 0 0 1 14 14H4a1.5 1.5 0 0 1-1.5-1.5V5z"/>
+        <path d="M2.5 6.5h13"/>
+      </svg>
+    ),
+  },
+  {
+    label: 'Gateway',
+    path: '/gateway',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M2.5 5.5H7M11 5.5h4.5M4.75 5.5a2 2 0 1 0 0 .01ZM13.25 5.5a2 2 0 1 0 0 .01ZM2.5 12.5H6M8 12.5h7.5M7 12.5a2 2 0 1 0 0 .01Z"/>
+      </svg>
+    ),
+  },
+  {
+    label: 'Containers',
+    path: '/containers',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+        <rect x="2" y="2" width="5.5" height="5.5" rx="1.5"/>
+        <rect x="10.5" y="2" width="5.5" height="5.5" rx="1.5"/>
+        <rect x="2" y="10.5" width="5.5" height="5.5" rx="1.5"/>
+        <rect x="10.5" y="10.5" width="5.5" height="5.5" rx="1.5"/>
+      </svg>
+    ),
+  },
+];
+
+export default function MobileBottomNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="mobile-bottom-nav">
+      <div className="mobile-bottom-nav__scroll">
+        {navItems.map((item) => {
+          const isActive = item.path === '/' ? pathname === '/' : pathname.startsWith(item.path);
+          return (
+            <Link
+              key={item.path}
+              href={item.path}
+              className={`mobile-bottom-nav__item ${isActive ? 'mobile-bottom-nav__item--active' : ''}`}
+              prefetch={true}
+            >
+              <span className="mobile-bottom-nav__icon">{item.icon}</span>
+              <span className="mobile-bottom-nav__label">{item.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}