@hiai-gg/hiai-docs 0.0.1

package/frontend/src/lib/api/tags.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, test } from "bun:test";
+import {
+	createTag,
+	createTagInputSchema,
+	deleteTag,
+	getTag,
+	updateTag,
+	updateTagInputSchema,
+} from "./tags";
+
+describe("createTagInputSchema", () => {
+	test("accepts a non-empty name", () => {
+		const result = createTagInputSchema.safeParse({ name: "design" });
+		expect(result.success).toBe(true);
+		if (result.success) {
+			expect(result.data.name).toBe("design");
+		}
+	});
+
+	test("trims surrounding whitespace", () => {
+		const result = createTagInputSchema.safeParse({ name: "  design  " });
+		expect(result.success).toBe(true);
+		if (result.success) {
+			expect(result.data.name).toBe("design");
+		}
+	});
+
+	test("rejects an empty name", () => {
+		const result = createTagInputSchema.safeParse({ name: "" });
+		expect(result.success).toBe(false);
+	});
+
+	test("rejects a whitespace-only name after trim", () => {
+		const result = createTagInputSchema.safeParse({ name: "   " });
+		expect(result.success).toBe(false);
+	});
+
+	test("rejects a name over 50 chars", () => {
+		const result = createTagInputSchema.safeParse({ name: "x".repeat(51) });
+		expect(result.success).toBe(false);
+	});
+
+	test("accepts a name of exactly 50 chars", () => {
+		const result = createTagInputSchema.safeParse({ name: "x".repeat(50) });
+		expect(result.success).toBe(true);
+	});
+});
+
+describe("updateTagInputSchema", () => {
+	test("accepts a name update", () => {
+		const result = updateTagInputSchema.safeParse({ name: "engineering" });
+		expect(result.success).toBe(true);
+	});
+
+	test("rejects an empty name", () => {
+		const result = updateTagInputSchema.safeParse({ name: "" });
+		expect(result.success).toBe(false);
+	});
+});
+
+describe("tag api functions", () => {
+	test("createTag is a function", () => {
+		expect(typeof createTag).toBe("function");
+	});
+
+	test("updateTag is a function", () => {
+		expect(typeof updateTag).toBe("function");
+	});
+
+	test("deleteTag is a function", () => {
+		expect(typeof deleteTag).toBe("function");
+	});
+
+	test("getTag is a function", () => {
+		expect(typeof getTag).toBe("function");
+	});
+
+	test("createTag validates input via schema", () => {
+		expect(() => createTag("")).toThrow();
+	});
+
+	test("createTag validates length via schema", () => {
+		expect(() => createTag("x".repeat(51))).toThrow();
+	});
+
+	test("updateTag validates input via schema", () => {
+		expect(() =>
+			updateTag("550e8400-e29b-41d4-a716-446655440000", { name: "" }),
+		).toThrow();
+	});
+});

package/frontend/src/lib/api/tags.ts

@@ -0,0 +1,87 @@
+import { z } from "zod";
+import { apiFetch } from "./client.js";
+
+export interface Tag {
+	id: string;
+	name: string;
+	color: string | null;
+	createdAt: string;
+	documentCount?: number;
+}
+
+// Frontend cap is 50 chars; backend hard limit is 100 (see backend/src/api/routes/tags.ts).
+
+export const createTagInputSchema = z.object({
+	name: z
+		.string()
+		.trim()
+		.min(1, "Name is required")
+		.max(50, "Name must be 50 characters or less"),
+	color: z.string().max(20, "Color must be 20 characters or less").optional(),
+});
+
+export const updateTagInputSchema = z.object({
+	name: z
+		.string()
+		.trim()
+		.min(1, "Name is required")
+		.max(50, "Name must be 50 characters or less")
+		.optional(),
+	color: z.string().max(20, "Color must be 20 characters or less").optional(),
+});
+
+export type CreateTagInput = z.infer<typeof createTagInputSchema>;
+export type UpdateTagInput = z.infer<typeof updateTagInputSchema>;
+
+// --- API Functions ---
+
+export async function listTags(): Promise<Tag[]> {
+	return apiFetch("/api/tags");
+}
+
+export function getTag(id: string): Promise<Tag> {
+	return apiFetch(`/api/tags/${id}`);
+}
+
+export function createTag(name: string, color?: string): Promise<Tag> {
+	const input = createTagInputSchema.parse({ name, color });
+	return apiFetch("/api/tags", {
+		method: "POST",
+		body: JSON.stringify(input),
+	});
+}
+
+export function updateTag(
+	id: string,
+	data: { name?: string; color?: string },
+): Promise<Tag> {
+	const input = updateTagInputSchema.parse(data);
+	return apiFetch(`/api/tags/${id}`, {
+		method: "PATCH",
+		body: JSON.stringify(input),
+	});
+}
+
+export function deleteTag(id: string): Promise<void> {
+	return apiFetch(`/api/tags/${id}`, { method: "DELETE" });
+}
+
+export function addTagToDocument(
+	documentId: string,
+	tagId: string,
+): Promise<void> {
+	const input = z.object({ tagId: z.string().uuid() }).parse({ tagId });
+	return apiFetch(`/api/documents/${documentId}/tags`, {
+		method: "POST",
+		body: JSON.stringify(input),
+	});
+}
+
+export function removeTagFromDocument(
+	documentId: string,
+	tagId: string,
+): Promise<void> {
+	return apiFetch(`/api/documents/${documentId}/tags/${tagId}`, {
+		method: "DELETE",
+	});
+}

package/frontend/src/lib/auth-client.ts

@@ -0,0 +1,10 @@
+import { createAuthClient } from "better-auth/client";
+
+export const authClient = createAuthClient({
+	// Use the current origin so cookies are set on the same origin as the
+	// frontend (e.g. http://localhost:50701) rather than the backend port.
+	// Auth requests are forwarded by the SvelteKit proxy at /api/[...path].
+	baseURL: typeof window !== "undefined" ? window.location.origin : "",
+});
+
+export const { signIn, signUp, signOut, getSession } = authClient;

package/frontend/src/lib/collaboration.ts

@@ -0,0 +1,63 @@
+import { WebsocketProvider } from "y-websocket";
+import * as Y from "yjs";
+
+export interface CollaborationSession {
+	provider: WebsocketProvider;
+	doc: Y.Doc;
+	destroy: () => void;
+}
+
+let activeSession: CollaborationSession | null = null;
+
+export function startCollaboration(
+	documentId: string,
+	accessToken: string,
+	onUpdate?: (update: Uint8Array) => void,
+): CollaborationSession {
+	stopCollaboration();
+
+	const doc = new Y.Doc();
+	const wsUrl = `ws://${window.location.hostname}:${window.location.port}/api/ws/collab/${documentId}?token=${encodeURIComponent(accessToken)}`;
+
+	const provider = new WebsocketProvider(wsUrl, documentId, doc, {
+		connect: true,
+		params: { token: accessToken },
+	});
+
+	provider.on("sync", (_synced: boolean) => {});
+
+	provider.on("status", (_status: { status: string }) => {});
+
+	provider.on("connection-close", () => {});
+
+	const updateHandler = onUpdate;
+	if (updateHandler) {
+		doc.on("update", updateHandler);
+	}
+
+	activeSession = {
+		provider,
+		doc,
+		destroy: () => {
+			if (updateHandler) {
+				doc.off("update", updateHandler);
+			}
+			provider.disconnect();
+			provider.destroy();
+			doc.destroy();
+		},
+	};
+
+	return activeSession;
+}
+
+export function stopCollaboration() {
+	if (activeSession) {
+		activeSession.destroy();
+		activeSession = null;
+	}
+}
+
+export function getActiveSession(): CollaborationSession | null {
+	return activeSession;
+}

package/frontend/src/lib/components/AttachmentUpload.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+import * as m from "$lib/paraglide/messages.js";
+
+const {
+	documentId = "",
+	onUpload,
+}: {
+	documentId?: string;
+	onUpload?: (file: File) => void;
+} = $props();
+
+let dragOver = $state(false);
+let uploadedFile = $state<File | null>(null);
+let error = $state("");
+let inputRef: HTMLInputElement | undefined = $state();
+
+const maxSize = 10 * 1024 * 1024; // 10MB
+const accept = ".jpg,.jpeg,.png,.gif,.webp,.pdf,.md,.txt,.csv,.json";
+
+function formatSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function validateFile(file: File): boolean {
+	if (file.size > maxSize) {
+		error = m.attachment_file_too_large({ size: formatSize(file.size) });
+		return false;
+	}
+	error = "";
+	return true;
+}
+
+function handleFiles(files: FileList | null) {
+	if (!files?.[0]) return;
+	const file = files[0];
+	if (validateFile(file)) {
+		uploadedFile = file;
+		onUpload?.(file);
+	}
+}
+
+function handleDrop(e: DragEvent) {
+	e.preventDefault();
+	dragOver = false;
+	handleFiles(e.dataTransfer?.files ?? null);
+}
+
+function handleDragOver(e: DragEvent) {
+	e.preventDefault();
+	dragOver = true;
+}
+
+function handleDragLeave() {
+	dragOver = false;
+}
+
+function openPicker() {
+	inputRef?.click();
+}
+
+function removeFile() {
+	uploadedFile = null;
+	error = "";
+	if (inputRef) inputRef.value = "";
+}
+</script>
+
+<div class="space-y-2">
+  {#if !uploadedFile}
+    <button
+      onclick={openPicker}
+      ondrop={handleDrop}
+      ondragover={handleDragOver}
+      ondragleave={handleDragLeave}
+      class="flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors
+        {dragOver ? 'border-primary bg-primary/5' : 'border-border hover:border-muted-foreground/50'}"
+    >
+      <svg class="h-8 w-8 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+        <polyline points="17 8 12 3 7 8"></polyline>
+        <line x1="12" y1="3" x2="12" y2="15"></line>
+      </svg>
+      <span class="text-sm font-medium">{m.attachment_drop_here()}</span>
+      <span class="text-xs text-muted-foreground">{m.attachment_types_hint()}</span>
+    </button>
+    <input bind:this={inputRef} type="file" {accept} onchange={(e) => handleFiles(e.currentTarget.files)} class="hidden" />
+  {:else}
+    <div class="flex items-center gap-3 rounded-lg border border-border bg-card p-3">
+      <div class="flex h-8 w-8 items-center justify-center rounded bg-muted text-xs font-medium">
+        {uploadedFile.name.split(".").pop()?.toUpperCase() ?? "FILE"}
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="truncate text-sm font-medium">{uploadedFile.name}</p>
+        <p class="text-xs text-muted-foreground">{formatSize(uploadedFile.size)}</p>
+      </div>
+      <button onclick={removeFile} class="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground" aria-label={m.attachment_remove()}>
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  {/if}
+
+  {#if error}
+    <p class="text-xs text-destructive">{error}</p>
+  {/if}
+</div>

package/frontend/src/lib/components/DatePicker.svelte

@@ -0,0 +1,322 @@
+<!-- DatePicker.svelte — Self-contained, theme-token-styled date picker.
+     Replaces the native <input type="date"> whose popup calendar ignores
+     `accent-color` in Chrome and renders a fixed blue. This calendar uses
+     our CSS variables, so the selected day follows the brand accent
+     (--primary) in both light and dark themes. Value is an ISO date string
+     ("YYYY-MM-DD") or "" when unset. -->
+<script lang="ts">
+import { Calendar, ChevronLeft, ChevronRight } from "lucide-svelte";
+import * as m from "$lib/paraglide/messages.js";
+
+let {
+	value = $bindable(""),
+	onchange,
+	id,
+	ariaLabel = m.date_picker_aria(),
+	placeholder = m.date_picker_placeholder(),
+}: {
+	value?: string;
+	onchange?: () => void;
+	id?: string;
+	ariaLabel?: string;
+	placeholder?: string;
+} = $props();
+
+let open = $state(false);
+let root = $state<HTMLDivElement | null>(null);
+
+const WEEKDAYS = [
+	m.weekday_mo(),
+	m.weekday_tu(),
+	m.weekday_we(),
+	m.weekday_th(),
+	m.weekday_fr(),
+	m.weekday_sa(),
+	m.weekday_su(),
+];
+const MONTHS = [
+	m.month_january(),
+	m.month_february(),
+	m.month_march(),
+	m.month_april(),
+	m.month_may(),
+	m.month_june(),
+	m.month_july(),
+	m.month_august(),
+	m.month_september(),
+	m.month_october(),
+	m.month_november(),
+	m.month_december(),
+];
+
+function pad(n: number): string {
+	return String(n).padStart(2, "0");
+}
+
+function parse(v: string): { y: number; m: number; d: number } | null {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+	if (!match) return null;
+	return { y: Number(match[1]), m: Number(match[2]) - 1, d: Number(match[3]) };
+}
+
+const today = new Date();
+let viewYear = $state(today.getFullYear());
+let viewMonth = $state(today.getMonth());
+
+// Sync the visible month to the selected value when opening.
+$effect(() => {
+	if (open) {
+		const p = parse(value);
+		if (p) {
+			viewYear = p.y;
+			viewMonth = p.m;
+		}
+	}
+});
+
+const selected = $derived(parse(value));
+
+function daysGrid(): Array<number | null> {
+	const firstWeekday = new Date(viewYear, viewMonth, 1).getDay(); // 0 = Sun
+	const offset = (firstWeekday + 6) % 7; // shift to Monday-first
+	const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+	const cells: Array<number | null> = [];
+	for (let i = 0; i < offset; i++) cells.push(null);
+	for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+	return cells;
+}
+
+function isToday(d: number): boolean {
+	return (
+		d === today.getDate() &&
+		viewMonth === today.getMonth() &&
+		viewYear === today.getFullYear()
+	);
+}
+
+function isSelected(d: number): boolean {
+	return (
+		selected !== null &&
+		selected.y === viewYear &&
+		selected.m === viewMonth &&
+		selected.d === d
+	);
+}
+
+function pick(d: number) {
+	value = `${viewYear}-${pad(viewMonth + 1)}-${pad(d)}`;
+	open = false;
+	onchange?.();
+}
+
+function clear() {
+	value = "";
+	open = false;
+	onchange?.();
+}
+
+function prevMonth() {
+	if (viewMonth === 0) {
+		viewMonth = 11;
+		viewYear -= 1;
+	} else {
+		viewMonth -= 1;
+	}
+}
+
+function nextMonth() {
+	if (viewMonth === 11) {
+		viewMonth = 0;
+		viewYear += 1;
+	} else {
+		viewMonth += 1;
+	}
+}
+
+$effect(() => {
+	if (!open) return;
+	function onDocPointer(e: PointerEvent) {
+		if (root && !root.contains(e.target as Node)) open = false;
+	}
+	function onKey(e: KeyboardEvent) {
+		if (e.key === "Escape") open = false;
+	}
+	document.addEventListener("pointerdown", onDocPointer);
+	document.addEventListener("keydown", onKey);
+	return () => {
+		document.removeEventListener("pointerdown", onDocPointer);
+		document.removeEventListener("keydown", onKey);
+	};
+});
+</script>
+
+<div class="datepicker" bind:this={root}>
+	<button
+		type="button"
+		{id}
+		aria-label={ariaLabel}
+		aria-haspopup="dialog"
+		aria-expanded={open}
+		onclick={() => (open = !open)}
+		class="dp-trigger"
+	>
+		<Calendar class="size-3.5 shrink-0 opacity-70" />
+		<span class={value ? "" : "dp-placeholder"}>{value || placeholder}</span>
+	</button>
+
+	{#if open}
+		<div class="dp-popover" role="dialog" aria-label={ariaLabel}>
+			<div class="dp-header">
+				<button type="button" class="dp-nav" onclick={prevMonth} aria-label={m.date_picker_prev_month()}>
+					<ChevronLeft class="size-4" />
+				</button>
+				<span class="dp-title">{MONTHS[viewMonth]} {viewYear}</span>
+				<button type="button" class="dp-nav" onclick={nextMonth} aria-label={m.date_picker_next_month()}>
+					<ChevronRight class="size-4" />
+				</button>
+			</div>
+			<div class="dp-weekdays">
+				{#each WEEKDAYS as wd (wd)}<span class="dp-weekday">{wd}</span>{/each}
+			</div>
+			<div class="dp-grid">
+				{#each daysGrid() as d, i (i)}
+					{#if d === null}
+						<span class="dp-empty"></span>
+					{:else}
+						<button
+							type="button"
+							class="dp-day"
+							class:selected={isSelected(d)}
+							class:today={isToday(d)}
+							onclick={() => pick(d)}
+						>{d}</button>
+					{/if}
+				{/each}
+			</div>
+			{#if value}
+				<button type="button" class="dp-clear" onclick={clear}>{m.date_picker_clear()}</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.datepicker {
+		position: relative;
+	}
+	.dp-trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		height: 2rem;
+		width: 100%;
+		padding: 0 0.625rem;
+		border: 1px solid var(--input);
+		border-radius: 6px;
+		background: transparent;
+		color: var(--foreground);
+		font-size: 0.875rem;
+		cursor: pointer;
+		text-align: left;
+	}
+	.dp-trigger:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 1px var(--ring);
+	}
+	.dp-placeholder {
+		color: var(--muted-foreground);
+	}
+	.dp-popover {
+		position: absolute;
+		z-index: 60;
+		top: calc(100% + 4px);
+		left: 0;
+		width: 16rem;
+		padding: 8px;
+		background: var(--popover);
+		color: var(--popover-foreground);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+	}
+	.dp-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+	.dp-title {
+		font-size: 0.8125rem;
+		font-weight: 600;
+	}
+	.dp-nav {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 6px;
+		background: transparent;
+		border: none;
+		color: var(--muted-foreground);
+		cursor: pointer;
+	}
+	.dp-nav:hover {
+		background: var(--accent);
+		color: var(--accent-foreground);
+	}
+	.dp-weekdays,
+	.dp-grid {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		gap: 2px;
+	}
+	.dp-weekday {
+		text-align: center;
+		font-size: 0.6875rem;
+		color: var(--muted-foreground);
+		padding: 2px 0;
+	}
+	.dp-empty {
+		aspect-ratio: 1;
+	}
+	.dp-day {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		aspect-ratio: 1;
+		border-radius: 6px;
+		border: none;
+		background: transparent;
+		color: var(--foreground);
+		font-size: 0.8125rem;
+		cursor: pointer;
+	}
+	.dp-day:hover {
+		background: var(--accent);
+		color: var(--accent-foreground);
+	}
+	.dp-day.today {
+		box-shadow: inset 0 0 0 1px var(--ring);
+	}
+	.dp-day.selected,
+	.dp-day.selected:hover {
+		background: var(--primary);
+		color: var(--primary-foreground);
+	}
+	.dp-clear {
+		margin-top: 6px;
+		width: 100%;
+		padding: 4px 0;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+		background: transparent;
+		border: 1px solid var(--border);
+		border-radius: 6px;
+		cursor: pointer;
+	}
+	.dp-clear:hover {
+		background: var(--accent);
+		color: var(--accent-foreground);
+	}
+</style>