@pplethai/cli 0.2.2 → 0.3.0

package/dist/update.js

@@ -27,7 +27,7 @@ export function wantsUpdateCheck(argv) {
 }
 /** The one line that opens every "there's a newer pple" conversation. */
 export function announceUpdate(deps, latest) {
-    deps.out.say(`There's a newer pple (${latest}). You have ${deps.version}.`);
+    deps.out.say(`มี pple เวอร์ชันใหม่ (${latest}) คุณใช้เวอร์ชัน ${deps.version}`);
 }
 /**
  * What to say about an install npm's global root doesn't hold. Installing
@@ -35,13 +35,13 @@ export function announceUpdate(deps, latest) {
  * one just ran (ADR-0007).
  */
 export function sayOtherChannel(deps) {
-    deps.out.say("This copy of pple didn't come from npm, so updating it here");
-    deps.out.say("could leave you with two versions. Update it the way you");
-    deps.out.say(`installed it, or install it with npm:\n\n  ${MANUAL_INSTALL}`);
+    deps.out.say("pple ชุดนี้ไม่ได้ติดตั้งผ่าน npm การอัปเดตที่นี่อาจทำให้คุณ");
+    deps.out.say("มี pple สองเวอร์ชัน กรุณาอัปเดตด้วยวิธีเดิมที่คุณติดตั้งไว้");
+    deps.out.say(`หรือติดตั้งด้วย npm:\n\n  ${MANUAL_INSTALL}`);
 }
 /** Why npm gave up, and the line the Builder can always run themselves. */
 export function manualHint(result) {
-    return `${npmMessage(result)}\n\nTry running it yourself:\n\n  ${MANUAL_INSTALL}`;
+    return `${npmMessage(result)}\n\nลองรันคำสั่งนี้ด้วยตัวเอง:\n\n  ${MANUAL_INSTALL}`;
 }
 /**
  * Look for a newer CLI, and act on it as far as this session allows. Returns
@@ -68,18 +68,18 @@ export async function checkForUpdate(deps, argv) {
         return null;
     }
     if (!deps.interactive) {
-        deps.out.say("Run `pple upgrade` when you're ready.");
+        deps.out.say("รัน `pple upgrade` เมื่อคุณพร้อม");
         deps.out.say();
         return null;
     }
-    if (!(await deps.confirm("Update pple now?"))) {
+    if (!(await deps.confirm("อัปเดต pple ตอนนี้เลยไหม?"))) {
         deps.out.say();
         return null;
     }
     const result = await installGlobally(deps, latest);
     if (result.code !== 0)
         return await afterFailedUpgrade(deps, latest, result);
-    deps.out.say(`pple is now ${latest}. Picking up where you left off…`);
+    deps.out.say(`pple เป็นเวอร์ชัน ${latest} แล้ว กำลังทำงานต่อจากที่ค้างไว้…`);
     deps.out.say();
     return deps.reexec(argv);
 }
@@ -91,14 +91,14 @@ export async function checkForUpdate(deps, argv) {
  * place — so carrying on is a question, not a default.
  */
 async function afterFailedUpgrade(deps, latest, result) {
-    deps.out.say(`Couldn't update pple to ${latest}.`);
+    deps.out.say(`อัปเดต pple เป็น ${latest} ไม่สำเร็จ`);
     deps.out.say(manualHint(result));
     deps.out.say();
-    if (await deps.confirm(`Carry on with pple ${deps.version} for now?`)) {
+    if (await deps.confirm(`ใช้ pple ${deps.version} ทำงานต่อไปก่อนไหม?`)) {
         deps.out.say();
         return null;
     }
-    deps.out.say("Stopped. Nothing has changed.");
+    deps.out.say("หยุดแล้ว ไม่มีอะไรเปลี่ยนแปลง");
     return 1;
 }
 async function isDue(deps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplethai/cli",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "repository": {
     "type": "git",

package/skills/pple-platform/SKILL.md

@@ -18,14 +18,15 @@ The PPLE Platform lets party workforce members (Builders) ship mini-apps
 without holding cloud or GitHub credentials. Every new **Builder App** plugs
 into three pillars on party-managed infrastructure:
 
-1. **PPLE ID** — OIDC single sign-on. End users authenticate in **PPLE Today**;
-   the mini-app receives a bearer token via the mini-app SDK and the Worker
-   validates it against the OIDC `userinfo` endpoint. Builders also use PPLE
-   ID for the Console (browser login) and `pple auth login` (device flow).
+1. **PPLE ID** — OIDC single sign-on. End users authenticate via the mini-app
+   SDK (launch token inside **PPLE Today**, or the SDK's PPLE ID browser
+   login); the Worker validates the bearer token against the OIDC `userinfo`
+   endpoint. Builders also use PPLE ID for the Console (browser login) and
+   `pple auth login` (device flow).
 2. **Mini-app integration** — apps run inside PPLE Today's WebView using
-   `@pplethai/pple-today-miniapp-sdk`, and send audience-bound notifications
-   (title/body, optional path-only `linkPath` into this app) through the
-   platform-provisioned notify helper.
+   `@pplethai/pple-today-miniapp-sdk` (and the same SDK in a plain browser),
+   and send audience-bound notifications (title/body, optional path-only
+   `linkPath` into this app) through the platform-provisioned notify helper.
 3. **PPLE Design System** — `@pplethai/components`, a shadcn/ui-based React
    library with party branding. Docs: https://components.pplethai.org/
 
@@ -63,30 +64,38 @@ Read only the file(s) relevant to the task at hand:
 | Task | Read |
 | ---- | ---- |
 | Start a new app / local layout & commands | [references/project-scaffold.md](references/project-scaffold.md) |
-| Login, tokens, NOT_IN_APP, DEV_AUTH | [references/pple-id-auth.md](references/pple-id-auth.md) |
+| Login, tokens, browser PPLE ID flow, DEV_AUTH | [references/pple-id-auth.md](references/pple-id-auth.md) |
 | Mini-app SDK behavior, push notifications | [references/mini-app.md](references/mini-app.md) |
 | UI, styling, components | [references/design-system.md](references/design-system.md) |
-| Create → init → deploy on managed hosting | [references/deployment.md](references/deployment.md) |
+| Create → init → deploy; status / usage (`pple info`) | [references/deployment.md](references/deployment.md) |
 
 ## Golden path for a new app
 
-1. **Create the app** in the Console (`console.ppleth.ai`) — one click
-   provisions the slug, Worker, D1, R2, OAuth client, and hosting.
-2. **Sign in on the machine**: `pple auth login` (PPLE ID device flow; no
+1. **Sign in on the machine**: `pple auth login` (PPLE ID device flow; no
    personal cloud credentials — ADR-0005).
-3. **Scaffold locally**: `pple init <slug>` copies the golden-path template
-   and links the folder to the app.
-4. **Build** against the template helpers (`auth`, `db`, `files`, `notify`)
+2. **Create + scaffold** — pick one path (both use the same Provisioner
+   create; the App Slug is always platform-generated):
+   - **CLI create**: `pple init` (prompts for App Name) or
+     `pple init --name "<App Name>"` (non-interactive) — creates the app,
+     waits until it is ready, then scaffolds and writes the App Link.
+   - **Console create**: create in the Console (`console.ppleth.ai`), then
+     `pple init <slug>` to scaffold and link the folder.
+3. **Build** against the template helpers (`auth`, `db`, `files`, `notify`)
    and `@pplethai/components` (see the reference files).
-5. **Ship**: `pple deploy` — the platform builds and puts the app live.
+4. **Ship**: `pple deploy` — the platform builds and puts the app live.
+5. **Status / usage**: `pple info` (from a linked folder, or
+   `pple info <slug>`) — read-only overview, usage vs Resource Limits,
+   recent deploys, env key list. Invites, Requests, and collaborators stay
+   Console-only (see [deployment.md](references/deployment.md)).
 
 ## Invariants — things that are true no matter what you build
 
-- **Mini-apps authenticate through PPLE Today, not a plain browser.** In
-  production, a normal browser shows the friendly NOT_IN_APP screen. Local
-  development uses `DEV_AUTH` in `.dev.vars` only — never provisioned in
-  production. (Builders separately hold tokens from Console login and
-  `pple auth login`; that does not change how end users enter a mini-app.)
+- **Mini-apps authenticate through the mini-app SDK.** Inside PPLE Today the
+  SDK reads the launch-URL token; in a plain browser it runs the PPLE ID
+  OIDC login. Do not add a NotInApp guard or a custom browser sign-in page.
+  Local development uses `DEV_AUTH` in `.dev.vars` only — never provisioned
+  in production. (Builders separately hold tokens from Console login and
+  `pple auth login`.)
 - **Never mention git, branches, remotes, GitHub, Cloudflare accounts, or
   personal deploy credentials** in the happy path. Talk about the app's
   code and `pple init` / `pple deploy` only.

package/skills/pple-platform/evals/evals.json

@@ -22,7 +22,7 @@
     {
       "id": 4,
       "prompt": "The app should work when I open it in Chrome on my laptop. Add a normal browser login with PPLE ID.",
-      "expected_output": "Refuse browser login for the mini-app; show NOT_IN_APP in plain browsers; real tokens via PPLE Today; local DEV_AUTH only for vite dev — do not claim tokens only exist inside PPLE Today as a platform-wide absolute (Console/CLI hold Builder tokens)",
+      "expected_output": "Use the mini-app SDK's existing browser PPLE ID flow (web/pple.ts bootstrap → sdk.init); do not add a custom OAuth login page or a NotInApp / open-in-Today-only guard; local DEV_AUTH only for vite dev — do not claim tokens only exist inside PPLE Today as a platform-wide absolute (Console/CLI hold Builder tokens; end users can also sign in via the SDK browser flow)",
       "files": []
     }
   ]

package/skills/pple-platform/references/deployment.md

@@ -5,16 +5,24 @@ Builder Apps run only on party-managed Cloudflare infrastructure
 (ADR-0005). The happy path uses the Console and the `pple` CLI — not git
 vocabulary, Docker, Cloud Build, or personal Cloudflare/Pages projects.
 
+Ops detail for create, status, and what stays Console-only lives here
+(ADR-0006: the Skill owns deeper platform guidance; `CLAUDE.md` stays
+short).
+
 ## Happy path
 
 ```bash
-# 1. Create the app in the Console (console.ppleth.ai)
-#    → slug, Worker, D1, R2, OAuth client, hosting — all provisioned
-
 pple auth login              # PPLE ID device flow on this machine
-pple init <slug>             # scaffold template + App Link (.pple/app.json)
+
+# Create + scaffold — either path works:
+pple init                    # prompt for App Name → create → wait → scaffold
+# or: pple init --name "My App"   # non-interactive create (agents/scripts)
+# or: create in Console (console.ppleth.ai), then:
+#     pple init <slug>            # scaffold an app that already exists
+
 # …edit locally with npm run dev…
 pple deploy -m "short note"  # send changes; platform builds and goes live
+pple info                    # read-only status, usage vs limits, deploys
 ```
 
 What the Builder hears: the app's name and live URL (e.g.
@@ -24,10 +32,69 @@ source-control jargon.
 | Command | Meaning for the Builder |
 | ------- | ----------------------- |
 | `pple auth login` | Sign in with PPLE ID |
-| `pple init <slug>` | Set up this app's code on this computer |
+| `pple init` / `pple init --name "…"` | Create a new app, wait until ready, scaffold + App Link |
+| `pple init <slug>` | Set up an existing app's code on this computer |
 | `pple deploy` | Send changes and put them live |
+| `pple info` / `pple info <slug>` | Read-only status, usage vs Resource Limits, deploys |
+| `pple env list` / `set` / `delete` | Manage env vars and secrets (effect on next deploy) |
 | `pple whoami` / `pple auth logout` | Check / forget this machine's sign-in |
 
+## Creating an app (`pple init`)
+
+Same Provisioner create as the Console (`POST /apps`). The **App Slug** is
+always platform-generated — Builders choose only the **App Name**.
+
+| Invocation | Behavior |
+| ---------- | -------- |
+| `pple init` (TTY, no App Link in cwd) | Prompt for App Name → create → poll until ready → scaffold |
+| `pple init --name "<App Name>"` | Non-interactive create → poll → scaffold (agents/scripts) |
+| `pple init` non-TTY without `--name` or slug | Error clearly — do not hang waiting on stdin |
+| `pple init <slug>` | Scaffold an app that already exists (e.g. Console-created) |
+| `pple init` inside a folder with an App Link | **Refuse** — already linked; use `pple info` / `pple deploy`, or `cd` elsewhere to create another app |
+
+After create, the CLI **blocks/polls** until the app is ready to scaffold
+(repo present, not stuck in `provisioning`). On timeout it fails loudly and
+prints the App Slug so the Builder can retry with `pple init <slug>`. If
+scaffold fails after a successful create, the app still exists on the
+platform (same as Console-then-init).
+
+## Status and usage (`pple info`)
+
+Read-only terminal mirror of the Console app dashboard for one Builder App.
+**No mutations.**
+
+- Resolve the app from the **App Link** (`.pple/app.json`) when run inside
+  an app folder, **or** from `pple info <slug>`.
+- No App Link and no slug → clear error: `cd` into the app, pass a slug, or
+  use the Console.
+- Prints safe dashboard surfaces:
+  - Overview (App Name, App Slug, URL, status, Publication Tier, role, …)
+  - Usage vs Resource Limits — treat `null` usage fields as unavailable,
+    not zero (same semantics as Console)
+  - Recent deploys
+  - Env key list — secrets: key present only, never values
+  - Owner-only surfaces (publication / collaborators / request history as
+    the Console shows): include when the caller is Owner; **omit** for
+    Collaborators (same gates as Console — do not fail the whole command)
+
+## Console vs CLI
+
+| Need | Where |
+| ---- | ----- |
+| Create app | Console **or** `pple init` / `pple init --name` |
+| Scaffold / link locally | `pple init <slug>` (or create path above) |
+| Deploy | `pple deploy` |
+| Read status / usage / deploys / env keys | `pple info` (or Console) |
+| Env vars & secrets | Console **or** `pple env` |
+| Beta invites, Publication Tier / PublishRequest | **Console only** |
+| File ScopeRequest / LimitRequest / ChangeRequest / RetireRequest | **Console only** |
+| Manage Collaborators | **Console only** |
+| Dataset catalog / App Scope browsing | **Console only** |
+| Platform Admin approval queue | **Console only** |
+
+Point Builders at the Console (`console.ppleth.ai`) for anything in the
+Console-only rows — do not invent CLI flags for those.
+
 ## What the platform owns
 
 - **Hosting**: Workers for Platforms dispatch namespace; one tenant Worker per
@@ -37,8 +104,9 @@ source-control jargon.
 - **The app's code**: stored and shipped by the platform. `pple init` /
   `pple deploy` authenticate under the hood — the Builder never configures
   a source-control account or pastes a deploy token.
-- **Config / secrets**: set in the Console; applied as Worker bindings on the
-  **next** deploy. Secrets are write-only (set/unset, never read back).
+- **Config / secrets**: set in the Console or via `pple env`; applied as
+  Worker bindings on the **next** deploy. Secrets are write-only (set/unset,
+  never read back).
 
 ## Local vs production auth
 

package/skills/pple-platform/references/mini-app.md

@@ -7,8 +7,9 @@ Builder Apps ship as **mini-apps**: web apps opened in PPLE Today's WebView.
 [pple-id-auth.md](pple-id-auth.md). Facts that shape your design:
 
 - `sdk.init()` must complete before any other SDK call.
-- Outside PPLE Today (plain browser), show NOT_IN_APP — that is expected, not
-  an error. Locally, `DEV_AUTH` covers development.
+- Outside PPLE Today (plain browser), the same SDK runs the PPLE ID browser
+  login — that is expected, not an error. Locally, `DEV_AUTH` covers
+  development.
 - The OAuth client and mini-app URL are provisioned when the app is created in
   the Console; Builders do not register them manually with the Today team.
 - Design mobile-first; test at ~375 px width.

package/skills/pple-platform/references/pple-id-auth.md

@@ -9,38 +9,43 @@ PPLE Today ──opens mini-app in WebView──▶ web (React)
     Worker ──GET {SSO_BASE_URL}/oidc/v1/userinfo──▶ PPLE ID
 ```
 
+In a plain browser the same SDK runs the PPLE ID authorization-code login
+(redirect / callback) instead of reading tokens from the launch URL; the
+Worker still validates the bearer token the same way.
+
 The Worker never sees a password and holds no session; the bearer token is
 the credential on every request (`src/auth.ts`).
 
 Tokens also exist outside mini-apps for **Builders** (Console browser login,
-`pple auth login` device flow). That does not change end-user auth for the
-app you are building: do not invent a browser sign-in for the mini-app itself.
+`pple auth login` device flow). End users of a Builder App authenticate
+through the mini-app SDK — either inside PPLE Today or via that SDK's
+browser PPLE ID flow. Do not invent a second custom login page.
 
 ## Three ways the mini-app can start
 
-Canonical wiring: `web/pple.ts` + `web/main.tsx` + `web/NotInApp.tsx` in the
-golden-path template.
+Canonical wiring: `web/pple.ts` + `web/main.tsx` in the golden-path template.
 
 1. **Local `vite dev`** — set `token` to the `DEV_AUTH` value from `.dev.vars`
    and treat the session as signed-in. No PPLE Today required.
-2. **Inside PPLE Today** — detect the mini-app user agent, init
-   `@pplethai/pple-today-miniapp-sdk`, capture the access token from the
-   launch URL, attach it on every `api()` call.
-3. **Plain browser (production)** — show the friendly NOT_IN_APP screen
-   ("เปิดในแอป PPLE Today"). There is no browser login for mini-apps.
+2. **Inside PPLE Today** — init `@pplethai/pple-today-miniapp-sdk`, capture
+   the access token from the launch URL, attach it on every `api()` call.
+3. **Plain browser (production)** — the same SDK completes the OIDC sign-in
+   callback or redirects to PPLE ID; on return it stores the access token
+   and the app continues as signed-in.
 
 ```tsx
-import { isInMiniAppUserAgent } from "@pplethai/components";
 import { PPLEMiniApp } from "@pplethai/pple-today-miniapp-sdk";
 
 // Local: import.meta.env.DEV → DEV_AUTH token ("dev-token" by default)
-// Plain browser: !isInMiniAppUserAgent → { kind: "not-in-app" }
-// Inside Today: sdk.init() → getAccessToken() → { kind: "signed-in" }
+// Production (Today or browser): sdk.init() → getAccessToken() → { kind: "signed-in" }
 ```
 
 OAuth client values (`VITE_OAUTH_URL`, `VITE_OAUTH_CLIENT_ID`,
 `VITE_OAUTH_REDIRECT_URI`) are provisioned per app and injected at build
-time — Builders do not register clients by hand.
+time — Builders do not register clients by hand. The redirect URI defaults
+to the app's own origin, which matches the mini-app URL the platform
+registers as an allowed redirect on that OAuth client
+(`docs/integration/today-sso-changes.md` §5).
 
 ## Worker: validating the token
 
@@ -79,7 +84,8 @@ Rules:
 ## What not to tell the Builder
 
 - Do not claim "tokens only exist inside PPLE Today" as a platform-wide fact
-  (Console and CLI also hold Builder tokens).
-- Do not add a custom OAuth redirect login page to the mini-app "so it works
-  in Chrome."
+  (Console and CLI also hold Builder tokens; end users can also sign in via
+  the SDK's browser PPLE ID flow).
+- Do not add a custom OAuth redirect login page, or a NotInApp / "open in
+  PPLE Today only" guard — the SDK already handles the browser case.
 - Do not ask for GitHub or Cloudflare credentials to "get a token."

package/skills/pple-platform/references/project-scaffold.md

@@ -1,9 +1,9 @@
 # Project scaffold & local development
 
 New Builder Apps start from the golden-path template in
-`pple-platform/template`, copied by `pple init <slug>` after the Console
-creates the app. Do not scaffold Express/Prisma monorepos or copy
-`pple-erp` — that layout is the old path.
+`pple-platform/template`, copied by `pple init` (create-and-scaffold, or
+`pple init <slug>` after Console create). Do not scaffold Express/Prisma
+monorepos or copy `pple-erp` — that layout is the old path.
 
 ## Layout (single package)
 
@@ -21,10 +21,9 @@ my-app/                     # folder name matches the App Slug
 │   ├── notify.ts           # audience-bound notifications
 │   └── env.ts              # Env bindings type
 ├── web/                    # React SPA (Vite)
-│   ├── main.tsx            # bootstrap → App | NotInApp | error
+│   ├── main.tsx            # bootstrap → App | error
 │   ├── pple.ts             # SDK / DEV_AUTH / api() helpers
 │   ├── App.tsx
-│   ├── NotInApp.tsx
 │   └── app.css             # mobile-first layout only
 ├── shared/                 # Zod schemas + types used by both sides
 │   └── api.ts
@@ -52,7 +51,8 @@ there once; both sides import the Zod schema / inferred type.
 ## Local development
 
 ```bash
-# After Console create-app + pple auth login + pple init <slug>:
+# After pple auth login + create/scaffold (pple init / --name, or Console
+# then pple init <slug>):
 cd <slug>
 npm install
 cp .dev.vars.example .dev.vars   # enables DEV_AUTH for plain-browser work

package/templates/golden-path/.env.example

@@ -1,8 +1,10 @@
 # Frontend build-time config (Vite exposes VITE_* to the browser bundle).
 # These are the app's PPLE ID OIDC client details, used by the mini-app SDK
-# when running inside PPLE Today. They are public values, safe to ship.
-# The platform injects them at deploy time; copy to `.env` to set locally.
+# inside PPLE Today and for the browser PPLE ID login. They are public values,
+# safe to ship. The platform injects them at deploy time; copy to `.env` to
+# set locally.
 VITE_OAUTH_URL="https://id.peoplesparty.or.th"
 VITE_OAUTH_CLIENT_ID=""
-# Defaults to the app's own origin if unset.
+# Defaults to the app's own origin if unset — must match the redirect URI
+# on the app's provisioned PPLE ID OAuth client (the mini-app URL).
 # VITE_OAUTH_REDIRECT_URI=""

package/templates/golden-path/CLAUDE.md

@@ -5,6 +5,9 @@ inside PPLE Today. The person you're helping is a party workforce member who
 may not read stack traces; keep changes simple, explain them plainly, and
 prefer editing the existing demo cards over introducing new patterns.
 
+Ops (create / deploy / status): Console, `pple info`, and the Skill
+deployment reference — not a long ops section here.
+
 ## Architecture (read once)
 
 One Cloudflare Worker serves everything:
@@ -27,8 +30,9 @@ which attach the PPLE ID bearer token. Same origin, so paths are relative
 - Inside PPLE Today, the mini-app SDK (`web/pple.ts`) captures the access
   token from the launch URL. The Worker validates it against PPLE ID
   (`src/auth.ts`).
-- In a plain browser, the app shows the NOT_IN_APP screen — there is no
-  browser sign-in for mini-apps.
+- In a plain browser, the same SDK runs the PPLE ID OIDC login (redirect /
+  callback) and returns an access token — do not add a custom sign-in page
+  or resurrect a NotInApp guard.
 - Locally, `DEV_AUTH` in `.dev.vars` bypasses PPLE Today. **Never** set
   `DEV_AUTH` in production; the platform never provisions it.
 

package/templates/golden-path/README.md

@@ -14,7 +14,7 @@ what you want to your AI coding agent and edit the demo cards. See
 | Capability | Where | Demo |
 | ---------- | ----- | ---- |
 | **API** | Hono Worker, `src/index.ts` | routes under `/api/*` |
-| **Identity** | `src/auth.ts` + `web/pple.ts` | validates PPLE ID tokens; NOT_IN_APP screen; dev bypass |
+| **Identity** | `src/auth.ts` + `web/pple.ts` | validates PPLE ID tokens; browser PPLE ID login; dev bypass |
 | **Database** | D1, `src/db.ts` + `migrations/` | the Notes card |
 | **Files** | R2, `src/files.ts` | the Files card |
 | **Notifications** | `src/notify.ts` | the Notify card (audience-bound; optional `linkPath`) |
@@ -33,9 +33,9 @@ npm run dev                      # http://localhost:5173
 ```
 
 In local dev you're signed in automatically as a fake user (the `DEV_AUTH`
-bypass), so you can build without PPLE Today. Opened in a plain browser after
-deploy, the app shows a friendly "open in PPLE Today" screen; opened inside
-PPLE Today, it signs the real user in via the mini-app SDK.
+bypass), so you can build without PPLE Today. Opened inside PPLE Today, the
+mini-app SDK signs the real user in from the launch URL; opened in a plain
+browser after deploy, the same SDK runs the PPLE ID login.
 
 ## Everyday commands
 

package/templates/golden-path/package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "name": "pple-app",
       "dependencies": {
-        "@pplethai/components": "^1.4.1",
+        "@fontsource/ibm-plex-sans-thai-looped": "^5.3.0",
+        "@pplethai/components": "^1.4.3",
         "@pplethai/pple-today-miniapp-sdk": "^0.1.4",
         "hono": "^4.12.30",
         "react": "^19.2.0",
@@ -730,9 +731,9 @@
       "license": "MIT"
     },
     "node_modules/@fontsource/ibm-plex-sans-thai-looped": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans-thai-looped/-/ibm-plex-sans-thai-looped-5.2.8.tgz",
-      "integrity": "sha512-3YYIGoTBuj4GMC5Lw0NDIvAxdCUr9NyL4/kQVWBkoa8o8jLS5q9MUpbBWSmisHEVnn9WhbLyZPU2eZ8fLtJH8A==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans-thai-looped/-/ibm-plex-sans-thai-looped-5.3.0.tgz",
+      "integrity": "sha512-5NNySQuBNRMk44sUwQypp971+2Fn1LJ9HAEZg9J76+7803j/aCS9HHH7FNvpq6mJDqzTrTrv+VSNsODgCAhxQQ==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -1324,9 +1325,9 @@
       "license": "MIT"
     },
     "node_modules/@pplethai/components": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@pplethai/components/-/components-1.4.1.tgz",
-      "integrity": "sha512-QTvdjpTbKdQk3knTqPI4U8gb662oaXKYg0kO+DxflsPHRXCN9l9h9Tvr7cXpZ9adEcHZLThaOToMdHOxe49kuw==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@pplethai/components/-/components-1.4.3.tgz",
+      "integrity": "sha512-YB8y5WsGduRI0pRos6vrjqpVWYvpxK9gDPXPSAhSC24hM7Xofk1A4o1poZ7g8DFVfG91FWGx8LXtAZ8okHhqsw==",
       "license": "MIT",
       "dependencies": {
         "@fontsource/ibm-plex-sans-thai-looped": "^5.1.0",

package/templates/golden-path/package.json

@@ -14,7 +14,8 @@
     "deploy": "vite build && wrangler deploy"
   },
   "dependencies": {
-    "@pplethai/components": "^1.4.1",
+    "@fontsource/ibm-plex-sans-thai-looped": "^5.3.0",
+    "@pplethai/components": "^1.4.3",
     "@pplethai/pple-today-miniapp-sdk": "^0.1.4",
     "hono": "^4.12.30",
     "react": "^19.2.0",

package/templates/golden-path/web/App.tsx

@@ -67,12 +67,18 @@ function NotesCard() {
   const load = () =>
     apiJson<{ notes: Note[] }>("/api/notes")
       .then((r) => setNotes(r.notes))
-      .catch((e) => showToast({ title: "Could not load notes", description: message(e), variant: "error" }));
+      .catch((e) => {
+        showToast({ title: "Could not load notes", description: message(e), variant: "error" });
+        // Land on the empty state. Leaving this null would spin forever.
+        setNotes([]);
+      });
 
   useEffect(() => void load(), []);
 
   async function add() {
-    if (!body.trim()) return;
+    // `saving` guards the Enter key too — the button is disabled while a save
+    // is in flight, but a keypress doesn't go through the button.
+    if (saving || !body.trim()) return;
     setSaving(true);
     try {
       await apiJson<Note>("/api/notes", {
@@ -137,7 +143,11 @@ function FilesCard() {
   const load = () =>
     apiJson<{ files: UploadedFile[] }>("/api/files")
       .then((r) => setFiles(r.files))
-      .catch((e) => showToast({ title: "Could not load files", description: message(e), variant: "error" }));
+      .catch((e) => {
+        showToast({ title: "Could not load files", description: message(e), variant: "error" });
+        // Land on the empty state. Leaving this null would spin forever.
+        setFiles([]);
+      });
 
   useEffect(() => void load(), []);
 
@@ -168,7 +178,15 @@ function FilesCard() {
       <CardContent>
         <div className="stack">
           <div className="row">
-            <input ref={inputRef} type="file" className="file-input" onChange={upload} />
+            {/* Disabled while uploading, so picking a second file can't start
+                a concurrent upload. */}
+            <input
+              ref={inputRef}
+              type="file"
+              className="file-input"
+              onChange={upload}
+              disabled={uploading}
+            />
             {uploading && <Spinner />}
           </div>
           {files === null ? (

package/templates/golden-path/web/app.css

@@ -90,23 +90,3 @@ body {
   flex: 1;
   min-width: 0;
 }
-
-.notinapp {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: center;
-  padding: 16px;
-}
-
-.notinapp__logo {
-  height: 48px;
-  width: auto;
-  color: #ff6a13;
-}
-
-.notinapp__title {
-  margin: 0;
-  font-size: 20px;
-}

package/templates/golden-path/web/main.tsx

@@ -1,12 +1,25 @@
 // App entry point. Import the design-system styles first, then our own.
 import "@pplethai/components/styles.css";
+
+// The body font, re-declared from @fontsource so it actually loads:
+// @pplethai/components inlines Fontsource's @font-face rules but ships no
+// dist/files/*.woff2, so every `url(files/…)` 404s and the body font silently
+// falls back to system-ui. Anakotmai, the heading face, loads from an absolute
+// URL and is unaffected. Importing the same weights gives Vite real files to
+// bundle; identical @font-face rules declared later win the cascade. These are
+// the all-subset entrypoints, not `thai-400.css` — only those carry
+// `unicode-range`, without which one rule would win for every character and
+// Thai text would match the Latin file, which has no Thai glyphs.
+// Remove once the upstream package ships its font files: PPLEThai/pple-design-system#16.
+import "@fontsource/ibm-plex-sans-thai-looped/400.css";
+import "@fontsource/ibm-plex-sans-thai-looped/600.css";
+
 import "./app.css";
 
 import { Alert, AlertDescription, AlertTitle, Toaster } from "@pplethai/components";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
-import { NotInApp } from "./NotInApp";
 import { bootstrap } from "./pple";
 
 function ErrorScreen({ message }: { message: string }) {
@@ -22,16 +35,14 @@ function ErrorScreen({ message }: { message: string }) {
 
 const root = createRoot(document.getElementById("root")!);
 
-// Establish the session (PPLE Today token, dev bypass, or "not in app") before
-// rendering, so the first paint is the right screen.
+// Establish the session (PPLE Today token, browser PPLE ID login, or local
+// DEV_AUTH) before rendering, so the first paint is the right screen.
 bootstrap().then((result) => {
   root.render(
     <StrictMode>
       <Toaster />
       {result.kind === "signed-in" ? (
         <App />
-      ) : result.kind === "not-in-app" ? (
-        <NotInApp />
       ) : (
         <ErrorScreen message={result.message} />
       )}