@ti-engine/web-framework 1.20.1 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,98 @@
 
 This document will contain the list of changes made to the framework. The format is based on the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
 
+## Version 1.23.0
+
+Local (username/password) authentication is real. It had never been implemented: the constructor overwrote whatever
+was configured with `admin`/`admin` behind a "for testing purposes only" TODO, the check was a plain `===` on both
+fields, and the session user it produced carried no email — which since `competence` began resolving identity by
+email meant a local sign-in could not reach an application at all.
+
+* feat(local-user-directory): new `#local-user-directory` module — a JSON file of user records loaded on boot and
+  reconciled into Redis under `ti:web:auth:local-users`. Records carry `username`, `email`, `name` and a
+  `passwordHash`; `email` is required, because it is the field a consuming application resolves an identity by. The
+  file is the source of truth: a boot reconcile adds, updates and **removes**, so deleting a user revokes access
+* feat(local-user-directory): scrypt password hashing via `node:crypto` — no new dependency — with a per-user random
+  salt and the cost parameters recorded in each hash, so they can be raised later without invalidating existing
+  hashes. Verification is timing-safe, and an unknown username still performs a hash computation so the login form
+  is not a username-enumeration oracle
+* feat(auth-manager)!: **the hardcoded `admin`/`admin` pair is gone.** Local sign-ins are verified against the
+  directory, and `authorize()` returns a `User` carrying `userID`, `username`, `email` and `name` instead of a
+  random-UUID stub. Any deployment relying on the hardcoded credentials must provision a users file
+* fix(auth-manager): a local user's `userID` is stable across logins. It was a fresh UUID each time, so
+  `auth.admins` could never match a local user by userID — only by username
+* feat(build): `npm run hash-password` generates a record's hash, reading the password from **stdin** rather than
+  argv, which would put it in shell history and in `ps`
+* feat(web-config-env): `TI_WEB_AUTH_LOCAL_USERS_PATH` overrides `auth.local.usersPath`
+* fix(auth-manager): close a fail-open found by the whole-branch review — `#authenticateLocal` and `authorize()`
+  consulted the Redis-backed directory directly, so a users file that failed to load (missing, unreadable, or
+  unconfigured) still authenticated against records reconciled by an **earlier successful boot**, even while
+  logging that every local sign-in would be refused. A new `#localDirectoryUsable` flag is required by both
+  before any lookup, and is set only after a load that reconciled at least one record. `authorize()` also now
+  refuses a `disabled` record on its own, rather than relying on `authenticate()` having already been called
+* fix(auth-manager): a Redis error during directory reconcile is now logged with only its `message`/`code` —
+  the raw ioredis error carries the failed command's full arguments, which for this call includes every user's
+  salt and scrypt hash, so logging it verbatim printed the entire directory's credential material at WARNING level
+* build(release): bump package version from `1.22.0` to `1.23.0`
+
+**Not included, and required before `local` is the sole method on an internet-facing deployment:** rate limiting,
+lockout after repeated failures, and password policy.
+
+## Version 1.22.0
+
+An application may now refuse a sign-in from its `augmentSession` hook, and that refusal is genuinely fail-closed.
+Sign-in failures also present identically across every auth method, which local (username/password) auth needs before
+it can be offered as a production option.
+
+* fix(web-handlers): destroy the session when an augment hook throws. `session.user` is assigned in place before the
+  hook runs and `verifySession` only checks that it exists, so a merely-rejected session was still persisted by
+  express-session at response end and would have admitted the refused user
+* feat(web-server): document the `augmentSession` refusal contract — throwing refuses the login, destroys the session,
+  and redirects to the login page carrying the exception code
+* feat(web-handlers): redirect any HTML-accepting, non-HTMX **401** to `/?error=<code>`, not only `GET` requests, so a
+  local-auth POST failure presents exactly like an OAuth callback failure. Non-401 responses are unaffected
+* feat(web-app): render the sign-in failure message on the login page. `#ti-error` was an empty element and the
+  `getUrlParam` helper had no call sites, so a failed sign-in previously returned a blank login form
+* feat(exports): expose the authorization helpers as `@ti-engine/web-framework/authorization`, so an application can
+  reuse `isAdminIdentity` for its own allowlist decisions instead of reimplementing the match
+* build(release): bump package version from `1.21.0` to `1.22.0`
+
+## Version 1.21.0
+
+Two read-only screens the framework now provides for every consumer: **Profile** — which has been a registered
+fragment rendering a two-line placeholder since the shell was written — and a new **About**, so a running instance
+can finally answer "which build is this?" without shell access. Both are the same kind of screen (facts, grouped
+into labelled sections), so the framework owns the screen — fragment, Alpine component, CSS — and an application
+supplies only the content, through two virtual descriptor methods. Design record:
+`docs/superpowers/specs/2026-08-13-profile-and-about-screens-design.md` (CA-99).
+
+* feat(web-application): add `getProfileInfo( session )` and `getApplicationInfo( session )` — virtual methods
+  returning a display-ready `{ identity, sections }` descriptor, dispatched from `processDataRequest` for the
+  `profile` and `about` views. A subclass overrides one or both and inherits the entire screen. Every string in a
+  descriptor is resolved server-side, where the session language and the label catalogue are
+* feat(application-info): new `#application-info` module — the pure `buildApplicationInfo()` normalizes a
+  `package.json`-shaped manifest (display name derived from the package name, author contact stripped, a `git+…​.git`
+  repository URL reduced to a browser-openable homepage) and applies the `TI_WEB_APP_NAME` / `TI_WEB_APP_VERSION` /
+  `TI_WEB_APP_RELEASE_DATE` overrides; `readApplicationManifest()` is the one impure half and returns `{}` rather
+  than throwing, so a missing or malformed manifest cannot take a request down
+* feat(web-application): register the `about` fragment, and add `buildComponentsConfig( session )` supplying a
+  default sidebar user menu (Profile · About · sign-out) so a consuming application gets a working user menu without
+  configuring one
+* feat(static): new `frame-about.html` and a rebuilt `frame-profile.html` — content-free renderers over the
+  descriptor — plus the `tiScreenProfile` / `tiScreenAbout` Alpine components. The About screen's release, component
+  and runtime sections are assembled client-side, where `getLabel` takes a fallback, which is what keeps them
+  readable inside an application that loads only its own label catalogue
+* feat(static): add the reusable `.ti-identity-*` / `.ti-info-*` CSS primitives (identity header with avatar or app
+  mark, and the two-up grid of label/value sections), plus `.ti-kv-value.mono` / `.mono`-and-`.muted` modifiers
+* feat(localization): add `interface.profile.*`, `interface.about.*`, `interface.topbar.profile|about` and
+  `interface.user-menu.*` defaults in en/bg
+* fix(web-application): a framework-owned screen that resolves its own strings server-side would render the
+  not-found placeholder inside a consuming application, because an application configures exactly one labels path —
+  its own — and never loads `web-server-labels.json`. Every such lookup now passes a readable English literal as the
+  `getLabel` fallback added in `@ti-engine/core` 1.10.0 (**requires it**), rather than comparing the result against
+  a hard-coded copy of core's placeholder string
+* build(release): bump package version from `1.20.1` to `1.21.0`
+
 ## Version 1.20.1
 
 * fix(types): emit `/// <reference types="node" />` into `web-server.d.ts`, which names `node:http`.

package/README.md

@@ -18,6 +18,7 @@ The web server configuration (host, port, TLS, cookies, etc.) is normally provid
 * `TI_WEB_TLS_CERT_PATH` / `TI_WEB_TLS_KEY_PATH` override the TLS certificate/key paths (only used when TLS is enabled).
 * `TI_WEB_COOKIE_SECRET` sets the session cookie signing secret. Set a stable, private value for durable sessions and multi-replica deployments (otherwise a random per-process value is used).
 * `TI_WEB_AUTH_METHODS` (comma-separated) **replaces** the enabled authentication methods (`auth.enabledMethods`), e.g. `openid-google` or `local,openid-google`.
+* `TI_WEB_AUTH_LOCAL_USERS_PATH` overrides the local user directory's file path (`auth.local.usersPath`), which backs `local` sign-in. An explicitly empty value means *no directory*, so every local sign-in is refused. See [Local (username/password) authentication](#local-usernamepassword-authentication).
 * `TI_WEB_AUTH_ADMINS` (comma-separated) **replaces** the admin allowlist (`auth.admins`). Entries are matched against the session user's user ID, username or email, so an OpenID deployment lists emails. An explicitly empty value means *no admins*.
 * `TI_WEB_TRUSTED_ORIGINS` (comma-separated) **replaces** the trusted request origins (`trustedOrigins`) — needed behind proxies that do not present the real external origin.
 * `TI_WEB_STATIC_MAX_AGE` (whole seconds) overrides `staticCache.maxAge`. See [Static asset caching](#static-asset-caching).
@@ -26,6 +27,57 @@ The web server configuration (host, port, TLS, cookies, etc.) is normally provid
 
 OpenID Connect providers are configured with their own variables — `TI_AZURE_AUTH_CLIENT_ID` / `TI_AZURE_AUTH_CLIENT_SECRET` / `TI_AZURE_AUTH_CALLBACK_URL` / `TI_AZURE_AUTH_DISCOVERY_URL`, and the `TI_GCLOUD_AUTH_*` equivalents. A callback URL may be given either as the full absolute URL registered with the provider (`https://your-host/login/azure-callback`) or as a path (`/login/azure-callback`): the server always listens on the path, while the `redirect_uri` sent to the provider is the absolute value verbatim if one was configured, and otherwise assembled from the request's forwarded protocol/host.
 
+## Authentication and authorization
+
+`TiWebServer#augmentSession` is the hook through which an application derives its own session roles — from an identity store, the org chart, or wherever a deployment keeps that mapping — once per login, before the framework's own additive `admin` role (`auth.admins`, see [Environment variables](#environment-variables)) is applied on top; the default is a no-op that returns the session unchanged. Throwing from the hook refuses the sign-in rather than admitting a session the application could not map to a principal: the framework destroys the freshly regenerated session so nothing usable survives the refusal, the login handler responds `401`, and the error handler sends the browser back to the login page with the exception code in the `?error=` query parameter — the same path a failed OpenID callback takes, regardless of which auth method was used.
+
+## Local (username/password) authentication
+
+`local` is one of the configurable `auth.enabledMethods` sign-in methods (see [Environment variables](#environment-variables), `TI_WEB_AUTH_METHODS`). It is backed by a JSON file of user records — there is no built-in account of any kind.
+
+### The users file
+
+`auth.local.usersPath` (override: `TI_WEB_AUTH_LOCAL_USERS_PATH`) points at a JSON file holding an array of records:
+
+```json
+[
+  {
+    "username": "jdoe",
+    "email": "jane.doe@example.com",
+    "name": "Jane Doe",
+    "passwordHash": "scrypt$16384$8$1$<salt-base64>$<hash-base64>"
+  }
+]
+```
+
+* `username`, `email`, `name` and `passwordHash` are required. `email` is required because a consuming application resolves the signed-in identity by it, the same way it would for an OpenID identity — a record with no email cannot reach an application at all.
+* `userID` is optional. When omitted, one is derived from the username, so it stays stable across restarts and logins; supply it explicitly only when something else needs to match a specific value (e.g. `auth.admins`).
+* `disabled: true` keeps the record (and its username) in the file while refusing every sign-in for it.
+
+Generate `passwordHash` with the bundled CLI. It reads the password from **stdin**, never an argument, so it never lands in shell history or a process listing (`ps`), and it never echoes the password back:
+
+```bash
+npm run hash-password -w @ti-engine/web-framework
+```
+
+Type or pipe the password, then EOF; only the resulting hash is written to stdout.
+
+That `npm run` form only works inside this monorepo (it is a workspace script). A consumer of the published `@ti-engine/web-framework` package has no `bin` entry to run it by name — the script ships under `bin/build/` regardless, so invoke it by its path inside `node_modules` instead:
+
+```bash
+node ./node_modules/@ti-engine/web-framework/bin/build/hash-password.js
+```
+
+### The file is the source of truth
+
+On every boot, the file is read and reconciled into the running directory: an added record starts working, a changed `passwordHash` takes effect, and — this is the point — **a record removed from the file is removed from the directory**, revoking that user's access on the next restart. Editing the file and restarting is the whole revocation mechanism; there is no separate delete action.
+
+### Every failure refuses rather than admits
+
+`local` enabled with no `auth.local.usersPath` configured, a file that cannot be read, a file that is not valid JSON, or a file that yields zero valid records after validation — each of these logs a startup **WARNING** and refuses every local sign-in, rather than admitting one or falling back to a default. A failed *read* deliberately does not reconcile, so a temporarily broken volume mount leaves previously stored records untouched instead of wiping them; those records stay inert (unused) while the load keeps failing, because sign-ins are refused anyway.
+
+**There is no rate limiting, no lockout after repeated failures, and no password policy.** Treat `local` on an internet-facing deployment as a deliberate risk until those exist.
+
 ## Static asset caching
 
 Everything under `/static` is served with a `Cache-Control` policy configured by the `staticCache` block:

package/bin/build/hash-password.js

@@ -0,0 +1,36 @@
+/*
+ * The ti-engine is an open source, free to use—both for personal and commercial projects—framework for the creation of microservice-based solutions using node.js.
+ * Copyright © 2021-2026 Boris Kostadinov <kostadinov.boris@gmail.com>
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+ * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+/**
+ * Generates a password hash for a local-users file entry.
+ *
+ * Usage: npm run hash-password -w @ti-engine/web-framework
+ *
+ * The password is read from stdin, never from an argument: an argv value lands in shell history and is visible to
+ * every other user on the machine through `ps`. Only the resulting hash is written to stdout — the password itself
+ * is never echoed, logged, or written to a file by this tool.
+ */
+
+const directory = require( "#local-user-directory" );
+
+let input = "";
+process.stdin.setEncoding( "utf8" );
+process.stdin.on( "data", ( chunk ) => {
+    input += chunk;
+} );
+process.stdin.on( "end", () => {
+    // Strip only the trailing newline a shell or editor adds; a password may legitimately contain spaces.
+    const password = input.replace( /\r?\n$/, "" );
+    if ( password.length === 0 ) {
+        process.stderr.write( "hash-password: no password on stdin\n" );
+        process.exit( 1 );
+    }
+    process.stdout.write( directory.hashPassword( password ) + "\n" );
+} );

package/bin/config/local-users.example.json

@@ -0,0 +1,8 @@
+[
+  {
+    "username": "REPLACE-ME",
+    "email": "replace-me@example.com",
+    "name": "Replace Me",
+    "passwordHash": "GENERATE-WITH-npm-run-hash-password"
+  }
+]

package/bin/localization/web-server-labels.json

@@ -2,6 +2,10 @@
   "interface": {
     "default": {
       "login": {
+        "error-sign-in-failed": {
+          "en": "We couldn't sign you in. Check your credentials, or contact your administrator if your account is not set up for this application.",
+          "bg": "Неуспешно влизане. Проверете данните си за достъп или се свържете с администратора, ако акаунтът ви не е настроен за това приложение."
+        },
         "password": {
           "en": "Password",
           "bg": "Парола"
@@ -23,6 +27,166 @@
           "bg": "Потребител"
         }
       }
+    },
+    "topbar": {
+      "profile": {
+        "en": "My Profile",
+        "bg": "Моят профил"
+      },
+      "about": {
+        "en": "About",
+        "bg": "Информация"
+      }
+    },
+    "user-menu": {
+      "profile": {
+        "en": "Your profile",
+        "bg": "Вашият профил"
+      },
+      "about": {
+        "en": "About",
+        "bg": "Информация"
+      },
+      "logout": {
+        "en": "Logout",
+        "bg": "Изход"
+      }
+    },
+    "profile": {
+      "eyebrow": {
+        "en": "Account",
+        "bg": "Профил"
+      },
+      "title": {
+        "en": "My Profile",
+        "bg": "Моят профил"
+      },
+      "intro": {
+        "en": "Your information as it is recorded in the system. This screen is read-only — to have something corrected, contact your manager.",
+        "bg": "Вашата информация, както е записана в системата. Екранът е само за преглед — за корекция се обърнете към вашия мениджър."
+      },
+      "empty-title": {
+        "en": "Profile unavailable",
+        "bg": "Профилът е недостъпен"
+      },
+      "empty-desc": {
+        "en": "Your profile information could not be loaded. Try again in a moment.",
+        "bg": "Информацията за профила не можа да бъде заредена. Опитайте отново след малко."
+      },
+      "section-account": {
+        "en": "Account",
+        "bg": "Профил"
+      },
+      "section-access": {
+        "en": "Access",
+        "bg": "Достъп"
+      },
+      "field-name": {
+        "en": "Full name",
+        "bg": "Име"
+      },
+      "field-username": {
+        "en": "Username",
+        "bg": "Потребител"
+      },
+      "field-email": {
+        "en": "E-mail",
+        "bg": "Имейл"
+      },
+      "field-user-id": {
+        "en": "User ID",
+        "bg": "Потребителски ID"
+      },
+      "field-language": {
+        "en": "Language",
+        "bg": "Език"
+      },
+      "field-roles": {
+        "en": "Roles",
+        "bg": "Роли"
+      }
+    },
+    "about": {
+      "eyebrow": {
+        "en": "Application",
+        "bg": "Приложение"
+      },
+      "title": {
+        "en": "About",
+        "bg": "Информация"
+      },
+      "intro": {
+        "en": "The application you are running, the release it is built from, and the ti-engine components behind it.",
+        "bg": "Приложението, което използвате, версията, от която е изградено, и компонентите на ti-engine зад него."
+      },
+      "empty-title": {
+        "en": "Details unavailable",
+        "bg": "Информацията е недостъпна"
+      },
+      "empty-desc": {
+        "en": "The application details could not be loaded. Try again in a moment.",
+        "bg": "Информацията за приложението не можа да бъде заредена. Опитайте отново след малко."
+      },
+      "released": {
+        "en": "Released",
+        "bg": "Издадена на"
+      },
+      "section-release": {
+        "en": "Release",
+        "bg": "Версия"
+      },
+      "section-components": {
+        "en": "Framework components",
+        "bg": "Компоненти на платформата"
+      },
+      "section-components-desc": {
+        "en": "The ti-engine packages this application is built on.",
+        "bg": "Пакетите на ti-engine, върху които е изградено приложението."
+      },
+      "section-runtime": {
+        "en": "Runtime",
+        "bg": "Среда"
+      },
+      "section-runtime-desc": {
+        "en": "Visible to administrators only.",
+        "bg": "Видимо само за администратори."
+      },
+      "field-version": {
+        "en": "Version",
+        "bg": "Версия"
+      },
+      "field-release-date": {
+        "en": "Release date",
+        "bg": "Дата на издаване"
+      },
+      "field-license": {
+        "en": "License",
+        "bg": "Лиценз"
+      },
+      "field-author": {
+        "en": "Author",
+        "bg": "Автор"
+      },
+      "field-package": {
+        "en": "Package",
+        "bg": "Пакет"
+      },
+      "field-homepage": {
+        "en": "Homepage",
+        "bg": "Уебсайт"
+      },
+      "runtime-node": {
+        "en": "Node.js",
+        "bg": "Node.js"
+      },
+      "runtime-platform": {
+        "en": "Platform",
+        "bg": "Платформа"
+      },
+      "runtime-application": {
+        "en": "Application ID",
+        "bg": "ID на приложението"
+      }
     }
   }
-}
+}

package/bin/static/fragments/components/component-sidebar.html

@@ -29,5 +29,30 @@
             </span>
             <span class="ti-sidebar-item-label" x-text="theme === 'daylight' ? 'Glass Theme' : 'Daylight Theme'">Toggle Theme</span>
         </button>
+
+        <!--
+            User menu. Its entries come from `componentsConfig.userProfileMenu` in the /app/config payload, which
+            TiWebAppManager#buildComponentsConfig fills with the framework's own screens (Profile, About) plus
+            sign-out — so this menu works in a consuming application that configures nothing.
+        -->
+        <ti-component-sidebar-flyout-placeholder config-key="userProfileMenu">
+            <button class="ti-sidebar-user" type="button"
+                    x-on:click.stop="toggle()"
+                    x-on:ti-close-all-flyout="close()"
+                    x-bind:aria-expanded="isOpen"
+                    x-bind:aria-controls="$id( 'component-flyout' )"
+                    x-ref="flyoutButton"
+                    x-text-label:data-tip="interface.topbar.user-profile"
+                    data-tip="Your profile">
+                <span class="ti-avatar sm"
+                      x-bind:style="$store.tiToolbox.generateAvatarStyle( $store.tiApplication.user && $store.tiApplication.user.userID, $store.tiApplication.user && $store.tiApplication.user.name )"
+                      aria-hidden="true"
+                      x-text="( ( $store.tiApplication.user && $store.tiApplication.user.name ) || '?' ).charAt( 0 ).toUpperCase()">?</span>
+                <span class="ti-sidebar-user-text">
+                    <span class="ti-sidebar-user-name" x-text="( $store.tiApplication.user && $store.tiApplication.user.name ) || ''"></span>
+                    <span class="ti-sidebar-user-sub" x-text="( $store.tiApplication.user && $store.tiApplication.user.email ) || ''"></span>
+                </span>
+            </button>
+        </ti-component-sidebar-flyout-placeholder>
     </div>
 </nav>

package/bin/static/fragments/frame-about.html

@@ -0,0 +1,96 @@
+<!--
+    About screen — what this application is and which build of it you are looking at.
+
+    Like the Profile screen, this is a content-free renderer over a server descriptor: the identity block comes
+    from the top-level fields of TiWebAppManager#getApplicationInfo, and everything below it is the normalized
+    section list tiScreenAbout assembles (release facts, ti-engine component versions, admin-only runtime facts,
+    then whatever sections the application contributed).
+
+    Alpine runs in CSP mode: no inline style attributes and no optional chaining in expressions.
+-->
+<div class="ti-page" x-data="tiScreenAbout">
+
+    <div class="ti-page-head">
+        <div class="ti-page-eyebrow" x-text-label="interface.about.eyebrow">Application</div>
+        <h1 class="ti-page-title" x-text-label="interface.about.title">About</h1>
+        <p class="ti-page-subtitle" x-text-label="interface.about.intro">The application you are running, the release
+            it is built from, and the ti-engine components behind it.</p>
+    </div>
+
+    <template x-if="!busy && !application">
+        <div class="ti-panel">
+            <div class="ti-empty-state">
+                <div class="ti-empty-state-icon" aria-hidden="true">
+                    <span class="ti-icon info-circle xl"></span>
+                </div>
+                <div class="ti-empty-state-title" x-text-label="interface.about.empty-title">Details unavailable</div>
+                <div class="ti-empty-state-desc" x-text-label="interface.about.empty-desc">The application details
+                    could not be loaded. Try again in a moment.</div>
+            </div>
+        </div>
+    </template>
+
+    <template x-if="application">
+        <div>
+
+            <!-- Identity header — app mark, name, version pill and the one-line description. -->
+            <section class="ti-panel">
+                <div class="ti-identity">
+                    <div class="ti-identity-mark" aria-hidden="true">
+                        <span x-text="applicationInitial()"></span>
+                    </div>
+                    <div class="ti-identity-meta">
+                        <div class="ti-identity-name">
+                            <span x-text="application.name"></span>
+                            <span class="ti-tag mono" x-show="application.version"
+                                  x-text="versionTag()"></span>
+                        </div>
+                        <div class="ti-identity-caption" x-show="application.description"
+                             x-text="application.description"></div>
+                    </div>
+                    <div class="ti-identity-aside">
+                        <span class="ti-status-pill muted" x-show="application.releaseDate">
+                            <span class="ti-icon calendar-blank xs" aria-hidden="true"></span>
+                            <span x-text="releaseDateText()"></span>
+                        </span>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Sections — release facts, components, runtime (admin only), then application-contributed ones. -->
+            <div class="ti-info-sections">
+                <template x-for="(section, sectionIndex) in sections" x-bind:key="sectionIndex">
+                    <section class="ti-panel ti-info-section" x-bind:class="section.wide ? 'wide' : ''">
+                        <div class="ti-panel-head bar">
+                            <div class="ti-panel-head-icon">
+                                <span class="ti-icon md" x-bind:class="section.icon" aria-hidden="true"></span>
+                            </div>
+                            <div class="ti-panel-head-text">
+                                <div class="ti-panel-title" x-text="section.title"></div>
+                                <div class="ti-panel-subtitle" x-show="section.description"
+                                     x-text="section.description"></div>
+                            </div>
+                        </div>
+                        <div class="ti-info-grid">
+                            <template x-for="(item, itemIndex) in section.items" x-bind:key="itemIndex">
+                                <div class="ti-info-item" x-bind:class="item.wide ? 'wide' : ''">
+                                    <span class="ti-kv-label" x-text="item.label"></span>
+                                    <template x-if="item.href">
+                                        <a class="ti-kv-value ti-info-link" x-bind:href="item.href"
+                                           target="_blank" rel="noopener noreferrer" x-text="item.value"></a>
+                                    </template>
+                                    <template x-if="!item.href">
+                                        <span class="ti-kv-value" x-bind:class="item.valueClass"
+                                              x-text="item.value"></span>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </section>
+                </template>
+            </div>
+
+        </div>
+    </template>
+
+</div>

package/bin/static/fragments/frame-login.html

@@ -12,7 +12,12 @@
         <!-- Login card -->
         <div class="ti-login-card">
             <!-- Error message -->
-            <div id="ti-error" class="ti-login-error"></div>
+            <div id="ti-error"
+                 class="ti-login-error"
+                 x-data="tiLoginError"
+                 x-bind:class="{ visible: hasError }"
+                 role="alert"
+                 x-text-label="interface.default.login.error-sign-in-failed"></div>
 
             <!--ti-auth-method:local-->
             <!-- Local auth form -->

package/bin/static/fragments/frame-profile.html

@@ -1,3 +1,103 @@
-<div>
-    <span>Profile</span>
-</div>
+<!--
+    Profile screen — a read-only view of the signed-in user's own information.
+
+    The markup is deliberately content-free: it renders the descriptor returned by
+    TiWebAppManager#getProfileInfo (`{ identity, sections }`), which the application overrides to decide WHAT is
+    shown while inheriting HOW it is shown. Every string in the descriptor arrives display-ready from the server,
+    so nothing here formats or translates data.
+
+    Alpine runs in CSP mode: no inline style attributes and no optional chaining in expressions — all shaping is
+    done in tiScreenProfile before the values reach the template.
+-->
+<div class="ti-page" x-data="tiScreenProfile">
+
+    <div class="ti-page-head">
+        <div class="ti-page-eyebrow" x-text-label="interface.profile.eyebrow">Account</div>
+        <h1 class="ti-page-title" x-text-label="interface.profile.title">My Profile</h1>
+        <p class="ti-page-subtitle" x-text-label="interface.profile.intro">Your information as it is recorded in the
+            system. This screen is read-only — to have something corrected, contact your manager.</p>
+    </div>
+
+    <template x-if="!busy && !profile">
+        <div class="ti-panel">
+            <div class="ti-empty-state">
+                <div class="ti-empty-state-icon" aria-hidden="true">
+                    <span class="ti-icon user xl"></span>
+                </div>
+                <div class="ti-empty-state-title" x-text-label="interface.profile.empty-title">Profile unavailable</div>
+                <div class="ti-empty-state-desc" x-text-label="interface.profile.empty-desc">Your profile information
+                    could not be loaded. Try again in a moment.</div>
+            </div>
+        </div>
+    </template>
+
+    <template x-if="profile">
+        <div>
+
+            <!-- Identity header — avatar, name, meta line and the status pills beside it. -->
+            <section class="ti-panel">
+                <div class="ti-identity">
+                    <div class="ti-avatar xl" x-bind:style="avatarStyle()" aria-hidden="true">
+                        <span x-text="avatarInitial()"></span>
+                    </div>
+                    <div class="ti-identity-meta">
+                        <div class="ti-identity-name">
+                            <span x-text="profile.identity.name"></span>
+                            <template x-if="profile.identity.badge">
+                                <span class="ti-tag" x-bind:class="profile.identity.badge.tone"
+                                      x-text="profile.identity.badge.text"></span>
+                            </template>
+                        </div>
+                        <div class="ti-identity-sub" x-show="profile.identity.subtitle"
+                             x-text="profile.identity.subtitle"></div>
+                        <div class="ti-identity-caption" x-show="profile.identity.caption"
+                             x-text="profile.identity.caption"></div>
+                    </div>
+                    <div class="ti-identity-aside">
+                        <template x-for="(tag, tagIndex) in profile.identity.tags" x-bind:key="tagIndex">
+                            <span x-bind:class="tag.pillClass">
+                                <span class="dot" x-show="tag.dot"></span>
+                                <span x-text="tag.text"></span>
+                            </span>
+                        </template>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Sections — one panel per titled group of label/value pairs. -->
+            <div class="ti-info-sections">
+                <template x-for="(section, sectionIndex) in profile.sections" x-bind:key="sectionIndex">
+                    <section class="ti-panel ti-info-section" x-bind:class="section.wide ? 'wide' : ''">
+                        <div class="ti-panel-head bar">
+                            <div class="ti-panel-head-icon">
+                                <span class="ti-icon md" x-bind:class="section.icon" aria-hidden="true"></span>
+                            </div>
+                            <div class="ti-panel-head-text">
+                                <div class="ti-panel-title" x-text="section.title"></div>
+                                <div class="ti-panel-subtitle" x-show="section.description"
+                                     x-text="section.description"></div>
+                            </div>
+                        </div>
+                        <div class="ti-info-grid">
+                            <template x-for="(item, itemIndex) in section.items" x-bind:key="itemIndex">
+                                <div class="ti-info-item" x-bind:class="item.wide ? 'wide' : ''">
+                                    <span class="ti-kv-label" x-text="item.label"></span>
+                                    <template x-if="item.href">
+                                        <a class="ti-kv-value ti-info-link" x-bind:href="item.href"
+                                           target="_blank" rel="noopener noreferrer" x-text="item.value"></a>
+                                    </template>
+                                    <template x-if="!item.href">
+                                        <span class="ti-kv-value" x-bind:class="item.valueClass"
+                                              x-text="item.value"></span>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </section>
+                </template>
+            </div>
+
+        </div>
+    </template>
+
+</div>