@chaaskit/client 0.1.0

package/src/components/UsageChart.tsx

@@ -0,0 +1,177 @@
+import { useState, useMemo } from 'react';
+import type { UsageDataPoint } from '@chaaskit/shared';
+
+type MetricType = 'messages' | 'inputTokens' | 'outputTokens' | 'totalTokens';
+
+interface UsageChartProps {
+  data: UsageDataPoint[];
+  metric: MetricType;
+  isLoading?: boolean;
+}
+
+export default function UsageChart({ data, metric, isLoading }: UsageChartProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  const { values, maxValue, total, average, peakDay } = useMemo(() => {
+    const values = data.map((d) => {
+      if (metric === 'totalTokens') {
+        return d.inputTokens + d.outputTokens;
+      }
+      return d[metric];
+    });
+
+    const maxValue = Math.max(...values, 1);
+    const total = values.reduce((a, b) => a + b, 0);
+    const average = values.length > 0 ? total / values.length : 0;
+
+    let peakIndex = 0;
+    let peakValue = 0;
+    values.forEach((v, i) => {
+      if (v > peakValue) {
+        peakValue = v;
+        peakIndex = i;
+      }
+    });
+    const peakDay = data[peakIndex]?.date || '';
+
+    return { values, maxValue, total, average, peakDay };
+  }, [data, metric]);
+
+  const metricLabels: Record<MetricType, string> = {
+    messages: 'messages',
+    inputTokens: 'input tokens',
+    outputTokens: 'output tokens',
+    totalTokens: 'total tokens',
+  };
+
+  const formatValue = (value: number): string => {
+    if (value >= 1_000_000) {
+      return `${(value / 1_000_000).toFixed(1)}M`;
+    }
+    if (value >= 1_000) {
+      return `${(value / 1_000).toFixed(1)}K`;
+    }
+    return value.toLocaleString();
+  };
+
+  const formatDate = (dateStr: string): string => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="h-64 flex items-center justify-center">
+        <div className="animate-pulse flex flex-col items-center gap-2">
+          <div className="h-32 w-full flex items-end justify-center gap-1">
+            {Array.from({ length: 15 }).map((_, i) => (
+              <div
+                key={i}
+                className="w-4 bg-[var(--color-background-secondary)] rounded-t"
+                style={{ height: `${Math.random() * 80 + 20}%` }}
+              />
+            ))}
+          </div>
+          <div className="h-4 w-48 bg-[var(--color-background-secondary)] rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="h-64 flex items-center justify-center text-[var(--color-text-muted)]">
+        No usage data available for this period
+      </div>
+    );
+  }
+
+  // Determine label frequency based on data length
+  const labelFrequency = data.length > 60 ? 14 : data.length > 30 ? 7 : data.length > 14 ? 3 : 1;
+
+  return (
+    <div className="space-y-4">
+      {/* Chart */}
+      <div className="relative h-48">
+        <div className="absolute inset-0 flex items-end gap-[2px]">
+          {values.map((value, index) => {
+            const height = maxValue > 0 ? (value / maxValue) * 100 : 0;
+            const isHovered = hoveredIndex === index;
+
+            return (
+              <div
+                key={index}
+                className="flex-1 relative group"
+                onMouseEnter={() => setHoveredIndex(index)}
+                onMouseLeave={() => setHoveredIndex(null)}
+              >
+                <div
+                  className={`w-full rounded-t transition-all cursor-pointer ${
+                    isHovered
+                      ? 'bg-[var(--color-primary)]'
+                      : 'bg-[var(--color-primary)]/60 hover:bg-[var(--color-primary)]/80'
+                  }`}
+                  style={{ height: `${Math.max(height, 2)}%` }}
+                />
+
+                {/* Tooltip */}
+                {isHovered && (
+                  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-10 whitespace-nowrap">
+                    <div className="bg-[var(--color-background)] border border-[var(--color-border)] rounded-lg shadow-lg px-3 py-2">
+                      <p className="text-sm font-medium text-[var(--color-text-primary)]">
+                        {formatDate(data[index].date)}
+                      </p>
+                      <p className="text-sm text-[var(--color-text-muted)]">
+                        {value.toLocaleString()} {metricLabels[metric]}
+                      </p>
+                    </div>
+                    <div className="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 bg-[var(--color-background)] border-r border-b border-[var(--color-border)] rotate-45" />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* X-axis labels */}
+      <div className="flex justify-between text-xs text-[var(--color-text-muted)] px-1">
+        {data.map((d, i) => {
+          if (i % labelFrequency !== 0 && i !== data.length - 1) {
+            return <span key={i} className="flex-1" />;
+          }
+          return (
+            <span key={i} className="flex-1 text-center">
+              {formatDate(d.date)}
+            </span>
+          );
+        })}
+      </div>
+
+      {/* Summary row */}
+      <div className="flex items-center justify-center gap-6 pt-3 mt-1 border-t border-[var(--color-background)] text-sm">
+        <div className="text-center">
+          <span className="text-[var(--color-text-muted)]">Total: </span>
+          <span className="font-medium text-[var(--color-text-primary)]">
+            {formatValue(total)} {metricLabels[metric]}
+          </span>
+        </div>
+        <div className="text-center">
+          <span className="text-[var(--color-text-muted)]">Avg: </span>
+          <span className="font-medium text-[var(--color-text-primary)]">
+            {formatValue(Math.round(average))}/day
+          </span>
+        </div>
+        <div className="text-center">
+          <span className="text-[var(--color-text-muted)]">Peak: </span>
+          <span className="font-medium text-[var(--color-text-primary)]">
+            {formatValue(Math.max(...values))}
+          </span>
+          {peakDay && (
+            <span className="text-[var(--color-text-muted)]"> ({formatDate(peakDay)})</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/content/CodeBlock.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Copy, Check } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface CodeBlockProps {
+  language: string;
+  code: string;
+}
+
+export default function CodeBlock({ language, code }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const { theme } = useTheme();
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const style = theme === 'dark' ? oneDark : oneLight;
+
+  return (
+    <div className="group relative my-4 overflow-hidden rounded-lg border border-border">
+      {/* Header */}
+      <div className="flex items-center justify-between bg-background-secondary px-4 py-2">
+        <span className="text-xs font-medium text-text-muted uppercase">
+          {language}
+        </span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1 rounded px-2 py-1 text-xs text-text-muted hover:bg-background hover:text-text-primary"
+        >
+          {copied ? (
+            <>
+              <Check size={12} />
+              Copied!
+            </>
+          ) : (
+            <>
+              <Copy size={12} />
+              Copy
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Code */}
+      <SyntaxHighlighter
+        language={language}
+        style={style}
+        customStyle={{
+          margin: 0,
+          padding: '1rem',
+          background: 'transparent',
+          fontSize: '0.875rem',
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: 'var(--font-mono)',
+          },
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}

package/src/components/content/MarkdownRenderer.tsx

@@ -0,0 +1,64 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import CodeBlock from './CodeBlock';
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        code({ node, className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || '');
+          const isInline = !match && !String(children).includes('\n');
+
+          if (isInline) {
+            return (
+              <code
+                className="rounded bg-background-secondary px-1.5 py-0.5 font-mono text-sm"
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          }
+
+          return (
+            <CodeBlock
+              language={match?.[1] || 'text'}
+              code={String(children).replace(/\n$/, '')}
+            />
+          );
+        },
+        pre({ children }) {
+          // Avoid double wrapping from ReactMarkdown
+          return <>{children}</>;
+        },
+        a({ href, children }) {
+          return (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              {children}
+            </a>
+          );
+        },
+        table({ children }) {
+          return (
+            <div className="my-4 overflow-x-auto">
+              <table className="min-w-full border-collapse">{children}</table>
+            </div>
+          );
+        },
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

package/src/components/content/SSRMarkdownRenderer.tsx

@@ -0,0 +1,158 @@
+/**
+ * Server-safe markdown renderer for SSR.
+ * Uses react-markdown which is SSR-compatible.
+ * Does not use browser APIs or client-side state.
+ */
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface SSRMarkdownRendererProps {
+  content: string;
+}
+
+export function SSRMarkdownRenderer({ content }: SSRMarkdownRendererProps) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        code({ node, className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || '');
+          const isInline = !match && !String(children).includes('\n');
+
+          if (isInline) {
+            return (
+              <code
+                style={{
+                  backgroundColor: 'rgb(var(--color-background-secondary))',
+                  padding: '0.125rem 0.375rem',
+                  borderRadius: '0.25rem',
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: '0.875rem',
+                }}
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          }
+
+          // For code blocks, render a simple pre/code without syntax highlighting
+          // Syntax highlighting will be added on client-side hydration
+          const language = match?.[1] || 'text';
+          const codeString = String(children).replace(/\n$/, '');
+
+          return (
+            <div
+              style={{
+                margin: '1rem 0',
+                borderRadius: '0.5rem',
+                border: '1px solid rgb(var(--color-border))',
+                overflow: 'hidden',
+              }}
+            >
+              {/* Header */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  backgroundColor: 'rgb(var(--color-background-secondary))',
+                  padding: '0.5rem 1rem',
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: '0.75rem',
+                    fontWeight: 500,
+                    color: 'rgb(var(--color-text-muted))',
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  {language}
+                </span>
+              </div>
+
+              {/* Code */}
+              <pre
+                style={{
+                  margin: 0,
+                  padding: '1rem',
+                  overflow: 'auto',
+                  backgroundColor: 'rgb(var(--color-background-secondary))',
+                }}
+              >
+                <code
+                  style={{
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: '0.875rem',
+                    whiteSpace: 'pre',
+                  }}
+                >
+                  {codeString}
+                </code>
+              </pre>
+            </div>
+          );
+        },
+        pre({ children }) {
+          // Avoid double wrapping from ReactMarkdown
+          return <>{children}</>;
+        },
+        a({ href, children }) {
+          return (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: 'rgb(var(--color-primary))' }}
+            >
+              {children}
+            </a>
+          );
+        },
+        table({ children }) {
+          return (
+            <div style={{ margin: '1rem 0', overflowX: 'auto' }}>
+              <table style={{ minWidth: '100%', borderCollapse: 'collapse' }}>
+                {children}
+              </table>
+            </div>
+          );
+        },
+        th({ children }) {
+          return (
+            <th
+              style={{
+                border: '1px solid rgb(var(--color-border))',
+                padding: '0.5rem 1rem',
+                textAlign: 'left',
+                backgroundColor: 'rgb(var(--color-background-secondary))',
+                fontWeight: 600,
+              }}
+            >
+              {children}
+            </th>
+          );
+        },
+        td({ children }) {
+          return (
+            <td
+              style={{
+                border: '1px solid rgb(var(--color-border))',
+                padding: '0.5rem 1rem',
+                textAlign: 'left',
+              }}
+            >
+              {children}
+            </td>
+          );
+        },
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}
+
+export default SSRMarkdownRenderer;

package/src/contexts/AuthContext.tsx

@@ -0,0 +1,119 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  type ReactNode,
+} from 'react';
+import type { UserSession } from '@chaaskit/shared';
+import { api } from '../utils/api';
+
+interface RegisterResult {
+  requiresVerification: boolean;
+}
+
+interface LoginResult {
+  requiresVerification: boolean;
+}
+
+interface AuthContextType {
+  user: UserSession | null;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<LoginResult>;
+  register: (email: string, password: string, name?: string) => Promise<RegisterResult>;
+  logout: () => Promise<void>;
+  sendMagicLink: (email: string) => Promise<void>;
+  verifyEmail: (code: string) => Promise<void>;
+  resendVerification: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<UserSession | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Check for existing session
+    checkAuth();
+  }, []);
+
+  async function checkAuth() {
+    try {
+      const response = await api.get<{ user: UserSession }>('/api/auth/me');
+      setUser(response.user);
+    } catch {
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function login(email: string, password: string): Promise<LoginResult> {
+    const response = await api.post<{
+      user: UserSession;
+      token: string;
+      requiresVerification?: boolean;
+    }>('/api/auth/login', { email, password });
+    setUser(response.user);
+    return { requiresVerification: response.requiresVerification ?? false };
+  }
+
+  async function register(email: string, password: string, name?: string): Promise<RegisterResult> {
+    const response = await api.post<{
+      user: UserSession;
+      token: string;
+      requiresVerification?: boolean;
+    }>('/api/auth/register', { email, password, name });
+    setUser(response.user);
+    return { requiresVerification: response.requiresVerification ?? false };
+  }
+
+  async function logout() {
+    await api.post('/api/auth/logout', {});
+    setUser(null);
+  }
+
+  async function sendMagicLink(email: string) {
+    await api.post('/api/auth/magic-link', { email });
+  }
+
+  async function verifyEmail(code: string) {
+    await api.post<{ verified: boolean; message: string }>(
+      '/api/auth/verify-email',
+      { code }
+    );
+    // Refresh user data after verification
+    const response = await api.get<{ user: UserSession }>('/api/auth/me');
+    setUser(response.user);
+  }
+
+  async function resendVerification() {
+    await api.post<{ message: string }>('/api/auth/resend-verification', {});
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isLoading,
+        login,
+        register,
+        logout,
+        sendMagicLink,
+        verifyEmail,
+        resendVerification,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}