selftune 0.2.22 → 0.2.24

package/packages/dashboard-core/src/chrome/DashboardSidebar.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { ChevronDownIcon, LockIcon, LogOutIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@selftune/ui/primitives";
+
+import type { DashboardUser } from "../host/index";
+import { cn, getUserInitials } from "./utils";
+import type {
+  DashboardBrand,
+  DashboardChromeAction,
+  DashboardLinkRenderer,
+  DashboardNavItem,
+} from "./types";
+
+interface DashboardSidebarProps {
+  brand: DashboardBrand;
+  navItems: DashboardNavItem[];
+  renderLink: DashboardLinkRenderer;
+  sidebarAction?: DashboardChromeAction;
+  sidebarUser?: DashboardUser;
+  onSignOut?(): Promise<void> | void;
+  mobileOpen: boolean;
+  onMobileOpenChange(open: boolean): void;
+}
+
+export function DashboardSidebar({
+  brand,
+  navItems,
+  renderLink,
+  sidebarAction,
+  sidebarUser,
+  onSignOut,
+  mobileOpen,
+  onMobileOpenChange,
+}: DashboardSidebarProps) {
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+
+  return (
+    <>
+      {mobileOpen ? (
+        <button
+          type="button"
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => onMobileOpenChange(false)}
+          aria-label="Close sidebar overlay"
+        />
+      ) : null}
+
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-sidebar-border bg-sidebar",
+          "transition-transform duration-200 lg:translate-x-0",
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="px-4 pb-8 pt-6">
+          {renderLink({
+            href: brand.href,
+            className: "flex items-center gap-3",
+            onClick: () => onMobileOpenChange(false),
+            children: (
+              <>
+                <div
+                  className="size-8 shrink-0 bg-primary shadow-[0_0_12px_rgba(79,242,255,0.3)]"
+                  role="img"
+                  aria-label={brand.name}
+                  style={{
+                    WebkitMaskImage: "url(/logo.svg)",
+                    WebkitMaskSize: "contain",
+                    WebkitMaskRepeat: "no-repeat",
+                    WebkitMaskPosition: "center",
+                    maskImage: "url(/logo.svg)",
+                    maskSize: "contain",
+                    maskRepeat: "no-repeat",
+                    maskPosition: "center",
+                  }}
+                />
+                <div className="flex flex-col">
+                  <div className="flex items-center gap-2">
+                    <span className="font-headline text-2xl font-bold tracking-tighter text-primary text-glow">
+                      {brand.name}
+                    </span>
+                    {brand.badge ? (
+                      <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
+                        {brand.badge}
+                      </span>
+                    ) : null}
+                  </div>
+                  {brand.caption ? (
+                    <span className="font-headline text-[10px] uppercase tracking-[0.2em] text-slate-500">
+                      {brand.caption}
+                    </span>
+                  ) : null}
+                </div>
+              </>
+            ),
+          })}
+        </div>
+
+        <nav className="flex-1 space-y-1 px-2">
+          {navItems.map((item) => (
+            <Tooltip key={item.href}>
+              <TooltipTrigger
+                render={renderLink({
+                  href: item.href,
+                  onClick: () => onMobileOpenChange(false),
+                  className: cn(
+                    "flex items-center gap-3 rounded-lg px-4 py-2.5 font-headline text-sm tracking-tight transition-all duration-200",
+                    item.isActive
+                      ? "bg-card font-bold text-primary shadow-[inset_0_0_0_1px_rgba(79,242,255,0.08)]"
+                      : "text-slate-400 hover:bg-muted/50 hover:text-slate-200",
+                  ),
+                  children: (
+                    <>
+                      {item.icon}
+                      <span className="flex min-w-0 items-center gap-2">
+                        <span>{item.label}</span>
+                        {item.isLocked ? <LockIcon className="size-3.5 opacity-70" /> : null}
+                      </span>
+                    </>
+                  ),
+                })}
+              />
+              <TooltipContent side="right">{item.tooltip}</TooltipContent>
+            </Tooltip>
+          ))}
+        </nav>
+
+        <div className="px-4 pb-4">
+          {sidebarAction ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    disabled={sidebarAction.disabled}
+                    aria-disabled={sidebarAction.disabled}
+                    tabIndex={sidebarAction.disabled ? -1 : 0}
+                    title={sidebarAction.tooltip}
+                    onClick={sidebarAction.onClick}
+                    className={cn(
+                      "flex w-full items-center justify-center gap-2 rounded-xl border py-2.5 font-headline text-xs uppercase tracking-wider transition-colors",
+                      sidebarAction.disabled
+                        ? "cursor-not-allowed border-primary/15 bg-gradient-to-r from-primary/10 to-primary/5 text-primary/50 opacity-70"
+                        : "border-primary/30 bg-gradient-to-r from-primary/12 to-primary/6 text-primary hover:border-primary/50 hover:bg-primary/10",
+                    )}
+                  >
+                    {sidebarAction.icon}
+                    <span>{sidebarAction.label}</span>
+                  </button>
+                }
+              />
+              <TooltipContent side="right">{sidebarAction.tooltip}</TooltipContent>
+            </Tooltip>
+          ) : null}
+
+          {brand.footerLabel ? (
+            <div className="mt-3 flex items-center gap-2 px-4 py-1.5 font-headline text-[10px] uppercase tracking-widest text-slate-600">
+              <span className="size-1.5 animate-pulse rounded-full bg-primary shadow-[0_0_8px_rgba(79,242,255,0.4)]" />
+              <span>{brand.footerLabel}</span>
+            </div>
+          ) : null}
+        </div>
+
+        {sidebarUser ? (
+          <div className="border-t border-sidebar-border p-3">
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setUserMenuOpen((open) => !open)}
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-sidebar-accent/50"
+              >
+                {sidebarUser.image ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={sidebarUser.image}
+                    alt={sidebarUser.name}
+                    className="size-9 rounded-full"
+                  />
+                ) : (
+                  <div className="flex size-9 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                    {getUserInitials(sidebarUser.name)}
+                  </div>
+                )}
+                <span className="min-w-0 flex-1 text-left">
+                  <span className="block truncate font-medium text-sidebar-foreground">
+                    {sidebarUser.name}
+                  </span>
+                  <span className="block truncate text-xs text-slate-500">
+                    {sidebarUser.subtitle ?? sidebarUser.email ?? "Signed in"}
+                  </span>
+                </span>
+                {onSignOut ? <ChevronDownIcon className="size-4" /> : null}
+              </button>
+
+              {userMenuOpen && onSignOut ? (
+                <div className="absolute bottom-full left-0 mb-2 w-full rounded-lg border border-border bg-popover py-1 shadow-lg">
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      setUserMenuOpen(false);
+                      await onSignOut();
+                    }}
+                    className="flex w-full items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:bg-sidebar-accent/50"
+                  >
+                    <LogOutIcon className="size-4" />
+                    <span>Sign out</span>
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </aside>
+    </>
+  );
+}

package/packages/dashboard-core/src/chrome/RuntimeBadge.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "./utils";
+import type { RuntimeBadgeProps } from "./types";
+
+export function RuntimeBadge({
+  href,
+  label,
+  detail,
+  tone = "healthy",
+  renderLink,
+}: RuntimeBadgeProps) {
+  const toneClassName =
+    tone === "warning"
+      ? "text-amber-400 ring-amber-400/20 hover:bg-amber-400/8"
+      : tone === "critical"
+        ? "text-destructive ring-destructive/20 hover:bg-destructive/8"
+        : "text-primary ring-primary/20 hover:bg-primary/8";
+
+  const dotClassName =
+    tone === "warning"
+      ? "bg-amber-400"
+      : tone === "critical"
+        ? "bg-destructive"
+        : "animate-pulse bg-primary shadow-[0_0_8px_color-mix(in_srgb,var(--primary)_60%,transparent)]";
+
+  return (
+    <footer className="pointer-events-none fixed bottom-4 right-4 z-20">
+      {renderLink({
+        href,
+        className: cn(
+          "glass-panel pointer-events-auto flex items-center gap-2 rounded-full border border-foreground/5 px-3 py-2 font-headline text-[10px] uppercase tracking-[0.18em] text-slate-300 shadow-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+          toneClassName,
+        ),
+        children: (
+          <>
+            <span className={cn("size-1.5 rounded-full", dotClassName)} />
+            <span>{label}</span>
+            <span className="text-foreground/25">/</span>
+            <span className="text-slate-400">{detail}</span>
+          </>
+        ),
+      })}
+    </footer>
+  );
+}

package/packages/dashboard-core/src/chrome/index.ts

@@ -0,0 +1,14 @@
+export { DashboardChrome } from "./DashboardChrome";
+export { RuntimeBadge } from "./RuntimeBadge";
+export type {
+  DashboardBrand,
+  DashboardChromeAction,
+  DashboardChromeProps,
+  DashboardHeaderMeta,
+  DashboardLinkRenderer,
+  DashboardLinkRenderProps,
+  DashboardNavItem,
+  DashboardSearchItem,
+  RuntimeBadgeProps,
+  RuntimeBadgeTone,
+} from "./types";

package/packages/dashboard-core/src/chrome/types.ts

@@ -0,0 +1,81 @@
+import type { ReactElement, ReactNode } from "react";
+
+import type { DashboardUser } from "../host/index";
+
+export interface DashboardLinkRenderProps {
+  href: string;
+  className?: string;
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+export type DashboardLinkRenderer = (props: DashboardLinkRenderProps) => ReactElement;
+
+export interface DashboardNavItem {
+  href: string;
+  label: string;
+  tooltip: string;
+  icon: ReactNode;
+  isActive: boolean;
+  isLocked?: boolean;
+}
+
+export interface DashboardSearchItem {
+  id: string;
+  group: string;
+  label: string;
+  meta?: string | null;
+  keywords?: readonly string[];
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  onSelect(): void;
+}
+
+export interface DashboardHeaderMeta {
+  title: string;
+  icon?: ReactNode;
+  badge?: string;
+  backHref?: string | null;
+  backLabel?: string | null;
+}
+
+export interface DashboardBrand {
+  href: string;
+  name: string;
+  caption?: string;
+  badge?: string;
+  footerLabel?: string;
+}
+
+export interface DashboardChromeAction {
+  label: string;
+  tooltip: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onClick?(): void;
+}
+
+export interface DashboardChromeProps {
+  brand: DashboardBrand;
+  navItems: DashboardNavItem[];
+  renderLink: DashboardLinkRenderer;
+  headerMeta: DashboardHeaderMeta;
+  searchItems?: DashboardSearchItem[];
+  headerUser?: DashboardUser;
+  sidebarUser?: DashboardUser;
+  sidebarAction?: DashboardChromeAction;
+  onSignOut?(): Promise<void> | void;
+  overlay?: ReactNode;
+  contentClassName?: string | null;
+  children: ReactNode;
+}
+
+export type RuntimeBadgeTone = "healthy" | "warning" | "critical";
+
+export interface RuntimeBadgeProps {
+  href: string;
+  label: string;
+  detail: string;
+  tone?: RuntimeBadgeTone;
+  renderLink: DashboardLinkRenderer;
+}

package/packages/dashboard-core/src/chrome/utils.ts

@@ -0,0 +1,23 @@
+import type { DashboardSearchItem } from "./types";
+
+export function cn(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(" ");
+}
+
+export function getUserInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((part) => part.charAt(0).toUpperCase()).join("") || "?";
+}
+
+function normalize(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+export function matchesSearchItem(item: DashboardSearchItem, query: string): boolean {
+  const needle = normalize(query);
+  if (!needle) return true;
+
+  const haystack = [item.label, item.meta ?? "", ...(item.keywords ?? [])].map(normalize).join(" ");
+
+  return haystack.includes(needle);
+}

package/packages/dashboard-core/src/gates/FeatureGate.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+interface FeatureGateProps {
+  enabled: boolean;
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+export function FeatureGate({ enabled, fallback = null, children }: FeatureGateProps) {
+  return enabled ? <>{children}</> : <>{fallback}</>;
+}

package/packages/dashboard-core/src/gates/LockedRoute.tsx

@@ -0,0 +1,29 @@
+import { UpgradeCard } from "./UpgradeCard";
+
+interface LockedRouteProps {
+  eyebrow: string;
+  title: string;
+  description: string;
+  highlights?: readonly string[];
+  primaryAction: {
+    href: string;
+    label: string;
+  };
+  secondaryAction?: {
+    href: string;
+    label: string;
+  };
+  note?: string;
+}
+
+export function LockedRoute(props: LockedRouteProps) {
+  return (
+    <div className="@container/main flex flex-1 flex-col py-6">
+      <div className="grid grid-cols-12 gap-6 px-4 lg:px-6">
+        <div className="col-span-12">
+          <UpgradeCard {...props} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/packages/dashboard-core/src/gates/UpgradeCard.tsx

@@ -0,0 +1,89 @@
+import { ArrowUpRightIcon, CheckIcon, LockIcon } from "lucide-react";
+
+interface UpgradeAction {
+  href: string;
+  label: string;
+}
+
+interface UpgradeCardProps {
+  eyebrow: string;
+  title: string;
+  description: string;
+  highlights?: readonly string[];
+  primaryAction: UpgradeAction;
+  secondaryAction?: UpgradeAction;
+  note?: string;
+}
+
+export function UpgradeCard({
+  eyebrow,
+  title,
+  description,
+  highlights = [],
+  primaryAction,
+  secondaryAction,
+  note,
+}: UpgradeCardProps) {
+  return (
+    <section className="overflow-hidden rounded-[28px] border border-primary/15 bg-[radial-gradient(circle_at_top_left,rgba(79,242,255,0.18),transparent_32%),linear-gradient(180deg,rgba(8,16,27,0.98),rgba(7,12,22,0.96))] shadow-[0_24px_80px_rgba(0,0,0,0.35)]">
+      <div className="grid gap-10 p-8 lg:grid-cols-[minmax(0,1.1fr)_minmax(300px,0.9fr)] lg:p-10">
+        <div className="space-y-6">
+          <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-primary">
+            <LockIcon className="size-3" />
+            <span>{eyebrow}</span>
+          </div>
+          <div className="space-y-4">
+            <h1 className="max-w-2xl font-headline text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+              {title}
+            </h1>
+            <p className="max-w-2xl text-base leading-7 text-slate-300">{description}</p>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            <a
+              href={primaryAction.href}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
+            >
+              <span>{primaryAction.label}</span>
+              <ArrowUpRightIcon className="size-4" />
+            </a>
+            {secondaryAction ? (
+              <a
+                href={secondaryAction.href}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/40 px-5 py-2.5 text-sm font-medium text-slate-200 transition hover:border-primary/30 hover:text-primary"
+              >
+                <span>{secondaryAction.label}</span>
+                <ArrowUpRightIcon className="size-4" />
+              </a>
+            ) : null}
+          </div>
+
+          {note ? <p className="text-sm text-slate-500">{note}</p> : null}
+        </div>
+
+        <div className="rounded-[24px] border border-white/8 bg-white/4 p-6 backdrop-blur-sm">
+          <div className="mb-4 text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+            What unlocks
+          </div>
+          <div className="space-y-3">
+            {highlights.map((highlight) => (
+              <div
+                key={highlight}
+                className="flex items-start gap-3 rounded-2xl border border-white/6 bg-background/40 px-4 py-3"
+              >
+                <div className="mt-0.5 flex size-5 items-center justify-center rounded-full bg-primary/12 text-primary">
+                  <CheckIcon className="size-3.5" />
+                </div>
+                <p className="text-sm leading-6 text-slate-200">{highlight}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/packages/dashboard-core/src/gates/index.ts

@@ -0,0 +1,3 @@
+export { FeatureGate } from "./FeatureGate";
+export { LockedRoute } from "./LockedRoute";
+export { UpgradeCard } from "./UpgradeCard";

package/packages/dashboard-core/src/host/DashboardHostProvider.tsx

@@ -0,0 +1,62 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+import type { DashboardHostAdapter } from "./adapter";
+import type { Capabilities, DashboardFeatureKey } from "./capabilities";
+import { canUseFeature } from "./capabilities";
+
+export interface DashboardHostContextValue {
+  adapter: DashboardHostAdapter;
+  capabilities: Capabilities;
+}
+
+const DashboardHostContext = createContext<DashboardHostContextValue | null>(null);
+
+interface DashboardHostProviderProps {
+  adapter: DashboardHostAdapter;
+  capabilities: Capabilities;
+  children: ReactNode;
+}
+
+export function DashboardHostProvider({
+  adapter,
+  capabilities,
+  children,
+}: DashboardHostProviderProps) {
+  const value = useMemo(
+    () => ({
+      adapter,
+      capabilities,
+    }),
+    [adapter, capabilities],
+  );
+
+  return <DashboardHostContext.Provider value={value}>{children}</DashboardHostContext.Provider>;
+}
+
+export function useDashboardHost(): DashboardHostContextValue {
+  const context = useContext(DashboardHostContext);
+  if (!context) {
+    throw new Error("useDashboardHost must be used within a DashboardHostProvider");
+  }
+  return context;
+}
+
+export function useOptionalDashboardHost(): DashboardHostContextValue | null {
+  return useContext(DashboardHostContext);
+}
+
+export function useDashboardHostAdapter(): DashboardHostAdapter {
+  return useDashboardHost().adapter;
+}
+
+export function useOptionalDashboardHostAdapter(): DashboardHostAdapter | null {
+  return useOptionalDashboardHost()?.adapter ?? null;
+}
+
+export function useCapabilities(): Capabilities {
+  return useDashboardHost().capabilities;
+}
+
+export function useFeatureEnabled(feature: DashboardFeatureKey): boolean {
+  return canUseFeature(useCapabilities(), feature);
+}

package/packages/dashboard-core/src/host/adapter.ts

@@ -0,0 +1,47 @@
+import type {
+  AnalyticsModel,
+  OverviewModel,
+  RuntimeHealthModel,
+  SkillsModel,
+} from "../models/index";
+
+export interface DashboardUser {
+  id?: string;
+  name: string;
+  email?: string;
+  subtitle?: string;
+  image?: string | null;
+}
+
+export interface DashboardSessionState {
+  status: "loading" | "authenticated" | "anonymous";
+  user?: DashboardUser;
+}
+
+export interface DashboardHostLinks {
+  upgrade: string;
+  billing?: string;
+  docs?: string;
+  cloudDashboard?: string;
+}
+
+export interface DashboardHostActions {
+  signOut?(): Promise<void>;
+  openUpgrade(): void;
+  getOverviewWatchlist?(): Promise<string[]>;
+  updateOverviewWatchlist?(skills: string[]): Promise<string[]>;
+}
+
+export interface DashboardApiClient {
+  fetchOverview(): Promise<OverviewModel>;
+  fetchSkills(): Promise<SkillsModel>;
+  fetchAnalytics(): Promise<AnalyticsModel>;
+  fetchRuntimeHealth?(): Promise<RuntimeHealthModel>;
+}
+
+export interface DashboardHostAdapter {
+  useSession(): DashboardSessionState;
+  api: DashboardApiClient;
+  links: DashboardHostLinks;
+  actions: DashboardHostActions;
+}

package/packages/dashboard-core/src/host/capabilities.ts

@@ -0,0 +1,55 @@
+export const FEATURE_KEYS = [
+  "analytics",
+  "registry",
+  "signals",
+  "proposals",
+  "billing",
+  "teamAdmin",
+  "runtimeStatus",
+] as const;
+
+export const DISCOVERABLE_FEATURE_KEYS = ["registry", "signals", "proposals", "billing"] as const;
+
+export type DashboardHostKind = "local" | "cloud";
+export type DashboardPlan = "oss" | "pro" | "team";
+export type DashboardFeatureKey = (typeof FEATURE_KEYS)[number];
+export type DashboardDiscoverableFeatureKey = (typeof DISCOVERABLE_FEATURE_KEYS)[number];
+
+export type DashboardFeatureFlags = Record<DashboardFeatureKey, boolean>;
+export type DashboardDiscoverableFlags = Record<DashboardDiscoverableFeatureKey, boolean>;
+
+export interface Capabilities {
+  host: DashboardHostKind;
+  plan: DashboardPlan;
+  features: DashboardFeatureFlags;
+  discoverable: DashboardDiscoverableFlags;
+}
+
+export function canUseFeature(capabilities: Capabilities, feature: DashboardFeatureKey): boolean {
+  return capabilities.features[feature];
+}
+
+export function canDiscoverFeature(
+  capabilities: Capabilities,
+  feature: DashboardDiscoverableFeatureKey,
+): boolean {
+  return capabilities.discoverable[feature] || capabilities.features[feature];
+}
+
+export function withCapabilityOverrides(
+  base: Capabilities,
+  overrides: Partial<Capabilities>,
+): Capabilities {
+  return {
+    host: overrides.host ?? base.host,
+    plan: overrides.plan ?? base.plan,
+    features: {
+      ...base.features,
+      ...overrides.features,
+    },
+    discoverable: {
+      ...base.discoverable,
+      ...overrides.discoverable,
+    },
+  };
+}