clawport-ui 0.1.0

package/app/settings-provider.tsx

@@ -0,0 +1,209 @@
+'use client'
+
+import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import type { Agent } from '@/lib/types'
+import {
+  type ClawPortSettings,
+  type AgentOverride,
+  DEFAULTS,
+  loadSettings,
+  saveSettings,
+  hexToAccentFill,
+  hexToContrastText,
+} from '@/lib/settings'
+
+interface AgentDisplay {
+  emoji: string
+  profileImage?: string
+  emojiOnly?: boolean
+}
+
+interface SettingsContextValue {
+  settings: ClawPortSettings
+  setAccentColor: (color: string | null) => void
+  setPortalName: (name: string | null) => void
+  setPortalSubtitle: (subtitle: string | null) => void
+  setPortalEmoji: (emoji: string | null) => void
+  setPortalIcon: (icon: string | null) => void
+  setIconBgHidden: (hidden: boolean) => void
+  setEmojiOnly: (emojiOnly: boolean) => void
+  setOperatorName: (name: string | null) => void
+  setAgentOverride: (agentId: string, override: AgentOverride) => void
+  clearAgentOverride: (agentId: string) => void
+  getAgentDisplay: (agent: Agent) => AgentDisplay
+  resetAll: () => void
+}
+
+const SettingsContext = createContext<SettingsContextValue>({
+  settings: { accentColor: null, portalName: null, portalSubtitle: null, portalEmoji: null, portalIcon: null, iconBgHidden: false, emojiOnly: false, operatorName: null, agentOverrides: {} },
+  setAccentColor: () => {},
+  setPortalName: () => {},
+  setPortalSubtitle: () => {},
+  setPortalEmoji: () => {},
+  setPortalIcon: () => {},
+  setIconBgHidden: () => {},
+  setEmojiOnly: () => {},
+  setOperatorName: () => {},
+  setAgentOverride: () => {},
+  clearAgentOverride: () => {},
+  getAgentDisplay: (agent) => ({ emoji: agent.emoji }),
+  resetAll: () => {},
+})
+
+export function SettingsProvider({ children }: { children: React.ReactNode }) {
+  // Initialize with defaults so server and client render the same HTML.
+  // Hydrate from localStorage after mount to avoid hydration mismatch.
+  const [settings, setSettings] = useState<ClawPortSettings>({ ...DEFAULTS })
+
+  useEffect(() => {
+    setSettings(loadSettings())
+  }, [])
+
+  // Apply accent color CSS variables when settings change
+  useEffect(() => {
+    const el = document.documentElement.style
+    if (settings.accentColor) {
+      el.setProperty('--accent', settings.accentColor)
+      el.setProperty('--accent-fill', hexToAccentFill(settings.accentColor))
+      el.setProperty('--accent-contrast', hexToContrastText(settings.accentColor))
+    } else {
+      el.removeProperty('--accent')
+      el.removeProperty('--accent-fill')
+      el.removeProperty('--accent-contrast')
+    }
+  }, [settings.accentColor])
+
+  const update = useCallback((next: ClawPortSettings) => {
+    setSettings(next)
+    saveSettings(next)
+  }, [])
+
+  const setAccentColor = useCallback(
+    (color: string | null) => {
+      update({ ...settings, accentColor: color })
+    },
+    [settings, update],
+  )
+
+  const setPortalName = useCallback(
+    (name: string | null) => {
+      update({ ...settings, portalName: name || null })
+    },
+    [settings, update],
+  )
+
+  const setPortalSubtitle = useCallback(
+    (subtitle: string | null) => {
+      update({ ...settings, portalSubtitle: subtitle || null })
+    },
+    [settings, update],
+  )
+
+  const setPortalEmoji = useCallback(
+    (emoji: string | null) => {
+      update({ ...settings, portalEmoji: emoji || null })
+    },
+    [settings, update],
+  )
+
+  const setPortalIcon = useCallback(
+    (icon: string | null) => {
+      update({ ...settings, portalIcon: icon })
+    },
+    [settings, update],
+  )
+
+  const setIconBgHidden = useCallback(
+    (hidden: boolean) => {
+      update({ ...settings, iconBgHidden: hidden })
+    },
+    [settings, update],
+  )
+
+  const setEmojiOnly = useCallback(
+    (emojiOnly: boolean) => {
+      update({ ...settings, emojiOnly })
+    },
+    [settings, update],
+  )
+
+  const setOperatorName = useCallback(
+    (name: string | null) => {
+      update({ ...settings, operatorName: name || null })
+    },
+    [settings, update],
+  )
+
+  const setAgentOverride = useCallback(
+    (agentId: string, override: AgentOverride) => {
+      const existing = settings.agentOverrides[agentId] || {}
+      update({
+        ...settings,
+        agentOverrides: {
+          ...settings.agentOverrides,
+          [agentId]: { ...existing, ...override },
+        },
+      })
+    },
+    [settings, update],
+  )
+
+  const clearAgentOverride = useCallback(
+    (agentId: string) => {
+      const { [agentId]: _, ...rest } = settings.agentOverrides
+      update({ ...settings, agentOverrides: rest })
+    },
+    [settings, update],
+  )
+
+  const getAgentDisplay = useCallback(
+    (agent: Agent): AgentDisplay => {
+      const override = settings.agentOverrides[agent.id]
+      return {
+        emoji: override?.emoji || agent.emoji,
+        profileImage: override?.profileImage,
+        emojiOnly: settings.emojiOnly,
+      }
+    },
+    [settings.agentOverrides, settings.emojiOnly],
+  )
+
+  const resetAll = useCallback(() => {
+    const defaults: ClawPortSettings = {
+      accentColor: null,
+      portalName: null,
+      portalSubtitle: null,
+      portalEmoji: null,
+      portalIcon: null,
+      iconBgHidden: false,
+      emojiOnly: false,
+      operatorName: null,
+      agentOverrides: {},
+    }
+    update(defaults)
+  }, [update])
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        settings,
+        setAccentColor,
+        setPortalName,
+        setPortalSubtitle,
+        setPortalEmoji,
+        setPortalIcon,
+        setIconBgHidden,
+        setEmojiOnly,
+        setOperatorName,
+        setAgentOverride,
+        clearAgentOverride,
+        getAgentDisplay,
+        resetAll,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  )
+}
+
+export const useSettings = () => useContext(SettingsContext)

package/components/AgentAvatar.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import type { Agent } from '@/lib/types'
+import { useSettings } from '@/app/settings-provider'
+
+interface AgentAvatarProps {
+  agent: Agent
+  size: number
+  borderRadius?: number
+  style?: CSSProperties
+}
+
+export function AgentAvatar({ agent, size, borderRadius, style }: AgentAvatarProps) {
+  const { getAgentDisplay } = useSettings()
+  const display = getAgentDisplay(agent)
+  const radius = borderRadius ?? Math.round(size * 0.27)
+
+  if (display.profileImage) {
+    return (
+      <img
+        src={display.profileImage}
+        alt={agent.name}
+        style={{
+          width: size,
+          height: size,
+          borderRadius: radius,
+          objectFit: 'cover',
+          flexShrink: 0,
+          ...style,
+        }}
+      />
+    )
+  }
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius,
+        background: display.emojiOnly ? 'transparent' : `${agent.color}20`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: Math.round(size * 0.55),
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      {display.emoji}
+    </div>
+  )
+}

package/components/AgentNode.tsx

@@ -0,0 +1,122 @@
+"use client"
+import { Handle, Position, type NodeProps } from "@xyflow/react"
+import type { Agent, CronJob } from "@/lib/types"
+import { AgentAvatar } from "@/components/AgentAvatar"
+
+type AgentNodeData = Agent & { crons: CronJob[] } & Record<string, unknown>
+
+export function AgentNode({ data, selected }: NodeProps) {
+  const agent = data as AgentNodeData
+  const hasCrons = agent.crons && agent.crons.length > 0
+  const hasErrors = hasCrons && agent.crons.some((c: CronJob) => c.status === "error")
+  const cronCount = hasCrons ? agent.crons.length : 0
+
+  return (
+    <div
+      className={`hover-lift focus-ring${selected ? " node-selected" : ""}`}
+      title={agent.title}
+      style={{
+        background: "var(--material-regular)",
+        backdropFilter: "blur(20px) saturate(180%)",
+        WebkitBackdropFilter: "blur(20px) saturate(180%)",
+        borderRadius: "var(--radius-md)",
+        borderTop: `2px solid ${agent.color}`,
+        borderRight: `1px solid ${selected ? "var(--accent)" : "var(--separator)"}`,
+        borderBottom: `1px solid ${selected ? "var(--accent)" : "var(--separator)"}`,
+        borderLeft: `1px solid ${selected ? "var(--accent)" : "var(--separator)"}`,
+        padding: "var(--space-3) var(--space-4)",
+        minWidth: 200,
+        maxWidth: 220,
+        cursor: "pointer",
+        position: "relative",
+        boxShadow: selected ? "0 0 0 1px var(--accent), var(--shadow-card)" : "var(--shadow-card)",
+      }}
+    >
+      {/* Emoji + Name row */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-2)",
+          marginBottom: "var(--space-1)",
+        }}
+      >
+        <AgentAvatar agent={agent} size={30} borderRadius={8} />
+        <div
+          style={{
+            fontSize: "var(--text-body)",
+            fontWeight: "var(--weight-semibold)",
+            color: "var(--text-primary)",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {agent.name}
+        </div>
+      </div>
+
+      {/* Title */}
+      <div
+        style={{
+          fontSize: "var(--text-caption1)",
+          color: "var(--text-secondary)",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          marginTop: 1,
+        }}
+      >
+        {agent.title}
+      </div>
+
+      {/* Description snippet */}
+      {agent.description && (
+        <div
+          style={{
+            fontSize: "var(--text-caption2)",
+            color: "var(--text-tertiary)",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            marginTop: 2,
+          }}
+        >
+          {agent.description}
+        </div>
+      )}
+
+      {/* Cron health row */}
+      {hasCrons && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            marginTop: "var(--space-2)",
+            fontSize: "var(--text-caption2)",
+            color: hasErrors ? "var(--system-red)" : "var(--system-green)",
+          }}
+        >
+          <div
+            className={hasErrors ? "animate-error-pulse" : ""}
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: hasErrors ? "var(--system-red)" : "var(--system-green)",
+              flexShrink: 0,
+            }}
+          />
+          {cronCount} cron{cronCount !== 1 ? "s" : ""} · {hasErrors ? "errors" : "healthy"}
+        </div>
+      )}
+
+      {/* Handles - invisible */}
+      <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
+      <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
+    </div>
+  )
+}
+
+export const nodeTypes = { agentNode: AgentNode }

package/components/Breadcrumbs.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+}
+
+export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="animate-fade-in"
+      style={{
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+        fontSize: '12px',
+        lineHeight: 1,
+        fontWeight: 500,
+      }}
+    >
+      <ol
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+          listStyle: 'none',
+          margin: 0,
+          padding: 0,
+        }}
+      >
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <li
+              key={item.label}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+                minWidth: 0,
+              }}
+            >
+              {index > 0 && (
+                <ChevronRight
+                  size={12}
+                  style={{
+                    color: 'var(--text-quaternary)',
+                    flexShrink: 0,
+                  }}
+                  aria-hidden="true"
+                />
+              )}
+
+              {isLast || !item.href ? (
+                <span
+                  style={{
+                    color: 'var(--text-primary)',
+                    fontWeight: 600,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    maxWidth: '200px',
+                  }}
+                  aria-current="page"
+                >
+                  {item.icon && (
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        verticalAlign: 'middle',
+                        marginRight: '4px',
+                      }}
+                    >
+                      {item.icon}
+                    </span>
+                  )}
+                  {item.label}
+                </span>
+              ) : (
+                <Link
+                  href={item.href}
+                  className="breadcrumb-link focus-ring"
+                  style={{
+                    color: 'var(--text-secondary)',
+                    textDecoration: 'none',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    maxWidth: '200px',
+                    borderRadius: '4px',
+                    padding: '2px 4px',
+                    margin: '-2px -4px',
+                    transition: 'color 100ms var(--ease-smooth)',
+                  }}
+                  aria-label={item.label}
+                >
+                  {item.icon && (
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        verticalAlign: 'middle',
+                        marginRight: '4px',
+                      }}
+                    >
+                      {item.icon}
+                    </span>
+                  )}
+                  {item.label}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/components/DynamicFavicon.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useSettings } from '@/app/settings-provider'
+
+/**
+ * Dynamically sets the browser tab favicon based on the current
+ * portal logo settings (uploaded image or emoji).
+ */
+export function DynamicFavicon() {
+  const { settings } = useSettings()
+
+  useEffect(() => {
+    const emoji = settings.portalEmoji ?? '\ud83e\udd9e'
+    const icon = settings.portalIcon
+    const accentColor = settings.accentColor
+    const bgHidden = settings.iconBgHidden
+
+    // Find or create the favicon link element
+    let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+    if (!link) {
+      link = document.createElement('link')
+      link.rel = 'icon'
+      document.head.appendChild(link)
+    }
+
+    if (icon) {
+      // Uploaded image — use directly as favicon
+      link.href = icon
+      link.type = 'image/jpeg'
+      return
+    }
+
+    // Emoji — render to canvas
+    const size = 64
+    const canvas = document.createElement('canvas')
+    canvas.width = size
+    canvas.height = size
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    if (!bgHidden) {
+      // Draw colored background circle
+      const color = accentColor ?? '#f5c518'
+      ctx.fillStyle = color
+      ctx.beginPath()
+      ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2)
+      ctx.fill()
+    }
+
+    // Draw emoji centered
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.font = `${bgHidden ? 56 : 40}px serif`
+    ctx.fillText(emoji, size / 2, size / 2 + 2)
+
+    link.href = canvas.toDataURL('image/png')
+    link.type = 'image/png'
+  }, [settings.portalIcon, settings.portalEmoji, settings.accentColor, settings.iconBgHidden])
+
+  return null
+}

package/components/ErrorState.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { RotateCcw } from 'lucide-react'
+
+interface ErrorStateProps {
+  message: string
+  onRetry?: () => void
+}
+
+export function ErrorState({ message, onRetry }: ErrorStateProps) {
+  return (
+    <div
+      className="flex items-center justify-center h-full"
+      role="alert"
+      style={{ background: 'var(--bg)' }}
+    >
+      <div style={{ textAlign: 'center', padding: '0 24px', maxWidth: 360 }}>
+        <div style={{
+          width: 56,
+          height: 56,
+          borderRadius: '50%',
+          background: 'var(--fill-secondary)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 24,
+          margin: '0 auto 16px',
+        }}>
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+        </div>
+
+        <div style={{
+          fontSize: 17,
+          fontWeight: 600,
+          color: 'var(--text-primary)',
+          marginBottom: 4,
+        }}>
+          Something went wrong
+        </div>
+
+        <p style={{
+          fontSize: 14,
+          lineHeight: 1.5,
+          color: 'var(--text-secondary)',
+          margin: '0 0 20px',
+        }}>
+          {message}
+        </p>
+
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="focus-ring btn-scale"
+            style={{
+              height: 40,
+              padding: '0 20px',
+              borderRadius: 'var(--radius-md)',
+              background: 'var(--fill-secondary)',
+              color: 'var(--text-primary)',
+              fontWeight: 600,
+              fontSize: 14,
+              border: 'none',
+              cursor: 'pointer',
+              transition: 'all 150ms var(--ease-spring)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'var(--fill-primary)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'var(--fill-secondary)';
+            }}
+          >
+            <RotateCcw size={16} />
+            Try Again
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}