@renseiai/agentfactory-dashboard 0.8.0

package/src/components/sessions/session-detail.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Badge } from '../../components/ui/badge'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { SessionTimeline, type TimelineEvent } from './session-timeline'
+import { TokenChart } from './token-chart'
+import { formatDuration, formatCost } from '../../lib/format'
+import { getStatusConfig } from '../../lib/status-config'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import type { PublicSessionResponse } from '../../types/api'
+import { ArrowLeft, Clock, Coins, Calendar, Tag } from 'lucide-react'
+import { Button } from '../../components/ui/button'
+
+interface SessionDetailProps {
+  session: PublicSessionResponse
+  onBack?: () => void
+  className?: string
+}
+
+export function SessionDetail({ session, onBack, className }: SessionDetailProps) {
+  const statusConfig = getStatusConfig(session.status)
+  const workTypeConfig = getWorkTypeConfig(session.workType)
+
+  const events: TimelineEvent[] = [
+    {
+      id: 'started',
+      label: 'Session started',
+      timestamp: session.startedAt,
+      type: 'info',
+    },
+  ]
+
+  if (session.status === 'completed') {
+    const endTime = new Date(new Date(session.startedAt).getTime() + session.duration * 1000)
+    events.push({
+      id: 'completed',
+      label: 'Session completed',
+      timestamp: endTime.toISOString(),
+      type: 'success',
+    })
+  } else if (session.status === 'failed') {
+    const endTime = new Date(new Date(session.startedAt).getTime() + session.duration * 1000)
+    events.push({
+      id: 'failed',
+      label: 'Session failed',
+      timestamp: endTime.toISOString(),
+      type: 'error',
+    })
+  }
+
+  return (
+    <div className={cn('space-y-6 p-6 animate-fade-in', className)}>
+      {/* Back button */}
+      {onBack && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onBack}
+          className="gap-1.5 text-af-text-secondary hover:text-af-text-primary font-body -ml-2"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Back
+        </Button>
+      )}
+
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <StatusDot status={session.status} showHeartbeat={session.status === 'working'} className="h-3 w-3" />
+        <h1 className="font-display text-xl font-bold font-mono text-af-text-primary tracking-tight">
+          {session.identifier}
+        </h1>
+        <Badge
+          variant="outline"
+          className={cn(
+            'text-xs border',
+            statusConfig.bgColor, statusConfig.textColor, statusConfig.borderColor
+          )}
+        >
+          {statusConfig.label}
+        </Badge>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        {/* Left: Details */}
+        <div className="lg:col-span-2 rounded-xl border border-af-surface-border/40 bg-af-surface/30 p-6">
+          <h3 className="font-display text-sm font-semibold text-af-text-primary tracking-tight mb-5">
+            Session Details
+          </h3>
+
+          <div className="grid grid-cols-2 gap-6">
+            <div className="space-y-1">
+              <dt className="flex items-center gap-1.5 text-2xs font-body uppercase tracking-wider text-af-text-tertiary">
+                <Tag className="h-3 w-3" />
+                Work Type
+              </dt>
+              <dd>
+                <Badge
+                  variant="outline"
+                  className={cn('text-xs border', workTypeConfig.bgColor, workTypeConfig.color, workTypeConfig.borderColor)}
+                >
+                  {workTypeConfig.label}
+                </Badge>
+              </dd>
+            </div>
+
+            <div className="space-y-1">
+              <dt className="flex items-center gap-1.5 text-2xs font-body uppercase tracking-wider text-af-text-tertiary">
+                <Clock className="h-3 w-3" />
+                Duration
+              </dt>
+              <dd className="font-display text-lg font-bold tabular-nums text-af-text-primary">
+                {formatDuration(session.duration)}
+              </dd>
+            </div>
+
+            <div className="space-y-1">
+              <dt className="flex items-center gap-1.5 text-2xs font-body uppercase tracking-wider text-af-text-tertiary">
+                <Coins className="h-3 w-3" />
+                Cost
+              </dt>
+              <dd className="font-display text-lg font-bold tabular-nums font-mono text-af-accent">
+                {formatCost(session.costUsd)}
+              </dd>
+            </div>
+
+            <div className="space-y-1">
+              <dt className="flex items-center gap-1.5 text-2xs font-body uppercase tracking-wider text-af-text-tertiary">
+                <Calendar className="h-3 w-3" />
+                Started
+              </dt>
+              <dd className="text-sm font-body text-af-text-primary">
+                {new Date(session.startedAt).toLocaleString()}
+              </dd>
+            </div>
+          </div>
+
+          <div className="mt-8">
+            <TokenChart />
+          </div>
+        </div>
+
+        {/* Right: Timeline */}
+        <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 p-6">
+          <h3 className="font-display text-sm font-semibold text-af-text-primary tracking-tight mb-5">
+            Timeline
+          </h3>
+          <SessionTimeline events={events} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/sessions/session-list.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useSessions } from '../../hooks/use-sessions'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { Badge } from '../../components/ui/badge'
+import { Skeleton } from '../../components/ui/skeleton'
+import { EmptyState } from '../../components/shared/empty-state'
+import { formatDuration, formatCost, formatRelativeTime } from '../../lib/format'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import { getStatusConfig } from '../../lib/status-config'
+
+interface SessionListProps {
+  onSelect?: (sessionId: string) => void
+  className?: string
+}
+
+export function SessionList({ onSelect, className }: SessionListProps) {
+  const { data, isLoading } = useSessions()
+  const sessions = data?.sessions ?? []
+
+  if (isLoading) {
+    return (
+      <div className={cn('space-y-2 p-6', className)}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-14 rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="p-6">
+        <EmptyState
+          title="No sessions"
+          description="Agent sessions will appear here once they start."
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('p-6', className)}>
+      <div className="mb-5 flex items-center gap-3">
+        <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+          Sessions
+        </h2>
+        <span className="rounded-full bg-af-surface/60 px-2 py-0.5 text-2xs font-body font-medium tabular-nums text-af-text-secondary">
+          {sessions.length}
+        </span>
+      </div>
+
+      <div className="rounded-xl border border-af-surface-border/40 overflow-hidden">
+        <table className="w-full text-sm font-body">
+          <thead>
+            <tr className="border-b border-af-surface-border/40 bg-af-bg-secondary/50">
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Issue</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Status</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Type</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Duration</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Cost</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Started</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sessions.map((session, i) => {
+              const statusConfig = getStatusConfig(session.status)
+              const workTypeConfig = getWorkTypeConfig(session.workType)
+              return (
+                <tr
+                  key={session.id}
+                  className={cn(
+                    'border-b border-af-surface-border/20 last:border-0 cursor-pointer transition-all duration-200',
+                    'hover:bg-af-surface/30'
+                  )}
+                  onClick={() => onSelect?.(session.id)}
+                  style={{ animationDelay: `${i * 30}ms` }}
+                >
+                  <td className="px-4 py-3">
+                    <span className="font-mono text-sm text-af-text-primary">{session.identifier}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <StatusDot status={session.status} />
+                      <span className={cn('text-xs', statusConfig.textColor)}>
+                        {statusConfig.label}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        'text-2xs border',
+                        workTypeConfig.bgColor, workTypeConfig.color, workTypeConfig.borderColor
+                      )}
+                    >
+                      {workTypeConfig.label}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-af-text-secondary tabular-nums">
+                      {formatDuration(session.duration)}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-af-text-secondary tabular-nums font-mono">
+                      {formatCost(session.costUsd)}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-af-text-tertiary">
+                      {formatRelativeTime(session.startedAt)}
+                    </span>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/components/sessions/session-timeline.tsx

@@ -0,0 +1,76 @@
+import { cn } from '../../lib/utils'
+
+export interface TimelineEvent {
+  id: string
+  label: string
+  timestamp: string
+  detail?: string
+  type?: 'info' | 'success' | 'warning' | 'error'
+}
+
+interface SessionTimelineProps {
+  events: TimelineEvent[]
+  className?: string
+}
+
+const typeStyles = {
+  info: {
+    dot: 'bg-af-blue',
+    glow: 'shadow-[0_0_8px_2px_rgba(75,139,245,0.3)]',
+    line: 'bg-af-blue/20',
+  },
+  success: {
+    dot: 'bg-af-status-success',
+    glow: 'shadow-[0_0_8px_2px_rgba(34,197,94,0.3)]',
+    line: 'bg-af-status-success/20',
+  },
+  warning: {
+    dot: 'bg-af-status-warning',
+    glow: 'shadow-[0_0_8px_2px_rgba(245,158,11,0.3)]',
+    line: 'bg-af-status-warning/20',
+  },
+  error: {
+    dot: 'bg-af-status-error',
+    glow: 'shadow-[0_0_8px_2px_rgba(239,68,68,0.3)]',
+    line: 'bg-af-status-error/20',
+  },
+}
+
+export function SessionTimeline({ events, className }: SessionTimelineProps) {
+  return (
+    <div className={cn('relative space-y-0', className)}>
+      {/* Vertical connector line */}
+      {events.length > 1 && (
+        <div className="absolute left-[5px] top-3 bottom-3 w-px bg-af-surface-border/40" />
+      )}
+
+      {events.map((event) => {
+        const styles = typeStyles[event.type ?? 'info']
+        return (
+          <div key={event.id} className="relative flex gap-3.5 py-2.5">
+            {/* Glowing dot */}
+            <span
+              className={cn(
+                'relative z-10 mt-1.5 h-[10px] w-[10px] shrink-0 rounded-full',
+                styles.dot,
+                styles.glow
+              )}
+            />
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="text-sm font-body text-af-text-primary">{event.label}</span>
+                <span className="text-2xs font-body text-af-text-tertiary whitespace-nowrap tabular-nums">
+                  {new Date(event.timestamp).toLocaleTimeString()}
+                </span>
+              </div>
+              {event.detail && (
+                <p className="mt-0.5 text-xs font-body text-af-text-tertiary">{event.detail}</p>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/sessions/token-chart.tsx

@@ -0,0 +1,51 @@
+import { cn } from '../../lib/utils'
+import { formatTokens } from '../../lib/format'
+
+interface TokenChartProps {
+  inputTokens?: number
+  outputTokens?: number
+  className?: string
+}
+
+export function TokenChart({ inputTokens = 0, outputTokens = 0, className }: TokenChartProps) {
+  const total = inputTokens + outputTokens
+  if (total === 0) return null
+
+  const inputPct = (inputTokens / total) * 100
+  const outputPct = (outputTokens / total) * 100
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div className="flex items-center justify-between text-2xs font-body">
+        <span className="uppercase tracking-wider text-af-text-tertiary">Token Usage</span>
+        <span className="tabular-nums font-mono text-af-text-secondary">{formatTokens(total)} total</span>
+      </div>
+
+      {/* Bar */}
+      <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-af-bg-primary/60">
+        <div
+          className="bg-af-blue rounded-l-full transition-all duration-500"
+          style={{ width: `${inputPct}%` }}
+        />
+        <div
+          className="bg-af-accent transition-all duration-500"
+          style={{ width: `${outputPct}%` }}
+        />
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-5 text-2xs font-body">
+        <div className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-af-blue shadow-[0_0_6px_1px_rgba(75,139,245,0.3)]" />
+          <span className="text-af-text-tertiary">Input</span>
+          <span className="tabular-nums font-mono text-af-text-secondary">{formatTokens(inputTokens)}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-af-accent shadow-[0_0_6px_1px_rgba(255,107,53,0.3)]" />
+          <span className="text-af-text-tertiary">Output</span>
+          <span className="tabular-nums font-mono text-af-text-secondary">{formatTokens(outputTokens)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/settings/settings-view.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Badge } from '../../components/ui/badge'
+import { Separator } from '../../components/ui/separator'
+import { useStats } from '../../hooks/use-stats'
+import { useWorkers } from '../../hooks/use-workers'
+import { ProviderIcon } from '../../components/fleet/provider-icon'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { CheckCircle2, AlertCircle, Settings2, Webhook, Server, Shield } from 'lucide-react'
+
+interface SettingsViewProps {
+  className?: string
+}
+
+export function SettingsView({ className }: SettingsViewProps) {
+  const { data: stats } = useStats()
+  const { data: workersData } = useWorkers()
+
+  const workers = workersData?.workers ?? []
+  const hasWorkerAuth = workersData !== null
+
+  return (
+    <div className={cn('space-y-6 p-6 max-w-3xl', className)}>
+      {/* Page header */}
+      <div>
+        <h1 className="font-display text-xl font-bold text-af-text-primary tracking-tight">Settings</h1>
+        <p className="mt-1 text-sm font-body text-af-text-secondary">
+          Configuration and integration status for your AgentFactory instance.
+        </p>
+      </div>
+
+      {/* Integration Status */}
+      <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 overflow-hidden">
+        <div className="px-6 py-4 border-b border-af-surface-border/30">
+          <h3 className="flex items-center gap-2 font-display text-sm font-semibold text-af-text-primary tracking-tight">
+            <Webhook className="h-4 w-4 text-af-text-tertiary" />
+            Integration Status
+          </h3>
+          <p className="mt-0.5 text-xs font-body text-af-text-tertiary">Connected services and API endpoints</p>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <CheckCircle2 className="h-4 w-4 text-af-status-success" />
+              <div>
+                <p className="text-sm font-body text-af-text-primary">Linear Webhook</p>
+                <p className="text-2xs font-mono text-af-text-tertiary">/webhook</p>
+              </div>
+            </div>
+            <Badge variant="success">Connected</Badge>
+          </div>
+
+          <Separator className="bg-af-surface-border/30" />
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <CheckCircle2 className="h-4 w-4 text-af-status-success" />
+              <div>
+                <p className="text-sm font-body text-af-text-primary">Public API</p>
+                <p className="text-2xs font-mono text-af-text-tertiary">/api/public/stats</p>
+              </div>
+            </div>
+            <Badge variant="success">Active</Badge>
+          </div>
+
+          <Separator className="bg-af-surface-border/30" />
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {hasWorkerAuth ? (
+                <CheckCircle2 className="h-4 w-4 text-af-status-success" />
+              ) : (
+                <AlertCircle className="h-4 w-4 text-af-text-tertiary" />
+              )}
+              <div>
+                <p className="text-sm font-body text-af-text-primary">Worker API</p>
+                <p className="text-2xs font-mono text-af-text-tertiary">/api/workers</p>
+              </div>
+            </div>
+            <Badge variant={hasWorkerAuth ? 'success' : 'secondary'}>
+              {hasWorkerAuth ? 'Authenticated' : 'No Auth Key'}
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* Workers */}
+      <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 overflow-hidden">
+        <div className="px-6 py-4 border-b border-af-surface-border/30">
+          <h3 className="flex items-center gap-2 font-display text-sm font-semibold text-af-text-primary tracking-tight">
+            <Server className="h-4 w-4 text-af-text-tertiary" />
+            Workers
+          </h3>
+          <p className="mt-0.5 text-xs font-body text-af-text-tertiary">
+            {workers.length > 0
+              ? `${workers.length} worker${workers.length !== 1 ? 's' : ''} registered`
+              : !hasWorkerAuth && (stats?.workersOnline ?? 0) > 0
+                ? `${stats!.workersOnline} worker${stats!.workersOnline !== 1 ? 's' : ''} online`
+                : 'No workers connected'}
+          </p>
+        </div>
+
+        <div className="px-6 py-4">
+          {!hasWorkerAuth && (stats?.workersOnline ?? 0) > 0 ? (
+            <div className="space-y-2">
+              <p className="text-sm font-body text-af-text-secondary">
+                {stats!.workersOnline} worker{stats!.workersOnline !== 1 ? 's' : ''} connected to the fleet.
+              </p>
+              <p className="text-xs font-body text-af-text-tertiary">
+                Set <code className="font-mono text-2xs px-1 py-0.5 rounded bg-af-surface-border/30">WORKER_API_KEY</code> to view detailed worker information.
+              </p>
+            </div>
+          ) : workers.length === 0 ? (
+            <p className="text-sm font-body text-af-text-tertiary">
+              Workers will appear here once they register with the server.
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {workers.map((worker) => (
+                <div key={worker.id} className="flex items-center justify-between py-1">
+                  <div className="flex items-center gap-3">
+                    <StatusDot status={worker.status === 'active' ? 'working' : 'stopped'} />
+                    <div>
+                      <p className="text-sm font-mono text-af-text-primary">
+                        {worker.hostname ?? worker.id.slice(0, 8)}
+                      </p>
+                      <p className="text-2xs font-body text-af-text-tertiary">
+                        {worker.activeSessions}/{worker.capacity} slots
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2.5">
+                    <ProviderIcon provider={worker.provider} size={14} />
+                    <Badge variant={worker.status === 'active' ? 'success' : 'secondary'}>
+                      {worker.status}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Fleet Stats */}
+      <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 overflow-hidden">
+        <div className="px-6 py-4 border-b border-af-surface-border/30">
+          <h3 className="flex items-center gap-2 font-display text-sm font-semibold text-af-text-primary tracking-tight">
+            <Shield className="h-4 w-4 text-af-text-tertiary" />
+            Fleet Configuration
+          </h3>
+        </div>
+
+        <div className="px-6 py-4">
+          <div className="grid grid-cols-2 gap-6">
+            <div className="space-y-1">
+              <dt className="text-2xs font-body uppercase tracking-wider text-af-text-tertiary">Total Capacity</dt>
+              <dd className="font-display text-lg font-bold tabular-nums text-af-text-primary">
+                {stats?.availableCapacity ?? '—'}
+              </dd>
+            </div>
+            <div className="space-y-1">
+              <dt className="text-2xs font-body uppercase tracking-wider text-af-text-tertiary">Workers Online</dt>
+              <dd className="font-display text-lg font-bold tabular-nums text-af-text-primary">
+                {stats?.workersOnline ?? '—'}
+              </dd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/empty-state.tsx

@@ -0,0 +1,34 @@
+import { cn } from '../../lib/utils'
+import { Inbox } from 'lucide-react'
+
+interface EmptyStateProps {
+  title?: string
+  description?: string
+  icon?: React.ReactNode
+  className?: string
+  children?: React.ReactNode
+}
+
+export function EmptyState({
+  title = 'No data',
+  description = 'Nothing to show yet.',
+  icon,
+  className,
+  children,
+}: EmptyStateProps) {
+  return (
+    <div className={cn(
+      'flex flex-col items-center justify-center py-16 text-center',
+      className
+    )}>
+      <div className="mb-4 rounded-xl border border-af-surface-border/30 bg-af-surface/20 p-4">
+        <div className="text-af-text-tertiary">
+          {icon ?? <Inbox className="h-8 w-8" />}
+        </div>
+      </div>
+      <h3 className="font-display text-sm font-semibold text-af-text-primary tracking-tight">{title}</h3>
+      <p className="mt-1.5 max-w-xs text-xs font-body text-af-text-tertiary">{description}</p>
+      {children && <div className="mt-5">{children}</div>}
+    </div>
+  )
+}

package/src/components/shared/logo.tsx

@@ -0,0 +1,37 @@
+import { cn } from '../../lib/utils'
+
+interface LogoProps {
+  className?: string
+  size?: number
+}
+
+export function Logo({ className, size = 32 }: LogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('text-af-accent', className)}
+    >
+      <g transform="matrix(1.28321,0,0,1.28321,-56.4612,-56.0276)">
+        <g transform="matrix(1,0,0,1,-278,-269)">
+          <path
+            d="M458,365L448,370L440,378L436,388L436,401L441,412L448,419L459,425L459,569L505,616L504.5,650.092L494.5,655.092L486.5,664.092L482.5,674.092L482.5,686.092L488.5,699.092L496.5,706.092L502.5,709.092L516.5,710.092L530.5,704.092L539.5,693.092L541.5,687.092L541.5,673.092L537.5,664.092L529.5,655.092L519.5,650.092L519,614L564,569L564,507L573,499L577,489L576,481L572,474L562,468L549,469L539,479L539,495L542,500L550,506L550,563L524,589L520,589L519,476L555,447L560,447L648,518L655,521L668,330L693.779,330L695,335L707,467L707,696L704,698L566,698L564,696L565,632L610,587L610,546L620,537L623,524L620,516L613,509L599,507L592,510L584,521L585,535L596,546L596,581L550,627L550,711.779L721,712L721,467L709,334L706,312.662L655,312.662L644,491L637,491L564,431L564,429L575,423L585,411L587,405L587,392L584,384L574,373L565,369L547,370L533,381L528,392L528,405L530,411L541,424L550,428L550,433L524,454L519,453L519,374L528,370L537,361L541,351L540,335L535,326L529,320L517,315L502,316L494,320L488,326L482,339L482,351L487,362L494,369L503,373L505,373.559L504,588L499,589L473,563L473,424L482,420L492,409L495,401L495,388L490,377L482,369L473,365L458,365ZM528.287,679.998C528.287,671.063 520.935,663.711 512,663.711C503.065,663.711 495.713,671.063 495.713,679.998C495.713,688.933 503.065,696.285 512,696.285C520.935,696.285 528.287,688.933 528.287,679.998ZM527.607,344.629C527.607,344.587 527.608,344.545 527.608,344.502C527.608,335.705 520.368,328.465 511.57,328.465C502.773,328.465 495.534,335.705 495.534,344.502C495.534,344.545 495.534,344.587 495.534,344.629C495.534,344.671 495.534,344.713 495.534,344.756C495.534,353.553 502.773,360.793 511.57,360.793C520.368,360.793 527.608,353.553 527.608,344.756C527.608,344.713 527.607,344.671 527.607,344.629ZM573.561,398.285C573.561,389.447 566.288,382.174 557.45,382.174C548.612,382.174 541.339,389.447 541.339,398.285L541.339,398.285C541.339,407.123 548.612,414.396 557.45,414.396C566.288,414.396 573.561,407.123 573.561,398.285L573.561,398.285ZM481.681,394.375C481.681,385.567 474.433,378.319 465.625,378.319C456.817,378.319 449.569,385.567 449.569,394.375L449.569,394.375C449.569,403.183 456.817,410.431 465.625,410.431C474.433,410.431 481.681,403.183 481.681,394.375L481.681,394.375Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          />
+        </g>
+        <g transform="matrix(1,0,0,1,-278,-269)">
+          <path
+            d="M427,365L424,365L322,469L322,712L473,711.779L473,628L427,581L427,520L438,509L439,495L431,484L424,481L416,481L409,484L403,490L400,499L403,511L413,520L413,587L459,634L459,696L457,698L339,698L337,696L337,476L408,401.455L413,397L413,460L426,460L427,365Z"
+            fill="currentColor"
+            fillRule="nonzero"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}