@chaaskit/client 0.1.0

package/src/components/ProjectFolder.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+import { ChevronDown, ChevronRight, Folder, MessageSquare, Settings, Plus, Trash2, GitBranch } from 'lucide-react';
+import type { ProjectWithThreadCount, ThreadSummary } from '@chaaskit/shared';
+import { useAppPath } from '../hooks/useAppPath';
+
+interface ProjectFolderProps {
+  project: ProjectWithThreadCount;
+  threads: ThreadSummary[];
+  selectedThreadId?: string;
+  onEditProject: () => void;
+  onNewThread: () => void;
+  onSelectThread: (threadId: string) => void;
+  onDeleteThread: (threadId: string, e: React.MouseEvent) => void;
+}
+
+export default function ProjectFolder({
+  project,
+  threads,
+  selectedThreadId,
+  onEditProject,
+  onNewThread,
+  onSelectThread,
+  onDeleteThread,
+}: ProjectFolderProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+
+  const projectThreads = threads.filter((t) => t.projectId === project.id);
+
+  function handleToggle() {
+    setIsExpanded(!isExpanded);
+  }
+
+  function handleEditClick(e: React.MouseEvent) {
+    e.stopPropagation();
+    onEditProject();
+  }
+
+  function handleNewThreadClick(e: React.MouseEvent) {
+    e.stopPropagation();
+    onNewThread();
+  }
+
+  function handleThreadClick(threadId: string) {
+    onSelectThread(threadId);
+    navigate(appPath(`/thread/${threadId}`));
+  }
+
+  return (
+    <div className="mb-1">
+      {/* Project Header */}
+      <div
+        onClick={handleToggle}
+        className="group flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer transition-colors text-text-secondary hover:bg-background-secondary hover:text-text-primary"
+      >
+        {/* Expand/collapse chevron */}
+        <span className="p-0.5">
+          {isExpanded ? (
+            <ChevronDown size={14} />
+          ) : (
+            <ChevronRight size={14} />
+          )}
+        </span>
+
+        {/* Folder icon with project color */}
+        <Folder
+          size={16}
+          className="flex-shrink-0"
+          style={{ color: project.color }}
+          fill={project.color}
+        />
+
+        {/* Project name */}
+        <span className="flex-1 text-sm truncate">{project.name}</span>
+
+        {/* Thread count badge */}
+        <span className="text-xs text-text-muted px-1.5 py-0.5 bg-background-secondary rounded">
+          {project.threadCount}
+        </span>
+
+        {/* Action buttons (visible on hover) */}
+        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            onClick={handleNewThreadClick}
+            className="p-1 rounded hover:bg-black/10 dark:hover:bg-white/10"
+            title="New thread in project"
+          >
+            <Plus size={14} />
+          </button>
+          <button
+            onClick={handleEditClick}
+            className="p-1 rounded hover:bg-black/10 dark:hover:bg-white/10"
+            title="Edit project"
+          >
+            <Settings size={14} />
+          </button>
+        </div>
+      </div>
+
+      {/* Project Threads */}
+      {isExpanded && (
+        <div className="ml-6 pl-2 border-l border-border">
+          {projectThreads.length === 0 ? (
+            <div className="py-2 px-2 text-xs text-text-muted italic">
+              No threads yet
+            </div>
+          ) : (
+            projectThreads.map((thread) => (
+              <div
+                key={thread.id}
+                onClick={() => handleThreadClick(thread.id)}
+                className={`group flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer transition-colors ${
+                  selectedThreadId === thread.id
+                    ? 'bg-background-secondary text-text-primary'
+                    : 'text-text-secondary hover:bg-background-secondary hover:text-text-primary'
+                }`}
+              >
+                {thread.parentThreadId ? (
+                  <span title="Branched conversation">
+                    <GitBranch size={14} className="flex-shrink-0" />
+                  </span>
+                ) : (
+                  <MessageSquare size={14} className="flex-shrink-0" />
+                )}
+                <span className="flex-1 text-xs truncate">{thread.title}</span>
+                <button
+                  onClick={(e) => onDeleteThread(thread.id, e)}
+                  className="rounded p-1 text-text-muted opacity-0 hover:bg-error/10 hover:text-error group-hover:opacity-100 touch-device:opacity-100 transition-opacity"
+                >
+                  <Trash2 size={12} />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ProjectModal.tsx

@@ -0,0 +1,296 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, FolderPlus, Loader2, Trash2 } from 'lucide-react';
+import type { Project, ProjectSharing } from '@chaaskit/shared';
+import { useProject } from '../contexts/ProjectContext';
+import { useTeam } from '../contexts/TeamContext';
+
+interface ProjectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  project?: Project | null; // If provided, we're editing; otherwise creating
+}
+
+export default function ProjectModal({ isOpen, onClose, project }: ProjectModalProps) {
+  const { createProject, updateProject, archiveProject, projectColors } = useProject();
+  const { currentTeamId, getCurrentTeamRole } = useTeam();
+  const [name, setName] = useState('');
+  const [color, setColor] = useState(projectColors[0] || '#3b82f6');
+  const [context, setContext] = useState('');
+  const [sharing, setSharing] = useState<ProjectSharing>('private');
+  const [isLoading, setIsLoading] = useState(false);
+  const [showArchiveConfirm, setShowArchiveConfirm] = useState(false);
+
+  const isEditing = !!project;
+  const teamRole = getCurrentTeamRole();
+  const canEdit = !project || project.userId === undefined ||
+    (currentTeamId && (teamRole === 'owner' || teamRole === 'admin'));
+
+  // Reset form when modal opens/closes or project changes
+  useEffect(() => {
+    if (isOpen) {
+      if (project) {
+        setName(project.name);
+        setColor(project.color);
+        setContext(project.context || '');
+        setSharing(project.sharing);
+      } else {
+        setName('');
+        setColor(projectColors[0] || '#3b82f6');
+        setContext('');
+        setSharing('private');
+      }
+      setShowArchiveConfirm(false);
+    }
+  }, [isOpen, project, projectColors]);
+
+  if (!isOpen) return null;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setIsLoading(true);
+    try {
+      if (isEditing && project) {
+        await updateProject(project.id, {
+          name: name.trim(),
+          color,
+          context: context.trim() || null,
+          sharing: currentTeamId ? sharing : 'private',
+        });
+      } else {
+        await createProject({
+          name: name.trim(),
+          color,
+          context: context.trim() || undefined,
+          sharing: currentTeamId ? sharing : 'private',
+        });
+      }
+      onClose();
+    } catch (error) {
+      console.error('Failed to save project:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleArchive() {
+    if (!project) return;
+
+    setIsLoading(true);
+    try {
+      await archiveProject(project.id);
+      onClose();
+    } catch (error) {
+      console.error('Failed to archive project:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-lg rounded-lg bg-background border border-border shadow-xl">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <div className="flex items-center gap-2">
+            <FolderPlus size={20} className="text-primary" />
+            <h2 className="text-lg font-semibold text-text-primary">
+              {isEditing ? 'Edit Project' : 'Create Project'}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-text-muted hover:bg-background-secondary hover:text-text-primary"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
+          {/* Name */}
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-2">
+              Project Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="My Project"
+              className="w-full rounded-lg border border-border bg-background p-3 text-sm text-text-primary placeholder-text-muted focus:border-primary focus:outline-none"
+              autoFocus
+              required
+              maxLength={100}
+              disabled={!canEdit}
+            />
+          </div>
+
+          {/* Color Picker */}
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-2">
+              Color
+            </label>
+            <div className="flex gap-2 flex-wrap">
+              {projectColors.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => canEdit && setColor(c)}
+                  className={`w-8 h-8 rounded-full border-2 transition-all ${
+                    color === c
+                      ? 'border-text-primary scale-110'
+                      : 'border-transparent hover:scale-105'
+                  } ${!canEdit ? 'cursor-not-allowed opacity-50' : ''}`}
+                  style={{ backgroundColor: c }}
+                  disabled={!canEdit}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Context */}
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-2">
+              Project Context (Optional)
+            </label>
+            <textarea
+              value={context}
+              onChange={(e) => setContext(e.target.value)}
+              placeholder="Add context that the AI will use for all conversations in this project..."
+              className="w-full rounded-lg border border-border bg-background p-3 text-sm text-text-primary placeholder-text-muted focus:border-primary focus:outline-none resize-none"
+              rows={4}
+              maxLength={10000}
+              disabled={!canEdit}
+            />
+            <p className="mt-1 text-xs text-text-muted">
+              This context is included in all AI conversations within this project.
+            </p>
+          </div>
+
+          {/* Sharing (only show for team projects) */}
+          {currentTeamId && (
+            <div>
+              <label className="block text-sm font-medium text-text-secondary mb-2">
+                Sharing
+              </label>
+              <div className="space-y-2">
+                <label className="flex items-start gap-3 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="sharing"
+                    value="private"
+                    checked={sharing === 'private'}
+                    onChange={() => setSharing('private')}
+                    className="mt-1"
+                    disabled={!canEdit}
+                  />
+                  <div>
+                    <div className="text-sm font-medium text-text-primary">Private</div>
+                    <div className="text-xs text-text-muted">
+                      Only you can see this project and its threads
+                    </div>
+                  </div>
+                </label>
+                <label className="flex items-start gap-3 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="sharing"
+                    value="team"
+                    checked={sharing === 'team'}
+                    onChange={() => setSharing('team')}
+                    className="mt-1"
+                    disabled={!canEdit}
+                  />
+                  <div>
+                    <div className="text-sm font-medium text-text-primary">Team</div>
+                    <div className="text-xs text-text-muted">
+                      All team members can see and contribute to this project
+                    </div>
+                  </div>
+                </label>
+              </div>
+            </div>
+          )}
+
+          {/* Archive section (only for editing) */}
+          {isEditing && canEdit && (
+            <div className="pt-4 border-t border-border">
+              {!showArchiveConfirm ? (
+                <button
+                  type="button"
+                  onClick={() => setShowArchiveConfirm(true)}
+                  className="flex items-center gap-2 text-sm text-error hover:text-error/80"
+                >
+                  <Trash2 size={16} />
+                  Archive Project
+                </button>
+              ) : (
+                <div className="p-3 bg-error/10 rounded-lg border border-error/20">
+                  <p className="text-sm text-text-primary mb-3">
+                    Are you sure you want to archive this project? All threads in this project will also be archived.
+                  </p>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={handleArchive}
+                      disabled={isLoading}
+                      className="flex items-center gap-2 rounded-lg bg-error px-3 py-1.5 text-sm font-medium text-white hover:bg-error/80 disabled:opacity-50"
+                    >
+                      {isLoading ? (
+                        <Loader2 size={14} className="animate-spin" />
+                      ) : (
+                        <Trash2 size={14} />
+                      )}
+                      Archive
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowArchiveConfirm(false)}
+                      className="rounded-lg px-3 py-1.5 text-sm font-medium text-text-secondary hover:bg-background-secondary"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="flex justify-end gap-2 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary"
+            >
+              Cancel
+            </button>
+            {canEdit && (
+              <button
+                type="submit"
+                disabled={isLoading || !name.trim()}
+                className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover disabled:opacity-50"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 size={16} className="animate-spin" />
+                    {isEditing ? 'Saving...' : 'Creating...'}
+                  </>
+                ) : (
+                  <>
+                    <FolderPlus size={16} />
+                    {isEditing ? 'Save Changes' : 'Create Project'}
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/components/SSRMessageList.tsx

@@ -0,0 +1,153 @@
+/**
+ * Server-safe message list component for SSR.
+ * This is a simplified, read-only version of MessageList that doesn't use:
+ * - Browser APIs (localStorage, window, navigator)
+ * - React hooks that require client-side state (useState, useEffect)
+ * - Context providers that require browser APIs (ThemeContext, etc.)
+ *
+ * For interactive features, hydrate with the full MessageList component.
+ */
+
+import type { Message } from '@chaaskit/shared';
+import { SSRMarkdownRenderer } from './content/SSRMarkdownRenderer';
+
+interface SSRMessageListProps {
+  messages: Message[];
+  appName?: string;
+}
+
+function UserIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  );
+}
+
+function BotIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}
+
+function SSRMessageItem({ message }: { message: Message }) {
+  const isUser = message.role === 'user';
+
+  if (isUser) {
+    return (
+      <div className="flex gap-3 flex-row-reverse">
+        {/* Avatar */}
+        <div
+          className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary"
+          style={{ backgroundColor: 'rgb(var(--color-primary))' }}
+        >
+          <span className="text-white">
+            <UserIcon />
+          </span>
+        </div>
+
+        {/* Message Content */}
+        <div
+          className="flex max-w-[85%] flex-col items-end"
+          style={{ maxWidth: '85%' }}
+        >
+          <div
+            className="rounded-lg px-3 py-2 bg-user-message-bg text-user-message-text"
+            style={{
+              backgroundColor: 'rgb(var(--color-user-message-bg))',
+              color: 'rgb(var(--color-user-message-text))',
+              borderRadius: '0.5rem',
+              padding: '0.5rem 0.75rem',
+            }}
+          >
+            <p style={{ whiteSpace: 'pre-wrap', fontSize: '0.875rem', margin: 0 }}>
+              {message.content}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Assistant message
+  return (
+    <div className="flex gap-3">
+      {/* Avatar */}
+      <div
+        className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-secondary"
+        style={{ backgroundColor: 'rgb(var(--color-secondary))' }}
+      >
+        <span className="text-white">
+          <BotIcon />
+        </span>
+      </div>
+
+      {/* Message Content */}
+      <div className="flex max-w-[85%] flex-col items-start" style={{ maxWidth: '85%' }}>
+        <div
+          className="rounded-lg px-3 py-2 bg-assistant-message-bg text-assistant-message-text"
+          style={{
+            backgroundColor: 'rgb(var(--color-assistant-message-bg))',
+            color: 'rgb(var(--color-assistant-message-text))',
+            borderRadius: '0.5rem',
+            padding: '0.5rem 0.75rem',
+          }}
+        >
+          <div className="markdown-content" style={{ fontSize: '0.875rem' }}>
+            <SSRMarkdownRenderer content={message.content} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SSRMessageList({ messages }: SSRMessageListProps) {
+  return (
+    <div
+      className="mx-auto max-w-3xl px-4 py-6"
+      style={{
+        maxWidth: '48rem',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        padding: '1.5rem 1rem',
+      }}
+    >
+      <div className="space-y-4" style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        {messages.map((message) => (
+          <SSRMessageItem key={message.id} message={message} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default SSRMessageList;