Add admin page with 4 tabs for managing queues, lifecycles, scrips, and custom fields

web/src/app/admin/page.tsx

@@ -0,0 +1,745 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Plus, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@/components/ui/tabs";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  getQueues,
+  createQueue,
+  getLifecycles,
+  createLifecycle,
+  getScrips,
+  createScrip,
+  getCustomFields,
+  createCustomField,
+} from "@/lib/api";
+import type { Queue, Lifecycle, Scrip, CustomField } from "@/lib/types";
+
+const LIFECYCLE_PLACEHOLDER = `{
+  "statuses": {
+    "initial": ["new"],
+    "active": ["open", "in_progress"],
+    "inactive": ["resolved", "closed"]
+  },
+  "transitions": {
+    "new": ["open"],
+    "open": ["in_progress", "resolved"],
+    "in_progress": ["resolved"],
+    "*": ["closed"]
+  }
+}`;
+
+export default function AdminPage() {
+  return (
+    <div className="flex flex-col gap-6">
+      <h1 className="text-2xl font-semibold tracking-tight">Admin</h1>
+      <Tabs defaultValue="queues">
+        <TabsList>
+          <TabsTrigger value="queues">Queues</TabsTrigger>
+          <TabsTrigger value="lifecycles">Lifecycles</TabsTrigger>
+          <TabsTrigger value="scrips">Scrips</TabsTrigger>
+          <TabsTrigger value="customfields">Custom Fields</TabsTrigger>
+        </TabsList>
+        <TabsContent value="queues">
+          <QueuesTab />
+        </TabsContent>
+        <TabsContent value="lifecycles">
+          <LifecyclesTab />
+        </TabsContent>
+        <TabsContent value="scrips">
+          <ScripsTab />
+        </TabsContent>
+        <TabsContent value="customfields">
+          <CustomFieldsTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function QueuesTab() {
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const fetchQueues = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const { data, error } = await getQueues();
+    if (error) setError(error);
+    else setQueues(data ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchQueues();
+  }, [fetchQueues]);
+
+  const handleCreate = async () => {
+    if (!name.trim()) return;
+    setSaving(true);
+    setSaveError(null);
+    const { error } = await createQueue({ name: name.trim(), description: description.trim() || undefined });
+    setSaving(false);
+    if (error) {
+      setSaveError(error);
+    } else {
+      setDialogOpen(false);
+      setName("");
+      setDescription("");
+      fetchQueues();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 pt-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-medium">Queues</h2>
+        <Button size="sm" onClick={() => setDialogOpen(true)}>
+          <Plus className="size-4" />
+          Add Queue
+        </Button>
+      </div>
+
+      {error && <div className="text-sm text-red-400">{error}</div>}
+      {loading ? (
+        <div className="text-sm text-neutral-400 py-6">Loading...</div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Description</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {queues.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={2} className="text-neutral-400 text-center py-6">
+                  No queues yet.
+                </TableCell>
+              </TableRow>
+            ) : (
+              queues.map((q) => (
+                <TableRow key={q.id}>
+                  <TableCell className="font-medium">{q.name}</TableCell>
+                  <TableCell className="text-neutral-400">{q.description ?? "-"}</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Queue</DialogTitle>
+            <DialogDescription>Create a new ticket queue.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="q-name">Name</Label>
+              <Input
+                id="q-name"
+                placeholder="Queue name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="q-desc">Description</Label>
+              <Textarea
+                id="q-desc"
+                placeholder="Optional description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </div>
+            {saveError && <div className="text-sm text-red-400">{saveError}</div>}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate} disabled={!name.trim() || saving}>
+              {saving ? "Saving..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function LifecyclesTab() {
+  const [lifecycles, setLifecycles] = useState<Lifecycle[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [definition, setDefinition] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const fetchLifecycles = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const { data, error } = await getLifecycles();
+    if (error) setError(error);
+    else setLifecycles(data ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchLifecycles();
+  }, [fetchLifecycles]);
+
+  const handleCreate = async () => {
+    if (!name.trim() || !definition.trim()) return;
+    let parsed: Record<string, unknown>;
+    try {
+      parsed = JSON.parse(definition);
+    } catch {
+      setSaveError("Invalid JSON definition.");
+      return;
+    }
+    setSaving(true);
+    setSaveError(null);
+    const { error } = await createLifecycle({ name: name.trim(), definition: parsed });
+    setSaving(false);
+    if (error) {
+      setSaveError(error);
+    } else {
+      setDialogOpen(false);
+      setName("");
+      setDefinition("");
+      fetchLifecycles();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 pt-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-medium">Lifecycles</h2>
+        <Button size="sm" onClick={() => setDialogOpen(true)}>
+          <Plus className="size-4" />
+          Add Lifecycle
+        </Button>
+      </div>
+
+      {error && <div className="text-sm text-red-400">{error}</div>}
+      {loading ? (
+        <div className="text-sm text-neutral-400 py-6">Loading...</div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {lifecycles.length === 0 ? (
+              <TableRow>
+                <TableCell className="text-neutral-400 text-center py-6">
+                  No lifecycles yet.
+                </TableCell>
+              </TableRow>
+            ) : (
+              lifecycles.map((l) => (
+                <TableRow key={l.id}>
+                  <TableCell className="font-medium">{l.name}</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Lifecycle</DialogTitle>
+            <DialogDescription>Create a new lifecycle with a JSON definition.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="lc-name">Name</Label>
+              <Input
+                id="lc-name"
+                placeholder="Lifecycle name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="lc-def">Definition (JSON)</Label>
+              <Textarea
+                id="lc-def"
+                placeholder={LIFECYCLE_PLACEHOLDER}
+                value={definition}
+                onChange={(e) => setDefinition(e.target.value)}
+                className="min-h-40 font-mono text-xs"
+              />
+            </div>
+            {saveError && <div className="text-sm text-red-400">{saveError}</div>}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate} disabled={!name.trim() || !definition.trim() || saving}>
+              {saving ? "Saving..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function ScripsTab() {
+  const [scrips, setScrips] = useState<Scrip[]>([]);
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [queueId, setQueueId] = useState("");
+  const [conditionType, setConditionType] = useState("OnCreate");
+  const [actionType, setActionType] = useState("SendEmail");
+  const [actionConfig, setActionConfig] = useState("");
+  const [stage, setStage] = useState("TransactionCreate");
+  const [sortOrder, setSortOrder] = useState(0);
+  const [disabled, setDisabled] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const fetchScrips = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const [sRes, qRes] = await Promise.all([getScrips(), getQueues()]);
+    if (sRes.error) setError(sRes.error);
+    else setScrips(sRes.data ?? []);
+    if (qRes.error) setError(qRes.error);
+    else setQueues(qRes.data ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchScrips();
+  }, [fetchScrips]);
+
+  const handleCreate = async () => {
+    if (!name.trim()) return;
+    let parsedConfig: Record<string, unknown> | undefined;
+    if (actionConfig.trim()) {
+      try {
+        parsedConfig = JSON.parse(actionConfig);
+      } catch {
+        setSaveError("Invalid JSON in action config.");
+        return;
+      }
+    }
+    setSaving(true);
+    setSaveError(null);
+    const { error } = await createScrip({
+      name: name.trim(),
+      queue_id: queueId || null,
+      condition_type: conditionType,
+      action_type: actionType,
+      action_config: parsedConfig,
+      stage,
+      sort_order: sortOrder,
+      disabled,
+    });
+    setSaving(false);
+    if (error) {
+      setSaveError(error);
+    } else {
+      setDialogOpen(false);
+      setName("");
+      setQueueId("");
+      setConditionType("OnCreate");
+      setActionType("SendEmail");
+      setActionConfig("");
+      setStage("TransactionCreate");
+      setSortOrder(0);
+      setDisabled(false);
+      fetchScrips();
+    }
+  };
+
+  const queueName = (id: string | null) => {
+    if (!id) return "Global";
+    return queues.find((q) => q.id === id)?.name ?? id;
+  };
+
+  return (
+    <div className="flex flex-col gap-4 pt-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-medium">Scrips</h2>
+        <Button size="sm" onClick={() => setDialogOpen(true)}>
+          <Plus className="size-4" />
+          Add Scrip
+        </Button>
+      </div>
+
+      {error && <div className="text-sm text-red-400">{error}</div>}
+      {loading ? (
+        <div className="text-sm text-neutral-400 py-6">Loading...</div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Queue</TableHead>
+              <TableHead>Condition</TableHead>
+              <TableHead>Action</TableHead>
+              <TableHead>Enabled</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {scrips.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-neutral-400 text-center py-6">
+                  No scrips yet.
+                </TableCell>
+              </TableRow>
+            ) : (
+              scrips.map((s) => (
+                <TableRow key={s.id}>
+                  <TableCell className="font-medium">{s.name}</TableCell>
+                  <TableCell>{queueName(s.queue_id)}</TableCell>
+                  <TableCell>{s.condition_type}</TableCell>
+                  <TableCell>{s.action_type}</TableCell>
+                  <TableCell>
+                    <Badge variant={s.disabled ? "outline" : "default"}>
+                      {s.disabled ? "Disabled" : "Enabled"}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Scrip</DialogTitle>
+            <DialogDescription>Create a new automation scrip.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-name">Name</Label>
+              <Input
+                id="s-name"
+                placeholder="Scrip name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-queue">Queue</Label>
+              <Select value={queueId} onValueChange={(v) => setQueueId(v === "_global" || !v ? "" : v)}>
+                <SelectTrigger id="s-queue">
+                  <SelectValue placeholder="Global" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="_global">Global</SelectItem>
+                  {queues.map((q) => (
+                    <SelectItem key={q.id} value={q.id}>
+                      {q.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-cond">Condition Type</Label>
+              <Select value={conditionType} onValueChange={(v) => setConditionType(v ?? "OnCreate")}>
+                <SelectTrigger id="s-cond">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="OnCreate">OnCreate</SelectItem>
+                  <SelectItem value="OnStatusChange">OnStatusChange</SelectItem>
+                  <SelectItem value="OnResolve">OnResolve</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-action">Action Type</Label>
+              <Select value={actionType} onValueChange={(v) => setActionType(v ?? "SendEmail")}>
+                <SelectTrigger id="s-action">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="SendEmail">SendEmail</SelectItem>
+                  <SelectItem value="Webhook">Webhook</SelectItem>
+                  <SelectItem value="SetCustomField">SetCustomField</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-config">Action Config (JSON)</Label>
+              <Textarea
+                id="s-config"
+                placeholder='{"key": "value"}'
+                value={actionConfig}
+                onChange={(e) => setActionConfig(e.target.value)}
+                className="min-h-20 font-mono text-xs"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-stage">Stage</Label>
+              <Select value={stage} onValueChange={(v) => setStage(v ?? "TransactionCreate")}>
+                <SelectTrigger id="s-stage">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="TransactionCreate">TransactionCreate</SelectItem>
+                  <SelectItem value="TransactionBatch">TransactionBatch</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="s-order">Sort Order</Label>
+              <Input
+                id="s-order"
+                type="number"
+                value={sortOrder}
+                onChange={(e) => setSortOrder(Number(e.target.value))}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                id="s-disabled"
+                type="checkbox"
+                checked={disabled}
+                onChange={(e) => setDisabled(e.target.checked)}
+                className="size-4 rounded border-neutral-700 bg-neutral-800 accent-primary"
+              />
+              <Label htmlFor="s-disabled" className="cursor-pointer">
+                Disabled
+              </Label>
+            </div>
+            {saveError && <div className="text-sm text-red-400">{saveError}</div>}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate} disabled={!name.trim() || saving}>
+              {saving ? "Saving..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function CustomFieldsTab() {
+  const [fields, setFields] = useState<CustomField[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [fieldType, setFieldType] = useState("Freeform");
+  const [values, setValues] = useState("");
+  const [maxValues, setMaxValues] = useState(0);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const fetchFields = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const { data, error } = await getCustomFields();
+    if (error) setError(error);
+    else setFields(data ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchFields();
+  }, [fetchFields]);
+
+  const handleCreate = async () => {
+    if (!name.trim()) return;
+    let parsedValues: unknown = null;
+    if (values.trim()) {
+      try {
+        parsedValues = JSON.parse(values);
+      } catch {
+        setSaveError("Invalid JSON in values.");
+        return;
+      }
+    }
+    setSaving(true);
+    setSaveError(null);
+    const { error } = await createCustomField({
+      name: name.trim(),
+      field_type: fieldType,
+      values: parsedValues,
+      max_values: maxValues,
+    });
+    setSaving(false);
+    if (error) {
+      setSaveError(error);
+    } else {
+      setDialogOpen(false);
+      setName("");
+      setFieldType("Freeform");
+      setValues("");
+      setMaxValues(0);
+      fetchFields();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 pt-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-medium">Custom Fields</h2>
+        <Button size="sm" onClick={() => setDialogOpen(true)}>
+          <Plus className="size-4" />
+          Add Custom Field
+        </Button>
+      </div>
+
+      {error && <div className="text-sm text-red-400">{error}</div>}
+      {loading ? (
+        <div className="text-sm text-neutral-400 py-6">Loading...</div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>Max Values</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {fields.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={3} className="text-neutral-400 text-center py-6">
+                  No custom fields yet.
+                </TableCell>
+              </TableRow>
+            ) : (
+              fields.map((f) => (
+                <TableRow key={f.id}>
+                  <TableCell className="font-medium">{f.name}</TableCell>
+                  <TableCell>{f.field_type}</TableCell>
+                  <TableCell>{f.max_values === 0 ? "Unlimited" : f.max_values}</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Custom Field</DialogTitle>
+            <DialogDescription>Create a new custom field definition.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-name">Name</Label>
+              <Input
+                id="cf-name"
+                placeholder="Field name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-type">Field Type</Label>
+              <Select value={fieldType} onValueChange={(v) => setFieldType(v ?? "Freeform")}>
+                <SelectTrigger id="cf-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Freeform">Freeform</SelectItem>
+                  <SelectItem value="SelectSingle">SelectSingle</SelectItem>
+                  <SelectItem value="SelectMulti">SelectMulti</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-values">Values (JSON array, for select types)</Label>
+              <Textarea
+                id="cf-values"
+                placeholder='["Option A", "Option B"]'
+                value={values}
+                onChange={(e) => setValues(e.target.value)}
+                className="min-h-20 font-mono text-xs"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-max">Max Values (0 = unlimited)</Label>
+              <Input
+                id="cf-max"
+                type="number"
+                min={0}
+                value={maxValues}
+                onChange={(e) => setMaxValues(Number(e.target.value))}
+              />
+            </div>
+            {saveError && <div className="text-sm text-red-400">{saveError}</div>}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate} disabled={!name.trim() || saving}>
+              {saving ? "Saving..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/app/layout.tsx

@@ -1,21 +1,30 @@
+"use client";
+
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import "./globals.css";
 
-const geistSans = Geist({
+const inter = Inter({
-  variable: "--font-geist-sans",
   subsets: ["latin"],
+  variable: "--font-inter",
 });
 
-const geistMono = Geist_Mono({
+function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
-  variable: "--font-geist-mono",
+  const pathname = usePathname();
-  subsets: ["latin"],
+  const isActive = pathname === href || (href !== "/" && pathname.startsWith(href));
-});
+  return (
-
+    <Link
-export const metadata: Metadata = {
+      href={href}
-  title: "Create Next App",
+      className={`text-sm font-medium transition-colors ${
-  description: "Generated by create next app",
+        isActive ? "text-white" : "text-neutral-400 hover:text-neutral-200"
-};
+      }`}
+    >
+      {children}
+    </Link>
+  );
+}
 
 export default function RootLayout({
   children,
@@ -23,11 +32,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
+    <html lang="en" className={`dark ${inter.variable} h-full antialiased`}>
-      lang="en"
+      <body className="min-h-full flex flex-col bg-neutral-950 text-neutral-100">
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+        <nav className="sticky top-0 z-40 h-14 bg-neutral-900/80 backdrop-blur-md border-b border-neutral-800 px-6 flex items-center justify-between">
-    >
+          <Link href="/" className="font-bold text-lg text-white">
-      <body className="min-h-full flex flex-col">{children}</body>
+            Tessera
+          </Link>
+          <div className="flex items-center gap-6">
+            <NavLink href="/">Tickets</NavLink>
+            <NavLink href="/admin">Admin</NavLink>
+          </div>
+        </nav>
+        <main className="container mx-auto px-6 py-8 flex-1">{children}</main>
+      </body>
     </html>
   );
 }

web/src/app/page.tsx

@@ -1,65 +1,266 @@
-import Image from "next/image";
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Plus, Filter } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { getTickets, getQueues, createTicket } from "@/lib/api";
+import type { Ticket, Queue } from "@/lib/types";
+
+const STATUS_COLORS: Record<string, string> = {
+  new: "bg-blue-500/10 text-blue-400 border-blue-500/30",
+  open: "bg-sky-500/10 text-sky-400 border-sky-500/30",
+  in_progress: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
+  resolved: "bg-green-500/10 text-green-400 border-green-500/30",
+  closed: "bg-neutral-500/10 text-neutral-400 border-neutral-500/30",
+};
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export default function TicketsPage() {
+  const router = useRouter();
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filterQueue, setFilterQueue] = useState<string>("");
+  const [filterStatus, setFilterStatus] = useState<string>("");
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [newSubject, setNewSubject] = useState("");
+  const [newQueueId, setNewQueueId] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async (queueId?: string, status?: string) => {
+    setLoading(true);
+    setError(null);
+    const params: { queue_id?: string; status?: string } = {};
+    if (queueId) params.queue_id = queueId;
+    if (status) params.status = status;
+    const [tRes, qRes] = await Promise.all([getTickets(params), getQueues()]);
+    if (tRes.error) setError(tRes.error);
+    else setTickets(tRes.data ?? []);
+    if (qRes.error && !error) setError(qRes.error);
+    else setQueues(qRes.data ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleFilter = () => {
+    fetchData(filterQueue || undefined, filterStatus || undefined);
+  };
+
+  const handleCreate = async () => {
+    if (!newSubject.trim() || !newQueueId) return;
+    setCreating(true);
+    setCreateError(null);
+    const { data, error } = await createTicket({ subject: newSubject.trim(), queue_id: newQueueId });
+    setCreating(false);
+    if (error) {
+      setCreateError(error);
+    } else {
+      setDialogOpen(false);
+      setNewSubject("");
+      setNewQueueId("");
+      fetchData(filterQueue || undefined, filterStatus || undefined);
+      if (data) router.push(`/tickets/${data.id}`);
+    }
+  };
+
+  const queueName = (id: string) => queues.find((q) => q.id === id)?.name ?? id;
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="flex flex-col gap-6">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <div className="flex items-center justify-between">
-        <Image
+        <h1 className="text-2xl font-semibold tracking-tight">Tickets</h1>
-          className="dark:invert"
+        <Button onClick={() => setDialogOpen(true)}>
-          src="/next.svg"
+          <Plus className="size-4" />
-          alt="Next.js logo"
+          New Ticket
-          width={100}
+        </Button>
-          height={20}
+      </div>
-          priority
+
-        />
+      <div className="flex items-center gap-3 flex-wrap">
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+        <Select value={filterQueue} onValueChange={(v) => setFilterQueue(!v || v === "_all" ? "" : v)}>
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+          <SelectTrigger className="w-44">
-            To get started, edit the page.tsx file.
+            <SelectValue placeholder="All queues" />
-          </h1>
+          </SelectTrigger>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+          <SelectContent>
-            Looking for a starting point or more instructions? Head over to{" "}
+            <SelectItem value="_all">All queues</SelectItem>
-            <a
+            {queues.map((q) => (
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              <SelectItem key={q.id} value={q.id}>
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+                {q.name}
-            >
+              </SelectItem>
-              Templates
+            ))}
-            </a>{" "}
+          </SelectContent>
-            or the{" "}
+        </Select>
-            <a
+
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        <Select value={filterStatus} onValueChange={(v) => setFilterStatus(!v || v === "_all" ? "" : v)}>
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+          <SelectTrigger className="w-40">
-            >
+            <SelectValue placeholder="All statuses" />
-              Learning
+          </SelectTrigger>
-            </a>{" "}
+          <SelectContent>
-            center.
+            <SelectItem value="_all">All statuses</SelectItem>
-          </p>
+            <SelectItem value="new">New</SelectItem>
+            <SelectItem value="open">Open</SelectItem>
+            <SelectItem value="in_progress">In Progress</SelectItem>
+            <SelectItem value="resolved">Resolved</SelectItem>
+            <SelectItem value="closed">Closed</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Button variant="outline" onClick={handleFilter}>
+          <Filter className="size-4" />
+          Filter
+        </Button>
+      </div>
+
+      {error && (
+        <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-400">
+          {error}
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+      )}
-          <a
+
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+      {loading ? (
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        <div className="text-sm text-neutral-400 py-12 text-center">Loading tickets...</div>
-            target="_blank"
+      ) : tickets.length === 0 ? (
-            rel="noopener noreferrer"
+        <div className="text-sm text-neutral-400 py-12 text-center">
+          No tickets yet.{" "}
+          <button
+            onClick={() => setDialogOpen(true)}
+            className="text-blue-400 hover:underline"
           >
-            <Image
+            Create your first ticket
-              className="dark:invert"
+          </button>
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
         </div>
-      </main>
+      ) : (
+        <div className="rounded-lg border border-neutral-800 overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Subject</TableHead>
+                <TableHead>Queue</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Created</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {tickets.map((t) => (
+                <TableRow
+                  key={t.id}
+                  className="cursor-pointer hover:bg-neutral-800/50"
+                  onClick={() => router.push(`/tickets/${t.id}`)}
+                >
+                  <TableCell className="font-mono text-xs text-neutral-400">
+                    {t.id.slice(0, 8)}
+                  </TableCell>
+                  <TableCell className="font-medium">{t.subject}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{queueName(t.queue_id)}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      className={`border ${STATUS_COLORS[t.status] ?? "bg-neutral-500/10 text-neutral-400 border-neutral-500/30"}`}
+                      variant="outline"
+                    >
+                      {t.status.replace("_", " ")}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-neutral-400 text-xs">
+                    {formatDate(t.created_at)}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New Ticket</DialogTitle>
+            <DialogDescription>
+              Create a new ticket by providing a subject and queue.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="subject">Subject</Label>
+              <Input
+                id="subject"
+                placeholder="Enter ticket subject"
+                value={newSubject}
+                onChange={(e) => setNewSubject(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="queue">Queue</Label>
+              <Select value={newQueueId} onValueChange={(v) => setNewQueueId(v ?? "")}>
+                <SelectTrigger id="queue">
+                  <SelectValue placeholder="Select a queue" />
+                </SelectTrigger>
+                <SelectContent>
+                  {queues.map((q) => (
+                    <SelectItem key={q.id} value={q.id}>
+                      {q.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {createError && (
+              <div className="text-sm text-red-400">{createError}</div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreate}
+              disabled={!newSubject.trim() || !newQueueId || creating}
+            >
+              {creating ? "Creating..." : "Create Ticket"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

web/src/app/tickets/[id]/page.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
+import {
+  ArrowLeft,
+  Plus,
+  ArrowRightLeft,
+  MessageSquare,
+  Pencil,
+  RefreshCw,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  getTicket,
+  getTicketTransactions,
+  getQueues,
+  previewTicket,
+  updateTicket,
+} from "@/lib/api";
+import type { Ticket, Transaction, Queue, PreviewResult, UpdateResult } from "@/lib/types";
+
+const STATUS_COLORS: Record<string, string> = {
+  new: "bg-blue-500/10 text-blue-400 border-blue-500/30",
+  open: "bg-sky-500/10 text-sky-400 border-sky-500/30",
+  in_progress: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
+  resolved: "bg-green-500/10 text-green-400 border-green-500/30",
+  closed: "bg-neutral-500/10 text-neutral-400 border-neutral-500/30",
+};
+
+const TX_ICONS: Record<string, React.ElementType> = {
+  Create: Plus,
+  StatusChange: ArrowRightLeft,
+  Comment: MessageSquare,
+  CustomField: Pencil,
+};
+
+const TX_COLORS: Record<string, string> = {
+  Create: "bg-green-500/10 text-green-400 border-green-500/30",
+  StatusChange: "bg-blue-500/10 text-blue-400 border-blue-500/30",
+  Comment: "bg-neutral-500/10 text-neutral-400 border-neutral-500/30",
+  CustomField: "bg-purple-500/10 text-purple-400 border-purple-500/30",
+};
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export default function TicketDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const [ticket, setTicket] = useState<Ticket | null>(null);
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedStatus, setSelectedStatus] = useState<string>("");
+  const [previewing, setPreviewing] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+  const [previewResult, setPreviewResult] = useState<PreviewResult | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [applyResult, setApplyResult] = useState<UpdateResult | null>(null);
+  const [applyError, setApplyError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const [tRes, txRes, qRes] = await Promise.all([
+      getTicket(id),
+      getTicketTransactions(id),
+      getQueues(),
+    ]);
+    if (tRes.error) setError(tRes.error);
+    else {
+      setTicket(tRes.data);
+      setSelectedStatus(tRes.data?.status ?? "");
+    }
+    if (txRes.error) setError(txRes.error);
+    else setTransactions(txRes.data ?? []);
+    if (qRes.error && !error) setError(qRes.error);
+    else setQueues(qRes.data ?? []);
+    setLoading(false);
+  }, [id]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handlePreview = async () => {
+    if (!selectedStatus) return;
+    setPreviewing(true);
+    setPreviewError(null);
+    const { data, error } = await previewTicket(id, { status: selectedStatus });
+    setPreviewing(false);
+    if (error) {
+      setPreviewError(error);
+    } else {
+      setPreviewResult(data);
+    }
+    setPreviewDialogOpen(true);
+  };
+
+  const handleApply = async () => {
+    if (!selectedStatus) return;
+    setApplying(true);
+    setApplyError(null);
+    setApplyResult(null);
+    const { data, error } = await updateTicket(id, { status: selectedStatus });
+    setApplying(false);
+    if (error) {
+      setApplyError(error);
+    } else {
+      setApplyResult(data);
+      await fetchData();
+    }
+  };
+
+  const queueName = queues.find((q) => q.id === ticket?.queue_id)?.name ?? ticket?.queue_id ?? "Unknown";
+
+  if (loading) {
+    return <div className="text-sm text-neutral-400 py-12 text-center">Loading ticket...</div>;
+  }
+
+  if (error && !ticket) {
+    return (
+      <div className="flex flex-col items-center gap-4 py-12">
+        <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-400">
+          {error}
+        </div>
+        <Link href="/" className="text-sm text-blue-400 hover:underline">
+          Back to tickets
+        </Link>
+      </div>
+    );
+  }
+
+  if (!ticket) {
+    return (
+      <div className="text-sm text-neutral-400 py-12 text-center">
+        Ticket not found.{" "}
+        <Link href="/" className="text-blue-400 hover:underline">
+          Back to tickets
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Link
+        href="/"
+        className="inline-flex items-center gap-1.5 text-sm text-neutral-400 hover:text-neutral-200 transition-colors w-fit"
+      >
+        <ArrowLeft className="size-4" />
+        All tickets
+      </Link>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex flex-col gap-1.5">
+              <CardTitle className="text-xl font-semibold">{ticket.subject}</CardTitle>
+              <div className="flex items-center gap-3 text-sm text-neutral-400">
+                <span>{queueName}</span>
+                <span>Created {formatDate(ticket.created_at)}</span>
+                <span>Updated {formatDate(ticket.updated_at)}</span>
+              </div>
+            </div>
+            <Badge className={`border ${STATUS_COLORS[ticket.status] ?? "bg-neutral-500/10 text-neutral-400 border-neutral-500/30"}`}>
+              {ticket.status.replace("_", " ")}
+            </Badge>
+          </div>
+          <div className="text-sm text-neutral-400 mt-1">
+            Owner: {ticket.owner_id ?? "Unassigned"}
+          </div>
+        </CardHeader>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Change Status</CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center gap-3 flex-wrap">
+          <Select value={selectedStatus} onValueChange={(v) => setSelectedStatus(!v || v === "_none" ? "" : v)}>
+            <SelectTrigger className="w-44">
+              <SelectValue placeholder="Select status" />
+            </SelectTrigger>
+            <SelectContent>
+              {["new", "open", "in_progress", "resolved", "closed"].map((s) => (
+                <SelectItem key={s} value={s}>
+                  {s.replace("_", " ")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button variant="outline" onClick={handlePreview} disabled={!selectedStatus || selectedStatus === ticket.status || previewing}>
+            {previewing ? (
+              <>
+                <RefreshCw className="size-4 animate-spin" />
+                Previewing...
+              </>
+            ) : (
+              "Preview"
+            )}
+          </Button>
+          <Button onClick={handleApply} disabled={!selectedStatus || selectedStatus === ticket.status || applying}>
+            {applying ? (
+              <>
+                <RefreshCw className="size-4 animate-spin" />
+                Applying...
+              </>
+            ) : (
+              "Apply"
+            )}
+          </Button>
+          {applyError && <span className="text-sm text-red-400">{applyError}</span>}
+          {applyResult && (
+            <div className="flex flex-col gap-1 w-full mt-2">
+              <span className="text-sm text-green-400">Status updated successfully.</span>
+              {applyResult.scrip_results.map((r) => (
+                <div
+                  key={r.scripId}
+                  className={`text-xs rounded-md px-2 py-1 ${
+                    r.success
+                      ? "bg-green-500/10 text-green-400"
+                      : "bg-red-500/10 text-red-400"
+                  }`}
+                >
+                  {r.scripId}: {r.message}
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Transaction Timeline</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {transactions.length === 0 ? (
+            <div className="text-sm text-neutral-400 py-4">No transactions yet.</div>
+          ) : (
+            <div className="flex flex-col gap-3">
+              {transactions.map((tx) => {
+                const Icon = TX_ICONS[tx.transaction_type] ?? MessageSquare;
+                return (
+                  <div key={tx.id} className="flex gap-3">
+                    <div className="mt-0.5 flex-shrink-0">
+                      <Icon className="size-4 text-neutral-500" />
+                    </div>
+                    <div className="flex flex-col gap-0.5 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <Badge
+                          className={`border text-[10px] px-1.5 ${TX_COLORS[tx.transaction_type] ?? "bg-neutral-500/10 text-neutral-400 border-neutral-500/30"}`}
+                        >
+                          {tx.transaction_type}
+                        </Badge>
+                        {tx.field && (
+                          <span className="text-xs text-neutral-300">
+                            {tx.field}
+                            {tx.old_value && tx.new_value ? (
+                              <>
+                                {" "}
+                                <span className="text-neutral-500">{tx.old_value}</span> →{" "}
+                                <span className="text-neutral-200">{tx.new_value}</span>
+                              </>
+                            ) : tx.new_value ? (
+                              <>
+                                {" "}
+                                set to <span className="text-neutral-200">{tx.new_value}</span>
+                              </>
+                            ) : null}
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-xs text-neutral-500">
+                        {formatDistanceToNow(new Date(tx.created_at), { addSuffix: true })}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {ticket.custom_fields && ticket.custom_fields.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Custom Fields</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col gap-2">
+              {ticket.custom_fields.map((cf) => (
+                <div key={cf.id} className="flex gap-2 text-sm">
+                  <span className="text-neutral-400">
+                    {cf.custom_field?.name ?? cf.custom_field_id}:
+                  </span>
+                  <span className="text-neutral-200">{cf.value}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
+        <DialogContent showCloseButton={true}>
+          <DialogHeader>
+            <DialogTitle>Preview Status Change</DialogTitle>
+            <DialogDescription>
+              The following scrips would execute when changing status to{" "}
+              <span className="text-neutral-200 font-medium">
+                {selectedStatus.replace("_", " ")}
+              </span>
+              .
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-2">
+            {previewError && (
+              <div className="text-sm text-red-400">{previewError}</div>
+            )}
+            {previewResult && previewResult.prepared_scrips.length === 0 && (
+              <div className="text-sm text-neutral-400">No scrips would be triggered.</div>
+            )}
+            {previewResult?.prepared_scrips.map((ps) => (
+              <div
+                key={ps.scripId}
+                className="rounded-lg border border-neutral-800 bg-neutral-900 p-3 text-sm"
+              >
+                <div className="font-medium text-neutral-200">{ps.scripName}</div>
+                <div className="text-neutral-400 text-xs mt-0.5">
+                  Action: {ps.actionType}
+                  {ps.dryRun ? " (dry run)" : " (would execute)"}
+                </div>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/lib/api.ts

@@ -0,0 +1,121 @@
+import type {
+  Ticket,
+  Queue,
+  Transaction,
+  Scrip,
+  Lifecycle,
+  CustomField,
+  PreviewResult,
+  UpdateResult,
+} from "./types";
+
+const BASE_URL = "/api";
+
+async function request<T>(url: string, options?: RequestInit): Promise<{ data: T | null; error: string | null }> {
+  try {
+    const res = await fetch(`${BASE_URL}${url}`, {
+      headers: { "Content-Type": "application/json" },
+      ...options,
+    });
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({ error: res.statusText }));
+      return { data: null, error: body.error || body.message || `HTTP ${res.status}` };
+    }
+    const data = await res.json();
+    return { data, error: null };
+  } catch (err) {
+    return { data: null, error: err instanceof Error ? err.message : "Unknown error" };
+  }
+}
+
+export async function getTickets(params?: { queue_id?: string; status?: string }): Promise<{ data: Ticket[] | null; error: string | null }> {
+  const sp = new URLSearchParams();
+  if (params?.queue_id) sp.set("queue_id", params.queue_id);
+  if (params?.status) sp.set("status", params.status);
+  const qs = sp.toString();
+  return request<Ticket[]>(`/tickets${qs ? `?${qs}` : ""}`);
+}
+
+export async function getTicket(id: string): Promise<{ data: Ticket | null; error: string | null }> {
+  return request<Ticket>(`/tickets/${id}`);
+}
+
+export async function createTicket(data: { subject: string; queue_id: string }): Promise<{ data: Ticket | null; error: string | null }> {
+  return request<Ticket>("/tickets", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateTicket(id: string, data: { subject?: string; status?: string }): Promise<{ data: UpdateResult | null; error: string | null }> {
+  return request<UpdateResult>(`/tickets/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function previewTicket(id: string, data: { status?: string }): Promise<{ data: PreviewResult | null; error: string | null }> {
+  return request<PreviewResult>(`/tickets/${id}/preview`, { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function getTicketTransactions(id: string): Promise<{ data: Transaction[] | null; error: string | null }> {
+  return request<Transaction[]>(`/tickets/${id}/transactions`);
+}
+
+export async function getQueues(): Promise<{ data: Queue[] | null; error: string | null }> {
+  return request<Queue[]>("/queues");
+}
+
+export async function createQueue(data: { name: string; description?: string }): Promise<{ data: Queue | null; error: string | null }> {
+  return request<Queue>("/queues", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function getScrips(): Promise<{ data: Scrip[] | null; error: string | null }> {
+  return request<Scrip[]>("/scrips");
+}
+
+export async function createScrip(data: {
+  name: string;
+  queue_id?: string | null;
+  condition_type: string;
+  action_type: string;
+  action_config?: Record<string, unknown>;
+  template_id?: string | null;
+  stage?: string;
+  sort_order?: number;
+  disabled?: boolean;
+}): Promise<{ data: Scrip | null; error: string | null }> {
+  return request<Scrip>("/scrips", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function updateScrip(id: string, data: {
+  name?: string;
+  queue_id?: string | null;
+  condition_type?: string;
+  action_type?: string;
+  action_config?: Record<string, unknown>;
+  template_id?: string | null;
+  stage?: string;
+  sort_order?: number;
+  disabled?: boolean;
+}): Promise<{ data: Scrip | null; error: string | null }> {
+  return request<Scrip>(`/scrips/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
+export async function getLifecycles(): Promise<{ data: Lifecycle[] | null; error: string | null }> {
+  return request<Lifecycle[]>("/lifecycles");
+}
+
+export async function createLifecycle(data: {
+  name: string;
+  definition: Record<string, unknown>;
+}): Promise<{ data: Lifecycle | null; error: string | null }> {
+  return request<Lifecycle>("/lifecycles", { method: "POST", body: JSON.stringify(data) });
+}
+
+export async function getCustomFields(): Promise<{ data: CustomField[] | null; error: string | null }> {
+  return request<CustomField[]>("/custom-fields");
+}
+
+export async function createCustomField(data: {
+  name: string;
+  field_type: string;
+  values?: unknown | null;
+  max_values?: number;
+}): Promise<{ data: CustomField | null; error: string | null }> {
+  return request<CustomField>("/custom-fields", { method: "POST", body: JSON.stringify(data) });
+}

web/src/lib/types.ts

@@ -0,0 +1,103 @@
+export interface Ticket {
+  id: string;
+  subject: string;
+  queue_id: string;
+  status: string;
+  owner_id: string | null;
+  creator_id: string;
+  created_at: string;
+  updated_at: string;
+  started_at: string | null;
+  resolved_at: string | null;
+  custom_fields?: CustomFieldValue[];
+}
+
+export interface Queue {
+  id: string;
+  name: string;
+  description: string | null;
+  lifecycle_id: string | null;
+}
+
+export interface Transaction {
+  id: string;
+  ticket_id: string;
+  transaction_type: string;
+  field: string | null;
+  old_value: string | null;
+  new_value: string | null;
+  data: unknown;
+  creator_id: string;
+  created_at: string;
+}
+
+export interface Scrip {
+  id: string;
+  queue_id: string | null;
+  name: string;
+  condition_type: string;
+  action_type: string;
+  action_config: Record<string, unknown>;
+  template_id: string | null;
+  stage: string;
+  sort_order: number;
+  disabled: boolean;
+}
+
+export interface Template {
+  id: string;
+  name: string;
+  queue_id: string | null;
+  subject_template: string;
+  body_template: string;
+}
+
+export interface Lifecycle {
+  id: string;
+  name: string;
+  definition: LifecycleDefinition;
+}
+
+export interface LifecycleDefinition {
+  statuses: { initial: string[]; active: string[]; inactive: string[] };
+  transitions: Record<string, string[]>;
+}
+
+export interface CustomField {
+  id: string;
+  name: string;
+  field_type: string;
+  values: unknown | null;
+  max_values: number;
+}
+
+export interface CustomFieldValue {
+  id: string;
+  custom_field_id: string;
+  ticket_id: string;
+  value: string;
+  custom_field?: CustomField;
+}
+
+export interface PreviewResult {
+  prepared_scrips: PreparedScrip[];
+}
+
+export interface PreparedScrip {
+  scripId: string;
+  scripName: string;
+  actionType: string;
+  actionPayload: unknown;
+  dryRun: boolean;
+}
+
+export interface UpdateResult {
+  ticket: Ticket;
+  scrip_results: ScripResult[];
+}
+
+export interface ScripResult {
+  scripId: string;
+  success: boolean;
+  message: string;
+}