@chaaskit/client 0.1.0

package/src/components/LoadingSkeletons.tsx

@@ -0,0 +1,110 @@
+/**
+ * Loading skeleton for chat pages with sidebar.
+ * Used as SSR fallback for routes that render the full chat interface.
+ */
+export function ChatLoadingSkeleton() {
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      {/* Sidebar skeleton */}
+      <div
+        style={{
+          width: '256px',
+          backgroundColor: 'rgb(var(--color-sidebar))',
+          borderRight: '1px solid rgb(var(--color-border))',
+          padding: '1rem',
+        }}
+      >
+        <div
+          style={{
+            height: '2rem',
+            backgroundColor: 'rgb(var(--color-background-secondary))',
+            borderRadius: '0.5rem',
+            marginBottom: '1rem',
+          }}
+        />
+        <div
+          style={{
+            height: '1rem',
+            backgroundColor: 'rgb(var(--color-background-secondary))',
+            borderRadius: '0.25rem',
+            width: '80%',
+          }}
+        />
+      </div>
+      {/* Main content skeleton */}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'rgb(var(--color-background))',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '1rem',
+          }}
+        >
+          <div
+            style={{
+              width: '2rem',
+              height: '2rem',
+              border: '2px solid rgb(var(--color-primary))',
+              borderTopColor: 'transparent',
+              borderRadius: '50%',
+              animation: 'chaaskit-spin 1s linear infinite',
+            }}
+          />
+          <p style={{ color: 'rgb(var(--color-text-muted))' }}>Loading...</p>
+        </div>
+      </div>
+      <style>
+        {`
+          @keyframes chaaskit-spin {
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </div>
+  );
+}
+
+/**
+ * Simple centered loading spinner skeleton.
+ * Used as SSR fallback for simple pages without sidebar.
+ */
+export function SimpleLoadingSkeleton() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgb(var(--color-background))',
+      }}
+    >
+      <div
+        style={{
+          width: '2rem',
+          height: '2rem',
+          border: '2px solid rgb(var(--color-primary))',
+          borderTopColor: 'transparent',
+          borderRadius: '50%',
+          animation: 'chaaskit-spin 1s linear infinite',
+        }}
+      />
+      <style>
+        {`
+          @keyframes chaaskit-spin {
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </div>
+  );
+}

package/src/components/MCPCredentialsSection.tsx

@@ -0,0 +1,309 @@
+import { useState, useEffect } from 'react';
+import { Key, Link, Unlink, ExternalLink, Loader2, Check, AlertCircle } from 'lucide-react';
+import type { MCPCredentialStatus, MCPAuthMode } from '@chaaskit/shared';
+
+interface MCPCredentialsSectionProps {
+  onCredentialChange?: () => void;
+}
+
+export default function MCPCredentialsSection({ onCredentialChange }: MCPCredentialsSectionProps) {
+  const [credentials, setCredentials] = useState<MCPCredentialStatus[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [apiKeyInputs, setApiKeyInputs] = useState<Record<string, string>>({});
+  const [savingStates, setSavingStates] = useState<Record<string, 'idle' | 'saving' | 'saved' | 'error'>>({});
+  const [connectingStates, setConnectingStates] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    loadCredentials();
+
+    // Check for OAuth callback results in URL
+    const params = new URLSearchParams(window.location.search);
+    const success = params.get('success');
+    const errorParam = params.get('error');
+    const serverId = params.get('server');
+
+    if (success === 'oauth_connected' && serverId) {
+      // Clear URL params
+      window.history.replaceState({}, '', window.location.pathname);
+      // Refresh credentials
+      loadCredentials();
+    } else if (errorParam) {
+      setError(`OAuth error: ${errorParam.replace(/_/g, ' ')}`);
+      window.history.replaceState({}, '', window.location.pathname);
+    }
+  }, []);
+
+  async function loadCredentials() {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/mcp/credentials', {
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to load credentials');
+      }
+
+      const data = await response.json();
+      console.log('[MCP Credentials] Loaded:', data.credentials);
+      setCredentials(data.credentials || []);
+    } catch (err) {
+      console.error('Failed to load MCP credentials:', err);
+      setError('Failed to load credentials');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleSaveApiKey(serverId: string) {
+    const apiKey = apiKeyInputs[serverId];
+    if (!apiKey?.trim()) return;
+
+    setSavingStates((prev) => ({ ...prev, [serverId]: 'saving' }));
+
+    try {
+      const response = await fetch(`/api/mcp/credentials/${serverId}/apikey`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ apiKey: apiKey.trim() }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to save API key');
+      }
+
+      setSavingStates((prev) => ({ ...prev, [serverId]: 'saved' }));
+      setApiKeyInputs((prev) => ({ ...prev, [serverId]: '' }));
+
+      // Refresh credentials list
+      loadCredentials();
+      onCredentialChange?.();
+
+      // Reset status after delay
+      setTimeout(() => {
+        setSavingStates((prev) => ({ ...prev, [serverId]: 'idle' }));
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to save API key:', err);
+      setSavingStates((prev) => ({ ...prev, [serverId]: 'error' }));
+      setTimeout(() => {
+        setSavingStates((prev) => ({ ...prev, [serverId]: 'idle' }));
+      }, 2000);
+    }
+  }
+
+  async function handleDisconnect(serverId: string) {
+    try {
+      const response = await fetch(`/api/mcp/credentials/${serverId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to disconnect');
+      }
+
+      loadCredentials();
+      onCredentialChange?.();
+    } catch (err) {
+      console.error('Failed to disconnect:', err);
+      setError('Failed to disconnect');
+    }
+  }
+
+  async function handleOAuthConnect(serverId: string) {
+    setConnectingStates((prev) => ({ ...prev, [serverId]: true }));
+
+    try {
+      const response = await fetch(`/api/mcp/oauth/${serverId}/authorize`, {
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to start OAuth flow');
+      }
+
+      const data = await response.json();
+
+      // Redirect to OAuth provider
+      window.location.href = data.authorizationUrl;
+    } catch (err) {
+      console.error('Failed to start OAuth:', err);
+      setError('Failed to start authentication');
+      setConnectingStates((prev) => ({ ...prev, [serverId]: false }));
+    }
+  }
+
+  function getAuthModeLabel(authMode: MCPAuthMode): string {
+    switch (authMode) {
+      case 'user-apikey':
+        return 'API Key';
+      case 'user-oauth':
+        return 'OAuth';
+      default:
+        return authMode;
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-4">
+        <Loader2 className="h-5 w-5 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (credentials.length === 0) {
+    // No servers configured with user credentials
+    return null;
+  }
+
+  return (
+    <div className="pt-4 border-t border-border">
+      <h3 className="mb-3 text-sm font-medium text-text-primary">Tool Connections</h3>
+
+      {error && (
+        <div className="mb-3 flex items-center gap-2 rounded-lg bg-error/10 px-3 py-2 text-sm text-error">
+          <AlertCircle size={16} />
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {credentials.map((cred) => (
+          <div
+            key={cred.serverId}
+            className="rounded-lg border border-border bg-background-secondary p-3"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {cred.authMode === 'user-apikey' ? (
+                  <Key size={16} className="text-text-secondary" />
+                ) : (
+                  <Link size={16} className="text-text-secondary" />
+                )}
+                <span className="font-medium text-text-primary">{cred.serverName}</span>
+                <span className="rounded-full bg-background px-2 py-0.5 text-xs text-text-muted">
+                  {getAuthModeLabel(cred.authMode)}
+                </span>
+              </div>
+
+              {cred.hasCredential && (
+                <div className="flex items-center gap-2">
+                  <span className="flex items-center gap-1 text-xs text-success">
+                    <Check size={14} />
+                    Connected
+                  </span>
+                  <button
+                    onClick={() => handleDisconnect(cred.serverId)}
+                    className="rounded p-1 text-text-secondary hover:bg-background hover:text-error"
+                    title="Disconnect"
+                  >
+                    <Unlink size={14} />
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {cred.userInstructions && (
+              <p className="mt-2 text-xs text-text-muted">{cred.userInstructions}</p>
+            )}
+
+            {!cred.hasCredential && cred.authMode === 'user-apikey' && (
+              <div className="mt-3 flex gap-2">
+                <input
+                  type="password"
+                  value={apiKeyInputs[cred.serverId] || ''}
+                  onChange={(e) =>
+                    setApiKeyInputs((prev) => ({ ...prev, [cred.serverId]: e.target.value }))
+                  }
+                  placeholder="Enter API key..."
+                  className="flex-1 rounded-lg border border-input-border bg-input-background px-3 py-2 text-sm text-text-primary placeholder-text-muted focus:border-primary focus:outline-none"
+                />
+                <button
+                  onClick={() => handleSaveApiKey(cred.serverId)}
+                  disabled={
+                    !apiKeyInputs[cred.serverId]?.trim() ||
+                    savingStates[cred.serverId] === 'saving'
+                  }
+                  className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm text-white hover:bg-primary-hover disabled:opacity-50"
+                >
+                  {savingStates[cred.serverId] === 'saving' ? (
+                    <Loader2 size={14} className="animate-spin" />
+                  ) : savingStates[cred.serverId] === 'saved' ? (
+                    <Check size={14} />
+                  ) : (
+                    <Key size={14} />
+                  )}
+                  {savingStates[cred.serverId] === 'saving'
+                    ? 'Saving...'
+                    : savingStates[cred.serverId] === 'saved'
+                    ? 'Saved'
+                    : 'Save'}
+                </button>
+              </div>
+            )}
+
+            {!cred.hasCredential && cred.authMode === 'user-oauth' && (
+              <div className="mt-3">
+                <button
+                  onClick={() => handleOAuthConnect(cred.serverId)}
+                  disabled={connectingStates[cred.serverId]}
+                  className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm text-white hover:bg-primary-hover disabled:opacity-50"
+                >
+                  {connectingStates[cred.serverId] ? (
+                    <Loader2 size={14} className="animate-spin" />
+                  ) : (
+                    <ExternalLink size={14} />
+                  )}
+                  {connectingStates[cred.serverId] ? 'Connecting...' : 'Connect'}
+                </button>
+              </div>
+            )}
+
+            {cred.hasCredential && cred.authMode === 'user-apikey' && (
+              <div className="mt-3">
+                <details className="group">
+                  <summary className="cursor-pointer text-xs text-text-muted hover:text-text-secondary">
+                    Update API key
+                  </summary>
+                  <div className="mt-2 flex gap-2">
+                    <input
+                      type="password"
+                      value={apiKeyInputs[cred.serverId] || ''}
+                      onChange={(e) =>
+                        setApiKeyInputs((prev) => ({ ...prev, [cred.serverId]: e.target.value }))
+                      }
+                      placeholder="Enter new API key..."
+                      className="flex-1 rounded-lg border border-input-border bg-input-background px-3 py-2 text-sm text-text-primary placeholder-text-muted focus:border-primary focus:outline-none"
+                    />
+                    <button
+                      onClick={() => handleSaveApiKey(cred.serverId)}
+                      disabled={
+                        !apiKeyInputs[cred.serverId]?.trim() ||
+                        savingStates[cred.serverId] === 'saving'
+                      }
+                      className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm text-white hover:bg-primary-hover disabled:opacity-50"
+                    >
+                      {savingStates[cred.serverId] === 'saving' ? (
+                        <Loader2 size={14} className="animate-spin" />
+                      ) : savingStates[cred.serverId] === 'saved' ? (
+                        <Check size={14} />
+                      ) : (
+                        <Key size={14} />
+                      )}
+                      Update
+                    </button>
+                  </div>
+                </details>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/MentionChip.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { User, Users, FolderKanban, FileText, X } from 'lucide-react';
+import type { DocumentScope } from '@chaaskit/shared';
+
+interface MentionChipProps {
+  path: string;
+  onClick?: () => void;
+}
+
+// Parse path like "@my/doc-name" or "@team/engineering/doc-name"
+function parseMentionPath(path: string): { scope: DocumentScope; scopeSlug?: string; name: string } | null {
+  // Remove @ prefix if present
+  const cleanPath = path.startsWith('@') ? path.slice(1) : path;
+  const parts = cleanPath.split('/');
+
+  if (parts.length < 2) return null;
+
+  const scope = parts[0] as DocumentScope;
+  if (!['my', 'team', 'project'].includes(scope)) return null;
+
+  if (scope === 'my') {
+    return { scope, name: parts.slice(1).join('/') };
+  } else {
+    // team/slug/name or project/slug/name
+    if (parts.length < 3) return null;
+    return { scope, scopeSlug: parts[1], name: parts.slice(2).join('/') };
+  }
+}
+
+function getScopeIcon(scope: DocumentScope) {
+  switch (scope) {
+    case 'my':
+      return User;
+    case 'team':
+      return Users;
+    case 'project':
+      return FolderKanban;
+    default:
+      return FileText;
+  }
+}
+
+function getScopeColor(scope: DocumentScope) {
+  switch (scope) {
+    case 'my':
+      return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20';
+    case 'team':
+      return 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20';
+    case 'project':
+      return 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20';
+    default:
+      return 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20';
+  }
+}
+
+export default function MentionChip({ path, onClick }: MentionChipProps) {
+  const parsed = parseMentionPath(path);
+
+  if (!parsed) {
+    // Fallback: render as plain text if we can't parse
+    return <span className="text-primary">{path}</span>;
+  }
+
+  const Icon = getScopeIcon(parsed.scope);
+  const colorClass = getScopeColor(parsed.scope);
+
+  return (
+    <span
+      onClick={onClick}
+      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium border ${colorClass} ${onClick ? 'cursor-pointer hover:opacity-80' : ''}`}
+      title={path}
+    >
+      <Icon size={12} />
+      <span className="max-w-[150px] truncate">{parsed.name}</span>
+    </span>
+  );
+}
+
+// Regex to match @scope/path patterns
+// Matches: @my/name, @team/slug/name, @project/slug/name
+const MENTION_REGEX = /@(my|team|project)\/[\w-]+(\/[\w-]+)*/g;
+
+interface ParsedMentionSegment {
+  type: 'text' | 'mention';
+  content: string;
+}
+
+export function parseMentionsFromText(text: string): ParsedMentionSegment[] {
+  const segments: ParsedMentionSegment[] = [];
+  let lastIndex = 0;
+
+  // Reset regex state
+  MENTION_REGEX.lastIndex = 0;
+
+  let match;
+  while ((match = MENTION_REGEX.exec(text)) !== null) {
+    // Add text before the mention
+    if (match.index > lastIndex) {
+      segments.push({
+        type: 'text',
+        content: text.slice(lastIndex, match.index),
+      });
+    }
+
+    // Add the mention
+    segments.push({
+      type: 'mention',
+      content: match[0],
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    segments.push({
+      type: 'text',
+      content: text.slice(lastIndex),
+    });
+  }
+
+  return segments;
+}
+
+interface MessageContentWithMentionsProps {
+  content: string;
+  onMentionClick?: (path: string) => void;
+}
+
+export function MessageContentWithMentions({ content, onMentionClick }: MessageContentWithMentionsProps) {
+  const segments = parseMentionsFromText(content);
+
+  return (
+    <>
+      {segments.map((segment, index) => {
+        if (segment.type === 'mention') {
+          return (
+            <MentionChip
+              key={index}
+              path={segment.content}
+              onClick={onMentionClick ? () => onMentionClick(segment.content) : undefined}
+            />
+          );
+        }
+        return <span key={index}>{segment.content}</span>;
+      })}
+    </>
+  );
+}