Merge pull request 'Build on Gitea, push to the Gitea registry' (#1) from ci/gitea-actions into main

Same move as the gateway repo -- build on the homelab runner, push to this
Gitea's registry, no deploy step -- with one difference that matters more here
than anywhere else.

Vite inlines import.meta.env at BUILD time. VITE_API_URL is therefore baked into
the bundle, and the GitHub build bakes https://api.t4t-gateway.com. Running that
image on the homelab would put a UI at t4tgw.ffaerber.duckdns.org that talks to
the VPS: a test signup would create a real account on production, and the two
instances would look identical while being the same instance. This build bakes
the homelab API, which is what makes running them side by side mean anything.

The app also falls back to the production URL when the variable is missing
(app/routes/*.tsx), so an unset build arg fails the same way silently. It is set
explicitly in the workflow env rather than left to a default.

.github/workflows is removed from this copy so Gitea does not try to run the
GitHub one; the GitHub repository keeps its own.

.gitea/workflows/docker.yml

@@ -0,0 +1,59 @@
+name: Docker
+# Builds the frontend for the HOMELAB instance and pushes it to this Gitea's
+# registry.
+#
+# Read the build args before changing anything: Vite inlines import.meta.env at
+# BUILD time, so VITE_API_URL is baked into the bundle and an image is tied to
+# one API. The GitHub build bakes https://api.t4t-gateway.com -- running that
+# image here would serve a UI at t4tgw.ffaerber.duckdns.org that talks to the
+# VPS, so a test signup would create a real account on production. This build
+# bakes the homelab API instead, which is the whole reason the two instances can
+# run side by side and mean anything.
+#
+# VITE_GOOGLE_CLIENT_ID comes from a repo secret; unset, Google sign-in is the
+# only thing that breaks, and the rest of the instance still exercises.
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+env:
+  HOMELAB_API_URL: https://t4tgw-api.ffaerber.duckdns.org
+
+jobs:
+  build:
+    runs-on: ci-runner
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build
+        run: |
+          set -eu
+          SHA=$(echo "${{ github.sha }}" | cut -c1-7)
+          echo "IMAGE=git.ffaerber.duckdns.org/token-for-token/hosted-gateway-frontend" >> "$GITHUB_ENV"
+          echo "SHA=$SHA" >> "$GITHUB_ENV"
+          docker build \
+            --build-arg VITE_API_URL="$HOMELAB_API_URL" \
+            --build-arg VITE_GOOGLE_CLIENT_ID="${{ secrets.VITE_GOOGLE_CLIENT_ID }}" \
+            --build-arg VITE_COMMIT_SHA=${{ github.sha }} \
+            -t "git.ffaerber.duckdns.org/token-for-token/hosted-gateway-frontend:$SHA" .
+
+      - name: Push
+        if: github.event_name != 'pull_request'
+        run: |
+          set -eu
+          echo "${{ secrets.GITEA_TOKEN }}" | docker login git.ffaerber.duckdns.org -u "${{ github.actor }}" --password-stdin
+          docker tag "$IMAGE:$SHA" "$IMAGE:latest"
+          docker push "$IMAGE:$SHA"
+          docker push "$IMAGE:latest"
+          docker logout git.ffaerber.duckdns.org
+          {
+            echo "### Pushed"
+            echo
+            echo '```'
+            echo "$IMAGE:$SHA"
+            echo '```'
+            echo
+            echo "API baked in: $HOMELAB_API_URL"
+          } >> "$GITHUB_STEP_SUMMARY"

.github/workflows/docker-image.yml

@@ -1,54 +0,0 @@
-name: Docker Image CI
-
-on:
-  push:
-    branches: ['main', 'develop']
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: |
-            ghcr.io/${{ github.repository_owner }}/hosted-gateway-frontend:${{ github.ref_name }}
-            ghcr.io/${{ github.repository_owner }}/hosted-gateway-frontend:${{ github.sha }}
-          build-args: |
-            VITE_API_URL=https://api.t4t-gateway.com
-            VITE_GOOGLE_CLIENT_ID=${{ secrets.VITE_GOOGLE_CLIENT_ID }}
-            VITE_COMMIT_SHA=${{ github.sha }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      - name: docker stack deploy
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          username: root
-          host: ${{ secrets.SSH_KNOWN_HOSTS }}
-          key: ${{ secrets.SSH_PRIV_KEY }}
-          script: |
-            echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
-            docker pull ghcr.io/token-for-token/hosted-gateway-frontend:main
-            docker stack deploy -c ~/devops/hostinger/prod-stack.yaml prod --with-registry-auth --resolve-image always
-            docker image prune -f --filter "until=24h"

app/routes/chat.tsx

@@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 import { Nav } from '~/components/nav';
 
 const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
+const SESSIONS_KEY = 't4t:chatSessions';
+const ACTIVE_SESSION_KEY = 't4t:activeChatId';
 
 type Model = { id: string; object: 'model'; created: number; owned_by: string };
 type Message = { role: 'user' | 'assistant' | 'system'; content: string };
@@ -11,6 +13,13 @@ type Completion = {
   choices: { index: number; message: ChoiceMessage; finish_reason: string }[];
   usage?: { prompt_tokens: number; completion_tokens: number; total_tokens: number };
 };
+type ChatSession = {
+  id: string;
+  title: string;
+  model: string;
+  messages: Message[];
+  updatedAt: number;
+};
 
 export function meta() {
   return [{ title: 'Chat · t4t Gateway' }];
@@ -37,9 +46,41 @@ async function api<T>(path: string, init: RequestInit = {}): Promise<T> {
   return body as T;
 }
 
+function newSessionId(): string {
+  return typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID()
+    : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function titleFor(messages: Message[]): string {
+  const firstUser = messages.find((m) => m.role === 'user');
+  if (!firstUser) return 'New chat';
+  const text = firstUser.content.trim().replace(/\s+/g, ' ');
+  if (!text) return 'New chat';
+  return text.length > 40 ? `${text.slice(0, 40)}…` : text;
+}
+
+function loadSessions(): ChatSession[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const raw = localStorage.getItem(SESSIONS_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveSessions(sessions: ChatSession[]) {
+  if (typeof window === 'undefined') return;
+  localStorage.setItem(SESSIONS_KEY, JSON.stringify(sessions));
+}
+
 export default function Chat() {
   const [models, setModels] = useState<Model[]>([]);
   const [model, setModel] = useState<string>('');
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const [sending, setSending] = useState(false);
@@ -53,11 +94,39 @@ export default function Chat() {
       window.location.href = '/login';
       return;
     }
+
+    const stored = loadSessions();
+    const storedActiveId = localStorage.getItem(ACTIVE_SESSION_KEY);
+    const initial =
+      stored.find((s) => s.id === storedActiveId) ??
+      [...stored].sort((a, b) => b.updatedAt - a.updatedAt)[0] ??
+      null;
+
+    if (initial) {
+      setSessions(stored);
+      setActiveId(initial.id);
+      setMessages(initial.messages);
+      setModel(initial.model);
+      localStorage.setItem(ACTIVE_SESSION_KEY, initial.id);
+    } else {
+      const fresh: ChatSession = {
+        id: newSessionId(),
+        title: 'New chat',
+        model: '',
+        messages: [],
+        updatedAt: Date.now(),
+      };
+      setSessions([fresh]);
+      setActiveId(fresh.id);
+      saveSessions([fresh]);
+      localStorage.setItem(ACTIVE_SESSION_KEY, fresh.id);
+    }
+
     (async () => {
       try {
         const list = await api<{ data: Model[] }>('/v1/models');
         setModels(list.data);
-        if (list.data.length > 0) setModel(list.data[0].id);
+        setModel((current) => current || (list.data.length > 0 ? list.data[0].id : ''));
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Unknown error');
       } finally {
@@ -72,13 +141,85 @@ export default function Chat() {
     }
   }, [messages]);
 
+  function persist(id: string, mdl: string, msgs: Message[]) {
+    setSessions((prev) => {
+      const updated = prev.map((s) =>
+        s.id === id ? { ...s, model: mdl, messages: msgs, title: titleFor(msgs), updatedAt: Date.now() } : s
+      );
+      saveSessions(updated);
+      return updated;
+    });
+  }
+
+  function selectSession(id: string) {
+    const session = sessions.find((s) => s.id === id);
+    if (!session) return;
+    setActiveId(id);
+    setMessages(session.messages);
+    setModel(session.model || model);
+    setError(null);
+    localStorage.setItem(ACTIVE_SESSION_KEY, id);
+  }
+
+  function newChat() {
+    const fresh: ChatSession = {
+      id: newSessionId(),
+      title: 'New chat',
+      model,
+      messages: [],
+      updatedAt: Date.now(),
+    };
+    setSessions((prev) => {
+      const updated = [fresh, ...prev];
+      saveSessions(updated);
+      return updated;
+    });
+    setActiveId(fresh.id);
+    setMessages([]);
+    setError(null);
+    localStorage.setItem(ACTIVE_SESSION_KEY, fresh.id);
+  }
+
+  function deleteSession(id: string) {
+    setSessions((prev) => {
+      const updated = prev.filter((s) => s.id !== id);
+      saveSessions(updated);
+
+      if (id === activeId) {
+        const next = [...updated].sort((a, b) => b.updatedAt - a.updatedAt)[0];
+        if (next) {
+          setActiveId(next.id);
+          setMessages(next.messages);
+          setModel(next.model || model);
+          localStorage.setItem(ACTIVE_SESSION_KEY, next.id);
+        } else {
+          const fresh: ChatSession = {
+            id: newSessionId(),
+            title: 'New chat',
+            model,
+            messages: [],
+            updatedAt: Date.now(),
+          };
+          updated.push(fresh);
+          saveSessions(updated);
+          setActiveId(fresh.id);
+          setMessages([]);
+          localStorage.setItem(ACTIVE_SESSION_KEY, fresh.id);
+        }
+      }
+
+      return updated;
+    });
+  }
+
   async function send(e: React.FormEvent) {
     e.preventDefault();
-    if (!input.trim() || !model || sending) return;
+    if (!input.trim() || !model || sending || !activeId) return;
     setError(null);
     const userMsg: Message = { role: 'user', content: input };
     const next = [...messages, userMsg];
     setMessages(next);
+    persist(activeId, model, next);
     setInput('');
     setSending(true);
     try {
@@ -88,7 +229,9 @@ export default function Chat() {
       });
       const reply = completion.choices[0]?.message;
       if (reply) {
-        setMessages([...next, { role: reply.role, content: reply.content }]);
+        const withReply = [...next, { role: reply.role, content: reply.content }];
+        setMessages(withReply);
+        persist(activeId, model, withReply);
       } else {
         throw new Error('No reply from model');
       }
@@ -99,15 +242,20 @@ export default function Chat() {
     }
   }
 
+  const sortedSessions = [...sessions].sort((a, b) => b.updatedAt - a.updatedAt);
+
   return (
-    <main className='flex min-h-screen flex-col'>
+    <main className='flex h-screen flex-col'>
       <Nav />
       <div className='border-b border-neutral-200 bg-white px-6 py-2'>
-        <div className='mx-auto flex max-w-3xl items-center justify-end'>
+        <div className='mx-auto flex max-w-5xl items-center justify-end'>
           <select
             aria-label='Model'
             value={model}
-            onChange={(e) => setModel(e.target.value)}
+            onChange={(e) => {
+              setModel(e.target.value);
+              if (activeId) persist(activeId, e.target.value, messages);
+            }}
             disabled={loadingModels || models.length === 0}
             className='rounded-md border border-neutral-300 bg-white px-2 py-1 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900'
           >
@@ -122,72 +270,105 @@ export default function Chat() {
         </div>
       </div>
 
-      <div
+      <div className='mx-auto flex w-full max-w-5xl flex-1 overflow-hidden'>
-        ref={scrollRef}
+        <aside className='hidden w-64 shrink-0 flex-col border-r border-neutral-200 bg-white sm:flex'>
-        className='mx-auto w-full max-w-3xl flex-1 overflow-y-auto px-6 py-6'
+          <div className='p-3'>
-      >
+            <button
-        {messages.length === 0 && (
+              onClick={newChat}
-          <p className='text-center text-sm text-neutral-500'>
+              className='inline-flex h-9 w-full items-center justify-center rounded-md bg-neutral-900 px-3 text-sm font-medium text-white hover:bg-neutral-700'
-            Pick a model and send a message to start.
-          </p>
-        )}
-        <ul className='space-y-4'>
-          {messages.map((m, i) => (
-            <li
-              key={i}
-              className={
-                m.role === 'user' ? 'flex justify-end' : 'flex justify-start'
-              }
             >
-              <div
+              New chat
-                className={
+            </button>
-                  m.role === 'user'
+          </div>
-                    ? 'max-w-[80%] rounded-lg bg-neutral-900 px-4 py-2 text-sm text-white'
+          <ul className='flex-1 space-y-1 overflow-y-auto px-2 pb-3'>
-                    : 'max-w-[80%] whitespace-pre-wrap rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm shadow-sm'
+            {sortedSessions.map((s) => (
-                }
+              <li key={s.id} className='group flex items-center'>
-              >
+                <button
-                {m.content}
+                  onClick={() => selectSession(s.id)}
-              </div>
+                  className={`flex-1 truncate rounded-md px-3 py-2 text-left text-sm ${
-            </li>
+                    s.id === activeId
-          ))}
+                      ? 'bg-neutral-900 text-white'
-          {sending && (
+                      : 'text-neutral-700 hover:bg-neutral-100'
-            <li className='flex justify-start'>
+                  }`}
-              <div className='rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm text-neutral-500 shadow-sm'>
+                  title={s.title}
-                Thinking…
+                >
-              </div>
+                  {s.title}
-            </li>
+                </button>
+                <button
+                  onClick={() => deleteSession(s.id)}
+                  aria-label={`Delete chat: ${s.title}`}
+                  className={`ml-1 hidden shrink-0 rounded-md px-2 py-2 text-xs group-hover:block ${
+                    s.id === activeId
+                      ? 'text-neutral-300 hover:text-white'
+                      : 'text-neutral-400 hover:text-neutral-900'
+                  }`}
+                >
+                  ✕
+                </button>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <div className='flex min-w-0 flex-1 flex-col'>
+          <div ref={scrollRef} className='mx-auto w-full max-w-3xl flex-1 overflow-y-auto px-6 py-6'>
+            {messages.length === 0 && (
+              <p className='text-center text-sm text-neutral-500'>
+                Pick a model and send a message to start.
+              </p>
+            )}
+            <ul className='space-y-4'>
+              {messages.map((m, i) => (
+                <li
+                  key={i}
+                  className={m.role === 'user' ? 'flex justify-end' : 'flex justify-start'}
+                >
+                  <div
+                    className={
+                      m.role === 'user'
+                        ? 'max-w-[80%] rounded-lg bg-neutral-900 px-4 py-2 text-sm text-white'
+                        : 'max-w-[80%] whitespace-pre-wrap rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm shadow-sm'
+                    }
+                  >
+                    {m.content}
+                  </div>
+                </li>
+              ))}
+              {sending && (
+                <li className='flex justify-start'>
+                  <div className='rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm text-neutral-500 shadow-sm'>
+                    Thinking…
+                  </div>
+                </li>
+              )}
+            </ul>
+          </div>
+
+          {error && (
+            <p className='mx-auto w-full max-w-3xl px-6 pb-2 text-sm text-red-700'>{error}</p>
           )}
-        </ul>
-      </div>
 
-      {error && (
+          <form onSubmit={send} className='border-t border-neutral-200 bg-white px-6 py-3'>
-        <p className='mx-auto w-full max-w-3xl px-6 pb-2 text-sm text-red-700'>
+            <div className='mx-auto flex max-w-3xl gap-2'>
-          {error}
+              <input
-        </p>
+                type='text'
-      )}
+                placeholder='Message…'
-
+                value={input}
-      <form
+                onChange={(e) => setInput(e.target.value)}
-        onSubmit={send}
+                disabled={sending || !model}
-        className='border-t border-neutral-200 bg-white px-6 py-3'
+                className='flex-1 rounded-md border border-neutral-300 px-3 py-2 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900 disabled:opacity-50'
-      >
+              />
-        <div className='mx-auto flex max-w-3xl gap-2'>
+              <button
-          <input
+                type='submit'
-            type='text'
+                disabled={sending || !model || !input.trim()}
-            placeholder='Message…'
+                className='inline-flex h-10 items-center rounded-md bg-neutral-900 px-4 text-sm font-medium text-white hover:bg-neutral-700 disabled:opacity-50'
-            value={input}
+              >
-            onChange={(e) => setInput(e.target.value)}
+                Send
-            disabled={sending || !model}
+              </button>
-            className='flex-1 rounded-md border border-neutral-300 px-3 py-2 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900 disabled:opacity-50'
+            </div>
-          />
+          </form>
-          <button
-            type='submit'
-            disabled={sending || !model || !input.trim()}
-            className='inline-flex h-10 items-center rounded-md bg-neutral-900 px-4 text-sm font-medium text-white hover:bg-neutral-700 disabled:opacity-50'
-          >
-            Send
-          </button>
         </div>
-      </form>
+      </div>
     </main>
   );
 }