mission-control-ui

name: mission-control-ui description: Skill for using the standardized UI components in Mission Control dashboard. Use these components instead of duplicating patterns.

Mission Control UI Component Library

Skill for using the standardized UI components in Mission Control dashboard.

Overview

The @/components/ui-lib directory contains reusable React components for building consistent dashboard views. Always use these components instead of duplicating patterns.

Location

packages/mission-control/src/components/ui-lib/
├── index.ts           # Exports all components
├── page-header.tsx    # Title + description + badges
├── stat-card.tsx      # Single stat with icon
├── stat-grid.tsx      # Grid of stat cards
├── category-nav.tsx   # Category navigation sidebar
├── item-list.tsx      # Scrollable list with items
├── search-bar.tsx     # Search input with button
├── empty-state.tsx    # Empty data placeholder
├── timestamp.tsx      # Formatted timestamp
├── badge-list.tsx     # List of badges
├── loading-state.tsx  # Loading spinner
└── content-card.tsx   # Card with title and icon

Usage Examples

PageHeader

import { PageHeader } from "@/components/ui-lib";

<PageHeader
  title="Perennial Memory"
  description="Long-term semantic storage"
  badges={[
    { label: "memories", value: 42 },
    { label: "size", value: "1.2 MB" }
  ]}
/>

StatGrid

import { StatGrid } from "@/components/ui-lib";
import { Cpu, MemoryStick, Thermometer } from "lucide-react";

<StatGrid
  columns={3}
  stats={[
    { label: "CPU", value: "45%", icon: Cpu, iconColor: "text-green-400" },
    { label: "Memory", value: "6.2 GB", icon: MemoryStick },
    { label: "Temp", value: "52°C", icon: Thermometer },
  ]}
/>

CategoryNav

import { CategoryNav } from "@/components/ui-lib";
import { Folder } from "lucide-react";

<CategoryNav
  title="Categories"
  icon={Folder}
  categories={[
    { name: "learning", count: 25 },
    { name: "decision", count: 6 },
  ]}
  selected={selectedCategory}
  onSelect={setSelectedCategory}
  allLabel="Recent"
  allCount={42}
/>

ItemList

import { ItemList } from "@/components/ui-lib";
import { Database } from "lucide-react";
import { Timestamp, BadgeList } from "@/components/ui-lib";

<ItemList
  title="Recent Memories"
  icon={Database}
  badge={42}
  items={memories}
  maxHeight="h-[500px]"
  onSelect={(mem) => console.log(mem)}
  renderItem={(mem) => (
    <div>
      <Timestamp timestamp={mem.timestamp} />
      <p className="text-sm line-clamp-3">{mem.content}</p>
      <BadgeList items={mem.tags} max={3} />
    </div>
  )}
/>

SearchBar

import { SearchBar } from "@/components/ui-lib";

<SearchBar
  placeholder="Search memories..."
  onSearch={(query) => performSearch(query)}
/>

Timestamp

import { Timestamp } from "@/components/ui-lib";

<Timestamp timestamp="2026-03-17T02:32:34.465Z" />
<Timestamp timestamp={new Date()} format="relative" />
<Timestamp timestamp={null} />  {/* Shows "Invalid date" */}

BadgeList

import { BadgeList } from "@/components/ui-lib";

<BadgeList
  items={["success", "api", "auth"]}
  colorMap={{ error: "bg-red-500/20 text-red-400" }}
  max={3}
/>

EmptyState

import { EmptyState } from "@/components/ui-lib";
import { Inbox } from "lucide-react";

<EmptyState
  icon={Inbox}
  title="No memories found"
  description="Try adjusting your search query"
/>

LoadingState

import { LoadingState } from "@/components/ui-lib";

<LoadingState message="Loading memories..." />

ContentCard

import { ContentCard } from "@/components/ui-lib";
import { Settings } from "lucide-react";

<ContentCard
  title="Alert Rules"
  icon={Settings}
  badge={rules.length}
>
  {/* Card content */}
</ContentCard>

DRY Principles

1. Always import from @/components/ui-lib - Never copy component logic
2. Use Timestamp for dates - Handles invalid dates gracefully
3. Use CategoryNav for filtering - Consistent styling across views
4. Use StatGrid for metrics - Responsive grid with icons
5. Use EmptyState for empty data - Consistent placeholder UI

Component Props Reference

When to Create New Components

Create new components ONLY when:

• A UI pattern is used in 3+ views
• The pattern has consistent styling needs
• It encapsulates complex logic

Add new components to ui-lib/index.ts exports.