npm - clawport-ui - Versions diffs - 0.1.0 - Mend

clawport-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/.env.example +35 -0
package/BRANDING.md +131 -0
package/CLAUDE.md +252 -0
package/README.md +262 -0
package/SETUP.md +337 -0
package/app/agents/[id]/page.tsx +727 -0
package/app/api/agents/route.ts +12 -0
package/app/api/chat/[id]/route.ts +139 -0
package/app/api/cron-runs/route.ts +13 -0
package/app/api/crons/route.ts +12 -0
package/app/api/kanban/chat/[id]/route.ts +119 -0
package/app/api/kanban/chat-history/[ticketId]/route.ts +36 -0
package/app/api/memory/route.ts +12 -0
package/app/api/transcribe/route.ts +37 -0
package/app/api/tts/route.ts +42 -0
package/app/chat/[id]/page.tsx +10 -0
package/app/chat/page.tsx +200 -0
package/app/crons/page.tsx +870 -0
package/app/docs/page.tsx +399 -0
package/app/favicon.ico +0 -0
package/app/globals.css +692 -0
package/app/kanban/page.tsx +327 -0
package/app/layout.tsx +45 -0
package/app/memory/page.tsx +685 -0
package/app/page.tsx +817 -0
package/app/providers.tsx +37 -0
package/app/settings/page.tsx +901 -0
package/app/settings-provider.tsx +209 -0
package/components/AgentAvatar.tsx +54 -0
package/components/AgentNode.tsx +122 -0
package/components/Breadcrumbs.tsx +126 -0
package/components/DynamicFavicon.tsx +62 -0
package/components/ErrorState.tsx +97 -0
package/components/FeedView.tsx +494 -0
package/components/GlobalSearch.tsx +571 -0
package/components/GridView.tsx +532 -0
package/components/ManorMap.tsx +157 -0
package/components/MobileSidebar.tsx +251 -0
package/components/NavLinks.tsx +271 -0
package/components/OnboardingWizard.tsx +1067 -0
package/components/Sidebar.tsx +115 -0
package/components/ThemeToggle.tsx +108 -0
package/components/chat/AgentList.tsx +537 -0
package/components/chat/ConversationView.tsx +1047 -0
package/components/chat/FileAttachment.tsx +140 -0
package/components/chat/MediaPreview.tsx +111 -0
package/components/chat/VoiceMessage.tsx +139 -0
package/components/crons/PipelineGraph.tsx +327 -0
package/components/crons/WeeklySchedule.tsx +630 -0
package/components/docs/AgentsSection.tsx +209 -0
package/components/docs/ApiReferenceSection.tsx +256 -0
package/components/docs/ArchitectureSection.tsx +221 -0
package/components/docs/ComponentsSection.tsx +253 -0
package/components/docs/CronSystemSection.tsx +235 -0
package/components/docs/DocSection.tsx +346 -0
package/components/docs/GettingStartedSection.tsx +169 -0
package/components/docs/ThemingSection.tsx +257 -0
package/components/docs/TroubleshootingSection.tsx +200 -0
package/components/kanban/AgentPicker.tsx +321 -0
package/components/kanban/CreateTicketModal.tsx +333 -0
package/components/kanban/KanbanBoard.tsx +70 -0
package/components/kanban/KanbanColumn.tsx +166 -0
package/components/kanban/TicketCard.tsx +245 -0
package/components/kanban/TicketDetailPanel.tsx +850 -0
package/components/ui/badge.tsx +48 -0
package/components/ui/button.tsx +64 -0
package/components/ui/card.tsx +92 -0
package/components/ui/dialog.tsx +158 -0
package/components/ui/scroll-area.tsx +58 -0
package/components/ui/separator.tsx +28 -0
package/components/ui/skeleton.tsx +27 -0
package/components/ui/tabs.tsx +91 -0
package/components/ui/tooltip.tsx +57 -0
package/components.json +23 -0
package/docs/API.md +648 -0
package/docs/COMPONENTS.md +1059 -0
package/docs/THEMING.md +795 -0
package/lib/agents-registry.ts +35 -0
package/lib/agents.json +282 -0
package/lib/agents.test.ts +367 -0
package/lib/agents.ts +32 -0
package/lib/anthropic.test.ts +422 -0
package/lib/anthropic.ts +220 -0
package/lib/api-error.ts +16 -0
package/lib/audio-recorder.test.ts +72 -0
package/lib/audio-recorder.ts +169 -0
package/lib/conversations.test.ts +331 -0
package/lib/conversations.ts +117 -0
package/lib/cron-pipelines.test.ts +69 -0
package/lib/cron-pipelines.ts +58 -0
package/lib/cron-runs.test.ts +118 -0
package/lib/cron-runs.ts +67 -0
package/lib/cron-utils.test.ts +222 -0
package/lib/cron-utils.ts +160 -0
package/lib/crons.test.ts +502 -0
package/lib/crons.ts +114 -0
package/lib/env.test.ts +44 -0
package/lib/env.ts +14 -0
package/lib/kanban/automation.test.ts +245 -0
package/lib/kanban/automation.ts +143 -0
package/lib/kanban/chat-store.test.ts +149 -0
package/lib/kanban/chat-store.ts +81 -0
package/lib/kanban/store.test.ts +238 -0
package/lib/kanban/store.ts +98 -0
package/lib/kanban/types.ts +50 -0
package/lib/kanban/useAgentWork.ts +78 -0
package/lib/memory.ts +45 -0
package/lib/multimodal.test.ts +219 -0
package/lib/multimodal.ts +68 -0
package/lib/pipeline.integration.test.ts +343 -0
package/lib/sanitize.ts +194 -0
package/lib/settings.test.ts +137 -0
package/lib/settings.ts +94 -0
package/lib/styles.ts +24 -0
package/lib/themes.ts +9 -0
package/lib/transcribe.test.ts +141 -0
package/lib/transcribe.ts +111 -0
package/lib/types.ts +66 -0
package/lib/utils.ts +6 -0
package/lib/validation.test.ts +132 -0
package/lib/validation.ts +80 -0
package/next.config.ts +7 -0
package/package.json +56 -0
package/postcss.config.mjs +7 -0
package/public/file.svg +1 -0
package/public/globe.svg +1 -0
package/public/next.svg +1 -0
package/public/vercel.svg +1 -0
package/public/window.svg +1 -0
package/scripts/setup.mjs +215 -0
package/tsconfig.json +34 -0
package/vitest.config.ts +17 -0

package/components/docs/ComponentsSection.tsx ADDED Viewed

@@ -0,0 +1,253 @@
+import {
+  Heading,
+  SubHeading,
+  Paragraph,
+  CodeBlock,
+  InlineCode,
+  Table,
+  BulletList,
+  InfoCard,
+} from "./DocSection";
+export function ComponentsSection() {
+  return (
+    <>
+      <Heading>Components</Heading>
+      <Paragraph>
+        ClawPort's component tree follows the standard Next.js App Router
+        pattern: providers wrap the entire app, layout components handle the
+        sidebar and navigation, and each route renders its own page component.
+      </Paragraph>
+      <SubHeading>Component Tree</SubHeading>
+      <CodeBlock>
+        {`RootLayout (app/layout.tsx)
+  ThemeProvider (app/providers.tsx)
+    SettingsProvider (app/settings-provider.tsx)
+      DynamicFavicon
+      OnboardingWizard
+      Sidebar
+        NavLinks
+        ThemeToggle
+        MobileSidebar
+        GlobalSearch
+      <main> (page content)
+        HomePage ............. / (org chart, grid, feed)
+          OrgMap (React Flow)
+            AgentNode
+              AgentAvatar
+          GridView
+          FeedView
+        ChatPage .............. /chat
+          AgentList
+          ConversationView
+            VoiceMessage
+            FileAttachment
+            MediaPreview
+        AgentDetailPage ....... /agents/[id]
+        KanbanPage ............ /kanban
+          KanbanBoard
+            KanbanColumn
+              TicketCard
+          TicketDetailPanel
+          CreateTicketModal
+            AgentPicker
+        CronsPage ............. /crons
+          WeeklySchedule
+          PipelineGraph
+        MemoryPage ............ /memory
+        DocsPage .............. /docs
+        SettingsPage .......... /settings`}
+      </CodeBlock>
+      <SubHeading>Providers</SubHeading>
+      <InfoCard title="ThemeProvider">
+        <BulletList
+          items={[
+            <>
+              <strong style={{ color: "var(--text-primary)" }}>File:</strong>{" "}
+              <InlineCode>app/providers.tsx</InlineCode>
+            </>,
+            "Manages the active theme and applies it via data-theme attribute on <html>",
+            <>
+              Consumer hook:{" "}
+              <InlineCode>{"const { theme, setTheme } = useTheme()"}</InlineCode>
+            </>,
+            <>
+              Persists to <InlineCode>localStorage('clawport-theme')</InlineCode>,
+              defaults to 'dark'
+            </>,
+          ]}
+        />
+      </InfoCard>
+      <InfoCard title="SettingsProvider">
+        <BulletList
+          items={[
+            <>
+              <strong style={{ color: "var(--text-primary)" }}>File:</strong>{" "}
+              <InlineCode>app/settings-provider.tsx</InlineCode>
+            </>,
+            "Central state management for all user-configurable settings",
+            <>
+              Consumer hook:{" "}
+              <InlineCode>{"const { settings, setAccentColor, ... } = useSettings()"}</InlineCode>
+            </>,
+            "Applies accent color CSS variables directly to document.documentElement",
+            <>
+              Persists to{" "}
+              <InlineCode>localStorage('clawport-settings')</InlineCode>
+            </>,
+          ]}
+        />
+      </InfoCard>
+      <SubHeading>Layout Components</SubHeading>
+      <Table
+        headers={["Component", "File", "Purpose"]}
+        rows={[
+          [
+            "Sidebar",
+            <InlineCode key="s">components/Sidebar.tsx</InlineCode>,
+            "Desktop sidebar wrapper. Renders NavLinks, ThemeToggle, MobileSidebar, GlobalSearch.",
+          ],
+          [
+            "NavLinks",
+            <InlineCode key="n">components/NavLinks.tsx</InlineCode>,
+            "Sidebar nav links with icons, badges, and operator identity footer.",
+          ],
+          [
+            "MobileSidebar",
+            <InlineCode key="m">components/MobileSidebar.tsx</InlineCode>,
+            "Fixed mobile header bar with hamburger menu and slide-out sidebar panel.",
+          ],
+          [
+            "GlobalSearch",
+            <InlineCode key="g">components/GlobalSearch.tsx</InlineCode>,
+            "Cmd+K search palette with fuzzy search across agents, pages, and crons.",
+          ],
+          [
+            "ThemeToggle",
+            <InlineCode key="t">components/ThemeToggle.tsx</InlineCode>,
+            "Theme selector rendered as a row of emoji buttons with radiogroup semantics.",
+          ],
+        ]}
+      />
+      <SubHeading>Chat Components</SubHeading>
+      <Table
+        headers={["Component", "Purpose"]}
+        rows={[
+          [
+            "ConversationView",
+            "Main chat: messages, SSE streaming, file attachments, TTS playback, voice recording, markdown rendering.",
+          ],
+          [
+            "AgentList",
+            "Agent selection sidebar for chat. Desktop (300px fixed) and mobile (full-width) variants.",
+          ],
+          [
+            "VoiceMessage",
+            "Audio waveform playback with play/pause toggle and animated progress bars.",
+          ],
+          [
+            "FileAttachment",
+            "File attachment bubble with type-specific icon and download button.",
+          ],
+          [
+            "MediaPreview",
+            "Horizontal strip of staged attachment thumbnails before sending.",
+          ],
+        ]}
+      />
+      <SubHeading>Map Components</SubHeading>
+      <Table
+        headers={["Component", "Purpose"]}
+        rows={[
+          [
+            "OrgMap",
+            "React Flow org chart with BFS-based hierarchical layout, edge highlighting, and interactive zoom.",
+          ],
+          [
+            "AgentNode",
+            "Custom React Flow node: avatar, name, title, cron health indicator, selection state.",
+          ],
+          [
+            "GridView",
+            "Card-based grid with team grouping hierarchy. Responsive: 1/2/3 columns.",
+          ],
+          [
+            "FeedView",
+            "Activity feed focused on cron status with stat cards and filter pills.",
+          ],
+        ]}
+      />
+      <SubHeading>Kanban Components</SubHeading>
+      <Table
+        headers={["Component", "Purpose"]}
+        rows={[
+          [
+            "KanbanBoard",
+            "Four-column board (Backlog, In Progress, Review, Done) with agent filter.",
+          ],
+          [
+            "KanbanColumn",
+            "Single column with HTML5 drag-and-drop support and drop zone highlight.",
+          ],
+          [
+            "TicketCard",
+            "Draggable card: priority dot, title, agent avatar, work state indicator.",
+          ],
+          [
+            "TicketDetailPanel",
+            "Slide-in side panel for ticket details and inline agent chat.",
+          ],
+          [
+            "CreateTicketModal",
+            "Modal for creating tickets with title, description, priority, agent assignment.",
+          ],
+        ]}
+      />
+      <SubHeading>Other Key Components</SubHeading>
+      <Table
+        headers={["Component", "Purpose"]}
+        rows={[
+          [
+            "OnboardingWizard",
+            "5-step first-run setup wizard (name, theme, accent, voice, overview). Re-runnable from Settings.",
+          ],
+          [
+            "AgentAvatar",
+            "Agent avatar: profile image, emoji on colored background, or emoji-only mode.",
+          ],
+          [
+            "DynamicFavicon",
+            "Generates favicon from portal emoji/icon using Canvas API.",
+          ],
+          [
+            "ErrorState",
+            "Full-screen error display with optional retry button.",
+          ],
+          [
+            "Breadcrumbs",
+            "Breadcrumb navigation bar with Lucide ChevronRight separators.",
+          ],
+        ]}
+      />
+      <SubHeading>UI Primitives</SubHeading>
+      <Paragraph>
+        Radix-based primitive components in{" "}
+        <InlineCode>components/ui/</InlineCode> (shadcn/ui-style wrappers):
+      </Paragraph>
+      <BulletList
+        items={[
+          "Badge, Button, Card, Dialog, ScrollArea, Separator, Skeleton, Tabs, Tooltip",
+        ]}
+      />
+    </>
+  );
+}

package/components/docs/CronSystemSection.tsx ADDED Viewed

@@ -0,0 +1,235 @@
+import {
+  Heading,
+  SubHeading,
+  Paragraph,
+  CodeBlock,
+  InlineCode,
+  Table,
+  BulletList,
+  Callout,
+} from "./DocSection";
+export function CronSystemSection() {
+  return (
+    <>
+      <Heading>Cron System</Heading>
+      <Paragraph>
+        ClawPort provides a full cron monitoring dashboard with three views:
+        overview (health donut, attention cards, error banners), weekly schedule
+        (7-day calendar grid), and pipeline graph (React Flow dependency
+        visualization). Data is fetched from the OpenClaw CLI and auto-refreshes
+        every 60 seconds.
+      </Paragraph>
+      <SubHeading>CronJob Schema</SubHeading>
+      <Table
+        headers={["Field", "Type", "Description"]}
+        rows={[
+          [<InlineCode key="id">id</InlineCode>, "string", "Job identifier"],
+          [
+            <InlineCode key="n">name</InlineCode>,
+            "string",
+            "Job name (used to match owning agent by prefix)",
+          ],
+          [
+            <InlineCode key="s">schedule</InlineCode>,
+            "string",
+            "Raw cron expression",
+          ],
+          [
+            <InlineCode key="sd">scheduleDescription</InlineCode>,
+            "string",
+            'Human-readable (e.g., "Daily at 8 AM")',
+          ],
+          [
+            <InlineCode key="tz">timezone</InlineCode>,
+            "string | null",
+            "Timezone from schedule object, if present",
+          ],
+          [
+            <InlineCode key="st">status</InlineCode>,
+            '"ok" | "error" | "idle"',
+            "Last run outcome",
+          ],
+          [
+            <InlineCode key="lr">lastRun</InlineCode>,
+            "string | null",
+            "ISO 8601 timestamp of last execution",
+          ],
+          [
+            <InlineCode key="nr">nextRun</InlineCode>,
+            "string | null",
+            "ISO 8601 timestamp of next scheduled run",
+          ],
+          [
+            <InlineCode key="le">lastError</InlineCode>,
+            "string | null",
+            "Error message from last failed run",
+          ],
+          [
+            <InlineCode key="ai">agentId</InlineCode>,
+            "string | null",
+            "Owning agent ID (matched by job name prefix)",
+          ],
+          [
+            <InlineCode key="en">enabled</InlineCode>,
+            "boolean",
+            "Whether the job is active",
+          ],
+          [
+            <InlineCode key="dl">delivery</InlineCode>,
+            "CronDelivery | null",
+            "Delivery config (mode, channel, to)",
+          ],
+          [
+            <InlineCode key="ld">lastDurationMs</InlineCode>,
+            "number | null",
+            "Duration of last run in milliseconds",
+          ],
+          [
+            <InlineCode key="ce">consecutiveErrors</InlineCode>,
+            "number",
+            "Count of consecutive failed runs",
+          ],
+        ]}
+      />
+      <SubHeading>CronRun Schema</SubHeading>
+      <Paragraph>
+        Run history is parsed from JSONL log files at{" "}
+        <InlineCode>$WORKSPACE_PATH/../cron/runs/</InlineCode>. Each line in the
+        JSONL file represents one run.
+      </Paragraph>
+      <Table
+        headers={["Field", "Type", "Description"]}
+        rows={[
+          [
+            <InlineCode key="ts">ts</InlineCode>,
+            "number",
+            "Unix timestamp (milliseconds) of the run",
+          ],
+          [
+            <InlineCode key="j">jobId</InlineCode>,
+            "string",
+            "Job identifier",
+          ],
+          [
+            <InlineCode key="s">status</InlineCode>,
+            '"ok" | "error"',
+            "Run outcome",
+          ],
+          [
+            <InlineCode key="su">summary</InlineCode>,
+            "string | null",
+            "Summary of what the run produced",
+          ],
+          [
+            <InlineCode key="e">error</InlineCode>,
+            "string | null",
+            "Error message if the run failed",
+          ],
+          [
+            <InlineCode key="d">durationMs</InlineCode>,
+            "number",
+            "Duration in milliseconds",
+          ],
+          [
+            <InlineCode key="ds">deliveryStatus</InlineCode>,
+            "string | null",
+            "Delivery outcome",
+          ],
+        ]}
+      />
+      <SubHeading>Agent Ownership</SubHeading>
+      <Paragraph>
+        Cron jobs are matched to agents by job name prefix. When the API fetches
+        crons via <InlineCode>openclaw cron list --json</InlineCode>, it
+        enriches each job with an <InlineCode>agentId</InlineCode> field by
+        checking whether the job name starts with an agent's id. This enables
+        the UI to show agent avatars next to cron entries and filter crons by
+        agent.
+      </Paragraph>
+      <SubHeading>Delivery Configuration</SubHeading>
+      <Table
+        headers={["Field", "Type", "Description"]}
+        rows={[
+          [
+            <InlineCode key="m">mode</InlineCode>,
+            "string",
+            "Delivery mode",
+          ],
+          [
+            <InlineCode key="c">channel</InlineCode>,
+            "string",
+            "Delivery channel",
+          ],
+          [
+            <InlineCode key="t">to</InlineCode>,
+            "string | null",
+            "Delivery recipient",
+          ],
+        ]}
+      />
+      <SubHeading>Status Types</SubHeading>
+      <BulletList
+        items={[
+          <>
+            <strong style={{ color: "var(--system-green)" }}>ok</strong> -- Last
+            run completed successfully
+          </>,
+          <>
+            <strong style={{ color: "var(--system-red)" }}>error</strong> -- Last
+            run failed (error details in lastError)
+          </>,
+          <>
+            <strong style={{ color: "var(--text-tertiary)" }}>idle</strong> --
+            Job has never run or has no recent activity
+          </>,
+        ]}
+      />
+      <SubHeading>Monitoring Views</SubHeading>
+      <BulletList
+        items={[
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>Overview</strong>{" "}
+            -- Health donut chart (SVG), attention-needed cards for errored
+            crons, delivery stats, error banners with expandable details, recent
+            runs list
+          </>,
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>Schedule</strong>{" "}
+            -- Seven-day calendar grid showing when cron jobs are scheduled to
+            run. Current time indicator as a red horizontal line.
+          </>,
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>Pipelines</strong>{" "}
+            -- React Flow visualization of cron job pipelines showing
+            dependencies between stages
+          </>,
+        ]}
+      />
+      <Callout type="note">
+        The cron page auto-refreshes every 60 seconds. The sidebar also fetches
+        cron error counts on mount and displays a red pulsing dot badge when
+        errors are present.
+      </Callout>
+      <SubHeading>API Endpoint</SubHeading>
+      <CodeBlock title="terminal">
+        {`# Fetch all crons
+curl http://localhost:3000/api/crons
+# Fetch run history for a specific job
+curl "http://localhost:3000/api/cron-runs?jobId=pulse-daily-digest"
+# Fetch all run history
+curl http://localhost:3000/api/cron-runs`}
+      </CodeBlock>
+    </>
+  );
+}