groove-dev 0.27.7 → 0.27.11

package/node_modules/@groove-dev/gui/src/components/marketplace/repo-import.jsx

@@ -0,0 +1,363 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useCallback } from 'react';
+import {
+  Search, GitBranch, Star, ExternalLink, Loader2, Check,
+  FolderOpen, HardDrive, Package, PenLine, Users, ArrowLeft, Download,
+} from 'lucide-react';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { cn } from '../../lib/cn';
+import { fmtNum } from '../../lib/format';
+import { useGrooveStore } from '../../stores/groove';
+import { useToast } from '../../lib/hooks/use-toast';
+
+const GITHUB_RE = /github\.com\/([^/]+)\/([^/\s#?]+)/;
+
+export function RepoImport() {
+  const [step, setStep] = useState('input');
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [preview, setPreview] = useState(null);
+  const [pathOption, setPathOption] = useState('standalone');
+  const [customPath, setCustomPath] = useState('');
+  const [createTeam, setCreateTeam] = useState(true);
+  const [teamName, setTeamName] = useState('');
+
+  const previewRepo = useGrooveStore((s) => s.previewRepo);
+  const importRepo = useGrooveStore((s) => s.importRepo);
+  const importInProgress = useGrooveStore((s) => s.importInProgress);
+  const toast = useToast();
+
+  const doPreview = useCallback(async (repoUrl) => {
+    const match = repoUrl.match(GITHUB_RE);
+    if (!match) return;
+    setLoading(true);
+    try {
+      const data = await previewRepo(repoUrl);
+      setPreview(data);
+      setTeamName(data.name || match[2]);
+      setStep('preview');
+    } catch (err) {
+      toast.error('Preview failed', err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [previewRepo, toast]);
+
+  const handleUrlChange = useCallback((e) => {
+    const val = e.target.value;
+    setUrl(val);
+    if (GITHUB_RE.test(val) && step === 'input') {
+      doPreview(val);
+    }
+  }, [step, doPreview]);
+
+  const handleImport = useCallback(async () => {
+    if (!preview) return;
+    let targetPath;
+    if (pathOption === 'standalone') targetPath = `~/Projects/${preview.name}`;
+    else if (pathOption === 'subdirectory') targetPath = `./packages/${preview.name}`;
+    else targetPath = customPath;
+    try {
+      await importRepo(url, targetPath, createTeam, teamName);
+      toast.success(`Importing ${preview.name}`, 'Setup agent will handle the rest');
+      setStep('input');
+      setUrl('');
+      setPreview(null);
+    } catch (err) {
+      toast.error('Import failed', err.message);
+    }
+  }, [preview, pathOption, customPath, url, createTeam, teamName, importRepo, toast]);
+
+  // ── Step 1: URL Input ──────────────────────────────────
+  if (step === 'input') {
+    return (
+      <div className="relative">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+        <input
+          type="text"
+          value={url}
+          onChange={handleUrlChange}
+          placeholder="Paste a GitHub URL..."
+          className={cn(
+            'w-full h-9 rounded-lg pl-9 pr-20 text-sm font-sans',
+            'bg-surface-1 border border-border text-text-0',
+            'placeholder:text-text-4',
+            'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+            'transition-colors duration-100',
+          )}
+        />
+        <Button
+          variant="primary"
+          size="sm"
+          className="absolute right-1.5 top-1/2 -translate-y-1/2"
+          onClick={() => doPreview(url)}
+          disabled={!GITHUB_RE.test(url) || loading}
+        >
+          {loading ? <Loader2 size={12} className="animate-spin" /> : 'Preview'}
+        </Button>
+      </div>
+    );
+  }
+
+  // ── Step 2: Preview ────────────────────────────────────
+  if (step === 'preview' && preview) {
+    return (
+      <div className="space-y-4">
+        <div className="rounded-lg border border-border-subtle bg-surface-2 p-5">
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 rounded-xl bg-accent/8 flex items-center justify-center flex-shrink-0">
+              <GitBranch size={22} className="text-accent" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2.5 mb-1">
+                <span className="text-lg font-bold text-text-0 font-sans">{preview.name}</span>
+                <span className="text-xs text-text-4 font-sans">{preview.owner}</span>
+              </div>
+              <div className="flex items-center gap-3 text-2xs text-text-3 font-sans">
+                {preview.language && <Badge variant="outline" className="text-2xs">{preview.language}</Badge>}
+                {preview.stars != null && (
+                  <span className="flex items-center gap-1">
+                    <Star size={10} className="text-warning" fill="currentColor" />
+                    {fmtNum(preview.stars)}
+                  </span>
+                )}
+                {preview.license && <span>{preview.license}</span>}
+              </div>
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button variant="primary" size="sm" onClick={() => setStep('configure')} className="h-8 text-xs gap-1.5 px-4">
+                <FolderOpen size={13} />
+                Clone & Setup
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => window.open(url.startsWith('http') ? url : `https://${url}`, '_blank')}
+                className="h-8 text-xs gap-1.5"
+              >
+                <ExternalLink size={12} />
+                GitHub
+              </Button>
+              <button
+                onClick={() => { setStep('input'); setPreview(null); }}
+                className="text-2xs text-text-4 font-sans hover:text-text-2 cursor-pointer bg-transparent border-0 ml-1"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {preview.description && (
+          <div className="rounded-lg border border-border-subtle bg-surface-1 px-5 py-4">
+            <h4 className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2">About</h4>
+            <p className="text-sm text-text-1 font-sans leading-relaxed">{preview.description}</p>
+          </div>
+        )}
+
+        {preview.readmePreview && (
+          <div className="rounded-lg border border-border-subtle bg-surface-1 px-5 py-4">
+            <h4 className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-3">README</h4>
+            <div className="text-sm text-text-2 font-sans leading-relaxed whitespace-pre-wrap">{preview.readmePreview}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ── Step 3: Configure ──────────────────────────────────
+  if (step === 'configure' && preview) {
+    const pathOptions = [
+      {
+        id: 'standalone',
+        icon: HardDrive,
+        title: 'Standalone project',
+        description: 'Clone to its own directory, separate from this workspace',
+        path: `~/Projects/${preview.name}`,
+      },
+      {
+        id: 'subdirectory',
+        icon: Package,
+        title: 'Workspace package',
+        description: 'Add as a package inside this project\'s monorepo',
+        path: `./packages/${preview.name}`,
+      },
+      {
+        id: 'custom',
+        icon: PenLine,
+        title: 'Custom location',
+        description: 'Choose your own path',
+        path: null,
+      },
+    ];
+
+    return (
+      <div className="rounded-xl border border-border-subtle bg-surface-2 overflow-hidden">
+        {/* Header */}
+        <div className="px-5 py-4 border-b border-border-subtle bg-surface-3/50">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
+              <Download size={16} className="text-accent" />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-text-0 font-sans">
+                Clone {preview.name}
+              </h3>
+              <p className="text-2xs text-text-4 font-sans mt-0.5">
+                {preview.owner}/{preview.name} — configure where to install
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-5 py-4 space-y-5">
+          {/* Location picker */}
+          <div>
+            <label className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2.5 block">
+              Install location
+            </label>
+            <div className="space-y-2">
+              {pathOptions.map((opt) => {
+                const Icon = opt.icon;
+                const selected = pathOption === opt.id;
+                return (
+                  <button
+                    key={opt.id}
+                    onClick={() => setPathOption(opt.id)}
+                    className={cn(
+                      'w-full text-left rounded-lg border p-3.5 transition-all duration-150 cursor-pointer',
+                      selected
+                        ? 'border-accent bg-accent/5 ring-1 ring-accent/30'
+                        : 'border-border-subtle bg-surface-1 hover:border-border hover:bg-surface-1/80',
+                    )}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={cn(
+                        'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 mt-0.5',
+                        selected ? 'bg-accent/15 text-accent' : 'bg-surface-3 text-text-4',
+                      )}>
+                        <Icon size={15} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className={cn(
+                            'text-xs font-semibold font-sans',
+                            selected ? 'text-text-0' : 'text-text-2',
+                          )}>
+                            {opt.title}
+                          </span>
+                          {selected && (
+                            <div className="w-4 h-4 rounded-full bg-accent flex items-center justify-center">
+                              <Check size={10} className="text-white" />
+                            </div>
+                          )}
+                        </div>
+                        <p className="text-2xs text-text-4 font-sans mt-0.5 leading-relaxed">
+                          {opt.description}
+                        </p>
+                        {opt.path && selected && (
+                          <code className="text-2xs text-accent/80 font-mono mt-1.5 block truncate">
+                            {opt.path}
+                          </code>
+                        )}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Custom path input */}
+            {pathOption === 'custom' && (
+              <div className="mt-2.5 ml-11">
+                <input
+                  value={customPath}
+                  onChange={(e) => setCustomPath(e.target.value)}
+                  placeholder="/path/to/clone"
+                  autoFocus
+                  className={cn(
+                    'w-full h-9 px-3 text-xs font-mono rounded-md',
+                    'bg-surface-0 border border-border text-text-0',
+                    'placeholder:text-text-4',
+                    'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+                    'transition-colors',
+                  )}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Team toggle */}
+          <div className="border-t border-border-subtle pt-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2.5">
+                <div className="w-8 h-8 rounded-md bg-surface-3 flex items-center justify-center">
+                  <Users size={14} className="text-text-4" />
+                </div>
+                <div>
+                  <span className="text-xs font-semibold text-text-2 font-sans block">Create a team</span>
+                  <span className="text-2xs text-text-4 font-sans">Organize agents working on this repo into their own team</span>
+                </div>
+              </div>
+              <button
+                onClick={() => setCreateTeam(!createTeam)}
+                className={cn(
+                  'w-9 h-5 rounded-full p-0.5 transition-colors cursor-pointer flex-shrink-0',
+                  createTeam ? 'bg-accent' : 'bg-surface-5',
+                )}
+              >
+                <div className={cn(
+                  'w-4 h-4 rounded-full bg-white shadow-sm transition-transform',
+                  createTeam ? 'translate-x-4' : 'translate-x-0',
+                )} />
+              </button>
+            </div>
+            {createTeam && (
+              <div className="mt-2.5 ml-11">
+                <input
+                  value={teamName}
+                  onChange={(e) => setTeamName(e.target.value)}
+                  placeholder="Team name"
+                  className={cn(
+                    'w-full h-9 px-3 text-xs font-sans rounded-md',
+                    'bg-surface-0 border border-border text-text-0',
+                    'placeholder:text-text-4',
+                    'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+                    'transition-colors',
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3.5 border-t border-border-subtle bg-surface-3/30 flex items-center justify-between">
+          <button
+            onClick={() => setStep('preview')}
+            className="flex items-center gap-1.5 text-2xs text-text-4 font-sans hover:text-text-2 cursor-pointer bg-transparent border-0 transition-colors"
+          >
+            <ArrowLeft size={11} />
+            Back
+          </button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleImport}
+            disabled={importInProgress || (pathOption === 'custom' && !customPath.trim())}
+            className="h-8 text-xs gap-1.5 px-5"
+          >
+            {importInProgress ? (
+              <><Loader2 size={12} className="animate-spin" /> Importing...</>
+            ) : (
+              <><Download size={12} /> Clone & Setup</>
+            )}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}

package/node_modules/@groove-dev/gui/src/components/marketplace/repo-nuke-dialog.jsx

@@ -0,0 +1,68 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+
+export function RepoNukeDialog({ repo, open, onClose, onConfirm }) {
+  const [deleteFiles, setDeleteFiles] = useState(true);
+
+  if (!repo) return null;
+
+  const agents = repo.agents?.length || 0;
+  const processes = repo.processes?.length || 0;
+  const credentials = repo.credentialKeys?.length || 0;
+  const fileCount = repo.fileCount || 0;
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent title={`Nuke ${repo.repoName || repo.name}?`} description="Confirm destructive removal of imported repo">
+        <div className="px-5 py-4 space-y-4">
+          <div className="flex items-start gap-2">
+            <AlertTriangle size={16} className="text-danger flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-text-1 font-sans">This cannot be undone.</p>
+          </div>
+
+          <div className="space-y-1.5 text-xs text-text-2 font-sans">
+            {agents > 0 && <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Kill {agents} agent{agents !== 1 ? 's' : ''}
+            </div>}
+            {processes > 0 && <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Stop {processes} process{processes !== 1 ? 'es' : ''}
+            </div>}
+            {credentials > 0 && <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Remove {credentials} credential{credentials !== 1 ? 's' : ''}
+            </div>}
+            <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Delete team &quot;{repo.teamId || repo.repoName || repo.name}&quot;
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Clean all .groove state
+            </div>
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={deleteFiles}
+              onChange={(e) => setDeleteFiles(e.target.checked)}
+              className="accent-[var(--color-danger)]"
+            />
+            <span className="text-xs text-text-1 font-sans">
+              Delete repo files{fileCount > 0 ? ` (${fileCount} files)` : ''}
+            </span>
+          </label>
+
+          <div className="flex items-center gap-2 pt-1">
+            <Button variant="danger" size="sm" onClick={() => onConfirm(deleteFiles)}>
+              Nuke Everything
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/pro/pro-gate.jsx

@@ -0,0 +1,22 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useGrooveStore } from '../../stores/groove';
+import { UpgradeCard } from './upgrade-card';
+
+export function ProGate({ feature, description, children }) {
+  const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
+  const user = useGrooveStore((s) => s.marketplaceUser);
+
+  if (__GROOVE_EDITION__ !== 'pro') {
+    return <UpgradeCard feature={feature} description={description} variant="community" />;
+  }
+
+  if (!authenticated) {
+    return <UpgradeCard feature={feature} description={description} variant="sign-in" />;
+  }
+
+  if (!user?.subscription?.active) {
+    return <UpgradeCard feature={feature} description={description} variant="subscribe" />;
+  }
+
+  return children;
+}

package/node_modules/@groove-dev/gui/src/components/pro/upgrade-card.jsx

@@ -0,0 +1,48 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { Lock, Download, LogIn, Sparkles } from 'lucide-react';
+import { openExternal } from '../../lib/electron';
+import { useGrooveStore } from '../../stores/groove';
+
+const VARIANTS = {
+  community: {
+    heading: 'Get Groove Desktop',
+    cta: 'Download',
+    icon: Download,
+    action: () => openExternal('https://groovedev.ai/download'),
+  },
+  'sign-in': {
+    heading: 'Sign in to unlock',
+    cta: 'Sign in',
+    icon: LogIn,
+    action: () => useGrooveStore.getState().marketplaceLogin(),
+  },
+  subscribe: {
+    heading: 'Upgrade to Pro',
+    cta: 'Subscribe',
+    icon: Sparkles,
+    action: () => openExternal('https://groovedev.ai/pro'),
+  },
+};
+
+export function UpgradeCard({ feature, description, variant = 'community' }) {
+  const v = VARIANTS[variant] || VARIANTS.community;
+  const CtaIcon = v.icon;
+
+  return (
+    <div className="rounded-lg border border-border-subtle bg-surface-1/50 px-5 py-6 text-center">
+      <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-purple/10">
+        <Lock size={18} className="text-purple" />
+      </div>
+      <h3 className="text-sm font-semibold text-text-1 font-sans">{v.heading}</h3>
+      <p className="mt-1.5 text-2xs text-text-3 font-sans">{feature}</p>
+      <p className="mt-1 text-2xs text-text-4 font-sans max-w-xs mx-auto">{description}</p>
+      <button
+        onClick={v.action}
+        className="mt-4 inline-flex items-center gap-1.5 h-7 px-4 rounded-full bg-purple/15 text-purple text-xs font-semibold font-sans hover:bg-purple/25 transition-colors cursor-pointer"
+      >
+        <CtaIcon size={13} />
+        {v.cta}
+      </button>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/settings/quick-connect.jsx

@@ -0,0 +1,129 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  Server, Radio, ExternalLink, Loader2, X, Plus, Settings,
+} from 'lucide-react';
+import { StatusDot } from '../ui/status-dot';
+
+export function QuickConnect() {
+  const open = useGrooveStore((s) => s.quickConnectOpen);
+  const toggle = useGrooveStore((s) => s.toggleQuickConnect);
+  const savedTunnels = useGrooveStore((s) => s.savedTunnels);
+  const [connectingId, setConnectingId] = useState(null);
+
+  if (!open) return null;
+
+  async function handleConnect(id) {
+    setConnectingId(id);
+    try {
+      await useGrooveStore.getState().connectTunnel(id);
+      toggle();
+    } catch {}
+    setConnectingId(null);
+  }
+
+  function handleOpenRemote(server) {
+    const port = server.localPort;
+    const name = encodeURIComponent(server.name);
+    window.open(`http://localhost:${port}?instance=${name}`, '_blank');
+    toggle();
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" onClick={toggle} />
+
+      <AnimatePresence>
+        <motion.div
+          initial={{ opacity: 0, y: -20, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: -10, scale: 0.98 }}
+          transition={{ duration: 0.15 }}
+          className="fixed top-[20%] left-1/2 -translate-x-1/2 z-50 w-[400px] bg-surface-1 border border-border rounded-lg shadow-2xl overflow-hidden"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
+            <div className="flex items-center gap-2">
+              <Radio size={15} className="text-accent" />
+              <span className="text-sm font-semibold text-text-0 font-sans">Quick Connect</span>
+            </div>
+            <button onClick={toggle} className="p-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors">
+              <X size={14} />
+            </button>
+          </div>
+
+          {/* Server list */}
+          <div className="overflow-y-auto max-h-[320px] py-1">
+            {savedTunnels.length === 0 ? (
+              <div className="px-4 py-8 text-center">
+                <Server size={24} className="text-text-4 mx-auto mb-2" />
+                <p className="text-sm text-text-3 font-sans">No saved servers</p>
+                <p className="text-2xs text-text-4 font-sans mt-1">Add one in Settings to get started.</p>
+                <button
+                  onClick={() => {
+                    toggle();
+                    useGrooveStore.getState().setActiveView('settings');
+                  }}
+                  className="mt-3 inline-flex items-center gap-1.5 text-xs text-accent hover:text-accent/80 font-sans cursor-pointer transition-colors"
+                >
+                  <Settings size={12} /> Go to Settings
+                </button>
+              </div>
+            ) : (
+              savedTunnels.map((server) => (
+                <button
+                  key={server.id}
+                  onClick={() => server.active ? handleOpenRemote(server) : handleConnect(server.id)}
+                  disabled={connectingId === server.id}
+                  className={cn(
+                    'w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors',
+                    'hover:bg-surface-5',
+                    connectingId === server.id && 'opacity-60 pointer-events-none',
+                  )}
+                >
+                  <Server size={15} className={server.active ? 'text-success' : 'text-text-4'} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-text-0 font-sans truncate">{server.name}</span>
+                      {server.active && <StatusDot status="running" size="sm" />}
+                    </div>
+                    <span className="text-2xs text-text-4 font-mono">{server.user}@{server.host}</span>
+                  </div>
+                  <div className="flex-shrink-0">
+                    {connectingId === server.id ? (
+                      <Loader2 size={14} className="text-text-3 animate-spin" />
+                    ) : server.active ? (
+                      <span className="flex items-center gap-1 text-2xs text-success font-sans">
+                        <ExternalLink size={11} /> Open
+                      </span>
+                    ) : (
+                      <span className="text-2xs text-text-3 font-sans">Connect</span>
+                    )}
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+
+          {/* Footer */}
+          {savedTunnels.length > 0 && (
+            <div className="px-4 py-2 border-t border-border-subtle">
+              <button
+                onClick={() => {
+                  toggle();
+                  useGrooveStore.getState().setActiveView('settings');
+                }}
+                className="flex items-center gap-1.5 text-2xs text-text-4 hover:text-text-2 font-sans cursor-pointer transition-colors"
+              >
+                <Plus size={10} /> Manage servers in Settings
+              </button>
+            </div>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </>
+  );
+}