Light of day

README.md

@@ -0,0 +1,83 @@
+# puppy-tracker
+
+A tiny offline-first PWA for tracking your puppy's sleep, meals, pees, and poos.
+The browser is the primary client; a small Go server provides a shared
+source-of-truth and sync between devices.
+
+## How sync works
+
+- Each event has a UUID and an `updatedAt` timestamp.
+- Mutations (add / edit / delete) happen against `localStorage` first, so the
+  app keeps working when offline. Deletes are recorded as tombstones so they
+  can propagate.
+- On app load, on `online`, on every mutation (debounced), and every 60 s, the
+  client POSTs its full event list to `/api/events/sync`. The server merges
+  it with its own copy using last-write-wins on `updatedAt` and returns the
+  merged set.
+- Service worker bypasses cache for `/api/*` so writes always hit the server
+  when online; static assets are still cached for offline use.
+
+A status pill in the header shows `syncing…` / `synced 2m ago` / `pending` /
+`sync error` / `offline`. Tap it to force-sync.
+
+## Layout
+
+```
+puppy-tracker/
+├── flake.nix         # packages (server, static, default), devShell, nixosModule
+├── module.nix        # systemd unit, StateDirectory, hardening
+├── server/
+│   ├── go.mod
+│   └── main.go       # JSON-file store, LWW sync, static file serving
+└── src/              # the web app
+    ├── index.html
+    ├── app.js
+    ├── style.css
+    ├── sw.js
+    ├── manifest.json
+    └── icon.svg
+```
+
+## Run locally
+
+```sh
+nix run                       # http://localhost:8080, data in $XDG_DATA_HOME/puppy-tracker
+PUPPY_ADDR=:9000 nix run      # custom port
+
+# Hot-iterate (data in /tmp):
+nix develop -c sh -c 'cd server && go run . -static ../src -data /tmp/puppy-events.json'
+```
+
+## Use it on NixOS
+
+In your system flake:
+
+```nix
+{
+  inputs.puppy-tracker.url = "path:/path/to/puppy-tracker";
+
+  outputs = { self, nixpkgs, puppy-tracker, ... }: {
+    nixosConfigurations.my-host = nixpkgs.lib.nixosSystem {
+      system = "x86_64-linux";
+      modules = [
+        puppy-tracker.nixosModules.default
+        {
+          services.puppy-tracker = {
+            enable = true;
+            port = 8080;
+            openFirewall = true;
+          };
+        }
+      ];
+    };
+  };
+}
+```
+
+The server runs as a `DynamicUser` systemd unit. Data is stored at
+`/var/lib/puppy-tracker/events.json` via `StateDirectory`.
+
+## Notes
+
+- No auth. Intended for a home LAN. If exposing publicly, terminate TLS and
+  authenticate with a reverse proxy in front (Caddy / nginx / Tailscale Funnel).

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1781074563,
+        "narHash": "sha256-md8WlXOlfnIeHeOScMTTHFyf2d6iaTwPl2apR5EQ3P4=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "9ae611a455b90cf061d8f332b977e387bda8e1ca",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,85 @@
+{
+  description = "Puppy Tracker — offline-first puppy tracking app with server-side sync.";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, flake-utils }:
+    let
+      mkStatic = pkgs:
+        pkgs.stdenvNoCC.mkDerivation {
+          pname = "puppy-tracker-static";
+          version = "0.2.0";
+          src = ./src;
+          dontConfigure = true;
+          dontBuild = true;
+          installPhase = ''
+            mkdir -p $out/share/puppy-tracker
+            cp -r ./* $out/share/puppy-tracker/
+          '';
+        };
+
+      mkServer = pkgs:
+        pkgs.buildGoModule {
+          pname = "puppy-tracker-server";
+          version = "0.2.0";
+          src = ./server;
+          vendorHash = null; # no external dependencies
+          # Pure-Go build for a tiny static binary.
+          env.CGO_ENABLED = "0";
+          ldflags = [ "-s" "-w" ];
+          # The binary built from `module puppy-tracker` is `puppy-tracker`,
+          # rename so the executable name reflects its role.
+          postInstall = ''
+            mv $out/bin/puppy-tracker $out/bin/puppy-tracker-server
+          '';
+          meta.mainProgram = "puppy-tracker-server";
+        };
+    in
+    {
+      nixosModules.default = import ./module.nix self;
+      nixosModules.puppy-tracker = self.nixosModules.default;
+    }
+    //
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = import nixpkgs { inherit system; };
+        static = mkStatic pkgs;
+        server = mkServer pkgs;
+      in
+      {
+        packages.static = static;
+        packages.server = server;
+        # `default` bundles both so `nix build` produces a runnable directory.
+        packages.default = pkgs.symlinkJoin {
+          name = "puppy-tracker";
+          paths = [ server static ];
+        };
+
+        devShells.default = pkgs.mkShell {
+          packages = [ pkgs.go pkgs.python3 ];
+          shellHook = ''
+            echo "puppy-tracker dev shell"
+            echo "  cd server && go run . -static ../src -data /tmp/puppy-events.json"
+          '';
+        };
+
+        # `nix run` → start the server, serving the bundled static files,
+        # storing data in $XDG_DATA_HOME/puppy-tracker/events.json.
+        apps.default = {
+          type = "app";
+          program = toString (pkgs.writeShellScript "puppy-tracker-run" ''
+            data_dir="''${XDG_DATA_HOME:-$HOME/.local/share}/puppy-tracker"
+            mkdir -p "$data_dir"
+            exec ${server}/bin/puppy-tracker-server \
+              -addr "''${PUPPY_ADDR:-:8080}" \
+              -static ${static}/share/puppy-tracker \
+              -data "$data_dir/events.json"
+          '');
+          meta.description = "Run puppy-tracker locally (data in $XDG_DATA_HOME/puppy-tracker)";
+        };
+      }
+    );
+}

module.nix

@@ -0,0 +1,87 @@
+self: { config, lib, pkgs, ... }:
+
+let
+  cfg = config.services.puppy-tracker;
+  staticPkg = self.packages.${pkgs.system}.static;
+  serverPkg = self.packages.${pkgs.system}.server;
+in
+{
+  options.services.puppy-tracker = {
+    enable = lib.mkEnableOption "Puppy Tracker (offline-first puppy tracking app with sync server)";
+
+    address = lib.mkOption {
+      type = lib.types.str;
+      default = "0.0.0.0";
+      description = "Address the server listens on.";
+    };
+
+    port = lib.mkOption {
+      type = lib.types.port;
+      default = 8080;
+      description = "TCP port the server listens on.";
+    };
+
+    openFirewall = lib.mkOption {
+      type = lib.types.bool;
+      default = false;
+      description = "Whether to open the configured port in the firewall.";
+    };
+
+    package = lib.mkOption {
+      type = lib.types.package;
+      default = serverPkg;
+      defaultText = lib.literalExpression "puppy-tracker.packages.\${system}.server";
+      description = "The puppy-tracker server package.";
+    };
+
+    staticPackage = lib.mkOption {
+      type = lib.types.package;
+      default = staticPkg;
+      defaultText = lib.literalExpression "puppy-tracker.packages.\${system}.static";
+      description = "The puppy-tracker static-site package (HTML/CSS/JS).";
+    };
+  };
+
+  config = lib.mkIf cfg.enable {
+    systemd.services.puppy-tracker = {
+      description = "Puppy Tracker server";
+      wantedBy = [ "multi-user.target" ];
+      after = [ "network.target" ];
+
+      serviceConfig = {
+        ExecStart = lib.concatStringsSep " " [
+          "${cfg.package}/bin/puppy-tracker-server"
+          "-addr ${cfg.address}:${toString cfg.port}"
+          "-static ${cfg.staticPackage}/share/puppy-tracker"
+          "-data /var/lib/puppy-tracker/events.json"
+        ];
+
+        DynamicUser = true;
+        StateDirectory = "puppy-tracker";
+        StateDirectoryMode = "0750";
+        Restart = "on-failure";
+        RestartSec = "2s";
+
+        # Hardening
+        ProtectSystem = "strict";
+        ProtectHome = true;
+        PrivateTmp = true;
+        PrivateDevices = true;
+        NoNewPrivileges = true;
+        ProtectKernelTunables = true;
+        ProtectKernelModules = true;
+        ProtectKernelLogs = true;
+        ProtectControlGroups = true;
+        RestrictSUIDSGID = true;
+        RestrictRealtime = true;
+        LockPersonality = true;
+        MemoryDenyWriteExecute = true;
+        SystemCallArchitectures = "native";
+        SystemCallFilter = [ "@system-service" "~@privileged @resources" ];
+        RestrictAddressFamilies = [ "AF_INET" "AF_INET6" "AF_UNIX" ];
+      };
+    };
+
+    networking.firewall.allowedTCPPorts = lib.mkIf cfg.openFirewall [ cfg.port ];
+  };
+}

result

@@ -0,0 +1 @@
+/nix/store/v5hihy71szviny4w4qb18jmzhc9zb98w-puppy-tracker-server-0.2.0

server/go.mod

@@ -0,0 +1,3 @@
+module puppy-tracker
+
+go 1.22

server/main.go

@@ -0,0 +1,291 @@
+package main
+
+import (
+	"encoding/json"
+	"errors"
+	"flag"
+	"io"
+	"io/fs"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"sync"
+	"time"
+)
+
+type Event struct {
+	ID        string `json:"id"`
+	Type      string `json:"type"`
+	At        int64  `json:"at"`
+	Note      string `json:"note"`
+	PhotoID   string `json:"photoId,omitempty"`
+	UpdatedAt int64  `json:"updatedAt"`
+	Deleted   bool   `json:"deleted,omitempty"`
+}
+
+var uuidRE = regexp.MustCompile(`^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$`)
+
+func validUUID(s string) bool { return uuidRE.MatchString(s) }
+
+type Store struct {
+	path string
+	mu   sync.Mutex
+	data map[string]Event
+}
+
+func newStore(path string) (*Store, error) {
+	s := &Store{path: path, data: map[string]Event{}}
+	if err := s.load(); err != nil {
+		return nil, err
+	}
+	return s, nil
+}
+
+func (s *Store) load() error {
+	f, err := os.Open(s.path)
+	if err != nil {
+		if errors.Is(err, fs.ErrNotExist) {
+			return nil
+		}
+		return err
+	}
+	defer f.Close()
+	var evs []Event
+	if err := json.NewDecoder(f).Decode(&evs); err != nil {
+		if errors.Is(err, io.EOF) {
+			return nil
+		}
+		return err
+	}
+	for _, e := range evs {
+		s.data[e.ID] = e
+	}
+	return nil
+}
+
+// Caller must hold s.mu.
+func (s *Store) saveLocked() error {
+	if err := os.MkdirAll(filepath.Dir(s.path), 0o755); err != nil {
+		return err
+	}
+	tmp := s.path + ".tmp"
+	f, err := os.Create(tmp)
+	if err != nil {
+		return err
+	}
+	evs := make([]Event, 0, len(s.data))
+	for _, e := range s.data {
+		evs = append(evs, e)
+	}
+	enc := json.NewEncoder(f)
+	enc.SetIndent("", "  ")
+	if err := enc.Encode(evs); err != nil {
+		f.Close()
+		os.Remove(tmp)
+		return err
+	}
+	if err := f.Close(); err != nil {
+		return err
+	}
+	return os.Rename(tmp, s.path)
+}
+
+// sync merges client events into the store using last-write-wins by UpdatedAt,
+// then returns the full merged set.
+func (s *Store) sync(client []Event) ([]Event, error) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	for _, ce := range client {
+		if ce.ID == "" {
+			continue
+		}
+		existing, ok := s.data[ce.ID]
+		if !ok || ce.UpdatedAt > existing.UpdatedAt {
+			s.data[ce.ID] = ce
+		}
+	}
+	if err := s.saveLocked(); err != nil {
+		return nil, err
+	}
+	out := make([]Event, 0, len(s.data))
+	for _, e := range s.data {
+		out = append(out, e)
+	}
+	return out, nil
+}
+
+type syncRequest struct {
+	Events []Event `json:"events"`
+}
+
+type syncResponse struct {
+	Events    []Event `json:"events"`
+	ServerNow int64   `json:"serverNow"`
+}
+
+type cacheControlFS struct {
+	root http.FileSystem
+}
+
+func (c cacheControlFS) Open(name string) (http.File, error) { return c.root.Open(name) }
+
+func main() {
+	addr := flag.String("addr", ":8080", "listen address (e.g. :8080 or 0.0.0.0:8080)")
+	dataPath := flag.String("data", "events.json", "path to events JSON file")
+	staticDir := flag.String("static", "", "directory of static files to serve")
+	flag.Parse()
+
+	store, err := newStore(*dataPath)
+	if err != nil {
+		log.Fatalf("load store: %v", err)
+	}
+
+	photosDir := filepath.Join(filepath.Dir(*dataPath), "photos")
+	if err := os.MkdirAll(photosDir, 0o755); err != nil {
+		log.Fatalf("mkdir photos: %v", err)
+	}
+
+	mux := http.NewServeMux()
+
+	mux.HandleFunc("/api/events/sync", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodPost {
+			http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+		var req syncRequest
+		if err := json.NewDecoder(io.LimitReader(r.Body, 8<<20)).Decode(&req); err != nil {
+			http.Error(w, "bad json: "+err.Error(), http.StatusBadRequest)
+			return
+		}
+		merged, err := store.sync(req.Events)
+		if err != nil {
+			log.Printf("sync: %v", err)
+			http.Error(w, "server error", http.StatusInternalServerError)
+			return
+		}
+		w.Header().Set("Content-Type", "application/json")
+		w.Header().Set("Cache-Control", "no-store")
+		_ = json.NewEncoder(w).Encode(syncResponse{
+			Events:    merged,
+			ServerNow: time.Now().UnixMilli(),
+		})
+	})
+
+	mux.HandleFunc("/healthz", func(w http.ResponseWriter, r *http.Request) {
+		w.Write([]byte("ok"))
+	})
+
+	// POST /api/photos — multipart upload with form fields `id` (UUID) and
+	// `file` (JPEG). The client generates the ID so the event referencing
+	// the photo can be written before the upload round-trips.
+	mux.HandleFunc("/api/photos", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodPost {
+			http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+		r.Body = http.MaxBytesReader(w, r.Body, 15<<20)
+		if err := r.ParseMultipartForm(15 << 20); err != nil {
+			http.Error(w, "parse: "+err.Error(), http.StatusBadRequest)
+			return
+		}
+		id := r.FormValue("id")
+		if !validUUID(id) {
+			http.Error(w, "invalid id", http.StatusBadRequest)
+			return
+		}
+		file, _, err := r.FormFile("file")
+		if err != nil {
+			http.Error(w, "no file: "+err.Error(), http.StatusBadRequest)
+			return
+		}
+		defer file.Close()
+
+		dstPath := filepath.Join(photosDir, id+".jpg")
+		tmp := dstPath + ".tmp"
+		dst, err := os.Create(tmp)
+		if err != nil {
+			http.Error(w, "create: "+err.Error(), http.StatusInternalServerError)
+			return
+		}
+		if _, err := io.Copy(dst, file); err != nil {
+			dst.Close()
+			os.Remove(tmp)
+			http.Error(w, "copy: "+err.Error(), http.StatusInternalServerError)
+			return
+		}
+		if err := dst.Close(); err != nil {
+			os.Remove(tmp)
+			http.Error(w, "close: "+err.Error(), http.StatusInternalServerError)
+			return
+		}
+		if err := os.Rename(tmp, dstPath); err != nil {
+			os.Remove(tmp)
+			http.Error(w, "rename: "+err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		w.Header().Set("Cache-Control", "no-store")
+		_ = json.NewEncoder(w).Encode(map[string]string{"id": id})
+	})
+
+	// GET /api/photos/<id> — serves the JPEG. Photos are immutable per ID
+	// so we mark them as long-lived; both browser and SW can cache freely.
+	mux.HandleFunc("/api/photos/", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet && r.Method != http.MethodHead {
+			http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+		id := strings.TrimPrefix(r.URL.Path, "/api/photos/")
+		if !validUUID(id) {
+			http.Error(w, "invalid id", http.StatusBadRequest)
+			return
+		}
+		path := filepath.Join(photosDir, id+".jpg")
+		f, err := os.Open(path)
+		if err != nil {
+			http.NotFound(w, r)
+			return
+		}
+		defer f.Close()
+		stat, err := f.Stat()
+		if err != nil {
+			http.Error(w, "stat: "+err.Error(), http.StatusInternalServerError)
+			return
+		}
+		w.Header().Set("Content-Type", "image/jpeg")
+		w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
+		http.ServeContent(w, r, path, stat.ModTime(), f)
+	})
+
+	if *staticDir != "" {
+		fileServer := http.FileServer(http.Dir(*staticDir))
+		mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+			// PWA: sw.js and manifest.json must revalidate so updates propagate.
+			if r.URL.Path == "/sw.js" || r.URL.Path == "/manifest.json" {
+				w.Header().Set("Cache-Control", "no-cache")
+			}
+			// SPA fallback: unknown paths -> index.html (so deep links work).
+			if !strings.HasPrefix(r.URL.Path, "/api/") {
+				candidate := filepath.Join(*staticDir, filepath.FromSlash(r.URL.Path))
+				if r.URL.Path != "/" {
+					if info, err := os.Stat(candidate); err != nil || info.IsDir() {
+						r.URL.Path = "/"
+					}
+				}
+			}
+			fileServer.ServeHTTP(w, r)
+		})
+	}
+
+	srv := &http.Server{
+		Addr:              *addr,
+		Handler:           mux,
+		ReadHeaderTimeout: 5 * time.Second,
+	}
+	log.Printf("puppy-tracker listening on %s (data=%s, static=%s)", *addr, *dataPath, *staticDir)
+	log.Fatal(srv.ListenAndServe())
+}

src/icon.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="96" fill="#7c5cff"/>
+  <g transform="translate(96 112)">
+    <!-- ears -->
+    <ellipse cx="50"  cy="80"  rx="44" ry="64" fill="#3a2a18" transform="rotate(-20 50 80)"/>
+    <ellipse cx="270" cy="80"  rx="44" ry="64" fill="#3a2a18" transform="rotate(20 270 80)"/>
+    <!-- head -->
+    <ellipse cx="160" cy="170" rx="140" ry="120" fill="#d9a877"/>
+    <!-- eyes -->
+    <circle cx="110" cy="160" r="14" fill="#1c1b22"/>
+    <circle cx="210" cy="160" r="14" fill="#1c1b22"/>
+    <circle cx="114" cy="156" r="4"  fill="#fff"/>
+    <circle cx="214" cy="156" r="4"  fill="#fff"/>
+    <!-- snout -->
+    <ellipse cx="160" cy="230" rx="62" ry="44" fill="#f5d9b8"/>
+    <ellipse cx="160" cy="208" rx="18" ry="12" fill="#1c1b22"/>
+    <path d="M160 224 v22 M160 246 Q140 262 122 254 M160 246 Q180 262 198 254" stroke="#1c1b22" stroke-width="6" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>

src/index.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#7c5cff" />
+    <title>Puppy Tracker</title>
+    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" href="icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="icon.svg" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>🐶 Puppy Tracker</h1>
+      <div id="online-status" class="status-pill"></div>
+    </header>
+
+    <main>
+      <section id="big-clock" class="big-clock" hidden>
+        <div class="bc-label" id="bc-label">—</div>
+        <div class="bc-time" id="bc-time">0:00</div>
+        <div class="bc-since" id="bc-since"></div>
+      </section>
+
+      <section class="quick-actions">
+        <h2>Log event</h2>
+        <div class="grid">
+          <button class="action sleep" data-type="sleep-start">😴 Sleep start</button>
+          <button class="action sleep" data-type="sleep-end">⏰ Sleep end</button>
+          <button class="action eat" data-type="eat">🍽️ Ate</button>
+          <button class="action pee" data-type="pee">💧 Pee</button>
+          <button class="action poo" data-type="poo">💩 Poo</button>
+        </div>
+      </section>
+
+      <section class="day-bar">
+        <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
+        <input type="date" id="day-picker" />
+        <button type="button" id="day-today" class="ghost">Today</button>
+        <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
+      </section>
+
+      <section class="overview">
+        <h2 id="overview-title">Today's overview</h2>
+        <div class="stats">
+          <div class="stat">
+            <div class="stat-label">Sleep</div>
+            <div class="stat-value" id="stat-sleep">0h 0m</div>
+          </div>
+          <div class="stat">
+            <div class="stat-label">Awake</div>
+            <div class="stat-value" id="stat-awake">0h 0m</div>
+          </div>
+          <div class="stat">
+            <div class="stat-label">Meals</div>
+            <div class="stat-value" id="stat-meals">0</div>
+          </div>
+          <div class="stat">
+            <div class="stat-label">Pees</div>
+            <div class="stat-value" id="stat-pees">0</div>
+          </div>
+          <div class="stat">
+            <div class="stat-label">Poos</div>
+            <div class="stat-value" id="stat-poos">0</div>
+          </div>
+        </div>
+
+        <div class="lasts">
+          <div class="last-row"><span>Last pee</span><span id="last-pee">—</span></div>
+          <div class="last-row"><span>Last poo</span><span id="last-poo">—</span></div>
+          <div class="last-row"><span>Last meal</span><span id="last-eat">—</span></div>
+          <div class="last-row"><span>Last sleep</span><span id="last-sleep">—</span></div>
+          <div class="last-row" id="currently-row" hidden><span>Currently</span><span id="currently">—</span></div>
+        </div>
+      </section>
+
+      <section class="sleep">
+        <h2>Sleep windows</h2>
+        <ul id="sleep-list" class="wake-list"></ul>
+        <p id="sleep-empty" class="empty">No sleep windows yet for this day.</p>
+      </section>
+
+      <section class="wake">
+        <h2>Wake windows</h2>
+        <ul id="wake-list" class="wake-list"></ul>
+        <p id="wake-empty" class="empty">No wake windows yet for this day.</p>
+      </section>
+
+      <section class="weekly">
+        <h2>Last 7 days</h2>
+        <div class="chart">
+          <div class="chart-title">Sleep (hours)</div>
+          <svg id="chart-sleep" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Sleep hours per day for the last 7 days"></svg>
+        </div>
+        <div class="chart">
+          <div class="chart-title">Daily counts</div>
+          <svg id="chart-counts" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Pee, poo and meal counts per day for the last 7 days"></svg>
+          <div class="legend">
+            <span class="lg pee"><span class="sw"></span>Pees</span>
+            <span class="lg poo"><span class="sw"></span>Poos</span>
+            <span class="lg eat"><span class="sw"></span>Meals</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="history">
+        <h2>History</h2>
+        <ul id="event-list" class="event-list"></ul>
+        <p id="empty-state" class="empty">No events logged for this day.</p>
+      </section>
+    </main>
+
+    <dialog id="note-dialog">
+      <form method="dialog" id="note-form">
+        <h3 id="note-title">Add note</h3>
+        <label>Time
+          <div class="time-row">
+            <input type="date" id="note-date" />
+            <input type="time" id="note-time" lang="en-GB" />
+            <button type="button" id="note-time-now" class="ghost">Now</button>
+          </div>
+        </label>
+        <label>Note
+          <textarea id="note-input" rows="4" placeholder="e.g. pee was instant, poo took 5min, ate 300g raw food"></textarea>
+        </label>
+        <div class="photo-field">
+          <input type="file" id="note-photo-input" accept="image/*" capture="environment" hidden />
+          <button type="button" id="note-photo-btn" class="ghost">📷 Add photo</button>
+          <button type="button" id="note-photo-clear" class="ghost" hidden>Remove photo</button>
+          <div id="note-photo-preview" class="photo-preview" hidden></div>
+        </div>
+        <menu>
+          <button value="cancel" class="ghost">Cancel</button>
+          <button value="save" id="note-save">Save</button>
+        </menu>
+      </form>
+    </dialog>
+
+    <dialog id="edit-dialog">
+      <form method="dialog" id="edit-form">
+        <h3>Edit event</h3>
+        <label>Time
+          <div class="time-row">
+            <input type="date" id="edit-date" />
+            <input type="time" id="edit-time" lang="en-GB" />
+          </div>
+        </label>
+        <label>Note
+          <textarea id="edit-note" rows="4"></textarea>
+        </label>
+        <div class="photo-field">
+          <input type="file" id="edit-photo-input" accept="image/*" capture="environment" hidden />
+          <button type="button" id="edit-photo-btn" class="ghost">📷 Add photo</button>
+          <button type="button" id="edit-photo-clear" class="ghost" hidden>Remove photo</button>
+          <div id="edit-photo-preview" class="photo-preview" hidden></div>
+        </div>
+        <menu>
+          <button value="delete" id="edit-delete" class="danger">Delete</button>
+          <button value="cancel" class="ghost">Cancel</button>
+          <button value="save">Save</button>
+        </menu>
+      </form>
+    </dialog>
+
+    <dialog id="lightbox">
+      <button type="button" id="lightbox-close" class="lightbox-close" aria-label="Close">×</button>
+      <img id="lightbox-img" alt="" />
+    </dialog>
+
+    <script src="app.js"></script>
+  </body>
+</html>

src/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Puppy Tracker",
+  "short_name": "Puppy",
+  "description": "Track your puppy's sleep, meals, and bathroom breaks.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#f7f5ff",
+  "theme_color": "#7c5cff",
+  "icons": [
+    {
+      "src": "icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

src/style.css

@@ -0,0 +1,473 @@
+:root {
+  --bg: #f7f5ff;
+  --surface: #ffffff;
+  --text: #1c1b22;
+  --muted: #6b6b78;
+  --accent: #7c5cff;
+  --accent-soft: #ebe6ff;
+  --sleep: #6c8cff;
+  --eat: #ff9b3d;
+  --pee: #ffd23f;
+  --poo: #8a5a3b;
+  --danger: #d64545;
+  --border: #e9e6f5;
+  --radius: 12px;
+  --shadow: 0 1px 2px rgba(20, 14, 60, 0.05), 0 4px 16px rgba(20, 14, 60, 0.05);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #14131a;
+    --surface: #1f1e28;
+    --text: #ebeaf2;
+    --muted: #9c9bab;
+    --accent: #a690ff;
+    --accent-soft: #2a2640;
+    --border: #2c2a3a;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
+  }
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.4;
+}
+
+body {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0) 16px;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 4px 8px;
+}
+
+h1 {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+h2 {
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  margin: 0 0 12px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px 0 32px;
+}
+
+section {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 16px;
+}
+
+.big-clock {
+  text-align: center;
+  padding: 24px 16px;
+}
+
+.day-bar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 10px;
+}
+.day-bar input[type="date"] {
+  flex: 1;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+}
+.day-bar button {
+  padding: 8px 14px;
+  flex-shrink: 0;
+}
+.day-bar button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.big-clock .bc-label {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+.big-clock .bc-time {
+  font-size: 3.25rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.05;
+  letter-spacing: -0.01em;
+}
+.big-clock .bc-since {
+  margin-top: 6px;
+  font-size: 0.8rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+.big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); }
+.big-clock.asleep .bc-time { color: var(--sleep); }
+.big-clock.awake  { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 10%, var(--surface))); }
+.big-clock.awake  .bc-time { color: var(--accent); }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+}
+
+button {
+  font: inherit;
+  border: none;
+  border-radius: var(--radius);
+  padding: 14px 12px;
+  cursor: pointer;
+  background: var(--accent);
+  color: white;
+  font-weight: 600;
+  transition: transform 0.08s ease, filter 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button:active { transform: scale(0.97); }
+button:hover { filter: brightness(1.05); }
+
+button.action.sleep { background: var(--sleep); }
+button.action.eat   { background: var(--eat); }
+button.action.pee   { background: var(--pee); color: #2b240a; }
+button.action.poo   { background: var(--poo); }
+
+button.ghost {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  font-weight: 500;
+  padding: 10px 14px;
+}
+
+button.danger { background: var(--danger); }
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.stat {
+  background: var(--accent-soft);
+  padding: 12px;
+  border-radius: var(--radius);
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-top: 4px;
+}
+
+.lasts {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.last-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 4px;
+  font-size: 0.95rem;
+  border-bottom: 1px dashed var(--border);
+}
+.last-row:last-child { border-bottom: none; }
+.last-row span:first-child { color: var(--muted); }
+
+.history-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.history-controls label { color: var(--muted); font-size: 0.85rem; }
+
+input[type="date"], input[type="datetime-local"], textarea {
+  font: inherit;
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  width: 100%;
+}
+
+textarea { resize: vertical; }
+
+.event-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.wake-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ww {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+}
+.ww .ww-range {
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  min-width: 120px;
+}
+.ww .ww-dur {
+  font-weight: 600;
+  flex: 1;
+}
+.ww.ongoing {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.ww.ongoing .ww-tag {
+  font-size: 0.75rem;
+  color: var(--accent);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.ww.sleep-ww.ongoing {
+  border-color: var(--sleep);
+  background: color-mix(in srgb, var(--sleep) 14%, var(--surface));
+}
+.ww.sleep-ww.ongoing .ww-tag { color: var(--sleep); }
+
+.event {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.event .dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.event[data-type="sleep-start"] .dot,
+.event[data-type="sleep-end"] .dot { background: var(--sleep); }
+.event[data-type="eat"] .dot { background: var(--eat); }
+.event[data-type="pee"] .dot { background: var(--pee); }
+.event[data-type="poo"] .dot { background: var(--poo); }
+
+.event .time { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 60px; }
+.event .label { font-weight: 600; min-width: 110px; }
+.event .note { color: var(--muted); font-size: 0.9rem; flex: 1; }
+
+.empty {
+  color: var(--muted);
+  text-align: center;
+  padding: 12px 0;
+}
+
+.status-pill {
+  font-size: 0.75rem;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 600;
+}
+.status-pill.offline { background: #ffe0e0; color: #b03030; }
+.status-pill.error   { background: #ffe0e0; color: #b03030; }
+.status-pill.syncing { background: #e0eaff; color: #2a4ab0; }
+.status-pill.pending { background: #fff1d4; color: #8a5a00; }
+@media (prefers-color-scheme: dark) {
+  .status-pill.offline { background: #4a1f1f; color: #ff9090; }
+  .status-pill.error   { background: #4a1f1f; color: #ff9090; }
+  .status-pill.syncing { background: #1f2c4a; color: #9eb6ff; }
+  .status-pill.pending { background: #4a3a1f; color: #ffd28a; }
+}
+
+dialog {
+  border: none;
+  border-radius: var(--radius);
+  padding: 20px;
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  max-width: 480px;
+  width: calc(100% - 32px);
+}
+
+dialog::backdrop { background: rgba(0,0,0,0.4); }
+
+dialog h3 { margin: 0 0 12px; }
+
+dialog label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
+dialog label input, dialog label textarea { margin-top: 4px; }
+
+dialog menu {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0;
+  margin: 14px 0 0;
+}
+
+.photo-field {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.photo-field button { padding: 8px 12px; }
+.photo-preview {
+  margin-top: 8px;
+  width: 100%;
+}
+.photo-preview img {
+  display: block;
+  max-width: 100%;
+  max-height: 240px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+}
+
+.event .thumb {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+  cursor: zoom-in;
+  background: var(--accent-soft);
+}
+
+#lightbox {
+  background: #000;
+  padding: 0;
+  border: none;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: auto;
+  height: auto;
+}
+#lightbox::backdrop { background: rgba(0,0,0,0.85); }
+#lightbox img {
+  display: block;
+  max-width: 95vw;
+  max-height: 95vh;
+  object-fit: contain;
+}
+.lightbox-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 4px 12px 6px;
+  border-radius: 999px;
+  font-weight: 400;
+}
+
+.time-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.time-row input { flex: 1 1 120px; min-width: 0; }
+.time-row button { padding: 8px 12px; }
+
+.chart { margin-bottom: 16px; }
+.chart:last-child { margin-bottom: 0; }
+.chart-title {
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.chart-svg { display: block; width: 100%; height: auto; }
+.chart-svg text { fill: var(--muted); font-size: 9px; }
+.chart-svg .grid {
+  stroke: var(--border);
+  stroke-dasharray: 2 3;
+}
+.chart-svg .bar { cursor: pointer; }
+.chart-svg .bar-faded { opacity: 0.7; }
+.chart-svg .bar-sleep { fill: var(--sleep); }
+.chart-svg .bar-pee   { fill: var(--pee); }
+.chart-svg .bar-poo   { fill: var(--poo); }
+.chart-svg .bar-eat   { fill: var(--eat); }
+
+.legend {
+  display: flex;
+  gap: 14px;
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+.lg { display: inline-flex; align-items: center; gap: 5px; }
+.lg .sw {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  display: inline-block;
+}
+.lg.pee .sw { background: var(--pee); }
+.lg.poo .sw { background: var(--poo); }
+.lg.eat .sw { background: var(--eat); }

src/sw.js

@@ -0,0 +1,75 @@
+const CACHE = "puppy-tracker-v1";
+const PHOTO_CACHE = "puppy-tracker-photos-v1";
+const ASSETS = [
+  "./",
+  "./index.html",
+  "./style.css",
+  "./app.js",
+  "./manifest.json",
+  "./icon.svg",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(ASSETS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((k) => k !== CACHE && k !== PHOTO_CACHE)
+          .map((k) => caches.delete(k))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  if (req.method !== "GET") return;
+
+  const url = new URL(req.url);
+
+  // Photos are immutable per UUID — cache-first forever and stuff every
+  // successful fetch into a dedicated cache so they survive between visits
+  // and are available offline once seen.
+  if (url.pathname.includes("/api/photos/")) {
+    event.respondWith(
+      caches.open(PHOTO_CACHE).then(async (cache) => {
+        const cached = await cache.match(req);
+        if (cached) return cached;
+        try {
+          const res = await fetch(req);
+          if (res && res.ok) cache.put(req, res.clone());
+          return res;
+        } catch (err) {
+          return cached || Response.error();
+        }
+      })
+    );
+    return;
+  }
+
+  // Other API calls: never cache — sync must reflect live server state.
+  if (url.pathname.includes("/api/")) return;
+
+  event.respondWith(
+    caches.match(req).then((cached) => {
+      if (cached) return cached;
+      return fetch(req)
+        .then((res) => {
+          if (res && res.ok && url.origin === self.location.origin) {
+            const clone = res.clone();
+            caches.open(CACHE).then((c) => c.put(req, clone));
+          }
+          return res;
+        })
+        .catch(() => caches.match("./index.html"));
+    })
+  );
+});