@swarmclawai/swarmclaw 0.2.0

package/src/components/webhooks/webhook-list.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+function webhookUrl(id: string): string {
+  if (typeof window === 'undefined') return `/api/webhooks/${id}`
+  return `${window.location.origin}/api/webhooks/${id}`
+}
+
+function formatEvents(events: string[] | undefined): string {
+  const list = Array.isArray(events) ? events.filter(Boolean) : []
+  if (list.length === 0) return 'all events'
+  if (list.length <= 2) return list.join(', ')
+  return `${list.slice(0, 2).join(', ')}, +${list.length - 2}`
+}
+
+export function WebhookList({ inSidebar }: { inSidebar?: boolean }) {
+  const webhooks = useAppStore((s) => s.webhooks)
+  const loadWebhooks = useAppStore((s) => s.loadWebhooks)
+  const setWebhookSheetOpen = useAppStore((s) => s.setWebhookSheetOpen)
+  const setEditingWebhookId = useAppStore((s) => s.setEditingWebhookId)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const [copied, setCopied] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadWebhooks()
+    loadAgents()
+  }, [loadWebhooks, loadAgents])
+
+  const list = useMemo(
+    () => Object.values(webhooks).sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0)),
+    [webhooks]
+  )
+
+  const copyText = async (key: string, value: string) => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(key)
+      setTimeout(() => setCopied((prev) => (prev === key ? null : prev)), 1400)
+    } catch {
+      // ignore clipboard failures (e.g. unsupported environment)
+    }
+  }
+
+  if (!list.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center px-6 py-12 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-white/[0.03] border border-white/[0.06] flex items-center justify-center mb-4">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3">
+            <path d="M22 12h-4l-3 7L9 5l-3 7H2" />
+          </svg>
+        </div>
+        <p className="text-[13px] text-text-3 mb-1 font-600">No webhooks yet</p>
+        <p className="text-[12px] text-text-3/60">Create inbound endpoints to trigger agent runs</p>
+        <button
+          onClick={() => {
+            setEditingWebhookId(null)
+            setWebhookSheetOpen(true)
+          }}
+          className="mt-3 text-[13px] text-accent-bright hover:underline cursor-pointer bg-transparent border-none"
+        >
+          + Add Webhook
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'pb-10' : 'pb-20'}`}>
+      {list.map((hook) => {
+        const agentName = hook.agentId ? agents[hook.agentId]?.name : null
+        const endpoint = webhookUrl(hook.id)
+        const copiedEndpoint = copied === `endpoint:${hook.id}`
+        const copiedSecret = copied === `secret:${hook.id}`
+        const hasSecret = typeof hook.secret === 'string' && hook.secret.trim().length > 0
+
+        return (
+          <div
+            key={hook.id}
+            className="w-full flex items-center gap-2.5 px-5 py-3 hover:bg-white/[0.02] transition-colors group"
+          >
+            <button
+              onClick={() => {
+                setEditingWebhookId(hook.id)
+                setWebhookSheetOpen(true)
+              }}
+              className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer bg-transparent border-none text-left p-0"
+            >
+              <div className={`shrink-0 w-9 h-9 rounded-[10px] border flex items-center justify-center ${
+                hook.isEnabled
+                  ? 'bg-emerald-500/12 border-emerald-500/20 text-emerald-300'
+                  : 'bg-white/[0.03] border-white/[0.08] text-text-3'
+              }`}>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <path d="M22 12h-4l-3 7L9 5l-3 7H2" />
+                </svg>
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-600 text-text truncate">{hook.name || 'Unnamed Webhook'}</span>
+                  <span className={`shrink-0 w-2 h-2 rounded-full ${hook.isEnabled ? 'bg-emerald-400' : 'bg-white/20'}`} />
+                </div>
+                <div className="text-[11px] text-text-3 truncate">
+                  {hook.source || 'custom'} · {formatEvents(hook.events)}{agentName ? ` · ${agentName}` : ''}
+                </div>
+              </div>
+            </button>
+
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                copyText(`endpoint:${hook.id}`, endpoint)
+              }}
+              title={copiedEndpoint ? 'Copied endpoint' : 'Copy endpoint URL'}
+              className={`shrink-0 w-8 h-8 rounded-[8px] flex items-center justify-center transition-all cursor-pointer border-none ${
+                copiedEndpoint
+                  ? 'opacity-100 bg-emerald-500/15 text-emerald-300'
+                  : 'opacity-0 group-hover:opacity-100 focus:opacity-100 bg-accent-soft/40 text-accent-bright hover:bg-accent-soft'
+              }`}
+            >
+              {copiedEndpoint ? (
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              ) : (
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+              )}
+            </button>
+
+            {hasSecret && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  copyText(`secret:${hook.id}`, hook.secret!.trim())
+                }}
+                title={copiedSecret ? 'Copied secret' : 'Copy secret'}
+                className={`shrink-0 w-8 h-8 rounded-[8px] flex items-center justify-center transition-all cursor-pointer border-none ${
+                  copiedSecret
+                    ? 'opacity-100 bg-emerald-500/15 text-emerald-300'
+                    : 'opacity-0 group-hover:opacity-100 focus:opacity-100 bg-white/[0.04] text-text-2 hover:bg-white/[0.08]'
+                }`}
+              >
+                {copiedSecret ? (
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                ) : (
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                  </svg>
+                )}
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/webhooks/webhook-sheet.tsx

@@ -0,0 +1,402 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { api } from '@/lib/api-client'
+import type { Webhook, WebhookLogEntry } from '@/types'
+
+type WebhookApiResponse = Webhook | { error: string }
+type DeleteWebhookResponse = { ok: boolean } | { error: string }
+
+const inputClass = 'w-full px-4 py-3 rounded-[14px] bg-bg border border-white/[0.06] text-text text-[14px] outline-none focus:border-accent-bright/40 transition-colors placeholder:text-text-3/70'
+
+function webhookUrl(id: string): string {
+  if (typeof window === 'undefined') return `/api/webhooks/${id}`
+  return `${window.location.origin}/api/webhooks/${id}`
+}
+
+function parseEvents(input: string): string[] {
+  const values = input
+    .split(/[\n,]+/)
+    .map((v) => v.trim())
+    .filter(Boolean)
+  return Array.from(new Set(values))
+}
+
+function makeSecret(length = 28): string {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789'
+  const arr = new Uint8Array(length)
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+    crypto.getRandomValues(arr)
+  } else {
+    for (let i = 0; i < length; i++) arr[i] = Math.floor(Math.random() * 256)
+  }
+  let out = ''
+  for (let i = 0; i < length; i++) out += chars[arr[i] % chars.length]
+  return out
+}
+
+export function WebhookSheet() {
+  const open = useAppStore((s) => s.webhookSheetOpen)
+  const setOpen = useAppStore((s) => s.setWebhookSheetOpen)
+  const editingId = useAppStore((s) => s.editingWebhookId)
+  const setEditingId = useAppStore((s) => s.setEditingWebhookId)
+  const webhooks = useAppStore((s) => s.webhooks)
+  const loadWebhooks = useAppStore((s) => s.loadWebhooks)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+
+  const [name, setName] = useState('')
+  const [source, setSource] = useState('custom')
+  const [eventsText, setEventsText] = useState('')
+  const [agentId, setAgentId] = useState('')
+  const [secret, setSecret] = useState('')
+  const [isEnabled, setIsEnabled] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [copied, setCopied] = useState<'endpoint' | 'secret' | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [tab, setTab] = useState<'config' | 'history'>('config')
+  const [history, setHistory] = useState<WebhookLogEntry[]>([])
+  const [historyLoading, setHistoryLoading] = useState(false)
+
+  const editing = editingId ? (webhooks[editingId] as Webhook | undefined) : null
+  const endpoint = editing ? webhookUrl(editing.id) : ''
+  const orchestrators = useMemo(
+    () => Object.values(agents).filter((a) => a.isOrchestrator),
+    [agents]
+  )
+
+  useEffect(() => {
+    if (open) {
+      loadWebhooks()
+      loadAgents()
+      setCopied(null)
+      setError(null)
+      setTab('config')
+      setHistory([])
+    }
+  }, [open, loadWebhooks, loadAgents])
+
+  useEffect(() => {
+    if (tab === 'history' && editing) {
+      setHistoryLoading(true)
+      api<WebhookLogEntry[]>('GET', `/webhooks/${editing.id}/history`)
+        .then((res) => setHistory(Array.isArray(res) ? res : []))
+        .catch(() => setHistory([]))
+        .finally(() => setHistoryLoading(false))
+    }
+  }, [tab, editing])
+
+  useEffect(() => {
+    if (editing) {
+      setName(editing.name || '')
+      setSource(editing.source || 'custom')
+      setEventsText((editing.events || []).join(', '))
+      setAgentId(editing.agentId || '')
+      setSecret(editing.secret || '')
+      setIsEnabled(editing.isEnabled !== false)
+    } else {
+      setName('')
+      setSource('custom')
+      setEventsText('')
+      setAgentId('')
+      setSecret(makeSecret())
+      setIsEnabled(true)
+    }
+  }, [editing, open])
+
+  const handleClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  const copyText = async (type: 'endpoint' | 'secret', value: string) => {
+    if (!value) return
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(type)
+      setTimeout(() => setCopied((prev) => (prev === type ? null : prev)), 1500)
+    } catch {
+      // ignore clipboard errors
+    }
+  }
+
+  const handleSave = async () => {
+    if (!agentId) {
+      setError('An orchestrator agent is required.')
+      return
+    }
+
+    const payload = {
+      name: name.trim() || 'Unnamed Webhook',
+      source: source.trim() || 'custom',
+      events: parseEvents(eventsText),
+      agentId: agentId || null,
+      secret: secret.trim(),
+      isEnabled,
+    }
+
+    setSaving(true)
+    setError(null)
+    try {
+      if (editing) {
+        const updated = await api<WebhookApiResponse>('PUT', `/webhooks/${editing.id}`, payload)
+        if ('error' in updated && updated.error) throw new Error(updated.error)
+      } else {
+        const created = await api<WebhookApiResponse>('POST', '/webhooks', payload)
+        if ('error' in created && created.error) throw new Error(created.error)
+      }
+      await loadWebhooks()
+      handleClose()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save webhook')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!editing || !confirm('Delete this webhook?')) return
+    try {
+      const res = await api<DeleteWebhookResponse>('DELETE', `/webhooks/${editing.id}`)
+      if ('error' in res && res.error) throw new Error(res.error)
+      await loadWebhooks()
+      handleClose()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete webhook')
+    }
+  }
+
+  return (
+    <BottomSheet open={open} onClose={handleClose} wide>
+      <div className="space-y-6">
+        <div>
+          <h2 className="font-display text-[24px] font-700 tracking-[-0.02em] mb-1">
+            {editing ? 'Edit Webhook' : 'New Webhook'}
+          </h2>
+          <p className="text-[13px] text-text-3">Create an inbound endpoint that triggers an orchestrator</p>
+        </div>
+
+        {editing && (
+          <div className="flex gap-1 p-1 rounded-[12px] bg-bg border border-white/[0.06]">
+            {(['config', 'history'] as const).map((t) => (
+              <button
+                key={t}
+                onClick={() => setTab(t)}
+                className={`flex-1 py-2 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none capitalize ${
+                  tab === t ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+                }`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {tab === 'history' && editing ? (
+          <div>
+            {historyLoading ? (
+              <div className="text-center py-8 text-[13px] text-text-3">Loading history...</div>
+            ) : history.length === 0 ? (
+              <div className="text-center py-8 text-[13px] text-text-3/60">No webhook invocations yet</div>
+            ) : (
+              <div className="space-y-2 max-h-[400px] overflow-y-auto">
+                {history.map((entry) => (
+                  <div key={entry.id} className="p-3 rounded-[10px] border border-white/[0.06] bg-white/[0.02]">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className={`text-[10px] font-700 uppercase tracking-wider px-1.5 py-0.5 rounded-[4px] ${
+                        entry.status === 'success' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'
+                      }`}>
+                        {entry.status}
+                      </span>
+                      <span className="text-[11px] text-text-3/60 font-mono">{entry.event}</span>
+                      <span className="text-[10px] text-text-3/40 ml-auto">
+                        {new Date(entry.timestamp).toLocaleString()}
+                      </span>
+                    </div>
+                    {entry.error && (
+                      <div className="text-[11px] text-red-300/80 mt-1">{entry.error}</div>
+                    )}
+                    {entry.sessionId && (
+                      <div className="text-[10px] text-text-3/50 mt-1 font-mono">Session: {entry.sessionId}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : null}
+
+        {tab === 'config' && error && (
+          <div className="px-3.5 py-2.5 rounded-[12px] bg-red-500/10 border border-red-500/20 text-[12px] text-red-300">
+            {error}
+          </div>
+        )}
+
+        {tab === 'config' && editing && (
+          <div className="p-4 rounded-[14px] bg-white/[0.02] border border-white/[0.06]">
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Endpoint URL</label>
+            <div className="flex gap-2">
+              <input
+                readOnly
+                value={endpoint}
+                className={`${inputClass} font-mono text-[12px]`}
+              />
+              <button
+                onClick={() => copyText('endpoint', endpoint)}
+                className="px-3.5 py-2 rounded-[10px] border border-accent-bright/20 bg-accent-soft/40 text-accent-bright text-[12px] font-600 cursor-pointer hover:bg-accent-soft transition-colors"
+                style={{ fontFamily: 'inherit' }}
+              >
+                {copied === 'endpoint' ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+            <p className="mt-2 text-[11px] text-text-3/70">
+              POST JSON payloads to this URL. Include <code className="font-mono">x-webhook-secret</code> if a secret is set.
+            </p>
+          </div>
+        )}
+
+        {tab === 'config' && <>
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. GitHub Push"
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Source</label>
+          <input
+            type="text"
+            value={source}
+            onChange={(e) => setSource(e.target.value)}
+            placeholder="custom, github, slack..."
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Route to Orchestrator</label>
+          <select
+            value={agentId}
+            onChange={(e) => setAgentId(e.target.value)}
+            className={`${inputClass} appearance-none cursor-pointer`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="">Select orchestrator...</option>
+            {orchestrators.map((agent) => (
+              <option key={agent.id} value={agent.id}>{agent.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">
+            Events <span className="normal-case tracking-normal font-normal text-text-3/70">(optional)</span>
+          </label>
+          <textarea
+            value={eventsText}
+            onChange={(e) => setEventsText(e.target.value)}
+            placeholder="push, release or *"
+            rows={3}
+            className={`${inputClass} resize-y min-h-[86px] font-mono text-[12px]`}
+            style={{ fontFamily: 'inherit' }}
+          />
+          <p className="mt-1.5 text-[11px] text-text-3/70">Leave blank for all events. Use commas or new lines. Use <code>*</code> to match all.</p>
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">
+            Secret <span className="normal-case tracking-normal font-normal text-text-3/70">(optional but recommended)</span>
+          </label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={secret}
+              onChange={(e) => setSecret(e.target.value)}
+              placeholder="x-webhook-secret value"
+              className={`${inputClass} font-mono text-[12px]`}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <button
+              onClick={() => copyText('secret', secret)}
+              disabled={!secret.trim()}
+              className="px-3.5 py-2 rounded-[10px] border border-white/[0.1] bg-white/[0.04] text-text-2 text-[12px] font-600 cursor-pointer hover:bg-white/[0.08] transition-colors disabled:opacity-40"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {copied === 'secret' ? 'Copied' : 'Copy'}
+            </button>
+            <button
+              onClick={() => setSecret(makeSecret())}
+              className="px-3.5 py-2 rounded-[10px] border border-accent-bright/20 bg-accent-soft/40 text-accent-bright text-[12px] font-600 cursor-pointer hover:bg-accent-soft transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Regenerate
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Status</label>
+          <div className="flex p-1 rounded-[12px] bg-bg border border-white/[0.06]">
+            <button
+              onClick={() => setIsEnabled(true)}
+              className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none ${
+                isEnabled ? 'bg-emerald-500/15 text-emerald-300' : 'bg-transparent text-text-3 hover:text-text-2'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              Enabled
+            </button>
+            <button
+              onClick={() => setIsEnabled(false)}
+              className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none ${
+                !isEnabled ? 'bg-white/[0.08] text-text-2' : 'bg-transparent text-text-3 hover:text-text-2'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              Disabled
+            </button>
+          </div>
+        </div>
+
+        <div className="flex gap-3 pt-2">
+          {editing && (
+            <button
+              onClick={handleDelete}
+              className="px-5 py-3 rounded-[14px] border border-danger/30 bg-transparent text-danger text-[14px] font-600 cursor-pointer hover:bg-danger/10 transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Delete
+            </button>
+          )}
+          <div className="flex-1" />
+          <button
+            onClick={handleClose}
+            className="px-5 py-3 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 transition-colors"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {saving ? 'Saving...' : editing ? 'Update' : 'Create'}
+          </button>
+        </div>
+        </>}
+      </div>
+    </BottomSheet>
+  )
+}

package/src/hooks/use-auto-resize.ts

@@ -0,0 +1,20 @@
+'use client'
+
+import { useCallback, useEffect, useRef } from 'react'
+
+export function useAutoResize(maxHeight = 120) {
+  const ref = useRef<HTMLTextAreaElement>(null)
+
+  const resize = useCallback(() => {
+    const el = ref.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px'
+  }, [maxHeight])
+
+  useEffect(() => {
+    resize()
+  }, [resize])
+
+  return { ref, resize }
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,21 @@
+'use client'
+
+import { useCallback, useSyncExternalStore } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (callback: () => void) => {
+      const mql = window.matchMedia(query)
+      mql.addEventListener('change', callback)
+      return () => mql.removeEventListener('change', callback)
+    },
+    [query],
+  )
+
+  const getSnapshot = () => window.matchMedia(query).matches
+
+  // Return false during SSR — matches initial client render before hydration
+  const getServerSnapshot = () => false
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}