@geminilight/mindos 0.5.21 → 0.5.23

package/app/app/api/ask/route.ts

@@ -14,6 +14,8 @@ import {
 } from '@/lib/agent/context';
 import { logAgentOp } from '@/lib/agent/log';
 import { readSettings } from '@/lib/settings';
+import { MindOSError, apiError, ErrorCodes } from '@/lib/errors';
+import { metrics } from '@/lib/metrics';
 import { assertNotProtected } from '@/lib/core';
 import type { Message as FrontendMessage } from '@/lib/types';
 
@@ -160,7 +162,7 @@ export async function POST(req: NextRequest) {
   try {
     body = await req.json();
   } catch {
-    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
+    return apiError(ErrorCodes.INVALID_REQUEST, 'Invalid JSON body', 400);
   }
 
   const { messages, currentFile, attachedFiles, uploadedFiles } = body;
@@ -176,12 +178,16 @@ export async function POST(req: NextRequest) {
   const contextStrategy = agentConfig.contextStrategy ?? 'auto';
 
   // Auto-load skill + bootstrap context for each request.
-  // TODO (optimization): Consider caching bootstrap files with TTL to reduce per-request IO overhead.
-  // Current behavior: 8 synchronous file reads per request. For users with large knowledge bases,
-  // this adds ~10-50ms latency. Mitigation: Cache with 5min TTL or lazy-load on-demand.
-  const skillPath = path.resolve(process.cwd(), 'data/skills/mindos/SKILL.md');
+  // 1. SKILL.md — complete skill with operating rules (always loaded)
+  // 2. user-skill-rules.md — user's personalized rules from KB root (if exists)
+  const isZh = serverSettings.disabledSkills?.includes('mindos') ?? false;
+  const skillDirName = isZh ? 'mindos-zh' : 'mindos';
+  const skillPath = path.resolve(process.cwd(), `data/skills/${skillDirName}/SKILL.md`);
   const skill = readAbsoluteFile(skillPath);
 
+  const mindRoot = getMindRoot();
+  const userSkillRules = readKnowledgeFile('user-skill-rules.md');
+
   const targetDir = dirnameOf(currentFile);
   const bootstrap = {
     instruction: readKnowledgeFile('INSTRUCTION.md'),
@@ -199,6 +205,7 @@ export async function POST(req: NextRequest) {
   const truncationWarnings: string[] = [];
   if (!skill.ok) initFailures.push(`skill.mindos: failed (${skill.error})`);
   if (skill.ok && skill.truncated) truncationWarnings.push('skill.mindos was truncated');
+  if (userSkillRules.ok && userSkillRules.truncated) truncationWarnings.push('user-skill-rules.md was truncated');
   if (!bootstrap.instruction.ok) initFailures.push(`bootstrap.instruction: failed (${bootstrap.instruction.error})`);
   if (bootstrap.instruction.ok && bootstrap.instruction.truncated) truncationWarnings.push('bootstrap.instruction was truncated');
   if (!bootstrap.index.ok) initFailures.push(`bootstrap.index: failed (${bootstrap.index.error})`);
@@ -222,6 +229,10 @@ export async function POST(req: NextRequest) {
 
   const initContextBlocks: string[] = [];
   if (skill.ok) initContextBlocks.push(`## mindos_skill_md\n\n${skill.content}`);
+  // User personalization rules (from knowledge base root)
+  if (userSkillRules.ok && !userSkillRules.truncated && userSkillRules.content.trim()) {
+    initContextBlocks.push(`## user_skill_rules\n\nUser personalization rules (user-skill-rules.md):\n\n${userSkillRules.content}`);
+  }
   if (bootstrap.instruction.ok) initContextBlocks.push(`## bootstrap_instruction\n\n${bootstrap.instruction.content}`);
   if (bootstrap.index.ok) initContextBlocks.push(`## bootstrap_index\n\n${bootstrap.index.content}`);
   if (bootstrap.config_json.ok) initContextBlocks.push(`## bootstrap_config_json\n\n${bootstrap.config_json.content}`);
@@ -381,6 +392,7 @@ export async function POST(req: NextRequest) {
 
     // ── SSE Stream ──
     const encoder = new TextEncoder();
+    const requestStartTime = Date.now();
     const stream = new ReadableStream({
       start(controller) {
         function send(event: MindOSSSEvent) {
@@ -404,6 +416,7 @@ export async function POST(req: NextRequest) {
             });
           } else if (isToolExecutionEndEvent(event)) {
             const { toolCallId, output, isError } = getToolExecutionEnd(event);
+            metrics.recordToolExecution();
             send({
               type: 'tool_end',
               toolCallId,
@@ -413,6 +426,12 @@ export async function POST(req: NextRequest) {
           } else if (isTurnEndEvent(event)) {
             stepCount++;
 
+            // Record token usage if available from the turn
+            const turnUsage = (event as any).usage;
+            if (turnUsage && typeof turnUsage.inputTokens === 'number') {
+              metrics.recordTokens(turnUsage.inputTokens, turnUsage.outputTokens ?? 0);
+            }
+
             // Track tool calls for loop detection (lock-free batch update).
             // Deterministic JSON.stringify ensures consistent input comparison.
             const { toolResults } = getTurnEndData(event);
@@ -452,9 +471,12 @@ export async function POST(req: NextRequest) {
         });
 
         agent.prompt(lastUserContent).then(() => {
+          metrics.recordRequest(Date.now() - requestStartTime);
           send({ type: 'done' });
           controller.close();
         }).catch((err) => {
+          metrics.recordRequest(Date.now() - requestStartTime);
+          metrics.recordError();
           send({ type: 'error', message: err instanceof Error ? err.message : String(err) });
           controller.close();
         });
@@ -471,9 +493,9 @@ export async function POST(req: NextRequest) {
     });
   } catch (err) {
     console.error('[ask] Failed to initialize model:', err);
-    return NextResponse.json(
-      { error: err instanceof Error ? err.message : 'Failed to initialize AI model' },
-      { status: 500 },
-    );
+    if (err instanceof MindOSError) {
+      return apiError(err.code, err.message);
+    }
+    return apiError(ErrorCodes.MODEL_INIT_FAILED, err instanceof Error ? err.message : 'Failed to initialize AI model', 500);
   }
 }

package/app/app/api/bootstrap/route.ts

@@ -21,6 +21,7 @@ export async function GET(req: NextRequest) {
       index: tryRead('README.md'),
       config_json: tryRead('CONFIG.json'),
       config_md: tryRead('CONFIG.md'),
+      user_skill_rules: tryRead('user-skill-rules.md'),
     };
 
     if (targetDir) {

package/app/app/api/monitoring/route.ts

@@ -0,0 +1,95 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import { getMindRoot } from '@/lib/fs';
+import { metrics } from '@/lib/metrics';
+
+// Aligned with IGNORED_DIRS in lib/fs.ts and lib/core/tree.ts
+const IGNORED_DIRS = new Set(['.git', 'node_modules', 'app', '.next', '.DS_Store', 'mcp']);
+
+/**
+ * Recursively count files and sum their sizes under a directory.
+ * Skips directories in IGNORED_DIRS (aligned with the rest of the codebase).
+ */
+function walkStats(dir: string): { fileCount: number; totalSizeBytes: number } {
+  let fileCount = 0;
+  let totalSizeBytes = 0;
+
+  function walk(current: string) {
+    let entries: fs.Dirent[];
+    try {
+      entries = fs.readdirSync(current, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (IGNORED_DIRS.has(entry.name)) continue;
+      const fullPath = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile()) {
+        try {
+          const stat = fs.statSync(fullPath);
+          fileCount++;
+          totalSizeBytes += stat.size;
+        } catch { /* skip unreadable files */ }
+      }
+    }
+  }
+
+  walk(dir);
+  return { fileCount, totalSizeBytes };
+}
+
+// ── TTL cache for walkStats (avoid blocking event loop every 5s poll) ──
+let cachedKbStats: { fileCount: number; totalSizeBytes: number } | null = null;
+let cachedKbStatsTs = 0;
+const KB_STATS_TTL = 30_000; // 30s
+
+function getCachedKbStats(mindRoot: string): { fileCount: number; totalSizeBytes: number } {
+  const now = Date.now();
+  if (cachedKbStats && now - cachedKbStatsTs < KB_STATS_TTL) return cachedKbStats;
+  cachedKbStats = walkStats(mindRoot);
+  cachedKbStatsTs = now;
+  return cachedKbStats;
+}
+
+export async function GET() {
+  const snap = metrics.getSnapshot();
+  const mem = process.memoryUsage();
+  const mindRoot = getMindRoot();
+
+  const kbStats = getCachedKbStats(mindRoot);
+
+  // Detect MCP status from environment / config
+  const mcpPort = Number(process.env.MCP_PORT) || 3457;
+
+  return NextResponse.json({
+    system: {
+      uptimeMs: Date.now() - snap.processStartTime,
+      memory: {
+        heapUsed: mem.heapUsed,
+        heapTotal: mem.heapTotal,
+        rss: mem.rss,
+      },
+      nodeVersion: process.version,
+    },
+    application: {
+      agentRequests: snap.agentRequests,
+      toolExecutions: snap.toolExecutions,
+      totalTokens: snap.totalTokens,
+      avgResponseTimeMs: snap.avgResponseTimeMs,
+      errors: snap.errors,
+    },
+    knowledgeBase: {
+      root: mindRoot,
+      fileCount: kbStats.fileCount,
+      totalSizeBytes: kbStats.totalSizeBytes,
+    },
+    mcp: {
+      running: true, // If this endpoint responds, the server is running
+      port: mcpPort,
+    },
+  });
+}

package/app/app/globals.css

@@ -212,6 +212,20 @@ body {
 .prose img { max-width: 100%; border-radius: 6px; border: 1px solid var(--prose-code-border); }
 .prose hr { border: none; border-top: 1px solid var(--prose-border); margin: 2.5em 0; }
 
+/* Ask Panel — compact prose for side panel chat bubbles */
+.prose.prose-panel {
+  font-size: 0.8125rem !important;
+  line-height: 1.6;
+}
+.prose.prose-panel h1, .prose.prose-panel h2, .prose.prose-panel h3, .prose.prose-panel h4 {
+  font-size: 0.8125rem !important;
+  margin-top: 1em;
+  margin-bottom: 0.4em;
+}
+.prose.prose-panel p { margin-bottom: 0.6em; }
+.prose.prose-panel pre { padding: 0.6em 0.8em; margin: 0.8em 0; }
+.prose.prose-panel pre code { font-size: 0.78em; }
+
 :root {
   --prose-body: #3a3730;
   --prose-heading: #1c1a17;

package/app/app/setup/page.tsx

@@ -4,9 +4,10 @@ import SetupWizard from '@/components/SetupWizard';
 
 export const dynamic = 'force-dynamic';
 
-export default function SetupPage({ searchParams }: { searchParams: { force?: string } }) {
+export default async function SetupPage({ searchParams }: { searchParams: Promise<{ force?: string }> }) {
   const settings = readSettings();
-  const force = searchParams.force === '1';
+  const { force: forceParam } = await searchParams;
+  const force = forceParam === '1';
   if (!settings.setupPending && !force) redirect('/');
   return <SetupWizard />;
 }

package/app/components/ActivityBar.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { useRef, useCallback } from 'react';
+import Link from 'next/link';
+import { FolderTree, Search, Settings, RefreshCw, Blocks, Bot, ChevronLeft, ChevronRight } from 'lucide-react';
+import { DOT_COLORS, getStatusLevel } from './SyncStatusBar';
+import type { SyncStatus } from './settings/SyncTab';
+import Logo from './Logo';
+
+export type PanelId = 'files' | 'search' | 'plugins' | 'agents';
+
+export const RAIL_WIDTH_COLLAPSED = 48;
+export const RAIL_WIDTH_EXPANDED = 180;
+
+interface ActivityBarProps {
+  activePanel: PanelId | null;
+  onPanelChange: (id: PanelId | null) => void;
+  syncStatus: SyncStatus | null;
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  onSettingsClick: () => void;
+  onSyncClick: (rect: DOMRect) => void;
+}
+
+interface RailButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  shortcut?: string;
+  active?: boolean;
+  expanded: boolean;
+  onClick: () => void;
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /** Optional overlay badge (e.g. status dot) rendered inside the button */
+  badge?: React.ReactNode;
+}
+
+function RailButton({ icon, label, shortcut, active = false, expanded, onClick, buttonRef, badge }: RailButtonProps) {
+  return (
+    <button
+      ref={buttonRef}
+      onClick={onClick}
+      aria-pressed={active}
+      aria-label={label}
+      title={expanded ? undefined : (shortcut ? `${label} (${shortcut})` : label)}
+      className={`
+        relative flex items-center ${expanded ? 'justify-start px-3 w-full' : 'justify-center w-10'} h-10 rounded-md transition-colors
+        ${active
+          ? 'text-[var(--amber)] bg-[var(--amber-dim)]'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+        }
+        focus-visible:ring-2 focus-visible:ring-ring
+      `}
+    >
+      {active && (
+        <span className="absolute left-0 top-1/2 -translate-y-1/2 w-[2px] h-[18px] rounded-r-full" style={{ background: 'var(--amber)' }} />
+      )}
+      <span className="shrink-0 flex items-center justify-center w-[18px]">{icon}</span>
+      {badge}
+      {expanded && (
+        <>
+          <span className="ml-2.5 text-sm whitespace-nowrap">{label}</span>
+          {shortcut && (
+            <span className="ml-auto text-2xs text-muted-foreground/60 font-mono shrink-0">{shortcut}</span>
+          )}
+        </>
+      )}
+    </button>
+  );
+}
+
+export default function ActivityBar({
+  activePanel,
+  onPanelChange,
+  syncStatus,
+  expanded,
+  onExpandedChange,
+  onSettingsClick,
+  onSyncClick,
+}: ActivityBarProps) {
+  const lastClickRef = useRef(0);
+  const syncBtnRef = useRef<HTMLButtonElement>(null);
+
+  /** Debounce rapid clicks (300ms) — shared across all Rail buttons */
+  const debounced = useCallback((fn: () => void) => {
+    const now = Date.now();
+    if (now - lastClickRef.current < 300) return;
+    lastClickRef.current = now;
+    fn();
+  }, []);
+
+  const toggle = useCallback((id: PanelId) => {
+    debounced(() => onPanelChange(activePanel === id ? null : id));
+  }, [activePanel, onPanelChange, debounced]);
+
+  const syncLevel = getStatusLevel(syncStatus, false);
+  const showSyncDot = syncLevel !== 'off' && syncLevel !== 'synced';
+
+  const railWidth = expanded ? RAIL_WIDTH_EXPANDED : RAIL_WIDTH_COLLAPSED;
+
+  // Sync dot badge — positioned differently in collapsed vs expanded
+  const syncBadge = showSyncDot ? (
+    <span className={`absolute ${expanded ? 'left-[26px] top-1.5' : 'top-1.5 right-1.5'} w-2 h-2 rounded-full ${DOT_COLORS[syncLevel]} ${syncLevel === 'error' || syncLevel === 'conflicts' ? 'animate-pulse' : ''}`} />
+  ) : undefined;
+
+  return (
+    <aside
+      className="group hidden md:flex fixed top-0 left-0 h-screen z-[31] flex-col bg-background border-r border-border transition-[width] duration-200 ease-out"
+      style={{ width: `${railWidth}px` }}
+      role="toolbar"
+      aria-label="Navigation"
+      aria-orientation="vertical"
+    >
+      {/* Content wrapper — overflow-hidden prevents text flash during width transitions */}
+      <div className="flex flex-col h-full w-full overflow-hidden">
+        {/* ── Top: Logo ── */}
+        <Link
+          href="/"
+          className={`flex items-center ${expanded ? 'px-3 gap-2' : 'justify-center'} w-full py-3 hover:opacity-80 transition-opacity`}
+          aria-label="MindOS Home"
+        >
+          <Logo id="rail" className="w-7 h-3.5 shrink-0" />
+          {expanded && <span className="text-sm font-semibold text-foreground font-display whitespace-nowrap">MindOS</span>}
+        </Link>
+
+        <div className={`${expanded ? 'mx-3' : 'mx-auto w-6'} border-t border-border`} />
+
+        {/* ── Middle: Core panel toggles ── */}
+        <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
+          <RailButton icon={<FolderTree size={18} />} label="Files" active={activePanel === 'files'} expanded={expanded} onClick={() => toggle('files')} />
+          <RailButton icon={<Search size={18} />} label="Search" shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} />
+          <RailButton icon={<Blocks size={18} />} label="Plugins" active={activePanel === 'plugins'} expanded={expanded} onClick={() => toggle('plugins')} />
+          <RailButton icon={<Bot size={18} />} label="Agents" active={activePanel === 'agents'} expanded={expanded} onClick={() => toggle('agents')} />
+        </div>
+
+        {/* ── Spacer ── */}
+        <div className="flex-1" />
+
+        {/* ── Bottom: Action buttons (not panel toggles) ── */}
+        <div className={`${expanded ? 'mx-3' : 'mx-auto w-6'} border-t border-border`} />
+        <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
+          <RailButton
+            icon={<Settings size={18} />}
+            label="Settings"
+            shortcut="⌘,"
+            expanded={expanded}
+            onClick={() => debounced(onSettingsClick)}
+          />
+          <RailButton
+            icon={<RefreshCw size={18} />}
+            label="Sync"
+            expanded={expanded}
+            buttonRef={syncBtnRef}
+            badge={syncBadge}
+            onClick={() => debounced(() => {
+              const rect = syncBtnRef.current?.getBoundingClientRect();
+              if (rect) onSyncClick(rect);
+            })}
+          />
+        </div>
+      </div>
+
+      {/* ── Hover expand/collapse button — vertically centered on right edge ── */}
+      {/* z-[32] ensures it paints above Panel (z-30). Shows on Rail hover OR self-hover. */}
+      <button
+        onClick={() => onExpandedChange(!expanded)}
+        className="
+          absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-[32]
+          w-5 h-5 rounded-full
+          bg-card border border-border shadow-sm
+          flex items-center justify-center
+          opacity-0 group-hover:opacity-100 hover:!opacity-100
+          transition-opacity duration-200
+          text-muted-foreground hover:text-foreground hover:bg-muted
+          focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring
+        "
+        aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
+        title={expanded ? 'Collapse' : 'Expand'}
+      >
+        {expanded ? <ChevronLeft size={10} /> : <ChevronRight size={10} />}
+      </button>
+    </aside>
+  );
+}

package/app/components/AskFab.tsx

@@ -1,105 +1,47 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { usePathname } from 'next/navigation';
 import { Sparkles } from 'lucide-react';
-import AskModal from './AskModal';
-import { useAskModal } from '@/hooks/useAskModal';
 
-export default function AskFab() {
-  const [open, setOpen] = useState(false);
-  const pathname = usePathname();
-  const currentFile = pathname.startsWith('/view/')
-    ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
-    : undefined;
-
-  // Listen to useAskModal store for cross-component open requests (e.g. from GuideCard)
-  const askModal = useAskModal();
-  const [initialMessage, setInitialMessage] = useState('');
-  const [openSource, setOpenSource] = useState<'user' | 'guide' | 'guide-next'>('user');
-
-  useEffect(() => {
-    if (askModal.open) {
-      setInitialMessage(askModal.initialMessage);
-      setOpenSource(askModal.source);
-      setOpen(true);
-      askModal.close(); // Reset store state after consuming
-    }
-  }, [askModal.open, askModal.initialMessage, askModal.source, askModal.close]);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    setInitialMessage('');
-    setOpenSource('user');
-  }, []);
-
-  // Dispatch correct PATCH based on how the modal was opened
-  const handleFirstMessage = useCallback(() => {
-    const notifyGuide = () => window.dispatchEvent(new Event('guide-state-updated'));
-
-    if (openSource === 'guide') {
-      // Task ② completion: mark askedAI
-      fetch('/api/setup', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ guideState: { askedAI: true } }),
-      }).then(notifyGuide).catch(() => {});
-    } else if (openSource === 'guide-next') {
-      // Next-step advancement: GuideCard already PATCHed nextStepIndex optimistically.
-      // Just notify GuideCard to re-fetch for consistency; no additional PATCH needed.
-      notifyGuide();
-    }
-    // For 'user' source: no guide action needed
-  }, [openSource]);
+interface AskFabProps {
+  /** Toggle the right-side Ask AI panel */
+  onToggle: () => void;
+  /** Whether the right panel is currently open (FAB hides when open) */
+  askPanelOpen: boolean;
+}
 
+export default function AskFab({ onToggle, askPanelOpen }: AskFabProps) {
   return (
-    <>
-      <button
-        onClick={() => { setInitialMessage(''); setOpenSource('user'); setOpen(true); }}
-        className="
-          group
-          fixed z-40
-          bottom-5 right-5
-          md:bottom-5 md:right-5
-          flex items-center justify-center
-          gap-0 hover:gap-2
-          p-3 md:p-[11px] rounded-xl
-          text-white font-medium text-[13px]
-          shadow-md shadow-amber-900/15
-          transition-all duration-200 ease-out
-          hover:shadow-lg hover:shadow-amber-800/25
-          active:scale-95
-          cursor-pointer
-          overflow-hidden
-          font-display
-        "
-        style={{
-          background: 'linear-gradient(135deg, #b07c2e 0%, #c8873a 50%, #d4943f 100%)',
-          marginBottom: 'env(safe-area-inset-bottom, 0px)',
-        }}
-        title="MindOS Agent (⌘/)"
-        aria-label="MindOS Agent"
-      >
-        <Sparkles size={16} className="relative z-10 shrink-0" />
-
-        <span className="
-          relative z-10
-          max-w-0 group-hover:max-w-[120px]
-          opacity-0 group-hover:opacity-100
-          transition-all duration-200 ease-out
-          whitespace-nowrap overflow-hidden
-        ">
-          MindOS Agent
-        </span>
-      </button>
-
-      <AskModal
-        open={open}
-        onClose={handleClose}
-        currentFile={currentFile}
-        initialMessage={initialMessage}
-        onFirstMessage={handleFirstMessage}
-      />
-    </>
+    <button
+      onClick={onToggle}
+      className={`
+        group hidden md:flex
+        fixed z-40 bottom-5 right-5
+        items-center justify-center
+        gap-0 hover:gap-2
+        p-[11px] rounded-xl
+        text-white font-medium text-[13px]
+        shadow-md shadow-amber-900/15
+        transition-all duration-200 ease-out
+        hover:shadow-lg hover:shadow-amber-800/25
+        active:scale-95 cursor-pointer overflow-hidden font-display
+        ${askPanelOpen ? 'opacity-0 pointer-events-none translate-y-2' : 'opacity-100 translate-y-0'}
+      `}
+      style={{
+        background: 'linear-gradient(135deg, #b07c2e 0%, #c8873a 50%, #d4943f 100%)',
+      }}
+      title="MindOS Agent (⌘/)"
+      aria-label="MindOS Agent"
+    >
+      <Sparkles size={16} className="relative z-10 shrink-0" />
+      <span className="
+        relative z-10
+        group-hover:max-w-[120px]
+        opacity-0 group-hover:opacity-100
+        transition-all duration-200 ease-out
+        whitespace-nowrap overflow-hidden
+      ">
+        MindOS Agent
+      </span>
+    </button>
   );
 }