@bytespell/shella 0.1.18 → 0.2.1

package/bundled-plugins/agent/src/App.tsx

@@ -0,0 +1,586 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import { Switch } from "@/components/ui/switch"
+import { Streamdown } from 'streamdown'
+import { code } from '@streamdown/code'
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
+
+interface Message {
+  role: 'user' | 'assistant' | 'tool_result'
+  content: ContentBlock[]
+}
+
+interface ContentBlock {
+  type: 'text' | 'thinking' | 'tool_use' | 'tool_result'
+  text?: string
+  thinking?: string
+  name?: string
+  input?: Record<string, unknown>
+}
+
+interface ToolExecution {
+  toolCallId: string
+  toolName: string
+  args: Record<string, unknown>
+  status: 'running' | 'done' | 'error'
+  partialResult?: string
+  isError?: boolean
+}
+
+interface SessionState {
+  model?: { provider: string; id: string; name?: string; reasoning?: boolean }
+  thinkingLevel?: string
+  isStreaming: boolean
+  isCompacting?: boolean
+  autoCompactionEnabled?: boolean
+}
+
+interface SessionStats {
+  tokens?: {
+    input: number
+    output: number
+    cacheRead?: number
+    cacheWrite?: number
+    total: number
+  }
+  cost?: number
+}
+
+interface AvailableModel {
+  provider: string
+  id: string
+  name?: string
+  reasoning?: boolean
+}
+
+const THINKING_LEVELS = ['off', 'minimal', 'low', 'medium', 'high', 'xhigh'] as const
+
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+function ScrollToBottom() {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext()
+
+  if (isAtBottom) return null
+
+  return (
+    <button
+      className="absolute left-1/2 -translate-x-1/2 bottom-4 bg-muted hover:bg-muted/80 text-muted-foreground px-3 py-1 rounded-full text-xs shadow-lg"
+      onClick={() => scrollToBottom()}
+    >
+      Scroll to bottom
+    </button>
+  )
+}
+
+export function App() {
+  const [status, setStatus] = useState<ConnectionStatus>('connecting')
+  const [authStatus, setAuthStatus] = useState<{ authenticated: boolean; providers: string[] } | null>(null)
+  const [sessionState, setSessionState] = useState<SessionState | null>(null)
+  const [messages, setMessages] = useState<Message[]>([])
+  const [streamingMessage, setStreamingMessage] = useState<Message | null>(null)
+  const [toolExecutions, setToolExecutions] = useState<Map<string, ToolExecution>>(new Map())
+  const [input, setInput] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [availableModels, setAvailableModels] = useState<AvailableModel[]>([])
+  const [sessionStats, setSessionStats] = useState<SessionStats | null>(null)
+
+  const wsRef = useRef<WebSocket | null>(null)
+
+  useEffect(() => {
+    fetch('/api/auth/status')
+      .then(r => r.json())
+      .then(setAuthStatus)
+      .catch(() => setAuthStatus({ authenticated: false, providers: [] }))
+  }, [])
+
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const ws = new WebSocket(`${protocol}//${window.location.host}/ws`)
+    wsRef.current = ws
+
+    ws.onopen = () => {
+      setStatus('connected')
+      setError(null)
+      ws.send(JSON.stringify({ type: 'start' }))
+    }
+
+    ws.onclose = () => setStatus('disconnected')
+    ws.onerror = () => {
+      setStatus('error')
+      setError('WebSocket connection failed')
+    }
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data)
+        handleMessage(data)
+      } catch (err) {
+        console.error('Parse error:', err)
+      }
+    }
+
+    return () => ws.close()
+  }, [])
+
+  const handleMessage = useCallback((data: { type: string; event?: Record<string, unknown>; message?: string }) => {
+    if (data.type === 'ready') {
+      setStatus('connected')
+    } else if (data.type === 'error') {
+      setError(data.message || 'Unknown error')
+    } else if (data.type === 'rpc_event') {
+      handleRpcEvent(data.event!)
+    }
+  }, [])
+
+  const handleRpcEvent = useCallback((event: Record<string, unknown>) => {
+    const eventType = event.type as string
+
+    if (eventType === 'response') {
+      const command = event.command as string
+      if (command === 'get_state' && event.success) {
+        setSessionState(event.data as SessionState)
+      } else if (command === 'get_messages' && event.success) {
+        const data = event.data as { messages: Message[] }
+        console.log('[App] Got messages:', JSON.stringify(data.messages, null, 2))
+        setMessages(data.messages || [])
+      } else if (command === 'get_available_models' && event.success) {
+        const data = event.data as { models: AvailableModel[] }
+        setAvailableModels(data.models || [])
+      } else if (command === 'set_model' && event.success) {
+        wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_state' } }))
+      } else if (command === 'get_session_stats' && event.success) {
+        setSessionStats(event.data as SessionStats)
+      } else if (command === 'set_thinking_level' && event.success) {
+        wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_state' } }))
+      } else if (command === 'set_auto_compaction' && event.success) {
+        wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_state' } }))
+      } else if (command === 'compact' && event.success) {
+        wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_state' } }))
+        wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_session_stats' } }))
+      } else if (command === 'new_session' && event.success) {
+        setMessages([])
+        setSessionStats(null)
+        wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_state' } }))
+      }
+    } else if (eventType === 'agent_start') {
+      setStreamingMessage(null)
+      setToolExecutions(new Map())
+    } else if (eventType === 'agent_end') {
+      setStreamingMessage(null)
+      setToolExecutions(new Map()) // Clear tool executions to avoid duplication
+      wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_messages' } }))
+      wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_state' } }))
+      wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_session_stats' } }))
+    } else if (eventType === 'message_start' || eventType === 'message_update') {
+      const msg = event.message as Message
+      if (msg?.role === 'assistant') {
+        setStreamingMessage(msg)
+      }
+    } else if (eventType === 'message_end') {
+      setStreamingMessage(null)
+    } else if (eventType === 'tool_execution_start') {
+      const toolCallId = event.toolCallId as string
+      setToolExecutions(prev => {
+        const next = new Map(prev)
+        next.set(toolCallId, {
+          toolCallId,
+          toolName: event.toolName as string,
+          args: event.args as Record<string, unknown>,
+          status: 'running',
+        })
+        return next
+      })
+    } else if (eventType === 'tool_execution_update') {
+      const toolCallId = event.toolCallId as string
+      const partialResult = event.partialResult as { content: ContentBlock[] }
+      setToolExecutions(prev => {
+        const next = new Map(prev)
+        const existing = next.get(toolCallId)
+        if (existing) {
+          const text = partialResult?.content?.find(c => c.type === 'text')?.text
+          next.set(toolCallId, { ...existing, partialResult: text })
+        }
+        return next
+      })
+    } else if (eventType === 'tool_execution_end') {
+      const toolCallId = event.toolCallId as string
+      setToolExecutions(prev => {
+        const next = new Map(prev)
+        const existing = next.get(toolCallId)
+        if (existing) {
+          const result = event.result as { content: ContentBlock[] }
+          next.set(toolCallId, {
+            ...existing,
+            status: event.isError ? 'error' : 'done',
+            partialResult: result?.content?.find(c => c.type === 'text')?.text,
+            isError: event.isError as boolean,
+          })
+        }
+        return next
+      })
+    }
+  }, [])
+
+  const sendMessage = useCallback(() => {
+    if (!input.trim() || !wsRef.current || sessionState?.isStreaming) return
+    const message = input.trim()
+    setInput('')
+    setMessages(prev => [...prev, { role: 'user', content: [{ type: 'text', text: message }] }])
+    wsRef.current.send(JSON.stringify({ type: 'prompt', message }))
+  }, [input, sessionState?.isStreaming])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      sendMessage()
+    }
+  }, [sendMessage])
+
+  const handleAbort = useCallback(() => {
+    wsRef.current?.send(JSON.stringify({ type: 'abort' }))
+  }, [])
+
+  const refreshAuth = useCallback(async () => {
+    const res = await fetch('/api/auth/status')
+    setAuthStatus(await res.json())
+  }, [])
+
+  // Check if model supports reasoning - must be explicitly true
+  const supportsReasoning = sessionState?.model?.reasoning === true
+
+  // Get text content from a message, handling different content block structures
+  const getTextContent = (msg: Message): string => {
+    for (const block of msg.content) {
+      // Handle standard text blocks
+      if (block.type === 'text' && block.text) {
+        return block.text
+      }
+      // Handle blocks that might just have text property without type
+      if ('text' in block && typeof (block as { text?: string }).text === 'string') {
+        return (block as { text: string }).text
+      }
+    }
+    return ''
+  }
+
+  const hasDisplayableContent = (msg: Message): boolean => {
+    // Don't show tool_result messages
+    if (msg.role === 'tool_result') return false
+
+    // Check if there's any text content
+    const text = getTextContent(msg)
+    if (text.trim()) return true
+
+    // Check for thinking content
+    for (const block of msg.content) {
+      if (block.type === 'thinking' && block.thinking?.trim()) return true
+    }
+
+    return false
+  }
+
+  const renderContent = (content: ContentBlock[], isStreaming = false) => {
+    const elements: React.ReactNode[] = []
+
+    for (let i = 0; i < content.length; i++) {
+      const block = content[i]!
+
+      // Handle text blocks
+      if (block.type === 'text' && block.text?.trim()) {
+        elements.push(
+          <div key={i} className="prose prose-sm dark:prose-invert max-w-none break-words overflow-hidden">
+            <Streamdown mode={isStreaming ? undefined : "static"} plugins={{ code }}>
+              {block.text}
+            </Streamdown>
+          </div>
+        )
+      }
+      // Handle thinking blocks
+      else if (block.type === 'thinking' && block.thinking?.trim()) {
+        elements.push(
+          <details key={i} className="text-muted-foreground text-sm">
+            <summary className="cursor-pointer">Thinking...</summary>
+            <div className="mt-2 pl-3 border-l-2 border-muted break-words overflow-hidden">{block.thinking}</div>
+          </details>
+        )
+      }
+      // Handle blocks that might just have text without proper type
+      else if ('text' in block && typeof (block as { text?: string }).text === 'string' && (block as { text: string }).text.trim()) {
+        const text = (block as { text: string }).text
+        elements.push(
+          <div key={i} className="prose prose-sm dark:prose-invert max-w-none break-words overflow-hidden">
+            <Streamdown mode={isStreaming ? undefined : "static"} plugins={{ code }}>
+              {text}
+            </Streamdown>
+          </div>
+        )
+      }
+    }
+
+    return elements
+  }
+
+  // Auth screen
+  if (authStatus && !authStatus.authenticated && status === 'connected') {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background p-4">
+        <Card className="max-w-sm w-full">
+          <CardContent className="pt-6 text-center space-y-4">
+            <p className="text-muted-foreground text-sm">
+              Run <code className="bg-muted px-1.5 py-0.5 rounded">pi</code> in your terminal to log in.
+            </p>
+            <div className="text-left text-sm text-muted-foreground">
+              <p className="mb-2">Supported providers:</p>
+              <ul className="list-disc list-inside space-y-1">
+                <li>Anthropic (Claude Pro/Max)</li>
+                <li>GitHub Copilot</li>
+                <li>Google Gemini CLI</li>
+                <li>OpenAI Codex</li>
+              </ul>
+            </div>
+            <Button variant="secondary" onClick={refreshAuth}>Refresh</Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const filteredMessages = messages.filter(hasDisplayableContent)
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden fixed inset-0">
+      {/* Header - minimal */}
+      <div className="flex items-center justify-between px-4 py-2 border-b flex-shrink-0">
+        <div className="flex items-center gap-2">
+          {/* Session stats */}
+          {sessionStats?.tokens && (
+            <span className="text-xs text-muted-foreground">
+              {sessionStats.tokens.total.toLocaleString()}tk
+              {sessionStats.cost !== undefined && ` · $${sessionStats.cost.toFixed(3)}`}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Compact button */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 px-3 text-xs"
+            onClick={() => {
+              wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'compact' } }))
+            }}
+            disabled={sessionState?.isCompacting || sessionState?.isStreaming}
+          >
+            {sessionState?.isCompacting ? '...' : 'Compact'}
+          </Button>
+
+          {/* New session button */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 px-3 text-xs"
+            onClick={() => {
+              wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'new_session' } }))
+            }}
+            disabled={sessionState?.isStreaming}
+          >
+            New
+          </Button>
+
+          {/* Settings dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-7 px-2 text-xs">
+                Settings
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <div className="flex items-center justify-between px-2 py-1.5 gap-4">
+                <span className="text-xs">Auto-compact</span>
+                <Switch
+                  checked={sessionState?.autoCompactionEnabled ?? true}
+                  onCheckedChange={(checked) => {
+                    wsRef.current?.send(JSON.stringify({
+                      type: 'command',
+                      command: { type: 'set_auto_compaction', enabled: checked }
+                    }))
+                  }}
+                  className="scale-75"
+                />
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Connection status */}
+          <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+            status === 'connected' ? 'bg-green-500' :
+            status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
+          }`} />
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="px-4 py-2 bg-destructive/10 text-destructive text-sm flex justify-between flex-shrink-0">
+          <span>{error}</span>
+          <button onClick={() => setError(null)} className="text-xs hover:underline">Dismiss</button>
+        </div>
+      )}
+
+      {/* Messages with stick-to-bottom */}
+      <StickToBottom className="flex-1 relative" resize="smooth" initial="smooth">
+        <StickToBottom.Content className="flex flex-col gap-4 p-4">
+          {filteredMessages.length === 0 && !streamingMessage && (
+            <div className="h-full flex items-center justify-center text-muted-foreground min-h-[200px]">
+              Start a conversation
+            </div>
+          )}
+
+          {filteredMessages.map((msg, i) => (
+            <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`max-w-[80%] rounded-lg px-4 py-2 overflow-hidden ${
+                msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'
+              }`}>
+                {renderContent(msg.content, false)}
+              </div>
+            </div>
+          ))}
+
+          {streamingMessage && (() => {
+            const rendered = renderContent(streamingMessage.content, true)
+            if (rendered.length === 0) return null
+            return (
+              <div className="flex justify-start">
+                <div className="max-w-[80%] rounded-lg px-4 py-2 bg-muted overflow-hidden">
+                  {rendered}
+                  <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-1" />
+                </div>
+              </div>
+            )
+          })()}
+
+          {toolExecutions.size > 0 && (
+            <div className="space-y-2">
+              {Array.from(toolExecutions.values()).map(tool => (
+                <Card key={tool.toolCallId} className="overflow-hidden">
+                  <div className="flex items-center gap-2 px-3 py-2 bg-muted/50">
+                    <span className={`w-2 h-2 rounded-full ${
+                      tool.status === 'running' ? 'bg-yellow-500 animate-pulse' :
+                      tool.status === 'done' ? 'bg-green-500' : 'bg-red-500'
+                    }`} />
+                    <code className="text-xs">{tool.toolName}</code>
+                    {tool.status === 'running' && (
+                      <span className="ml-auto text-xs text-muted-foreground">Running</span>
+                    )}
+                  </div>
+                  {tool.partialResult && (
+                    <pre className="p-3 text-xs overflow-auto max-h-32 bg-background break-all">
+                      {tool.partialResult}
+                    </pre>
+                  )}
+                </Card>
+              ))}
+            </div>
+          )}
+        </StickToBottom.Content>
+
+        <ScrollToBottom />
+      </StickToBottom>
+
+      {/* Input area with model/thinking controls */}
+      <div className="border-t p-4 flex-shrink-0">
+        {/* Model and thinking level controls */}
+        <div className="flex items-center gap-2 mb-3">
+          {/* Model selector */}
+          <DropdownMenu onOpenChange={(open) => {
+            if (open) {
+              wsRef.current?.send(JSON.stringify({ type: 'command', command: { type: 'get_available_models' } }))
+            }
+          }}>
+            <DropdownMenuTrigger asChild>
+              <Badge variant="secondary" className="text-xs cursor-pointer">
+                {sessionState?.model?.name || sessionState?.model?.id || 'Select model'}
+              </Badge>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="max-h-80 overflow-y-auto min-w-[200px]">
+              {availableModels.length === 0 ? (
+                <div className="px-2 py-1 text-xs text-muted-foreground">Loading models...</div>
+              ) : (
+                availableModels.map((model) => (
+                  <DropdownMenuItem
+                    key={`${model.provider}/${model.id}`}
+                    onClick={() => {
+                      wsRef.current?.send(JSON.stringify({
+                        type: 'command',
+                        command: { type: 'set_model', provider: model.provider, modelId: model.id }
+                      }))
+                    }}
+                  >
+                    <span className="text-xs">{model.name || model.id}</span>
+                    <span className="text-xs text-muted-foreground ml-2">{model.provider}</span>
+                    {model.reasoning && <span className="text-xs text-muted-foreground ml-1">(reasoning)</span>}
+                  </DropdownMenuItem>
+                ))
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Thinking level selector - only show if model explicitly supports reasoning */}
+          {supportsReasoning && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Badge variant="outline" className="text-xs cursor-pointer">
+                  thinking: {sessionState?.thinkingLevel || 'medium'}
+                </Badge>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                {THINKING_LEVELS.map((level) => (
+                  <DropdownMenuItem
+                    key={level}
+                    onClick={() => {
+                      wsRef.current?.send(JSON.stringify({
+                        type: 'command',
+                        command: { type: 'set_thinking_level', level }
+                      }))
+                    }}
+                  >
+                    <span className={`text-xs ${sessionState?.thinkingLevel === level ? 'font-bold' : ''}`}>
+                      {level}
+                    </span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+
+        {/* Text input and send button */}
+        <div className="flex gap-2 items-end">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={sessionState?.isStreaming ? 'Agent is responding...' : 'Type a message...'}
+            disabled={status !== 'connected'}
+            className="min-h-[44px] max-h-[200px] resize-none flex-1"
+            rows={1}
+          />
+          {sessionState?.isStreaming ? (
+            <Button variant="destructive" onClick={handleAbort} className="h-[44px]">Stop</Button>
+          ) : (
+            <Button onClick={sendMessage} disabled={!input.trim() || status !== 'connected'} className="h-[44px]">
+              Send
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App

package/bundled-plugins/agent/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>