v0.2.00-alpha

A box on the phone types into the car's text field. Media apps with library search show a list of results to pick from, searching a second after you stop typing.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,59 @@
+name: Bug report
+description: Something in Gearslip broke or behaves wrong.
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for reporting. Check the [open issues](https://github.com/Seb3thehacker/gearslip/issues) first, in case someone has already reported it.
+
+  - type: input
+    id: car
+    attributes:
+      label: Car
+      description: Make, model, and year.
+      placeholder: 2019 Honda Civic
+    validations:
+      required: true
+
+  - type: dropdown
+    id: head-unit
+    attributes:
+      label: Head unit
+      options:
+        - The one the car came with
+        - A factory unit from another car
+        - An aftermarket unit (Pioneer, Kenwood, Alpine, and so on)
+        - A homemade or open-source unit, such as LIVI
+        - I don't know
+    validations:
+      required: true
+
+  - type: dropdown
+    id: connection
+    attributes:
+      label: Connection
+      options:
+        - USB cable
+        - Wireless dongle
+    validations:
+      required: true
+
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened
+      description: What you did, what you expected, and what happened instead.
+    validations:
+      required: true
+
+  - type: textarea
+    id: log
+    attributes:
+      label: Log
+      description: |
+        On the phone, open Logs from Gearslip's home screen and tap Share log. Drag the file here.
+        The log records your phone, its Android version, the Gearslip version, and why the connection ended.
+      placeholder: Drop the log file here.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/car_report.yml

@@ -0,0 +1,65 @@
+name: Car report
+description: Tell us whether Gearslip works in your car, so others know before they install.
+labels: ["car report"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Reports from working cars help as much as reports from broken ones.
+
+  - type: input
+    id: car
+    attributes:
+      label: Car
+      description: Make, model, and year.
+      placeholder: 2019 Honda Civic
+    validations:
+      required: true
+
+  - type: dropdown
+    id: head-unit
+    attributes:
+      label: Head unit
+      options:
+        - The one the car came with
+        - A factory unit from another car
+        - An aftermarket unit (Pioneer, Kenwood, Alpine, and so on)
+        - A homemade or open-source unit, such as LIVI
+        - I don't know
+    validations:
+      required: true
+
+  - type: dropdown
+    id: connection
+    attributes:
+      label: Connection
+      options:
+        - USB cable
+        - Wireless dongle
+    validations:
+      required: true
+
+  - type: dropdown
+    id: result
+    attributes:
+      label: Does it work?
+      options:
+        - Yes, everything I tried works
+        - Partly. It connects, but something is wrong
+        - No, it never connects
+    validations:
+      required: true
+
+  - type: textarea
+    id: notes
+    attributes:
+      label: Notes
+      description: What you tried, and anything that didn't work.
+
+  - type: textarea
+    id: log
+    attributes:
+      label: Log
+      description: |
+        Needed if the car doesn't work. On the phone, open Logs from Gearslip's home screen and tap Share log. Drag the file here.
+      placeholder: Drop the log file here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,23 @@
+name: Feature request
+description: Suggest something Gearslip should do.
+labels: ["enhancement"]
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: What do you want to do?
+      description: Describe the problem, not the solution. "I can't see my next turn while music plays" helps more than "add a turn widget."
+    validations:
+      required: true
+
+  - type: textarea
+    id: idea
+    attributes:
+      label: How should it work?
+      description: Your idea for a fix, if you have one.
+
+  - type: textarea
+    id: apps
+    attributes:
+      label: Apps involved
+      description: Any apps this touches, such as a map or music app.

.github/workflows/release.yml

@@ -0,0 +1,48 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: "21"
+
+      - uses: gradle/actions/setup-gradle@v4
+
+      - name: Write signing key and properties
+        run: |
+          echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 -d > gearslip-release.jks
+          cat > keystore.properties <<EOF
+          storeFile=gearslip-release.jks
+          storePassword=${{ secrets.KEYSTORE_STORE_PASSWORD }}
+          keyAlias=${{ secrets.KEYSTORE_KEY_ALIAS }}
+          keyPassword=${{ secrets.KEYSTORE_KEY_PASSWORD }}
+          EOF
+
+      - name: Build release APK
+        run: ./gradlew :gearslip:assembleRelease
+
+      - name: Locate APK
+        id: apk
+        run: |
+          # The build moves its APKs to <root>/build/Gearslip-<variant>.apk (see renameApk).
+          apk=build/Gearslip-release.apk
+          test -f "$apk" || { echo "no APK at $apk"; ls -R build | head -50; exit 1; }
+          echo "path=$apk" >> "$GITHUB_OUTPUT"
+
+      - name: Create release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: ${{ steps.apk.outputs.path }}
+          generate_release_notes: true

.gitignore

@@ -6,13 +6,27 @@
 /build
 local.properties
 
-# Reference checkouts only - never referenced by the build; safe to delete entirely.
+# Keys
+*.jks
+*.keystore
+keystore.properties
+
+# Native build cache.
+.cxx/
+
+# Testing
 /cloned-repos
+docs-internal/
 
-# The head unit certificate. Never committed or shared beyond who Seb sends it to directly.
+# Internal
-/cert
+*.pdf
+todo.md
+logs/
 
-# Local investigation script; not meant for the public repo.
+# For AI code
-/docs/cert-sweep.sh
+.claude/
-archive/
 CLAUDE.md
+
+# Other
+archive/
+.wrangler/

CONTRIBUTING.md

@@ -0,0 +1,51 @@
+# Contributing to Gearslip
+
+Thanks for helping. Bug reports from real cars are the most useful thing you can send, so
+start there if you aren't sure where to begin.
+
+## Reporting a bug
+
+Open an issue on [GitHub](https://github.com/Seb3thehacker/gearslip/issues) and include:
+
+- your car's make, model, and year, and whether the head unit is the original one; and
+- the log from the drive. Open Logs on the phone app's home screen and tap Share log.
+
+The log records your phone, its Android version, the Gearslip version, the head unit, and
+why the connection ended. Most car bugs can't be fixed without it. Head units often report
+only a part number, so the log can't name your car for you.
+
+## Building
+
+You need Android Studio, or the Android SDK with JDK 21. Gradle downloads the NDK, CMake,
+and the speech library on the first build.
+
+```
+./gradlew :gearslip:assembleDebug
+```
+
+The APK lands at `build/Gearslip-debug.apk`. It installs as Gearslip Dev, next to the
+regular app.
+
+## Pull requests
+
+Work happens on the `experimental` branch, which merges into `main` at each release. Base your
+branch on `experimental`, and open your pull request against it.
+
+- Keep each pull request to one change, and explain the problem it solves.
+- Say how you tested it: which car or head unit, which phone, and which apps.
+- Code written with AI tools is welcome. Read it, test it, and stand behind it as you would
+  your own.
+- Gearslip asks for no adb, root, or Shizuku. A feature must work with ordinary Android
+  permissions and on-device consent dialogs.
+
+## Writing
+
+Text that users read, such as screens, release notes, and docs, follows Strunk's
+[*The Elements of Style*](https://www.gutenberg.org/ebooks/37134). In short: use the active
+voice, state things positively, cut needless words, and use the serial comma.
+
+## License
+
+Gearslip is licensed under AGPL-3.0, and your contributions are too. The author also sells a
+commercial license, described in [NOTICE.md](NOTICE.md). By opening a pull request, you
+agree that your contribution may be offered under that license as well.

NOTICE.md

@@ -1,16 +1,9 @@
 # License
 
-Gearslip is licensed under the **GNU Affero General Public License v3.0** (see `LICENSE`).
+Gearslip is licensed under the GNU Affero General Public License v3.0. The full text is in `LICENSE`.
 
-In short: you're free to use, run, and modify it. If you modify it — or run a modified
+You may use, run, and modify Gearslip freely. If you distribute a modified version, or let others use one over a network, you must publish your changes under the same license. The obligation follows the code even when you hand out no binary, which suits software that runs as a background service.
-version as a service others use over a network — the AGPL requires you to make your source
-changes available on the same terms. That obligation follows the code even when you don't
-redistribute a binary, which is what makes the AGPL fit for something that can run as a
-background service.
 
 ## Commercial licensing
 
-If the AGPL's terms don't work for you — for example, you want to use Gearslip privately
+If the AGPL's terms don't work for you, the author sells a separate commercial license. The usual case is a company that wants to use Gearslip privately without publishing its changes. Terms, including any limits on modification, are set case by case. Contact me on Matrix; the address is on my profile.
-without being required to publish your changes — a separate commercial license is available
-directly from the author. Terms (including any restrictions on modification) are set on a
-case-by-case basis. Contact me though Matrix (on my profile) to discuss one.

README.md

@@ -2,38 +2,98 @@
 
 # Gearslip
 
-Bring any app to your car screen.
+An Android Auto alternative built for everyone.
 
-## What this is
+## What Gearslip is
 
-Gearslip is a phone-side Android Auto client. It speaks the Android Auto protocol directly
+Gearslip is an Android Auto client for the phone. It speaks the Android Auto protocol
-to a car head unit over USB and acts as a **Car App Library host**: apps that ship an
+directly to a car head unit over USB, with no Google software in the path. Gearslip acts
-Android Auto car UI (navigation and media apps) hand Gearslip a template, and Gearslip
+as a Car App Library host: an app that ships a car interface hands Gearslip a template,
-renders it natively on the car screen, full quality, no phone-screen mirroring. A separate
+and Gearslip renders that template natively on the car screen. Nothing is mirrored from
-screen-sharing mode is included for apps that don't ship a car UI at all.
+the phone. For apps without a car interface, Gearslip offers a separate screen-sharing
+mode.
 
-Built by reverse-engineering the protocol for interoperability - getting a non-Google client
+| | |
-talking to a car head unit that only expects Google's own app.
+|---|---|
+| ![The launcher, with apps grouped into phone, maps, music, and messaging](docs/screenshots/launcher.png) | ![Vela Maps giving turn-by-turn directions, with the music player beside the map](docs/screenshots/navigation.png) |
+| Apps sorted by kind. A check marks the ones that work. | Vela Maps navigating, with the player beside it. |
+| ![ViVi Music's song, art, and controls in Gearslip's player](docs/screenshots/music.png) | ![A new message card over Organic Maps](docs/screenshots/message.png) |
+| ViVi Music in Gearslip's player. | A new message, read aloud at a tap, over the map. |
+| ![The dashboard, with the weather, the next calendar event, and recent notifications](docs/screenshots/dashboard.png) | ![DuckDuckGo open in Gearslip's web browser](docs/screenshots/web.png) |
+| The weather, your next event, and what you missed. | Browse the web while parked. |
+
+## Features
+
+- **Phone calls.** Dial from a keypad, or search your contacts, then confirm before the
+  call goes out.
+- **Navigation.** Gearslip hosts real Car App Library map apps on the car screen.
+  Organic Maps, OsmAnd, and Flitsmeister work today. Vela runs, with rough
+  edges.
+- **Music.** Browse, play, and queue tracks from a car-enabled media app, with a Now
+  Playing view, an Up Next queue, and lyrics. Type a search, and apps that accept one
+  play the best match.
+- **The web.** A browser template with its own on-screen keyboard, for anything that
+  doesn't ship a car interface of its own.
+- **Weather and the day ahead.** A dashboard screen shows the week's calendar next to
+  the current and coming weather.
+- **Messages.** New messages appear as a small card on the car screen. Gearslip reads
+  each one aloud, and you reply by voice or with a quick reply. Music pauses while
+  Gearslip speaks or listens. Speech runs on the phone, so it needs no Google account.
+- **Notifications.** Only messages, missed calls, alarms, and reminders interrupt you.
+  The rest wait on the dashboard.
+- **Your apps, your order.** The launcher groups apps by kind: phone, maps, music,
+  messaging, and the rest. Press and hold an app to move it.
+- **Car controls.** Steering wheel buttons, control knobs, and D-pads all work.
+- **Themes.** Choose flat buttons or skeuomorphic ones that look like real keys.
 
 ## Status
 
-Real progress, with one hard limit that's worth knowing before you build on this:
+- **The connection is wired only, for now.** Plug the phone into the head unit's USB port;
+  Gearslip does not yet offer a wireless option.
+- **Setup walks you through it.** First launch asks for the Android Auto certificate,
+  then one permission at a time, each with a plain reason and an Allow or Skip. A help
+  screen inside the car answers anything setup didn't cover.
+- **Templated apps work.** Gearslip renders all 16 template types that the Car App
+  Library defines, and it draws its own keyboard for search, sign-in, and text fields.
+  It has been tested against several real navigation and media apps.
+- **Gearslip works with [LIVI](https://github.com/f-io/LIVI),** the open-source head unit
+  used in homemade car dashboards.
+- **Some apps refuse Gearslip.** Spotify, Waze, and Google Messages use a version of
+  Google's car library that accepts only Android Auto itself. Spotify still plays through
+  Gearslip's own player.
+- **Gearslip works best with cars from before 2020.** Some newer head units reject its
+  certificate.
+- **Calls use the car's Bluetooth,** as they do in Android Auto. Pair the phone with the
+  car to hear calls through its speakers.
+- **Audio reaches the car by capturing playback, not by mirroring the screen.** Android
+  shows a screen-share consent dialog for this, even though Gearslip never reads the
+  screen; it is the only way an ordinary app can capture another app's audio. The dialog
+  appears once per drive.
+- **Gearslip needs no adb, root, or Shizuku.** Every feature relies on an ordinary
+  Android permission or an on-device consent dialog. The setup guide offers two optional
+  adb commands: one removes the audio dialog for good, and the other keeps notifications
+  visible while audio plays.
 
-- **Templated app hosting works.** All 16 template types the Car App Library defines are
+## Usage notes
-  rendered, including a keyboard Gearslip draws itself for search and sign-in. Verified
+
-  against several real navigation and media apps.
+Gearslip can send short notes that show which cars it works in. They stay off unless you
-- **Media playback works.** Car-enabled media apps are browsable and controllable from the
+turn them on, in setup or in Settings.
-  car UI, with lyrics and playback state, over the same host connection.
+
-- **The connection to a real head unit needs a certificate Google controls, and Gearslip
+- **When they go out.** When you open Gearslip, at most once a day, and after each drive.
-  doesn't ship one.** A head unit only accepts a phone identity that chains to Google's
+  Nothing runs in the background.
-  Automotive Link certificate authority - something only Google issues. Without one, Gearslip
+- **What they carry.** The Gearslip version, plus whatever you tick: the Android version
-  still runs and renders everything correctly against a debug harness, but a real car will
+  and whether the phone runs GrapheneOS, the phone model, whether a car connected that
-  reject the connection outright. See [SPIKE_FINDINGS.md](SPIKE_FINDINGS.md) for what was
+  day, and each car's head unit, model, year, screen size, and connection result.
-  tested, including one publicly-known leaked certificate that works on some older head
+  Settings shows the exact note.
-  units and is rejected by newer firmware and by Google's own reference tooling.
+- **What they leave out.** Your name, accounts, location, contacts, messages, and
-- **No adb, root, or Shizuku is required to run it.** Every feature is gated on an ordinary
+  anything you type or play.
-  Android permission or an on-device consent dialog - nothing needs privileged access, on
+- **How phones are counted.** A random number counts each phone once. The server keeps
-  the phone or in the car.
+  only a salted hash of it.
+- **Where they go.** To a Cloudflare Worker, whose code is in
+  [stats-worker/](stats-worker/). Cloudflare sees your IP address in delivering a note,
+  as it would for any website; the Worker doesn't store it.
+
+Turn the notes off, and they stop at once.
 
 ## Building
 
@@ -43,14 +103,23 @@ Real progress, with one hard limit that's worth knowing before you build on this
 
 The APK lands at `build/Gearslip-debug.apk`.
 
-## Further reading
+A release build needs a signing key. Copy `keystore.properties.example` to
+`keystore.properties`, fill in your own values, and run
+`./gradlew :gearslip:assembleRelease`. Git ignores both the properties file and the
+keystore. Without them, the debug build still works.
 
-- [SPIKE_FINDINGS.md](SPIKE_FINDINGS.md) - the certificate investigation in full: what was
+## Writing apps for Gearslip
-  tried, what a real head unit does and doesn't accept, and why.
+
-- [CUSTOM_HEADUNIT_SCOPING.md](CUSTOM_HEADUNIT_SCOPING.md) - the original scoping of what a
+[docs/BUILDING_APPS.md](docs/BUILDING_APPS.md) specifies how to write apps that Gearslip
-  custom head unit client would need.
+can render: templated apps, media apps, and the Gearslip app protocol.
+
+## Trademarks
+
+Android, Android Auto, Google Messages, and Waze are trademarks of Google LLC. Spotify is
+a trademark of Spotify AB. Gearslip is not affiliated with, endorsed by, or sponsored by
+any of these companies. All other names belong to their owners.
 
 ## License
 
-AGPL-3.0 - see [LICENSE](LICENSE). A separate commercial license is available for private
+Gearslip is licensed under AGPL-3.0; see [LICENSE](LICENSE). The author offers a separate
-use outside the AGPL's terms; see [NOTICE.md](NOTICE.md).
+commercial license for private use outside the AGPL's terms; see [NOTICE.md](NOTICE.md).

docs/BUILDING_APPS.md

@@ -0,0 +1,477 @@
+# Building apps for Gearslip
+
+Gearslip renders four kinds of app on a car screen. This page specifies all four.
+
+| Kind | What it is | Status |
+| --- | --- | --- |
+| [Templated apps](#templated-apps) | An AndroidX Car App Library app. Gearslip hosts it. | Works today |
+| [Media apps](#media-apps) | A `MediaBrowserService` that opted in to Android Auto. | Works today |
+| [Messaging apps](#messaging-apps) | An app whose notifications opted in to Android Auto. | Works today |
+| [Gearslip apps](#gearslip-apps) | A native Gearslip screen, described over binder. | Specified here; not yet implemented |
+
+Write a templated app when your app fits the Car App Library's templates, because it runs today
+and it also runs on Android Auto. Write a media app when you ship audio. Write a Gearslip app
+when you want a screen the Car App Library cannot describe.
+
+Gearslip's package name is `app.seb3thehacker.gearslip`. It declares
+`android.car.permission.TEMPLATE_RENDERER`.
+
+---
+
+## Templated apps
+
+A templated app exports a `CarAppService`, describes each screen as a `Template`, and lets the
+host draw it. Gearslip implements the host half of that protocol, so an existing Android Auto app
+needs no Gearslip-specific code. Build it against the AndroidX Car App Library as you would for
+any other host.
+
+### Letting Gearslip in
+
+Your app decides which hosts may render it, through the `HostValidator` your `CarAppService`
+returns.
+
+Gearslip declares `android.car.permission.TEMPLATE_RENDERER`. Car App Library 1.8.0-beta01
+and earlier, and 1.9.0-alpha01, accept any host holding it, so Gearslip passes the default
+validator. From 1.8.0-rc01 and 1.9.0-alpha02 the library checks that permission only on
+Android Automotive, so on a phone Gearslip passes only when your allowlist names it. Add this
+entry:
+
+```xml
+<!-- res/values/arrays.xml -->
+<array name="hosts_allowlist">
+    <item>4cc56ebdd13a54d260eca9b7e2b2ae6b30e2f225bfda8f508f0709edf084948b,app.seb3thehacker.gearslip</item>
+</array>
+```
+
+```java
+@Override
+public HostValidator createHostValidator() {
+    return new HostValidator.Builder(getApplicationContext())
+            .addAllowedHosts(R.array.hosts_allowlist)
+            .build();
+}
+```
+
+That digest belongs to Gearslip's release signing certificate. A Gearslip you built yourself
+carries your own debug key and a different digest, so read the fingerprint off the APK you
+actually installed when an allowlist entry fails to match.
+
+Write each entry as the digest first, then a comma, then the package name. The digest is the
+SHA-256 of the host's signing certificate as 64 lowercase hex characters, with no colons and no
+`0x` prefix. The builder lowercases the entry and strips spaces, but it keeps colons, so convert
+`keytool` output before pasting it:
+
+```
+keytool -list -v -keystore <keystore> -alias <alias> \
+  | grep 'SHA256:' | cut -d' ' -f3 | tr -d ':' | tr 'A-Z' 'a-z'
+```
+
+Reading the installed APK is more reliable, because it fingerprints the key that actually signed
+the build, and `apksigner` already prints the required format:
+
+```
+apksigner verify --print-certs Gearslip.apk | grep 'SHA-256 digest'
+```
+
+During development, `HostValidator.ALLOW_ALL_HOSTS_VALIDATOR` accepts every host. Ship a real
+validator instead.
+
+An app that refuses a host returns no binder at all. Gearslip reports that as
+`the app refused to bind - host not accepted`. Your own side logs the reason under the tag
+`CarApp.Val`, including the exact `addAllowedHost` call to add, so read logcat there first.
+
+### Discovery
+
+Gearslip finds templated apps by querying `androidx.car.app.CarAppService`, then re-querying with
+each known category to recover which ones your intent filter matched. Declare the categories you
+belong to, or Gearslip files you under `app`:
+
+```xml
+<service android:name=".MyCarAppService" android:exported="true">
+    <intent-filter>
+        <action android:name="androidx.car.app.CarAppService" />
+        <category android:name="androidx.car.app.category.NAVIGATION" />
+    </intent-filter>
+</service>
+```
+
+Gearslip recognises the `NAVIGATION`, `POI`, `PARKING`, `CHARGING`, `MESSAGING`, `CALLING`,
+`SETTINGS`, `IOT` and `WEATHER` categories. Navigation apps start automatically on the home
+screen when the driver used them last.
+
+### The handshake
+
+Gearslip offers car API level 8. It negotiates down to
+`min(8, yourLatestCarAppApiLevel)` and refuses the app when that falls below your
+`minCarAppApiLevel`, rather than drawing it wrongly. Keep your minimum at 8 or below.
+
+### Templates Gearslip renders
+
+Gearslip renders all sixteen templates. Ten describe their own content:
+
+`ListTemplate`, `GridTemplate`, `PaneTemplate`, `MessageTemplate`, `LongMessageTemplate`,
+`SearchTemplate`, `SignInTemplate`, `TabTemplate`, `SectionedItemTemplate`,
+`MediaPlaybackTemplate`.
+
+Six draw a map underneath and take chrome over the top:
+
+`NavigationTemplate`, `MapWithContentTemplate`, `MapTemplate`, `PlaceListNavigationTemplate`,
+`RoutePreviewNavigationTemplate`, `PlaceListMapTemplate`.
+
+`SearchTemplate` and `SignInTemplate` need text. A phone keyboard cannot appear on the car's
+virtual display, so Gearslip draws its own and feeds the result back through the template's
+listener.
+
+### Content limits
+
+Gearslip reports these limits through the constraint service, and expects you to honour them:
+
+| Limit | Value |
+| --- | --- |
+| Grid items | 12 |
+| Pane rows | 4 |
+| Route list rows | 3 |
+| Anything else | 12 |
+
+Gearslip enables app-driven refresh, so you may invalidate your own template without the driver
+touching the screen.
+
+### Drawing a map
+
+A navigation app draws its own pixels. Gearslip lends it a real `Surface` taken from a
+`SurfaceView` inside the car's virtual display, so your map reaches the head unit through the
+existing video pipe. Gearslip never reads those pixels back.
+
+Gearslip then reports which part of that surface the driver can see. Treat the visible area as
+the region safe for your own controls, and the stable area as the region that never gets
+covered. Gearslip reports the same area for both, and it depends on the template:
+
+| Template | What Gearslip covers |
+| --- | --- |
+| `NavigationTemplate` | A strip along the bottom for the trip estimate |
+| `MapWithContentTemplate`, `MapTemplate`, and the place list and route preview templates | A content pane on the left |
+
+The turn card and map buttons float over the visible area, as they do in Android Auto.
+
+Your app receives four gestures, never raw touches: `onClick`, `onScroll`, `onFling` and
+`onScale`. Coordinates are surface pixels. Scroll distances follow `GestureDetector`'s
+convention, which reports the previous position minus the current one.
+
+### Car hardware
+
+A phone knows nothing about a car's sensors, so Gearslip answers every car-hardware request with
+"unsupported". It answers rather than ignores: an app whose sensor manager waits for a reply
+hangs when the host stays silent. Design for a host that reports no vehicle data at all.
+
+Gearslip accepts the suggestions an app pushes and discards them, because no screen shows them
+yet. Your app will not fail for offering them.
+
+### Day and night
+
+Gearslip decides whether it is dark outside and pushes that to your app as a configuration
+change, with `UI_MODE_NIGHT_YES` or `UI_MODE_NIGHT_NO`. Take your map style from the
+configuration the host reports. The configuration also carries the car's density, screen size and
+orientation, and always sets `UI_MODE_TYPE_CAR`.
+
+---
+
+## Media apps
+
+Gearslip draws the media UI itself: browsing, artwork, lyrics, transport controls and a
+now-playing pill in the nav bar. Your app supplies a browse tree and a media session.
+
+Gearslip lists a media app when it exports a `MediaBrowserService` **and** declares the Android
+Auto meta-data. Both halves are required, because the service alone also appears on phone-only
+players that expose a browser to Bluetooth and Wear:
+
+```xml
+<application>
+    <meta-data
+        android:name="com.google.android.gms.car.application"
+        android:resource="@xml/automotive_app_desc" />
+</application>
+```
+
+```xml
+<!-- res/xml/automotive_app_desc.xml -->
+<automotiveApp>
+    <uses name="media" />
+</automotiveApp>
+```
+
+Publish playback state, metadata, duration and artwork through your `MediaSession`, and support
+play, pause, next, previous and seek. Gearslip reconnects to the app the driver used last and
+can start it playing on connection.
+
+---
+
+## Messaging apps
+
+Gearslip shows conversations from the notifications your app already posts, as Android Auto
+does. Your app needs no car screen of its own.
+
+Gearslip lists a messaging app when its car descriptor declares notifications:
+
+```xml
+<!-- res/xml/automotive_app_desc.xml -->
+<automotiveApp>
+    <uses name="notification" />
+</automotiveApp>
+```
+
+Reference it from the same `com.google.android.gms.car.application` meta-data that a media app
+uses. Opening your tile on the car screen shows your recent conversations.
+
+### Posting messages
+
+Post each conversation as a `MessagingStyle` notification. Gearslip reads the conversation
+title, each message's sender and text, and whether the chat is a group, and shows the last eight
+messages. Leave the sender empty on the phone owner's own messages; Gearslip treats a message
+with no sender as one the driver sent.
+
+Gearslip reads new messages aloud and lets the driver reply by voice or with a quick reply. For
+that, attach two actions, either to the notification or to its `WearableExtender`:
+
+- **Reply:** an action carrying a `RemoteInput` that allows free-form input. Gearslip fills it
+  with the driver's reply and fires the action's intent.
+- **Mark as read:** an action with `SEMANTIC_ACTION_MARK_AS_READ`. Gearslip shows a Mark read
+  button when you provide it.
+
+### Which notifications interrupt the driver
+
+Gearslip pops up a card for a conversation, a notification with a reply action, or a
+notification in the `msg`, `missed_call`, `alarm`, `reminder` or `event` category. A channel
+below default importance never pops up. Every other notification waits quietly on the
+dashboard.
+
+Gearslip drops these altogether:
+
+- ongoing notifications and group summaries;
+- the `transport`, `progress`, `service`, `sys` and `navigation` categories; and
+- media notifications, because the player already shows them.
+
+---
+
+## Gearslip apps
+
+This section specifies protocol version 1. Gearslip does not yet implement it.
+
+A Gearslip app describes a screen and lets Gearslip render it in Compose, using the car's theme,
+the driver's chosen scale and the current day or night state. Your app draws nothing and receives
+no surface. Everything the driver sees comes from the model below, which means your screen
+matches the rest of the car UI and cannot be made unreadable.
+
+Write a Gearslip app to reach the parts of the car UI the Car App Library does not cover. Write a
+templated app if you need to draw a map, because version 1 lends no surface.
+
+### Discovery
+
+Export a service with the Gearslip action and declare the protocol version it speaks:
+
+```xml
+<service
+    android:name=".GearslipService"
+    android:exported="true">
+    <intent-filter>
+        <action android:name="app.seb3thehacker.gearslip.APP" />
+    </intent-filter>
+    <meta-data
+        android:name="app.seb3thehacker.gearslip.version"
+        android:value="1" />
+</service>
+```
+
+Gearslip scans for these services once per car session and shows each one as a tile in the
+launcher, under your application's own label and icon. To override either on the car screen, add
+`app.seb3thehacker.gearslip.label` or `app.seb3thehacker.gearslip.icon`.
+
+Gearslip binds to any app that declares this service. It asks the driver for nothing, exactly as
+a head unit asks nothing before running an Android Auto app.
+
+Gearslip binds your service when the driver opens your tile and unbinds it when they leave. Keep
+no state that a rebind cannot rebuild.
+
+### The interface
+
+Copy these three files into `src/main/aidl/app/seb3thehacker/gearslip/api/`. A published artifact
+will replace them.
+
+```aidl
+// IGearslipApp.aidl
+package app.seb3thehacker.gearslip.api;
+
+import app.seb3thehacker.gearslip.api.IGearslipHost;
+import app.seb3thehacker.gearslip.api.IScreenCallback;
+
+interface IGearslipApp {
+    /** Return the highest version both sides speak. Gearslip passes the version it offers. */
+    int negotiate(int hostVersion);
+
+    void onCreate(IGearslipHost host);
+    void onStart();
+    void onStop();
+
+    /** Describe the current screen. Answer through the callback, on any thread. */
+    void getScreen(IScreenCallback callback);
+
+    void onAction(String actionId);
+    void onTextInput(String fieldId, String text);
+}
+```
+
+```aidl
+// IGearslipHost.aidl
+package app.seb3thehacker.gearslip.api;
+
+interface IGearslipHost {
+    /** Tell Gearslip the screen changed. It calls getScreen again. */
+    void invalidate();
+
+    /** Open the car keyboard. The result arrives at onTextInput. */
+    void requestTextInput(String fieldId, String prompt, String initialText);
+
+    String getEnvironment();
+    String getNowPlaying();
+
+    /** One of play, pause, toggle, next, previous. */
+    void mediaCommand(String command);
+
+    /** Leave the app and return to the launcher. */
+    void finish();
+}
+```
+
+```aidl
+// IScreenCallback.aidl
+package app.seb3thehacker.gearslip.api;
+
+interface IScreenCallback {
+    void onScreen(String screenJson);
+    void onError(String message);
+}
+```
+
+### Versioning
+
+Gearslip calls `negotiate` first, passing the version it offers. Return the highest version you
+also speak. Gearslip uses that version for the rest of the connection and drops the app when the
+answer exceeds what it offered. This mirrors how Gearslip negotiates car API levels with
+templated apps, and it lets either side move first.
+
+Version 1 is the only version. Reject anything you do not recognise by returning 1.
+
+### Lifecycle
+
+1. Gearslip binds your service and calls `negotiate`.
+2. Gearslip calls `onCreate`, handing you the host interface. Keep it.
+3. Gearslip calls `onStart`, then `getScreen`.
+4. You answer through `onScreen`. Gearslip renders it.
+5. The driver taps something. Gearslip calls `onAction` with that element's id.
+6. Your screen changes, so you call `invalidate`. Gearslip calls `getScreen` again.
+7. The driver leaves. Gearslip calls `onStop` and unbinds.
+
+Every call arrives on a binder thread. Answer `getScreen` promptly; Gearslip shows the previous
+screen until you do. Gearslip coalesces repeated `invalidate` calls.
+
+### The screen model
+
+Answer `getScreen` with a JSON object.
+
+```json
+{
+  "protocol": 1,
+  "type": "list",
+  "title": "Stations",
+  "items": [
+    { "id": "r6", "title": "BBC Radio 6", "subtitle": "Music", "icon": "play" },
+    { "id": "r4", "title": "BBC Radio 4", "subtitle": "Speech", "icon": "play" }
+  ],
+  "actions": [
+    { "id": "refresh", "title": "Refresh", "icon": "refresh", "primary": true }
+  ]
+}
+```
+
+`type` takes one of four values:
+
+| Type | Renders as | Uses |
+| --- | --- | --- |
+| `list` | A vertical list of rows | `items` |
+| `grid` | A grid of tiles | `items` |
+| `pane` | A short detail pane beside its actions | `items`, `actions` |
+| `message` | A single message and its actions | `text`, `actions` |
+
+An item takes `id`, `title`, and optionally `subtitle`, `icon` and `enabled`. Gearslip calls
+`onAction` with the item's `id` when the driver taps it. An item with `"type": "input"` renders
+as a text field carrying `value`; tapping it opens the car keyboard, and the result arrives at
+`onTextInput` under the item's id.
+
+An action takes `id`, `title`, and optionally `icon` and `primary`. Gearslip renders at most two
+actions and emphasises the primary one.
+
+`icon` names a built-in glyph: `play`, `pause`, `next`, `previous`, `search`, `settings`, `home`,
+`apps`, `notifications`, `info`, `share`, `place`, `favorite`, `add`, `remove`, `refresh`,
+`check`, `error`. Version 1 carries no images. Gearslip drops an unknown name and renders the
+row without a glyph.
+
+Gearslip truncates any list past the limits in [Content limits](#content-limits) and shortens
+long strings. Send a screen that fits, rather than one Gearslip has to cut.
+
+### Reading the car
+
+`getEnvironment` returns the car's current state:
+
+```json
+{
+  "protocol": 1,
+  "darkOutside": true,
+  "moving": false,
+  "frameWidth": 800,
+  "frameHeight": 480,
+  "densityDpi": 160,
+  "batteryPercent": 82,
+  "charging": true,
+  "vehicle": "Honda"
+}
+```
+
+`darkOutside` reports whether Gearslip believes it is dark, from the light sensor or the clock.
+`moving` reports whether the phone's GPS shows the car moving. Both change during a session, so
+read them each time you build a screen rather than caching them.
+
+Treat `moving` as a comfort signal, not a safety guarantee. It reads false whenever the fix is
+stale or missing, which includes tunnels and car parks.
+
+### Controlling media
+
+`getNowPlaying` returns what the car is playing, whichever app owns it:
+
+```json
+{ "title": "Sleepwalk", "artist": "Santo & Johnny", "playing": true, "durationMs": 142000 }
+```
+
+`mediaCommand` sends one of `play`, `pause`, `toggle`, `next` or `previous` to that app. Both
+work regardless of which app is playing, so use them to put transport controls on your own
+screen. Ship audio through a media app instead of driving these.
+
+### Text input
+
+A phone keyboard cannot appear on the car's virtual display, so Gearslip draws its own. Call
+`requestTextInput` with a field id, a prompt and any existing text. Gearslip opens the keyboard
+and calls `onTextInput` as the driver types, so treat each call as the current contents rather
+than a final answer.
+
+### What version 1 leaves out
+
+Version 1 lends no surface, so no Gearslip app draws its own pixels. It carries no images beyond
+the built-in glyphs. It places apps only in the launcher; contributing a dashboard card or a
+home-screen pane comes later. Anything that needs its own rendering belongs in a templated app.
+
+---
+
+## Further reading
+
+- [README.md](../README.md) - what Gearslip is.
+- [CONTRIBUTING.md](../CONTRIBUTING.md) - how to build Gearslip and report bugs.
+- [Android for Cars App Library](https://developer.android.com/training/cars/apps) - the
+  reference for templated apps.

gearslip/build.gradle.kts

@@ -1,3 +1,4 @@
+import java.util.Properties
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 import org.jetbrains.kotlin.gradle.tasks.KotlinJvmCompile
 
@@ -13,16 +14,61 @@ plugins {
     alias(libs.plugins.kotlin.compose)
 }
 
+// The release signing key, read from an untracked keystore.properties beside this file or at the
+// repository root. Third-party apps allowlist Gearslip by the SHA-256 of this certificate, so the
+// key must stay the same for the life of the project - and must never be committed.
+val keystoreProperties = Properties().apply {
+    listOf(
+        rootProject.file("keystore.properties"),
+        project.file("keystore.properties"),
+    ).firstOrNull { it.exists() }?.inputStream()?.use { load(it) }
+}
+
 android {
     namespace = "app.seb3thehacker.gearslip"
     compileSdk = 37
 
     defaultConfig {
         applicationId = "app.seb3thehacker.gearslip"
-        minSdk = 35
+        minSdk = 31
         targetSdk = 37
-        versionCode = 2
+        versionCode = 8
-        versionName = "0.0.02-pre"
+        versionName = "0.2.00-alpha"
+        manifestPlaceholders["appLabel"] = "Gearslip"
+        // Where opted-in phones send their daily usage note: the stats-worker/ Worker's address,
+        // set as gearslipStatsUrl in gradle.properties. Left empty, nothing is ever sent.
+        buildConfigField("String", "STATS_URL", "\"${project.findProperty("gearslipStatsUrl") ?: ""}\"")
+    }
+
+    signingConfigs {
+        // Declared only when the properties file is present, so a clone without the key still
+        // builds debug; assembleRelease then falls back to unsigned rather than failing here.
+        if (keystoreProperties.getProperty("storeFile") != null) {
+            create("release") {
+                storeFile = rootProject.file(keystoreProperties.getProperty("storeFile"))
+                storePassword = keystoreProperties.getProperty("storePassword")
+                keyAlias = keystoreProperties.getProperty("keyAlias")
+                keyPassword = keystoreProperties.getProperty("keyPassword")
+            }
+        }
+    }
+
+    buildTypes {
+        release {
+            signingConfig = signingConfigs.findByName("release")
+        }
+        // Its own package, so a dev build installs beside the release one instead of over it.
+        // Signed with the release key when it's here: both builds declare the car template
+        // permission, and Android refuses a second app declaring it under a different key.
+        debug {
+            applicationIdSuffix = ".dev"
+            signingConfigs.findByName("release")?.let { signingConfig = it }
+            manifestPlaceholders["appLabel"] = "Gearslip Dev"
+        }
+    }
+
+    buildFeatures {
+        buildConfig = true
     }
 
     // Keeps build output out of the module folder: <root>/build/gearslip/... instead of
@@ -35,6 +81,23 @@ android {
         targetCompatibility = JavaVersion.VERSION_21
     }
 
+    defaultConfig {
+        // Speech-to-text ships for 64-bit ARM only: every phone Gearslip runs on, and one copy
+        // of the native library instead of four.
+        ndk { abiFilters += "arm64-v8a" }
+    }
+    ndkVersion = "27.1.12297006"
+    externalNativeBuild {
+        cmake {
+            path = file("src/main/cpp/CMakeLists.txt")
+            version = "3.22.1"
+        }
+    }
+    androidResources {
+        // Model weights barely compress, and stored plainly they stream straight out of the APK.
+        noCompress += "bin"
+    }
+
     testOptions {
         // GearslipLog calls android.util.Log, which is a stub on the local JVM.
         unitTests.isReturnDefaultValues = true
@@ -74,6 +137,7 @@ dependencies {
     // their Bundleables deserialize into.
     implementation(libs.androidx.car.app)
     implementation(libs.androidx.car.app.projected)
+    implementation(libs.androidx.media)
     testImplementation(libs.junit)
 }
 
@@ -82,3 +146,4 @@ tasks.withType<KotlinJvmCompile>().configureEach {
         jvmTarget.set(JvmTarget.JVM_21)
     }
 }
+

gearslip/src/debug/java/app/seb3thehacker/gearslip/BenchAudioSink.kt

@@ -0,0 +1,62 @@
+package app.seb3thehacker.gearslip
+
+import app.seb3thehacker.gearslip.audio.CarAudio
+import kotlin.math.abs
+
+/**
+ * Debug-only stand-in for the head unit's media audio sink.
+ *
+ * The car end of the audio path can only be exercised in a car, but everything before it - the
+ * setting, the consent dialog, the capture service, and whether the media app allows itself to be
+ * heard at all - is phone-side and can be tested at a desk. This sink takes the place of
+ * [AudioLink] so that path runs to completion, and reports what arrived.
+ *
+ *   adb shell am start -n app.seb3thehacker.gearslip/.CarPreviewActivity \
+ *       --ei w 800 --ei h 480 --ez audio true --ei snaps 10
+ *
+ * A healthy run logs a rising byte count and a peak well above zero. A byte count that rises with
+ * a peak of zero means the app refused to be captured.
+ */
+class BenchAudioSink(override val sampleRate: Int = 48_000, override val channels: Int = 2) : CarAudio.Link {
+
+    private var chunks = 0
+    private var bytes = 0L
+    private var peak = 0
+    private var reportedAt = 0L
+
+    override fun start() {
+        chunks = 0
+        bytes = 0
+        peak = 0
+        reportedAt = System.currentTimeMillis()
+        GearslipLog.i("bench sink: started - pretending to be a ${sampleRate}Hz x$channels car sink")
+    }
+
+    override fun stop() {
+        GearslipLog.i("bench sink: stopped after $chunks chunks / $bytes bytes")
+    }
+
+    override fun write(pcm: ByteArray, size: Int) {
+        chunks++
+        bytes += size
+        for (i in 0 until size - 1 step 2) {
+            val sample = (pcm[i].toInt() and 0xFF) or (pcm[i + 1].toInt() shl 8)
+            peak = maxOf(peak, abs(sample.toShort().toInt()))
+        }
+        val now = System.currentTimeMillis()
+        if (now - reportedAt < REPORT_MS) return
+        reportedAt = now
+        val seconds = bytes / (sampleRate.toDouble() * channels * 2)
+        GearslipLog.i(
+            "bench sink: %d chunks / %d bytes (%.1fs of audio), peak %.3f%s".format(
+                chunks, bytes, seconds, peak / 32768f,
+                if (peak == 0) " - SILENT, the app is not letting itself be captured" else "",
+            ),
+        )
+        peak = 0
+    }
+
+    companion object {
+        private const val REPORT_MS = 2_000L
+    }
+}

gearslip/src/debug/java/app/seb3thehacker/gearslip/CarPreviewActivity.kt

@@ -9,6 +9,9 @@ import android.os.Handler
 import android.os.Looper
 import android.view.MotionEvent
 import androidx.activity.ComponentActivity
+import androidx.activity.result.contract.ActivityResultContracts
+import app.seb3thehacker.gearslip.audio.AudioCaptureService
+import app.seb3thehacker.gearslip.audio.CarAudio
 import app.seb3thehacker.gearslip.car.CarEnvironment
 import app.seb3thehacker.gearslip.car.CarSettings
 import app.seb3thehacker.gearslip.car.CarUi
@@ -31,6 +34,28 @@ class CarPreviewActivity : ComponentActivity() {
     private var reader: ImageReader? = null
     @Volatile private var latest: Bitmap? = null
 
+    private val audioPermission = registerForActivityResult(ActivityResultContracts.RequestPermission()) { granted ->
+        if (granted) askAudioCapture() else CarAudio.denied()
+    }
+
+    private val audioConsent = registerForActivityResult(
+        androidx.activity.result.contract.ActivityResultContracts.StartActivityForResult(),
+    ) { result ->
+        val data = result.data
+        if (result.resultCode == RESULT_OK && data != null) {
+            AudioCaptureService.start(this, result.resultCode, data)
+        } else {
+            GearslipLog.w("preview: audio capture consent declined")
+            CarAudio.denied()
+        }
+    }
+
+    private fun askAudioCapture() {
+        val manager = getSystemService(android.media.projection.MediaProjectionManager::class.java)
+        runCatching { audioConsent.launch(manager.createScreenCaptureIntent()) }
+            .onFailure { GearslipLog.e("preview: could not ask for audio capture", it); CarAudio.denied() }
+    }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         GearslipLog.init(this)
@@ -58,6 +83,22 @@ class CarPreviewActivity : ComponentActivity() {
         val p = ScreenProjector(this).also { projector = it }
         p.start(imageReader.surface, w, h, dpi) { CarUi() }
 
+        // Stand in for the car's media sink, so the phone half of the audio path runs for real.
+        if (intent.getBooleanExtra("audio", false)) {
+            CarAudio.onConsentRequested = {
+                runOnUiThread {
+                    if (checkSelfPermission(android.Manifest.permission.RECORD_AUDIO) ==
+                        android.content.pm.PackageManager.PERMISSION_GRANTED
+                    ) {
+                        askAudioCapture()
+                    } else {
+                        audioPermission.launch(android.Manifest.permission.RECORD_AUDIO)
+                    }
+                }
+            }
+            CarAudio.attach(BenchAudioSink())
+        }
+
         GearslipLog.i("preview: displayId=${p.displayId}")
         if (intent.getBooleanExtra("hide", false)) p.setOverlayVisible(false)
 
@@ -76,6 +117,27 @@ class CarPreviewActivity : ComponentActivity() {
             GearslipLog.i("preview: wrote ${out.name}")
             step++
         }
+        // A two-finger pinch: "cx,cy,startGap,endGap" in projected pixels, after "pinchAfter" ms.
+        intent.getStringExtra("pinch")?.let { spec ->
+            val (cx, cy, gap0, gap1) = spec.split(",").map { it.toFloat() }
+            val pair = { gap: Float -> listOf(TouchPoint(3, cx - gap / 2, cy), TouchPoint(7, cx + gap / 2, cy)) }
+            val after = intent.getIntExtra("pinchAfter", 9000).toLong()
+            main.postDelayed({
+                snap()
+                p.dispatchTouch(MotionEvent.ACTION_DOWN, 0, listOf(pair(gap0)[0]))
+                p.dispatchTouch(MotionEvent.ACTION_POINTER_DOWN, 1, pair(gap0))
+                val steps = 14
+                for (i in 1..steps) main.postDelayed({
+                    p.dispatchTouch(MotionEvent.ACTION_MOVE, 0, pair(gap0 + (gap1 - gap0) * i / steps))
+                }, 40L * i)
+                main.postDelayed({
+                    p.dispatchTouch(MotionEvent.ACTION_POINTER_UP, 1, pair(gap1))
+                    p.dispatchTouch(MotionEvent.ACTION_UP, 0, listOf(pair(gap1)[0]))
+                }, 40L * (steps + 1))
+                main.postDelayed({ snap() }, 40L * (steps + 1) + 2000)
+            }, after)
+        }
+
         // Free-running mode: keep snapshotting on a timer so the display can be driven from
         // outside (adb `am start --display` / `input -d`) while the harness records it.
         val snaps = intent.getIntExtra("snaps", 0)
@@ -89,8 +151,9 @@ class CarPreviewActivity : ComponentActivity() {
             snap()
             taps.forEachIndexed { i, (x, y) ->
                 main.postDelayed({
-                    p.dispatchTouch(MotionEvent.ACTION_DOWN, x, y)
+                    val point = listOf(TouchPoint(0, x, y))
-                    main.postDelayed({ p.dispatchTouch(MotionEvent.ACTION_UP, x, y) }, 80)
+                    p.dispatchTouch(MotionEvent.ACTION_DOWN, 0, point)
+                    main.postDelayed({ p.dispatchTouch(MotionEvent.ACTION_UP, 0, point) }, 80)
                 }, 2500L * (i + 1))
                 main.postDelayed({ snap() }, 2500L * (i + 1) + 1500)
             }
@@ -101,6 +164,8 @@ class CarPreviewActivity : ComponentActivity() {
         super.onDestroy()
         projector?.stop()
         reader?.close()
+        CarAudio.onConsentRequested = null
+        CarAudio.release()
         CarEnvironment.stop()
     }
 }

gearslip/src/debug/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Debug-only override of the main icon background (src/debug/res wins over src/main/res),
+     so a debug install is never mistaken for a release one on the home screen. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:pathData="M0,0h108v108h-108z"
+        android:fillColor="#f5c518"/>
+    <path
+        android:pathData="M54,2 A52,52 0 1,1 53.99,2 Z"
+        android:fillColor="#e6b400"/>
+</vector>

gearslip/src/debug/res/drawable/ic_launcher_foreground.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Debug-only override of the main icon foreground, to go with the yellow debug background:
+     a charcoal gear rather than light grey, and a yellow centre hole to match the background
+     instead of the release icon's near-black. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path android:pathData="M 66.69,49.48 L 80.91,52.61 L 82.31,42.81 L 66.92,47.91 Z">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:type="linear"
+                android:startX="66.80"
+                android:startY="48.70"
+                android:endX="81.61"
+                android:endY="47.71">
+                <item android:offset="0" android:color="#00E5484D"/>
+                <item android:offset="1" android:color="#E5484D"/>
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:pathData="M 54.00,36.18 L 58.64,30.70 L 67.20,34.24 L 66.60,41.40 L 71.82,54.00 L 77.30,58.64 L 73.76,67.20 L 66.60,66.60 L 66.60,66.60 L 67.20,73.76 L 58.64,77.30 L 54.00,71.82 L 54.00,71.82 L 49.36,77.30 L 40.80,73.76 L 41.40,66.60 L 41.40,66.60 L 34.24,67.20 L 30.70,58.64 L 36.18,54.00 L 36.18,54.00 L 30.70,49.36 L 34.24,40.80 L 41.40,41.40 L 41.40,41.40 L 40.80,34.24 L 49.36,30.70 L 54.00,36.18 Z"
+        android:fillColor="#2E3033"/>
+    <path
+        android:pathData="M 78.61,40.70 L 85.31,43.29 L 84.74,52.55 L 77.78,54.31 Z"
+        android:fillColor="#E5484D"/>
+    <path
+        android:pathData="M54,46.08 A7.92,7.92 0 1,1 53.99,46.08 Z"
+        android:fillColor="#e6b400"/>
+</vector>

gearslip/src/main/AndroidManifest.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
 
     <!-- The projected WebView loads real pages; without this every load fails silently. -->
     <uses-permission android:name="android.permission.INTERNET" />
@@ -11,6 +12,7 @@
     -->
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
 
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
@@ -23,6 +25,36 @@
     <!-- Capturing a media app's playback (to send to the car) is gated on this by the platform. -->
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
 
+    <!--
+        Playback capture copies a stream rather than moving it, so the phone keeps playing the
+        music it is sending to the car. Silencing the phone's own speaker for the drive needs this.
+    -->
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+
+    <!--
+        Audio capture counts as a screen share, and Android hides notifications during one. The
+        protection can be switched off for the drive, but only with this, granted once over adb
+        (pm grant). Without it Gearslip works the same and notifications stay hidden.
+    -->
+    <uses-permission
+        android:name="android.permission.WRITE_SECURE_SETTINGS"
+        tools:ignore="ProtectedPermissions" />
+
+    <!--
+        Phone calls on the car screen. READ_PHONE_STATE and READ_CALL_LOG together are what a
+        call's own state (ringing, in progress) and the incoming number need; READ_CONTACTS
+        turns that number into a name; ANSWER_PHONE_CALLS lets the driver pick up from here.
+        Declining a call, and the caller ID itself, need Gearslip set as the phone's caller ID
+        and spam app too - an on-device consent, not a permission declared here.
+    -->
+    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
+    <uses-permission android:name="android.permission.READ_CALL_LOG" />
+    <uses-permission android:name="android.permission.READ_CONTACTS" />
+    <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
+
+    <!-- Placing a call from the car screen's dial pad or contacts list needs this. -->
+    <uses-permission android:name="android.permission.CALL_PHONE" />
+
     <!--
       Declared, not just requested. Templated apps decide whether to talk to a host by asking
       whether it holds this permission (HostValidator.isValidHost checks it before falling back
@@ -38,6 +70,12 @@
     <uses-feature android:name="android.hardware.usb.accessory" android:required="true" />
 
     <queries>
+    <!-- Named directly: current builds have no launcher-category entry point for the MAIN/
+         LAUNCHER query below to find, so the setup guide's Android Auto check needs this to see
+         whether the package is installed at all. -->
+    <package android:name="com.google.android.projection.gearhead" />
+    <!-- Every GrapheneOS install has this; the opt-in usage note uses it to say "GrapheneOS". -->
+    <package android:name="app.grapheneos.setupwizard" />
     <intent>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
@@ -50,16 +88,35 @@
     <intent>
         <action android:name="android.media.browse.MediaBrowserService" />
     </intent>
+    <!-- Speech: without these, Android hides the recognizer and the voice from us and
+         SpeechRecognizer reports none installed even when one is. -->
+    <intent>
+        <action android:name="android.speech.RecognitionService" />
+    </intent>
+    <intent>
+        <action android:name="android.intent.action.TTS_SERVICE" />
+    </intent>
 </queries>
 
 <application
         android:allowBackup="false"
         android:icon="@mipmap/ic_launcher"
         android:roundIcon="@mipmap/ic_launcher"
-        android:label="Gearslip"
+        android:label="${appLabel}"
         android:supportsRtl="true"
         android:theme="@style/Theme.Gearslip">
 
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.logshare"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/share_paths" />
+        </provider>
+
+
         <!--
           singleTop: the head unit can re-attach while we are already foregrounded, which
           arrives via onNewIntent rather than a fresh instance.
@@ -68,6 +125,7 @@
             android:name=".GearslipActivity"
             android:exported="true"
             android:launchMode="singleTop"
+            android:windowSoftInputMode="adjustResize"
             android:configChanges="orientation|screenSize|screenLayout|smallestScreenSize|keyboardHidden|uiMode|density|locale|layoutDirection|fontScale">
 
             <intent-filter>
@@ -75,6 +133,18 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
 
+        </activity>
+
+        <!--
+          Answers the car's USB connection on GearslipActivity's behalf. Kept apart from the
+          activity so Settings can switch off just this (AppSettings.setGearslipEnabled) and leave
+          the head unit to Android Auto, without disabling the screen the switch is on.
+        -->
+        <activity-alias
+            android:name=".GearslipUsbAccessory"
+            android:targetActivity=".GearslipActivity"
+            android:exported="true">
+
             <intent-filter>
                 <action android:name="android.hardware.usb.action.USB_ACCESSORY_ATTACHED" />
             </intent-filter>
@@ -82,7 +152,12 @@
             <meta-data
                 android:name="android.hardware.usb.action.USB_ACCESSORY_ATTACHED"
                 android:resource="@xml/accessory_filter" />
-        </activity>
+        </activity-alias>
+
+        <!-- Dev builds' test message: its Reply and Mark as read actions land here. -->
+        <receiver
+            android:name=".notify.TestMessageReceiver"
+            android:exported="false" />
 
         <service
             android:name=".mirror.MirrorService"
@@ -94,11 +169,14 @@
             android:exported="false"
             android:foregroundServiceType="location" />
 
-        <!-- Holds the capture session that carries a media app's audio to the car. -->
+        <!--
+          Holds the capture session that carries a media app's audio to the car. It also claims
+          the microphone, so voice replies can hear the driver with the phone locked.
+        -->
         <service
             android:name=".audio.AudioCaptureService"
             android:exported="false"
-            android:foregroundServiceType="mediaProjection" />
+            android:foregroundServiceType="mediaProjection|microphone" />
 
         <!--
           Touch on the car screen is replayed onto the phone through this service.
@@ -131,5 +209,21 @@
                 <action android:name="android.service.notification.NotificationListenerService" />
             </intent-filter>
         </service>
+
+        <!--
+          Sees incoming calls before they ring, so the car screen can show the caller and
+          decline it. Inert until the driver sets Gearslip as the phone's caller ID and spam
+          app, under Settings > Apps > Default apps - the same consent a call-blocking app asks
+          for, not a privileged one.
+        -->
+        <service
+            android:name=".call.GearslipCallScreening"
+            android:exported="true"
+            android:label="Gearslip calls"
+            android:permission="android.permission.BIND_SCREENING_SERVICE">
+            <intent-filter>
+                <action android:name="android.telecom.CallScreeningService" />
+            </intent-filter>
+        </service>
     </application>
 </manifest>

gearslip/src/main/cpp/CMakeLists.txt

@@ -0,0 +1,36 @@
+# Speech-to-text for voice replies and the assistant: whisper.cpp, pinned to one commit and
+# fetched at build time, so nothing outside this folder (cloned-repos included) is needed.
+cmake_minimum_required(VERSION 3.22)
+project(gearslip_speech CXX C)
+
+set(CMAKE_CXX_STANDARD 17)
+
+# Optimised in debug builds too. Unoptimised, Whisper runs several times slower, and a dev build
+# would make voice look far worse than what ships.
+foreach(lang C CXX)
+    set(CMAKE_${lang}_FLAGS_DEBUG "-O3 -DNDEBUG")
+endforeach()
+
+include(FetchContent)
+FetchContent_Declare(
+    whisper
+    URL https://github.com/ggml-org/whisper.cpp/archive/6e4ab854f67f743900934a703d5603419384c961.tar.gz
+    URL_HASH SHA256=55b585aec5e1bc03e2a5cea61da97c6406fa833996cf7daeed704972273cc039
+)
+
+set(BUILD_SHARED_LIBS OFF CACHE BOOL "" FORCE)
+set(WHISPER_BUILD_EXAMPLES OFF CACHE BOOL "" FORCE)
+set(WHISPER_BUILD_TESTS OFF CACHE BOOL "" FORCE)
+set(WHISPER_BUILD_SERVER OFF CACHE BOOL "" FORCE)
+set(GGML_OPENMP OFF CACHE BOOL "" FORCE)
+set(GGML_NATIVE OFF CACHE BOOL "" FORCE)
+# ARMv8.2 with half floats and dot products: every phone that runs Android 12 or later in
+# practice, and what makes Whisper fast enough to answer in under a second.
+set(GGML_CPU_ARM_ARCH "armv8.2-a+dotprod+fp16" CACHE STRING "" FORCE)
+FetchContent_MakeAvailable(whisper)
+
+add_library(gearslip_speech SHARED speech_jni.cpp)
+target_compile_options(gearslip_speech PRIVATE -O3)
+find_library(LOG_LIB log)
+target_link_libraries(gearslip_speech whisper android ${LOG_LIB})
+target_link_options(gearslip_speech PRIVATE -Wl,--gc-sections -Wl,-z,max-page-size=16384)

gearslip/src/main/cpp/speech_jni.cpp

@@ -0,0 +1,86 @@
+// The bridge between Kotlin's SpeechEngine and whisper.cpp: load a model, turn one recorded
+// phrase into text, free the model. Recording and deciding when a phrase ends stay in Kotlin.
+
+#include <jni.h>
+#include <android/asset_manager.h>
+#include <android/asset_manager_jni.h>
+#include <android/log.h>
+#include <algorithm>
+#include <cmath>
+#include <string>
+#include "whisper.h"
+
+#define TAG "GearslipSpeech"
+#define LOGI(...) __android_log_print(ANDROID_LOG_INFO, TAG, __VA_ARGS__)
+
+static whisper_context_params context_params() {
+    whisper_context_params p = whisper_context_default_params();
+    p.use_gpu = false;
+    return p;
+}
+
+// Streams a model straight out of the APK, so the bundled one is never copied to storage.
+static size_t asset_read(void *ctx, void *output, size_t size) {
+    int n = AAsset_read(static_cast<AAsset *>(ctx), output, size);
+    return n > 0 ? static_cast<size_t>(n) : 0;
+}
+static bool asset_eof(void *ctx) { return AAsset_getRemainingLength64(static_cast<AAsset *>(ctx)) <= 0; }
+static void asset_close(void *ctx) { AAsset_close(static_cast<AAsset *>(ctx)); }
+
+extern "C" JNIEXPORT jlong JNICALL
+Java_app_seb3thehacker_gearslip_speech_SpeechEngine_nativeInitAsset(JNIEnv *env, jobject, jobject assets, jstring jpath) {
+    AAssetManager *manager = AAssetManager_fromJava(env, assets);
+    const char *path = env->GetStringUTFChars(jpath, nullptr);
+    AAsset *asset = AAssetManager_open(manager, path, AASSET_MODE_STREAMING);
+    env->ReleaseStringUTFChars(jpath, path);
+    if (!asset) return 0;
+    whisper_model_loader loader = {asset, asset_read, asset_eof, asset_close};
+    return reinterpret_cast<jlong>(whisper_init_with_params(&loader, context_params()));
+}
+
+// Bytes, not a jstring: NewStringUTF wants modified UTF-8 and aborts on some of what Whisper can
+// write (four-byte characters), so Kotlin decodes the plain UTF-8 instead.
+extern "C" JNIEXPORT jbyteArray JNICALL
+Java_app_seb3thehacker_gearslip_speech_SpeechEngine_nativeTranscribe(
+    JNIEnv *env, jobject, jlong handle, jfloatArray jsamples, jstring jlang, jint threads) {
+    auto *ctx = reinterpret_cast<whisper_context *>(handle);
+    if (!ctx) return env->NewByteArray(0);
+    jsize n = env->GetArrayLength(jsamples);
+    jfloat *samples = env->GetFloatArrayElements(jsamples, nullptr);
+    const char *lang = env->GetStringUTFChars(jlang, nullptr);
+
+    whisper_full_params p = whisper_full_default_params(WHISPER_SAMPLING_GREEDY);
+    p.n_threads = threads;
+    p.language = lang;
+    p.translate = false;
+    p.no_context = true;
+    p.no_timestamps = true;
+    p.single_segment = true;
+    p.print_progress = false;
+    p.print_realtime = false;
+    p.print_special = false;
+    p.print_timestamps = false;
+    p.suppress_blank = true;
+    // The ACFT models are trained for a context cut to the audio's own length (1500 frames is
+    // 30 s, so 50 per second), which is what makes a three-second phrase fast. A little extra
+    // keeps the last word from being clipped.
+    p.audio_ctx = std::min(1500, static_cast<int>(std::ceil(n / 320.0)) + 32);
+
+    int rc = whisper_full(ctx, p, samples, n);
+    env->ReleaseStringUTFChars(jlang, lang);
+    env->ReleaseFloatArrayElements(jsamples, samples, JNI_ABORT);
+    if (rc != 0) {
+        LOGI("whisper_full failed: %d", rc);
+        return env->NewByteArray(0);
+    }
+    std::string text;
+    for (int i = 0; i < whisper_full_n_segments(ctx); i++) text += whisper_full_get_segment_text(ctx, i);
+    jbyteArray out = env->NewByteArray(static_cast<jsize>(text.size()));
+    env->SetByteArrayRegion(out, 0, static_cast<jsize>(text.size()), reinterpret_cast<const jbyte *>(text.data()));
+    return out;
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_app_seb3thehacker_gearslip_speech_SpeechEngine_nativeFree(JNIEnv *, jobject, jlong handle) {
+    if (handle) whisper_free(reinterpret_cast<whisper_context *>(handle));
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/AppSettings.kt

@@ -1,6 +1,8 @@
 package app.seb3thehacker.gearslip
 
+import android.content.ComponentName
 import android.content.Context
+import android.content.pm.PackageManager
 
 /** User-facing preferences. Read fresh on every session, so changes apply on the next connect. */
 object AppSettings {
@@ -8,6 +10,9 @@ object AppSettings {
     private const val PREFS = "gearslip_settings"
     private const val KEY_STARTUP_URL = "startup_url"
     private const val KEY_SEEN_COMPAT_WARNING = "seen_compat_warning"
+    private const val KEY_SKIPPED_CERT_SETUP = "skipped_cert_setup"
+    private const val KEY_SEEN_PERMISSIONS_SETUP = "seen_permissions_setup"
+    private const val KEY_GEARSLIP_ENABLED = "gearslip_enabled"
 
     private fun prefs(context: Context) =
         context.applicationContext.getSharedPreferences(PREFS, Context.MODE_PRIVATE)
@@ -34,4 +39,59 @@ object AppSettings {
     fun setSeenCompatWarning(context: Context) {
         prefs(context).edit().putBoolean(KEY_SEEN_COMPAT_WARNING, true).apply()
     }
+
+    /** Whether the certificate setup screen has been deliberately skipped. */
+    fun hasSkippedCertSetup(context: Context): Boolean =
+        prefs(context).getBoolean(KEY_SKIPPED_CERT_SETUP, false)
+
+    fun setSkippedCertSetup(context: Context) {
+        prefs(context).edit().putBoolean(KEY_SKIPPED_CERT_SETUP, true).apply()
+    }
+
+    /** Whether the one-by-one permissions wizard has already run once. */
+    fun hasSeenPermissionsSetup(context: Context): Boolean =
+        prefs(context).getBoolean(KEY_SEEN_PERMISSIONS_SETUP, false)
+
+    fun setSeenPermissionsSetup(context: Context) {
+        prefs(context).edit().putBoolean(KEY_SEEN_PERMISSIONS_SETUP, true).apply()
+    }
+
+    /**
+     * Whether Gearslip is allowed to claim the USB accessory connection. Off leaves the app
+     * installed but disables the GearslipUsbAccessory alias that answers
+     * USB_ACCESSORY_ATTACHED, so a real Android Auto head unit (or Google's own app) gets the
+     * connection instead - the two fight over it otherwise, since only one app can win the
+     * accessory handoff. The alias is separate from GearslipActivity itself - the activity that
+     * shows this very switch - so turning it off can't disable the screen you're looking at.
+     * On by default.
+     */
+    fun gearslipEnabled(context: Context): Boolean =
+        prefs(context).getBoolean(KEY_GEARSLIP_ENABLED, true)
+
+    fun setGearslipEnabled(context: Context, value: Boolean) {
+        prefs(context).edit().putBoolean(KEY_GEARSLIP_ENABLED, value).apply()
+        applyGearslipEnabled(context)
+    }
+
+    /**
+     * Makes the USB alias match the saved switch. Called at every launch as well, so a switch
+     * saved without the alias following it (an older build crashed right there) heals itself.
+     * Only the alias changes: the driver's "always open with Gearslip" choice for the car is kept.
+     */
+    fun applyGearslipEnabled(context: Context) {
+        val value = gearslipEnabled(context)
+        val appContext = context.applicationContext
+        // The class name comes from the code's namespace, not the package: a debug build installs
+        // as ".dev", but the alias is still app.seb3thehacker.gearslip.GearslipUsbAccessory.
+        val component = ComponentName(appContext.packageName, "${GearslipActivity::class.java.`package`!!.name}.GearslipUsbAccessory")
+        val state = if (value) {
+            PackageManager.COMPONENT_ENABLED_STATE_DEFAULT
+        } else {
+            PackageManager.COMPONENT_ENABLED_STATE_DISABLED
+        }
+        val pm = appContext.packageManager
+        if (pm.getComponentEnabledSetting(component) == state) return
+        runCatching { pm.setComponentEnabledSetting(component, state, PackageManager.DONT_KILL_APP) }
+            .onFailure { GearslipLog.e("could not switch the USB connection ${if (value) "on" else "off"}", it) }
+    }
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/CarFocus.kt

@@ -0,0 +1,28 @@
+package app.seb3thehacker.gearslip
+
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+/**
+ * Who has the car's screen: Gearslip, or the car's own interface. Android Auto's "Exit" hands the
+ * screen back to the car with the session still running, so music keeps playing; the car's own
+ * Android Auto button brings Gearslip back. [GearslipRunner] fills in [request] while connected.
+ */
+object CarFocus {
+
+    private val projectedFlow = MutableStateFlow(true)
+
+    /** False while the car shows its own interface. */
+    val projected: StateFlow<Boolean> = projectedFlow
+
+    @Volatile internal var request: (() -> Unit)? = null
+
+    /** Asks the car to show its own interface. Does nothing when no car is connected. */
+    fun exitToCar() {
+        request?.invoke()
+    }
+
+    internal fun set(projected: Boolean) {
+        projectedFlow.value = projected
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/CertDownloader.kt

@@ -0,0 +1,52 @@
+package app.seb3thehacker.gearslip
+
+import java.io.ByteArrayOutputStream
+import java.net.HttpURLConnection
+import java.net.URL
+
+/**
+ * Fetches the publicly available head unit certificate and key from the opencardev/aasdk
+ * repository on GitHub. The app ships no certificates; it downloads them only when the
+ * user chooses to, the same way a browser would.
+ */
+object CertDownloader {
+
+    private val log = GearslipLog.tagged("DOWNL")
+
+    private const val BASE = "https://raw.githubusercontent.com/opencardev/aasdk/main/cert"
+    private const val CRT = "$BASE/headunit.crt"
+    private const val KEY = "$BASE/headunit.key"
+    private const val CONNECT_TIMEOUT_MS = 10_000
+    private const val READ_TIMEOUT_MS = 15_000
+
+    class Downloaded(val certificatePem: String, val privateKeyPem: String)
+
+    /** Fetches both files; throws with a readable message on any failure. */
+    fun fetch(): Downloaded {
+        log.i("fetching certificate from $BASE")
+        val crt = fetch(CRT, "certificate")
+        val key = fetch(KEY, "private key")
+        log.i("downloaded certificate (${crt.length} bytes) and key (${key.length} bytes)")
+        return Downloaded(crt, key)
+    }
+
+    private fun fetch(url: String, label: String): String {
+        val body = try {
+            val conn = (URL(url).openConnection() as HttpURLConnection).apply {
+                connectTimeout = CONNECT_TIMEOUT_MS
+                readTimeout = READ_TIMEOUT_MS
+            }
+            conn.inputStream.use { input ->
+                val out = ByteArrayOutputStream()
+                val buf = ByteArray(4096)
+                var n: Int
+                while (input.read(buf).also { n = it } != -1) out.write(buf, 0, n)
+                out.toString(Charsets.UTF_8)
+            }
+        } catch (e: Exception) {
+            throw RuntimeException("could not download the $label: ${e.message}", e)
+        }
+        if (body.isBlank()) throw RuntimeException("the $label file is empty")
+        return body
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/CertProvider.kt

@@ -2,6 +2,7 @@ package app.seb3thehacker.gearslip
 
 import android.content.Context
 import android.net.Uri
+import java.io.ByteArrayOutputStream
 import java.io.File
 import java.security.KeyStore
 import java.security.cert.X509Certificate
@@ -14,7 +15,9 @@ import java.security.cert.X509Certificate
  *
  *  1. **Imported** in the app (Settings > Certificate): a PKCS#12 file plus its password,
  *     copied into the app's private storage.
- *  2. **Staged over adb** into the app's external files directory, the way the spike has
+ *  2. **Downloaded** from the public opencardev/aasdk repository. Fetched only when the
+ *     user asks; the app never ships or hosts the certificate.
+ *  3. **Staged over adb** into the app's external files directory, the way the spike has
  *     always done it. Still honoured, so existing setups keep working untouched:
  *
  *       openssl pkcs12 -export -in headunit.crt -inkey headunit.key \
@@ -23,17 +26,18 @@ import java.security.cert.X509Certificate
  *
  *     Default password is "aaspike" (kept as-is so an already-staged phone.p12 doesn't need
  *     regenerating); a `phone.pass` file next to it overrides it.
- *  3. A freshly generated self-signed cert, which a real head unit rejects (see
+ *  4. A freshly generated self-signed cert, which a real head unit rejects (see
  *     SPIKE_FINDINGS.md).
  */
 object CertProvider {
+    private val log = GearslipLog.tagged("CERT")
 
     private const val P12_NAME = "phone.p12"
     private const val PASS_NAME = "phone.pass"
     private const val DEFAULT_PASSWORD = "aaspike"
     private const val IMPORT_DIR = "identity"
 
-    enum class Kind { IMPORTED, ADB_STAGED, SELF_SIGNED }
+    enum class Kind { IMPORTED, DOWNLOADED, ADB_STAGED, SELF_SIGNED }
 
     class Identity(
         val keyStore: KeyStore,
@@ -43,7 +47,10 @@ object CertProvider {
         val kind: Kind = Kind.SELF_SIGNED,
     )
 
-    /** Loaded fresh each call, so a newly imported or pushed cert takes effect on the next connect. */
+    /**
+     * The identity for the next connection. A newly imported or pushed cert takes effect on the
+     * next connect: see [loadFromFiles] for how the cache notices.
+     */
     fun load(context: Context): Identity = loadFromFiles(context) ?: run {
         val generated = SelfSignedCert.generate()
         Identity(
@@ -61,12 +68,50 @@ object CertProvider {
      */
     fun loadSupplied(context: Context): Identity? = loadFromFiles(context)
 
+    /**
+     * Unlocking a PKCS#12 file takes about a second on a Pixel 6, which a head unit waiting for
+     * its first reply may not wait out. So the unlocked identity is kept, keyed on the files it
+     * could come from: importing, downloading, removing or pushing a cert changes the key.
+     */
+    @Volatile private var cached: Pair<String, Identity>? = null
+
+    private fun sourcesKey(context: Context): String {
+        val dir = context.getExternalFilesDir(null)
+        val files = listOf(
+            importedFile(context, P12_NAME),
+            downloadedFile(context, P12_NAME),
+            dir?.let { File(it, P12_NAME) },
+            dir?.let { File(it, PASS_NAME) },
+        )
+        return files.joinToString("|") { f -> f?.let { "${it.path}:${it.lastModified()}:${it.length()}" } ?: "-" }
+    }
+
+    /** Unlocks the certificate ahead of time, so the first connection doesn't wait on it. */
+    fun warm(context: Context) {
+        runCatching { loadFromFiles(context) }
+    }
+
     private fun loadFromFiles(context: Context): Identity? {
+        val key = sourcesKey(context)
+        cached?.let { (k, identity) -> if (k == key) return identity }
+        val identity = unlockFromFiles(context) ?: return null
+        cached = key to identity
+        return identity
+    }
+
+    private fun unlockFromFiles(context: Context): Identity? {
         val imported = importedFile(context, P12_NAME)
         if (imported.isFile) {
             runCatching {
                 return loadP12(imported, importedPassword(context), "imported certificate", Kind.IMPORTED)
-            }.onFailure { GearslipLog.e("could not load the imported certificate - trying the next source", it) }
+            }.onFailure { log.e("could not load the imported certificate - trying the next source", it) }
+        }
+
+        val downloaded = downloadedFile(context, P12_NAME)
+        if (downloaded.isFile) {
+            runCatching {
+                return loadP12(downloaded, DEFAULT_PASSWORD, "downloaded certificate", Kind.DOWNLOADED)
+            }.onFailure { log.e("could not load the downloaded certificate - trying the next source", it) }
         }
 
         val dir = context.getExternalFilesDir(null)
@@ -80,7 +125,7 @@ object CertProvider {
                     DEFAULT_PASSWORD
                 }
                 return loadP12(staged, password, "$P12_NAME staged over adb", Kind.ADB_STAGED)
-            }.onFailure { GearslipLog.e("could not load $P12_NAME - falling back to self-signed", it) }
+            }.onFailure { log.e("could not load $P12_NAME - falling back to self-signed", it) }
         }
         return null
     }
@@ -103,7 +148,7 @@ object CertProvider {
             target.parentFile?.mkdirs()
             staging.copyTo(target, overwrite = true)
             importedFile(context, PASS_NAME).writeText(password)
-            GearslipLog.i("imported a certificate: ${identity.certificate.subjectX500Principal}")
+            log.i("imported a certificate: ${identity.certificate.subjectX500Principal}")
             return identity
         } finally {
             staging.delete()
@@ -112,17 +157,84 @@ object CertProvider {
 
     fun hasImported(context: Context): Boolean = importedFile(context, P12_NAME).isFile
 
-    /** Drops the imported identity; the next source in line (adb-staged, then self-signed) takes over. */
+    /** Whether a downloaded certificate is stored (may or may not also be imported). */
+    fun hasDownloaded(context: Context): Boolean = downloadedFile(context, P12_NAME).isFile
+
+    /** Drops the imported identity; the next source in line (downloaded, adb-staged, then self-signed) takes over. */
     fun removeImported(context: Context) {
         importedFile(context, P12_NAME).delete()
         importedFile(context, PASS_NAME).delete()
-        GearslipLog.i("removed the imported certificate")
+        log.i("removed the imported certificate")
+    }
+
+    /** Drops the downloaded identity. */
+    fun removeDownloaded(context: Context) {
+        downloadedFile(context, P12_NAME).delete()
+        downloadedFile(context, PASS_NAME).delete()
+        log.i("removed the downloaded certificate")
+    }
+
+    /** Whether any certificate is available (imported, downloaded, or adb-staged). */
+    fun hasAnyCert(context: Context): Boolean =
+        hasImported(context) || hasDownloaded(context) || hasAdbStaged(context)
+
+    private fun hasAdbStaged(context: Context): Boolean =
+        context.getExternalFilesDir(null)?.let { File(it, P12_NAME).isFile } == true
+
+    /**
+     * Validates raw PKCS#12 bytes with [password] and, if good, writes them as the imported
+     * identity. Used when the app assembles a certificate in memory (e.g. from a download)
+     * rather than importing from a file picker.
+     */
+    fun importFromBytes(context: Context, p12Bytes: ByteArray, password: String): Identity {
+        val staging = File(context.cacheDir, "import-$P12_NAME")
+        try {
+            staging.writeBytes(p12Bytes)
+            val identity = loadP12(staging, password, "imported certificate", Kind.IMPORTED)
+
+            val target = importedFile(context, P12_NAME)
+            target.parentFile?.mkdirs()
+            staging.copyTo(target, overwrite = true)
+            importedFile(context, PASS_NAME).writeText(password)
+            log.i("imported a certificate from bytes: ${identity.certificate.subjectX500Principal}")
+            return identity
+        } finally {
+            staging.delete()
+        }
+    }
+
+    /**
+     * Downloads the publicly available head unit certificate from the opencardev/aasdk
+     * repository, converts it from PEM to PKCS#12, and stores it ready for use.
+     * Runs synchronously (caller is responsible for threading). Throws on any failure.
+     */
+    fun downloadAndImport(context: Context): Identity {
+        val download = CertDownloader.fetch()
+        val result = PemKeyParser.build(download.certificatePem, download.privateKeyPem)
+
+        val target = downloadedFile(context, P12_NAME)
+        target.parentFile?.mkdirs()
+        val p12Password = DEFAULT_PASSWORD
+        val keyStore = result.keyStore
+        val p12Bytes = ByteArrayOutputStream().use { stream ->
+            keyStore.store(stream, p12Password.toCharArray())
+            stream.toByteArray()
+        }
+        target.writeBytes(p12Bytes)
+        downloadedFile(context, PASS_NAME).writeText(p12Password)
+
+        log.i("downloaded and stored certificate: ${result.certificate.subjectX500Principal}")
+        return Identity(keyStore, result.certificate, p12Password.toCharArray(),
+            "downloaded certificate (opencardev/aasdk)", Kind.DOWNLOADED)
     }
 
     // The imported files live in the app's private internal storage (not the external files
     // dir), so other apps cannot read the key, and `adb uninstall` clearing it is expected.
     private fun importedFile(context: Context, name: String) = File(File(context.filesDir, IMPORT_DIR), name)
 
+    private fun downloadedFile(context: Context, name: String) =
+        File(File(context.filesDir, "$IMPORT_DIR-downloaded"), name)
+
     private fun importedPassword(context: Context): String =
         importedFile(context, PASS_NAME).takeIf { it.isFile }?.readText().orEmpty()
 

gearslip/src/main/java/app/seb3thehacker/gearslip/Changelog.kt

@@ -0,0 +1,76 @@
+package app.seb3thehacker.gearslip
+
+/**
+ * What changed in each release, newest first, shown on the car screen after an update (and on
+ * the phone). Only the changes a driver would notice. Plain words, short lines: this is read in
+ * a parked car.
+ */
+object Changelog {
+
+    class Release(val versionCode: Int, val versionName: String, val changes: List<String>)
+
+    val releases = listOf(
+        Release(
+            8, "0.2.00-alpha",
+            listOf(
+                "Exit takes you to the car's own screen. Tap Android Auto on the car to come back.",
+                "Gearslip listens through the car's microphone when the car has one, so voice works with the phone in a pocket.",
+                "A voice reply sends when its bar runs out, even over road noise or the radio. Say \"cancel\" or \"change it\" before then.",
+                "Maps turn dark when the car switches to night mode.",
+                "A moving map no longer makes the car screen fall behind your taps.",
+                "Gearslip asks to send sound to the car as soon as you connect, so videos in the web browser play in the car too.",
+                "Cars that offer more than one kind of music audio, such as the 2022 Dacia Jogger, play sound again.",
+                "When the car shows a keyboard, you can type on the phone instead. The car's keyboard is taller too.",
+                "Every car screen has a back button.",
+                "App icons show whether an app works in Gearslip. Metrolist works and shows the green check.",
+                "LIVI connects again, and touch works on cars with a second screen.",
+                "The phone's Settings screen has a new layout, with What's new and the setup guide at the top.",
+                "You can choose to send short usage notes that help the project. They hold no name, account, or location, and they're off unless you turn them on.",
+                "Searching inside a media app moved to Settings > Experimental features.",
+                "Under Settings > Media audio, the choices are now Phone audio and Car audio.",
+                "Logs leave out your location and the car's serial number.",
+            ),
+        ),
+        Release(
+            7, "0.1.10-alpha",
+            listOf(
+                "The launcher groups your apps: Phone, Maps, Music, Messaging, Web, Screen sharing, and Settings.",
+                "To move an app, press and hold it on the launcher, then tap Move left or Move right.",
+                "MapQuest and Flitsmeister work in Gearslip and show the green check.",
+                "Spotify has one tile. If Spotify isn't open on the phone, tap Open Spotify to start it.",
+                "Flick a map and it glides on, as it does in Android Auto.",
+                "The map picks up where it left off when you come back from another screen.",
+                "Search boxes in map apps are larger and easier to read.",
+                "Map apps keep the right icons on their buttons after they update.",
+                "When Gearslip asks \"Do you want to reply?\", a bar shows how long it will listen. The bar stops while you speak.",
+                "Gearslip fits its picture to wide car screens and keeps it clear of the edges the car crops.",
+                "Gearslip answers the car's connection checks correctly. Some cars, Audis among them, hung up after a second without this.",
+                "Google Maps no longer shows up as a messaging app.",
+            ),
+        ),
+        Release(
+            6, "0.1.0-alpha",
+            listOf(
+                "Messaging apps such as Signal and Molly open to your recent chats.",
+                "Gearslip reads a message aloud, and you reply by voice. Say \"cancel\" or \"change it\" before it sends, or tap a quick reply such as your arrival time.",
+                "Voice works on any phone, GrapheneOS included. Gearslip turns speech into text itself, so it needs no Google account.",
+                "New messages show as a small card at the top right, even while you drive. A bar shows how long until the card closes or the reply sends.",
+                "Only messages, missed calls, alarms, and reminders pop up. Everything else waits on the dashboard.",
+                "The map stays loaded when you switch screens, so it no longer flashes black.",
+                "Map apps draw more reliably and keep their connection when the phone is locked.",
+                "The Home button shows your map app, so it no longer appears twice.",
+                "The next turn shows in the nav bar when you leave the map.",
+                "Steering wheel buttons, control knobs, and D-pads now work. If yours don't, open an issue on GitHub.",
+                "To see the whole song title and artist in the nav bar, choose Settings > Player in the nav bar > Song title.",
+                "Choose miles or kilometres under Settings > Units.",
+                "Try the voice assistant and the vehicle data screen under Settings > Experimental features.",
+                "Logs now say why a car ended the connection.",
+                "Spotify, Waze, and Google Messages updated to a version of Google's car library that only accepts Android Auto itself. Their own car screens won't open in Gearslip. Spotify still plays through the Gearslip player, which has the green check.",
+                "Calls go through the car's Bluetooth, as they do in Android Auto. Pair your phone with the car to hear calls on its speakers.",
+            ),
+        ),
+    )
+
+    /** The release that matches this build, if it has notes. */
+    val current: Release? get() = releases.firstOrNull { it.versionCode == BuildConfig.VERSION_CODE }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/EncoderSelfTest.kt

@@ -12,9 +12,10 @@ import java.util.concurrent.TimeUnit
  * the TLS self-test: make our own failures loud on the bench.
  */
 object EncoderSelfTest {
+    private val log = GearslipLog.tagged("VIDEO")
 
     fun run(width: Int = 800, height: Int = 480, frameRate: Int = 30): Boolean {
-        GearslipLog.i("=== encoder self-test starting (${width}x$height @ ${frameRate}fps) ===")
+        log.i("=== encoder self-test starting (${width}x$height @ ${frameRate}fps) ===")
 
         var codecConfig: ByteArray? = null
         var frames = 0
@@ -59,37 +60,37 @@ object EncoderSelfTest {
             val csd = codecConfig
             when {
                 csd == null -> {
-                    GearslipLog.e("encoder self-test FAILED: no CODEC_CONFIG (SPS/PPS) produced")
+                    log.e("encoder self-test FAILED: no CODEC_CONFIG (SPS/PPS) produced")
                     false
                 }
                 frames == 0 -> {
-                    GearslipLog.e("encoder self-test FAILED: no frames produced")
+                    log.e("encoder self-test FAILED: no frames produced")
                     false
                 }
                 !sawKeyFrame -> {
-                    GearslipLog.e("encoder self-test FAILED: no keyframe - the car needs one first")
+                    log.e("encoder self-test FAILED: no keyframe - the car needs one first")
                     false
                 }
                 !sawResyncKeyFrame -> {
-                    GearslipLog.e(
+                    log.e(
                         "encoder self-test FAILED: requestSyncFrame() produced no keyframe - " +
                             "the resync-after-drop fix would silently do nothing on this device",
                     )
                     false
                 }
                 else -> {
-                    GearslipLog.i(
+                    log.i(
                         "SPS/PPS = ${csd.size} bytes, $frames frames, keyframe present, " +
                             "requestSyncFrame() confirmed working",
                     )
-                    GearslipLog.hex("   csd", csd, limit = 48)
+                    log.hex("   csd", csd, limit = 48)
-                    GearslipLog.i("=== encoder self-test PASSED ===")
+                    log.i("=== encoder self-test PASSED ===")
                     true
                 }
             }
         } catch (t: Throwable) {
             runCatching { source.stop() }
-            GearslipLog.e("encoder self-test FAILED with an exception", t)
+            log.e("encoder self-test FAILED with an exception", t)
             false
         }
     }

gearslip/src/main/java/app/seb3thehacker/gearslip/GearslipActivity.kt

@@ -26,6 +26,8 @@ import app.seb3thehacker.gearslip.mirror.TouchRelayService
 import app.seb3thehacker.gearslip.car.CarEnvironment
 import app.seb3thehacker.gearslip.car.CarSettings
 import app.seb3thehacker.gearslip.car.CarUi
+import app.seb3thehacker.gearslip.car.Prefetch
+import app.seb3thehacker.gearslip.stats.UsageStats
 import app.seb3thehacker.gearslip.ui.GearslipApp
 import app.seb3thehacker.gearslip.ui.GearslipTheme
 import java.io.FileInputStream
@@ -39,6 +41,8 @@ import java.io.FileOutputStream
  * rotation or theme change from recreating it and dropping the connection.
  */
 class GearslipActivity : ComponentActivity(), Projection {
+    private val mainHandler = android.os.Handler(android.os.Looper.getMainLooper())
+
 
     private var descriptor: ParcelFileDescriptor? = null
     private var runner: GearslipRunner? = null
@@ -93,35 +97,37 @@ class GearslipActivity : ComponentActivity(), Projection {
         }
     }
 
-    /** Hosted map apps need Gearslip to hold location so they can keep it in the background. */
+    /** Setting Gearslip as the phone's caller ID and spam app - what lets it decline a ringing call. */
-    private val locationPermission = registerForActivityResult(
+    private val callScreeningRole = registerForActivityResult(StartActivityForResult()) { result ->
-        androidx.activity.result.contract.ActivityResultContracts.RequestPermission(),
+        if (result.resultCode != RESULT_OK) GearslipLog.w("calls: call screening role declined")
-    ) { }
+    }
-
-    /** The car dashboard's agenda card; declined just leaves it empty rather than asking again. */
-    private val calendarPermission = registerForActivityResult(
-        androidx.activity.result.contract.ActivityResultContracts.RequestPermission(),
-    ) { }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        if (checkSelfPermission(android.Manifest.permission.ACCESS_FINE_LOCATION) !=
+        // Location, calendar, the phone/contacts group, and the microphone are asked for one at
-            android.content.pm.PackageManager.PERMISSION_GRANTED
+        // a time by PermissionsSetupScreen instead of here, each only after the driver taps
-        ) locationPermission.launch(android.Manifest.permission.ACCESS_FINE_LOCATION)
+        // Allow on a screen explaining what it is for. Firing them all from onCreate, unprompted,
-        if (checkSelfPermission(android.Manifest.permission.READ_CALENDAR) !=
+        // is both a bad first impression and unreliable: Android does not consistently show more
-            android.content.pm.PackageManager.PERMISSION_GRANTED
+        // than one system permission dialog fired back-to-back, which was silently dropping some.
-        ) calendarPermission.launch(android.Manifest.permission.READ_CALENDAR)
         enableEdgeToEdge()
         window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)
 
         GearslipLog.init(this)
+        GearslipLog.installCrashHandler()
         GearslipLog.i("Gearslip ready")
         CarSettings.init(this)
+        AppSettings.applyGearslipEnabled(this)
+        // A capture that died without tidying up would leave notifications exposed to every
+        // later screen share. Nothing is capturing if the service is not running, so undo it.
+        if (!app.seb3thehacker.gearslip.audio.AudioCaptureService.running) {
+            app.seb3thehacker.gearslip.audio.ScreenShareGuard.restore(this)
+        }
+        Prefetch.warm(this)
         CarEnvironment.setPhoneTheme(resources.configuration)
 
         setContent {
             GearslipTheme {
-                GearslipApp(onDisconnect = ::closeAccessory)
+                GearslipApp(onDisconnect = ::closeAccessory, onRequestCallScreening = ::requestCallScreeningRole)
             }
         }
 
@@ -141,6 +147,13 @@ class GearslipActivity : ComponentActivity(), Projection {
         CarEnvironment.setPhoneTheme(newConfig)
     }
 
+    // Throttled inside Prefetch, so this only does work if the last run was a while ago.
+    override fun onStart() {
+        super.onStart()
+        Prefetch.warm(this)
+        UsageStats.onAppOpened(this)
+    }
+
     override fun onNewIntent(intent: Intent) {
         super.onNewIntent(intent)
         handleIntent(intent)
@@ -159,6 +172,19 @@ class GearslipActivity : ComponentActivity(), Projection {
         GearslipLog.flush()
     }
 
+    /** Launches the system dialog that offers Gearslip the call-screening role, if it isn't held already. */
+    private fun requestCallScreeningRole() {
+        val roleManager = getSystemService(android.app.role.RoleManager::class.java)
+        if (roleManager == null || !roleManager.isRoleAvailable(android.app.role.RoleManager.ROLE_CALL_SCREENING)) {
+            GearslipLog.w("calls: call screening role unavailable on this phone")
+            return
+        }
+        if (roleManager.isRoleHeld(android.app.role.RoleManager.ROLE_CALL_SCREENING)) return
+        runCatching {
+            callScreeningRole.launch(roleManager.createRequestRoleIntent(android.app.role.RoleManager.ROLE_CALL_SCREENING))
+        }.onFailure { GearslipLog.e("could not ask for the call screening role", it) }
+    }
+
     // --- Media audio --------------------------------------------------------------------
 
     private fun requestAudioCapture() {
@@ -224,6 +250,12 @@ class GearslipActivity : ComponentActivity(), Projection {
 
     private fun handleIntent(intent: Intent?) {
         if (intent?.action != UsbManager.ACTION_USB_ACCESSORY_ATTACHED) return
+        // Switched off in Settings: the system shouldn't route the car here at all, but if it
+        // does, leave the accessory alone.
+        if (!AppSettings.gearslipEnabled(this)) {
+            GearslipLog.i("accessory attached, but Gearslip is switched off - not connecting")
+            return
+        }
         val accessory = intent.getParcelableExtra(UsbManager.EXTRA_ACCESSORY, UsbAccessory::class.java)
         if (accessory == null) {
             GearslipLog.e("attach intent carried no accessory")
@@ -235,10 +267,13 @@ class GearslipActivity : ComponentActivity(), Projection {
     }
 
     private fun start(accessory: UsbAccessory) {
-        if (worker?.isAlive == true) {
+        // A fresh ATTACHED intent means the system wants a new session, whatever state the old
-            GearslipLog.w("a run is already in progress")
+        // one is in - closing first guarantees openAccessory() below never fights a descriptor
-            return
+        // this same process forgot to release. The old worker thread often isn't alive by this
-        }
+        // point anyway (its read loop already died when the head unit dropped the transport),
+        // but the accessory it opened was never explicitly closed, which is what actually blocks
+        // a re-open - a dead thread does not release the file descriptor on its own.
+        closeAccessory()
         describe(accessory)
 
         val manager = getSystemService(UsbManager::class.java)
@@ -268,6 +303,7 @@ class GearslipActivity : ComponentActivity(), Projection {
 
     private fun closeAccessory() {
         runner?.stop()
+        SessionReport.print()
         runCatching { descriptor?.close() }
         descriptor = null
         runner = null
@@ -284,19 +320,26 @@ class GearslipActivity : ComponentActivity(), Projection {
             CarEnvironment.setDisplay(width, height, densityDpi)
             CarEnvironment.start(this)
             showCarUi()
+            app.seb3thehacker.gearslip.car.CarKeys.focusSink = { code, down ->
+                runOnUiThread { screenProjector?.dispatchKey(code, down) }
+            }
         }
     }
 
-    override fun onTouch(action: Int, x: Float, y: Float) {
+    override fun onTouch(action: Int, actionIndex: Int, points: List<TouchPoint>) {
-        runOnUiThread {
+        // To the front of the main thread's queue: a touch waiting behind other work is lag the
-            if (PhoneMirror.active.value) relayTouch(action, x, y)
+        // driver feels, while the work it jumps ahead of can wait a frame.
-            else screenProjector?.dispatchTouch(action, x, y)
+        mainHandler.postAtFrontOfQueue {
+            // Mirroring drives one phone touch at a time, so it follows the first finger only.
+            if (PhoneMirror.active.value) points.firstOrNull()?.let { relayTouch(action, it.x, it.y) }
+            else screenProjector?.dispatchTouch(action, actionIndex, points)
         }
     }
 
     override fun onProjectionStopped() {
         runOnUiThread {
             PhoneMirror.requestStop()
+            app.seb3thehacker.gearslip.car.CarKeys.focusSink = null
             screenProjector?.stop()
             screenProjector = null
             surface = null

gearslip/src/main/java/app/seb3thehacker/gearslip/GearslipLog.kt

@@ -31,6 +31,13 @@ object GearslipLog {
 
     private var file: File? = null
 
+    /**
+     * Off drops the noisy trace output (hex dumps, and logcat copies of info lines); warnings,
+     * errors and the file copy are always kept, so a crash report is never empty. Always on for
+     * now, while the project is pre-release.
+     */
+    @Volatile var debug = true
+
     // What the live log screen shows. Bounded, and separate from the file, which always keeps
     // everything. The flow carries only a version number so a burst of lines costs the UI one
     // snapshot per frame rather than one list copy per line.
@@ -44,6 +51,7 @@ object GearslipLog {
         val name = SimpleDateFormat("yyyyMMdd-HHmmss", Locale.US).format(Date())
         file = File(dir, "gearslip-$name.log")
         i("log file: ${file?.absolutePath}")
+        SessionReport.init(context)
     }
 
     fun snapshot(): List<String> = synchronized(live) { live.toList() }
@@ -61,13 +69,81 @@ object GearslipLog {
         return if (f != null && f.isFile) f.readText() else snapshot().joinToString("\n")
     }
 
-    fun i(message: String) = write("I", message)
+    /**
+     * The current session's log, with the session report on top, copied to the cache dir for
+     * sharing as an attachment (a whole log can exceed what an Intent may carry as text).
+     */
+    fun shareableFile(context: Context): android.net.Uri {
+        val dir = File(context.cacheDir, "shared").apply { mkdirs() }
+        dir.listFiles()?.forEach { it.delete() }
+        val out = File(dir, "gearslip-log.txt")
+        out.writeText(SessionReport.render() + "\n\n" + fullText())
+        return androidx.core.content.FileProvider.getUriForFile(
+            context, "${context.packageName}.logshare", out,
+        )
+    }
 
-    fun w(message: String) = write("W", message)
+    fun i(message: String, tag: String = "APP") = write("I", message, tag)
 
-    fun e(message: String, t: Throwable? = null) {
+    fun w(message: String, tag: String = "APP") = write("W", message, tag)
-        write("E", if (t == null) message else "$message: ${t.javaClass.simpleName}: ${t.message}")
+
-        if (t != null) Log.e(TAG, message, t)
+    /** Logs the message, then the exception with its cause chain and top stack frames. */
+    fun e(message: String, t: Throwable? = null, tag: String = "APP") {
+        write("E", if (t == null) message else "$message: ${rootCause(t)}", tag)
+        if (t != null) {
+            Log.e(TAG, message, t)
+            stackTrace(t).lines().forEach { write("E", "    $it", tag) }
+        }
+    }
+
+    /** A logger that stamps every line with [tag], so the log can be scanned by subsystem. */
+    fun tagged(tag: String) = Tagged(tag)
+
+    class Tagged(private val tag: String) {
+        fun i(message: String) = GearslipLog.i(message, tag)
+        fun w(message: String) = GearslipLog.w(message, tag)
+        fun e(message: String, t: Throwable? = null) = GearslipLog.e(message, t, tag)
+        fun hex(label: String, data: ByteArray, limit: Int = 256) = GearslipLog.hex(label, data, limit, tag)
+        fun verdict(headline: String, detail: String) = GearslipLog.verdict(headline, detail)
+        fun flush() = GearslipLog.flush()
+    }
+
+    /** "SSLHandshakeException: Received fatal alert: bad_certificate" - the deepest cause wins. */
+    fun rootCause(t: Throwable): String {
+        var cause: Throwable = t
+        while (cause.cause != null && cause.cause !== cause) cause = cause.cause!!
+        val top = "${t.javaClass.simpleName}: ${t.message}"
+        return if (cause === t) top else "$top <- ${cause.javaClass.simpleName}: ${cause.message}"
+    }
+
+    private fun stackTrace(t: Throwable, frames: Int = 12): String {
+        val out = StringBuilder()
+        var cause: Throwable? = t
+        var depth = 0
+        while (cause != null && depth < 4) {
+            if (depth > 0) out.append("caused by ${cause.javaClass.name}: ${cause.message}\n")
+            cause.stackTrace.take(frames).forEach { out.append("at $it\n") }
+            cause = cause.cause?.takeIf { it !== cause }
+            depth++
+        }
+        return out.toString().trimEnd()
+    }
+
+    /**
+     * Records an uncaught exception in the log file before the process dies, then lets the
+     * system's own handler run. Without it the file ends mid-sentence and the reason is lost.
+     */
+    fun installCrashHandler() {
+        val previous = Thread.getDefaultUncaughtExceptionHandler()
+        Thread.setDefaultUncaughtExceptionHandler { thread, throwable ->
+            runCatching {
+                SessionReport.fail(SessionReport.Category.CRASH, "uncaught in thread ${thread.name}", throwable)
+                e("FATAL uncaught exception in thread ${thread.name}", throwable)
+                SessionReport.print()
+                flush()
+            }
+            previous?.uncaughtException(thread, throwable)
+        }
     }
 
     /** Unmissable in a scrolling logcat - this is what the whole spike exists to print. */
@@ -89,7 +165,8 @@ object GearslipLog {
         runCatching { latch.await(timeoutMs, TimeUnit.MILLISECONDS) }
     }
 
-    fun hex(label: String, data: ByteArray, limit: Int = 256) {
+    fun hex(label: String, data: ByteArray, limit: Int = 256, tag: String = "APP") {
+        if (!debug) return
         val shown = minOf(data.size, limit)
         val sb = StringBuilder()
         for (idx in 0 until shown) {
@@ -97,16 +174,16 @@ object GearslipLog {
             if (idx % 16 == 15) sb.append('\n') else sb.append(' ')
         }
         val suffix = if (data.size > limit) "\n... (${data.size - limit} more bytes)" else ""
-        i("$label (${data.size} bytes)\n$sb$suffix")
+        i("$label (${data.size} bytes)\n$sb$suffix", tag)
     }
 
-    private fun write(level: String, message: String) {
+    private fun write(level: String, message: String, tag: String = "APP") {
         when (level) {
             "W" -> Log.w(TAG, message)
             "E" -> Log.e(TAG, message)
-            else -> Log.i(TAG, message)
+            else -> if (debug) Log.i(TAG, message)
         }
-        val line = "${stamp.format(Date())} $level $message"
+        val line = "${stamp.format(Date())} $level ${tag.padEnd(5)} $message"
         synchronized(live) {
             live.addLast(line)
             while (live.size > MAX_LIVE_LINES) live.removeFirst()

gearslip/src/main/java/app/seb3thehacker/gearslip/PemKeyParser.kt

@@ -0,0 +1,125 @@
+package app.seb3thehacker.gearslip
+
+import java.io.ByteArrayInputStream
+import java.math.BigInteger
+import java.security.KeyFactory
+import java.security.KeyStore
+import java.security.cert.CertificateFactory
+import java.security.cert.X509Certificate
+import java.security.spec.RSAPrivateCrtKeySpec
+import java.security.spec.RSAPublicKeySpec
+
+/**
+ * Converts a PEM-encoded X.509 certificate and PEM-encoded RSA PKCS#1 private key into a
+ * PKCS#12 [KeyStore], using only standard JCA APIs — no BouncyCastle.
+ *
+ * The DER parsing of the PKCS#1 key is done by hand (matching the same approach used in
+ * [SelfSignedCert] for writing). Android's Conscrypt [KeyFactory] only accepts PKCS#8,
+ * so we translate PKCS#1 → [RSAPrivateCrtKeySpec] ourselves.
+ */
+object PemKeyParser {
+
+    private const val CERT_HEADER = "-----BEGIN CERTIFICATE-----"
+    private const val CERT_FOOTER = "-----END CERTIFICATE-----"
+    private const val KEY_HEADER = "-----BEGIN RSA PRIVATE KEY-----"
+    private const val KEY_FOOTER = "-----END RSA PRIVATE KEY-----"
+
+    class Result(val keyStore: KeyStore, val certificate: X509Certificate)
+
+    /**
+     * Parses PEM strings for the certificate and private key, verifies they match, and
+     * returns a PKCS#12 [KeyStore] ready for [CertProvider] to consume.
+     */
+    fun build(certificatePem: String, privateKeyPem: String, alias: String = "phone"): Result {
+        val cert = parseCertificate(certificatePem)
+        val keySpec = parsePrivateKey(privateKeyPem)
+
+        val kf = KeyFactory.getInstance("RSA")
+        val pubSpec = RSAPublicKeySpec(keySpec.spec.modulus, keySpec.spec.publicExponent)
+        require(kf.generatePublic(pubSpec) == cert.publicKey) {
+            "the certificate's public key does not match the private key"
+        }
+
+        val keyStore = KeyStore.getInstance("PKCS12").apply {
+            load(null, null)
+            setKeyEntry(alias, keySpec.getPrivate(), CharArray(0), arrayOf(cert))
+        }
+        return Result(keyStore, cert)
+    }
+
+    /** Strips PEM headers/footers and decodes the base64 body. */
+    fun parseCertificate(pem: String): X509Certificate {
+        val der = pemToDer(pem, CERT_HEADER, CERT_FOOTER)
+        return CertificateFactory.getInstance("X.509")
+            .generateCertificate(ByteArrayInputStream(der)) as X509Certificate
+    }
+
+    /** Parses an RSA PKCS#1 private key (ASN.1 DER) into a key spec. */
+    fun parsePrivateKey(pem: String): KeySpec {
+        val der = pemToDer(pem, KEY_HEADER, KEY_FOOTER)
+        val integers = readPkcs1Sequence(der)
+        require(integers.size == 9) { "PKCS#1 RSA key needs 9 integers, got ${integers.size}" }
+        val spec = RSAPrivateCrtKeySpec(integers[1], integers[2], integers[3], integers[4], integers[5], integers[6], integers[7], integers[8])
+        val privateKey = KeyFactory.getInstance("RSA").generatePrivate(spec)
+        return KeySpec(spec, privateKey)
+    }
+
+    /** Holds both the spec and the constructed key for matching against a certificate's public key. */
+    class KeySpec(val spec: RSAPrivateCrtKeySpec, private val privateKey: java.security.PrivateKey) {
+        fun getPrivate() = privateKey
+    }
+
+    /** Strips headers and decodes base64. */
+    private fun pemToDer(pem: String, header: String, footer: String): ByteArray {
+        val start = pem.indexOf(header)
+        val end = pem.indexOf(footer)
+        if (start == -1 || end == -1 || end <= start) {
+            throw IllegalArgumentException("not a valid PEM $header block")
+        }
+        val b64 = pem.substring(start + header.length, end)
+            .replace(Regex("\\s+"), "")
+        return java.util.Base64.getDecoder().decode(b64)
+    }
+
+    /**
+     * Parses the inner SEQUENCE of an RSA PKCS#1 DER blob into a list of [BigInteger]s.
+     * Throws if the ASN.1 structure is wrong, so caller gets a clear error rather than a
+     * silent wrong key.
+     */
+    private fun readPkcs1Sequence(der: ByteArray): List<BigInteger> {
+        var pos = 0
+        fun readTag(): Int {
+            require(pos < der.size) { "unexpected end of DER at tag" }
+            return der[pos++].toInt() and 0xFF
+        }
+        fun readLength(): Int {
+            require(pos < der.size) { "unexpected end of DER at length" }
+            val b0 = der[pos++].toInt() and 0xFF
+            if (b0 < 0x80) return b0
+            val numBytes = b0 and 0x7F
+            require(pos + numBytes <= der.size) { "truncated long-form length" }
+            var result = 0
+            repeat(numBytes) {
+                result = (result shl 8) or (der[pos++].toInt() and 0xFF)
+            }
+            return result
+        }
+
+        val outerTag = readTag()
+        require(outerTag == 0x30) { "expected SEQUENCE (0x30), got 0x${outerTag.toString(16)}" }
+        val outerLen = readLength()
+        require(pos + outerLen <= der.size) { "SEQUENCE length $outerLen exceeds remaining data" }
+
+        val integers = mutableListOf<BigInteger>()
+        while (pos < der.size) {
+            val tag = readTag()
+            require(tag == 0x02) { "expected INTEGER (0x02), got 0x${tag.toString(16)} at offset ${pos - 1}" }
+            val len = readLength()
+            require(pos + len <= der.size) { "INTEGER length $len exceeds remaining data" }
+            integers.add(BigInteger(der.copyOfRange(pos, pos + len)))
+            pos += len
+        }
+        require(integers.size == 9) { "PKCS#1 RSA key needs 9 integers, got ${integers.size}" }
+        return integers
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/PhoneTls.kt

@@ -29,6 +29,7 @@ import javax.net.ssl.X509ExtendedTrustManager
  * the right tool.
  */
 class PhoneTls(keyStore: KeyStore, password: CharArray) {
+    private val log = GearslipLog.tagged("TLS")
 
     private val engine: SSLEngine
     private var netIn = ByteArray(0)
@@ -156,7 +157,7 @@ class PhoneTls(keyStore: KeyStore, password: CharArray) {
                     continue
                 }
                 SSLEngineResult.Status.BUFFER_UNDERFLOW -> {
-                    GearslipLog.w("decrypt: record split across frames (${source.remaining()} bytes left over)")
+                    log.w("decrypt: record split across frames (${source.remaining()} bytes left over)")
                     break
                 }
                 SSLEngineResult.Status.CLOSED -> break
@@ -173,26 +174,29 @@ class PhoneTls(keyStore: KeyStore, password: CharArray) {
 
     private fun describeSession() {
         val session = engine.session
-        GearslipLog.i("TLS handshake COMPLETE - protocol=${session.protocol} cipher=${session.cipherSuite}")
+        log.i("TLS handshake COMPLETE - protocol=${session.protocol} cipher=${session.cipherSuite}")
+        SessionReport.tls(session.protocol, session.cipherSuite)
         try {
             val peers = session.peerCertificates
-            GearslipLog.i("head unit presented ${peers.size} certificate(s):")
+            log.i("head unit presented ${peers.size} certificate(s):")
             peers.forEachIndexed { index, certificate ->
                 if (certificate is X509Certificate) {
-                    GearslipLog.i("  [$index] subject=${certificate.subjectX500Principal}")
+                    log.i("  [$index] subject=${certificate.subjectX500Principal}")
-                    GearslipLog.i("       issuer =${certificate.issuerX500Principal}")
+                    log.i("       issuer =${certificate.issuerX500Principal}")
-                    GearslipLog.i("       serial =${certificate.serialNumber} valid=${certificate.notBefore}..${certificate.notAfter}")
+                    log.i("       serial =${certificate.serialNumber} valid=${certificate.notBefore}..${certificate.notAfter}")
                 }
             }
         } catch (_: SSLPeerUnverifiedException) {
-            GearslipLog.i("head unit presented NO certificate (we asked but did not require one)")
+            log.i("head unit presented NO certificate (we asked but did not require one)")
         }
     }
 
     /** Accepts everything and reports what it saw. We want the data, not a verdict. */
     private class LoggingTrustManager : X509ExtendedTrustManager() {
+        private val log = GearslipLog.tagged("TLS")
+
         override fun checkClientTrusted(chain: Array<out X509Certificate>?, authType: String?) {
-            GearslipLog.i("peer certificate offered (authType=$authType, chain=${chain?.size ?: 0}) - accepting")
+            log.i("peer certificate offered (authType=$authType, chain=${chain?.size ?: 0}) - accepting")
         }
 
         override fun checkClientTrusted(chain: Array<out X509Certificate>?, authType: String?, socket: Socket?) =

gearslip/src/main/java/app/seb3thehacker/gearslip/ProjectedContent.kt

@@ -8,8 +8,7 @@ object ProjectedContent {
 
     /**
      * Precedence: the URL saved in Settings, then a `url.txt` in the external files dir (the
-     * pre-Settings way, still honoured so existing setups keep working), then the built-in
+     * pre-Settings way, still honoured so existing setups keep working), then [DEFAULT_URL].
-     * test page.
      */
     fun resolve(context: Context): String {
         val saved = AppSettings.startupUrl(context)
@@ -26,9 +25,12 @@ object ProjectedContent {
                 return url
             }
         }
-        return TEST_PAGE
+        return DEFAULT_URL
     }
 
+    /** What the Web app opens until a page is chosen in Settings. */
+    const val DEFAULT_URL = "https://duckduckgo.com"
+
     /** A bare "example.com" is a URL the user meant; raw HTML is passed through untouched. */
     private fun normalize(value: String): String =
         if (value.startsWith("<") || "://" in value) value else "https://$value"

gearslip/src/main/java/app/seb3thehacker/gearslip/Projection.kt

@@ -17,9 +17,14 @@ interface Projection {
     /**
      * A touch from the head unit, already scaled into projected-video coordinates.
      * [action] is an Android MotionEvent action - Android Auto's PointerAction enum uses
-     * identical values (DOWN=0, UP=1, MOVED=2, POINTER_DOWN=5, POINTER_UP=6).
+     * identical values (DOWN=0, UP=1, MOVED=2, POINTER_DOWN=5, POINTER_UP=6). [points] is every
+     * finger currently down, and [actionIndex] says which of them [action] is about, so a pinch
+     * arrives as it would on the phone's own screen.
      */
-    fun onTouch(action: Int, x: Float, y: Float)
+    fun onTouch(action: Int, actionIndex: Int, points: List<TouchPoint>)
 
     fun onProjectionStopped()
 }
+
+/** One finger on the car's screen: a stable [id] for as long as it stays down, and where it is. */
+class TouchPoint(val id: Int, val x: Float, val y: Float)

gearslip/src/main/java/app/seb3thehacker/gearslip/Protobuf.kt

@@ -35,7 +35,10 @@ object Protobuf {
         varint((field shl 3).toLong()) + varint(value)
 
     /** Reads the single int32 in AuthResponse. Negative values are 10-byte varints. */
-    fun readInt32Field(data: ByteArray, field: Int): Int? {
+    fun readInt32Field(data: ByteArray, field: Int): Int? = readInt64Field(data, field)?.toInt()
+
+    /** Reads a varint field whole, for int64s such as a ping's timestamp. */
+    fun readInt64Field(data: ByteArray, field: Int): Long? {
         var pos = 0
         while (pos < data.size) {
             val (tag, afterTag) = readVarint(data, pos) ?: return null
@@ -45,7 +48,7 @@ object Protobuf {
                 0 -> {
                     val (value, afterValue) = readVarint(data, pos) ?: return null
                     pos = afterValue
-                    if (number == field) return value.toInt()
+                    if (number == field) return value
                 }
                 2 -> {
                     val (len, afterLen) = readVarint(data, pos) ?: return null

gearslip/src/main/java/app/seb3thehacker/gearslip/ScreenProjector.kt

@@ -45,7 +45,19 @@ class ScreenProjector(private val context: Context) {
     /** Tracks the synthetic gesture so injected MotionEvents have a coherent downTime. */
     private var downTime = 0L
 
-    fun start(surface: Surface, width: Int, height: Int, densityDpi: Int, content: @Composable () -> Unit) {
+    /**
+     * [name] names the virtual display so the two callers are told apart from outside the app
+     * (`dumpsys display`): the real car session keeps "gearslip-projection", the on-phone bench
+     * preview passes "gearslip-preview".
+     */
+    fun start(
+        surface: Surface,
+        width: Int,
+        height: Int,
+        densityDpi: Int,
+        name: String = "gearslip-projection",
+        content: @Composable () -> Unit,
+    ) {
         stop()
 
         val displayManager = context.getSystemService(DisplayManager::class.java)
@@ -57,7 +69,7 @@ class ScreenProjector(private val context: Context) {
         // driver on every connect.
         val display = try {
             displayManager.createVirtualDisplay(
-                "gearslip-projection", width, height, densityDpi, surface,
+                name, width, height, densityDpi, surface,
                 DisplayManager.VIRTUAL_DISPLAY_FLAG_PRESENTATION or
                     DisplayManager.VIRTUAL_DISPLAY_FLAG_OWN_CONTENT_ONLY,
             )
@@ -136,13 +148,41 @@ class ScreenProjector(private val context: Context) {
         }
     }
 
-    /** [action] is already an Android MotionEvent action; x/y are in projected coordinates. */
+    /**
-    fun dispatchTouch(action: Int, x: Float, y: Float) {
+     * [action] is already an Android MotionEvent action; [points] are in projected coordinates and
+     * hold every finger down, with [actionIndex] naming the one the action is about. Two fingers
+     * arrive as one gesture, so pinch and two-finger drags work as they do on the phone itself.
+     */
+    fun dispatchTouch(action: Int, actionIndex: Int, points: List<TouchPoint>) {
         val target = root ?: return
+        if (points.isEmpty()) return
         val now = SystemClock.uptimeMillis()
         if (action == MotionEvent.ACTION_DOWN || downTime == 0L) downTime = now
 
-        val event = MotionEvent.obtain(downTime, now, action, x, y, 0)
+        val properties = Array(points.size) { i ->
+            MotionEvent.PointerProperties().apply {
+                id = points[i].id
+                toolType = MotionEvent.TOOL_TYPE_FINGER
+            }
+        }
+        val coords = Array(points.size) { i ->
+            MotionEvent.PointerCoords().apply {
+                x = points[i].x
+                y = points[i].y
+                pressure = 1f
+                size = 1f
+            }
+        }
+        // A second finger going down or up carries which finger it was in the action itself.
+        val encoded = when (action) {
+            MotionEvent.ACTION_POINTER_DOWN, MotionEvent.ACTION_POINTER_UP ->
+                action or (actionIndex shl MotionEvent.ACTION_POINTER_INDEX_SHIFT)
+            else -> action
+        }
+        val event = MotionEvent.obtain(
+            downTime, now, encoded, points.size, properties, coords,
+            0, 0, 1f, 1f, 0, 0, android.view.InputDevice.SOURCE_TOUCHSCREEN, 0,
+        )
         try {
             target.dispatchTouchEvent(event)
         } finally {
@@ -151,6 +191,28 @@ class ScreenProjector(private val context: Context) {
         if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) downTime = 0L
     }
 
+    /**
+     * A key from the car's D-pad or knob, as a hardware key event on the car display. Compose
+     * moves focus between buttons on arrows and Tab, and clicks the focused one on OK/Enter.
+     * [keyCode] of [CarKeys.KEYCODE_SHIFT_TAB] is Tab with Shift held.
+     */
+    fun dispatchKey(keyCode: Int, down: Boolean) {
+        val target = root ?: return
+        // Nothing on the display takes keys until something in it holds focus.
+        if (target.findFocus() == null) target.requestFocus()
+        val shift = keyCode == app.seb3thehacker.gearslip.car.CarKeys.KEYCODE_SHIFT_TAB
+        val code = if (shift) android.view.KeyEvent.KEYCODE_TAB else keyCode
+        val now = SystemClock.uptimeMillis()
+        val event = android.view.KeyEvent(
+            now, now,
+            if (down) android.view.KeyEvent.ACTION_DOWN else android.view.KeyEvent.ACTION_UP,
+            code, 0,
+            if (shift) android.view.KeyEvent.META_SHIFT_ON or android.view.KeyEvent.META_SHIFT_LEFT_ON else 0,
+            android.view.KeyCharacterMap.VIRTUAL_KEYBOARD, 0, 0, android.view.InputDevice.SOURCE_DPAD,
+        )
+        target.dispatchKeyEvent(event)
+    }
+
     fun stop() {
         runCatching { presentation?.dismiss() }
         runCatching { owner?.destroy() }

gearslip/src/main/java/app/seb3thehacker/gearslip/ServiceDiscovery.kt

@@ -20,8 +20,8 @@ object ServiceDiscovery {
 
     /**
      * [widthMargin]/[heightMargin] are the head unit's own numbers (VideoConfiguration fields 3
-     * and 4): pixels of the frame it does not treat as usable UI. Logged, and available to a
+     * and 4): pixels of the frame it crops away, split evenly between the two edges, to fit the
-     * vehicle profile, but not applied automatically - what they mean varies by unit.
+     * frame to a screen of a different shape. A matched vehicle profile's insets override them.
      */
     class VideoConfig(
         val resolution: Int,
@@ -38,11 +38,21 @@ object ServiceDiscovery {
 
         fun pixelCount(): Int = pixelSize()?.let { it.first * it.second } ?: Int.MAX_VALUE
 
+        /** What's left on the car's screen once the margins are cropped off. */
+        fun visibleSize(): Pair<Int, Int>? = pixelSize()?.let { (w, h) -> (w - widthMargin) to (h - heightMargin) }
+
+        /** The margins as the strips of the frame the car UI keeps clear. */
+        fun marginInsets(): Insets = Insets(
+            top = heightMargin / 2, bottom = heightMargin - heightMargin / 2,
+            left = widthMargin / 2, right = widthMargin - widthMargin / 2,
+        )
+
         override fun toString() =
             "$resolutionName @ $frameRateName, density=$density, margin=${widthMargin}x$heightMargin"
     }
 
-    class VideoService(val serviceId: Int, val codecType: Int, val configs: List<VideoConfig>) {
+    /** [displayId] is MediaSinkService field 6: 0, the default, is the main screen. */
+    class VideoService(val serviceId: Int, val codecType: Int, val configs: List<VideoConfig>, val displayId: Int = 0) {
         val codecName: String get() = CODECS[codecType] ?: "unknown($codecType)"
     }
 
@@ -89,6 +99,48 @@ object ServiceDiscovery {
         }
     }
 
+    /**
+     * The media sink to stream to. Gearslip sends raw PCM, so a PCM sink wins: the 2022 Dacia
+     * Jogger (LGE ULC 4.5) lists an AAC media sink on channel 3 before a PCM one on channel 5,
+     * and PCM pushed into the AAC sink was acked but played as silence. With no PCM sink, the
+     * first media sink is the best there is.
+     */
+    fun pickMediaSink(sinks: List<AudioService>): AudioService? {
+        val media = sinks.filter { it.streamType == STREAM_MEDIA }
+        return media.firstOrNull { it.codecType == CODEC_PCM } ?: media.firstOrNull()
+    }
+
+    /**
+     * The car's microphone, from MediaSourceService (Service field 5):
+     *   MediaSourceService { MediaCodecType available_type = 1; AudioConfiguration audio_config = 2;
+     *                        bool available_while_in_call = 3; }
+     * Null when the head unit has none.
+     */
+    fun findMicService(response: ByteArray): AudioService? {
+        for (channel in Wire.allBytes(Wire.fields(response), 1)) {
+            val service = Wire.fields(channel)
+            val id = Wire.varint(service, 1)?.toInt() ?: continue
+            val source = Wire.fields(Wire.bytes(service, 5) ?: continue)
+            val f = Wire.fields(Wire.bytes(source, 2) ?: continue)
+            return AudioService(
+                serviceId = id,
+                streamType = 0,
+                codecType = Wire.varint(source, 1)?.toInt() ?: CODEC_PCM,
+                configs = listOf(
+                    AudioConfig(
+                        sampleRate = Wire.varint(f, 1)?.toInt() ?: 16_000,
+                        bits = Wire.varint(f, 2)?.toInt() ?: 16,
+                        channels = Wire.varint(f, 3)?.toInt() ?: 1,
+                    ),
+                ),
+            )
+        }
+        return null
+    }
+
+    const val STREAM_MEDIA = 3
+    const val CODEC_PCM = 1
+
     private val STREAMS = mapOf(0 to "NONE", 1 to "GUIDANCE", 2 to "SYSTEM_AUDIO", 3 to "MEDIA", 4 to "TELEPHONY")
 
     private val RESOLUTIONS = mapOf(
@@ -106,30 +158,83 @@ object ServiceDiscovery {
     )
 
     /**
-     * The head unit's touchscreen, from InputSourceService (Service field 4):
+     * The head unit's touchscreen and button set, from InputSourceService (Service field 4):
-     *   InputSourceService { keycodes = 1; repeated TouchScreen touchscreen = 2; ... }
+     *   InputSourceService { repeated int32 keycodes_supported = 1 [packed=true];
+     *                         repeated TouchScreen touchscreen = 2; ... }
      *   TouchScreen { required int32 width = 1; required int32 height = 2; type = 3; }
      *
      * Touch coordinates arrive in this space (1258x708 on the 2018 Uconnect) and must be
-     * scaled to the projected video size before injection.
+     * scaled to the projected video size before injection. [keycodesSupported] is what the
+     * head unit says it will actually send over the Input channel as key events (steering-wheel
+     * buttons, etc.) - not every unit reports the same set, so it's kept for diagnostics and to
+     * know ahead of time whether a button like voice/PTT is even wired up on this hardware.
      */
-    class InputService(val serviceId: Int, val touchWidth: Int, val touchHeight: Int)
+    class InputService(
+        val serviceId: Int,
+        val touchWidth: Int,
+        val touchHeight: Int,
+        val keycodesSupported: List<Int> = emptyList(),
+        /** InputSourceService field 5: which screen this input belongs to, 0 for the main one. */
+        val displayId: Int = 0,
+    )
 
-    fun findInputService(response: ByteArray): InputService? {
+    /**
+     * The input for the screen Gearslip projects to ([displayId]). A head unit with two screens
+     * offers an input service for each: LIVI lists an empty one for its second screen first,
+     * and taking that one left every touch on the real touchscreen ignored.
+     */
+    fun findInputService(response: ByteArray, displayId: Int = 0): InputService? {
+        val inputs = inputServices(response)
+        return inputs.firstOrNull { it.displayId == displayId }
+            ?: inputs.firstOrNull { it.touchWidth > 0 && it.touchHeight > 0 }
+            ?: inputs.firstOrNull()
+    }
+
+    private fun inputServices(response: ByteArray): List<InputService> = buildList {
         for (channel in Wire.allBytes(Wire.fields(response), 1)) {
             val service = Wire.fields(channel)
             val id = Wire.varint(service, 1)?.toInt() ?: continue
             val input = Wire.bytes(service, 4) ?: continue
-            val touch = Wire.bytes(Wire.fields(input), 2) ?: continue
+            val inputFields = Wire.fields(input)
-            val touchFields = Wire.fields(touch)
+            // A unit with only a knob and buttons has no touchscreen entry; it still has keys.
-            val width = Wire.varint(touchFields, 1)?.toInt() ?: continue
+            val touchFields = Wire.bytes(inputFields, 2)?.let { Wire.fields(it) }.orEmpty()
-            val height = Wire.varint(touchFields, 2)?.toInt() ?: continue
+            val width = Wire.varint(touchFields, 1)?.toInt() ?: 0
-            return InputService(id, width, height)
+            val height = Wire.varint(touchFields, 2)?.toInt() ?: 0
+            // Declared packed, but some units send each keycode as its own field.
+            val keycodes = inputFields.filter { it.number == 1 }.flatMap { f ->
+                f.bytes?.let(::packedVarints) ?: listOf(f.varint.toInt())
+            }
+            add(InputService(id, width, height, keycodes, Wire.varint(inputFields, 5)?.toInt() ?: 0))
         }
-        return null
     }
 
+    /** Decodes a `[packed=true]` repeated varint field's raw bytes into individual values. */
+    private fun packedVarints(data: ByteArray): List<Int> = buildList {
+        var pos = 0
+        while (pos < data.size) {
+            var result = 0L
+            var shift = 0
+            while (pos < data.size) {
+                val b = data[pos].toInt() and 0xFF
+                result = result or ((b and 0x7F).toLong() shl shift)
+                pos++
+                if (b and 0x80 == 0) break
+                shift += 7
+            }
+            add(result.toInt())
+        }
+    }
+
+    /**
+     * The main screen's video sink. A head unit with a second screen, such as LIVI with a
+     * cluster display, offers a sink for each; the one without a display id (0) is the main one.
+     */
     fun findVideoService(response: ByteArray): VideoService? {
+        val sinks = videoServices(response)
+        return sinks.firstOrNull { it.displayId == 0 } ?: sinks.firstOrNull()
+    }
+
+    private fun videoServices(response: ByteArray): List<VideoService> = buildList {
         for (channel in Wire.allBytes(Wire.fields(response), 1)) {
             val service = Wire.fields(channel)
             val id = Wire.varint(service, 1)?.toInt() ?: continue
@@ -150,7 +255,31 @@ object ServiceDiscovery {
                     heightMargin = Wire.varint(f, 4)?.toInt() ?: 0,
                 )
             }
-            return VideoService(id, codecType, configs)
+            add(VideoService(id, codecType, configs, Wire.varint(sinkFields, 6)?.toInt() ?: 0))
+        }
+    }
+
+    /**
+     * The head unit's sensor feed, from SensorSourceService (Service field 2; field 5 is the car's mic):
+     *   SensorSourceService { repeated Sensor sensors = 1; }
+     *   Sensor { required SensorType sensor_type = 1; }
+     *
+     * Field numbers for what actually rides inside each SensorEvent once subscribed are not
+     * pinned down here - unlike video/audio/input, there's no independent source to check them
+     * against, so [CarSensors] shows the raw decode instead of trusting a guessed field map.
+     */
+    class SensorService(val serviceId: Int, val types: List<Int>)
+
+    fun findSensorService(response: ByteArray): SensorService? {
+        for (channel in Wire.allBytes(Wire.fields(response), 1)) {
+            val service = Wire.fields(channel)
+            val id = Wire.varint(service, 1)?.toInt() ?: continue
+            val sensorSource = Wire.bytes(service, 2) ?: continue
+            val types = Wire.allBytes(Wire.fields(sensorSource), 1).mapNotNull {
+                Wire.varint(Wire.fields(it), 1)?.toInt()
+            }
+            if (types.isEmpty()) continue
+            return SensorService(id, types)
         }
         return null
     }

gearslip/src/main/java/app/seb3thehacker/gearslip/SessionReport.kt

@@ -0,0 +1,159 @@
+package app.seb3thehacker.gearslip
+
+import android.content.Context
+import app.seb3thehacker.gearslip.stats.UsageStats
+import android.os.Build
+
+/**
+ * The facts a bug report needs, gathered as a session runs and printed as one readable block
+ * when it ends. The log holds the full trace; this holds the answer to "what went wrong,
+ * on what car, on what phone" so nobody has to read the trace to find out.
+ *
+ * Nothing here identifies a person: no serial numbers, accounts, locations or accessory
+ * serials. The head unit and vehicle strings are what the head unit itself announces.
+ */
+object SessionReport {
+
+    /** Where a session failed, coarse enough to count and group reports by. */
+    enum class Category(val label: String) {
+        NONE("none"),
+        USB("USB transport"),
+        NO_HANDSHAKE("head unit never started talking"),
+        TLS("TLS handshake failed"),
+        CERTIFICATE("certificate rejected by the head unit"),
+        AUTH("authentication failed"),
+        SERVICE_DISCOVERY("service discovery failed"),
+        VIDEO("video stream failed"),
+        BYEBYE("head unit ended the session"),
+        CRASH("app crash"),
+        UNKNOWN("unclassified"),
+    }
+
+    private var appVersion = "?"
+    private var appCode = 0L
+
+    @Volatile private var startedAt = 0L
+    @Volatile var category = Category.NONE; private set
+    @Volatile private var failure = ""
+    @Volatile private var protocolVersion = ""
+    @Volatile private var certSource = ""
+    @Volatile private var certIssuer = ""
+    @Volatile private var tlsProtocol = ""
+    @Volatile private var tlsCipher = ""
+    @Volatile private var authStatus: Int? = null
+    @Volatile private var headUnit = ""
+    @Volatile private var profile = ""
+    @Volatile private var video = ""
+    @Volatile private var audio = ""
+    @Volatile private var lastStream = ""
+    @Volatile private var lastState = ""
+    private var printed = false
+
+    private var appContext: Context? = null
+
+    fun init(context: Context) {
+        appContext = context.applicationContext
+        val info = runCatching { context.packageManager.getPackageInfo(context.packageName, 0) }.getOrNull()
+        appVersion = info?.versionName ?: "?"
+        appCode = info?.longVersionCode ?: 0
+    }
+
+    fun begin() {
+        startedAt = System.currentTimeMillis()
+        category = Category.NONE
+        failure = ""; protocolVersion = ""; certSource = ""; certIssuer = ""
+        tlsProtocol = ""; tlsCipher = ""; authStatus = null
+        headUnitInfo = null
+        carScreen = ""; carDpi = 0
+        headUnit = ""; profile = ""; video = ""; lastStream = ""; lastState = ""
+        printed = false
+    }
+
+    fun protocolVersion(major: Int, minor: Int) { protocolVersion = "$major.$minor" }
+    fun certificate(source: String, issuer: String) { certSource = source; certIssuer = issuer }
+    fun tls(protocol: String, cipher: String) { tlsProtocol = protocol; tlsCipher = cipher }
+    fun auth(status: Int) { authStatus = status }
+    fun headUnit(info: String) { headUnit = info }
+
+    /** Who the car said it is, for the opt-in usage note; null until service discovery. */
+    @Volatile var headUnitInfo: ServiceDiscovery.HeadUnitInfo? = null
+
+    /** The car screen's usable size once its margins are cropped, and its density; blank before video starts. */
+    @Volatile var carScreen = ""; private set
+    @Volatile var carDpi = 0; private set
+    fun carScreen(size: String, dpi: Int) { carScreen = size; carDpi = dpi }
+    fun profile(name: String?) { profile = name ?: "none matched" }
+    fun video(summary: String) { video = summary }
+    fun audio(summary: String) { audio = summary }
+    fun stream(summary: String) { lastStream = summary }
+
+    /** Records the first failure only: later ones are usually fallout from it. */
+    fun fail(category: Category, detail: String, state: String = "") {
+        if (this.category != Category.NONE) return
+        this.category = category
+        failure = detail
+        lastState = state
+    }
+
+    fun fail(category: Category, detail: String, t: Throwable, state: String = "") =
+        fail(category, "$detail (${GearslipLog.rootCause(t)})", state)
+
+    /** The report as plain text, for the log file and for anything that gets sent. */
+    fun render(): String {
+        val seconds = if (startedAt == 0L) 0 else (System.currentTimeMillis() - startedAt) / 1000
+        fun row(name: String, value: String) = if (value.isEmpty()) "" else "  ${name.padEnd(16)}$value\n"
+        return buildString {
+            append("=".repeat(60)).append('\n')
+            append("SESSION REPORT\n")
+            append(row("result", if (category == Category.NONE) "ok / no failure recorded" else "FAILED - ${category.label}"))
+            append(row("detail", failure))
+            append(row("failed in state", lastState))
+            append(row("duration", "${seconds}s"))
+            append("\n")
+            append(row("gearslip", "$appVersion (code $appCode)"))
+            append(row("phone", "${Build.MANUFACTURER} ${Build.MODEL}"))
+            append(row("android", "${Build.VERSION.RELEASE} (sdk ${Build.VERSION.SDK_INT}, patch ${Build.VERSION.SECURITY_PATCH})"))
+            append("\n")
+            append(row("head unit", headUnit))
+            append(row("AA protocol", protocolVersion))
+            append(row("profile", profile))
+            append("\n")
+            append(row("phone cert", certSource))
+            append(row("cert issuer", certIssuer))
+            append(row("TLS", listOf(tlsProtocol, tlsCipher).filter { it.isNotEmpty() }.joinToString(" / ")))
+            append(row("auth status", authStatus?.let { "$it (${authName(it)})" } ?: ""))
+            append("\n")
+            append(row("video", video))
+            append(row("audio", audio))
+            append(row("last stream stat", lastStream))
+            append("=".repeat(60))
+        }
+    }
+
+    /** Prints the report into the log, once per session. */
+    fun print() {
+        if (printed || startedAt == 0L) return
+        printed = true
+        render().lines().forEach { GearslipLog.i(it) }
+        appContext?.let { context ->
+            // Video started means the car showed Gearslip: that's a working car, and unplugging or
+            // switching the car off at the end shows up as a USB or ByeBye "failure" that isn't one.
+            val reached = carScreen.isNotEmpty()
+            val outcome = when {
+                reached && category in setOf(Category.NONE, Category.USB, Category.BYEBYE) -> "connected"
+                reached -> "connected, then ${category.label}"
+                category == Category.NONE -> "ended before video"
+                else -> category.label
+            }
+            runCatching { UsageStats.recordSession(context, headUnitInfo, protocolVersion, outcome, carScreen, carDpi) }
+        }
+        GearslipLog.flush()
+    }
+
+    private fun authName(status: Int) = when (status) {
+        0 -> "success"
+        -2 -> "certificate error"
+        -3 -> "authentication failure"
+        else -> "unknown"
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/TlsSelfTest.kt

@@ -21,12 +21,13 @@ import javax.net.ssl.X509ExtendedTrustManager
  * unit, not about this code.
  */
 object TlsSelfTest {
+    private val log = GearslipLog.tagged("TLS")
 
     fun run(identity: CertProvider.Identity): Boolean {
-        GearslipLog.i("=== TLS self-test starting ===")
+        log.i("=== TLS self-test starting ===")
-        GearslipLog.i("cert source: ${identity.source}")
+        log.i("cert source: ${identity.source}")
-        GearslipLog.i("  subject = ${identity.certificate.subjectX500Principal}")
+        log.i("  subject = ${identity.certificate.subjectX500Principal}")
-        GearslipLog.i("  issuer  = ${identity.certificate.issuerX500Principal}")
+        log.i("  issuer  = ${identity.certificate.issuerX500Principal}")
         return try {
             val server = PhoneTls(identity.keyStore, identity.password)
             val client = Driver(clientEngine())
@@ -44,7 +45,7 @@ object TlsSelfTest {
             }
 
             if (!server.handshakeComplete) {
-                GearslipLog.e("self-test FAILED: handshake did not complete after $rounds rounds")
+                log.e("self-test FAILED: handshake did not complete after $rounds rounds")
                 return false
             }
 
@@ -53,14 +54,14 @@ object TlsSelfTest {
             val plaintext = "gearslip round trip".toByteArray()
             val decrypted = client.decrypt(server.encrypt(plaintext))
             if (!decrypted.contentEquals(plaintext)) {
-                GearslipLog.e("self-test FAILED: round trip mismatch (${decrypted.size} bytes back)")
+                log.e("self-test FAILED: round trip mismatch (${decrypted.size} bytes back)")
                 return false
             }
 
-            GearslipLog.i("=== TLS self-test PASSED - certificate, key manager and engine are sound ===")
+            log.i("=== TLS self-test PASSED - certificate, key manager and engine are sound ===")
             true
         } catch (t: Throwable) {
-            GearslipLog.e("self-test FAILED with an exception", t)
+            log.e("self-test FAILED with an exception", t)
             false
         }
     }

gearslip/src/main/java/app/seb3thehacker/gearslip/VideoSource.kt

@@ -26,6 +26,7 @@ class VideoSource(
     private val onCodecConfig: (ByteArray) -> Unit,
     private val onFrame: (data: ByteArray, presentationTimeUs: Long, keyFrame: Boolean) -> Unit,
 ) {
+    private val log = GearslipLog.tagged("VIDEO")
 
     /**
      * TEST_CARD feeds generated YUV buffers; SURFACE exposes a MediaCodec input Surface for
@@ -44,7 +45,8 @@ class VideoSource(
     private var frameIndex = 0L
 
     fun start() {
-        val format = MediaFormat.createVideoFormat(MIME, width, height).apply {
+        val bitRate = (width.toLong() * height * frameRate * BITS_PER_PIXEL).toInt().coerceIn(MIN_BIT_RATE, MAX_BIT_RATE)
+        fun format(tuned: Boolean) = MediaFormat.createVideoFormat(MIME, width, height).apply {
             setInteger(
                 MediaFormat.KEY_COLOR_FORMAT,
                 if (mode == Mode.SURFACE) {
@@ -53,25 +55,54 @@ class VideoSource(
                     MediaCodecInfo.CodecCapabilities.COLOR_FormatYUV420Flexible
                 },
             )
-            setInteger(MediaFormat.KEY_BIT_RATE, 2_000_000)
+            setInteger(MediaFormat.KEY_BIT_RATE, bitRate)
             setInteger(MediaFormat.KEY_FRAME_RATE, frameRate)
-            setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, 1)
+            // Drops already ask for a fresh keyframe, so a long interval costs nothing in recovery
+            // and spares the link a big frame every second.
+            setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, I_FRAME_INTERVAL_S)
+            if (mode == Mode.SURFACE) {
+                // A surface encoder only makes a frame when the screen changes, and many decoders
+                // show a frame only once the next one arrives. So the last change before the
+                // screen goes still (a menu closing) sat in the car's decoder until something
+                // else moved. Repeating the last frame after a short pause pushes it through;
+                // a repeat of an unchanged screen costs a few bytes. scrcpy does the same.
+                setLong(MediaFormat.KEY_REPEAT_PREVIOUS_FRAME_AFTER, REPEAT_AFTER_US)
+                // An app that draws nonstop (a moving map) renders at the phone's refresh rate,
+                // faster than the car acks. Every extra frame queued inside the encoder, and the
+                // car's screen fell 25 seconds behind. Capping the input drops the extras before
+                // they're encoded, so the car always gets the newest frame.
+                setFloat(MediaFormat.KEY_MAX_FPS_TO_ENCODER, frameRate.toFloat())
+            }
             setInteger(MediaFormat.KEY_PROFILE, MediaCodecInfo.CodecProfileLevel.AVCProfileBaseline)
             setInteger(MediaFormat.KEY_LEVEL, MediaCodecInfo.CodecProfileLevel.AVCLevel31)
+            if (tuned) {
+                // Hints only: a car screen wants each frame now, not the best frame a moment later.
+                setInteger(MediaFormat.KEY_BITRATE_MODE, MediaCodecInfo.EncoderCapabilities.BITRATE_MODE_VBR)
+                setInteger(MediaFormat.KEY_PRIORITY, 0)
+                setInteger(MediaFormat.KEY_LATENCY, 1)
+            }
         }
 
-        val encoder = MediaCodec.createEncoderByType(MIME)
+        var encoder = MediaCodec.createEncoderByType(MIME)
-        encoder.configure(format, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)
+        try {
+            encoder.configure(format(tuned = true), null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)
+        } catch (e: Exception) {
+            // Some encoders refuse a hint they don't know. The plain format is what always worked.
+            log.w("encoder refused the tuned format (${e.message}) - using the plain one")
+            encoder.release()
+            encoder = MediaCodec.createEncoderByType(MIME)
+            encoder.configure(format(tuned = false), null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)
+        }
         if (mode == Mode.SURFACE) inputSurface = encoder.createInputSurface()
         encoder.start()
         codec = encoder
         running = true
 
-        GearslipLog.i("encoder started: ${width}x$height @ ${frameRate}fps, H.264 Baseline, mode=$mode")
+        log.i("encoder started: ${width}x$height @ ${frameRate}fps, ${bitRate / 1000} kbps, H.264 Baseline, mode=$mode")
 
         worker = Thread {
             runCatching { pump(encoder) }
-                .onFailure { if (running) GearslipLog.e("encoder loop failed", it) }
+                .onFailure { if (running) log.e("encoder loop failed", it) }
         }.apply { name = "gearslip-encoder"; start() }
     }
 
@@ -89,7 +120,7 @@ class VideoSource(
             codec?.setParameters(Bundle().apply {
                 putInt(MediaCodec.PARAMETER_KEY_REQUEST_SYNC_FRAME, 0)
             })
-        }.onFailure { GearslipLog.w("requestSyncFrame failed: ${it.message}") }
+        }.onFailure { log.w("requestSyncFrame failed: ${it.message}") }
     }
 
     fun stop() {
@@ -122,7 +153,10 @@ class VideoSource(
                 frameIndex++
             }
 
-            var outIndex = encoder.dequeueOutputBuffer(info, TIMEOUT_US)
+            // A surface-fed encoder has nothing to do between frames, so block until one is ready
+            // instead of sleeping a fixed time: less delay on screen, fewer wakeups for the CPU.
+            val wait = if (mode == Mode.SURFACE) SURFACE_TIMEOUT_US else TIMEOUT_US
+            var outIndex = encoder.dequeueOutputBuffer(info, wait)
             while (outIndex >= 0) {
                 val buffer = encoder.getOutputBuffer(outIndex)
                 if (buffer != null && info.size > 0) {
@@ -143,7 +177,7 @@ class VideoSource(
                 outIndex = encoder.dequeueOutputBuffer(info, 0)
             }
 
-            Thread.sleep(maxOf(1L, frameIntervalUs / 2000))
+            if (mode != Mode.SURFACE) Thread.sleep(maxOf(1L, frameIntervalUs / 2000))
         }
     }
 
@@ -187,6 +221,14 @@ class VideoSource(
     private companion object {
         const val MIME = MediaFormat.MIMETYPE_VIDEO_AVC
         const val TIMEOUT_US = 10_000L
+        const val SURFACE_TIMEOUT_US = 100_000L
+
+        /** Enough for sharp text and map lines; 800x480 at 30fps comes out at 4 Mbps. */
+        const val BITS_PER_PIXEL = 0.3
+        const val MIN_BIT_RATE = 4_000_000
+        const val MAX_BIT_RATE = 12_000_000
+        const val I_FRAME_INTERVAL_S = 5
+        private const val REPEAT_AFTER_US = 100_000L
 
         /** (Y, Cb, Cr) - white, yellow, cyan, green, magenta, red, blue. */
         val BAR_COLOURS = listOf(

gearslip/src/main/java/app/seb3thehacker/gearslip/audio/AudioCaptureService.kt

@@ -7,6 +7,7 @@ import android.app.PendingIntent
 import android.app.Service
 import android.content.Context
 import android.content.Intent
+import android.content.pm.PackageManager
 import android.content.pm.ServiceInfo
 import android.media.AudioAttributes
 import android.media.AudioFormat
@@ -24,16 +25,51 @@ import kotlin.math.abs
  * Playback capture is the one public route to another app's sound, and it hangs off a
  * MediaProjection - so, as with [app.seb3thehacker.gearslip.mirror.MirrorService], the consent
  * result is carried into a foreground service of type mediaProjection before it can be redeemed.
- * Capture is scoped to the media app's uid: notification pings and other apps stay on the phone.
+ * Capture is scoped to media playback: notification pings, calls and alarms stay on the phone.
+ * The grant lasts as long as this service does, which is as long as the car is connected, so the
+ * driver answers the consent dialog once per drive rather than once per app.
  */
 class AudioCaptureService : Service() {
 
     @Volatile private var reading = false
     private var projection: MediaProjection? = null
     private var thread: Thread? = null
+    private var mutedPhone = false
+
+    /**
+     * Silence the phone's own speaker while the car is being fed.
+     *
+     * Playback capture copies the stream instead of moving it, so without this the music plays in
+     * two places at once. Muting the stream does not affect what is captured - the tap sits before
+     * the volume the speaker gets - so the car still receives full-level audio.
+     */
+    private fun mutePhone() {
+        if (mutedPhone) return
+        runCatching {
+            getSystemService(android.media.AudioManager::class.java)
+                .adjustStreamVolume(android.media.AudioManager.STREAM_MUSIC, android.media.AudioManager.ADJUST_MUTE, 0)
+            mutedPhone = true
+            GearslipLog.i("audio: muted the phone's speaker for the drive")
+        }.onFailure { GearslipLog.w("audio: could not mute the phone: ${it.message}") }
+    }
+
+    private fun unmutePhone() {
+        if (!mutedPhone) return
+        mutedPhone = false
+        runCatching {
+            getSystemService(android.media.AudioManager::class.java)
+                .adjustStreamVolume(android.media.AudioManager.STREAM_MUSIC, android.media.AudioManager.ADJUST_UNMUTE, 0)
+            GearslipLog.i("audio: gave the phone's speaker back")
+        }.onFailure { GearslipLog.w("audio: could not unmute the phone: ${it.message}") }
+    }
 
     override fun onBind(intent: Intent?): IBinder? = null
 
+    override fun onCreate() {
+        super.onCreate()
+        running = true
+    }
+
     override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
         if (intent?.action == ACTION_STOP) {
             stopSelf()
@@ -48,7 +84,14 @@ class AudioCaptureService : Service() {
             return START_NOT_STICKY
         }
 
-        startForeground(NOTIFICATION_ID, notification(), ServiceInfo.FOREGROUND_SERVICE_TYPE_MEDIA_PROJECTION)
+        // Android silences the microphone for apps in the background unless a running service
+        // claims it. Claiming it here lets voice replies hear the driver with the phone locked.
+        // Without the permission, claiming it would crash, so it's left off.
+        val micGranted = checkSelfPermission(android.Manifest.permission.RECORD_AUDIO) == PackageManager.PERMISSION_GRANTED
+        val type = ServiceInfo.FOREGROUND_SERVICE_TYPE_MEDIA_PROJECTION or
+            (if (micGranted) ServiceInfo.FOREGROUND_SERVICE_TYPE_MICROPHONE else 0)
+        startForeground(NOTIFICATION_ID, notification(), type)
+        ScreenShareGuard.lift(this)
         projection = try {
             getSystemService(MediaProjectionManager::class.java).getMediaProjection(resultCode, data)
         } catch (t: Throwable) {
@@ -74,13 +117,14 @@ class AudioCaptureService : Service() {
     private fun beginCapture(token: MediaProjection) {
         val rate = CarAudio.sampleRate
         val channels = CarAudio.channels
-        val uid = CarAudio.uid
         val record = try {
+            // Matched by usage, not by app. A uid filter would have to be rebuilt every time the
+            // driver changed media app, and rebuilding means a fresh consent dialog - so the
+            // filter is what the sound is for, and any app playing media reaches the car.
             val config = AudioPlaybackCaptureConfiguration.Builder(token)
                 .addMatchingUsage(AudioAttributes.USAGE_MEDIA)
                 .addMatchingUsage(AudioAttributes.USAGE_GAME)
                 .addMatchingUsage(AudioAttributes.USAGE_UNKNOWN)
-                .apply { if (uid >= 0) addMatchingUid(uid) }
                 .build()
             val mask = if (channels == 1) AudioFormat.CHANNEL_IN_MONO else AudioFormat.CHANNEL_IN_STEREO
             val format = AudioFormat.Builder()
@@ -92,7 +136,7 @@ class AudioCaptureService : Service() {
             AudioRecord.Builder()
                 .setAudioPlaybackCaptureConfig(config)
                 .setAudioFormat(format)
-                .setBufferSizeInBytes(maxOf(minimum, CHUNK_BYTES * 4))
+                .setBufferSizeInBytes(maxOf(minimum, CHUNK_BYTES * BUFFER_CHUNKS))
                 .build()
         } catch (t: Throwable) {
             GearslipLog.e("audio: could not set up playback capture", t)
@@ -106,17 +150,25 @@ class AudioCaptureService : Service() {
             val buffer = ByteArray(CHUNK_BYTES)
             var peak = 0
             var heardAt = System.currentTimeMillis()
+            val startedAt = heardAt
+            var everHeard = false
+            var warnedSilent = false
             try {
                 record.startRecording()
-                GearslipLog.i("audio: capturing uid=$uid at ${rate}Hz x$channels")
+                GearslipLog.i("audio: capturing media playback at ${rate}Hz x$channels")
+                mutePhone()
                 CarAudio.captureStarted()
                 while (reading) {
                     val n = record.read(buffer, 0, buffer.size)
-                    if (n <= 0) break
+                    if (n <= 0) {
+                        GearslipLog.e("audio: AudioRecord.read returned $n - capture has stopped")
+                        break
+                    }
                     for (i in 0 until n - 1 step 2) {
                         val sample = (buffer[i].toInt() and 0xFF) or (buffer[i + 1].toInt() shl 8)
                         peak = maxOf(peak, abs(sample.toShort().toInt()))
                     }
+                    if (peak > 0) everHeard = true
                     val now = System.currentTimeMillis()
                     val level = peak / 32768f
                     if (now - heardAt >= LEVEL_LOG_MS) {
@@ -124,6 +176,16 @@ class AudioCaptureService : Service() {
                         heardAt = now
                         peak = 0
                     }
+                    // Capture never fails for an app that opts out; it just hands back digital
+                    // silence. Say so, because the symptom is identical to a broken car link.
+                    if (!everHeard && !warnedSilent && now - startedAt >= SILENCE_MS) {
+                        warnedSilent = true
+                        GearslipLog.w(
+                            "audio: ${SILENCE_MS / 1000}s of capture and every sample is zero. " +
+                                "Either nothing is playing, or the app does not allow its audio " +
+                                "to be captured.",
+                        )
+                    }
                     CarAudio.deliver(buffer, n, level)
                 }
             } catch (t: Throwable) {
@@ -131,6 +193,7 @@ class AudioCaptureService : Service() {
             } finally {
                 runCatching { record.stop() }
                 record.release()
+                unmutePhone()
                 CarAudio.captureStopped()
             }
         }, "gearslip-audio").apply { isDaemon = true; start() }
@@ -140,8 +203,13 @@ class AudioCaptureService : Service() {
         super.onDestroy()
         reading = false
         runCatching { thread?.join(500) }
+        // Belt and braces: a phone left muted after the drive is a bug the driver blames on their
+        // phone, not on Gearslip, so unmute on every way out of here.
+        unmutePhone()
         runCatching { projection?.stop() }
         projection = null
+        ScreenShareGuard.restore(this)
+        running = false
     }
 
     private fun notification(): Notification {
@@ -172,10 +240,17 @@ class AudioCaptureService : Service() {
 
         /** About 21 ms of 48 kHz stereo: small enough for lip-sync, big enough not to flood the link. */
         private const val CHUNK_BYTES = 4096
+        /** About half a second: room to wait out a slow ack from the car without losing sound. */
+        private const val BUFFER_CHUNKS = 24
         private const val LEVEL_LOG_MS = 3_000L
+        private const val SILENCE_MS = 5_000L
 
         private var appContext: Context? = null
 
+        /** True between onCreate and onDestroy; lets the activity tell a live capture from a crashed one. */
+        @Volatile var running = false
+            private set
+
         fun start(context: Context, resultCode: Int, data: Intent) {
             appContext = context.applicationContext
             context.startForegroundService(

gearslip/src/main/java/app/seb3thehacker/gearslip/audio/AudioLink.kt

@@ -27,10 +27,17 @@ class AudioLink(
     private var configIndex = 0
     @Volatile private var ready = false
     @Volatile private var started = false
+    @Volatile private var focusGranted = false
+    @Volatile private var focusRequested = false
     @Volatile private var inFlight = 0
-    @Volatile private var maxUnacked = 8
+    // The Uconnect asks for 4 on its video channel; assume the same until its Config says otherwise.
+    @Volatile private var maxUnacked = 4
     @Volatile private var lastAckAt = 0L
     private var chunks = 0
+    private var bytes = 0L
+    private var dropped = 0
+    @Volatile private var configTimer: Thread? = null
+    private val ackLock = Object()
 
     private val config get() = service.configs.getOrNull(configIndex) ?: service.configs.firstOrNull()
     override val sampleRate get() = config?.sampleRate ?: 48_000
@@ -39,12 +46,47 @@ class AudioLink(
     val channelId get() = service.serviceId
 
     fun opened(status: Int) {
+        GearslipLog.i("audio: <- ChannelOpenResponse (media audio): status=$status")
         if (status != 0) {
             GearslipLog.w("audio: the head unit refused the media audio channel (status $status)")
             return
         }
-        sendOnChannel(MSG_SETUP, Protobuf.varintField(1, service.codecType.toLong()))
+        // AVChannelSetupRequest { required uint32 config_index = 1 }. This field is an index into
-        GearslipLog.i("audio: -> Setup(codec=${service.codecName})")
+        // the sink's own audio_configs, not a codec id - sending the codec type asks for a config
+        // the sink does not have, and it answers with a status that never reaches READY.
+        sendOnChannel(MSG_SETUP, Protobuf.varintField(1, 0L))
+        GearslipLog.i("audio: -> Setup(config_index=0) on channel ${service.serviceId}, codec ${service.codecName}")
+        armConfigFallback()
+    }
+
+    /**
+     * The 2018 Uconnect answers our Setup with a two-byte message we cannot identify (id 255, no
+     * body) rather than the AVChannelSetupResponse the video channel gets, so the sink never
+     * reaches READY and no audio is ever sent.
+     *
+     * Service discovery already told us everything that message would have: the sink is PCM at
+     * 48000Hz stereo and it has exactly one configuration. So rather than wait forever for a
+     * message that is not coming, assume the advertised configuration and carry on. If that guess
+     * is wrong the head unit simply will not ack, which the write path already reports.
+     */
+    private fun armConfigFallback() {
+        val timer = Thread({
+            try {
+                Thread.sleep(CONFIG_WAIT_MS)
+            } catch (e: InterruptedException) {
+                return@Thread
+            }
+            if (ready) return@Thread
+            GearslipLog.w(
+                "audio: no usable Config after ${CONFIG_WAIT_MS}ms - falling back to the sink the " +
+                    "head unit advertised (${sampleRate}Hz x$channels, config_index=0, max_unacked=$maxUnacked)",
+            )
+            configIndex = 0
+            ready = true
+            CarAudio.attach(this)
+        }, "gearslip-audio-config").apply { isDaemon = true }
+        configTimer = timer
+        timer.start()
     }
 
     fun onMessage(messageId: Int, body: ByteArray) {
@@ -60,29 +102,61 @@ class AudioLink(
                 if (window != null) maxUnacked = maxOf(1, window)
                 configIndex = indices.firstOrNull() ?: 0
                 if (status == STATUS_READY) {
+                    configTimer?.interrupt()
                     ready = true
-                    GearslipLog.i("audio: ready - ${sampleRate}Hz x$channels ${config?.bits}bit")
+                    GearslipLog.i("audio: sink ready - ${sampleRate}Hz x$channels ${config?.bits}bit")
                     CarAudio.attach(this)
+                } else {
+                    GearslipLog.w(
+                        "audio: the sink is not ready (status=$status, 1=WAIT 2=READY) - " +
+                            "nothing will be sent until it is",
+                    )
                 }
             }
 
             MSG_ACK -> {
                 val acked = Wire.varint(Wire.fields(body), 2)?.toInt() ?: 1
-                inFlight = maxOf(0, inFlight - maxOf(1, acked))
+                synchronized(ackLock) {
-                lastAckAt = System.currentTimeMillis()
+                    inFlight = maxOf(0, inFlight - maxOf(1, acked))
+                    lastAckAt = System.currentTimeMillis()
+                    ackLock.notifyAll()
+                }
             }
 
-            else -> GearslipLog.i("audio: <- unhandled message id=$messageId (${body.size} bytes)")
+            // Whatever the head unit answers Setup with, we need its bytes to identify it.
+            else -> {
+                GearslipLog.i("audio: <- unhandled message id=$messageId (${body.size} bytes)")
+                GearslipLog.hex("   audio msg", body, limit = 64)
+            }
         }
     }
 
+    /**
+     * The head unit's answer to our AudioFocusRequest. Until it grants focus the sink is wired to
+     * whatever else the car is playing - the radio, usually - and anything we send is discarded,
+     * so [start] waits here rather than streaming into nothing.
+     */
     fun onFocus(state: Int) {
-        GearslipLog.i("audio: <- AudioFocus state=$state (1=GAIN, 2=GAIN_TRANSIENT, 3=LOSS, 4=LOSS_TRANSIENT)")
+        val name = FOCUS_STATES[state] ?: "unknown($state)"
+        GearslipLog.i("audio: <- AudioFocusResponse state=$name")
+        focusGranted = state == FOCUS_STATE_GAIN || state == FOCUS_STATE_GAIN_TRANSIENT
+        if (focusGranted) startStream() else stop()
     }
 
     override fun start() {
         if (!ready || started) return
-        sendControl(MSG_FOCUS_REQUEST, Protobuf.varintField(1, FOCUS_GAIN.toLong()))
+        if (!focusRequested) {
+            focusRequested = true
+            sendControl(MSG_FOCUS_REQUEST, Protobuf.varintField(1, FOCUS_GAIN.toLong()))
+            GearslipLog.i("audio: -> AudioFocusRequest(GAIN); waiting for the head unit to hand the sink over")
+        }
+        // Some head units grant the sink silently and never answer. Do not let that be the end of
+        // it: start anyway, and let the acks say whether anything is being taken.
+        startStream()
+    }
+
+    private fun startStream() {
+        if (!ready || started) return
         sendOnChannel(
             MSG_START,
             Protobuf.varintField(1, SESSION_ID.toLong()) + Protobuf.varintField(2, configIndex.toLong()),
@@ -90,25 +164,43 @@ class AudioLink(
         inFlight = 0
         lastAckAt = System.currentTimeMillis()
         started = true
-        GearslipLog.i("audio: -> AudioFocusRequest(GAIN), Start(config=$configIndex)")
+        GearslipLog.i("audio: -> Start(session=$SESSION_ID, config=$configIndex) - streaming ${sampleRate}Hz x$channels")
     }
 
     override fun stop() {
         if (!started) return
         started = false
+        synchronized(ackLock) { ackLock.notifyAll() }
         runCatching {
             sendOnChannel(MSG_STOP, Protobuf.varintField(1, SESSION_ID.toLong()))
-            sendControl(MSG_FOCUS_REQUEST, Protobuf.varintField(1, FOCUS_RELEASE.toLong()))
+            if (focusRequested) sendControl(MSG_FOCUS_REQUEST, Protobuf.varintField(1, FOCUS_RELEASE.toLong()))
         }
-        GearslipLog.i("audio: -> Stop, AudioFocusRequest(RELEASE) after $chunks chunks")
+        focusRequested = false
+        focusGranted = false
+        GearslipLog.i("audio: -> Stop, AudioFocusRequest(RELEASE) after $chunks chunks / $bytes bytes")
         chunks = 0
+        bytes = 0
     }
 
     override fun write(pcm: ByteArray, size: Int) {
         if (!started) return
-        if (inFlight >= maxUnacked) {
+        // Wait for the car to catch up rather than throw the chunk away: a dropped chunk is a gap
-            // A lost ack must not silence the stream for good; after a stall assume the window cleared.
+        // the driver hears, while a short wait is soaked up by the capture buffer behind us.
-            if (System.currentTimeMillis() - lastAckAt > STALL_MS) inFlight = 0 else return
+        synchronized(ackLock) {
+            while (started && inFlight >= maxUnacked) {
+                val waited = System.currentTimeMillis() - lastAckAt
+                if (waited > STALL_MS) {
+                    // A lost ack must not silence the stream for good; after a stall assume the window cleared.
+                    GearslipLog.w("audio: no ack for ${STALL_MS}ms with $inFlight in flight - reopening the window")
+                    inFlight = 0
+                    break
+                }
+                ackLock.wait(STALL_MS - waited + 1)
+            }
+        }
+        if (!started) {
+            dropped++
+            return
         }
         val timestamp = ByteArray(8)
         val micros = System.nanoTime() / 1_000
@@ -116,14 +208,26 @@ class AudioLink(
         try {
             sendOnChannel(MSG_DATA, timestamp + pcm.copyOf(size))
         } catch (e: java.io.IOException) {
+            GearslipLog.e("audio: the link died mid-stream", e)
             started = false
             return
         }
-        inFlight++
+        synchronized(ackLock) { inFlight++ }
         chunks++
+        bytes += size
+        // The first chunk proves the whole path; after that, an occasional line is enough to show
+        // the car is still taking audio and to catch a window that has quietly closed.
+        if (chunks == 1 || chunks % CHUNK_LOG_EVERY == 0) {
+            GearslipLog.i(
+                "audio: -> $chunks chunks / $bytes bytes, inFlight=$inFlight/$maxUnacked, " +
+                    "dropped=$dropped, focus=${if (focusGranted) "granted" else "not granted"}",
+            )
+        }
     }
 
     fun close() {
+        configTimer?.interrupt()
+        configTimer = null
         stop()
         ready = false
         CarAudio.detach(this)
@@ -142,7 +246,15 @@ class AudioLink(
         private const val STATUS_READY = 2
         private const val FOCUS_GAIN = 1
         private const val FOCUS_RELEASE = 4
+        private const val FOCUS_STATE_GAIN = 1
+        private const val FOCUS_STATE_GAIN_TRANSIENT = 2
         private const val SESSION_ID = 2
         private const val STALL_MS = 2_000L
+        private const val CHUNK_LOG_EVERY = 200 // about every four seconds
+        private const val CONFIG_WAIT_MS = 2_500L
+
+        private val FOCUS_STATES = mapOf(
+            1 to "GAIN", 2 to "GAIN_TRANSIENT", 3 to "LOSS", 4 to "LOSS_TRANSIENT",
+        )
     }
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/audio/CarAudio.kt

@@ -6,12 +6,15 @@ import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
 
 /**
- * Joins the two ends of the audio path: [AudioCaptureService] on the phone, which hears what a
+ * Joins the two ends of the audio path: [AudioCaptureService] on the phone, which hears what the
- * media app plays, and the car's audio channel, which is where it has to end up.
+ * phone is playing, and the car's audio channel, which is where it has to end up.
  *
- * They come and go independently. The phone side needs on-device consent and can be running on
+ * Capture belongs to the car session, not to any one app. Android grants it through a consent
- * the bench with no car attached; the car side exists only while a head unit is connected and
+ * dialog that cannot be answered in advance or remembered, so Gearslip asks once, when a head unit
- * offers a media audio sink. Whichever pair is present, samples flow.
+ * first offers a sink to play through, and then holds that grant for as long as the car is
+ * connected. Switching between media apps, or starting playback from the phone, costs nothing
+ * further: the capture is by audio usage rather than by app, so whatever the phone plays as media
+ * goes to the car.
  */
 object CarAudio {
 
@@ -36,9 +39,8 @@ object CarAudio {
     /** Set by the activity: shows the permission and consent dialogs, which only it can. */
     var onConsentRequested: (() -> Unit)? = null
 
-    /** The uid being captured (or waited on). */
+    /** Whether the driver has asked for the car to be fed at all; see CarSettings.pipeAudio. */
-    @Volatile var uid: Int = -1
+    @Volatile private var wanted = false
-        private set
 
     @Volatile private var link: Link? = null
 
@@ -48,30 +50,48 @@ object CarAudio {
 
     fun attach(link: Link) {
         this.link = link
-        if (_capture.value == Capture.ON) link.start()
+        GearslipLog.i("audio: the car offered a sink at ${link.sampleRate}Hz x${link.channels}")
+        when {
+            _capture.value == Capture.ON -> link.start()
+            wanted -> ask()
+        }
     }
 
     fun detach(link: Link) {
         if (this.link === link) this.link = null
     }
 
-    /** A media app was opened: start hearing it. */
+    /**
-    fun request(uid: Int) {
+     * The car wants sound. Safe to call as often as the session likes: the consent dialog appears
-        if (this.uid == uid && _capture.value != Capture.OFF && _capture.value != Capture.DENIED) return
+     * at most once, and only once there is a sink to play through - asking on the bench, where the
-        if (this.uid != uid) AudioCaptureService.stop()
+     * sound has nowhere to go, would put a system dialog in front of the driver for nothing.
-        this.uid = uid
+     */
-        _capture.value = Capture.ASKING
+    fun request() {
-        val ask = onConsentRequested
+        wanted = true
-        if (ask == null) {
+        when (_capture.value) {
-            GearslipLog.w("audio: nothing on the phone can ask for capture consent")
+            Capture.ON, Capture.ASKING, Capture.DENIED -> return
-            _capture.value = Capture.DENIED
+            Capture.OFF -> if (link == null) {
-        } else {
+                GearslipLog.i("audio: waiting for the car to offer an audio sink")
-            ask()
+            } else {
+                ask()
+            }
         }
     }
 
+    private fun ask() {
+        _capture.value = Capture.ASKING
+        val request = onConsentRequested
+        if (request == null) {
+            GearslipLog.w("audio: nothing on the phone can ask for capture consent")
+            _capture.value = Capture.DENIED
+        } else {
+            request()
+        }
+    }
+
+    /** The car went away. Everything is torn down; the next connection asks again. */
     fun release() {
-        uid = -1
+        wanted = false
         AudioCaptureService.stop()
         _capture.value = Capture.OFF
     }

gearslip/src/main/java/app/seb3thehacker/gearslip/audio/CarMic.kt

@@ -0,0 +1,129 @@
+package app.seb3thehacker.gearslip.audio
+
+import app.seb3thehacker.gearslip.GearslipLog
+import app.seb3thehacker.gearslip.Protobuf
+import app.seb3thehacker.gearslip.ServiceDiscovery
+import app.seb3thehacker.gearslip.Wire
+import java.util.concurrent.LinkedBlockingQueue
+import java.util.concurrent.TimeUnit
+
+/**
+ * The car's own microphone, which most head units offer over the same link as the screen:
+ *
+ *   -> CHANNEL_OPEN_REQUEST          <- CHANNEL_OPEN_RESPONSE
+ *   -> Setup { config_index }        <- Config
+ *   -> MicrophoneRequest { open }    <- MicrophoneResponse { status, session_id }
+ *   <- Data { 8-byte timestamp, PCM }...   -> Ack { session_id, ack }
+ *   -> MicrophoneRequest { open = false }
+ *
+ * The channel opens with the session, but the car only records between [start] and [stop].
+ * Speech wants 16 kHz mono; a car that records at a multiple of that is averaged down to it, and
+ * one that doesn't isn't used, so voice falls back to the phone's microphone.
+ */
+class CarMic(
+    private val service: ServiceDiscovery.AudioService,
+    private val sendOnChannel: (messageId: Int, body: ByteArray) -> Unit,
+) {
+    val channelId get() = service.serviceId
+
+    private val config = service.configs.first()
+    private val step = config.sampleRate / RATE
+    private val usable = service.codecType == ServiceDiscovery.CODEC_PCM && config.bits == 16 &&
+        config.sampleRate % RATE == 0 && step >= 1 && config.channels in 1..2
+
+    @Volatile private var ready = false
+    @Volatile private var listening = false
+    @Volatile private var session = 0
+    private var packets = 0
+    private val chunks = LinkedBlockingQueue<ShortArray>()
+
+    fun onMessage(messageId: Int, body: ByteArray) {
+        when (messageId) {
+            MSG_CHANNEL_OPEN_RESPONSE -> {
+                val status = Protobuf.readInt32Field(body, 1) ?: 0
+                GearslipLog.i("mic: <- ChannelOpenResponse: status=$status")
+                if (status != 0) return
+                sendOnChannel(MSG_SETUP, Protobuf.varintField(1, 0L))
+                ready = usable
+                if (!usable) {
+                    GearslipLog.w(
+                        "mic: the car records ${service.codecName} ${config.sampleRate}Hz/${config.bits}bit/x${config.channels}, " +
+                            "which speech can't use - voice stays on the phone's microphone",
+                    )
+                }
+            }
+
+            MSG_CONFIG -> GearslipLog.i("mic: <- Config status=${Wire.varint(Wire.fields(body), 1)}")
+
+            MSG_MIC_RESPONSE -> {
+                val fields = Wire.fields(body)
+                session = Wire.varint(fields, 2)?.toInt() ?: 0
+                GearslipLog.i("mic: <- MicrophoneResponse status=${Wire.varint(fields, 1)} session=$session")
+            }
+
+            MSG_DATA -> {
+                sendOnChannel(MSG_ACK, Protobuf.varintField(1, session.toLong()) + Protobuf.varintField(2, 1L))
+                if (!listening || body.size <= TIMESTAMP_BYTES) return
+                if (packets++ == 0) GearslipLog.i("mic: first audio from the car (${body.size - TIMESTAMP_BYTES} bytes)")
+                chunks.offer(toSpeechRate(body))
+            }
+
+            else -> GearslipLog.i("mic: <- unhandled message id=$messageId (${body.size} bytes)")
+        }
+    }
+
+    /** Little-endian PCM after the timestamp, mixed to mono and averaged down to [RATE]. */
+    private fun toSpeechRate(body: ByteArray): ShortArray {
+        val frameBytes = 2 * config.channels
+        val frames = (body.size - TIMESTAMP_BYTES) / frameBytes
+        val out = ShortArray(frames / step)
+        for (i in out.indices) {
+            var sum = 0
+            for (s in 0 until step) {
+                val at = TIMESTAMP_BYTES + (i * step + s) * frameBytes
+                for (c in 0 until config.channels) {
+                    val o = at + 2 * c
+                    sum += (body[o].toInt() and 0xFF) or (body[o + 1].toInt() shl 8)
+                }
+            }
+            out[i] = (sum / (step * config.channels)).toShort()
+        }
+        return out
+    }
+
+    /** Asks the car to start recording. False when it can't, so the phone's microphone is used. */
+    fun start(): Boolean {
+        if (!ready) return false
+        chunks.clear()
+        packets = 0
+        listening = true
+        sendOnChannel(MSG_MIC_REQUEST, Protobuf.varintField(1, 1L) + Protobuf.varintField(4, 1L))
+        GearslipLog.i("mic: -> MicrophoneRequest(open)")
+        return true
+    }
+
+    /** The next piece of audio, or null if the car sent nothing for [timeoutMs]. */
+    fun read(timeoutMs: Long): ShortArray? = chunks.poll(timeoutMs, TimeUnit.MILLISECONDS)
+
+    fun stop() {
+        if (!listening) return
+        listening = false
+        sendOnChannel(MSG_MIC_REQUEST, Protobuf.varintField(1, 0L))
+        GearslipLog.i("mic: -> MicrophoneRequest(close) after $packets packets")
+    }
+
+    companion object {
+        /** The connected car's microphone, or null with no car or one that has none. */
+        @Volatile var current: CarMic? = null
+
+        const val RATE = 16_000
+        private const val TIMESTAMP_BYTES = 8
+        private const val MSG_CHANNEL_OPEN_RESPONSE = 8
+        private const val MSG_DATA = 0
+        private const val MSG_SETUP = 32768
+        private const val MSG_CONFIG = 32771
+        private const val MSG_ACK = 32772
+        private const val MSG_MIC_REQUEST = 32773
+        private const val MSG_MIC_RESPONSE = 32774
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/audio/ScreenShareGuard.kt

@@ -0,0 +1,64 @@
+package app.seb3thehacker.gearslip.audio
+
+import android.Manifest
+import android.content.Context
+import android.content.pm.PackageManager
+import android.provider.Settings
+import app.seb3thehacker.gearslip.GearslipLog
+
+/**
+ * Keeps the phone's notifications readable while audio is being sent to the car.
+ *
+ * Playback capture hangs off a MediaProjection, and since Android 15 any full-screen projection
+ * makes SystemUI hide notification contents, on the assumption that someone is watching the
+ * screen. Nobody is: the audio projection never makes a display. The one exemption an ordinary app
+ * can reach is the developer setting that switches the protection off, so Gearslip turns it off for
+ * the length of the capture and back on afterwards.
+ *
+ * Writing it needs WRITE_SECURE_SETTINGS, granted once over adb. Without the grant this does
+ * nothing and notifications stay hidden while music plays, which is the platform's default.
+ *
+ * Phone mirroring deliberately does not use this: there the screen really is being shown.
+ */
+internal object ScreenShareGuard {
+
+    /** Settings.Global.DISABLE_SCREEN_SHARE_PROTECTIONS_FOR_APPS_AND_NOTIFICATIONS, hidden API. */
+    private const val SETTING = "disable_screen_share_protections_for_apps_and_notifications"
+    private const val PREFS = "gearslip_screen_share_guard"
+
+    /** Set while Gearslip has the protection switched off, so a crash can be undone at next launch. */
+    private const val KEY_LIFTED = "lifted"
+
+    fun canLift(context: Context): Boolean =
+        context.checkSelfPermission(Manifest.permission.WRITE_SECURE_SETTINGS) ==
+            PackageManager.PERMISSION_GRANTED
+
+    /** Call before the projection starts: the system decides what to hide at that moment. */
+    fun lift(context: Context) {
+        if (!canLift(context)) {
+            GearslipLog.i("audio: notifications will be hidden while capturing (no WRITE_SECURE_SETTINGS)")
+            return
+        }
+        val resolver = context.contentResolver
+        // Already off, whether by the driver in Developer options or by us: leave it as found.
+        if (Settings.Global.getInt(resolver, SETTING, 0) != 0) return
+        runCatching {
+            prefs(context).edit().putBoolean(KEY_LIFTED, true).commit()
+            Settings.Global.putInt(resolver, SETTING, 1)
+            GearslipLog.i("audio: screen share protection off for the drive, notifications stay visible")
+        }.onFailure { GearslipLog.w("audio: could not lift screen share protection: ${it.message}") }
+    }
+
+    /** Put the protection back, if Gearslip is the one that took it away. */
+    fun restore(context: Context) {
+        if (!prefs(context).getBoolean(KEY_LIFTED, false)) return
+        runCatching {
+            Settings.Global.putInt(context.contentResolver, SETTING, 0)
+            prefs(context).edit().remove(KEY_LIFTED).commit()
+            GearslipLog.i("audio: screen share protection back on")
+        }.onFailure { GearslipLog.w("audio: could not restore screen share protection: ${it.message}") }
+    }
+
+    private fun prefs(context: Context) =
+        context.applicationContext.getSharedPreferences(PREFS, Context.MODE_PRIVATE)
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/call/CarCalls.kt

@@ -0,0 +1,135 @@
+package app.seb3thehacker.gearslip.call
+
+import android.Manifest
+import android.content.Context
+import android.content.pm.PackageManager
+import android.net.Uri
+import android.os.Handler
+import android.os.Looper
+import android.provider.ContactsContract
+import android.telecom.TelecomManager
+import android.telephony.TelephonyCallback
+import android.telephony.TelephonyManager
+import app.seb3thehacker.gearslip.GearslipLog
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+/** A caller as the car shows it: whatever the contacts app knows, or just the number. */
+data class Caller(val number: String, val name: String?) {
+    val label: String get() = name ?: number.ifBlank { "Unknown number" }
+}
+
+sealed interface CallUiState {
+    data object None : CallUiState
+    data class Ringing(val caller: Caller, val canDecline: Boolean) : CallUiState
+    data class Active(val caller: Caller?) : CallUiState
+}
+
+/**
+ * Tracks the phone's call state for the car screen, and answers or declines through the two
+ * doors a sideloaded app can use: [android.telecom.TelecomManager.acceptRingingCall] to answer,
+ * and [GearslipCallScreening]'s response to decline one that is still ringing.
+ *
+ * Ending a call already answered needs MODIFY_PHONE_STATE, a privileged permission Gearslip
+ * cannot hold, so a call taken here is finished the way it would be without Gearslip at all -
+ * from the phone itself, a paired headset, or the car's own Bluetooth if it has any. Call audio
+ * stays on the phone's normal voice path too; nothing here sends it over the USB link, which
+ * only ever carries media playback.
+ */
+object CarCalls {
+
+    private val _state = MutableStateFlow<CallUiState>(CallUiState.None)
+    val state: StateFlow<CallUiState> = _state.asStateFlow()
+
+    private var telephony: TelephonyManager? = null
+    private var watcher: TelephonyCallback? = null
+    private var pendingRespond: ((allow: Boolean) -> Unit)? = null
+    private var ringingCaller: Caller? = null
+
+    fun start(context: Context) {
+        if (watcher != null) return
+        if (context.checkSelfPermission(Manifest.permission.READ_PHONE_STATE) != PackageManager.PERMISSION_GRANTED) return
+        val manager = context.getSystemService(TelephonyManager::class.java) ?: return
+        val callback = object : TelephonyCallback(), TelephonyCallback.CallStateListener {
+            override fun onCallStateChanged(state: Int) = onPhoneState(state)
+        }
+        runCatching { manager.registerTelephonyCallback(context.mainExecutor, callback) }
+            .onSuccess { telephony = manager; watcher = callback }
+            .onFailure { GearslipLog.w("calls: could not watch call state: ${it.message}") }
+    }
+
+    fun stop() {
+        val callback = watcher ?: return
+        runCatching { telephony?.unregisterTelephonyCallback(callback) }
+        telephony = null
+        watcher = null
+        pendingRespond = null
+        ringingCaller = null
+        _state.value = CallUiState.None
+    }
+
+    private fun onPhoneState(state: Int) {
+        when (state) {
+            TelephonyManager.CALL_STATE_IDLE -> {
+                pendingRespond = null
+                ringingCaller = null
+                _state.value = CallUiState.None
+            }
+            TelephonyManager.CALL_STATE_OFFHOOK -> {
+                pendingRespond = null
+                _state.value = CallUiState.Active(ringingCaller)
+            }
+            TelephonyManager.CALL_STATE_RINGING -> {
+                // The number itself only ever arrives through the screening service; if this
+                // fires first, the ringing card appears once incomingCall() catches up.
+                ringingCaller?.let { _state.value = CallUiState.Ringing(it, pendingRespond != null) }
+            }
+        }
+    }
+
+    /** Called by [GearslipCallScreening] the moment a call comes in - the only place with a number. */
+    fun incomingCall(context: Context, number: String?, respond: (allow: Boolean) -> Unit) {
+        val caller = Caller(number.orEmpty(), number?.let { lookUpName(context, it) })
+        ringingCaller = caller
+        pendingRespond = respond
+        _state.value = CallUiState.Ringing(caller, canDecline = true)
+    }
+
+    /** The screening window closed by itself - the call rings normally now, and can't be declined from here. */
+    fun screeningExpired() {
+        pendingRespond = null
+        val caller = ringingCaller ?: return
+        if (_state.value is CallUiState.Ringing) _state.value = CallUiState.Ringing(caller, canDecline = false)
+    }
+
+    fun decline() {
+        val respond = pendingRespond ?: return
+        pendingRespond = null
+        runCatching { respond(false) }.onFailure { GearslipLog.w("calls: decline failed: ${it.message}") }
+    }
+
+    fun answer(context: Context) {
+        if (context.checkSelfPermission(Manifest.permission.ANSWER_PHONE_CALLS) != PackageManager.PERMISSION_GRANTED) {
+            GearslipLog.w("calls: answer needs ANSWER_PHONE_CALLS, which was never granted")
+            return
+        }
+        val telecom = context.getSystemService(TelecomManager::class.java) ?: return
+        runCatching { telecom.acceptRingingCall() }
+            .onFailure { GearslipLog.w("calls: answer failed: ${it.message}") }
+    }
+
+    private fun lookUpName(context: Context, number: String): String? {
+        if (context.checkSelfPermission(Manifest.permission.READ_CONTACTS) != PackageManager.PERMISSION_GRANTED) return null
+        return runCatching {
+            val uri = Uri.withAppendedPath(ContactsContract.PhoneLookup.CONTENT_FILTER_URI, Uri.encode(number))
+            context.contentResolver.query(uri, arrayOf(ContactsContract.PhoneLookup.DISPLAY_NAME), null, null, null)
+                ?.use { c -> if (c.moveToFirst()) c.getString(0) else null }
+        }.getOrNull()
+    }
+}
+
+/** Posts to the main thread after a delay - used to give up on a screening response Gearslip never sent. */
+internal fun mainThreadDelay(ms: Long, action: () -> Unit) {
+    Handler(Looper.getMainLooper()).postDelayed(action, ms)
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/call/GearslipCallScreening.kt

@@ -0,0 +1,53 @@
+package app.seb3thehacker.gearslip.call
+
+import android.telecom.Call
+import android.telecom.CallScreeningService
+import app.seb3thehacker.gearslip.GearslipLog
+
+/**
+ * Sees every incoming call before it rings, so the car screen can show who is calling and
+ * decline it in the same window a spam-blocker would use. Inert until the driver sets Gearslip
+ * as the phone's caller ID and spam app - the same on-device consent Truecaller-style apps ask
+ * for, not a privileged permission.
+ *
+ * The system gives an app a few seconds to answer before it lets the call ring on its own, so a
+ * response is sent either when the driver taps a button or when that window is about to close,
+ * whichever comes first. Answering a call that has already passed this point still works, since
+ * [CarCalls.answer] goes through the ordinary ringing-call API rather than through screening.
+ */
+class GearslipCallScreening : CallScreeningService() {
+
+    override fun onScreenCall(callDetails: Call.Details) {
+        val number = callDetails.handle?.schemeSpecificPart
+        var responded = false
+
+        val respond: (Boolean) -> Unit = { allow ->
+            if (!responded) {
+                responded = true
+                runCatching {
+                    respondToCall(
+                        callDetails,
+                        CallResponse.Builder()
+                            .setDisallowCall(!allow)
+                            .setRejectCall(!allow)
+                            .setSkipNotification(false)
+                            .build(),
+                    )
+                }.onFailure { GearslipLog.w("calls: screening response failed: ${it.message}") }
+            }
+        }
+
+        CarCalls.incomingCall(applicationContext, number, respond)
+
+        // Answer for the system if nobody has by the time its own patience runs out, so a call
+        // Gearslip is slow to show never gets silently blocked.
+        mainThreadDelay(SCREENING_WINDOW_MS) {
+            respond(true)
+            CarCalls.screeningExpired()
+        }
+    }
+
+    private companion object {
+        const val SCREENING_WINDOW_MS = 3_500L
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/AssistantCommands.kt

@@ -0,0 +1,182 @@
+package app.seb3thehacker.gearslip.car
+
+import android.content.Context
+import java.text.DateFormat
+import java.util.Date
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+
+/**
+ * Turns what [CarAssistant] heard into an action plus something to say back.
+ *
+ * Deliberately small and keyword-matched rather than run through any NLU or bundled model: a
+ * fixed set of things a driver actually wants hands-free (media, calling, opening an app,
+ * getting back Home), covering the same ground the rest of the car UI already does rather than
+ * trying to be a general assistant.
+ */
+object AssistantCommands {
+
+    suspend fun handle(context: Context, navigator: CarNavigator, frame: CarEnvironment.Frame, heardRaw: String): String {
+        val heard = heardRaw.lowercase().trim()
+
+        navigateCommand(context, navigator, frame, heard)?.let { return it }
+        mediaCommand(heard)?.let { return it }
+        navCommand(navigator, heard)?.let { return it }
+        infoCommand(heard)?.let { return it }
+        callCommand(context, heard)?.let { return it }
+        openAppCommand(context, navigator, frame, heard)?.let { return it }
+
+        return "I don't know how to do that yet."
+    }
+
+    /**
+     * "navigate to X [with|using|on|via Y]" - Y picks the nav app by (partial) label; without it,
+     * whichever nav app was used last, or the only one installed, or the first one found. Starts
+     * it straight into navigating there via [CarAppConnection]'s `ACTION_NAVIGATE` deep link -
+     * the same one Android Auto's own Assistant integration uses - rather than opening the app
+     * and leaving the driver to type the address in on the car keyboard.
+     */
+    private suspend fun navigateCommand(
+        context: Context,
+        navigator: CarNavigator,
+        frame: CarEnvironment.Frame,
+        heard: String,
+    ): String? {
+        val trigger = NAVIGATE_TRIGGERS.firstOrNull { heard.startsWith(it) } ?: return null
+        var destination = heard.removePrefix(trigger).trim()
+        if (destination.isBlank()) return "Where to?"
+
+        var appName: String? = null
+        for (sep in listOf(" with ", " using ", " on ", " via ")) {
+            val at = destination.lastIndexOf(sep)
+            if (at > 0) {
+                appName = destination.substring(at + sep.length).trim()
+                destination = destination.substring(0, at).trim()
+                break
+            }
+        }
+        if (destination.isBlank()) return "Where to?"
+
+        val entries = LauncherCache.entries ?: withContext(Dispatchers.IO) { LauncherCache.load(context) }
+        val navApps = entries.filter { it.template?.isNavigation == true }
+        if (navApps.isEmpty()) return "You don't have any navigation apps installed."
+
+        val requestedApp = appName
+        val chosen = when {
+            requestedApp != null -> navApps.firstOrNull { it.label.lowercase().contains(requestedApp) }
+                ?: return "I couldn't find a navigation app called $requestedApp."
+            navApps.size == 1 -> navApps.first()
+            else -> navApps.firstOrNull { it.componentId == CarSettings.lastNav.value } ?: navApps.first()
+        }
+        val template = chosen.template ?: return "That's not a navigation app."
+
+        CarServices.connectNav(template, frame, destination)
+        navigator.home()
+        return "Navigating to $destination with ${chosen.label}."
+    }
+
+    private fun mediaCommand(heard: String): String? {
+        val media = CarServices.media
+        return when {
+            "pause" in heard || heard.startsWith("stop") -> {
+                if (media.now.value.playing) media.togglePlay()
+                "Paused."
+            }
+            "resume" in heard || (heard.startsWith("play") && "playing" !in heard) -> {
+                if (!media.now.value.playing) media.togglePlay()
+                "Playing."
+            }
+            "next" in heard || "skip" in heard -> {
+                media.next()
+                "Skipping."
+            }
+            "previous" in heard || "last song" in heard || "back song" in heard -> {
+                media.previous()
+                "Playing the previous track."
+            }
+            "what" in heard && "playing" in heard -> {
+                val now = media.now.value
+                if (now.isActive) listOf(now.title, now.artist).filter { it.isNotBlank() }.joinToString(" by ")
+                else "Nothing's playing."
+            }
+            else -> null
+        }
+    }
+
+    private fun navCommand(navigator: CarNavigator, heard: String): String? = when {
+        "go home" in heard || heard == "home" -> {
+            navigator.home()
+            "Heading home."
+        }
+        "open apps" in heard || heard == "apps" || "app list" in heard -> {
+            navigator.apps()
+            "Here are your apps."
+        }
+        "settings" in heard -> {
+            navigator.settings()
+            "Opening settings."
+        }
+        "vehicle data" in heard || "car data" in heard -> {
+            if (CarSettings.experimentalFeaturesEnabled.value && CarSettings.carSensorsEnabled.value) {
+                navigator.vehicleData()
+                "Opening vehicle data."
+            } else {
+                "Vehicle data is off. Turn it on under experimental features in settings."
+            }
+        }
+        else -> null
+    }
+
+    private fun infoCommand(heard: String): String? = when {
+        "what time" in heard || "what's the time" in heard ->
+            "It's ${DateFormat.getTimeInstance(DateFormat.SHORT).format(Date())}."
+        "weather" in heard -> {
+            val data = (Weather.state.value as? WeatherState.Ready)?.data
+            if (data != null) "${data.temp}${data.tempUnit} and ${Weather.describe(data.code)} in ${data.place}."
+            else "I don't have the weather yet."
+        }
+        else -> null
+    }
+
+    private suspend fun callCommand(context: Context, heard: String): String? {
+        val name = when {
+            heard.startsWith("call ") -> heard.removePrefix("call ")
+            heard.startsWith("phone ") -> heard.removePrefix("phone ")
+            heard.startsWith("dial ") -> heard.removePrefix("dial ")
+            else -> return null
+        }.trim()
+        if (name.isBlank()) return "Who should I call?"
+        if (!hasCallPermissions(context)) return "Gearslip needs the phone and contacts permissions first, from the phone screen."
+
+        val match = withContext(Dispatchers.IO) {
+            loadContacts(context).firstOrNull { it.name.lowercase().contains(name) }
+        } ?: return "I couldn't find $name in your contacts."
+
+        placeCall(context, match.number)
+        return "Calling ${match.name}."
+    }
+
+    private suspend fun openAppCommand(
+        context: Context,
+        navigator: CarNavigator,
+        frame: CarEnvironment.Frame,
+        heard: String,
+    ): String? {
+        val name = when {
+            heard.startsWith("open ") -> heard.removePrefix("open ")
+            heard.startsWith("launch ") -> heard.removePrefix("launch ")
+            heard.startsWith("start ") -> heard.removePrefix("start ")
+            else -> return null
+        }.trim()
+        if (name.isBlank()) return null
+
+        val entries = LauncherCache.entries ?: withContext(Dispatchers.IO) { LauncherCache.load(context) }
+        val match = entries.firstOrNull { it.label.lowercase().contains(name) }
+            ?: return "I couldn't find an app called $name."
+
+        launchEntry(match, navigator, frame)
+        return "Opening ${match.label}."
+    }
+
+    private val NAVIGATE_TRIGGERS = listOf("navigate to ", "directions to ", "take me to ", "drive to ")
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/AssistantOverlay.kt

@@ -0,0 +1,107 @@
+package app.seb3thehacker.gearslip.car
+
+import app.seb3thehacker.gearslip.car.theme.*
+import android.content.Intent
+import android.net.Uri
+import android.provider.Settings
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import app.seb3thehacker.gearslip.R
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+
+/**
+ * The band that appears while [CarAssistant] is listening, thinking or speaking - a thin strip
+ * across the top, same idea as [CallOverlay]'s active-call banner, so it never blocks the screen
+ * the driver was already looking at.
+ */
+@Composable
+fun AssistantOverlay(modifier: Modifier = Modifier) {
+    val state by CarAssistant.state.collectAsState()
+    if (state.phase == CarAssistant.Phase.IDLE) return
+    val context = LocalContext.current
+
+    Surface(
+        color = MaterialTheme.colorScheme.primaryContainer,
+        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Row(
+            Modifier.padding(horizontal = 16.dp, vertical = 10.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            PulsingMic(state.phase == CarAssistant.Phase.LISTENING)
+            Column(Modifier.weight(1f)) {
+                Text(
+                    when (state.phase) {
+                        CarAssistant.Phase.LISTENING -> "Listening…"
+                        CarAssistant.Phase.THINKING -> "…"
+                        CarAssistant.Phase.SPEAKING -> state.reply
+                        CarAssistant.Phase.ERROR -> state.reply
+                        CarAssistant.Phase.IDLE -> ""
+                    },
+                    style = MaterialTheme.typography.titleSmall,
+                    fontWeight = FontWeight.SemiBold,
+                    maxLines = 2,
+                )
+                if (state.heard.isNotBlank() && state.phase != CarAssistant.Phase.SPEAKING) {
+                    Text(
+                        "\"${state.heard}\"",
+                        style = MaterialTheme.typography.bodySmall,
+                    )
+                }
+            }
+            if (state.missingPermission) {
+                GsButton(tone = GsTone.Tonal, onClick = {
+                    context.startActivity(
+                        Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS, Uri.fromParts("package", context.packageName, null)),
+                    )
+                }) { Text("Grant") }
+            }
+            GsIconButton(Icons.Filled.Close, "Dismiss", CarAssistant::cancel)
+        }
+    }
+}
+
+/** A filled circle with a mic glyph, pulsing gently while actually listening. */
+@Composable
+private fun PulsingMic(listening: Boolean, modifier: Modifier = Modifier) {
+    Surface(
+        shape = CircleShape,
+        color = MaterialTheme.colorScheme.primary,
+        contentColor = MaterialTheme.colorScheme.onPrimary,
+        modifier = modifier.size(36.dp),
+    ) {
+        Row(horizontalArrangement = Arrangement.Center) {
+            MicGlyph(Modifier.padding(8.dp).size(20.dp))
+        }
+    }
+    // `listening` only changes what's drawn elsewhere in the row (the "Listening…" label);
+    // the glyph itself doesn't need to animate for this to read clearly on a glance.
+}
+
+/** The assistant's mic, from `R.drawable.mic_24`, tinted with the current content colour. */
+@Composable
+fun MicGlyph(modifier: Modifier = Modifier) {
+    Icon(ImageVector.vectorResource(R.drawable.mic_24), contentDescription = "Assistant", modifier = modifier)
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CalibrationApp.kt

@@ -1,89 +0,0 @@
-package app.seb3thehacker.gearslip.car
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.background
-import androidx.compose.foundation.gestures.awaitEachGesture
-import androidx.compose.foundation.gestures.awaitFirstDown
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Button
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.drawText
-import androidx.compose.ui.text.rememberTextMeasurer
-import androidx.compose.ui.unit.sp
-
-/**
- * Draws the raw video frame with pixel rulers, for measuring what the head unit actually shows.
- *
- * Numbers are frame pixels. Read the last number visible on each edge to see how much the head
- * unit crops there (the frame is 800 wide by 480 tall when the ruler runs to those values), and
- * tap anywhere: the crosshair is drawn where the phone believes the touch landed, so a mismatch
- * with your finger is the touch offset. Ignores vehicle insets on purpose.
- */
-@Composable
-fun CalibrationApp() {
-    val navigator = LocalCarNavigator.current
-    val measurer = rememberTextMeasurer()
-    var touch by remember { mutableStateOf<Offset?>(null) }
-
-    Box(
-        Modifier
-            .fillMaxSize()
-            .background(Color.Black)
-            .pointerInput(Unit) {
-                awaitEachGesture {
-                    val down = awaitFirstDown()
-                    touch = down.position
-                }
-            },
-    ) {
-        Canvas(Modifier.fillMaxSize()) {
-            val label = TextStyle(color = Color.White, fontSize = 11.sp)
-            val faint = Color(0x55FFFFFF)
-            val w = size.width
-            val h = size.height
-
-            var y = 0
-            while (y <= h) {
-                drawLine(if (y % 100 == 0) Color.White else faint, Offset(0f, y.toFloat()), Offset(w, y.toFloat()), strokeWidth = 1f)
-                if (y % 20 == 0) {
-                    drawText(measurer, "$y", Offset(2f, y.toFloat()), style = label)
-                    drawText(measurer, "$y", Offset(w - 30f, y.toFloat()), style = label)
-                }
-                y += 20
-            }
-            var x = 0
-            while (x <= w) {
-                drawLine(if (x % 100 == 0) Color.White else faint, Offset(x.toFloat(), 0f), Offset(x.toFloat(), h), strokeWidth = 1f)
-                if (x % 50 == 0 && x > 0) {
-                    drawText(measurer, "$x", Offset(x.toFloat() + 2f, 2f), style = label)
-                    drawText(measurer, "$x", Offset(x.toFloat() + 2f, h - 46f), style = label)
-                }
-                x += 20
-            }
-            // Frame border, drawn last and inset by 1px so it is the outermost thing that can show.
-            drawRect(Color.Red, topLeft = Offset(1f, 1f), size = androidx.compose.ui.geometry.Size(w - 2f, h - 2f), style = androidx.compose.ui.graphics.drawscope.Stroke(2f))
-            drawText(measurer, "frame ${w.toInt()}x${h.toInt()}", Offset(w / 2 - 50f, h / 2 - 60f), style = TextStyle(color = Color.Yellow, fontSize = 14.sp))
-
-            touch?.let { t ->
-                drawLine(Color.Green, Offset(t.x, 0f), Offset(t.x, h), strokeWidth = 2f)
-                drawLine(Color.Green, Offset(0f, t.y), Offset(w, t.y), strokeWidth = 2f)
-                drawText(measurer, "touch ${t.x.toInt()},${t.y.toInt()}", Offset(w / 2 - 50f, h / 2 + 40f), style = TextStyle(color = Color.Green, fontSize = 14.sp))
-            }
-        }
-        Button(onClick = { navigator.home() }, modifier = Modifier.align(Alignment.Center)) {
-            Text("Exit calibration")
-        }
-    }
-}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CallOverlay.kt

@@ -0,0 +1,134 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.shape.CircleShape
+import app.seb3thehacker.gearslip.car.theme.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.call.CallUiState
+import app.seb3thehacker.gearslip.call.CarCalls
+
+/**
+ * Sits above whatever the car is showing while a call is ringing or under way. Ringing takes the
+ * whole screen, because nothing else matters more right now; an active call is a thin band along
+ * the top, since from here the driver can only see who it is, not end it - see [CarCalls].
+ */
+@Composable
+fun CallOverlay(modifier: Modifier = Modifier) {
+    val state by CarCalls.state.collectAsState()
+    val context = LocalContext.current.applicationContext
+
+    when (val s = state) {
+        // Covers the box regardless of where the caller aligned it, so the alignment below is
+        // only ever felt by the active-call banner, which is the one that isn't full-screen.
+        is CallUiState.Ringing -> IncomingCall(s, onAnswer = { CarCalls.answer(context) }, onDecline = CarCalls::decline)
+        is CallUiState.Active -> ActiveCallBanner(s, modifier)
+        CallUiState.None -> {}
+    }
+}
+
+@Composable
+private fun IncomingCall(s: CallUiState.Ringing, onAnswer: () -> Unit, onDecline: () -> Unit) {
+    Surface(Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.surfaceContainerLowest) {
+        Column(
+            Modifier.fillMaxSize().padding(32.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Icon(
+                Icons.Filled.Call,
+                contentDescription = null,
+                modifier = Modifier.size(64.dp),
+                tint = MaterialTheme.colorScheme.primary,
+            )
+            Spacer(Modifier.height(16.dp))
+            Text(
+                "Incoming call",
+                style = MaterialTheme.typography.titleMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            Spacer(Modifier.height(8.dp))
+            Text(
+                s.caller.label,
+                style = MaterialTheme.typography.displaySmall,
+                fontWeight = FontWeight.Bold,
+                textAlign = TextAlign.Center,
+            )
+            Spacer(Modifier.height(56.dp))
+            Row(horizontalArrangement = Arrangement.spacedBy(48.dp)) {
+                CallButton(Icons.Filled.Close, "Decline", MaterialTheme.colorScheme.error, enabled = s.canDecline, onClick = onDecline)
+                CallButton(Icons.Filled.Call, "Answer", MaterialTheme.colorScheme.primary, enabled = true, onClick = onAnswer)
+            }
+            if (!s.canDecline) {
+                Spacer(Modifier.height(20.dp))
+                Text(
+                    "Already ringing out loud - answer here, or let it ring.",
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun CallButton(icon: ImageVector, label: String, color: Color, enabled: Boolean, onClick: () -> Unit) {
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        GsIconButton(
+            icon, label, onClick,
+            colors = GsColors(color, Color.White),
+            enabled = enabled,
+            size = 72.dp,
+            iconSize = 30.dp,
+            shape = CircleShape,
+        )
+        Spacer(Modifier.height(8.dp))
+        Text(label, style = MaterialTheme.typography.labelLarge)
+    }
+}
+
+@Composable
+private fun ActiveCallBanner(s: CallUiState.Active, modifier: Modifier = Modifier) {
+    Surface(
+        color = MaterialTheme.colorScheme.primaryContainer,
+        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Row(
+            Modifier.padding(horizontal = 20.dp, vertical = 10.dp),
+            horizontalArrangement = Arrangement.Center,
+        ) {
+            Icon(Icons.Filled.Call, contentDescription = null, modifier = Modifier.size(20.dp))
+            Spacer(Modifier.height(0.dp))
+            Text(
+                "  On a call" + (s.caller?.let { " with ${it.label}" } ?: ""),
+                style = MaterialTheme.typography.labelLarge,
+                fontWeight = FontWeight.SemiBold,
+            )
+        }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarAppStage.kt

@@ -1,9 +1,15 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
 import android.view.SurfaceHolder
 import android.view.SurfaceView
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.gestures.detectTransformGestures
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.gestures.awaitFirstDown
+import androidx.compose.ui.input.pointer.PointerEventPass
+import androidx.compose.ui.input.pointer.util.VelocityTracker
+import kotlin.math.hypot
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -13,11 +19,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -60,7 +66,6 @@ fun CarAppStage(
             AppSurface(connection, frame, template, Modifier.fillMaxSize())
         }
         TemplateChrome(template, Modifier.fillMaxSize().padding(top = if (embedded) 0.dp else CHROME_BAR))
-        if (embedded) CornerMask(EMBEDDED_RADIUS, MaterialTheme.colorScheme.background)
         if (!embedded) ChromeBar(status, onDisconnect, Modifier.align(Alignment.TopCenter))
     }
 }
@@ -90,6 +95,29 @@ private fun AppSurface(
         }
     }
 
+    // A fresh SurfaceView - and so a fresh Surface - for every size, the way Android Auto hands an
+    // app a new surface rather than resizing the old one. A resized SurfaceView keeps the same
+    // BufferQueue, and apps that draw through their own VirtualDisplay build the
+    // new one on it before releasing the old: the old display's disconnect then takes the new one's
+    // connection with it and the map freezes for good. The nav bar hiding for the search keyboard
+    // and the lyrics pane opening both resize this area.
+    androidx.compose.foundation.layout.BoxWithConstraints(modifier) {
+        val epoch by connection.surfaceEpoch.collectAsState()
+        androidx.compose.runtime.key(constraints.maxWidth, constraints.maxHeight, epoch) {
+            SurfaceHost(connection, frame, onSize = { size = it }, Modifier.fillMaxSize())
+        }
+    }
+
+    DisposableEffect(connection) { onDispose { connection.detachSurface() } }
+}
+
+@Composable
+private fun SurfaceHost(
+    connection: CarAppConnection,
+    frame: CarEnvironment.Frame,
+    onSize: (Pair<Int, Int>) -> Unit,
+    modifier: Modifier,
+) {
     AndroidView(
         modifier = modifier
             .pointerInput(connection) {
@@ -102,6 +130,30 @@ private fun AppSurface(
                     if (pan != Offset.Zero) connection.surfaceScroll(-pan.x, -pan.y)
                     if (zoom != 1f) connection.surfaceScale(centroid.x, centroid.y, zoom)
                 }
+            }
+            .pointerInput(connection) {
+                // detectTransformGestures has no velocity, so a fling is measured here alongside
+                // it: one finger lifting while still moving lets the map glide on, as on a car.
+                // Velocity is the finger's own, which is GestureDetector's onFling convention.
+                awaitEachGesture {
+                    val down = awaitFirstDown(requireUnconsumed = false)
+                    val tracker = VelocityTracker()
+                    tracker.addPosition(down.uptimeMillis, down.position)
+                    var pinched = false
+                    while (true) {
+                        val event = awaitPointerEvent(PointerEventPass.Final)
+                        if (event.changes.size > 1) pinched = true
+                        val change = event.changes.firstOrNull { it.id == down.id } ?: break
+                        tracker.addPosition(change.uptimeMillis, change.position)
+                        if (!change.pressed) {
+                            val v = tracker.calculateVelocity()
+                            if (!pinched && hypot(v.x, v.y) >= FLING_MIN_PX_S) {
+                                connection.surfaceFling(v.x, v.y)
+                            }
+                            break
+                        }
+                    }
+                }
             },
         factory = { context ->
             SurfaceView(context).apply {
@@ -115,20 +167,20 @@ private fun AppSurface(
                         height: Int,
                     ) {
                         GearslipLog.i("stage: surface ready at ${width}x$height")
-                        size = width to height
+                        onSize(width to height)
                         connection.attachSurface(holder.surface, width, height, frame.densityDpi)
                     }
 
                     override fun surfaceDestroyed(holder: SurfaceHolder) {
                         GearslipLog.i("stage: surface destroyed")
-                        connection.detachSurface()
+                        // Only this view's own surface: a replaced view's teardown can land after
+                        // its successor has already lent the app a new one.
+                        connection.detachSurface(holder.surface)
                     }
                 })
             }
         },
     )
-
-    DisposableEffect(connection) { onDispose { connection.detachSurface() } }
 }
 
 @Composable
@@ -158,34 +210,13 @@ private fun ChromeBar(
                 }.joinToString(" - ")
                 Text(detail, style = MaterialTheme.typography.bodySmall)
             }
-            TextButton(onClick = onDisconnect) { Text("Stop", color = Color.White) }
+            GsButton(onClick = onDisconnect, tone = GsTone.Tonal) { Text("Stop") }
         }
     }
 }
 
-/** Corner radius of the home screen's map pane and player. */
-val EMBEDDED_RADIUS = 18.dp
-
-/**
- * Rounds the corners of a SurfaceView, which Compose cannot clip: the app draws into its own
- * layer, so the corners are covered from above with the surrounding colour instead.
- */
-@Composable
-private fun CornerMask(radius: androidx.compose.ui.unit.Dp, color: Color) {
-    androidx.compose.foundation.Canvas(Modifier.fillMaxSize()) {
-        val bounds = androidx.compose.ui.geometry.Rect(0f, 0f, size.width, size.height)
-        val cut = androidx.compose.ui.graphics.Path().apply {
-            addRect(bounds)
-            addRoundRect(
-                androidx.compose.ui.geometry.RoundRect(
-                    bounds, androidx.compose.ui.geometry.CornerRadius(radius.toPx()),
-                ),
-            )
-            fillType = androidx.compose.ui.graphics.PathFillType.EvenOdd
-        }
-        drawPath(cut, color)
-    }
-}
-
 /** Height of [ChromeBar]; the template's own chrome starts below it. */
 private val CHROME_BAR = 44.dp
+
+/** Slower than this when the finger lifts and it was a drag that stopped, not a fling. */
+private const val FLING_MIN_PX_S = 400f

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarApps.kt

@@ -1,7 +1,7 @@
 package app.seb3thehacker.gearslip.car
 
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Call
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.Share
 import androidx.compose.material.icons.filled.Settings
@@ -28,8 +28,8 @@ object CarApps {
         CarApp("phone", "Screen sharing", Icons.Filled.Share) {
             PhoneAppsScreen()
         },
-        CarApp("calibrate", "Display test", Icons.Filled.Info) {
+        CarApp("dialer", "Phone", Icons.Filled.Call) {
-            CalibrationApp()
+            PhoneDialerScreen()
         },
         CarApp("settings", "Settings", Icons.Filled.Settings) {
             CarSettingsScreen()

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarAssistant.kt

@@ -0,0 +1,272 @@
+package app.seb3thehacker.gearslip.car
+
+import android.content.Context
+import android.content.Intent
+import android.content.pm.PackageManager
+import android.os.Bundle
+import android.os.Handler
+import android.os.Looper
+import android.speech.RecognitionListener
+import android.speech.RecognizerIntent
+import android.speech.SpeechRecognizer
+import android.speech.tts.TextToSpeech
+import android.speech.tts.UtteranceProgressListener
+import androidx.core.content.ContextCompat
+import app.seb3thehacker.gearslip.call.CallUiState
+import app.seb3thehacker.gearslip.call.CarCalls
+import app.seb3thehacker.gearslip.speech.SpeechEngine
+import app.seb3thehacker.gearslip.speech.VoiceFocus
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+/**
+ * A voice assistant: Gearslip's own [SpeechEngine] (whisper.cpp) to listen, the system's
+ * [TextToSpeech] to answer. Listening used to go through the system's [SpeechRecognizer] alone,
+ * but many phones have no recognizer at all (GrapheneOS ships only text-to-speech), so the
+ * system one is now just the fallback for when the bundled engine can't run.
+ *
+ * Listening and speaking live here; deciding what a command *means* is [AssistantCommands], kept
+ * separate because it needs a [CarNavigator] and a frame to act on, neither of which this object
+ * has - see [pendingCommand].
+ */
+object CarAssistant {
+
+    enum class Phase { IDLE, LISTENING, THINKING, SPEAKING, ERROR }
+
+    data class State(
+        val phase: Phase = Phase.IDLE,
+        val heard: String = "",
+        val reply: String = "",
+        val missingPermission: Boolean = false,
+    )
+
+    private val _state = MutableStateFlow(State())
+    val state: StateFlow<State> = _state
+
+    /** Set once a recognition result comes in; [reply] clears it once handled. */
+    private val _pendingCommand = MutableStateFlow<String?>(null)
+    val pendingCommand: StateFlow<String?> = _pendingCommand
+
+    private var appContext: Context? = null
+    private var recognizer: SpeechRecognizer? = null
+    private var tts: TextToSpeech? = null
+    private var ttsReady = false
+
+    fun init(context: Context) {
+        appContext = context.applicationContext
+        if (tts != null) return
+        tts = TextToSpeech(appContext) { status -> ttsReady = status == TextToSpeech.SUCCESS }
+    }
+
+    private val mainHandler = Handler(Looper.getMainLooper())
+
+    /**
+     * Starts listening, or does nothing if the assistant is already busy with the last request.
+     * [SpeechRecognizer] must be driven from a thread with a Looper, but this is also called from
+     * the raw wire-protocol worker thread ([GearslipRunner]'s key-event handling for the head
+     * unit's own PTT button) which has none - so this always hops to the main thread itself
+     * rather than asking every caller to remember to.
+     */
+    fun start() {
+        if (Looper.myLooper() == Looper.getMainLooper()) startOnMainThread() else mainHandler.post(::startOnMainThread)
+    }
+
+    private fun startOnMainThread() {
+        val context = appContext ?: return
+        if (_state.value.phase == Phase.LISTENING || _state.value.phase == Phase.THINKING) return
+
+        if (ContextCompat.checkSelfPermission(context, android.Manifest.permission.RECORD_AUDIO) !=
+            PackageManager.PERMISSION_GRANTED
+        ) {
+            _state.value = State(Phase.ERROR, reply = "Needs the microphone permission.", missingPermission = true)
+            return
+        }
+        // Android hands every app but the dialer a silent microphone during a call.
+        if (CarCalls.state.value is CallUiState.Active) {
+            _state.value = State(Phase.ERROR, reply = "Voice commands work once the call ends.")
+            return
+        }
+        tts?.stop()
+        _state.value = State(Phase.LISTENING)
+        listenOnce(
+            onPartial = { text -> _state.value = _state.value.copy(heard = text) },
+            onHeard = { _state.value = _state.value.copy(phase = Phase.THINKING) },
+            onResult = { text ->
+                _state.value = _state.value.copy(phase = Phase.THINKING, heard = text)
+                _pendingCommand.value = text
+            },
+            onError = { message -> _state.value = State(Phase.ERROR, reply = message) },
+        )
+    }
+
+    /** Closes the overlay from wherever it's showing: mid-listen, mid-think, or after speaking. */
+    fun cancel() {
+        releaseRecognizer()
+        tts?.stop()
+        _pendingCommand.value = null
+        _state.value = State(Phase.IDLE)
+    }
+
+    /**
+     * Called once [pendingCommand] has been turned into an answer - from [CarUi], the one place
+     * that actually has a [CarNavigator] to have acted on it with.
+     */
+    fun reply(text: String) {
+        _pendingCommand.value = null
+        _state.value = _state.value.copy(phase = Phase.SPEAKING, reply = text)
+
+        val engine = tts
+        if (engine == null || !ttsReady || text.isBlank()) {
+            _state.value = _state.value.copy(phase = Phase.IDLE)
+            return
+        }
+        appContext?.let(VoiceFocus::acquire)
+        engine.setOnUtteranceProgressListener(object : UtteranceProgressListener() {
+            override fun onStart(utteranceId: String?) {}
+            override fun onDone(utteranceId: String?) {
+                VoiceFocus.release()
+                _state.value = _state.value.copy(phase = Phase.IDLE)
+            }
+            @Deprecated("Deprecated in Java, no replacement on this API level")
+            override fun onError(utteranceId: String?) {
+                VoiceFocus.release()
+                _state.value = _state.value.copy(phase = Phase.IDLE)
+            }
+            override fun onStop(utteranceId: String?, interrupted: Boolean) { VoiceFocus.release() }
+        })
+        engine.speak(text, TextToSpeech.QUEUE_FLUSH, null, "gearslip-assistant")
+    }
+
+    /**
+     * Speaks [text] for someone other than the assistant (a message read aloud), then runs
+     * [onDone] on the main thread - straight away if speech isn't available.
+     */
+    fun say(text: String, onDone: () -> Unit) {
+        val engine = tts
+        val context = appContext
+        if (engine == null || context == null || !ttsReady || text.isBlank()) {
+            mainHandler.post(onDone)
+            return
+        }
+        VoiceFocus.acquire(context)
+        engine.setOnUtteranceProgressListener(object : UtteranceProgressListener() {
+            override fun onStart(utteranceId: String?) {}
+            override fun onDone(utteranceId: String?) { VoiceFocus.release(); mainHandler.post(onDone) }
+            @Deprecated("Deprecated in Java, no replacement on this API level")
+            override fun onError(utteranceId: String?) { VoiceFocus.release(); mainHandler.post(onDone) }
+            // Stopped part way: whoever stopped it has already moved on.
+            override fun onStop(utteranceId: String?, interrupted: Boolean) { VoiceFocus.release() }
+        })
+        engine.speak(text, TextToSpeech.QUEUE_FLUSH, null, "gearslip-say")
+    }
+
+    fun stopSpeaking() { tts?.stop() }
+
+    /**
+     * Listens once, the same way the assistant does, and hands back what was said without acting
+     * on it. Callbacks arrive on the main thread; [onError] gets a sentence fit to show.
+     */
+    fun dictate(
+        onPartial: (String) -> Unit,
+        onResult: (String) -> Unit,
+        onError: (String) -> Unit,
+        cue: Boolean = true,
+        onSpeaking: () -> Unit = {},
+    ) {
+        cancel()
+        listenOnce(onPartial, onHeard = {}, onResult, onError, cue, onSpeaking)
+    }
+
+    /**
+     * One phrase, through Gearslip's own [SpeechEngine]. The phone's recognizer is only a fallback
+     * for when the engine itself can't run, since plenty of phones (GrapheneOS among them) have none.
+     */
+    private fun listenOnce(
+        onPartial: (String) -> Unit,
+        onHeard: () -> Unit,
+        onResult: (String) -> Unit,
+        onError: (String) -> Unit,
+        cue: Boolean = true,
+        onSpeaking: () -> Unit = {},
+    ) {
+        val context = appContext ?: return onError("Speech isn't ready yet.")
+        SpeechEngine.listen(
+            context,
+            cue = cue,
+            onSpeaking = onSpeaking,
+            onHeard = onHeard,
+            onResult = onResult,
+            onError = { message ->
+                if (message == SpeechEngine.NOT_LOADED && SpeechRecognizer.isRecognitionAvailable(context)) {
+                    systemListen(context, onPartial, onHeard, onResult, onError)
+                } else {
+                    onError(message)
+                }
+            },
+        )
+    }
+
+    private fun systemListen(
+        context: Context,
+        onPartial: (String) -> Unit,
+        onHeard: () -> Unit,
+        onResult: (String) -> Unit,
+        onError: (String) -> Unit,
+    ) {
+        val r = SpeechRecognizer.createSpeechRecognizer(context)
+        recognizer = r
+        r.setRecognitionListener(object : RecognitionListener {
+            override fun onReadyForSpeech(params: Bundle?) {}
+            override fun onBeginningOfSpeech() {}
+            override fun onRmsChanged(rmsdB: Float) {}
+            override fun onBufferReceived(buffer: ByteArray?) {}
+            override fun onEndOfSpeech() = onHeard()
+            override fun onEvent(eventType: Int, params: Bundle?) {}
+
+            override fun onError(error: Int) {
+                releaseRecognizer()
+                onError(errorMessage(error))
+            }
+
+            override fun onResults(results: Bundle?) {
+                releaseRecognizer()
+                val text = results?.getStringArrayList(SpeechRecognizer.RESULTS_RECOGNITION)?.firstOrNull().orEmpty()
+                if (text.isBlank()) onError("Didn't catch that.") else onResult(text)
+            }
+
+            override fun onPartialResults(partialResults: Bundle?) {
+                partialResults?.getStringArrayList(SpeechRecognizer.RESULTS_RECOGNITION)?.firstOrNull()?.let(onPartial)
+            }
+        })
+        r.startListening(
+            Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH).apply {
+                putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM)
+                putExtra(RecognizerIntent.EXTRA_PARTIAL_RESULTS, true)
+                putExtra(RecognizerIntent.EXTRA_CALLING_PACKAGE, context.packageName)
+            },
+        )
+    }
+
+    fun stopListening() = releaseRecognizer()
+
+    private fun releaseRecognizer() {
+        SpeechEngine.cancel()
+        recognizer?.let { runCatching { it.cancel() }; it.destroy() }
+        recognizer = null
+    }
+
+    private fun errorMessage(code: Int): String = when (code) {
+        SpeechRecognizer.ERROR_NO_MATCH, SpeechRecognizer.ERROR_SPEECH_TIMEOUT -> "Didn't catch that."
+        SpeechRecognizer.ERROR_INSUFFICIENT_PERMISSIONS -> "Needs the microphone permission."
+        SpeechRecognizer.ERROR_RECOGNIZER_BUSY -> "The speech recognizer is busy."
+        SpeechRecognizer.ERROR_NETWORK, SpeechRecognizer.ERROR_NETWORK_TIMEOUT -> "The speech recognizer needs a network it doesn't have."
+        else -> "Speech recognition failed."
+    }
+
+    fun shutdown() {
+        releaseRecognizer()
+        tts?.shutdown()
+        tts = null
+        ttsReady = false
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarDashboardScreen.kt

@@ -19,7 +19,11 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.produceState
+import app.seb3thehacker.gearslip.car.theme.GsColors
+import app.seb3thehacker.gearslip.car.theme.GsIconBox
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -40,7 +44,8 @@ import kotlinx.coroutines.withContext
 import org.json.JSONObject
 
 /**
- * Opened from the nav bar clock: the week's calendar and the current weather, at a glance. Both
+ * Opened from the nav bar clock: the current weather, the week's calendar and the phone's
+ * notifications, at a glance. The first two
  * need permissions granted on the phone (READ_CALENDAR, location) - if either was declined
  * this just shows an empty state instead of asking again from inside the car UI.
  */
@@ -55,33 +60,46 @@ fun CarDashboardScreen() {
             .padding(horizontal = 24.dp, vertical = 16.dp),
         verticalArrangement = Arrangement.spacedBy(24.dp),
     ) {
-        Text("Today", style = MaterialTheme.typography.headlineMedium, fontWeight = FontWeight.Bold)
+        ScreenHeader("Today")
         WeatherCard(context)
         AgendaCard(context)
+        NotificationsSection()
     }
 }
 
 @Composable
 private fun WeatherCard(context: Context) {
-    val weather by produceState<Weather?>(Weather.LOADING) {
+    val state by Weather.state.collectAsState()
-        value = withContext(Dispatchers.IO) { fetchWeather(context) }
+    val navigator = LocalCarNavigator.current
-    }
+    LaunchedEffect(Unit) { Weather.refresh(context) }
 
-    Surface(color = MaterialTheme.colorScheme.surfaceContainerHigh, shape = MaterialTheme.shapes.extraLarge) {
+    GsIconBox(
-        Row(Modifier.fillMaxWidth().padding(20.dp), verticalAlignment = Alignment.CenterVertically) {
+        onClick = { navigator.weather() },
-            val w = weather
+        colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHigh, MaterialTheme.colorScheme.onSurface),
-            when {
+        shape = MaterialTheme.shapes.extraLarge,
-                w === Weather.LOADING -> Text("Getting weather…", style = MaterialTheme.typography.bodyLarge)
+    ) {
-                w == null -> Text(
+        Row(
-                    "Weather unavailable - no location fix yet.",
+            Modifier.fillMaxWidth().padding(20.dp),
-                    style = MaterialTheme.typography.bodyLarge,
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            when (val s = state) {
+                WeatherState.Loading -> Text("Getting weather…", style = MaterialTheme.typography.bodyLarge)
+                is WeatherState.Unavailable -> Text(
+                    s.reason, style = MaterialTheme.typography.bodyLarge,
                     color = MaterialTheme.colorScheme.onSurfaceVariant,
                 )
-                else -> Text(
+                is WeatherState.Ready -> {
-                    "${w.tempC.toInt()}°C  ·  ${w.description}",
+                    val w = s.data
-                    style = MaterialTheme.typography.titleLarge,
+                    WeatherIcon(w.code, w.isDay, size = 44.dp)
-                    fontWeight = FontWeight.SemiBold,
+                    Column {
-                )
+                        Text(
+                            "${w.temp}${w.tempUnit}  ·  ${Weather.describe(w.code)}",
+                            style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.SemiBold,
+                        )
+                        Text(w.place, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                    }
+                }
             }
         }
     }
@@ -89,8 +107,8 @@ private fun WeatherCard(context: Context) {
 
 @Composable
 private fun AgendaCard(context: Context) {
-    val events by produceState<List<AgendaEvent>?>(null) {
+    val events by produceState<List<AgendaEvent>?>(cachedAgenda) {
-        value = withContext(Dispatchers.IO) { fetchAgenda(context) }
+        value = withContext(Dispatchers.IO) { fetchAgenda(context) }.also { cachedAgenda = it }
     }
 
     Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
@@ -143,63 +161,14 @@ private fun eventWhen(event: AgendaEvent): String {
     return SimpleDateFormat("EEE", Locale.getDefault()).apply { timeZone = zone }.format(Date(event.startMillis)) + " " + time
 }
 
-private data class Weather(val tempC: Double, val description: String) {
-    companion object { val LOADING = Weather(Double.NaN, "") }
-}
-
 private data class AgendaEvent(val title: String, val startMillis: Long, val allDay: Boolean)
 
-private const val WEATHER_TTL_MS = 60 * 60 * 1000L
+@Volatile private var cachedAgenda: List<AgendaEvent>? = null
-private var cachedWeather: Weather? = null
-private var cachedWeatherAt = 0L
 
-/** Served from memory for up to an hour: weather barely changes, and each call is a network request. */
+/** Loads the weather and the agenda ahead of time, so the dashboard opens with both in place. */
-private fun fetchWeather(context: Context): Weather? {
+fun warmDashboard(context: Context) {
-    val now = System.currentTimeMillis()
+    Weather.refresh(context, force = true)
-    cachedWeather?.let { if (now - cachedWeatherAt < WEATHER_TTL_MS) return it }
+    cachedAgenda = fetchAgenda(context)
-    return loadWeather(context)?.also { cachedWeather = it; cachedWeatherAt = now }
-}
-
-/** Null means no fix or no permission; the card shows a plain empty state either way. */
-private fun loadWeather(context: Context): Weather? {
-    if (context.checkSelfPermission(Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
-        return null
-    }
-    val manager = context.getSystemService(LocationManager::class.java) ?: return null
-    val location = manager.allProviders
-        .mapNotNull { runCatching { manager.getLastKnownLocation(it) }.getOrNull() }
-        .maxByOrNull { it.time }
-        ?: return null
-
-    return runCatching {
-        // Open-Meteo: no API key, no account - the simplest thing that gives a real reading.
-        val url = URL(
-            "https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}" +
-                "&longitude=${location.longitude}&current_weather=true",
-        )
-        val body = (url.openConnection() as HttpURLConnection).run {
-            connectTimeout = 5_000
-            readTimeout = 5_000
-            inputStream.bufferedReader().use { it.readText() }
-        }
-        val current = JSONObject(body).getJSONObject("current_weather")
-        Weather(current.getDouble("temperature"), weatherDescription(current.getInt("weathercode")))
-    }.onFailure { GearslipLog.w("weather fetch failed: ${it.message}") }.getOrNull()
-}
-
-/** Open-Meteo's WMO weather codes, collapsed to what's worth a glance from the driver's seat. */
-private fun weatherDescription(code: Int): String = when (code) {
-    0 -> "Clear"
-    1, 2 -> "Partly cloudy"
-    3 -> "Overcast"
-    45, 48 -> "Fog"
-    in 51..57 -> "Drizzle"
-    in 61..67 -> "Rain"
-    in 71..77 -> "Snow"
-    in 80..82 -> "Rain showers"
-    in 85..86 -> "Snow showers"
-    in 95..99 -> "Thunderstorm"
-    else -> "-"
 }
 
 /**

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarHomeScreen.kt

@@ -1,6 +1,6 @@
 package app.seb3thehacker.gearslip.car
 
-import androidx.compose.foundation.Image
+import app.seb3thehacker.gearslip.car.theme.*
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,43 +13,62 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.FilledIconButton
+import androidx.compose.material.icons.filled.Favorite
-import androidx.compose.material3.Icon
+import androidx.compose.material.icons.filled.FavoriteBorder
-import androidx.compose.material3.IconButton
+import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.material3.Surface
+import androidx.compose.ui.res.vectorResource
-import androidx.compose.material3.Text
+import android.support.v4.media.session.PlaybackStateCompat
-import androidx.compose.material3.TextButton
+import app.seb3thehacker.gearslip.R
-import androidx.compose.runtime.Composable
+import androidx.compose.foundation.Image
-import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.foundation.background
-import androidx.compose.runtime.getValue
+import androidx.compose.foundation.clickable
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.mutableLongStateOf
 import androidx.compose.runtime.produceState
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.ui.draw.clip
-import android.media.session.PlaybackState
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import android.media.session.PlaybackState
+import app.seb3thehacker.gearslip.media.MediaArt
+import kotlinx.coroutines.delay
+import androidx.compose.material3.Icon
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
+import app.seb3thehacker.gearslip.media.ArtColor
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import app.seb3thehacker.gearslip.host.CarAppConnection
 import app.seb3thehacker.gearslip.media.CarMedia
-import app.seb3thehacker.gearslip.media.MediaArt
+import app.seb3thehacker.gearslip.media.NowPlaying
-import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 
 /**
- * The home screen: the map on the left, what is playing on the right.
+ * The home screen: the map on the left, the docked player on the right when asked for.
  *
- * The map is whatever navigation app was used last, brought back on its own. The player only
+ * The map is whatever navigation app was used last, brought back on its own. The player sits in
- * takes its share of the screen while something is loaded; otherwise the map has all of it.
+ * the nav bar's pill until its dock button moves it here; the column closes itself back to a
+ * full-width map once nothing is playing.
  */
 @Composable
 fun CarHome() {
@@ -61,19 +80,36 @@ fun CarHome() {
     LaunchedEffect(Unit) { CarServices.autostart(frame) }
     LaunchedEffect(phase) { if (phase == CarMedia.Phase.READY) CarServices.autoplayIfDue() }
 
-    val showPlayer = phase == CarMedia.Phase.READY && now.hasTrack
+    val navigator = LocalCarNavigator.current
+    val panel = navigator.sidePanel
 
-    Row(Modifier.fillMaxSize().padding(8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+    // Coming back to the map from another screen: the map stayed loaded underneath, so its surface
+    // is only replaced if it died meanwhile. The first composition is skipped, since the surface
+    // is only just being lent.
+    val onHome = navigator.current == CarScreen.Home
+    val seenHome = remember { booleanArrayOf(false) }
+    LaunchedEffect(onHome) {
+        if (onHome && seenHome[0]) CarServices.nav.replaceDeadSurface()
+        if (onHome) seenHome[0] = true
+    }
+    val splitScreen = phase == CarMedia.Phase.READY && now.isActive && panel != SidePanel.NONE
+
+    // No outer padding on any side, split screen or not - only the gap between the two panes
+    // when the player is sharing the screen with the map.
+    Row(
+        Modifier.fillMaxSize(),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
         Box(
             Modifier
-                .weight(if (showPlayer) 2.1f else 1f)
+                .weight(if (splitScreen) 2.1f else 1f)
-                .fillMaxHeight()
+                .fillMaxHeight(),
-                .clip(RoundedCornerShape(EMBEDDED_RADIUS)),
         ) {
             MapPane(navStatus, frame)
         }
-        if (showPlayer) {
+        if (splitScreen) {
-            MiniPlayer(Modifier.weight(1f).fillMaxHeight())
+            val side = Modifier.weight(1f).fillMaxHeight()
+            if (panel == SidePanel.LYRICS) SideLyrics(now, side) else DockedPlayer(now, side)
         }
     }
 }
@@ -92,104 +128,131 @@ private fun MapPane(status: CarAppConnection.Status, frame: CarEnvironment.Frame
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         val hasLast = CarSettings.lastNav.value != null
+        val hasNavApps by CarServices.hasNavApps.collectAsStateWithLifecycle()
+        val scope = androidx.compose.runtime.rememberCoroutineScope()
         when (status.phase) {
             CarAppConnection.Phase.BINDING, CarAppConnection.Phase.HANDSHAKE ->
                 Text("Starting ${status.app ?: "the map"}…", style = MaterialTheme.typography.titleMedium)
             CarAppConnection.Phase.REJECTED, CarAppConnection.Phase.FAILED -> {
                 Text("${status.app ?: "The map app"} would not start.", style = MaterialTheme.typography.titleMedium)
                 status.detail?.let { Text(it, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant) }
-                TextButton(onClick = navigator::apps) { Text("Choose another app") }
+                GsButton(onClick = navigator::apps, tone = GsTone.Tonal) { Text("Choose another app") }
             }
-            else -> {
+            else -> if (!hasNavApps) {
+                // Nothing to auto-select and nothing to pick from Car apps either - this is the
+                // only case worth a distinct screen, since every other IDLE case resolves itself.
+                Text("No mapping apps found.", style = MaterialTheme.typography.titleMedium)
                 Text(
-                    if (hasLast) "Starting the map…" else "No map app chosen yet.",
+                    "Install a navigation app that supports Android Auto and it will start here on its own.",
-                    style = MaterialTheme.typography.titleMedium,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                 )
-                if (!hasLast) {
+            } else if (hasLast) {
-                    Text(
+                // IDLE with a last app on record means the driver stopped it themselves - it will
-                        "Open Car apps and connect a navigation app; it will start here next time.",
+                // not come back on its own, so the screen must offer a way to bring it back rather
-                        style = MaterialTheme.typography.bodyMedium,
+                // than sit on a "starting" message that never resolves.
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                Text("Map stopped.", style = MaterialTheme.typography.titleMedium)
-                    )
+                GsButton(onClick = { scope.launch { CarServices.reconnectNav(frame) } }, tone = GsTone.Tonal) { Text("Reopen") }
-                    TextButton(onClick = { navigator.apps() }) { Text("Car apps") }
+                GsButton(onClick = { navigator.apps() }, tone = GsTone.Tonal) { Text("Car apps") }
-                }
+            } else {
+                // Autostart is still picking one - a navigation app is installed, so this resolves
+                // to a "Starting..." state itself, in the next frame or two.
             }
         }
     }
 }
 
-/** Previous, play/pause, next and a seek bar, and nothing else: the full controls are in the media screen. */
+/**
+ * The player, docked beside the map: art, title, progress, transport, then like, shuffle, repeat
+ * and lyrics. While it's here the nav bar's pill steps aside on Home, so the controls never show
+ * twice. The X sends it back to the nav bar.
+ */
 @Composable
-private fun MiniPlayer(modifier: Modifier) {
+private fun DockedPlayer(now: NowPlaying, modifier: Modifier) {
+    val navigator = LocalCarNavigator.current
     val media = CarServices.media
-    val now by media.now.collectAsStateWithLifecycle()
     val context = LocalContext.current
+    val scheme = MaterialTheme.colorScheme
     val art by produceState(now.art, now.art, now.artUri) { value = now.art ?: MediaArt.load(context, now.artUri) }
 
-    var position by remember { mutableStateOf(0L) }
+    Surface(modifier = modifier, color = rememberArtColor(art, MaterialTheme.colorScheme.surfaceVariant)) {
-    LaunchedEffect(now) {
+        BoxWithConstraints(Modifier.fillMaxSize().padding(12.dp)) {
-        while (true) {
+            // Whatever height the controls below leave over, so the art grows on a taller
-            position = now.currentPosition()
+            // screen and shrinks rather than pushing the buttons off a short one.
-            delay(500)
+            val artSize = minOf(maxWidth - 44.dp, maxHeight - 250.dp).coerceIn(56.dp, 200.dp)
-        }
+            Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
-    }
+                Box(Modifier.fillMaxWidth()) {
-
+                    // Art opens the full media screen, same as on the pill.
-    val navigator = LocalCarNavigator.current
+                    Box(
-    Surface(
+                        Modifier
-        onClick = navigator::media,
+                            .align(Alignment.TopCenter)
-        modifier = modifier,
+                            .size(artSize)
-        shape = RoundedCornerShape(EMBEDDED_RADIUS),
+                            .clip(RoundedCornerShape(12.dp))
-        color = MaterialTheme.colorScheme.surfaceVariant,
+                            .background(scheme.surface)
-    ) {
+                            .clickable { navigator.media() },
-        Column(
+                    ) {
-            Modifier.fillMaxSize().padding(18.dp),
+                        art?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
-            horizontalAlignment = Alignment.CenterHorizontally,
+                    }
-            verticalArrangement = Arrangement.Center,
+                    GsIconButton(
-        ) {
+                        Icons.Filled.Close, "Back to the nav bar", navigator::closeSidePanel,
-            Box(Modifier.size(140.dp).clip(RoundedCornerShape(EMBEDDED_RADIUS))) {
+                        Modifier.align(Alignment.TopEnd), size = 36.dp, iconSize = 20.dp,
-                art?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
-            }
-            Spacer(Modifier.height(10.dp))
-            Text(
-                now.title.ifEmpty { "Nothing playing" },
-                style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold,
-                maxLines = 1, overflow = TextOverflow.Ellipsis,
-            )
-            Text(
-                now.artist,
-                style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant,
-                maxLines = 1, overflow = TextOverflow.Ellipsis,
-            )
-
-            if (now.durationMs > 0) {
-                WavyProgress(
-                    fraction = position.toFloat() / now.durationMs,
-                    playing = now.state == PlaybackState.STATE_PLAYING,
-                    onSeek = { media.seek((it * now.durationMs).toLong()) },
-                    modifier = Modifier.padding(vertical = 4.dp),
-                )
-            } else {
-                Spacer(Modifier.height(16.dp))
-            }
-
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(6.dp),
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                IconButton(onClick = { media.previous() }, modifier = Modifier.size(48.dp)) {
-                    Icon(MediaIcons.Previous, "Previous", Modifier.size(30.dp))
-                }
-                FilledIconButton(onClick = media::togglePlay, modifier = Modifier.size(60.dp)) {
-                    Icon(
-                        if (now.playing) MediaIcons.Pause else Icons.Filled.PlayArrow,
-                        if (now.playing) "Pause" else "Play",
-                        Modifier.size(36.dp),
                     )
                 }
-                IconButton(onClick = { media.next() }, modifier = Modifier.size(48.dp)) {
+                Spacer(Modifier.height(10.dp))
-                    Icon(MediaIcons.Next, "Next", Modifier.size(30.dp))
+                Text(
+                    now.title, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold,
+                    maxLines = 1, overflow = TextOverflow.Ellipsis,
+                )
+                Text(
+                    now.artist, style = MaterialTheme.typography.bodyMedium, color = scheme.onSurfaceVariant,
+                    maxLines = 1, overflow = TextOverflow.Ellipsis,
+                )
+                if (now.durationMs > 0) {
+                    PlayerProgress(now, media, Modifier.fillMaxWidth().padding(vertical = 2.dp), showTimes = false)
+                } else {
+                    Spacer(Modifier.height(10.dp))
+                }
+                TransportRow(now, media, skip = 48.dp, modifier = Modifier.fillMaxWidth())
+                Spacer(Modifier.height(10.dp))
+                PlayModeRow(now, media, size = 42.dp, modifier = Modifier.fillMaxWidth()) {
+                    GsIconButton(
+                        ImageVector.vectorResource(R.drawable.lyrics_24), "Lyrics", navigator::showSideLyrics,
+                        size = 42.dp, iconSize = 22.dp,
+                    )
                 }
             }
         }
     }
 }
+
+/**
+ * Lyrics alone beside the map, big enough to read at a glance. No art: that space goes to a
+ * larger title and artist instead. The player goes back to the nav bar meanwhile, whose dock
+ * button swaps these back out for the controls.
+ */
+@Composable
+private fun SideLyrics(now: NowPlaying, modifier: Modifier) {
+    val navigator = LocalCarNavigator.current
+    val context = LocalContext.current
+    val art by produceState(now.art, now.art, now.artUri) { value = now.art ?: MediaArt.load(context, now.artUri) }
+    Surface(modifier = modifier, color = rememberArtColor(art, MaterialTheme.colorScheme.surfaceVariant)) {
+        Column(Modifier.fillMaxSize().padding(16.dp)) {
+            Row(verticalAlignment = Alignment.Top) {
+                Column(Modifier.weight(1f)) {
+                    Text(
+                        now.title, style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold,
+                        maxLines = 2, overflow = TextOverflow.Ellipsis,
+                    )
+                    Text(
+                        now.artist, style = MaterialTheme.typography.titleMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        maxLines = 1, overflow = TextOverflow.Ellipsis,
+                    )
+                }
+                GsIconButton(Icons.Filled.Close, "Hide lyrics", navigator::closeSidePanel, size = 36.dp, iconSize = 20.dp)
+            }
+            Spacer(Modifier.height(12.dp))
+            LyricsPanel(now, Modifier.weight(1f).fillMaxWidth(), lineStyle = MaterialTheme.typography.headlineSmall)
+        }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarKeyboard.kt

@@ -1,5 +1,6 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -8,12 +9,14 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -23,8 +26,23 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.coerceIn
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.LaunchedEffect
+
+/**
+ * Whether a [CarKeyboard] is on screen right now, so [CarUi] can give it the row of height the
+ * bottom nav bar normally holds instead of squeezing it in above - a driver typing has no use
+ * for Home/Apps/Settings shortcuts anyway, and the screen is small enough that the space matters.
+ */
+object CarKeyboardVisibility {
+    val state = mutableStateOf(false)
+}
 
 /**
  * A keyboard the host draws itself.
@@ -35,7 +53,13 @@ import androidx.compose.foundation.shape.RoundedCornerShape
  * the same reasons, so this does too - large keys, no long-press, no prediction.
  *
  * It is a pure function of [text]: every key reports the new string and holds no state beyond
- * which layer is showing.
+ * which layer is showing. Laid out like a PC's QWERTY keyboard rather than a phone's: shift and
+ * backspace flank the letter block (top-right and bottom-left of it, same as a physical board),
+ * not the space bar, so a fumbled reach for space never lands on delete instead.
+ *
+ * [onDismiss] is null wherever there's no keyboard-shown state independent of the screen itself
+ * (a search template, sign-in) - there, the header's own back action is the only way out and no
+ * dismiss button is drawn.
  */
 @Composable
 fun CarKeyboard(
@@ -45,48 +69,88 @@ fun CarKeyboard(
     modifier: Modifier = Modifier,
     submitIcon: Boolean = true,
     submitImage: ImageVector? = null,
+    onDismiss: (() -> Unit)? = null,
 ) {
     var symbols by remember { mutableStateOf(false) }
     var shifted by remember { mutableStateOf(false) }
 
-    val rows = if (symbols) SYMBOL_ROWS else LETTER_ROWS
+    DisposableEffect(Unit) {
+        CarKeyboardVisibility.state.value = true
+        onDispose { CarKeyboardVisibility.state.value = false }
+    }
 
-    Surface(
+    // The same field on the phone, for typing on its own keyboard: see [PhoneTyping].
-        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+    val latestChange by rememberUpdatedState(onTextChange)
-        modifier = modifier.fillMaxWidth(),
+    val latestSubmit by rememberUpdatedState(onSubmit)
-    ) {
+    val latestDismiss by rememberUpdatedState(onDismiss)
-        Column(
+    val phoneField = remember {
-            Modifier.padding(horizontal = 6.dp, vertical = 4.dp),
+        PhoneTyping.open(text, { latestChange(it) }, { latestSubmit() }, onDismiss?.let { { latestDismiss?.invoke() } })
-            verticalArrangement = Arrangement.spacedBy(4.dp),
+    }
+    DisposableEffect(phoneField) { onDispose { PhoneTyping.close(phoneField) } }
+    LaunchedEffect(text) { PhoneTyping.carText(phoneField, text) }
+
+    val rows = if (symbols) SYMBOL_ROWS else LETTER_ROWS
+    val keyHeight = keyHeight(LocalConfiguration.current.screenHeightDp)
+
+    CompositionLocalProvider(LocalKeyHeight provides keyHeight) {
+        Surface(
+            color = MaterialTheme.colorScheme.surfaceContainerHigh,
+            modifier = modifier.fillMaxWidth(),
         ) {
-            rows.forEach { row ->
+            Column(
+                Modifier.padding(horizontal = 6.dp, vertical = 4.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp),
+            ) {
+                rows.dropLast(1).forEach { row ->
+                    Row(
+                        Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    ) {
+                        row.forEach { key ->
+                            val label = if (shifted && !symbols) key.uppercase() else key
+                            Key(label, Modifier.weight(1f)) {
+                                onTextChange(text + label)
+                                shifted = false
+                            }
+                        }
+                    }
+                }
+
+                // The bottom letter row: shift and backspace bookend it, exactly where a physical
+                // keyboard puts them relative to the letter block, not down beside the space bar.
                 Row(
                     Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(4.dp),
                 ) {
-                    row.forEach { key ->
+                    if (!symbols) {
+                        Key(if (shifted) "SHIFT" else "shift", Modifier.weight(1.6f)) { shifted = !shifted }
+                    }
+                    rows.last().forEach { key ->
                         val label = if (shifted && !symbols) key.uppercase() else key
                         Key(label, Modifier.weight(1f)) {
                             onTextChange(text + label)
                             shifted = false
                         }
                     }
+                    Key("⌫", Modifier.weight(1.6f)) {
+                        if (text.isNotEmpty()) onTextChange(text.dropLast(1))
+                    }
                 }
-            }
 
-            Row(
+                // Control row: no backspace here - it stays with the letters above, not next to the
-                Modifier.fillMaxWidth(),
+                // key most likely to be hit right after it by mistake. Dismiss (when offered) is the
-                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                // last key, bottom-right corner of the keyboard.
-            ) {
+                Row(
-                Key(if (symbols) "abc" else "?123", Modifier.weight(1.4f)) { symbols = !symbols }
+                    Modifier.fillMaxWidth(),
-                if (!symbols) {
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
-                    Key(if (shifted) "SHIFT" else "shift", Modifier.weight(1.4f)) { shifted = !shifted }
+                ) {
+                    Key(if (symbols) "abc" else "?123", Modifier.weight(1.4f)) { symbols = !symbols }
+                    Key("space", Modifier.weight(if (onDismiss != null) 3.2f else 4f)) { onTextChange("$text ") }
+                    SubmitKey(Modifier.weight(1.6f), submitIcon, submitImage, onSubmit)
+                    if (onDismiss != null) {
+                        DismissKey(onDismiss, Modifier.weight(1.4f))
+                    }
                 }
-                Key("space", Modifier.weight(3f)) { onTextChange("$text ") }
-                Key("⌫", Modifier.weight(1.4f)) {
-                    if (text.isNotEmpty()) onTextChange(text.dropLast(1))
-                }
-                SubmitKey(Modifier.weight(1.6f), submitIcon, submitImage, onSubmit)
             }
         }
     }
@@ -94,11 +158,11 @@ fun CarKeyboard(
 
 @Composable
 private fun Key(label: String, modifier: Modifier = Modifier, onClick: () -> Unit) {
-    Surface(
+    GsIconBox(
-        color = MaterialTheme.colorScheme.surfaceContainerHighest,
+        onClick = onClick,
-        contentColor = MaterialTheme.colorScheme.onSurface,
+        modifier = modifier.height(LocalKeyHeight.current),
+        colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHighest, MaterialTheme.colorScheme.onSurface),
         shape = RoundedCornerShape(8.dp),
-        modifier = modifier.height(KEY_HEIGHT).clickable(onClick = onClick),
     ) {
         Row(
             Modifier.fillMaxWidth(),
@@ -116,12 +180,30 @@ private fun Key(label: String, modifier: Modifier = Modifier, onClick: () -> Uni
 }
 
 @Composable
+private fun DismissKey(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    GsIconBox(
+        onClick = onClick,
+        modifier = modifier.height(LocalKeyHeight.current),
+        colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHighest, MaterialTheme.colorScheme.onSurfaceVariant),
+        shape = RoundedCornerShape(8.dp),
+    ) {
+        Row(
+            Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(Icons.Filled.Close, contentDescription = "Hide keyboard")
+        }
+    }
+}
+
+@Composable
 private fun SubmitKey(modifier: Modifier, search: Boolean, image: ImageVector?, onClick: () -> Unit) {
-    Surface(
+    GsIconBox(
-        color = MaterialTheme.colorScheme.primary,
+        onClick = onClick,
-        contentColor = MaterialTheme.colorScheme.onPrimary,
+        modifier = modifier.height(LocalKeyHeight.current),
+        colors = GsColors(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary),
         shape = RoundedCornerShape(8.dp),
-        modifier = modifier.height(KEY_HEIGHT).clickable(onClick = onClick),
     ) {
         Row(
             Modifier.fillMaxWidth(),
@@ -137,10 +219,12 @@ private fun SubmitKey(modifier: Modifier, search: Boolean, image: ImageVector?,
 }
 
 /**
- * Big enough to hit on a bumpy road, small enough that four rows plus a field plus a few
+ * Big enough to hit on a bumpy road, small enough that four rows plus a field plus a few results
- * results all fit a 480px-tall screen - which is the real constraint here, not the key size.
+ * still fit. A 480-tall screen sets the floor; a taller one (LIVI's 1280x720) gets bigger keys.
  */
-private val KEY_HEIGHT = 34.dp
+private fun keyHeight(screenHeightDp: Int): Dp = (screenHeightDp * 0.075f).dp.coerceIn(36.dp, 52.dp)
+
+private val LocalKeyHeight = compositionLocalOf { 36.dp }
 
 private val LETTER_ROWS = listOf(
     "qwertyuiop".map { it.toString() },

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarKeys.kt

@@ -0,0 +1,137 @@
+package app.seb3thehacker.gearslip.car
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.view.KeyEvent
+import app.seb3thehacker.gearslip.GearslipLog
+import app.seb3thehacker.gearslip.call.CallUiState
+import app.seb3thehacker.gearslip.call.CarCalls
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.SharedFlow
+
+/**
+ * The car's own buttons: steering wheel, rotary knob, D-pad and the hard keys around the screen.
+ *
+ * The head unit sends Android keycodes as they are, so the numbers here are android.view.KeyEvent's.
+ * Media, voice and call keys act straight away. Keys that move around the car UI (back, home, the
+ * knob) need a [CarNavigator], which only [CarUi] has, so they go out on [screenKeys]. Focus keys
+ * (D-pad, knob turns, OK) become real key events on the car's display through [focusSink], where
+ * Compose moves focus between buttons the same way it would with a keyboard.
+ */
+object CarKeys {
+
+    /** A key that changes which screen is showing. */
+    enum class ScreenKey { BACK, HOME, MAP, MEDIA, PHONE }
+
+    private val _screenKeys = MutableSharedFlow<ScreenKey>(extraBufferCapacity = 8)
+    val screenKeys: SharedFlow<ScreenKey> = _screenKeys
+
+    /** Delivers an Android key event to the car display; set while the car UI is showing. */
+    @Volatile var focusSink: ((keyCode: Int, down: Boolean) -> Unit)? = null
+
+    private var appContext: Context? = null
+    private val main = Handler(Looper.getMainLooper())
+
+    fun init(context: Context) { appContext = context.applicationContext }
+
+    /**
+     * Every key worth asking the head unit for. The binding request lists what the head unit
+     * offered; when it offers nothing (some units leave the list empty and send keys anyway),
+     * this is what's asked for instead.
+     */
+    val WANTED = listOf(
+        KeyEvent.KEYCODE_MEDIA_PLAY_PAUSE, KeyEvent.KEYCODE_MEDIA_PLAY, KeyEvent.KEYCODE_MEDIA_PAUSE,
+        KeyEvent.KEYCODE_MEDIA_NEXT, KeyEvent.KEYCODE_MEDIA_PREVIOUS, KeyEvent.KEYCODE_MEDIA_STOP,
+        KeyEvent.KEYCODE_SEARCH, KeyEvent.KEYCODE_VOICE_ASSIST,
+        KeyEvent.KEYCODE_CALL, KeyEvent.KEYCODE_ENDCALL,
+        KeyEvent.KEYCODE_BACK, KeyEvent.KEYCODE_HOME,
+        KeyEvent.KEYCODE_DPAD_UP, KeyEvent.KEYCODE_DPAD_DOWN, KeyEvent.KEYCODE_DPAD_LEFT,
+        KeyEvent.KEYCODE_DPAD_RIGHT, KeyEvent.KEYCODE_DPAD_CENTER, KeyEvent.KEYCODE_ENTER,
+        KEYCODE_ROTARY_CONTROLLER, KEYCODE_MEDIA, KEYCODE_NAVIGATION, KEYCODE_TEL,
+    )
+
+    /**
+     * One key edge from the head unit. Most keys act on the press; focus keys pass both edges on,
+     * so a held D-pad key repeats the way it would anywhere else. Returns false for a key nothing
+     * here knows, for the caller to log.
+     */
+    fun onKey(keyCode: Int, down: Boolean, longPress: Boolean): Boolean {
+        if (keyCode in FOCUS_KEYS) {
+            focusSink?.invoke(keyCode, down)
+            return true
+        }
+        if (!down) return keyCode in WANTED
+        val media = CarServices.media
+        when (keyCode) {
+            KeyEvent.KEYCODE_MEDIA_PLAY_PAUSE -> media.togglePlay()
+            KeyEvent.KEYCODE_MEDIA_PLAY -> if (!media.now.value.playing) media.togglePlay()
+            KeyEvent.KEYCODE_MEDIA_PAUSE, KeyEvent.KEYCODE_MEDIA_STOP -> if (media.now.value.playing) media.togglePlay()
+            KeyEvent.KEYCODE_MEDIA_NEXT -> media.next()
+            KeyEvent.KEYCODE_MEDIA_PREVIOUS -> media.previous()
+            KeyEvent.KEYCODE_SEARCH, KeyEvent.KEYCODE_VOICE_ASSIST -> voice()
+            KeyEvent.KEYCODE_CALL -> call()
+            KeyEvent.KEYCODE_ENDCALL -> endCall()
+            KeyEvent.KEYCODE_BACK -> screen(ScreenKey.BACK)
+            KeyEvent.KEYCODE_HOME -> screen(ScreenKey.HOME)
+            KEYCODE_NAVIGATION -> screen(ScreenKey.MAP)
+            KEYCODE_MEDIA -> screen(ScreenKey.MEDIA)
+            KEYCODE_TEL -> screen(ScreenKey.PHONE)
+            else -> return false
+        }
+        if (longPress) GearslipLog.i("keys: long press on $keyCode")
+        return true
+    }
+
+    /** A turn of the rotary knob: each click moves focus one step, like Tab or Shift+Tab. */
+    fun onRotate(delta: Int) {
+        val sink = focusSink ?: return
+        val code = if (delta > 0) KeyEvent.KEYCODE_TAB else KEYCODE_SHIFT_TAB
+        repeat(kotlin.math.abs(delta).coerceAtMost(MAX_ROTARY_STEPS)) {
+            sink(code, true)
+            sink(code, false)
+        }
+    }
+
+    /**
+     * The voice key: answers the message on screen if there is one, otherwise starts the
+     * assistant when it's turned on.
+     */
+    private fun voice() = main.post {
+        if (VoiceReply.onVoiceKey()) return@post
+        if (CarSettings.experimentalFeaturesEnabled.value && CarSettings.voiceAssistantEnabled.value) {
+            CarAssistant.start()
+        } else {
+            GearslipLog.i("keys: voice pressed, but the assistant is off in settings")
+        }
+    }
+
+    /** Answers a ringing call; with nothing ringing, opens the phone screen. */
+    private fun call() = main.post {
+        val context = appContext ?: return@post
+        if (CarCalls.state.value is CallUiState.Ringing) CarCalls.answer(context) else screen(ScreenKey.PHONE)
+    }
+
+    private fun endCall() = main.post {
+        if (CarCalls.state.value is CallUiState.Ringing) CarCalls.decline()
+        else GearslipLog.i("keys: end call pressed with no ringing call; hanging up needs the dialer")
+    }
+
+    private fun screen(key: ScreenKey) { _screenKeys.tryEmit(key) }
+
+    // aap_protobuf's KeyCode.proto: car-only keys past the end of Android's own range.
+    const val KEYCODE_ROTARY_CONTROLLER = 65536
+    const val KEYCODE_MEDIA = 65537
+    const val KEYCODE_NAVIGATION = 65538
+    const val KEYCODE_TEL = 65540
+
+    /** Stands in for Shift+Tab: the sink sends Tab with the shift meta state. */
+    const val KEYCODE_SHIFT_TAB = -KeyEvent.KEYCODE_TAB
+
+    private const val MAX_ROTARY_STEPS = 5
+
+    private val FOCUS_KEYS = setOf(
+        KeyEvent.KEYCODE_DPAD_UP, KeyEvent.KEYCODE_DPAD_DOWN, KeyEvent.KEYCODE_DPAD_LEFT,
+        KeyEvent.KEYCODE_DPAD_RIGHT, KeyEvent.KEYCODE_DPAD_CENTER, KeyEvent.KEYCODE_ENTER,
+    )
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarLauncher.kt

@@ -1,6 +1,8 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -13,17 +15,21 @@ import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.filled.Info
-import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.filled.KeyboardArrowDown
-import androidx.compose.material.icons.filled.Share
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.produceState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
@@ -36,10 +42,26 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.core.graphics.drawable.toBitmap
 import android.content.Context
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.ui.graphics.Color
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.border
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Warning
+import app.seb3thehacker.gearslip.host.KnownApps
 import app.seb3thehacker.gearslip.host.CarAppCatalog
 import app.seb3thehacker.gearslip.host.TemplateApp
 import app.seb3thehacker.gearslip.media.MediaApp
 import app.seb3thehacker.gearslip.media.MediaCatalog
+import app.seb3thehacker.gearslip.notify.MessagingApp
+import app.seb3thehacker.gearslip.notify.MessagingCatalog
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
 
@@ -48,64 +70,202 @@ private class Tile(
     val label: String,
     val icon: ImageBitmap? = null,
     val glyph: ImageVector? = null,
+    /** Tested from start to finish with Gearslip; drawn with a check mark. */
+    val verified: Boolean = false,
+    /** Known not to work; drawn with a red X instead of being left off the launcher. */
+    val broken: Boolean = false,
+    /** Starts and can be used, but rough enough not to call working; drawn with a yellow mark. */
+    val partial: Boolean = false,
+    val onLongClick: (() -> Unit)? = null,
     val onClick: () -> Unit,
 )
 
 /** A launcher app's data, kept apart from [Tile] so it can be cached without capturing click state. */
-private class Entry(
+internal class Entry(
     val label: String,
     val icon: ImageBitmap?,
     val template: TemplateApp? = null,
     val media: MediaApp? = null,
-)
+    val builtIn: BuiltInApp? = null,
+    val messaging: MessagingApp? = null,
+) {
+    /** What a pin or a nav-bar shortcut remembers this entry as; null for nothing pinnable. */
+    val componentId: String?
+        get() = builtIn?.let { BUILT_IN_PREFIX + it.id }
+            ?: messaging?.let { MESSAGING_PREFIX + it.packageName }
+            ?: (template?.component ?: media?.component)?.flattenToString()
+
+    val packageName: String?
+        get() = template?.component?.packageName ?: media?.component?.packageName ?: messaging?.packageName
+}
+
+/** A messaging app has no component of its own to open, so its pin carries the package instead. */
+internal const val MESSAGING_PREFIX = "messages:"
 
 /**
  * The installed car and media apps with their icons. Scanning the package manager and decoding
- * icons is slow, so it happens once per car session; [invalidate] is called when one starts, which
+ * icons is slow, so [Prefetch] does it ahead of time and again at the start of each car session,
- * is the only time new installs are picked up.
+ * which is when new installs are picked up.
  */
-private object LauncherCache {
+internal object LauncherCache {
-    @Volatile var entries: List<Entry>? = null
+    /** Observed, not read once: the nav bar is drawn before the car session's rescan finishes,
+     * and an app installed since the last scan has to show up there when it does. */
+    private val flow = MutableStateFlow<List<Entry>?>(null)
+    val state: StateFlow<List<Entry>?> = flow.asStateFlow()
 
-    fun invalidate() { entries = null }
+    val entries: List<Entry>? get() = flow.value
 
-    fun load(context: Context): List<Entry> {
+    /** Returns the scan if there is one; [force] rescans. Synchronized so two callers share one scan. */
+    @Synchronized
+    fun load(context: Context, force: Boolean = false): List<Entry> {
+        if (!force) entries?.let { return it }
         fun iconOf(pkg: String) = runCatching {
             context.packageManager.getApplicationIcon(pkg).toBitmap(128, 128).asImageBitmap()
         }.getOrNull()
 
-        val nav = CarAppCatalog.installed(context).map { Entry(it.label, iconOf(it.component.packageName), template = it) }
+        val navApps = CarAppCatalog.installed(context)
-        val media = MediaCatalog.installed(context).map { Entry(it.label, iconOf(it.component.packageName), media = it) }
+        val mediaApps = MediaCatalog.installed(context)
-        return (nav + media).sortedBy { it.label.lowercase() }.also { entries = it }
+        // Some apps (Spotify among them) ship both a Car App Library template and a legacy
+        // MediaBrowserService, which otherwise land as two identically-labeled tiles with no
+        // way to tell them apart. They're genuinely different screens - browsing versus Now
+        // Playing - so only the label needs disambiguating, not the tile itself.
+        val mediaPackages = mediaApps.map { it.component.packageName }.toSet()
+
+        val messagingApps = MessagingCatalog.installed(context)
+        // Google Messages ships its own car app, which won't start under Gearslip. Gearslip's
+        // own Messages screen does the same job, so a messenger gets only that tile.
+        val messagingPackages = messagingApps.map { it.packageName }.toSet()
+
+        val nav = navApps
+            .filter { it.component.packageName !in messagingPackages }
+            // An app whose template screen is rejected but whose player works through Gearslip
+            // (Spotify) shows only its player tile - a "· Browse" tile beside it would just report
+            // that the car screen isn't supported.
+            .filter { !(KnownApps.screenBroken(it.component.packageName) && KnownApps.playerWorks(it.component.packageName)) }
+            .map {
+                val label = if (it.component.packageName in mediaPackages) "${it.label} · Browse" else it.label
+                Entry(label, iconOf(it.component.packageName), template = it)
+            }
+        val media = mediaApps.map { Entry(it.label, iconOf(it.component.packageName), media = it) }
+        // A messenger that is also a car media app keeps only its player tile.
+        val messaging = messagingApps
+            .filter { it.packageName !in mediaPackages }
+            .map { Entry(it.label, iconOf(it.packageName), messaging = it) }
+        return (nav + media + messaging).sortedBy { it.label.lowercase() }.also { flow.value = it }
     }
 }
 
-/** Forgets the scanned apps so the next launcher open rescans; call at the start of a car session. */
+/** Every app the launcher knows: Gearslip's own and the installed ones, rescans included. */
-fun invalidateLauncherApps() = LauncherCache.invalidate()
+@Composable
+internal fun rememberAllEntries(): List<Entry> {
+    val context = LocalContext.current
+    val installed by LauncherCache.state.collectAsState()
+    LaunchedEffect(context) {
+        if (LauncherCache.entries == null) withContext(Dispatchers.IO) { LauncherCache.load(context) }
+    }
+    return remember(installed) { BuiltInApps.entries + installed.orEmpty() }
+}
 
-/** The app launcher: Web and Screen sharing, every car app the phone has, then Settings, as an icon grid. */
+/** The launcher's groups, in the order they're laid out. */
+private enum class AppGroup { PHONE, MAPS, MUSIC, MESSAGING, WEB, SCREEN_SHARING, OTHER, SETTINGS, EXIT }
+
+private fun groupOf(entry: Entry, mediaPackages: Set<String>): AppGroup {
+    entry.builtIn?.let {
+        return when (it) {
+            BuiltInApps.Phone -> AppGroup.PHONE
+            BuiltInApps.Web -> AppGroup.WEB
+            BuiltInApps.ScreenSharing -> AppGroup.SCREEN_SHARING
+            BuiltInApps.Exit -> AppGroup.EXIT
+            else -> AppGroup.SETTINGS
+        }
+    }
+    if (entry.media != null) return AppGroup.MUSIC
+    if (entry.messaging != null) return AppGroup.MESSAGING
+    val app = entry.template ?: return AppGroup.OTHER
+    // A media app's "· Browse" tile sits next to its player.
+    if (app.component.packageName in mediaPackages) return AppGroup.MUSIC
+    return when (app.kind) {
+        "calling" -> AppGroup.PHONE
+        "navigation", "poi", "parking", "charging" -> AppGroup.MAPS
+        "messaging" -> AppGroup.MESSAGING
+        "settings" -> AppGroup.SETTINGS
+        else -> AppGroup.OTHER
+    }
+}
+
+/**
+ * The launcher's tiles in the order they're drawn: grouped by [AppGroup], alphabetical inside a
+ * group with Settings last of all, then with the driver's own moves from [custom] laid over it.
+ * Moved apps only trade places among themselves, so an app installed later still lands in its group.
+ */
+internal fun launcherOrder(all: List<Entry>, showVehicleData: Boolean, custom: List<String>): List<Entry> {
+    val shown = all.filter { it.builtIn !== BuiltInApps.VehicleData || showVehicleData }
+    val mediaPackages = shown.mapNotNull { it.media?.component?.packageName }.toSet()
+    val grouped = shown.sortedWith(
+        compareBy<Entry>({ groupOf(it, mediaPackages) }, { it.builtIn === BuiltInApps.Settings }, { it.label.lowercase() }),
+    )
+    if (custom.isEmpty()) return grouped
+    val rank = custom.withIndex().associate { (i, id) -> id to i }
+    fun Entry.rank() = componentId?.let { rank[it] }
+    val moved = grouped.filter { it.rank() != null }.sortedBy { it.rank() }.iterator()
+    return grouped.map { if (it.rank() != null) moved.next() else it }
+}
+
+/** An app by the id a pin or the running list knows it by, built-in or installed. */
+internal fun findEntry(id: String): Entry? =
+    BuiltInApps.entries.find { it.componentId == id } ?: LauncherCache.entries?.find { it.componentId == id }
+
+/** Rescans the car and media apps now, replacing the cached list; the launcher keeps showing the old one meanwhile. */
+fun warmLauncherApps(context: Context) { LauncherCache.load(context, force = true) }
+
+/**
+ * Connects or opens [entry] - what tapping its tile does, shared with the nav bar's pinned
+ * shortcuts and its open-app icon so there is exactly one place that knows how to launch either
+ * kind of app.
+ */
+internal fun launchEntry(entry: Entry, navigator: CarNavigator, frame: CarEnvironment.Frame) {
+    entry.builtIn?.let { it.open(navigator); return }
+    entry.template?.let {
+        if (it.isNavigation) {
+            CarServices.connectNav(it, frame)
+            navigator.home()
+        } else {
+            CarServices.connectBrowse(it, frame)
+            navigator.browse(entry.label)
+        }
+    }
+    entry.media?.let { CarServices.openMedia(it); navigator.media() }
+    entry.messaging?.let { navigator.messages(it.packageName, it.label) }
+}
+
+/** The app launcher: every app as an icon grid, grouped Phone, Maps, Music, Messaging, Web, Screen sharing, Settings. */
 @Composable
 fun CarLauncher() {
-    val context = LocalContext.current
     val navigator = LocalCarNavigator.current
     val frame by CarEnvironment.frame.collectAsState()
 
-    // Scanned once per car session (see LauncherCache), not every time the launcher opens.
+    // Painted from the cache at once; scanned only if [Prefetch] has not got there first.
-    val installed by produceState(initialValue = LauncherCache.entries ?: emptyList(), context) {
+    val all = rememberAllEntries()
-        value = LauncherCache.entries ?: withContext(Dispatchers.IO) { LauncherCache.load(context) }
+    val running = rememberRunningApps()
+    val showVehicleData = rememberVehicleDataShown()
+    var showBadgeKey by remember { mutableStateOf(false) }
+
+    fun tileOf(entry: Entry): Tile {
+        // The badges rate an app's own car screens; a messenger shown on Gearslip's own Messages
+        // screen has none, so it gets no badge.
+        val pkg = entry.packageName?.takeIf { entry.messaging == null }
+        val id = entry.componentId
+        return Tile(
+            entry.label, entry.icon, entry.builtIn?.glyph,
+            verified = pkg != null && !KnownApps.isPartial(pkg) && (KnownApps.works(pkg) || (entry.media != null && KnownApps.playerWorks(pkg))),
+            broken = pkg != null && (KnownApps.isBroken(pkg) || (entry.template != null && KnownApps.screenBroken(pkg))),
+            partial = pkg != null && KnownApps.isPartial(pkg),
+            onLongClick = id?.let { { navigator.showAppMenu(it) } },
+        ) { openApp(entry, id?.let { running[it] }, navigator, frame) }
     }
 
-    val tiles = listOf(
+    val appOrder by CarSettings.appOrder.collectAsState()
-        Tile("Web", glyph = Icons.Filled.Search) { navigator.open("web") },
+    val tiles = launcherOrder(all, showVehicleData, appOrder).map(::tileOf)
-        Tile("Screen sharing", glyph = Icons.Filled.Share) { navigator.open("phone") },
-    ) + installed.map { entry ->
-        Tile(entry.label, entry.icon) {
-            entry.template?.let { CarServices.connectNav(it, frame); navigator.home() }
-            entry.media?.let { CarServices.openMedia(it); navigator.media() }
-        }
-    } + listOf(
-        Tile("Settings", glyph = Icons.Filled.Settings) { navigator.settings() },
-    )
 
     LazyVerticalGrid(
         columns = GridCells.Adaptive(minSize = 108.dp),
@@ -115,36 +275,154 @@ fun CarLauncher() {
         verticalArrangement = Arrangement.spacedBy(12.dp),
     ) {
         items(tiles) { AppTile(it) }
+        if (tiles.any { it.verified || it.broken || it.partial }) {
+            // Folded away behind one button: it's reference, read once, not something every
+            // visit to the launcher needs spelled out under the grid.
+            item(span = { GridItemSpan(maxLineSpan) }) {
+                Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    GsButton(onClick = { showBadgeKey = !showBadgeKey }, tone = GsTone.Neutral) {
+                        Icon(Icons.Filled.Info, contentDescription = null, modifier = Modifier.size(18.dp))
+                        Spacer(Modifier.width(8.dp))
+                        Text(if (showBadgeKey) "Hide badge key" else "What the badges mean")
+                    }
+                    if (showBadgeKey) {
+                        BadgeLegend(
+                            verified = tiles.any { it.verified },
+                            partial = tiles.any { it.partial },
+                            broken = tiles.any { it.broken },
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+/** Says what each badge on a tile means, once, under the grid - only the ones actually in use. */
+@Composable
+private fun BadgeLegend(verified: Boolean, partial: Boolean, broken: Boolean) {
+    Column(
+        Modifier.fillMaxWidth().padding(top = 4.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        if (verified) LegendRow(size = 16.dp, badge = { VerifiedBadge(it) }, text = "Tested and working with Gearslip")
+        if (partial) LegendRow(size = 16.dp, badge = { PartialBadge(it) }, text = "Runs, but not cleanly, with Gearslip")
+        if (broken) LegendRow(size = 16.dp, badge = { BrokenBadge(it) }, text = "Doesn't work with Gearslip yet")
     }
 }
 
 @Composable
-private fun AppTile(tile: Tile) {
+private fun LegendRow(size: androidx.compose.ui.unit.Dp, badge: @Composable (androidx.compose.ui.unit.Dp) -> Unit, text: String) {
-    Surface(
+    Row(horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
-        onClick = tile.onClick,
+        badge(size)
-        modifier = Modifier.height(120.dp),
+        Spacer(Modifier.width(8.dp))
-        shape = MaterialTheme.shapes.extraLarge,
+        Text(text, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
-        color = MaterialTheme.colorScheme.surfaceVariant,
+    }
-        contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+}
+
+/** A green disc with a white check: the same mark on every tile and in the legend. */
+@Composable
+private fun VerifiedBadge(size: androidx.compose.ui.unit.Dp, modifier: Modifier = Modifier) {
+    Box(
+        modifier.size(size).background(Color(0xFF43A047), CircleShape),
+        contentAlignment = Alignment.Center,
     ) {
-        Column(
+        Icon(Icons.Filled.Check, contentDescription = "Tested and working", tint = Color.White, modifier = Modifier.size(size * 0.66f))
-            Modifier.fillMaxSize().padding(8.dp),
+    }
-            horizontalAlignment = Alignment.CenterHorizontally,
+}
-            verticalArrangement = Arrangement.Center,
+
-        ) {
+/** A red disc with a white X: marks a tile known not to work with Gearslip yet. */
-            when {
+@Composable
-                tile.icon != null -> Image(tile.icon, contentDescription = null, modifier = Modifier.size(52.dp))
+private fun BrokenBadge(size: androidx.compose.ui.unit.Dp, modifier: Modifier = Modifier) {
-                tile.glyph != null -> Icon(tile.glyph, contentDescription = null, modifier = Modifier.size(52.dp))
+    Box(
+        modifier.size(size).background(Color(0xFFD32F2F), CircleShape),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(Icons.Filled.Close, contentDescription = "Doesn't work with Gearslip", tint = Color.White, modifier = Modifier.size(size * 0.66f))
+    }
+}
+
+/** A yellow disc with a warning mark: neither the check nor the X, since this app runs but isn't clean about it. */
+@Composable
+private fun PartialBadge(size: androidx.compose.ui.unit.Dp, modifier: Modifier = Modifier) {
+    Box(
+        modifier.size(size).background(Color(0xFFF9A825), CircleShape),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(Icons.Filled.Warning, contentDescription = "Works, but not cleanly, with Gearslip", tint = Color.White, modifier = Modifier.size(size * 0.6f))
+    }
+}
+
+/** Trial: where a tile says whether its app works. See [AppTileBody]. */
+private enum class BadgeStyle { ON_ICON, OUTLINE }
+private val BADGE_STYLE = BadgeStyle.ON_ICON
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+private fun AppTile(tile: Tile) {
+    val status = when {
+        tile.verified -> Color(0xFF43A047)
+        tile.partial -> Color(0xFFF9A825)
+        tile.broken -> Color(0xFFD32F2F)
+        else -> null
+    }
+    val shape = MaterialTheme.shapes.extraLarge
+    // A long press opens the app's menu (pin, close) - the same gesture everywhere apps are
+    // shown, here and on the nav bar. GsIconBox marks it in the theme's style.
+    GsIconBox(
+        onClick = tile.onClick,
+        onLongClick = tile.onLongClick,
+        modifier = Modifier.height(120.dp).then(
+            if (BADGE_STYLE == BadgeStyle.OUTLINE && status != null) Modifier.border(2.5.dp, status, shape) else Modifier,
+        ),
+        colors = GsColors(MaterialTheme.colorScheme.surfaceVariant, MaterialTheme.colorScheme.onSurfaceVariant),
+        shape = shape,
+    ) {
+        Box(Modifier.fillMaxSize()) {
+            Column(
+                Modifier.fillMaxSize().padding(8.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center,
+            ) {
+                Box {
+                    TileIcon(tile)
+                    if (BADGE_STYLE == BadgeStyle.ON_ICON) {
+                        // Pinned to the icon's lower corner, ringed in the tile's colour so it
+                        // reads as sitting on top of the icon.
+                        val ring = Modifier.align(Alignment.BottomEnd).offset(x = 6.dp, y = 4.dp)
+                            .border(2.dp, MaterialTheme.colorScheme.surfaceVariant, CircleShape)
+                        when {
+                            tile.verified -> VerifiedBadge(22.dp, ring)
+                            tile.broken -> BrokenBadge(22.dp, ring)
+                            tile.partial -> PartialBadge(22.dp, ring)
+                        }
+                    }
+                }
+                Spacer(Modifier.height(8.dp))
+                TileLabel(tile)
             }
-            Spacer(Modifier.height(8.dp))
-            Text(
-                tile.label,
-                style = MaterialTheme.typography.labelLarge,
-                fontWeight = FontWeight.SemiBold,
-                textAlign = TextAlign.Center,
-                maxLines = 2,
-                overflow = TextOverflow.Ellipsis,
-            )
         }
     }
 }
+
+@Composable
+private fun TileIcon(tile: Tile) {
+    when {
+        tile.icon != null -> Image(tile.icon, contentDescription = null, modifier = Modifier.size(52.dp))
+        tile.glyph != null -> Icon(tile.glyph, contentDescription = null, modifier = Modifier.size(52.dp))
+    }
+}
+
+@Composable
+private fun TileLabel(tile: Tile, maxLines: Int = 2, modifier: Modifier = Modifier) {
+    Text(
+        tile.label,
+        modifier = modifier,
+        style = MaterialTheme.typography.labelLarge,
+        fontWeight = FontWeight.SemiBold,
+        textAlign = TextAlign.Center,
+        maxLines = maxLines,
+        overflow = TextOverflow.Ellipsis,
+    )
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarNavigator.kt

@@ -1,6 +1,7 @@
 package app.seb3thehacker.gearslip.car
 
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
@@ -13,45 +14,139 @@ sealed interface CarScreen {
     /** Opened from the clock: the day's calendar and the weather, nothing that needs a keyboard. */
     data object Dashboard : CarScreen
 
+    /** Opened from the weather chip or the dashboard: now, the next hours and the week. */
+    data object Weather : CarScreen
+
+    /** Everything the head unit's sensor channel has advertised and sent, raw. */
+    data object VehicleData : CarScreen
+
     /** The current media app, full size: browse, lyrics and controls. */
     data object Media : CarScreen
 
+    /**
+     * A templated app that isn't a navigation app - Spotify's own Car App Library service, among
+     * others - opened on its own screen rather than the Home map slot, which only a genuine
+     * navigation app can claim.
+     */
+    data object Browse : CarScreen
+
+    /** A messaging app's recent conversations, read from the notifications it posts. */
+    data class Messages(val packageName: String) : CarScreen
+
     /** [replyTo] is a notification key to open straight into its reply pane. */
     data class Notifications(val replyTo: String? = null) : CarScreen
     data class App(val id: String) : CarScreen
 }
 
+enum class SidePanel { NONE, CONTROLS, LYRICS }
+
+/** One step on the breadcrumb trail: the screen it shows and the word for it in the trail. */
+data class Crumb(val screen: CarScreen, val label: String)
+
 /**
- * Where the car UI is. A car touchscreen has no hardware back button, so [back] is driven by
+ * Where the car UI is, and how it got there. A car touchscreen has no hardware back button, so
- * the on-screen one; an open app can claim it first (a browser going back a page) through
+ * every screen that isn't reached from [home] is pushed onto a trail (like a browser's history,
- * [backInterceptor].
+ * or a file manager's breadcrumb bar) rather than replacing the last one outright - that's what
+ * lets the breadcrumb bar show "Home > Apps > Settings" and jump straight back to any of them,
+ * and lets [back] undo exactly one step instead of always dumping you back at Home. An open app
+ * can claim a back step first (a browser going back a page) through [backInterceptor].
  */
 class CarNavigator(startId: String) {
 
-    var current: CarScreen by mutableStateOf(
+    private val stack = mutableStateListOf(
-        if (CarApps.find(startId) != null) CarScreen.App(startId) else CarScreen.Home,
+        Crumb(
+            if (CarApps.find(startId) != null) CarScreen.App(startId) else CarScreen.Home,
+            "Home",
+        ),
     )
-        private set
+
+    /** The whole trail, root first. Size 1 means "at Home" - the breadcrumb bar hides then. */
+    val trail: List<Crumb> get() = stack
+
+    val current: CarScreen get() = stack.last().screen
 
     var backInterceptor: (() -> Boolean)? = null
 
-    fun home() { current = CarScreen.Home }
+    /** Pushes a new step, unless it's the same screen already on top - tapping the button for
+     * where you already are shouldn't grow the trail. */
+    private fun push(screen: CarScreen, label: String) {
+        if (stack.last().screen == screen) return
+        stack.add(Crumb(screen, label))
+    }
 
-    fun media() { current = CarScreen.Media }
+    /** The one way back to a clean slate: resets the whole trail to just Home. */
+    fun home() {
+        stack.clear()
+        stack.add(Crumb(CarScreen.Home, "Home"))
+    }
 
-    fun apps() { current = CarScreen.Apps }
+    /**
+     * What the column beside the map on Home is showing, if anything. The player lives in one
+     * place at a time: with [SidePanel.CONTROLS] it moves into the column and the nav bar's pill
+     * steps aside; with [SidePanel.LYRICS] the column is all lyrics and the pill comes back.
+     * Every other screen has no room for the column, so there the pill stays in the nav bar.
+     */
+    var sidePanel by mutableStateOf(SidePanel.NONE)
+        private set
 
-    fun settings() { current = CarScreen.Settings }
+    /**
+     * The pill's dock button: moves the player beside the map, going Home first if need be. With
+     * lyrics already there it swaps them for the controls; with the controls there it closes.
+     */
+    fun togglePlayerDock() {
+        if (current != CarScreen.Home) {
+            sidePanel = SidePanel.CONTROLS
+            home()
+            return
+        }
+        sidePanel = if (sidePanel == SidePanel.CONTROLS) SidePanel.NONE else SidePanel.CONTROLS
+    }
 
-    fun dashboard() { current = CarScreen.Dashboard }
+    fun showSideLyrics() { sidePanel = SidePanel.LYRICS }
 
-    fun notifications(replyTo: String? = null) { current = CarScreen.Notifications(replyTo) }
+    fun closeSidePanel() { sidePanel = SidePanel.NONE }
 
-    fun open(id: String) { current = CarScreen.App(id) }
+    /** Component id of the app whose long-press menu (pin, close) is open, or null. */
+    var appMenu by mutableStateOf<String?>(null)
+        private set
 
+    fun showAppMenu(componentId: String) { appMenu = componentId }
+
+    fun dismissAppMenu() { appMenu = null }
+
+    fun media() { push(CarScreen.Media, "Media") }
+
+    fun browse(label: String) { push(CarScreen.Browse, label) }
+
+    fun apps() { push(CarScreen.Apps, "Apps") }
+
+    fun settings() { push(CarScreen.Settings, "Settings") }
+
+    fun dashboard() { push(CarScreen.Dashboard, "Dashboard") }
+
+    fun weather() { push(CarScreen.Weather, "Weather") }
+
+    fun vehicleData() { push(CarScreen.VehicleData, "Vehicle data") }
+
+    fun messages(packageName: String, label: String) { push(CarScreen.Messages(packageName), label) }
+
+    /** The list lives on the dashboard; only a reply gets a screen of its own. */
+    fun notifications(replyTo: String? = null) {
+        if (replyTo == null) dashboard() else push(CarScreen.Notifications(replyTo), "Reply")
+    }
+
+    fun open(id: String) { push(CarScreen.App(id), CarApps.find(id)?.label ?: id) }
+
+    /** Jumps straight to a step already on the trail, dropping everything after it - what
+     * tapping a breadcrumb does. Index 0 (Home) is always on the trail, so this always succeeds. */
+    fun jumpTo(index: Int) {
+        while (stack.size > index + 1) stack.removeAt(stack.lastIndex)
+    }
+
+    /** One step back, same as tapping the crumb before the current one. */
     fun back() {
         if (backInterceptor?.invoke() == true) return
-        current = CarScreen.Home
+        if (stack.size > 1) stack.removeAt(stack.lastIndex)
     }
 }
 

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarSensors.kt

@@ -0,0 +1,95 @@
+package app.seb3thehacker.gearslip.car
+
+import app.seb3thehacker.gearslip.Protobuf
+import app.seb3thehacker.gearslip.Wire
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+/**
+ * Everything the head unit's sensor channel has offered and sent, for the "Vehicle data" screen.
+ *
+ * [ServiceDiscovery.findSensorService] tells us which numeric sensor types this head unit is
+ * willing to stream; [SensorType] names the ones publicly documented by other AA reverse-engineering
+ * projects (aasdk, openauto). That mapping is carried over from other projects, not verified
+ * against this exact unit, so it's a label, not a guarantee - the raw field dump next to it is
+ * the ground truth. Once [onEvent] starts decoding real traffic from the 2018 Uconnect, correct
+ * any type that turns out to be mislabeled.
+ */
+object CarSensors {
+
+    data class Reading(val typeId: Int, val typeName: String, val raw: String, val updatedAtMs: Long)
+
+    private val readingsFlow = MutableStateFlow<List<Reading>>(emptyList())
+    val readings: StateFlow<List<Reading>> = readingsFlow
+
+    /** Seeds one row per sensor type the head unit advertised, so the screen shows what's on
+     * offer even before the first event for it arrives. */
+    fun onDiscovered(types: List<Int>) {
+        readingsFlow.value = types.map { id ->
+            Reading(id, SensorType.name(id), "(waiting for data)", 0L)
+        }
+    }
+
+    /**
+     * One SensorEventIndication. Every reverse-engineered version of this message multiplexes
+     * every sensor type into one shared set of message-level field numbers (field N = "the data
+     * for sensor type N", roughly) rather than tagging events with the type id from
+     * SensorType.type - so field number is read here as a best-effort type id, same as the
+     * other services in this file.
+     */
+    fun onEvent(body: ByteArray) {
+        val now = System.currentTimeMillis()
+        val fields = Wire.fields(body)
+        val byType = fields.groupBy { it.number }
+        val updated = byType.mapValues { (number, group) ->
+            Reading(
+                number,
+                SensorType.name(number),
+                group.joinToString("; ") { field ->
+                    field.bytes?.let { Protobuf.describe(it, indent = "").trim().replace("\n", ", ") }
+                        ?: "varint=${field.varint}"
+                },
+                now,
+            )
+        }
+        val existing = readingsFlow.value.associateBy { it.typeId }
+        readingsFlow.value = (existing + updated).values.sortedBy { it.typeId }
+    }
+
+    fun clear() {
+        readingsFlow.value = emptyList()
+    }
+}
+
+/**
+ * Sensor type ids as named across public Android Auto reverse-engineering references. Treated as
+ * a label, not a fact - see [CarSensors] doc.
+ */
+object SensorType {
+    private val NAMES = mapOf(
+        1 to "Location (GPS)",
+        2 to "Compass",
+        3 to "Speed",
+        4 to "RPM",
+        5 to "Odometer",
+        6 to "Fuel",
+        7 to "Parking brake",
+        8 to "Gear",
+        9 to "Diagnostics",
+        10 to "Night mode",
+        11 to "Environment",
+        12 to "HVAC",
+        13 to "Driving status",
+        14 to "Dead reckoned location",
+        15 to "Passenger",
+        16 to "Door",
+        17 to "Light",
+        18 to "Tire pressure",
+        19 to "Accelerometer",
+        20 to "Gyroscope",
+        21 to "GPS satellites",
+        22 to "Toll card",
+    )
+
+    fun name(id: Int): String = NAMES[id]?.let { "$it (#$id)" } ?: "Sensor #$id"
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarServices.kt

@@ -2,13 +2,17 @@ package app.seb3thehacker.gearslip.car
 
 import android.content.ComponentName
 import android.content.Context
+import android.media.session.MediaSessionManager
+import android.media.session.PlaybackState
 import app.seb3thehacker.gearslip.audio.CarAudio
 import app.seb3thehacker.gearslip.host.CarAppCatalog
 import app.seb3thehacker.gearslip.host.CarAppConnection
+import app.seb3thehacker.gearslip.host.KnownApps
 import app.seb3thehacker.gearslip.host.TemplateApp
 import app.seb3thehacker.gearslip.media.CarMedia
 import app.seb3thehacker.gearslip.media.MediaApp
 import app.seb3thehacker.gearslip.media.MediaCatalog
+import app.seb3thehacker.gearslip.notify.GearslipNotificationListener
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
@@ -29,9 +33,23 @@ object CarServices {
     val nav: CarAppConnection by lazy { CarAppConnection(requireNotNull(context)) }
     val media: CarMedia by lazy { CarMedia(requireNotNull(context)) }
 
+    /**
+     * A second, independent connection for templated apps that aren't navigation apps - Spotify's
+     * own Car App Library service is the first of these. Kept apart from [nav] so opening one
+     * can never bump the map off Home: this one gets its own screen ([CarScreen.Browse]) instead.
+     */
+    val browse: CarAppConnection by lazy { CarAppConnection(requireNotNull(context)) }
+
     private val _mediaApp = MutableStateFlow<MediaApp?>(null)
     val mediaApp: StateFlow<MediaApp?> = _mediaApp.asStateFlow()
 
+    /**
+     * Whether the phone has any navigation app installed at all. True until [autostart] has
+     * actually checked, so the home screen never flashes "none found" before it knows.
+     */
+    private val _hasNavApps = MutableStateFlow(true)
+    val hasNavApps: StateFlow<Boolean> = _hasNavApps.asStateFlow()
+
     /** Set when the driver stops the map by hand, so going Home doesn't immediately restart it. */
     private var navStopped = false
     private var autoplayPending = false
@@ -39,14 +57,30 @@ object CarServices {
     fun init(appContext: Context) {
         context = appContext.applicationContext
         app.seb3thehacker.gearslip.notify.CarMotion.start(appContext)
+        app.seb3thehacker.gearslip.call.CarCalls.start(appContext)
+        CarAssistant.init(appContext)
+        CarKeys.init(appContext)
+        VoiceReply.init(appContext)
+        // Loaded now, while nothing's waiting on it, so the first reply isn't slower than the rest.
+        app.seb3thehacker.gearslip.speech.SpeechEngine.warm(appContext)
     }
 
     // --- map -----------------------------------------------------------------------------
 
-    fun connectNav(app: TemplateApp, frame: CarEnvironment.Frame) {
+    /**
+     * [destination] is a search query to start navigating to right away - "navigate to X with Y"
+     * from the voice assistant - left null for a plain app launch. An app that's already the one
+     * running gets the destination sent to its live session instead of being torn down and
+     * rebuilt, same as [CarAppConnection.navigateTo] documents.
+     */
+    fun connectNav(app: TemplateApp, frame: CarEnvironment.Frame, destination: String? = null) {
         navStopped = false
         CarSettings.setLastNav(app.component.flattenToString())
-        nav.connect(app, frame.width, frame.height, frame.densityDpi)
+        if (destination != null && nav.connectedComponent == app.component) {
+            nav.navigateTo(destination)
+        } else {
+            nav.connect(app, frame.width, frame.height, frame.densityDpi, destination)
+        }
     }
 
     fun stopNav() {
@@ -54,6 +88,23 @@ object CarServices {
         nav.disconnect()
     }
 
+    /** Undoes [stopNav]'s hold so the last map app comes back, same as it would after a restart. */
+    suspend fun reconnectNav(frame: CarEnvironment.Frame) {
+        navStopped = false
+        autostart(frame)
+    }
+
+    // --- browse (non-navigation templated apps) -------------------------------------------
+
+    /** Opens a templated app that isn't navigation, on its own screen - never on Home. */
+    fun connectBrowse(app: TemplateApp, frame: CarEnvironment.Frame) {
+        browse.connect(app, frame.width, frame.height, frame.densityDpi)
+    }
+
+    fun stopBrowse() {
+        browse.disconnect()
+    }
+
     // --- media ---------------------------------------------------------------------------
 
     fun openMedia(app: MediaApp, autoplay: Boolean = false) {
@@ -62,11 +113,20 @@ object CarServices {
         val live = phase == CarMedia.Phase.READY || phase == CarMedia.Phase.CONNECTING
         if (_mediaApp.value?.component == app.component && live) return
 
-        CarAudio.release()
         _mediaApp.value = app
         autoplayPending = autoplay
         media.connect(app)
-        if (CarSettings.pipeAudio.value) CarAudio.request(app.uid)
+        // Not torn down and rebuilt per app: the capture covers whatever the phone plays, so
+        // switching media apps never costs the driver another consent dialog.
+        if (CarSettings.pipeAudio.value) CarAudio.request()
+    }
+
+    /** Closes the media app from the car: stops what it's playing and drops the connection. */
+    fun closeMedia() {
+        if (media.now.value.playing) media.togglePlay()
+        media.disconnect()
+        _mediaApp.value = null
+        autoplayPending = false
     }
 
     /** Called once the media app is connected: starts playback if that was asked for. */
@@ -83,29 +143,65 @@ object CarServices {
         val ctx = context ?: return
 
         if (!navStopped && nav.status.value.phase == CarAppConnection.Phase.IDLE) {
+            val navApps = withContext(Dispatchers.IO) { CarAppCatalog.installed(ctx) }
+                .filter { it.isNavigation }
+            _hasNavApps.value = navApps.isNotEmpty()
+            // Never auto-pick one already known to fail outright - a driver who plugs in should
+            // land on a map, not on the one tile marked with a red X.
+            val candidates = navApps.filterNot { KnownApps.isBroken(it.component.packageName) }
             val last = CarSettings.lastNav.value
-            val app = last?.let { id ->
+            // The one used last, or - first run, nothing on record yet - whichever comes first:
-                withContext(Dispatchers.IO) { CarAppCatalog.installed(ctx) }
+            // a driver who plugs in for the first time shouldn't have to go pick one by hand
-                    .firstOrNull { it.component == ComponentName.unflattenFromString(id) }
+            // before the map shows up at all.
-            }
+            val lastComponent = last?.let(ComponentName::unflattenFromString)
+            val app = candidates.firstOrNull { it.component == lastComponent } ?: candidates.firstOrNull()
             if (app != null) connectNav(app, frame)
         }
 
         if (_mediaApp.value == null) {
-            val last = CarSettings.lastMedia.value
+            val catalog = withContext(Dispatchers.IO) { MediaCatalog.installed(ctx) }
-            val app = last?.let { id ->
+            // Something already playing on the phone wins over whatever was last used in the car -
-                withContext(Dispatchers.IO) { MediaCatalog.installed(ctx) }
+            // a driver who started a song before plugging in shouldn't have to go open its tile by
-                    .firstOrNull { it.component == ComponentName.unflattenFromString(id) }
+            // hand just to see what's already going.
+            val playing = withContext(Dispatchers.IO) { currentlyPlaying(ctx, catalog) }
+            if (playing != null) {
+                openMedia(playing)
+            } else {
+                val last = CarSettings.lastMedia.value
+                val app = last?.let { id -> catalog.firstOrNull { it.component == ComponentName.unflattenFromString(id) } }
+                if (app != null) openMedia(app, autoplay = CarSettings.autoplay.value)
             }
-            if (app != null) openMedia(app, autoplay = CarSettings.autoplay.value)
         }
     }
 
+    /**
+     * Whichever known car media app has an actively playing session right now, system-wide - not
+     * just the one Gearslip itself last connected to. Reading another app's session needs
+     * notification access, the same permission [app.seb3thehacker.gearslip.media.CarMedia]
+     * already asks for to control apps that won't share their library.
+     */
+    private fun currentlyPlaying(ctx: Context, catalog: List<MediaApp>): MediaApp? {
+        val manager = ctx.getSystemService(MediaSessionManager::class.java)
+        val listener = ComponentName(ctx, GearslipNotificationListener::class.java)
+        val sessions = try {
+            manager.getActiveSessions(listener)
+        } catch (e: SecurityException) {
+            return null
+        }
+        val playingPackages = sessions
+            .filter { it.playbackState?.state == PlaybackState.STATE_PLAYING }
+            .map { it.packageName }
+        return playingPackages.firstNotNullOfOrNull { pkg -> catalog.firstOrNull { it.component.packageName == pkg } }
+    }
+
     /** The car went away: nothing should keep running for a screen that no longer exists. */
     fun shutdown() {
         context?.let { app.seb3thehacker.gearslip.notify.CarMotion.stop(it) }
+        app.seb3thehacker.gearslip.call.CarCalls.stop()
         runCatching { nav.disconnect() }
         runCatching { media.disconnect() }
+        runCatching { browse.disconnect() }
+        CarAssistant.cancel()
         CarAudio.release()
         _mediaApp.value = null
         navStopped = false

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarSettings.kt

@@ -2,11 +2,18 @@ package app.seb3thehacker.gearslip.car
 
 import android.content.Context
 import app.seb3thehacker.gearslip.AppSettings
+import app.seb3thehacker.gearslip.car.theme.GsTheme
+import app.seb3thehacker.gearslip.car.theme.GsThemes
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 
 enum class NightMode { AUTO, DAY, NIGHT }
 
+/** Distances and temperatures. [AUTO] goes by the phone's region. */
+enum class Units { AUTO, IMPERIAL, METRIC }
+
+/** Where a new message shows: [NAV_BAR] turns the clock button into it, [CARD] floats a card top right. */
+
 /** The car UI's own colours. Separate from [NightMode], which is about the light outside (the map). */
 enum class AppTheme { PHONE, LIGHT, DARK }
 
@@ -23,7 +30,23 @@ object CarSettings {
     private const val KEY_LAST_NAV = "car_last_nav"
     private const val KEY_LAST_MEDIA = "car_last_media"
     private const val KEY_AUTOPLAY = "car_autoplay"
+    private const val KEY_PLAYER_TITLE = "car_player_title"
     private const val KEY_THEME = "car_app_theme"
+    private const val KEY_UI_THEME = "car_ui_theme"
+    private const val KEY_PINNED = "car_pinned_apps"
+    private const val KEY_APP_ORDER = "car_app_order"
+    private const val KEY_EXPERIMENTAL_FEATURES = "car_experimental_features"
+    private const val KEY_VOICE_ASSISTANT = "car_voice_assistant"
+    private const val KEY_CAR_SENSORS = "car_sensors_enabled"
+    private const val KEY_MEDIA_SEARCH = "car_media_search_enabled"
+    private const val KEY_SEEN_SAFETY_WARNING = "car_seen_safety_warning"
+    private const val KEY_UNITS = "car_units"
+    private const val KEY_WHATS_NEW = "car_whats_new_after_updates"
+    private const val KEY_WHATS_NEW_SEEN = "car_whats_new_seen_code"
+
+    /** How many shortcuts the nav bar makes room for; a driver reaching for one needs it to
+     * still be on the bar, not off the edge of a long list. */
+    const val MAX_PINNED = 3
 
     /** Id of the app to open on connect; [HOME] opens the launcher. */
     const val HOME = "home"
@@ -33,12 +56,76 @@ object CarSettings {
     private val scaleFlow = MutableStateFlow(1f)
     private val openFlow = MutableStateFlow(HOME)
     private val nightFlow = MutableStateFlow(NightMode.AUTO)
-    private val pipeAudioFlow = MutableStateFlow(false)
+    private val pipeAudioFlow = MutableStateFlow(true)
     private val lastNavFlow = MutableStateFlow<String?>(null)
     private val lastMediaFlow = MutableStateFlow<String?>(null)
     private val autoplayFlow = MutableStateFlow(false)
+    private val playerTitleFlow = MutableStateFlow(false)
     private val themeFlow = MutableStateFlow(AppTheme.PHONE)
     val appTheme: StateFlow<AppTheme> = themeFlow
+    private val uiThemeFlow = MutableStateFlow(GsThemes.default.id)
+
+    /** Id of the [GsTheme] controls are drawn in; an unknown id falls back to the default. */
+    val uiTheme: StateFlow<String> = uiThemeFlow
+    private val pinnedFlow = MutableStateFlow<Set<String>>(emptySet())
+    private val appOrderFlow = MutableStateFlow<List<String>>(emptyList())
+    private val experimentalFeaturesFlow = MutableStateFlow(false)
+    private val voiceAssistantFlow = MutableStateFlow(false)
+    private val carSensorsFlow = MutableStateFlow(false)
+    private val mediaSearchFlow = MutableStateFlow(false)
+    private val seenSafetyWarningFlow = MutableStateFlow(false)
+    private val unitsFlow = MutableStateFlow(Units.AUTO)
+
+    val units: StateFlow<Units> = unitsFlow
+
+
+    private val whatsNewFlow = MutableStateFlow(true)
+    private val whatsNewSeenFlow = MutableStateFlow(0)
+    private val whatsNewOpenFlow = MutableStateFlow(false)
+
+    /** Whether the car screen shows what's new once after each update. */
+    val whatsNewAfterUpdates: StateFlow<Boolean> = whatsNewFlow
+
+    /** Version code whose notes the car screen last showed. */
+    val whatsNewSeen: StateFlow<Int> = whatsNewSeenFlow
+
+    /** Opened by hand from Settings, whatever the two above say. Not saved. */
+    val whatsNewOpen: StateFlow<Boolean> = whatsNewOpenFlow
+
+    fun setWhatsNewAfterUpdates(on: Boolean) {
+        whatsNewFlow.value = on
+        AppSettings.putString(app, KEY_WHATS_NEW, on.toString())
+    }
+
+    fun openWhatsNew() { whatsNewOpenFlow.value = true }
+
+    /** Closes the notes and marks [versionCode]'s as read. */
+    fun closeWhatsNew(versionCode: Int) {
+        whatsNewOpenFlow.value = false
+        whatsNewSeenFlow.value = versionCode
+        AppSettings.putString(app, KEY_WHATS_NEW_SEEN, versionCode.toString())
+    }
+
+
+
+    /** Whether to show miles, feet and °F; [Units.AUTO] follows the countries that still use them. */
+    fun imperial(): Boolean = when (unitsFlow.value) {
+        Units.IMPERIAL -> true
+        Units.METRIC -> false
+        Units.AUTO -> java.util.Locale.getDefault().country in setOf("US", "LR", "MM")
+    }
+
+    fun setUnits(units: Units) {
+        unitsFlow.value = units
+        AppSettings.putString(app, KEY_UNITS, units.name)
+        Weather.refresh(app, force = true)
+    }
+
+    /** Flattened component names of the apps long-pressed onto the nav bar as shortcuts. */
+    val pinnedApps: StateFlow<Set<String>> = pinnedFlow
+
+    /** The launcher's order once the driver has moved a tile; empty keeps the grouped default. */
+    val appOrder: StateFlow<List<String>> = appOrderFlow
 
     /** Flattened component names of the map and media apps used last, brought back on connect. */
     val lastNav: StateFlow<String?> = lastNavFlow
@@ -47,17 +134,65 @@ object CarSettings {
     /** Whether the media app starts playing by itself when the car connects. */
     val autoplay: StateFlow<Boolean> = autoplayFlow
 
+    /**
+     * The nav bar's player keeps the song title up, with play/pause and the dock button, instead of
+     * settling to the skip buttons once a new song has announced itself.
+     */
+    val playerTitle: StateFlow<Boolean> = playerTitleFlow
+
     val scale: StateFlow<Float> = scaleFlow
     val openOnConnect: StateFlow<String> = openFlow
     val nightMode: StateFlow<NightMode> = nightFlow
 
     /**
-     * Whether a media app's sound is captured and sent over the car link. Off by default: the
+     * Whether a media app's sound is captured and sent over the car link. On by default, since
-     * platform only allows that behind a screen-capture consent dialog, and without it the app
+     * sound in the car is the point of the exercise; the platform allows the capture only behind a
-     * simply plays through the phone's normal output (e.g. Bluetooth to the car).
+     * consent dialog, which [app.seb3thehacker.gearslip.audio.CarAudio] raises once the car has
+     * somewhere to play it. Turned off, the app plays through the phone's normal output instead.
      */
     val pipeAudio: StateFlow<Boolean> = pipeAudioFlow
 
+    /**
+     * Off by default: a driver has to opt into experimental features as a whole before any of
+     * them - the voice assistant included - show up to turn on individually.
+     */
+    val experimentalFeaturesEnabled: StateFlow<Boolean> = experimentalFeaturesFlow
+
+    /**
+     * The voice assistant is experimental and off by default; a driver has to turn it on
+     * knowingly, from the settings screen, after reading the warning shown there. This flag
+     * alone does not run the assistant - [experimentalFeaturesEnabled] must also be on.
+     */
+    val voiceAssistantEnabled: StateFlow<Boolean> = voiceAssistantFlow
+
+    /**
+     * Vehicle data is experimental and off by default: the launcher's tile for it, and the
+     * voice assistant's "vehicle data" command, only show up once this and
+     * [experimentalFeaturesEnabled] are both on. See [app.seb3thehacker.gearslip.car.CarSensors]
+     * for why the raw sensor feed it shows is worth gating - the field labels are unverified.
+     */
+    val carSensorsEnabled: StateFlow<Boolean> = carSensorsFlow
+
+    /**
+     * Searching inside a media app is experimental and off by default: many apps claim to take
+     * searches and then ignore them or play something else. The media screen's search button
+     * shows only once this and [experimentalFeaturesEnabled] are both on.
+     */
+    val mediaSearchEnabled: StateFlow<Boolean> = mediaSearchFlow
+
+    /**
+     * Whether the car screen's own "drive safely" warning has already been shown and dismissed
+     * once, from this same install. Separate from the phone side's own compat/safety dialogs -
+     * a driver who only ever plugs in and never opens the phone app should still see this once,
+     * on the screen they are actually about to use while driving.
+     */
+    val hasSeenSafetyWarning: StateFlow<Boolean> = seenSafetyWarningFlow
+
+    fun markSafetyWarningSeen() {
+        seenSafetyWarningFlow.value = true
+        AppSettings.putString(app, KEY_SEEN_SAFETY_WARNING, "true")
+    }
+
     fun init(context: Context) {
         app = context.applicationContext
         scaleFlow.value = AppSettings.getString(app, KEY_SCALE, "1.0").toFloatOrNull() ?: 1f
@@ -67,11 +202,27 @@ object CarSettings {
         themeFlow.value = runCatching {
             AppTheme.valueOf(AppSettings.getString(app, KEY_THEME, AppTheme.PHONE.name))
         }.getOrDefault(AppTheme.PHONE)
+        uiThemeFlow.value = AppSettings.getString(app, KEY_UI_THEME, GsThemes.default.id)
         autoplayFlow.value = AppSettings.getString(app, KEY_AUTOPLAY, "false") == "true"
-        pipeAudioFlow.value = AppSettings.getString(app, KEY_PIPE_AUDIO, "false") == "true"
+        playerTitleFlow.value = AppSettings.getString(app, KEY_PLAYER_TITLE, "false") == "true"
+        pipeAudioFlow.value = AppSettings.getString(app, KEY_PIPE_AUDIO, "true") == "true"
         nightFlow.value = runCatching {
             NightMode.valueOf(AppSettings.getString(app, KEY_NIGHT, NightMode.AUTO.name))
         }.getOrDefault(NightMode.AUTO)
+        pinnedFlow.value = AppSettings.getString(app, KEY_PINNED, "")
+            .split(",").filter { it.isNotEmpty() }.toSet()
+        appOrderFlow.value = AppSettings.getString(app, KEY_APP_ORDER, "")
+            .split(",").filter { it.isNotEmpty() }
+        experimentalFeaturesFlow.value = AppSettings.getString(app, KEY_EXPERIMENTAL_FEATURES, "false") == "true"
+        voiceAssistantFlow.value = AppSettings.getString(app, KEY_VOICE_ASSISTANT, "false") == "true"
+        carSensorsFlow.value = AppSettings.getString(app, KEY_CAR_SENSORS, "false") == "true"
+        mediaSearchFlow.value = AppSettings.getString(app, KEY_MEDIA_SEARCH, "false") == "true"
+        seenSafetyWarningFlow.value = AppSettings.getString(app, KEY_SEEN_SAFETY_WARNING, "false") == "true"
+        unitsFlow.value = runCatching {
+            Units.valueOf(AppSettings.getString(app, KEY_UNITS, Units.AUTO.name))
+        }.getOrDefault(Units.AUTO)
+        whatsNewFlow.value = AppSettings.getString(app, KEY_WHATS_NEW, "true") == "true"
+        whatsNewSeenFlow.value = AppSettings.getString(app, KEY_WHATS_NEW_SEEN, "0").toIntOrNull() ?: 0
     }
 
     fun setScale(value: Float) {
@@ -99,6 +250,16 @@ object CarSettings {
         AppSettings.putString(app, KEY_THEME, theme.name)
     }
 
+    fun setUiTheme(id: String) {
+        uiThemeFlow.value = id
+        AppSettings.putString(app, KEY_UI_THEME, id)
+    }
+
+    fun setPlayerTitle(on: Boolean) {
+        playerTitleFlow.value = on
+        AppSettings.putString(app, KEY_PLAYER_TITLE, on.toString())
+    }
+
     fun setAutoplay(on: Boolean) {
         autoplayFlow.value = on
         AppSettings.putString(app, KEY_AUTOPLAY, on.toString())
@@ -109,9 +270,47 @@ object CarSettings {
         AppSettings.putString(app, KEY_PIPE_AUDIO, on.toString())
     }
 
+    fun setExperimentalFeaturesEnabled(on: Boolean) {
+        experimentalFeaturesFlow.value = on
+        AppSettings.putString(app, KEY_EXPERIMENTAL_FEATURES, on.toString())
+    }
+
+    fun setVoiceAssistantEnabled(on: Boolean) {
+        voiceAssistantFlow.value = on
+        AppSettings.putString(app, KEY_VOICE_ASSISTANT, on.toString())
+    }
+
+    fun setCarSensorsEnabled(on: Boolean) {
+        carSensorsFlow.value = on
+        AppSettings.putString(app, KEY_CAR_SENSORS, on.toString())
+    }
+
+    fun setMediaSearchEnabled(on: Boolean) {
+        mediaSearchFlow.value = on
+        AppSettings.putString(app, KEY_MEDIA_SEARCH, on.toString())
+    }
+
     fun setNightMode(mode: NightMode) {
         nightFlow.value = mode
         AppSettings.putString(app, KEY_NIGHT, mode.name)
         CarEnvironment.refresh()
     }
+
+    /** Long-pressed onto or off the nav bar. Silently does nothing past [MAX_PINNED] rather than
+     * bumping the oldest pin - a driver who filled the bar on purpose shouldn't lose one by accident. */
+    fun togglePin(component: String) {
+        val current = pinnedFlow.value
+        val next = when {
+            component in current -> current - component
+            current.size >= MAX_PINNED -> return
+            else -> current + component
+        }
+        pinnedFlow.value = next
+        AppSettings.putString(app, KEY_PINNED, next.joinToString(","))
+    }
+
+    fun setAppOrder(ids: List<String>) {
+        appOrderFlow.value = ids
+        AppSettings.putString(app, KEY_APP_ORDER, ids.joinToString(","))
+    }
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarSettingsScreen.kt

@@ -1,5 +1,7 @@
 package app.seb3thehacker.gearslip.car
 
+
+import app.seb3thehacker.gearslip.car.theme.*
 import android.os.Build
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -9,11 +11,13 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -28,6 +32,9 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.car.theme.GsColors
+import app.seb3thehacker.gearslip.car.theme.GsIconBox
+import app.seb3thehacker.gearslip.car.theme.GsThemes
 import app.seb3thehacker.gearslip.AppSettings
 import app.seb3thehacker.gearslip.ui.CertSummary
 import kotlinx.coroutines.Dispatchers
@@ -43,9 +50,17 @@ fun CarSettingsScreen() {
     val scale by CarSettings.scale.collectAsState()
     val open by CarSettings.openOnConnect.collectAsState()
     val night by CarSettings.nightMode.collectAsState()
+    val units by CarSettings.units.collectAsState()
+    val whatsNew by CarSettings.whatsNewAfterUpdates.collectAsState()
     val pipeAudio by CarSettings.pipeAudio.collectAsState()
     val autoplay by CarSettings.autoplay.collectAsState()
+    val playerTitle by CarSettings.playerTitle.collectAsState()
     val theme by CarSettings.appTheme.collectAsState()
+    val uiTheme by CarSettings.uiTheme.collectAsState()
+    val experimentalFeatures by CarSettings.experimentalFeaturesEnabled.collectAsState()
+    val voiceAssistant by CarSettings.voiceAssistantEnabled.collectAsState()
+    val carSensors by CarSettings.carSensorsEnabled.collectAsState()
+    val mediaSearch by CarSettings.mediaSearchEnabled.collectAsState()
     val display by CarEnvironment.display.collectAsState()
     val vehicle by CarEnvironment.vehicle.collectAsState()
     val context = LocalContext.current
@@ -60,7 +75,7 @@ fun CarSettingsScreen() {
             .padding(horizontal = 24.dp, vertical = 16.dp),
         verticalArrangement = Arrangement.spacedBy(20.dp),
     ) {
-        Text("Settings", style = MaterialTheme.typography.headlineMedium, fontWeight = FontWeight.Bold)
+        ScreenHeader("Settings")
 
         ChoiceRow(
             "Open on connect",
@@ -80,12 +95,30 @@ fun CarSettingsScreen() {
             theme,
         ) { CarSettings.setAppTheme(it) }
 
+        ChoiceRow(
+            "Theme",
+            GsThemes.builtIn.map { it.id to it.name },
+            uiTheme,
+        ) { CarSettings.setUiTheme(it) }
+
         ChoiceRow(
             "Map day/night",
             listOf(NightMode.AUTO to "Auto", NightMode.DAY to "Day", NightMode.NIGHT to "Night"),
             night,
         ) { CarSettings.setNightMode(it) }
 
+        ChoiceRow(
+            "Units",
+            listOf(Units.AUTO to "Auto", Units.IMPERIAL to "Imperial (mi, ft, °F)", Units.METRIC to "Metric (km, m, °C)"),
+            units,
+        ) { CarSettings.setUnits(it) }
+
+        ChoiceRow(
+            "Player in the nav bar",
+            listOf(false to "Skip buttons", true to "Song title"),
+            playerTitle,
+        ) { CarSettings.setPlayerTitle(it) }
+
         ChoiceRow(
             "Autoplay on connect",
             listOf(false to "Off", true to "On"),
@@ -94,13 +127,13 @@ fun CarSettingsScreen() {
 
         ChoiceRow(
             "Media audio",
-            listOf(false to "Phone output", true to "Through Gearslip"),
+            listOf(false to "Phone audio", true to "Car audio"),
             pipeAudio,
         ) { CarSettings.setPipeAudio(it) }
         Text(
-            "Phone output needs no permission: the app plays as it normally would, e.g. over " +
+            "Car audio sends the phone's sound to the car over USB. Android asks for permission " +
-                "Bluetooth to the car. Through Gearslip sends the sound over the car link, and " +
+                "when the car connects, and a few apps block it. Phone audio plays as the phone " +
-                "Android asks for screen-capture consent each time.",
+                "normally would, for example over Bluetooth to the car.",
             style = MaterialTheme.typography.bodySmall,
             color = MaterialTheme.colorScheme.onSurfaceVariant,
         )
@@ -109,6 +142,15 @@ fun CarSettingsScreen() {
 
         ScreenFit(vehicle)
 
+        ChoiceRow(
+            "Experimental features",
+            listOf(false to "Hide", true to "Show"),
+            experimentalFeatures,
+        ) { CarSettings.setExperimentalFeaturesEnabled(it) }
+        if (experimentalFeatures) {
+            ExperimentalFeaturesList(voiceAssistant, carSensors, mediaSearch)
+        }
+
         Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
             Text("Connection", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.primary)
             Info("Phone", "${Build.MANUFACTURER} ${Build.MODEL}")
@@ -116,9 +158,20 @@ fun CarSettingsScreen() {
             Info("Video", display.ifEmpty { "-" })
             Info("Certificate", cert?.headline ?: "Checking…")
         }
-        val navigator = LocalCarNavigator.current
+
-        Button(onClick = { navigator.open("calibrate") }) { Text("Display test") }
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
-        Spacer(Modifier.height(8.dp))
+            Text("About", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.primary)
+            Info("Version", app.seb3thehacker.gearslip.BuildConfig.VERSION_NAME)
+            Info("Build", app.seb3thehacker.gearslip.BuildConfig.VERSION_CODE.toString())
+            ExperimentalFeatureRow(
+                "What's new after updates",
+                "Show the list of changes once, the first time the car connects after an update.",
+                whatsNew,
+            ) { CarSettings.setWhatsNewAfterUpdates(it) }
+            GsButton(onClick = CarSettings::openWhatsNew, tone = GsTone.Tonal, modifier = Modifier.height(56.dp)) {
+                Text("What's new", style = MaterialTheme.typography.titleMedium)
+            }
+        }
     }
 }
 
@@ -129,24 +182,96 @@ private fun <T> ChoiceRow(title: String, options: List<Pair<T, String>>, selecte
         Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
             options.forEach { (value, label) ->
                 val on = value == selected
-                Surface(
+                val scheme = MaterialTheme.colorScheme
+                GsIconBox(
                     onClick = { onSelect(value) },
                     modifier = Modifier
                         .weight(1f)
                         .height(64.dp),
-                    shape = MaterialTheme.shapes.large,
+                    colors = if (on) GsColors(scheme.primaryContainer, scheme.onPrimaryContainer)
-                    color = if (on) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceContainerHigh,
+                    else GsColors(scheme.surfaceContainerHigh, scheme.onSurface),
-                    contentColor = if (on) MaterialTheme.colorScheme.onPrimaryContainer else MaterialTheme.colorScheme.onSurface,
+                    latched = on,
                 ) {
-                    Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center) {
+                    Text(label, style = MaterialTheme.typography.titleMedium, fontWeight = if (on) FontWeight.Bold else FontWeight.Normal)
-                        Text(label, style = MaterialTheme.typography.titleMedium, fontWeight = if (on) FontWeight.Bold else FontWeight.Normal)
-                    }
                 }
             }
         }
     }
 }
 
+/**
+ * Individually-switched experimental features, shown once the driver has opted into
+ * experimental features as a whole. Each is its own row - a title, what it does, and a switch -
+ * so the list reads fine whether there's one entry or several.
+ */
+@Composable
+private fun ExperimentalFeaturesList(voiceAssistant: Boolean, carSensors: Boolean, mediaSearch: Boolean) {
+    Column(
+        Modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        ExperimentalFeatureRow(
+            title = "Voice assistant",
+            description = "Push-to-talk and the car's voice button start listening: navigate, " +
+                "play media, call, or open an app by saying so. Can mishear you or act on the " +
+                "wrong command - keep your eyes on the road, and confirm anything it does " +
+                "before you rely on it.",
+            warning = true,
+            checked = voiceAssistant,
+        ) { CarSettings.setVoiceAssistantEnabled(it) }
+
+        ExperimentalFeatureRow(
+            title = "Vehicle data",
+            description = "Adds a Vehicle data tile: a live, raw dump of the head unit's sensor " +
+                "channel. Field labels (speed, RPM, fuel...) are carried over from other " +
+                "reverse-engineering projects and unverified against this car - treat them as a " +
+                "guess, not a fact, until you've watched one change for yourself.",
+            checked = carSensors,
+        ) { CarSettings.setCarSensorsEnabled(it) }
+
+        ExperimentalFeatureRow(
+            title = "Media search",
+            description = "Adds a search button to the media screen. Some apps ignore the search " +
+                "or play something else.",
+            checked = mediaSearch,
+        ) { CarSettings.setMediaSearchEnabled(it) }
+    }
+}
+
+@Composable
+private fun ExperimentalFeatureRow(
+    title: String,
+    description: String,
+    checked: Boolean,
+    warning: Boolean = false,
+    onCheckedChange: (Boolean) -> Unit,
+) {
+    Surface(
+        shape = MaterialTheme.shapes.large,
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(Modifier.weight(1f)) {
+                Text(title, style = MaterialTheme.typography.titleMedium)
+                Text(
+                    description,
+                    style = MaterialTheme.typography.bodySmall,
+                    color = if (warning) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.padding(top = 2.dp),
+                )
+            }
+            Spacer(Modifier.width(12.dp))
+            GsSwitch(checked, onCheckedChange)
+        }
+    }
+}
+
 /** The URL (or raw HTML) the Web app shows. Edited with [CarKeyboard] - no phone in hand needed. */
 @Composable
 private fun WebPageSetting() {
@@ -163,7 +288,7 @@ private fun WebPageSetting() {
             modifier = Modifier.fillMaxWidth(),
         ) {
             Text(
-                url.ifEmpty { "Built-in test page - tap to set a URL" },
+                url.ifEmpty { "DuckDuckGo (default) - tap to set a different page" },
                 style = MaterialTheme.typography.bodyLarge,
                 color = if (url.isEmpty()) MaterialTheme.colorScheme.onSurfaceVariant else MaterialTheme.colorScheme.onSurface,
                 maxLines = 1,
@@ -184,6 +309,7 @@ private fun WebPageSetting() {
                     AppSettings.setStartupUrl(context, it)
                 },
                 onSubmit = { editing = false },
+                onDismiss = { editing = false },
             )
         }
     }
@@ -222,7 +348,7 @@ private fun ScreenFit(vehicle: String) {
             style = MaterialTheme.typography.bodyMedium,
             color = MaterialTheme.colorScheme.onSurfaceVariant,
         )
-        Button(
+        GsButton(
             onClick = {
                 val ok = app.seb3thehacker.gearslip.VehicleProfiles.saveInsets(context, vehicle, insets)
                 saved = if (ok) "Saved to $vehicle" else "Could not save"
@@ -253,14 +379,13 @@ private fun Stepper(label: String, value: Int, onStep: (Int) -> Unit) {
 
 @Composable
 private fun StepButton(text: String, modifier: Modifier, onClick: () -> Unit) {
-    Surface(
+    GsIconBox(
         onClick = onClick,
         modifier = modifier.height(64.dp),
+        colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHigh, MaterialTheme.colorScheme.onSurface),
         shape = MaterialTheme.shapes.large,
-        color = MaterialTheme.colorScheme.surfaceContainerHigh,
     ) {
-        Row(Modifier.fillMaxSize(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+        Text(text, style = MaterialTheme.typography.titleLarge)
-            Text(text, style = MaterialTheme.typography.titleLarge)
-        }
     }
 }
+

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarUi.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -12,19 +13,29 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.border
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Notifications
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.foundation.layout.BoxScope
+import androidx.car.app.model.CarIcon
+import androidx.car.app.navigation.model.NavigationTemplate
+import androidx.car.app.navigation.model.RoutingInfo
+import app.seb3thehacker.gearslip.host.CarAppConnection
+import app.seb3thehacker.gearslip.host.display
+import app.seb3thehacker.gearslip.host.text
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material.icons.filled.Home
-import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -38,14 +49,31 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.produceState
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.animation.animateContentSize
+import android.media.session.PlaybackState
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.input.pointer.PointerEventPass
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextOverflow
+import app.seb3thehacker.gearslip.R
+import app.seb3thehacker.gearslip.car.theme.GsColors
+import app.seb3thehacker.gearslip.car.theme.GsIconBox
+import app.seb3thehacker.gearslip.car.theme.GsIconButton
+import app.seb3thehacker.gearslip.car.theme.GsButton
+import app.seb3thehacker.gearslip.car.theme.GsTone
+import app.seb3thehacker.gearslip.car.theme.gsColors
+import app.seb3thehacker.gearslip.car.theme.GsThemes
+import app.seb3thehacker.gearslip.car.theme.LocalGsTheme
 import app.seb3thehacker.gearslip.media.CarMedia
 import app.seb3thehacker.gearslip.media.MediaArt
 import androidx.compose.ui.platform.LocalContext
@@ -54,7 +82,10 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import app.seb3thehacker.gearslip.notify.CarNotifications
+import androidx.core.graphics.drawable.toBitmap
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.withContext
 import java.text.DateFormat
 import java.util.Date
 
@@ -69,6 +100,7 @@ fun CarUi() {
     val scale by CarSettings.scale.collectAsState()
     val phoneDark by CarEnvironment.phoneDark.collectAsState()
     val appTheme by CarSettings.appTheme.collectAsState()
+    val uiThemeId by CarSettings.uiTheme.collectAsState()
     val mediaApp by CarServices.mediaApp.collectAsState()
     val darkOutside by CarEnvironment.darkOutside.collectAsState()
     val appContext = LocalContext.current.applicationContext
@@ -81,18 +113,72 @@ fun CarUi() {
     val base = LocalDensity.current
     val insets by CarEnvironment.insets.collectAsState()
     val navigator = remember { CarNavigator(CarSettings.openOnConnect.value) }
-    remember(appContext) { invalidateLauncherApps(); CarServices.init(appContext) }
+    val controlsWake = remember { MapControlsWake() }
+    LaunchedEffect(controlsWake) {
+        while (true) {
+            delay(250)
+            controlsWake.tick()
+        }
+    }
+    remember(appContext) { Prefetch.warm(appContext, force = true); CarServices.init(appContext) }
     DisposableEffect(Unit) { onDispose { CarServices.shutdown() } }
+    // Ask for the phone's sound as soon as the car connects, not only when a media app opens:
+    // a video in the web browser or a map's voice needs it too. Asks once, after the car offers
+    // somewhere to play it.
+    LaunchedEffect(Unit) { if (CarSettings.pipeAudio.value) app.seb3thehacker.gearslip.audio.CarAudio.request() }
     // The map follows the light outside, whatever the app's own theme is set to.
     LaunchedEffect(darkOutside) { CarServices.nav.pushConfiguration() }
 
+    // The one place with a navigator and a frame to act a voice command on - CarAssistant itself
+    // only knows how to listen and speak, not what "open Spotify" means.
+    val frameForAssistant by CarEnvironment.frame.collectAsState()
+    LaunchedEffect(navigator) {
+        CarAssistant.pendingCommand.collect { heard ->
+            if (heard != null) {
+                val reply = AssistantCommands.handle(appContext, navigator, frameForAssistant, heard)
+                CarAssistant.reply(reply)
+            }
+        }
+    }
+
+    // The car's own back, home, map, media and phone keys.
+    LaunchedEffect(navigator) {
+        CarKeys.screenKeys.collect { key ->
+            when (key) {
+                CarKeys.ScreenKey.BACK -> when {
+                    navigator.appMenu != null -> navigator.dismissAppMenu()
+                    VoiceReply.state.value.phase != VoiceReply.Phase.IDLE -> VoiceReply.cancel()
+                    else -> navigator.back()
+                }
+                CarKeys.ScreenKey.HOME, CarKeys.ScreenKey.MAP -> navigator.home()
+                CarKeys.ScreenKey.MEDIA -> if (CarServices.mediaApp.value != null) navigator.media() else navigator.apps()
+                CarKeys.ScreenKey.PHONE -> BuiltInApps.Phone.open(navigator)
+            }
+        }
+    }
+
     CompositionLocalProvider(
         LocalDensity provides Density(base.density * scale, base.fontScale),
         LocalCarNavigator provides navigator,
         LocalDarkOutside provides darkOutside,
+        LocalMapControlsWake provides controlsWake,
+        LocalGsTheme provides GsThemes.byId(uiThemeId),
     ) {
         MaterialTheme(colorScheme = colors) {
-            Surface(Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
+            Surface(
+                Modifier
+                    .fillMaxSize()
+                    // Watches every touch without taking any: first in line, consumes nothing.
+                    .pointerInput(controlsWake) {
+                        awaitPointerEventScope {
+                            while (true) {
+                                awaitPointerEvent(PointerEventPass.Initial)
+                                controlsWake.touch()
+                            }
+                        }
+                    },
+                color = MaterialTheme.colorScheme.background,
+            ) {
                 // Insets are in video-frame pixels, so convert with the un-scaled density.
                 val pad = with(base) {
                     PaddingValues(
@@ -100,28 +186,340 @@ fun CarUi() {
                         end = insets.right.toDp(), bottom = insets.bottom.toDp(),
                     )
                 }
-                // The calibration screen is the raw frame: no insets, no nav bar.
                 val screen = navigator.current
-                if (screen == CarScreen.App("calibrate")) {
+                val safetyWarningSeen by CarSettings.hasSeenSafetyWarning.collectAsState()
-                    CarApps.find("calibrate")?.content?.invoke()
+                Box(Modifier.fillMaxSize().padding(pad)) {
-                } else {
+                Column(Modifier.fillMaxSize()) {
-                    Column(Modifier.fillMaxSize().padding(pad)) {
+                    if (!safetyWarningSeen) {
-                        Box(Modifier.weight(1f).fillMaxWidth()) {
+                        CarSafetyWizard(onDone = CarSettings::markSafetyWarningSeen)
-                            when (screen) {
+                        return@Column
-                                CarScreen.Home -> CarHome()
+                    }
-                                CarScreen.Apps -> CarLauncher()
+                    // Header navigation (breadcrumb trail) - off for now, kept to tweak later.
-                                CarScreen.Media -> mediaApp?.let { MediaScreen(it) { navigator.home() } }
+                    // BreadcrumbBar(navigator)
-                                CarScreen.Settings -> CarSettingsScreen()
+                    Box(Modifier.weight(1f).fillMaxWidth()) {
-                                CarScreen.Dashboard -> CarDashboardScreen()
+                        // Home never leaves the composition; other screens cover it. Dropping it
-                                is CarScreen.Notifications -> NotificationsScreen(screen.replyTo)
+                        // would tear down the map's surface, and coming back would then show black
-                                is CarScreen.App -> CarApps.find(screen.id)?.content?.invoke()
+                        // while the nav app redrew on a new one.
+                        CarHome()
+                        if (screen != CarScreen.Home) {
+                            Box(
+                                Modifier
+                                    .fillMaxSize()
+                                    .background(MaterialTheme.colorScheme.background)
+                                    // Keeps touches that miss this screen's controls off the map.
+                                    .pointerInput(Unit) { detectTapGestures { } },
+                            ) {
+                                when (screen) {
+                                    CarScreen.Home -> Unit
+                                    CarScreen.Apps -> CarLauncher()
+                                    CarScreen.Media -> mediaApp?.let { MediaScreen(it) { navigator.back() } }
+                                    CarScreen.Browse -> BrowseAppScreen(navigator)
+                                    CarScreen.Settings -> CarSettingsScreen()
+                                    CarScreen.Dashboard -> CarDashboardScreen()
+                                    CarScreen.Weather -> WeatherScreen()
+                                    CarScreen.VehicleData -> VehicleDataScreen()
+                                    is CarScreen.Notifications -> NotificationsScreen(screen.replyTo)
+                                    is CarScreen.Messages -> MessagesScreen(screen.packageName)
+                                    is CarScreen.App -> CarApps.find(screen.id)?.content?.invoke()
+                                }
                             }
-                            // The history screen is already showing them, so it needs no popup.
+                        }
-                            if (screen !is CarScreen.Notifications) {
+                        PopupTimer()
-                                NotificationPopup(Modifier.align(Alignment.TopCenter))
+                        // The dashboard is already listing them, so it needs no popup.
+                        NotificationPopup(
+                            showNew = screen !is CarScreen.Notifications && screen != CarScreen.Dashboard,
+                            modifier = Modifier.align(Alignment.TopEnd),
+                        )
+                        // Above the popup: a call is more urgent than any notification.
+                        CallOverlay(Modifier.align(Alignment.TopCenter))
+                        AssistantOverlay(Modifier.align(Alignment.TopCenter))
+                        if (app.seb3thehacker.gearslip.BuildConfig.DEBUG) {
+                            // Bottom corner, not top: a screen's own header almost always puts
+                            // something in the top-right (settings, search, a Liked Songs
+                            // shortcut) and this badge used to sit right on top of it, hiding
+                            // whatever the screen drew there.
+                            DevBuildBadge(Modifier.align(Alignment.BottomEnd))
+                        }
+                    }
+                    // The keyboard takes the nav bar's row instead of squeezing in above it -
+                    // nothing on the nav bar is useful mid-type, and the screen is too small to
+                    // show both.
+                    val keyboardVisible by CarKeyboardVisibility.state
+                    if (!keyboardVisible) CarNavBar(navigator)
+                }
+                // Over everything, nav bar included: a long press on an app, anywhere.
+                AppMenu(navigator, rememberRunningApps())
+                if (safetyWarningSeen) CarWhatsNew()
+                }
+            }
+        }
+    }
+}
+
+/**
+ * A single blocking screen, shown once per install before anything else the car screen can show -
+ * Home included. The phone's own setup guide carries the same warning, but a driver who plugs in
+ * without ever opening the phone app would otherwise never see it, on the one screen they are
+ * actually about to use while driving. [onDone] fires once, from its own button; there is no way
+ * to skip past this without tapping it.
+ */
+@Composable
+private fun CarSafetyWizard(onDone: () -> Unit) {
+    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        // The card and its button share one width, capped so neither sprawls across a wide screen.
+        Column(
+            Modifier.widthIn(max = 640.dp).fillMaxWidth().padding(24.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Surface(
+                color = MaterialTheme.colorScheme.surfaceContainerLow,
+                shape = MaterialTheme.shapes.extraLarge,
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Column(Modifier.padding(24.dp), verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                    Text("Drive safely", style = ChromeType.headline, fontWeight = FontWeight.Bold)
+                    Text(
+                        "Gearslip is unofficial software: it is not made or reviewed by any " +
+                            "carmaker, and it can fail without warning.",
+                        style = ChromeType.body,
+                    )
+                    Text(
+                        "Never interact with this screen while driving. Set the route or the " +
+                            "song before you go, then keep your attention on the road.",
+                        style = ChromeType.body,
+                    )
+                }
+            }
+            Spacer(Modifier.height(24.dp))
+            GsButton(onClick = onDone, modifier = Modifier.fillMaxWidth().height(56.dp)) {
+                Text("I understand", style = ChromeType.body)
+            }
+        }
+    }
+}
+
+/**
+ * A templated app that isn't navigation, full size with its own title bar and Stop button - the
+ * same [CarAppStage] chrome the map uses on Home, just not embedded there. [CarServices.browse]
+ * is a connection of its own, so opening one of these never bumps the map off Home.
+ */
+@Composable
+private fun BrowseAppScreen(navigator: CarNavigator) {
+    val status by CarServices.browse.status.collectAsState()
+    val frame by CarEnvironment.frame.collectAsState()
+    val template by CarServices.browse.template.collectAsState()
+    val leave = {
+        CarServices.stopBrowse()
+        navigator.back()
+    }
+    // An app that never answers is as stuck as one that says no; don't leave the driver on "Loading".
+    var timedOut by remember { mutableStateOf(false) }
+    LaunchedEffect(template == null) {
+        timedOut = false
+        if (template == null) {
+            delay(APP_START_TIMEOUT_MS)
+            timedOut = true
+        }
+    }
+    val failed = status.phase == CarAppConnection.Phase.REJECTED || status.phase == CarAppConnection.Phase.FAILED
+    if (failed || timedOut) {
+        AppWontStart(status.app ?: "This app", leave)
+        return
+    }
+    CarAppStage(CarServices.browse, status, frame, onDisconnect = leave)
+}
+
+private const val APP_START_TIMEOUT_MS = 15_000L
+
+/** What a car app that won't run under Gearslip gets instead of a loading screen that never ends. */
+@Composable
+private fun AppWontStart(app: String, onBack: () -> Unit) {
+    Column(
+        Modifier.fillMaxSize().padding(24.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Text("$app doesn't work with Gearslip yet.", style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.SemiBold)
+        Text(
+            "It didn't start. Some apps only run on Google's Android Auto.",
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+        GsButton(onClick = onBack, tone = GsTone.Tonal) { Text("Back") }
+    }
+}
+
+/**
+ * Marks a debug build on the car screen itself, not just the phone's Home screen - the one
+ * that matters while driving, since a debug build is slower and less tested than what ships.
+ */
+@Composable
+private fun DevBuildBadge(modifier: Modifier = Modifier) {
+    Surface(
+        modifier = modifier.padding(6.dp),
+        color = MaterialTheme.colorScheme.error,
+        contentColor = MaterialTheme.colorScheme.onError,
+        shape = MaterialTheme.shapes.small,
+    ) {
+        Text(
+            "DEV BUILD",
+            style = MaterialTheme.typography.labelSmall,
+            fontWeight = FontWeight.Bold,
+            modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp),
+        )
+    }
+}
+
+/**
+ * "Home > Apps > Settings", like a file manager's address bar: hidden at Home itself (nothing to
+ * show yet), and grows by one crumb for every screen pushed from there. The back arrow undoes one
+ * step; a crumb jumps straight to it, dropping everything after - this is the only on-screen way
+ * back at all, since a car touchscreen has no hardware button for it.
+ */
+@Composable
+private fun BreadcrumbBar(navigator: CarNavigator) {
+    val trail = navigator.trail
+    if (trail.size <= 1) return
+    Row(
+        Modifier.fillMaxWidth().height(40.dp).padding(start = 2.dp, end = 10.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        GsIconButton(Icons.AutoMirrored.Filled.ArrowBack, "Back", navigator::back, size = 32.dp, iconSize = 20.dp)
+        Spacer(Modifier.width(2.dp))
+        trail.forEachIndexed { index, crumb ->
+            val isLast = index == trail.lastIndex
+            Text(
+                crumb.label,
+                style = MaterialTheme.typography.labelLarge,
+                fontWeight = if (isLast) FontWeight.SemiBold else FontWeight.Normal,
+                color = if (isLast) MaterialTheme.colorScheme.onSurface else MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = if (isLast) Modifier else Modifier
+                    .clip(RoundedCornerShape(6.dp))
+                    .clickable { navigator.jumpTo(index) }
+                    .padding(horizontal = 4.dp, vertical = 2.dp),
+            )
+            if (!isLast) {
+                Text(
+                    "›",
+                    style = MaterialTheme.typography.labelLarge,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.padding(horizontal = 2.dp),
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Apps and open/pinned shortcuts on the left; now-playing pill against them; clock (tap for
+ * calendar and weather), phone battery and the darkness signal on the right. Icon-only: a driver
+ * reads a glyph faster than a label, and it keeps the bar short enough to leave the app underneath
+ * more room.
+ */
+@Composable
+private fun CarNavBar(navigator: CarNavigator) {
+    val battery by CarEnvironment.battery.collectAsState()
+    val now by rememberNow()
+    val weather by Weather.state.collectAsState()
+    val weatherData = (weather as? WeatherState.Ready)?.data
+
+    val pinnedIds by CarSettings.pinnedApps.collectAsState()
+    val entries = rememberAllEntries()
+    val pinnedEntries = remember(entries, pinnedIds) {
+        pinnedIds.mapNotNull { id -> entries.find { it.componentId == id } }
+    }
+    val frame by CarEnvironment.frame.collectAsState()
+    val running = rememberRunningApps()
+
+    Surface(color = MaterialTheme.colorScheme.surfaceContainer) {
+        BoxWithConstraints(Modifier.fillMaxWidth().height(56.dp).padding(horizontal = 10.dp)) {
+            Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
+                // Home and Apps are two different places now, not a toggle on one button - the
+                // breadcrumb trail is how you retrace your steps, but reaching for either of
+                // these two from three screens deep in a media app shouldn't mean reading it
+                // first.
+                NavHomeButton(navigator, entries, running)
+                Spacer(Modifier.width(6.dp))
+                NavItem(MediaIcons.Apps, navigator.current == CarScreen.Apps) { navigator.apps() }
+                val experimentalFeatures by CarSettings.experimentalFeaturesEnabled.collectAsState()
+                val voiceEnabled by CarSettings.voiceAssistantEnabled.collectAsState()
+                if (experimentalFeatures && voiceEnabled) {
+                    Spacer(Modifier.width(6.dp))
+                    NavAssistantIcon()
+                }
+
+                // Pinned shortcuts, then whatever else is open right now. A pinned app that's also
+                // open stays in its pinned spot, marked with a dot, instead of showing up twice.
+                // The map app lives on the Home button, so it never gets a second icon here.
+                val runningEntries = running.keys
+                    .filter { it !in pinnedIds && running[it] != RunningSlot.NAV }
+                    .mapNotNull { id -> entries.find { it.componentId == id } }
+                val shownPins = pinnedEntries.filter { running[it.componentId] != RunningSlot.NAV }
+                if (shownPins.isNotEmpty() || runningEntries.isNotEmpty()) NavDivider()
+                shownPins.forEach { entry -> NavEntryIcon(entry, running, navigator, frame) }
+                if (shownPins.isNotEmpty() && runningEntries.isNotEmpty()) NavDivider()
+                runningEntries.forEach { entry -> NavEntryIcon(entry, running, navigator, frame) }
+
+                // Next turn first, off the map only; the player shares the space when it fits,
+                // and gives way to the turn when it doesn't.
+                val turn = rememberNextTurn().takeIf { navigator.current != CarScreen.Home }
+                BoxWithConstraints(Modifier.weight(1f).padding(horizontal = 16.dp), contentAlignment = Alignment.Center) {
+                    val roomForBoth = maxWidth >= TURN_AND_PLAYER_MIN_WIDTH
+                    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+                        turn?.let { NavTurnPill(it) { navigator.home() } }
+                        if (turn == null || roomForBoth) {
+                            NavNowPlaying(navigator, selected = navigator.current == CarScreen.Media, modifier = Modifier.weight(1f, fill = false))
+                        }
+                    }
+                }
+
+                // Weather no longer has its own chip - the temperature alone (no icon, no room
+                // for one) sits where "Night"/"Day" used to, freeing a whole chip's width for the
+                // Home button above.
+                // The clock is also the notifications button: the dashboard lists them under the
+                // calendar and weather, and a dot here marks anything unread.
+                val unread by CarNotifications.unread.collectAsState()
+                NavChip(
+                    navigator.current == CarScreen.Dashboard || navigator.current is CarScreen.Notifications,
+                    { navigator.dashboard() },
+                ) {
+                    if (unread > 0) {
+                        Box(
+                            Modifier
+                                .align(Alignment.TopEnd)
+                                .offset(x = 8.dp, y = (-2).dp)
+                                .size(8.dp)
+                                .clip(CircleShape)
+                                .background(MaterialTheme.colorScheme.primary),
+                        )
+                    }
+                    Column(horizontalAlignment = Alignment.End) {
+                        Text(
+                            DateFormat.getTimeInstance(DateFormat.SHORT).format(Date(now)),
+                            style = MaterialTheme.typography.titleMedium,
+                            fontWeight = FontWeight.SemiBold,
+                        )
+                        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(3.dp)) {
+                            if (battery.percent >= 0) {
+                                Text(
+                                    "${battery.percent}%",
+                                    style = MaterialTheme.typography.labelMedium,
+                                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                )
+                                if (battery.charging) {
+                                    ChargingGlyph(Modifier.size(13.dp))
+                                }
+                            }
+                            weatherData?.let { w ->
+                                Text(
+                                    "  ·  ${w.temp}°",
+                                    style = MaterialTheme.typography.labelMedium,
+                                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                )
                             }
                         }
-                        CarNavBar(navigator)
                     }
                 }
             }
@@ -130,74 +528,140 @@ fun CarUi() {
 }
 
 /**
- * Home and Apps on the left; now-playing pill in the middle; clock (tap for calendar and weather), phone battery and the
+ * Home: the map, with the player or lyrics beside it. While a map app runs, the button wears that
- * darkness signal on the right. Icon-only: a driver reads a glyph faster than a label, and it
+ * app's icon and a long press offers to close it, so the app needs no icon of its own on the bar.
- * keeps the bar short enough to leave the app underneath more room.
  */
 @Composable
-private fun CarNavBar(navigator: CarNavigator) {
+private fun NavHomeButton(navigator: CarNavigator, entries: List<Entry>, running: Map<String, RunningSlot>) {
-    val battery by CarEnvironment.battery.collectAsState()
+    val selected = navigator.current == CarScreen.Home
-    val darkOutside by CarEnvironment.darkOutside.collectAsState()
+    val navId = running.entries.firstOrNull { it.value == RunningSlot.NAV }?.key
-    val now by rememberNow()
+    val navEntry = navId?.let { id -> entries.find { it.componentId == id } }
-
+    GsIconBox(
-    // The home and media screens already show what's playing; everywhere else it lives in the
+        { navigator.home() },
-    // middle of this bar so it stays one tap away.
+        colors = navColors(selected),
-    val showNowPlaying = navigator.current != CarScreen.Home && navigator.current != CarScreen.Media
+        latched = selected,
-
+        onLongClick = navId?.let { id -> { navigator.showAppMenu(id) } },
-    Surface(color = MaterialTheme.colorScheme.surfaceContainer) {
+    ) {
-        Box(Modifier.fillMaxWidth().height(56.dp).padding(horizontal = 10.dp)) {
+        val icon = navEntry?.icon
-            Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
+        if (icon != null) {
-                NavItem(Icons.Filled.Home, navigator.current == CarScreen.Home) { navigator.home() }
+            Box(Modifier.padding(NAV_ITEM_PADDING).size(28.dp), contentAlignment = Alignment.Center) {
-                Spacer(Modifier.width(6.dp))
+                Image(icon, navEntry.label, Modifier.size(28.dp).clip(RoundedCornerShape(7.dp)))
-                NavItem(MediaIcons.Apps, navigator.current == CarScreen.Apps) { navigator.apps() }
-
-                Spacer(Modifier.weight(1f))
-
-                Column(
-                    horizontalAlignment = Alignment.End,
-                    modifier = Modifier
-                        .clip(RoundedCornerShape(16.dp))
-                        .clickable { navigator.dashboard() }
-                        .padding(horizontal = 8.dp, vertical = 2.dp),
-                ) {
-                    Text(
-                        DateFormat.getTimeInstance(DateFormat.SHORT).format(Date(now)),
-                        style = MaterialTheme.typography.titleMedium,
-                        fontWeight = FontWeight.SemiBold,
-                    )
-                    val phone = if (battery.percent >= 0) "${battery.percent}%${if (battery.charging) " charging" else ""}" else ""
-                    val light = if (darkOutside) "Night" else "Day"
-                    Text(
-                        listOf(phone, light).filter { it.isNotEmpty() }.joinToString("  ·  "),
-                        style = MaterialTheme.typography.labelMedium,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
-                }
-                Spacer(Modifier.width(10.dp))
-                NavItem(
-                    Icons.Filled.Notifications, navigator.current is CarScreen.Notifications,
-                ) { navigator.notifications() }
-            }
-
-            if (showNowPlaying) {
-                NavNowPlaying(navigator, Modifier.align(Alignment.Center))
             }
+        } else {
+            Icon(
+                ImageVector.vectorResource(R.drawable.navigation_24), contentDescription = "Home",
+                modifier = Modifier.padding(NAV_ITEM_PADDING).size(28.dp),
+            )
         }
     }
 }
 
+/** Splits the nav bar's sections: Home and Apps, pinned apps, open apps. */
 @Composable
-private fun NavItem(icon: ImageVector, selected: Boolean, onClick: () -> Unit) {
+private fun NavDivider() {
-    val scheme = MaterialTheme.colorScheme
     Box(
         Modifier
-            .clip(RoundedCornerShape(18.dp))
+            .padding(horizontal = 10.dp)
-            .background(if (selected) scheme.secondaryContainer else scheme.surfaceContainer)
+            .width(1.dp)
-            .clickable(onClick = onClick)
+            .height(28.dp)
-            .padding(12.dp),
+            .background(MaterialTheme.colorScheme.outlineVariant),
-        contentAlignment = Alignment.Center,
+    )
+}
+
+/**
+ * A pinned or open app on the nav bar. Tapping brings it back without reconnecting if it's
+ * already open; a long press opens its menu (pin, unpin, close).
+ */
+@Composable
+private fun NavEntryIcon(
+    entry: Entry,
+    running: Map<String, RunningSlot>,
+    navigator: CarNavigator,
+    frame: CarEnvironment.Frame,
+) {
+    val id = entry.componentId ?: return
+    val slot = running[id]
+    Box(Modifier.padding(horizontal = 3.dp)) {
+        NavAppIcon(
+            entry,
+            open = slot != null,
+            showing = slot != null && slot.isShowing(navigator.current),
+            onLongClick = { navigator.showAppMenu(id) },
+        ) { openApp(entry, slot, navigator, frame) }
+    }
+}
+
+/** One open or pinned app's icon on the nav bar - the same fixed size and shape either way. */
+@Composable
+private fun NavAppIcon(
+    entry: Entry,
+    open: Boolean,
+    showing: Boolean,
+    onLongClick: () -> Unit,
+    onClick: () -> Unit,
+) {
+    val scheme = MaterialTheme.colorScheme
+    GsIconBox(
+        onClick,
+        Modifier.size(44.dp),
+        colors = if (showing) GsColors(scheme.secondaryContainer, scheme.onSecondaryContainer)
+        else GsColors(scheme.surfaceVariant, scheme.onSurfaceVariant),
+        latched = showing,
+        onLongClick = onLongClick,
     ) {
-        Icon(icon, contentDescription = null, modifier = Modifier.size(28.dp))
+        entry.icon?.let { Image(it, entry.label, Modifier.size(30.dp).clip(RoundedCornerShape(8.dp))) }
+        entry.builtIn?.let { Icon(it.glyph, entry.label, Modifier.size(26.dp)) }
+        // Only running apps get the line along the bottom edge, the usual taskbar mark for it.
+        if (open) {
+            Box(
+                Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(bottom = 2.dp)
+                    .size(width = 12.dp, height = 3.dp)
+                    .clip(RoundedCornerShape(50))
+                    .background(scheme.primary),
+            )
+        }
+    }
+}
+
+/** A tappable group in the bar that stays highlighted while its screen is open, like [NavItem]. */
+@Composable
+private fun NavChip(selected: Boolean, onClick: () -> Unit, content: @Composable BoxScope.() -> Unit) {
+    GsIconBox(onClick, colors = navColors(selected), latched = selected) {
+        Box(Modifier.padding(horizontal = 10.dp, vertical = 2.dp)) { content() }
+    }
+}
+
+/** Every nav bar item is raised, so it reads as pressable; the current screen's takes the accent colour. */
+@Composable
+private fun navColors(selected: Boolean): GsColors {
+    val s = MaterialTheme.colorScheme
+    return if (selected) GsColors(s.secondaryContainer, s.onSecondaryContainer)
+    else GsColors(s.surfaceContainerHighest, s.onSurface)
+}
+
+/**
+ * Between Apps and whatever's actually open, not with the clock/battery group on the right - a
+ * driver reaches for it right after deciding "not a tap for this", same gesture family as the
+ * two buttons beside it.
+ */
+@Composable
+private fun NavAssistantIcon() {
+    val state by CarAssistant.state.collectAsState()
+    val active = state.phase != CarAssistant.Phase.IDLE
+    GsIconBox({ CarAssistant.start() }, colors = navColors(active), latched = active) {
+        MicGlyph(Modifier.padding(NAV_ITEM_PADDING).size(28.dp))
+    }
+}
+
+/** Inner padding of every icon on the nav bar, leaving each button room inside the 56dp bar. */
+private val NAV_ITEM_PADDING = 8.dp
+
+@Composable
+private fun NavItem(icon: ImageVector, selected: Boolean, onClick: () -> Unit) {
+    GsIconBox(onClick, colors = navColors(selected), latched = selected) {
+        Icon(icon, contentDescription = null, modifier = Modifier.padding(NAV_ITEM_PADDING).size(28.dp))
     }
 }
 
@@ -210,55 +674,208 @@ internal fun rememberNow(): State<Long> = produceState(System.currentTimeMillis(
     }
 }
 
-/** Art, title and play/pause in the nav bar; tapping the art or title opens the full media screen. */
+/** How long the pill shows a new song's title before settling to just the controls. */
+private const val TITLE_SHOWN_MS = 3_000L
+
+/** Below this, the nav bar's middle only has room for the turn, not the player beside it. */
+private val TURN_AND_PLAYER_MIN_WIDTH = 520.dp
+
+/** The next manoeuvre, as the running nav app last described it. */
+private class NextTurn(val icon: CarIcon?, val distance: String, val road: String)
+
+/**
+ * Read straight off the nav app's own template: a navigation app keeps sending its routing card
+ * while it's running, whether or not the map is the screen being shown.
+ */
 @Composable
-private fun NavNowPlaying(navigator: CarNavigator, modifier: Modifier) {
+private fun rememberNextTurn(): NextTurn? {
+    val status by CarServices.nav.status.collectAsState()
+    val template by CarServices.nav.template.collectAsState()
+    // Read so a change of units redraws the distance straight away, not at the next update.
+    CarSettings.units.collectAsState().value
+    if (status.phase != CarAppConnection.Phase.RUNNING) return null
+    val routing = (template as? NavigationTemplate)?.navigationInfo as? RoutingInfo ?: return null
+    if (routing.isLoading) return null
+    val step = routing.currentStep ?: return null
+    return NextTurn(
+        icon = step.maneuver?.icon,
+        distance = routing.currentDistance.display(),
+        road = step.road.text().ifEmpty { step.cue.text() },
+    )
+}
+
+/** The next turn in the nav bar: arrow, how far, onto what. Tapping goes back to the map. */
+@Composable
+private fun NavTurnPill(turn: NextTurn, onClick: () -> Unit) {
+    // Same finish as every other button on the bar, in the accent colour; the text runs a step
+    // bigger than anything else there, since it's the one thing worth a glance mid-drive.
+    GsIconBox(
+        onClick,
+        Modifier.widthIn(max = 340.dp).height(44.dp),
+        colors = gsColors(GsTone.Primary),
+    ) {
+        Row(
+            Modifier.padding(NAV_ITEM_PADDING),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            CarGlyph(turn.icon, Modifier.size(28.dp))
+            if (turn.distance.isNotEmpty()) {
+                Text(turn.distance, style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold, maxLines = 1)
+            }
+            if (turn.road.isNotEmpty()) {
+                Text(
+                    turn.road,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                )
+            }
+        }
+    }
+}
+
+/** "Title - Artist" on one line. The text itself cuts it off, and only where the pill runs out of room. */
+private fun nowPlayingLabel(title: String, artist: String): String =
+    listOf(title.trim(), artist.trim()).filter { it.isNotEmpty() }.joinToString(" - ")
+        .ifEmpty { "Nothing playing" }
+
+/**
+ * The player in the nav bar, on every screen. Art and title open the full media screen;
+ * play/pause and skip work right here. The dock button moves the player into the column beside
+ * the map on Home (see [CarHome]), and the pill steps aside there while it's docked - unless the
+ * column is showing lyrics instead, when the pill stays and its dock button swaps them back.
+ */
+@Composable
+private fun NavNowPlaying(navigator: CarNavigator, selected: Boolean, modifier: Modifier = Modifier) {
     val media = CarServices.media
     val phase by media.phase.collectAsState()
     val now by media.now.collectAsState()
-    if (phase != CarMedia.Phase.READY || !now.hasTrack) return
+    if (phase != CarMedia.Phase.READY || !now.isActive) return
+    // Docked beside the map, the player is already on screen - the pill steps aside for it.
+    if (navigator.sidePanel == SidePanel.CONTROLS && navigator.current == CarScreen.Home) return
+    // The media screen is the full player already; the pill would only repeat its controls.
+    if (navigator.current == CarScreen.Media) return
     val context = LocalContext.current
     val art by produceState(now.art, now.art, now.artUri) { value = now.art ?: MediaArt.load(context, now.artUri) }
-
+    val position by produceState(now.currentPosition(), now) {
-    Surface(
+        while (true) {
-        modifier = modifier,
+            value = now.currentPosition()
-        shape = RoundedCornerShape(50),
+            if (!now.playing) break
-        color = MaterialTheme.colorScheme.secondaryContainer,
+            delay(1000)
-        contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
-    ) {
-    Row(
-        Modifier.padding(start = 6.dp, end = 4.dp, top = 4.dp, bottom = 4.dp),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(6.dp),
-    ) {
-        Row(
-            Modifier
-                .clip(RoundedCornerShape(50))
-                .clickable { navigator.media() },
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(10.dp),
-        ) {
-            Box(Modifier.size(40.dp).clip(RoundedCornerShape(50)).background(MaterialTheme.colorScheme.surfaceVariant)) {
-                art?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
-            }
-            Text(
-                now.title.ifEmpty { "Nothing playing" }.let { if (it.length > 15) it.take(15) + "…" else it },
-                style = MaterialTheme.typography.titleSmall,
-                fontWeight = FontWeight.SemiBold,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-            )
-        }
-        FilledIconButton(onClick = media::togglePlay, modifier = Modifier.size(44.dp)) {
-            Icon(
-                if (now.playing) MediaIcons.Pause else Icons.Filled.PlayArrow,
-                if (now.playing) "Pause" else "Play",
-                Modifier.size(26.dp),
-            )
-        }
-        IconButton(onClick = { media.next() }, modifier = Modifier.size(44.dp)) {
-            Icon(MediaIcons.Next, "Next", Modifier.size(28.dp))
         }
     }
+
+    // A new song announces itself: title, play/pause and dock for a few seconds, then the title
+    // goes and the pill settles to just the controls - unless the driver keeps the title up.
+    val keepTitle by CarSettings.playerTitle.collectAsState()
+    var announcing by remember { mutableStateOf(true) }
+    LaunchedEffect(now.title, now.artist) {
+        announcing = true
+        delay(TITLE_SHOWN_MS)
+        announcing = false
+    }
+    val showTitle = keepTitle || announcing
+
+    val scheme = MaterialTheme.colorScheme
+    val onPill = if (selected) scheme.onPrimaryContainer else scheme.onSecondaryContainer
+    Surface(
+        modifier = modifier
+            .animateContentSize()
+            // With the title up, all the room the bar has, so as much of it shows as can.
+            .then(if (showTitle) Modifier.fillMaxWidth() else Modifier)
+            .height(44.dp),
+        shape = RoundedCornerShape(14.dp),
+        color = if (selected) scheme.primaryContainer else scheme.secondaryContainer,
+        contentColor = onPill,
+    ) {
+        Box {
+            Row(
+                Modifier.fillMaxHeight().padding(horizontal = 4.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+            ) {
+                // Art (and the title while it shows) opens the full media screen.
+                Row(
+                    Modifier
+                        .then(if (showTitle) Modifier.weight(1f) else Modifier)
+                        .fillMaxHeight()
+                        .clip(RoundedCornerShape(10.dp))
+                        .clickable { navigator.media() },
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    Box(Modifier.size(34.dp).clip(RoundedCornerShape(8.dp)).background(scheme.surfaceVariant)) {
+                        art?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
+                    }
+                    if (showTitle) {
+                        Text(
+                            nowPlayingLabel(now.title, now.artist),
+                            style = MaterialTheme.typography.titleSmall,
+                            fontWeight = FontWeight.SemiBold,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                }
+                if (!showTitle) {
+                    GsIconButton(
+                        MediaIcons.Previous, "Previous", media::previous,
+                        enabled = now.canDo(PlaybackState.ACTION_SKIP_TO_PREVIOUS), size = 36.dp, iconSize = 22.dp,
+                    )
+                }
+                GsIconButton(
+                    if (now.playing) MediaIcons.Pause else Icons.Filled.PlayArrow,
+                    if (now.playing) "Pause" else "Play",
+                    media::togglePlay,
+                    tone = GsTone.Primary, size = 36.dp, iconSize = 22.dp,
+                )
+                if (!showTitle) {
+                    GsIconButton(
+                        MediaIcons.Next, "Next", media::next,
+                        enabled = now.canDo(PlaybackState.ACTION_SKIP_TO_NEXT), size = 36.dp, iconSize = 22.dp,
+                    )
+                }
+                GsIconButton(
+                    MediaIcons.DockRight, "Move the player beside the map", navigator::togglePlayerDock,
+                    size = 36.dp, iconSize = 22.dp,
+                )
+            }
+            if (now.durationMs > 0) {
+                // matchParentSize, so the line follows the pill's width rather than widening it.
+                Box(Modifier.matchParentSize(), contentAlignment = Alignment.BottomStart) {
+                    Box(
+                        Modifier
+                            .fillMaxWidth((position.toFloat() / now.durationMs).coerceIn(0f, 1f))
+                            .height(2.dp)
+                            .background(onPill.copy(alpha = 0.7f)),
+                    )
+                }
+            }
+        }
+    }
+}
+
+/**
+ * A filled lightning bolt, next to the battery percentage instead of the word "charging" - the
+ * core Material icon set this project ships (no extended pack, to keep the app small) has no
+ * bolt, so this is drawn rather than a vector asset.
+ */
+@Composable
+private fun ChargingGlyph(modifier: Modifier = Modifier, tint: Color = MaterialTheme.colorScheme.onSurfaceVariant) {
+    androidx.compose.foundation.Canvas(modifier) {
+        val w = size.width
+        val h = size.height
+        val bolt = androidx.compose.ui.graphics.Path().apply {
+            moveTo(w * 0.58f, 0f)
+            lineTo(w * 0.12f, h * 0.58f)
+            lineTo(w * 0.46f, h * 0.58f)
+            lineTo(w * 0.42f, h)
+            lineTo(w * 0.88f, h * 0.40f)
+            lineTo(w * 0.54f, h * 0.40f)
+            close()
+        }
+        drawPath(bolt, tint)
     }
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarWhatsNew.kt

@@ -0,0 +1,113 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.produceState
+import kotlinx.coroutines.delay
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.Changelog
+import app.seb3thehacker.gearslip.car.theme.GsButton
+import app.seb3thehacker.gearslip.car.theme.GsSwitch
+import app.seb3thehacker.gearslip.notify.CarMotion
+
+/**
+ * What's new in this build, once, the first time the car screen shows after an update - or any
+ * time from Settings > About. Held back while the car is moving: a list to read is for when
+ * parked. The switch turns the automatic showing off (or back on); it doesn't close the card.
+ */
+@Composable
+fun CarWhatsNew() {
+    val release = Changelog.current ?: return
+    val afterUpdates by CarSettings.whatsNewAfterUpdates.collectAsState()
+    val seen by CarSettings.whatsNewSeen.collectAsState()
+    val open by CarSettings.whatsNewOpen.collectAsState()
+    // Polled: CarMotion is a plain value, and the card should appear once the car stops.
+    val moving by produceState(CarMotion.moving) {
+        while (true) {
+            value = CarMotion.moving
+            delay(5_000)
+        }
+    }
+    val due = afterUpdates && seen < release.versionCode && !moving
+    if (!open && !due) return
+    val close = { CarSettings.closeWhatsNew(release.versionCode) }
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = 0.5f))
+            .clickable(remember { MutableInteractionSource() }, indication = null, onClick = close),
+        contentAlignment = Alignment.Center,
+    ) {
+        Surface(
+            shape = RoundedCornerShape(24.dp),
+            color = MaterialTheme.colorScheme.surfaceContainerHigh,
+            // Swallows taps on the card itself, so only the scrim around it closes.
+            modifier = Modifier
+                .padding(16.dp)
+                .widthIn(max = 640.dp)
+                .clickable(remember { MutableInteractionSource() }, indication = null) {},
+        ) {
+            Column(Modifier.padding(20.dp), verticalArrangement = Arrangement.spacedBy(14.dp)) {
+                Text(
+                    "What's new in ${release.versionName}",
+                    style = MaterialTheme.typography.headlineSmall,
+                    fontWeight = FontWeight.Bold,
+                )
+                Column(
+                    Modifier.weight(1f, fill = false).verticalScroll(rememberScrollState()),
+                    verticalArrangement = Arrangement.spacedBy(10.dp),
+                ) {
+                    release.changes.forEach { change ->
+                        Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+                            Box(
+                                Modifier
+                                    .padding(top = 9.dp)
+                                    .size(7.dp)
+                                    .background(MaterialTheme.colorScheme.primary, CircleShape),
+                            )
+                            Text(change, style = MaterialTheme.typography.bodyLarge)
+                        }
+                    }
+                }
+                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(14.dp)) {
+                    GsSwitch(afterUpdates, CarSettings::setWhatsNewAfterUpdates)
+                    Text(
+                        "Show after updates",
+                        style = MaterialTheme.typography.titleMedium,
+                        modifier = Modifier.weight(1f),
+                    )
+                    GsButton(onClick = close, modifier = Modifier.height(56.dp)) {
+                        Text("Got it", style = MaterialTheme.typography.titleMedium)
+                    }
+                }
+            }
+        }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/MapControlsWake.kt

@@ -0,0 +1,38 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
+import android.os.SystemClock
+
+/**
+ * Whether the map's buttons (settings, pan, zoom, locate) are showing.
+ *
+ * They fade out after [IDLE_MS] with no touch anywhere on the car screen, to leave the map clear,
+ * and any touch brings them back. [touch] is called for every pointer event and is cheap: it only
+ * writes state when the buttons were actually hidden.
+ */
+class MapControlsWake {
+
+    var awake by mutableStateOf(true)
+        private set
+
+    private var lastTouch = SystemClock.uptimeMillis()
+
+    fun touch() {
+        lastTouch = SystemClock.uptimeMillis()
+        if (!awake) awake = true
+    }
+
+    /** Called on a timer; hides the buttons once nothing has touched the screen for [IDLE_MS]. */
+    fun tick() {
+        if (awake && SystemClock.uptimeMillis() - lastTouch >= IDLE_MS) awake = false
+    }
+
+    companion object {
+        const val IDLE_MS = 4_000L
+    }
+}
+
+val LocalMapControlsWake = staticCompositionLocalOf { MapControlsWake() }

gearslip/src/main/java/app/seb3thehacker/gearslip/car/MediaScreen.kt

@@ -1,9 +1,17 @@
 package app.seb3thehacker.gearslip.car
 
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import app.seb3thehacker.gearslip.car.theme.*
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.foundation.layout.Arrangement
+import android.provider.Settings
+import android.content.Intent
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -22,15 +30,14 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.Button
+import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -42,7 +49,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.PathFillType
 import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.addPathNodes
@@ -60,7 +69,11 @@ import app.seb3thehacker.gearslip.media.LyricsResult
 import app.seb3thehacker.gearslip.media.Lyrics
 import app.seb3thehacker.gearslip.media.MediaEntry
 import app.seb3thehacker.gearslip.media.NowPlaying
+import app.seb3thehacker.gearslip.media.QueueTrack
 import android.media.session.PlaybackState
+import kotlinx.coroutines.delay
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.PaddingValues
 
 /**
  * A media app on the car screen: what it is playing and its controls on the left, the tree it
@@ -72,43 +85,121 @@ fun MediaScreen(app: MediaApp, onExit: () -> Unit) {
     val media = CarServices.media
     val phase by media.phase.collectAsStateWithLifecycle()
     val now by media.now.collectAsStateWithLifecycle()
+    val queue by media.queue.collectAsStateWithLifecycle()
     val browse by media.browse.collectAsStateWithLifecycle()
+    val rejection by media.rejection.collectAsStateWithLifecycle()
     val capture by CarAudio.capture.collectAsStateWithLifecycle()
-    var tab by remember { mutableStateOf(Tab.BROWSE) }
+    val search by media.search.collectAsStateWithLifecycle()
+    var tab by remember { mutableStateOf(Tab.NOW_PLAYING) }
+    var searching by remember { mutableStateOf(false) }
+    val searchAllowed = CarSettings.experimentalFeaturesEnabled.collectAsState().value && CarSettings.mediaSearchEnabled.collectAsState().value
 
     // The connection outlives this screen: the home screen's player is the same one.
     LaunchedEffect(app) { CarServices.openMedia(app) }
 
-    Column(Modifier.fillMaxSize().padding(horizontal = 16.dp, vertical = 10.dp)) {
+    val art = rememberArt(now)
-        Row(verticalAlignment = Alignment.CenterVertically) {
+
-            IconButton(onClick = onExit) { Icon(Icons.Filled.ArrowBack, contentDescription = "Back to apps") }
+    // The art's colour behind everything, header included; the buttons keep their own.
-            Text(app.label, style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.SemiBold)
+    Surface(Modifier.fillMaxSize(), color = rememberArtColor(art, MaterialTheme.colorScheme.background, darkLightness = 0.15f, lightLightness = 0.9f)) {
-            Spacer(Modifier.weight(1f))
+        if (phase != CarMedia.Phase.READY) {
-            AudioBadge(capture)
+            Column(Modifier.fillMaxSize()) {
+                AppIdentity(app, onExit, Modifier.padding(horizontal = 16.dp, vertical = 10.dp))
+                when (phase) {
+                    CarMedia.Phase.REJECTED -> when (rejection) {
+                        CarMedia.Rejection.NEEDS_NOTIFICATION_ACCESS -> Notice(
+                            "${app.label} keeps its library to itself.",
+                            "Gearslip can still control it once it has Notification access on the phone. " +
+                                "Allow it under Settings > Notifications > Notification access.",
+                            action = "Open on phone" to {
+                                val app = context.applicationContext
+                                runCatching {
+                                    app.startActivity(
+                                        Intent(Settings.ACTION_NOTIFICATION_LISTENER_SETTINGS).addFlags(Intent.FLAG_ACTIVITY_NEW_TASK),
+                                    )
+                                }
+                            },
+                        )
+                        CarMedia.Rejection.NEEDS_APP_RUNNING -> Notice(
+                            "${app.label} isn't running.",
+                            "${app.label} plays through Gearslip's own player, but only while it's " +
+                                "open on the phone. Open it once and it keeps playing here in the car.",
+                            action = "Open ${app.label}" to { media.launchAndConnect(app) },
+                        )
+                        CarMedia.Rejection.REFUSED -> Notice(
+                            "${app.label} would not let Gearslip browse it.",
+                            "Some media apps only accept Google's own host.",
+                        )
+                    }
+                    else -> Notice("Connecting to ${app.label}…", null)
+                }
+            }
+            return@Surface
         }
 
-        when (phase) {
+        if (searching) {
-            CarMedia.Phase.REJECTED -> Notice(
+            SearchPanel(
-                "${app.label} would not let Gearslip browse it.",
+                appLabel = app.label,
-                "Some media apps only accept Google's own host.",
+                media = media,
+                canPickForYou = now.canSearch,
+                onPlayed = {
+                    searching = false
+                    tab = Tab.NOW_PLAYING
+                },
+                onOpened = {
+                    searching = false
+                    tab = Tab.BROWSE
+                },
+                onPickForYou = { query ->
+                    media.search(query)
+                    searching = false
+                    tab = Tab.NOW_PLAYING
+                },
+                onClose = { searching = false },
             )
-            CarMedia.Phase.CONNECTING, CarMedia.Phase.IDLE -> Notice("Connecting to ${app.label}…", null)
+            return@Surface
-            CarMedia.Phase.READY -> Row(
+        }
-                Modifier.fillMaxSize().padding(top = 6.dp),
+
-                horizontalArrangement = Arrangement.spacedBy(16.dp),
+        // Two columns, split the same way on every tab so nothing jumps when switching: the app
-            ) {
+        // and the art (or, beside a list, the compact player) on the left; the tabs across the
-                NowPlayingPanel(now, media, Modifier.width(250.dp).fillMaxHeight())
+        // top of the right column, over whatever the tab shows.
-                Column(Modifier.weight(1f).fillMaxHeight()) {
+        Row(
-                    Row {
+            Modifier.fillMaxSize().padding(start = 16.dp, end = 16.dp, top = 10.dp, bottom = 8.dp),
-                        TextButton(onClick = { tab = Tab.BROWSE }) {
+            horizontalArrangement = Arrangement.spacedBy(24.dp),
-                            Text("Browse", fontWeight = if (tab == Tab.BROWSE) FontWeight.Bold else FontWeight.Normal)
+        ) {
-                        }
+            Column(Modifier.weight(0.8f).fillMaxHeight()) {
-                        TextButton(onClick = { tab = Tab.LYRICS }) {
+                AppIdentity(app, onExit)
-                            Text("Lyrics", fontWeight = if (tab == Tab.LYRICS) FontWeight.Bold else FontWeight.Normal)
+                Spacer(Modifier.height(12.dp))
-                        }
+                if (tab == Tab.NOW_PLAYING) {
+                    CoverArt(art, Modifier.weight(1f).fillMaxWidth())
+                } else {
+                    CompactPlayer(now, media, Modifier.weight(1f).fillMaxWidth())
+                }
+                AudioBadge(capture)
+            }
+            Column(Modifier.weight(1.2f).fillMaxHeight()) {
+                Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                    MediaTab("Now playing", tab == Tab.NOW_PLAYING, Modifier.weight(1f)) { tab = Tab.NOW_PLAYING }
+                    MediaTab("Browse", tab == Tab.BROWSE, Modifier.weight(1f)) { tab = Tab.BROWSE }
+                    MediaTab("Up next", tab == Tab.QUEUE, Modifier.weight(1f)) { tab = Tab.QUEUE }
+                    MediaTab("Lyrics", tab == Tab.LYRICS, Modifier.weight(1f)) { tab = Tab.LYRICS }
+                    if (searchAllowed && (now.canSearch || media.canSearchLibrary)) {
+                        GsIconButton(
+                            Icons.Filled.Search,
+                            "Search ${app.label}",
+                            { searching = true },
+                            colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHigh, MaterialTheme.colorScheme.onSurface),
+                            size = 44.dp,
+                            shape = MaterialTheme.shapes.large,
+                        )
                     }
+                }
+                search?.let { SearchStatus(it, app.label, media::dismissSearch) }
+                Spacer(Modifier.height(12.dp))
+                Box(Modifier.weight(1f).fillMaxWidth()) {
                     when (tab) {
-                        Tab.BROWSE -> BrowsePanel(browse, media, Modifier.fillMaxSize())
+                        Tab.NOW_PLAYING -> NowPlayingControls(now, media, Modifier.fillMaxSize())
+                        Tab.BROWSE -> BrowsePanel(browse, media, app.label, Modifier.fillMaxSize())
+                        Tab.QUEUE -> QueuePanel(queue, now, media, Modifier.fillMaxSize())
                         Tab.LYRICS -> LyricsPanel(now, Modifier.fillMaxSize())
                     }
                 }
@@ -117,17 +208,196 @@ fun MediaScreen(app: MediaApp, onExit: () -> Unit) {
     }
 }
 
-private enum class Tab { BROWSE, LYRICS }
+/**
+ * Back, then which app this is: its own icon and its name, quieter than the song title - the
+ * name alone in big bold type read as one more heading fighting the track for attention.
+ */
+@Composable
+private fun AppIdentity(app: MediaApp, onExit: () -> Unit, modifier: Modifier = Modifier) {
+    val icon = remember(app) { findEntry(app.component.flattenToString())?.icon }
+    Row(modifier, verticalAlignment = Alignment.CenterVertically) {
+        GsIconButton(Icons.Filled.ArrowBack, "Back", onExit, size = 44.dp)
+        Spacer(Modifier.width(14.dp))
+        icon?.let {
+            Image(it, null, Modifier.size(26.dp).clip(RoundedCornerShape(7.dp)))
+            Spacer(Modifier.width(10.dp))
+        }
+        Text(
+            app.label.lowercase().replaceFirstChar { it.titlecase() },
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
+private enum class Tab { NOW_PLAYING, BROWSE, QUEUE, LYRICS }
+
+// --- search ----------------------------------------------------------------------------------
+
+/**
+ * Types a search for the app to play. The app picks the result and plays it, the way it would
+ * for "play X" from a voice assistant, so there's no list to choose from.
+ */
+/**
+ * Search inside the media app. It asks the app's library for matches half a second after the
+ * driver stops typing and lists them, so the driver picks exactly what plays: a song plays, an
+ * album or artist opens in Browse. The search key hides the keyboard to show more results; the
+ * field brings it back. An app with no library search can still be told to play its own best
+ * match, which is all the panel could do before.
+ */
+@Composable
+private fun SearchPanel(
+    appLabel: String,
+    media: CarMedia,
+    canPickForYou: Boolean,
+    onPlayed: () -> Unit,
+    onOpened: () -> Unit,
+    onPickForYou: (String) -> Unit,
+    onClose: () -> Unit,
+) {
+    var query by remember { mutableStateOf("") }
+    var typing by remember { mutableStateOf(true) }
+    val results by media.results.collectAsStateWithLifecycle()
+    LaunchedEffect(query) {
+        delay(SEARCH_PAUSE_MS)
+        media.searchLibrary(query)
+    }
+    DisposableEffect(Unit) { onDispose { media.clearResults() } }
+
+    val trimmed = query.trim()
+    val current = results?.takeIf { it.query == trimmed }
+    val unsupported = current?.supported == false
+
+    Column(Modifier.fillMaxSize()) {
+        Row(
+            Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 10.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            GsIconButton(Icons.Filled.ArrowBack, "Back", onClose, size = ICON_BUTTON_SIZE)
+            SearchField(
+                query,
+                "Search $appLabel",
+                Modifier.weight(1f).clickable { typing = true },
+                onClear = {
+                    query = ""
+                    typing = true
+                },
+            )
+        }
+        Box(Modifier.weight(1f).fillMaxWidth().padding(horizontal = 16.dp)) {
+            val entries = current?.entries
+            when {
+                trimmed.isEmpty() -> SearchNote("Type a song, artist, album, or playlist.")
+                unsupported && canPickForYou ->
+                    SearchNote("$appLabel can't list results. Press search, and $appLabel picks what to play.")
+                unsupported -> SearchNote("$appLabel can't search from the car.")
+                entries == null -> SearchNote("Searching $appLabel…")
+                entries.isEmpty() -> SearchNote("$appLabel found nothing for \"$trimmed\".")
+                else -> LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp), contentPadding = PaddingValues(bottom = 8.dp)) {
+                    items(entries) { entry ->
+                        EntryRow(entry, media) {
+                            if (entry.browsable) {
+                                media.select(entry)
+                                onOpened()
+                            } else {
+                                media.playAll(entry)
+                                onPlayed()
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (typing) {
+            CarKeyboard(
+                text = query,
+                onTextChange = { query = it },
+                onSubmit = {
+                    when {
+                        trimmed.isEmpty() -> Unit
+                        unsupported && canPickForYou -> onPickForYou(trimmed)
+                        else -> typing = false
+                    }
+                },
+                onDismiss = { if (trimmed.isEmpty()) onClose() else typing = false },
+            )
+        }
+    }
+}
+
+@Composable
+private fun SearchNote(text: String) {
+    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        Text(
+            text,
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = androidx.compose.ui.text.style.TextAlign.Center,
+        )
+    }
+}
+
+/** How long typing has to pause before the library is searched. */
+private const val SEARCH_PAUSE_MS = 1_000L
+
+/** A line under the tabs while the app works on a search, and if it plays nothing for it. */
+@Composable
+private fun SearchStatus(search: CarMedia.Search, appLabel: String, onDismiss: () -> Unit) {
+    Surface(
+        onClick = onDismiss,
+        shape = MaterialTheme.shapes.large,
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
+    ) {
+        Text(
+            if (search.ignored) "$appLabel didn't play anything for \"${search.query}\"."
+            else "Searching $appLabel for \"${search.query}\"…",
+            style = MaterialTheme.typography.bodyLarge,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp),
+        )
+    }
+}
+
+/** A bigger, easier-to-hit tab than a plain [TextButton] - this row is the only navigation on the screen. */
+@Composable
+private fun MediaTab(label: String, selected: Boolean, modifier: Modifier, onClick: () -> Unit) {
+    GsIconBox(
+        onClick = onClick,
+        modifier = modifier.height(44.dp),
+        colors = if (selected) GsColors(MaterialTheme.colorScheme.primaryContainer, MaterialTheme.colorScheme.onPrimaryContainer)
+        else GsColors(MaterialTheme.colorScheme.surfaceContainerHigh, MaterialTheme.colorScheme.onSurface),
+        shape = MaterialTheme.shapes.large,
+        latched = selected,
+    ) {
+        Text(
+            label,
+            style = MaterialTheme.typography.titleSmall,
+            fontWeight = if (selected) FontWeight.Bold else FontWeight.Normal,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
 
 /**
  * The song's lyrics, fetched when this tab opens. Synced lyrics follow the playback position with
  * the current line in the accent colour; unsynced ones are plain scrolling text.
  */
 @Composable
-private fun LyricsPanel(now: NowPlaying, modifier: Modifier) {
+internal fun LyricsPanel(
+    now: NowPlaying,
+    modifier: Modifier,
+    lineStyle: androidx.compose.ui.text.TextStyle = MaterialTheme.typography.titleLarge,
+) {
+    val context = LocalContext.current
     val lyrics by produceState<LyricsState>(LyricsState.Loading, now.title, now.artist, now.album, now.durationMs) {
         value = LyricsState.Loading
-        value = Lyrics.find(now.title, now.artist, now.album, now.durationMs)
+        value = Lyrics.find(context, now.title, now.artist, now.album, now.durationMs)
             ?.let { LyricsState.Found(it) } ?: LyricsState.Missing
     }
     val list = rememberLazyListState()
@@ -157,7 +427,7 @@ private fun LyricsPanel(now: NowPlaying, modifier: Modifier) {
                 itemsIndexed(lines) { index, line ->
                     Text(
                         line.text.ifEmpty { " " },
-                        style = MaterialTheme.typography.titleLarge,
+                        style = lineStyle,
                         fontWeight = if (index == current) FontWeight.Bold else FontWeight.Normal,
                         color = when {
                             !state.result.synced -> MaterialTheme.colorScheme.onSurface
@@ -189,102 +459,143 @@ private fun AudioBadge(capture: CarAudio.Capture) {
 }
 
 @Composable
-private fun Notice(title: String, detail: String?) {
+private fun Notice(title: String, detail: String?, action: Pair<String, () -> Unit>? = null) {
-    Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
+    Column(
-        Text(title, style = MaterialTheme.typography.titleMedium)
+        Modifier.fillMaxSize().padding(horizontal = 24.dp),
-        detail?.let { Text(it, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant) }
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Text(title, style = MaterialTheme.typography.titleMedium, textAlign = androidx.compose.ui.text.style.TextAlign.Center)
+        detail?.let {
+            Text(
+                it, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = androidx.compose.ui.text.style.TextAlign.Center,
+            )
+        }
+        action?.let { (label, run) ->
+            Spacer(Modifier.height(12.dp))
+            GsButton(onClick = run, tone = GsTone.Tonal) { Text(label) }
+        }
     }
 }
 
 // --- now playing -----------------------------------------------------------------------------
 
+/**
+ * The now-playing view on its own, for places with no tabs around it (an app's own
+ * now-playing template): the cover on the left, [NowPlayingControls] on the right.
+ */
 @Composable
-private fun NowPlayingPanel(now: NowPlaying, media: CarMedia, modifier: Modifier) {
+internal fun NowPlayingPage(now: NowPlaying, media: CarMedia, modifier: Modifier) {
-    val context = LocalContext.current
+    Row(
-    val art by produceState(now.art, now.art, now.artUri) {
+        modifier.padding(horizontal = 24.dp, vertical = 8.dp),
-        value = now.art ?: MediaArt.load(context, now.artUri)
+        horizontalArrangement = Arrangement.spacedBy(24.dp),
-    }
+    ) {
-    var position by remember { mutableLongStateOf(0L) }
+        CoverArt(rememberArt(now), Modifier.weight(0.8f).fillMaxHeight())
-    LaunchedEffect(now) {
+        NowPlayingControls(now, media, Modifier.weight(1.2f).fillMaxHeight())
-        while (true) {
-            position = now.currentPosition()
-            kotlinx.coroutines.delay(500)
-        }
     }
+}
 
-    Column(modifier, horizontalAlignment = Alignment.CenterHorizontally) {
+/** The cover, as big a square as its space allows, centred in it. */
+@Composable
+private fun CoverArt(art: android.graphics.Bitmap?, modifier: Modifier) {
+    BoxWithConstraints(modifier, contentAlignment = Alignment.Center) {
         Surface(
             shape = MaterialTheme.shapes.large,
             color = MaterialTheme.colorScheme.surfaceVariant,
-            modifier = Modifier.size(170.dp),
+            shadowElevation = 6.dp,
+            modifier = Modifier.size(minOf(maxWidth, maxHeight)),
         ) {
-            art?.let {
+            art?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
-                Image(it.asImageBitmap(), null, Modifier.fillMaxSize().clip(MaterialTheme.shapes.large), contentScale = ContentScale.Crop)
-            }
         }
-        Spacer(Modifier.height(8.dp))
+    }
-        Text(
+}
-            now.title.ifEmpty { "Nothing playing" },
-            style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold,
-            maxLines = 1, overflow = TextOverflow.Ellipsis,
-        )
-        Text(
-            listOf(now.artist, now.album).filter { it.isNotEmpty() }.joinToString(" - "),
-            style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant,
-            maxLines = 1, overflow = TextOverflow.Ellipsis,
-        )
-        now.error?.let { Text(it, style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.error, maxLines = 2) }
 
-        if (now.durationMs > 0) {
+/**
-            WavyProgress(
+ * Everything about the track and every control for it, read top to bottom: title and artist,
-                fraction = position.toFloat() / now.durationMs,
+ * the seek bar, the transport, then like, shuffle and repeat as big icon-only buttons.
-                playing = now.state == PlaybackState.STATE_PLAYING,
+ */
-                onSeek = { media.seek((it * now.durationMs).toLong()) },
+@Composable
-                modifier = Modifier.padding(vertical = 4.dp),
+private fun NowPlayingControls(now: NowPlaying, media: CarMedia, modifier: Modifier) {
+    Column(
+        modifier.verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.spacedBy(14.dp, Alignment.CenterVertically),
+    ) {
+        Column {
+            Text(
+                now.title.ifEmpty { "Nothing playing" },
+                style = MaterialTheme.typography.headlineMedium, fontWeight = FontWeight.Bold,
+                maxLines = 2, overflow = TextOverflow.Ellipsis,
             )
-        } else {
+            Text(
-            Spacer(Modifier.height(14.dp))
+                listOf(now.artist, now.album).filter { it.isNotEmpty() }.joinToString(" - "),
+                style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1, overflow = TextOverflow.Ellipsis,
+            )
+            now.error?.let { Text(it, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.error, maxLines = 2) }
         }
+        PlayerProgress(now, media, Modifier.fillMaxWidth())
+        TransportRow(now, media, skip = 60.dp, modifier = Modifier.fillMaxWidth())
+        PlayModeRow(now, media, size = 56.dp, modifier = Modifier.fillMaxWidth(), maxOther = 2)
+    }
+}
 
-        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+/**
-            IconButton(onClick = media::previous, enabled = now.canDo(PlaybackState.ACTION_SKIP_TO_PREVIOUS), modifier = Modifier.size(56.dp)) {
+ * The player beside the browse list, the queue and the lyrics: no art, which the list needs the
-                Icon(MediaIcons.Previous, "Previous", Modifier.size(32.dp))
+ * room for, just what's playing, the seek bar and the controls.
-            }
+ */
-            FilledIconButton(onClick = media::togglePlay, modifier = Modifier.size(68.dp)) {
+@Composable
-                Icon(if (now.playing) MediaIcons.Pause else Icons.Filled.PlayArrow, if (now.playing) "Pause" else "Play", Modifier.size(40.dp))
+private fun CompactPlayer(now: NowPlaying, media: CarMedia, modifier: Modifier) {
-            }
+    Column(
-            IconButton(onClick = media::next, enabled = now.canDo(PlaybackState.ACTION_SKIP_TO_NEXT), modifier = Modifier.size(56.dp)) {
+        modifier.verticalScroll(rememberScrollState()),
-                Icon(MediaIcons.Next, "Next", Modifier.size(32.dp))
+        verticalArrangement = Arrangement.spacedBy(14.dp),
-            }
+    ) {
-        }
+        Column {
-
+            Text(
-        // Whatever extra buttons the app publishes (shuffle, repeat, like), by name: their
+                now.title.ifEmpty { "Nothing playing" },
-        // icons are resources inside the app's own package.
+                style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold,
-        Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                maxLines = 2, overflow = TextOverflow.Ellipsis,
-            now.custom.take(3).forEach { action ->
+            )
-                TextButton(onClick = { media.custom(action) }) { Text(action.name, maxLines = 1, overflow = TextOverflow.Ellipsis) }
+            Text(
-            }
+                now.artist,
+                style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1, overflow = TextOverflow.Ellipsis,
+            )
         }
+        PlayerProgress(now, media, Modifier.fillMaxWidth())
+        TransportRow(now, media, skip = 52.dp, modifier = Modifier.fillMaxWidth())
+        PlayModeRow(now, media, size = 48.dp, modifier = Modifier.fillMaxWidth())
     }
 }
 
 // --- browsing --------------------------------------------------------------------------------
 
 @Composable
-private fun BrowsePanel(browse: app.seb3thehacker.gearslip.media.BrowseState, media: CarMedia, modifier: Modifier) {
+private fun BrowsePanel(browse: app.seb3thehacker.gearslip.media.BrowseState, media: CarMedia, appLabel: String, modifier: Modifier) {
     Column(modifier) {
-        Row(verticalAlignment = Alignment.CenterVertically) {
+        // At the library root there's no trail and nowhere to go up to, so there's nothing this
-            if (media.canGoUp) {
+        // row could say that the app's name in the top-left corner hasn't already - showing it
-                IconButton(onClick = media::up) { Icon(Icons.Filled.ArrowBack, "Up") }
+        // again here (as "Browse", or as the app's own name) was just the same label twice.
+        if (media.canGoUp || browse.trail.isNotEmpty()) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                if (media.canGoUp) {
+                    GsIconButton(Icons.Filled.ArrowBack, "Up", media::up)
+                }
+                browse.trail.lastOrNull()?.let {
+                    Text(
+                        it,
+                        style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold,
+                        maxLines = 1, overflow = TextOverflow.Ellipsis,
+                    )
+                }
             }
-            Text(
-                browse.trail.lastOrNull() ?: "Browse",
-                style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold,
-                maxLines = 1, overflow = TextOverflow.Ellipsis,
-            )
         }
         when {
             browse.loading -> Notice("Loading…", null)
+            browse.unavailable -> Notice(
+                "$appLabel keeps its library to itself.",
+                "Start music in the app on your phone. Play, pause, skip and seek work from here.",
+            )
             browse.failed -> Notice("Could not load this list.", null)
             browse.entries.isEmpty() -> Notice("Nothing here.", null)
             else -> LazyColumn(Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
@@ -294,20 +605,75 @@ private fun BrowsePanel(browse: app.seb3thehacker.gearslip.media.BrowseState, me
     }
 }
 
+// --- up next -----------------------------------------------------------------------------------
+
+/**
+ * Whatever the app has queued up, starting right after the track that's playing now - not the
+ * whole queue from the top, which would just repeat what the player beside it already shows. Apps
+ * that never publish a queue (many don't) show an empty notice rather than a permanently blank tab.
+ */
 @Composable
-private fun EntryRow(entry: MediaEntry, media: CarMedia) {
+private fun QueuePanel(queue: List<QueueTrack>, now: NowPlaying, media: CarMedia, modifier: Modifier) {
+    val upNext = remember(queue, now.activeQueueItemId) {
+        val current = queue.indexOfFirst { it.queueId == now.activeQueueItemId }
+        if (current >= 0) queue.drop(current + 1) else queue
+    }
+    Column(modifier) {
+        if (upNext.isEmpty()) {
+            Notice(
+                "Nothing queued.",
+                "${if (now.title.isEmpty()) "Nothing playing" else "Only what's already playing"} - " +
+                    "not every app tells Gearslip what comes next.",
+            )
+        } else {
+            LazyColumn(Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                items(upNext, key = { it.queueId }) { track -> QueueRow(track, media) }
+            }
+        }
+    }
+}
+
+@Composable
+private fun QueueRow(track: QueueTrack, media: CarMedia) {
     val context = LocalContext.current
-    val icon by produceState(entry.iconBitmap, entry.iconUri) {
+    val icon by produceState(track.iconBitmap, track.iconUri) {
-        value = entry.iconBitmap ?: MediaArt.load(context, entry.iconUri)
+        value = track.iconBitmap ?: MediaArt.load(context, track.iconUri)
     }
     Surface(
-        onClick = { media.select(entry) },
+        onClick = { media.playQueueItem(track) },
         shape = MaterialTheme.shapes.large,
         color = MaterialTheme.colorScheme.surfaceVariant,
         modifier = Modifier.fillMaxWidth(),
     ) {
         Row(Modifier.padding(10.dp), verticalAlignment = Alignment.CenterVertically) {
-            Box(Modifier.size(52.dp).clip(MaterialTheme.shapes.medium).background(MaterialTheme.colorScheme.surface)) {
+            Box(Modifier.size(62.dp).clip(MaterialTheme.shapes.medium).background(MaterialTheme.colorScheme.surface)) {
+                icon?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
+            }
+            Column(Modifier.weight(1f).padding(horizontal = 12.dp)) {
+                Text(track.title, style = MaterialTheme.typography.titleSmall, maxLines = 1, overflow = TextOverflow.Ellipsis)
+                if (track.subtitle.isNotEmpty()) {
+                    Text(track.subtitle, style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 1, overflow = TextOverflow.Ellipsis)
+                }
+            }
+            Icon(Icons.Filled.PlayArrow, "Play", tint = MaterialTheme.colorScheme.onSurfaceVariant)
+        }
+    }
+}
+
+@Composable
+private fun EntryRow(entry: MediaEntry, media: CarMedia, onClick: () -> Unit = { media.select(entry) }) {
+    val context = LocalContext.current
+    val icon by produceState(entry.iconBitmap, entry.iconUri) {
+        value = entry.iconBitmap ?: MediaArt.load(context, entry.iconUri)
+    }
+    Surface(
+        onClick = onClick,
+        shape = MaterialTheme.shapes.large,
+        color = MaterialTheme.colorScheme.surfaceVariant,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(Modifier.padding(10.dp), verticalAlignment = Alignment.CenterVertically) {
+            Box(Modifier.size(62.dp).clip(MaterialTheme.shapes.medium).background(MaterialTheme.colorScheme.surface)) {
                 icon?.let { Image(it.asImageBitmap(), null, Modifier.fillMaxSize(), contentScale = ContentScale.Crop) }
             }
             Column(Modifier.weight(1f).padding(horizontal = 12.dp)) {
@@ -317,7 +683,7 @@ private fun EntryRow(entry: MediaEntry, media: CarMedia) {
                 }
             }
             if (entry.browsable && entry.playable) {
-                IconButton(onClick = { media.playAll(entry) }) { Icon(Icons.Filled.PlayArrow, "Play") }
+                GsIconButton(Icons.Filled.PlayArrow, "Play", { media.playAll(entry) })
             }
             if (entry.browsable) Icon(Icons.AutoMirrored.Filled.KeyboardArrowRight, null)
         }
@@ -331,8 +697,14 @@ internal object MediaIcons {
     /** The 3x3 app grid; not in material-icons-core. */
     val Apps = icon("Apps", "M4,8h4L8,4L4,4v4zM10,20h4v-4h-4v4zM4,20h4v-4L4,16v4zM4,14h4v-4L4,10v4zM10,14h4v-4h-4v4zM16,4v4h4L20,4h-4zM10,8h4L14,4h-4v4zM16,14h4v-4h-4v4zM16,20h4v-4h-4v4z")
     val Previous = icon("SkipPrevious", "M6,6h2v12L6,18zM9.5,12l8.5,6V6z")
+    val Equalizer = icon("Equalizer", "M10,20h4L14,4h-4v16zM4,20h4v-8L4,12v8zM16,9v11h4L20,9h-4z")
+    val Shuffle = icon("Shuffle", "M10.59,9.17L5.41,4 4,5.41l5.17,5.17 1.42,-1.41zM14.5,4l2.04,2.04L4,18.59 5.41,20 17.96,7.46 20,9.5L20,4h-5.5zM14.83,13.41l-1.41,1.41 3.13,3.13L14.5,20L20,20v-5.5l-2.04,2.04 -3.13,-3.13z")
+    val Repeat = icon("Repeat", "M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4z")
+    val RepeatOne = icon("RepeatOne", "M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4zM13,15L13,9h-1l-2,1v1h1.5v4L13,15z")
+    /** A screen with a filled right-hand panel: "put the player beside the map". */
+    val DockRight = icon("DockRight", "M2,4h20v16H2zM4,6h10v12H4z", PathFillType.EvenOdd)
 
-    private fun icon(name: String, path: String) = ImageVector.Builder(
+    private fun icon(name: String, path: String, fillType: PathFillType = PathFillType.NonZero) = ImageVector.Builder(
         name, 24.dp, 24.dp, 24f, 24f,
-    ).addPath(addPathNodes(path), fill = SolidColor(androidx.compose.ui.graphics.Color.Black)).build()
+    ).addPath(addPathNodes(path), pathFillType = fillType, fill = SolidColor(androidx.compose.ui.graphics.Color.Black)).build()
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/car/MessagePopup.kt

@@ -0,0 +1,274 @@
+package app.seb3thehacker.gearslip.car
+
+import android.os.SystemClock
+import androidx.compose.foundation.background
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.withFrameMillis
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.R
+import app.seb3thehacker.gearslip.car.theme.GsButton
+import app.seb3thehacker.gearslip.car.theme.GsIconButton
+import app.seb3thehacker.gearslip.car.theme.GsProgressBar
+import app.seb3thehacker.gearslip.car.theme.GsTone
+import app.seb3thehacker.gearslip.notify.CarNotification
+import app.seb3thehacker.gearslip.notify.CarNotifications
+import kotlinx.coroutines.delay
+
+/*
+ * A new message on the car screen: a card at the top right, over the player beside the map on
+ * Home, so the road stays in view. It offers two things - hear it, or answer it by voice - and
+ * shows [VoiceReply]'s progress once either starts. A bar along its bottom empties as the card
+ * runs out of time, whatever it's waiting to do: go away, or send.
+ */
+
+/** How long a new message stays up on its own. */
+private const val POPUP_MS = 5_000L
+
+/** When [this] popup goes away on its own. */
+private fun CarNotification.until() = shownAt + POPUP_MS
+
+/**
+ * Times the popup out. Each new message in the same chat starts the clock again. A voice reply
+ * covers the card while it runs; if the popup's time ran out meanwhile, it goes when the reply ends.
+ */
+@Composable
+internal fun PopupTimer() {
+    val popup by CarNotifications.popup.collectAsState()
+    val voice by VoiceReply.state.collectAsState()
+    val n = popup ?: return
+    val busy = voice.phase != VoiceReply.Phase.IDLE
+    LaunchedEffect(n.id, n.shownAt, busy) {
+        if (busy) return@LaunchedEffect
+        delay((n.until() - SystemClock.uptimeMillis()).coerceAtLeast(0L))
+        CarNotifications.dismissPopup(n.id)
+    }
+}
+
+@Composable
+internal fun ReadGlyph(modifier: Modifier = Modifier) =
+    Icon(ImageVector.vectorResource(R.drawable.volume_up_24), null, modifier)
+
+@Composable
+internal fun ReplyGlyph(modifier: Modifier = Modifier) =
+    Icon(ImageVector.vectorResource(R.drawable.voice_selection_24), null, modifier)
+
+/** "Alex", or "Alex · 3 new" when a burst of messages from one chat has been merged. */
+private fun CarNotification.heading(): String {
+    val who = title.ifBlank { appLabel }
+    return if (burst > 1) "$who · $burst new" else who
+}
+
+/** The card. It shows the voice reply too, wherever that was started from. */
+@Composable
+fun NotificationPopup(showNew: Boolean, modifier: Modifier = Modifier) {
+    val popup by CarNotifications.popup.collectAsState()
+    val voice by VoiceReply.state.collectAsState()
+    val target = voice.target
+    if (voice.phase != VoiceReply.Phase.IDLE && target != null) {
+        PopupCard(voice.until, voice.span, modifier, held = voice.held) { VoiceReplyBody(voice, target) }
+        return
+    }
+    val n = popup?.takeIf { showNew } ?: return
+    PopupCard(n.until(), POPUP_MS, modifier) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+            NotificationIcon(n, size = 44.dp)
+            Column(Modifier.weight(1f)) {
+                Text(n.heading(), style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold, maxLines = 1, overflow = TextOverflow.Ellipsis)
+                Text(n.text, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 1, overflow = TextOverflow.Ellipsis)
+            }
+            GsIconButton(Icons.Filled.Close, "Dismiss", { CarNotifications.dismissPopup(n.id) }, size = 40.dp, iconSize = 20.dp)
+        }
+        Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+            GsButton(onClick = { VoiceReply.read(n) }, tone = GsTone.Neutral, modifier = Modifier.weight(1f)) {
+                ReadGlyph(Modifier.size(20.dp))
+                Text("Read", Modifier.padding(start = 8.dp))
+            }
+            if (n.reply != null) {
+                GsButton(onClick = { VoiceReply.reply(n) }, modifier = Modifier.weight(1f)) {
+                    ReplyGlyph(Modifier.size(20.dp))
+                    Text("Reply", Modifier.padding(start = 8.dp))
+                }
+            }
+        }
+    }
+}
+
+/**
+ * The card's frame. When [until] is set, a bar along the bottom empties over [span] ms, so the
+ * driver sees at a glance how long is left before the card acts. A [held] countdown shows its bar
+ * standing still.
+ */
+@Composable
+private fun PopupCard(until: Long, span: Long, modifier: Modifier, held: Float = 0f, content: @Composable () -> Unit) {
+    Surface(
+        shape = RoundedCornerShape(20.dp),
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        contentColor = MaterialTheme.colorScheme.onSurface,
+        shadowElevation = 8.dp,
+        modifier = modifier.padding(12.dp).widthIn(min = 300.dp, max = 400.dp).fillMaxWidth(0.34f),
+    ) {
+        Column(Modifier.padding(14.dp), verticalArrangement = Arrangement.spacedBy(12.dp)) {
+            content()
+            if (until > 0L && span > 0L) {
+                val left by rememberTimeLeft(until, span)
+                GsProgressBar(left, Modifier.fillMaxWidth(), height = 14.dp)
+            } else if (held > 0f) {
+                GsProgressBar(held, Modifier.fillMaxWidth(), height = 14.dp)
+            }
+        }
+    }
+}
+
+/** The share of [span] still to go before [until], updated every frame so the bar moves smoothly. */
+@Composable
+private fun rememberTimeLeft(until: Long, span: Long) = produceState(fractionLeft(until, span), until, span) {
+    // The state outlives a change of deadline, so start from the new one rather than the old value.
+    value = fractionLeft(until, span)
+    while (value > 0f) {
+        withFrameMillis { value = fractionLeft(until, span) }
+    }
+}
+
+private fun fractionLeft(until: Long, span: Long): Float =
+    ((until - SystemClock.uptimeMillis()).toFloat() / span).coerceIn(0f, 1f)
+
+/** Each step of a voice reply, with the buttons that fit it. */
+@Composable
+private fun VoiceReplyBody(s: VoiceReply.State, n: CarNotification) {
+    val navigator = LocalCarNavigator.current
+    val who = n.title.ifBlank { n.appLabel }
+    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+        when (s.phase) {
+            VoiceReply.Phase.OFFERING, VoiceReply.Phase.ASKING, VoiceReply.Phase.LISTENING -> ListeningDot()
+            VoiceReply.Phase.SENT -> Icon(Icons.Filled.Check, null, Modifier.size(32.dp), tint = MaterialTheme.colorScheme.primary)
+            else -> NotificationIcon(n, size = 44.dp)
+        }
+        Column(Modifier.weight(1f)) {
+            Text(voiceHeading(s, who), style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold, maxLines = 1, overflow = TextOverflow.Ellipsis)
+            voiceDetail(s, n)?.let {
+                Text(it, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 3, overflow = TextOverflow.Ellipsis)
+            }
+        }
+    }
+    if (s.phase == VoiceReply.Phase.CONFIRMING) {
+        Text("Say “cancel” or “change it”", style = MaterialTheme.typography.labelLarge, color = MaterialTheme.colorScheme.primary)
+    }
+    if ((s.phase == VoiceReply.Phase.READ || s.phase == VoiceReply.Phase.OFFERING) && n.reply != null) {
+        QuickReplies(n)
+    }
+    Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+        val wide = Modifier.weight(1f)
+        when (s.phase) {
+            VoiceReply.Phase.READING, VoiceReply.Phase.READ -> {
+                GsButton(onClick = VoiceReply::cancel, tone = GsTone.Neutral, modifier = wide) {
+                    Text(if (s.phase == VoiceReply.Phase.READING) "Stop" else "Close")
+                }
+                if (n.reply != null) {
+                    GsButton(onClick = { VoiceReply.reply(n, readFirst = false) }, modifier = wide) {
+                        ReplyGlyph(Modifier.size(20.dp))
+                        Text("Reply", Modifier.padding(start = 8.dp))
+                    }
+                }
+            }
+            VoiceReply.Phase.OFFERING -> {
+                GsButton(onClick = VoiceReply::cancel, tone = GsTone.Neutral, modifier = wide) { Text("No") }
+                GsButton(onClick = { VoiceReply.reply(n, readFirst = false) }, modifier = wide) {
+                    ReplyGlyph(Modifier.size(20.dp))
+                    Text("Reply", Modifier.padding(start = 8.dp))
+                }
+            }
+            VoiceReply.Phase.ASKING, VoiceReply.Phase.LISTENING ->
+                GsButton(onClick = VoiceReply::cancel, tone = GsTone.Neutral, modifier = wide) { Text("Cancel") }
+            VoiceReply.Phase.CONFIRMING -> {
+                GsButton(onClick = VoiceReply::cancel, tone = GsTone.Neutral, modifier = wide) { Text("Cancel") }
+                GsButton(onClick = VoiceReply::sendNow, modifier = wide) { Text("Send now") }
+            }
+            VoiceReply.Phase.ERROR -> {
+                GsButton(onClick = VoiceReply::cancel, tone = GsTone.Neutral, modifier = wide) { Text("Close") }
+                if (n.reply != null) {
+                    GsButton(onClick = { VoiceReply.reply(n, readFirst = false) }, tone = GsTone.Tonal, modifier = wide) { Text("Try again") }
+                    GsButton(
+                        onClick = { VoiceReply.cancel(); navigator.notifications(replyTo = n.key) },
+                        tone = GsTone.Neutral, modifier = wide,
+                    ) { Text("Type") }
+                }
+            }
+            VoiceReply.Phase.SENT, VoiceReply.Phase.IDLE -> Unit
+        }
+    }
+}
+
+private fun voiceHeading(s: VoiceReply.State, who: String): String = when (s.phase) {
+    VoiceReply.Phase.READING, VoiceReply.Phase.READ -> who
+    VoiceReply.Phase.OFFERING, VoiceReply.Phase.ASKING -> "Reply to $who"
+    VoiceReply.Phase.LISTENING -> "Listening"
+    VoiceReply.Phase.CONFIRMING -> "Sending to $who"
+    VoiceReply.Phase.SENT -> "Sent to $who"
+    VoiceReply.Phase.ERROR -> "Couldn't reply"
+    VoiceReply.Phase.IDLE -> ""
+}
+
+private fun voiceDetail(s: VoiceReply.State, n: CarNotification): String? = when (s.phase) {
+    VoiceReply.Phase.READING, VoiceReply.Phase.READ -> n.text
+    VoiceReply.Phase.OFFERING -> s.heard.ifBlank { "Do you want to reply? Say yes or no." }
+    VoiceReply.Phase.ASKING -> "Get ready to say your reply."
+    VoiceReply.Phase.LISTENING -> s.heard.ifBlank { "Say your reply" }
+    VoiceReply.Phase.CONFIRMING, VoiceReply.Phase.SENT -> "“${s.heard}”"
+    VoiceReply.Phase.ERROR -> s.error
+    VoiceReply.Phase.IDLE -> null
+}
+
+/** Ready-made answers, one tap each: sent at once, with no voice. */
+@Composable
+internal fun QuickReplies(n: CarNotification, modifier: Modifier = Modifier) {
+    Row(
+        modifier.fillMaxWidth().horizontalScroll(rememberScrollState()),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        VoiceReply.quickReplies().forEach { text ->
+            GsButton(onClick = { VoiceReply.quickReply(n, text) }, tone = GsTone.Neutral) {
+                Text(text, style = MaterialTheme.typography.labelLarge, maxLines = 1)
+            }
+        }
+    }
+}
+
+@Composable
+private fun ListeningDot(modifier: Modifier = Modifier) {
+    Box(
+        modifier.size(44.dp).clip(CircleShape).background(MaterialTheme.colorScheme.primary),
+        contentAlignment = Alignment.Center,
+    ) {
+        MicGlyph(Modifier.size(24.dp))
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/MessagesScreen.kt

@@ -0,0 +1,198 @@
+package app.seb3thehacker.gearslip.car
+
+import app.seb3thehacker.gearslip.car.theme.*
+import android.content.Intent
+import android.provider.Settings
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.notify.CarNotification
+import app.seb3thehacker.gearslip.notify.CarNotifications
+import app.seb3thehacker.gearslip.notify.ChatLine
+import java.text.DateFormat
+import java.util.Date
+
+/** Lines a collapsed conversation shows; tapping it shows the rest the app sent. */
+private const val COLLAPSED_LINES = 2
+
+/**
+ * A messaging app's recent conversations, the way Android Auto shows them: the app has no car
+ * screen of its own, so each thread comes from the notification it has on the phone, newest
+ * first, with reply and mark-as-read when the app offers them.
+ */
+@Composable
+fun MessagesScreen(packageName: String) {
+    val history by CarNotifications.history.collectAsState()
+    val listening by CarNotifications.listening.collectAsState()
+    val navigator = LocalCarNavigator.current
+    val context = LocalContext.current.applicationContext
+    val entry = remember(packageName) { findEntry(MESSAGING_PREFIX + packageName) }
+    val label = entry?.label ?: history.firstOrNull { it.packageName == packageName }?.appLabel ?: "Messages"
+    val threads = history.filter { it.packageName == packageName }
+
+    LaunchedEffect(history) { CarNotifications.dismissPopupFrom(packageName) }
+
+    Column(Modifier.fillMaxSize().padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+            GsIconButton(Icons.AutoMirrored.Filled.ArrowBack, "Back", navigator::back)
+            entry?.icon?.let { Image(it, contentDescription = null, modifier = Modifier.size(36.dp).clip(RoundedCornerShape(8.dp))) }
+            Text(label, style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold)
+        }
+
+        if (!listening) {
+            AccessBanner {
+                context.startActivity(
+                    Intent(Settings.ACTION_NOTIFICATION_LISTENER_SETTINGS).addFlags(Intent.FLAG_ACTIVITY_NEW_TASK),
+                )
+            }
+        }
+
+        if (threads.isEmpty()) {
+            Text(
+                "No recent messages. New $label messages appear here as they arrive on the phone.",
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        } else {
+            LazyColumn(
+                verticalArrangement = Arrangement.spacedBy(10.dp),
+                contentPadding = PaddingValues(bottom = 16.dp),
+            ) {
+                items(threads, key = { it.key }) { n ->
+                    ConversationCard(
+                        n,
+                        onRead = { VoiceReply.read(n) },
+                        onReply = { VoiceReply.reply(n) },
+                        onMarkRead = { CarNotifications.markThreadRead(context, n) },
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun ConversationCard(n: CarNotification, onRead: () -> Unit, onReply: () -> Unit, onMarkRead: () -> Unit) {
+    var expanded by rememberSaveable(n.key) { mutableStateOf(false) }
+    // An app that posts plain notifications instead of a conversation still gets one line.
+    val lines = n.lines.ifEmpty { listOf(ChatLine(n.title.ifBlank { n.appLabel }, n.text.ifBlank { n.title }, n.postedAt)) }
+    val shown = if (expanded) lines else lines.takeLast(COLLAPSED_LINES)
+    val dim = n.read || n.replied
+    var quick by rememberSaveable(n.key) { mutableStateOf(false) }
+
+    Surface(
+        shape = RoundedCornerShape(16.dp),
+        color = MaterialTheme.colorScheme.surfaceContainer,
+        modifier = Modifier
+            .fillMaxWidth()
+            .animateContentSize()
+            .clickable(enabled = lines.size > COLLAPSED_LINES) { expanded = !expanded },
+    ) {
+        Row(
+            Modifier.padding(14.dp),
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.spacedBy(14.dp),
+        ) {
+            NotificationIcon(n, size = 52.dp)
+            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Text(
+                        n.title.ifBlank { n.appLabel },
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = if (dim) FontWeight.Medium else FontWeight.Bold,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.weight(1f, fill = false),
+                    )
+                    Text(
+                        "  ·  ${DateFormat.getTimeInstance(DateFormat.SHORT).format(Date(n.postedAt))}",
+                        style = MaterialTheme.typography.labelLarge,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        maxLines = 1,
+                    )
+                }
+                if (!expanded && lines.size > COLLAPSED_LINES) {
+                    Text(
+                        "${lines.size - COLLAPSED_LINES} earlier",
+                        style = MaterialTheme.typography.labelMedium,
+                        color = MaterialTheme.colorScheme.primary,
+                    )
+                }
+                shown.forEach { MessageLine(it, showSender = n.isGroup) }
+                if (quick) QuickReplies(n, Modifier.padding(top = 6.dp))
+            }
+            Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                if (n.replied) {
+                    Icon(Icons.Filled.Check, contentDescription = "Replied", tint = MaterialTheme.colorScheme.primary)
+                }
+                GsButton(onClick = onRead, tone = GsTone.Neutral) {
+                    ReadGlyph(Modifier.size(20.dp))
+                    Text("Read", Modifier.padding(start = 8.dp))
+                }
+                if (n.reply != null) {
+                    GsButton(onClick = onReply, tone = GsTone.Tonal) {
+                        ReplyGlyph(Modifier.size(20.dp))
+                        Text("Reply", Modifier.padding(start = 8.dp))
+                    }
+                }
+                if (n.reply != null) {
+                    GsButton(onClick = { quick = !quick }, tone = GsTone.Neutral) {
+                        Text(if (quick) "Hide quick replies" else "Quick reply")
+                    }
+                }
+                if (n.markRead != null) {
+                    GsButton(onClick = onMarkRead, tone = GsTone.Neutral) { Text("Mark read") }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun MessageLine(line: ChatLine, showSender: Boolean) {
+    val who = when {
+        line.sender == null -> "You: "
+        showSender -> "${line.sender}: "
+        else -> ""
+    }
+    Text(
+        who + line.text,
+        style = MaterialTheme.typography.bodyLarge,
+        color = if (line.sender == null) MaterialTheme.colorScheme.onSurfaceVariant else MaterialTheme.colorScheme.onSurface,
+        maxLines = 3,
+        overflow = TextOverflow.Ellipsis,
+    )
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/NavApps.kt

@@ -0,0 +1,299 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.filled.Share
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.car.theme.GsButton
+import app.seb3thehacker.gearslip.car.theme.GsTone
+import app.seb3thehacker.gearslip.host.CarAppConnection
+import app.seb3thehacker.gearslip.media.CarMedia
+import app.seb3thehacker.gearslip.CarFocus
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.vector.PathParser
+
+/** What a built-in app's id carries in a pin, so it can't collide with an installed app's component. */
+internal const val BUILT_IN_PREFIX = "gearslip:"
+
+/** Material's "directions car", drawn here because only the core icon set is bundled. */
+private val CarGlyph: ImageVector = ImageVector.Builder("Car", 24.dp, 24.dp, 24f, 24f).addPath(
+    PathParser().parsePathString(
+        "M18.92,6.01C18.72,5.42 18.16,5 17.5,5h-11c-0.66,0 -1.21,0.42 -1.42,1.01L3,12v8c0,0.55 0.45,1 1,1h1" +
+            "c0.55,0 1,-0.45 1,-1v-1h12v1c0,0.55 0.45,1 1,1h1c0.55,0 1,-0.45 1,-1v-8l-2.08,-5.99z" +
+            "M6.5,16c-0.83,0 -1.5,-0.67 -1.5,-1.5S5.67,13 6.5,13s1.5,0.67 1.5,1.5S7.33,16 6.5,16z" +
+            "M17.5,16c-0.83,0 -1.5,-0.67 -1.5,-1.5s0.67,-1.5 1.5,-1.5 1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z" +
+            "M5,11l1.5,-4.5h11L19,11L5,11z",
+    ).toNodes(),
+    fill = SolidColor(Color.Black),
+).build()
+
+/**
+ * One of Gearslip's own apps: a screen, with nothing running behind it once you leave. [screen] is
+ * null for an action like Exit, which has no screen and so never shows as open.
+ */
+internal class BuiltInApp(
+    val id: String,
+    val label: String,
+    val glyph: ImageVector,
+    val screen: CarScreen?,
+    val open: (CarNavigator) -> Unit,
+)
+
+internal object BuiltInApps {
+    val Web = BuiltInApp("web", "Web", Icons.Filled.Search, CarScreen.App("web")) { it.open("web") }
+    val ScreenSharing = BuiltInApp("phone", "Screen sharing", Icons.Filled.Share, CarScreen.App("phone")) { it.open("phone") }
+    val Phone = BuiltInApp("dialer", "Phone", Icons.Filled.Call, CarScreen.App("dialer")) { it.open("dialer") }
+    val VehicleData = BuiltInApp("vehicle", "Vehicle data", Icons.Filled.Info, CarScreen.VehicleData) { it.vehicleData() }
+    val Settings = BuiltInApp("settings", "Settings", Icons.Filled.Settings, CarScreen.Settings) { it.settings() }
+
+    /** Hands the screen back to the car's own interface, like Android Auto's Exit. */
+    val Exit = BuiltInApp("exit", "Exit", CarGlyph, screen = null) { CarFocus.exitToCar() }
+
+    val all = listOf(Web, ScreenSharing, Phone, VehicleData, Settings, Exit)
+    val entries: List<Entry> = all.map { Entry(it.label, icon = null, builtIn = it) }
+}
+
+/** Vehicle data is experimental: raw, unverified sensor labels (see [CarSensors]). */
+@Composable
+internal fun rememberVehicleDataShown(): Boolean {
+    val experimental by CarSettings.experimentalFeaturesEnabled.collectAsState()
+    val sensors by CarSettings.carSensorsEnabled.collectAsState()
+    return experimental && sensors
+}
+
+/**
+ * Where an open app lives - decides where tapping it goes and how it closes. Gearslip's own
+ * apps have no connection behind them, so [SCREEN] is simply "on screen right now".
+ */
+internal enum class RunningSlot { NAV, BROWSE, MEDIA, SCREEN }
+
+/**
+ * Apps open right now, as component id to where they live, in the order the nav bar shows them:
+ * the map, then a browsed templated app, then the media app, then whichever built-in app is on
+ * screen. The map and a browsed app count from the moment they start connecting until they're
+ * closed. The media app counts while it has something loaded to play - the same rule the nav
+ * bar's player follows, so the two always show up together - or while its own screen is up.
+ */
+@Composable
+internal fun rememberRunningApps(): Map<String, RunningSlot> {
+    val navStatus by CarServices.nav.status.collectAsState()
+    val browseStatus by CarServices.browse.status.collectAsState()
+    val mediaApp by CarServices.mediaApp.collectAsState()
+    val mediaPhase by CarServices.media.phase.collectAsState()
+    val now by CarServices.media.now.collectAsState()
+    val current = LocalCarNavigator.current.current
+
+    fun CarAppConnection.liveId(phase: CarAppConnection.Phase) =
+        connectedComponent?.flattenToString()?.takeIf {
+            phase == CarAppConnection.Phase.BINDING ||
+                phase == CarAppConnection.Phase.HANDSHAKE ||
+                phase == CarAppConnection.Phase.RUNNING
+        }
+
+    return buildMap {
+        CarServices.nav.liveId(navStatus.phase)?.let { put(it, RunningSlot.NAV) }
+        CarServices.browse.liveId(browseStatus.phase)?.let { put(it, RunningSlot.BROWSE) }
+        val mediaLive = when (mediaPhase) {
+            CarMedia.Phase.CONNECTING -> true
+            CarMedia.Phase.READY -> now.isActive || current == CarScreen.Media
+            else -> false
+        }
+        mediaApp?.component?.flattenToString()?.takeIf { mediaLive }?.let { put(it, RunningSlot.MEDIA) }
+        BuiltInApps.all.firstOrNull { it.screen != null && it.screen == current }?.let { put(BUILT_IN_PREFIX + it.id, RunningSlot.SCREEN) }
+        (current as? CarScreen.Messages)?.let { put(MESSAGING_PREFIX + it.packageName, RunningSlot.SCREEN) }
+    }
+}
+
+/** The screen an open app is showing on, so its nav bar icon can stay pressed in while it's up. */
+internal fun RunningSlot.isShowing(current: CarScreen): Boolean = when (this) {
+    RunningSlot.NAV -> current == CarScreen.Home
+    RunningSlot.BROWSE -> current == CarScreen.Browse
+    RunningSlot.MEDIA -> current == CarScreen.Media
+    RunningSlot.SCREEN -> true
+}
+
+/**
+ * Brings an app up: back to its screen if it's already open - never a reconnect, which would
+ * throw away the route or restart the session - otherwise a fresh launch.
+ */
+internal fun openApp(entry: Entry, slot: RunningSlot?, navigator: CarNavigator, frame: CarEnvironment.Frame) {
+    when (slot) {
+        RunningSlot.NAV -> navigator.home()
+        RunningSlot.BROWSE -> navigator.browse(entry.label)
+        RunningSlot.MEDIA -> navigator.media()
+        RunningSlot.SCREEN -> Unit
+        null -> launchEntry(entry, navigator, frame)
+    }
+}
+
+internal fun closeApp(slot: RunningSlot, navigator: CarNavigator) {
+    when (slot) {
+        RunningSlot.NAV -> CarServices.stopNav()
+        RunningSlot.BROWSE -> CarServices.stopBrowse()
+        RunningSlot.MEDIA -> CarServices.closeMedia()
+        RunningSlot.SCREEN -> Unit
+    }
+    if (slot != RunningSlot.NAV && slot.isShowing(navigator.current)) navigator.back()
+}
+
+/**
+ * What a long press on an app offers - pin it to or unpin it from the nav bar, move it along the
+ * launcher, and close it if it's open - as a card in the middle of the screen with car-sized buttons, over a scrim that
+ * dismisses it. Drawn in the car UI's own layout rather than a system popup window, which the
+ * car's virtual display has no reason to host well.
+ */
+@Composable
+internal fun AppMenu(navigator: CarNavigator, running: Map<String, RunningSlot>) {
+    val id = navigator.appMenu ?: return
+    val entry = findEntry(id)
+    if (entry == null) {
+        navigator.dismissAppMenu()
+        return
+    }
+    val pinned by CarSettings.pinnedApps.collectAsState()
+    val isPinned = id in pinned
+    val barFull = !isPinned && pinned.size >= CarSettings.MAX_PINNED
+    val slot = running[id]
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = 0.5f))
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null,
+                onClick = navigator::dismissAppMenu,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Surface(
+            shape = RoundedCornerShape(24.dp),
+            color = MaterialTheme.colorScheme.surfaceContainerHigh,
+            // Swallows taps on the card itself, so only the scrim around it dismisses.
+            modifier = Modifier
+                .widthIn(max = 420.dp)
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null,
+                    onClick = {},
+                ),
+        ) {
+            Column(Modifier.padding(20.dp), verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    entry.icon?.let { Image(it, null, Modifier.size(44.dp).clip(RoundedCornerShape(10.dp))) }
+                    entry.builtIn?.let { Icon(it.glyph, null, Modifier.size(36.dp)) }
+                    Text(
+                        entry.label,
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.SemiBold,
+                        modifier = Modifier.padding(start = 14.dp),
+                    )
+                }
+                GsButton(
+                    onClick = {
+                        CarSettings.togglePin(id)
+                        navigator.dismissAppMenu()
+                    },
+                    tone = GsTone.Tonal,
+                    enabled = !barFull,
+                    modifier = Modifier.fillMaxWidth().height(56.dp),
+                ) {
+                    Text(
+                        when {
+                            isPinned -> "Unpin from nav bar"
+                            barFull -> "Nav bar is full (${CarSettings.MAX_PINNED} pinned)"
+                            else -> "Pin to nav bar"
+                        },
+                        style = MaterialTheme.typography.titleMedium,
+                    )
+                }
+                if (navigator.current == CarScreen.Apps) MoveButtons(id)
+                if (slot != null) {
+                    GsButton(
+                        onClick = {
+                            closeApp(slot, navigator)
+                            navigator.dismissAppMenu()
+                        },
+                        tone = GsTone.Danger,
+                        modifier = Modifier.fillMaxWidth().height(56.dp),
+                    ) { Text("Close app", style = MaterialTheme.typography.titleMedium) }
+                }
+                GsButton(
+                    onClick = navigator::dismissAppMenu,
+                    tone = GsTone.Neutral,
+                    modifier = Modifier.fillMaxWidth().height(56.dp),
+                ) { Text("Cancel", style = MaterialTheme.typography.titleMedium) }
+            }
+        }
+    }
+}
+
+/**
+ * Moves the app one place left or right on the launcher. The menu stays open so a tile can be
+ * walked several places, and the grid behind the scrim shows where it went.
+ */
+@Composable
+private fun MoveButtons(id: String) {
+    val custom by CarSettings.appOrder.collectAsState()
+    val order = launcherOrder(rememberAllEntries(), rememberVehicleDataShown(), custom).mapNotNull { it.componentId }
+    val index = order.indexOf(id)
+    if (index < 0) return
+    fun move(by: Int) {
+        val next = order.toMutableList()
+        java.util.Collections.swap(next, index, index + by)
+        CarSettings.setAppOrder(next)
+    }
+    Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+        GsButton(
+            onClick = { move(-1) },
+            tone = GsTone.Tonal,
+            enabled = index > 0,
+            modifier = Modifier.weight(1f).height(56.dp),
+        ) { Text("Move left", style = MaterialTheme.typography.titleMedium) }
+        GsButton(
+            onClick = { move(1) },
+            tone = GsTone.Tonal,
+            enabled = index < order.lastIndex,
+            modifier = Modifier.weight(1f).height(56.dp),
+        ) { Text("Move right", style = MaterialTheme.typography.titleMedium) }
+    }
+    if (custom.isNotEmpty()) {
+        GsButton(
+            onClick = { CarSettings.setAppOrder(emptyList()) },
+            tone = GsTone.Neutral,
+            modifier = Modifier.fillMaxWidth().height(56.dp),
+        ) { Text("Reset app order", style = MaterialTheme.typography.titleMedium) }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/NotificationsScreen.kt

@@ -1,9 +1,9 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
 import android.content.Intent
 import android.provider.Settings
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -13,8 +13,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -23,10 +21,7 @@ import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Notifications
 import androidx.compose.material.icons.filled.Warning
-import androidx.compose.material3.Button
-import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -35,6 +30,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -52,34 +48,40 @@ import kotlinx.coroutines.delay
 import java.text.DateFormat
 import java.util.Date
 
-/** The notification history, with a reply pane for anything the sending app lets us answer. */
+/**
+ * Replying to one notification. The list itself lives on the dashboard (see
+ * [NotificationsSection]); with nothing to reply to, this is just the dashboard.
+ */
 @Composable
 fun NotificationsScreen(replyTo: String?) {
     val history by CarNotifications.history.collectAsState()
-    var replying by remember(replyTo) { mutableStateOf(replyTo) }
+    val navigator = LocalCarNavigator.current
-
+    val target = history.firstOrNull { it.key == replyTo && it.reply != null }
-    // Anything arriving while this is open is being looked at, so it never counts as unread.
-    LaunchedEffect(history) { CarNotifications.markRead() }
-
-    val target = history.firstOrNull { it.key == replying && it.reply != null }
     if (target != null) {
-        ReplyPane(target, onDone = { replying = null })
+        ReplyPane(target, onDone = navigator::back)
     } else {
-        NotificationList(history, onReply = { replying = it.key })
+        CarDashboardScreen()
     }
 }
 
+/**
+ * The notification history, under the calendar on the dashboard. Replying opens its own pane.
+ * Anything arriving while this is on screen is being looked at, so it never counts as unread.
+ */
 @Composable
-private fun NotificationList(history: List<CarNotification>, onReply: (CarNotification) -> Unit) {
+fun NotificationsSection() {
+    val history by CarNotifications.history.collectAsState()
     val listening by CarNotifications.listening.collectAsState()
+    val navigator = LocalCarNavigator.current
     val context = LocalContext.current.applicationContext
+    LaunchedEffect(history) { CarNotifications.markRead() }
 
-    Column(Modifier.fillMaxSize().padding(horizontal = 20.dp, vertical = 12.dp)) {
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
         Row(verticalAlignment = Alignment.CenterVertically) {
             Text(
                 "Notifications",
-                style = MaterialTheme.typography.headlineMedium,
+                style = MaterialTheme.typography.titleMedium,
-                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colorScheme.primary,
                 modifier = Modifier.weight(1f),
             )
             if (history.isNotEmpty()) TextButton(onClick = CarNotifications::clear) { Text("Clear all") }
@@ -94,22 +96,21 @@ private fun NotificationList(history: List<CarNotification>, onReply: (CarNotifi
         }
 
         if (history.isEmpty()) {
-            Box(Modifier.weight(1f).fillMaxWidth(), contentAlignment = Alignment.Center) {
+            Text(
-                Text(
+                "Nothing yet. New notifications from the phone will show up here.",
-                    "Nothing yet. New notifications from the phone will show up here.",
+                style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
+            )
-            }
         } else {
-            LazyColumn(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            history.forEach { n ->
-                items(history, key = { it.key }) { NotificationRow(it, onReply) }
+                key(n.key) { NotificationRow(n) { navigator.notifications(replyTo = it.key) } }
             }
         }
     }
 }
 
 @Composable
-private fun AccessBanner(onOpen: () -> Unit) {
+internal fun AccessBanner(onOpen: () -> Unit) {
     Surface(
         shape = MaterialTheme.shapes.large,
         color = MaterialTheme.colorScheme.errorContainer,
@@ -127,7 +128,7 @@ private fun AccessBanner(onOpen: () -> Unit) {
                 style = MaterialTheme.typography.bodyMedium,
                 modifier = Modifier.weight(1f),
             )
-            Button(onClick = onOpen) { Text("Open") }
+            GsButton(onClick = onOpen) { Text("Open") }
         }
     }
 }
@@ -160,14 +161,17 @@ private fun NotificationRow(n: CarNotification, onReply: (CarNotification) -> Un
             }
             when {
                 n.replied -> Icon(Icons.Filled.Check, contentDescription = "Replied", tint = MaterialTheme.colorScheme.primary)
-                n.reply != null -> FilledTonalButton(onClick = { onReply(n) }) { Text("Reply") }
+                n.reply != null -> GsButton(onClick = { VoiceReply.reply(n) }, tone = GsTone.Tonal) {
+                    ReplyGlyph(Modifier.size(20.dp))
+                    Text("Reply", Modifier.padding(start = 8.dp))
+                }
             }
         }
     }
 }
 
 @Composable
-private fun NotificationIcon(n: CarNotification, size: androidx.compose.ui.unit.Dp = 44.dp) {
+internal fun NotificationIcon(n: CarNotification, size: androidx.compose.ui.unit.Dp = 44.dp) {
     val icon = n.icon
     if (icon != null) {
         Image(icon.asImageBitmap(), contentDescription = null, modifier = Modifier.size(size).clip(RoundedCornerShape(10.dp)))
@@ -194,7 +198,7 @@ private fun ReplyPane(n: CarNotification, onDone: () -> Unit) {
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
-            IconButton(onClick = onDone) { Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back") }
+            GsIconButton(Icons.AutoMirrored.Filled.ArrowBack, "Back", onDone)
             Surface(
                 shape = RoundedCornerShape(24.dp),
                 color = MaterialTheme.colorScheme.surfaceContainerHighest,
@@ -220,58 +224,9 @@ private fun ReplyPane(n: CarNotification, onDone: () -> Unit) {
             Text(n.text.ifBlank { n.title }, style = MaterialTheme.typography.bodyLarge, maxLines = 3, overflow = TextOverflow.Ellipsis)
         }
 
-        CarKeyboard(text, onTextChange = { text = it }, onSubmit = ::send, submitImage = Icons.AutoMirrored.Filled.Send)
+        CarKeyboard(
+            text, onTextChange = { text = it }, onSubmit = ::send,
+            submitImage = Icons.AutoMirrored.Filled.Send, onDismiss = onDone,
+        )
     }
 }
-
-/**
- * The popup shown over whatever the car is displaying. It times itself out, and tapping it opens
- * the history - or straight into a reply, when the app allows one.
- */
-@Composable
-fun NotificationPopup(modifier: Modifier = Modifier) {
-    val popup by CarNotifications.popup.collectAsState()
-    val navigator = LocalCarNavigator.current
-    val n = popup ?: return
-
-    LaunchedEffect(n.id) {
-        delay(POPUP_MS)
-        CarNotifications.dismissPopup(n.id)
-    }
-
-    Surface(
-        shape = RoundedCornerShape(20.dp),
-        color = MaterialTheme.colorScheme.surfaceContainerHigh,
-        contentColor = MaterialTheme.colorScheme.onSurface,
-        shadowElevation = 8.dp,
-        modifier = modifier
-            .padding(top = 8.dp)
-            .fillMaxWidth(0.7f)
-            .clickable { navigator.notifications() },
-    ) {
-        Row(
-            Modifier.padding(12.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(12.dp),
-        ) {
-            NotificationIcon(n)
-            Column(Modifier.weight(1f)) {
-                Text(n.appLabel, style = MaterialTheme.typography.labelMedium, maxLines = 1)
-                if (n.title.isNotBlank()) {
-                    Text(n.title, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold, maxLines = 1, overflow = TextOverflow.Ellipsis)
-                }
-                if (n.text.isNotBlank()) {
-                    Text(n.text, style = MaterialTheme.typography.bodyMedium, maxLines = 2, overflow = TextOverflow.Ellipsis)
-                }
-            }
-            if (n.reply != null) {
-                FilledTonalButton(onClick = { navigator.notifications(replyTo = n.key) }) { Text("Reply") }
-            }
-            IconButton(onClick = { CarNotifications.dismissPopup(n.id) }) {
-                Icon(Icons.Filled.Close, contentDescription = "Dismiss")
-            }
-        }
-    }
-}
-
-private const val POPUP_MS = 8_000L

gearslip/src/main/java/app/seb3thehacker/gearslip/car/PhoneAppsScreen.kt

@@ -1,5 +1,6 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -14,7 +15,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.material3.Button
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -48,11 +48,13 @@ import kotlinx.coroutines.withContext
 @Composable
 fun PhoneAppsScreen() {
     val context = LocalContext.current
-    val apps by produceState(initialValue = emptyList<PhoneApp>(), context) {
+    val apps by produceState(initialValue = PhoneApps.cached() ?: emptyList(), context) {
-        value = withContext(Dispatchers.IO) { PhoneApps.installed(context) }
+        value = PhoneApps.cached() ?: withContext(Dispatchers.IO) { PhoneApps.installed(context).also { PhoneApps.warm(context) } }
     }
 
     Column(Modifier.fillMaxSize().padding(horizontal = 20.dp, vertical = 12.dp)) {
+        ScreenHeader("Screen sharing")
+        Spacer(Modifier.height(12.dp))
         if (!TouchRelayService.enabled) {
             TouchRelayWarning()
             Spacer(Modifier.height(12.dp))
@@ -96,19 +98,18 @@ private fun TouchRelayWarning() {
                 style = MaterialTheme.typography.bodyMedium,
                 modifier = Modifier.weight(1f),
             )
-            Button(onClick = { PhoneApps.openAccessibilitySettings(context) }) { Text("Open") }
+            GsButton(onClick = { PhoneApps.openAccessibilitySettings(context) }) { Text("Open") }
         }
     }
 }
 
 @Composable
 private fun PhoneAppTile(app: PhoneApp, onClick: () -> Unit) {
-    Surface(
+    GsIconBox(
         onClick = onClick,
         modifier = Modifier.height(120.dp),
+        colors = GsColors(MaterialTheme.colorScheme.surfaceVariant, MaterialTheme.colorScheme.onSurfaceVariant),
         shape = MaterialTheme.shapes.extraLarge,
-        color = MaterialTheme.colorScheme.surfaceVariant,
-        contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
     ) {
         Column(
             Modifier.fillMaxSize().padding(8.dp),

gearslip/src/main/java/app/seb3thehacker/gearslip/car/PhoneDialerScreen.kt

@@ -0,0 +1,371 @@
+package app.seb3thehacker.gearslip.car
+
+import app.seb3thehacker.gearslip.car.theme.*
+import android.Manifest
+import android.content.Context
+import android.content.Intent
+import android.content.pm.PackageManager
+import android.net.Uri
+import android.provider.ContactsContract
+import android.provider.Settings
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+
+/** A phone contact with at least one number, as read off the device's contacts. */
+internal data class Contact(val name: String, val number: String)
+
+private val CALL_PERMISSIONS = arrayOf(Manifest.permission.CALL_PHONE, Manifest.permission.READ_CONTACTS)
+
+/** Also used by [AssistantCommands] for "call <name>". */
+internal fun hasCallPermissions(context: Context): Boolean =
+    CALL_PERMISSIONS.all { context.checkSelfPermission(it) == PackageManager.PERMISSION_GRANTED }
+
+internal fun loadContacts(context: Context): List<Contact> {
+    if (context.checkSelfPermission(Manifest.permission.READ_CONTACTS) != PackageManager.PERMISSION_GRANTED) return emptyList()
+    val out = mutableListOf<Contact>()
+    val projection = arrayOf(
+        ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME,
+        ContactsContract.CommonDataKinds.Phone.NUMBER,
+    )
+    context.contentResolver.query(
+        ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
+        projection, null, null,
+        "${ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME} ASC",
+    )?.use { cursor ->
+        val nameIndex = cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)
+        val numberIndex = cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)
+        while (cursor.moveToNext()) {
+            val name = cursor.getString(nameIndex) ?: continue
+            val number = cursor.getString(numberIndex) ?: continue
+            out += Contact(name, number)
+        }
+    }
+    return out.distinctBy { it.number }
+}
+
+internal fun placeCall(context: Context, number: String) {
+    if (number.isBlank()) return
+    if (context.checkSelfPermission(Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) return
+    runCatching {
+        context.startActivity(
+            Intent(Intent.ACTION_CALL, Uri.parse("tel:${Uri.encode(number)}")).addFlags(Intent.FLAG_ACTIVITY_NEW_TASK),
+        )
+    }
+}
+
+private const val TAB_CONTACTS = 0
+private const val TAB_KEYPAD = 1
+
+/** Dialing a number or calling a contact from the car screen: a contacts tab and a keypad tab. */
+@Composable
+fun PhoneDialerScreen() {
+    val context = LocalContext.current
+    val hasPermissions = hasCallPermissions(context)
+    var tab by remember { mutableStateOf(TAB_CONTACTS) }
+
+    Column(Modifier.fillMaxSize().padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        // The tabs share the title's row, so the list and keypad get the height back.
+        ScreenHeader("Phone") {
+            if (hasPermissions) {
+                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                    DialerTab("Contacts", tab == TAB_CONTACTS, Modifier.width(140.dp)) { tab = TAB_CONTACTS }
+                    DialerTab("Keypad", tab == TAB_KEYPAD, Modifier.width(140.dp)) { tab = TAB_KEYPAD }
+                }
+            }
+        }
+
+        if (!hasPermissions) {
+            MissingPermission(context)
+            return@Column
+        }
+
+        Box(Modifier.weight(1f).fillMaxWidth()) {
+            if (tab == TAB_CONTACTS) ContactsList(context) else Keypad(context)
+        }
+    }
+}
+
+@Composable
+private fun MissingPermission(context: Context) {
+    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+        Text(
+            "Gearslip needs the Phone and Contacts permissions to dial from here. Grant them " +
+                "from the app's settings.",
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+        GsButton(tone = GsTone.Tonal, onClick = {
+            context.startActivity(
+                Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS, Uri.fromParts("package", context.packageName, null)),
+            )
+        }) { Text("Open app settings") }
+    }
+}
+
+@Composable
+private fun DialerTab(label: String, selected: Boolean, modifier: Modifier, onClick: () -> Unit) {
+    GsIconBox(
+        onClick = onClick,
+        modifier = modifier.height(44.dp),
+        colors = if (selected) GsColors(MaterialTheme.colorScheme.primaryContainer, MaterialTheme.colorScheme.onPrimaryContainer)
+        else GsColors(MaterialTheme.colorScheme.surfaceContainerHigh, MaterialTheme.colorScheme.onSurface),
+        shape = MaterialTheme.shapes.large,
+        latched = selected,
+    ) {
+        Text(label, style = MaterialTheme.typography.titleMedium, fontWeight = if (selected) FontWeight.Bold else FontWeight.Normal)
+    }
+}
+
+/**
+ * A 3-column digit grid beside a fourth column holding backspace and call, stacked - four equal
+ * columns in all. Every row and both side buttons take an equal weighted share of whatever height
+ * is available, so this fits the car's short landscape frame without scrolling instead of
+ * overflowing off the bottom the way fixed-height rows did.
+ */
+@Composable
+private fun Keypad(context: Context) {
+    var number by remember { mutableStateOf("") }
+    val rows = listOf(
+        listOf("1", "2", "3"),
+        listOf("4", "5", "6"),
+        listOf("7", "8", "9"),
+        listOf("*", "0", "#"),
+    )
+
+    Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
+        Text(
+            number.ifEmpty { "Enter a number" },
+            style = MaterialTheme.typography.headlineSmall,
+            color = if (number.isEmpty()) MaterialTheme.colorScheme.onSurfaceVariant else MaterialTheme.colorScheme.onSurface,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.padding(vertical = 6.dp),
+        )
+        Row(Modifier.weight(1f).fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            Column(Modifier.weight(3f).fillMaxHeight(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                rows.forEach { row ->
+                    Row(Modifier.weight(1f).fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                        row.forEach { digit ->
+                            KeypadButton(digit, Modifier.weight(1f).fillMaxHeight()) { number += digit }
+                        }
+                    }
+                }
+            }
+            Column(Modifier.weight(1f).fillMaxHeight(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                GsButton(
+                    onClick = { if (number.isNotEmpty()) number = number.dropLast(1) },
+                    tone = GsTone.Tonal,
+                    enabled = number.isNotEmpty(),
+                    modifier = Modifier.weight(1f).fillMaxWidth(),
+                ) { Text("⌫", style = MaterialTheme.typography.titleLarge) }
+                GsIconBox(
+                    onClick = { placeCall(context, number) },
+                    colors = gsColors(GsTone.Primary),
+                    enabled = number.isNotEmpty(),
+                    modifier = Modifier.weight(1f).fillMaxWidth(),
+                ) { Icon(Icons.Filled.Call, "Call") }
+            }
+        }
+    }
+}
+
+@Composable
+private fun KeypadButton(digit: String, modifier: Modifier, onClick: () -> Unit) {
+    GsIconBox(
+        onClick,
+        modifier,
+        colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHigh, MaterialTheme.colorScheme.onSurface),
+        shape = MaterialTheme.shapes.large,
+    ) {
+        Text(digit, style = MaterialTheme.typography.titleLarge)
+    }
+}
+
+@Composable
+private fun ContactsList(context: Context) {
+    val contacts by produceState(emptyList<Contact>(), context) {
+        value = withContext(Dispatchers.IO) { loadContacts(context) }
+    }
+    var query by remember { mutableStateOf("") }
+    var searching by remember { mutableStateOf(false) }
+    var pendingCall by remember { mutableStateOf<Contact?>(null) }
+
+    val filtered = remember(contacts, query) {
+        if (query.isBlank()) contacts
+        else contacts.filter { it.name.contains(query, ignoreCase = true) || it.number.contains(query) }
+    }
+
+    Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        if (contacts.isNotEmpty()) {
+            ContactSearchField(query, searching, onToggle = { searching = !searching })
+        }
+        // The list (and its empty states) sit between the search field and the keyboard, never
+        // under either - the keyboard is docked at the bottom instead of jammed in right below
+        // the field, so results stay visible while typing rather than getting squeezed out.
+        Box(Modifier.weight(1f).fillMaxWidth()) {
+            when {
+                contacts.isEmpty() -> Text(
+                    "No contacts with a phone number found.",
+                    style = MaterialTheme.typography.bodyLarge,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+                filtered.isEmpty() -> Text(
+                    "No contacts match \"$query\".",
+                    style = MaterialTheme.typography.bodyLarge,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+                else -> LazyColumn(Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                    items(filtered) { contact ->
+                        ContactRow(contact) { pendingCall = contact }
+                    }
+                }
+            }
+        }
+        if (searching) {
+            CarKeyboard(
+                query,
+                onTextChange = { query = it },
+                onSubmit = { searching = false },
+                onDismiss = { searching = false },
+            )
+        }
+    }
+
+    pendingCall?.let { contact ->
+        ConfirmCallOverlay(
+            contact = contact,
+            onConfirm = { placeCall(context, contact.number); pendingCall = null },
+            onDismiss = { pendingCall = null },
+        )
+    }
+}
+
+/**
+ * A plain Compose overlay, not [androidx.compose.material3.AlertDialog] - that opens a real
+ * Android Dialog/window, and this UI lives in a Presentation on a virtual display where a second
+ * window of the wrong type crashes outright ("Window type mismatch"). Every other popup in the
+ * car UI is drawn in-composition for the same reason; this just follows suit.
+ */
+@Composable
+private fun ConfirmCallOverlay(contact: Contact, onConfirm: () -> Unit, onDismiss: () -> Unit) {
+    Box(
+        Modifier.fillMaxSize().background(Color.Black.copy(alpha = 0.6f)).clickable(
+            indication = null,
+            interactionSource = remember { MutableInteractionSource() },
+            onClick = onDismiss,
+        ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Surface(
+            onClick = {},
+            shape = MaterialTheme.shapes.extraLarge,
+            color = MaterialTheme.colorScheme.surfaceContainerHigh,
+            modifier = Modifier.fillMaxWidth(0.85f).padding(16.dp),
+        ) {
+            Column(
+                Modifier.padding(32.dp),
+                verticalArrangement = Arrangement.spacedBy(20.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Text("Call ${contact.name}?", style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold)
+                Text(contact.number, style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+                    GsButton(onClick = onDismiss, tone = GsTone.Outline, modifier = Modifier.weight(1f).height(56.dp)) {
+                        Text("Cancel", style = MaterialTheme.typography.titleMedium)
+                    }
+                    GsButton(onClick = onConfirm, modifier = Modifier.weight(1f).height(56.dp)) {
+                        Text("Call", style = MaterialTheme.typography.titleMedium)
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun ContactSearchField(query: String, active: Boolean, onToggle: () -> Unit) {
+    Surface(
+        onClick = onToggle,
+        shape = MaterialTheme.shapes.large,
+        color = if (active) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceContainerHigh,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Text(
+            query.ifEmpty { "Search contacts" },
+            style = MaterialTheme.typography.bodyLarge,
+            color = if (query.isEmpty()) MaterialTheme.colorScheme.onSurfaceVariant else MaterialTheme.colorScheme.onSurface,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 14.dp),
+        )
+    }
+}
+
+@Composable
+private fun ContactRow(contact: Contact, onClick: () -> Unit) {
+    Surface(
+        onClick = onClick,
+        shape = MaterialTheme.shapes.large,
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(
+            Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            Box(
+                Modifier.size(40.dp).background(MaterialTheme.colorScheme.primaryContainer, CircleShape),
+                contentAlignment = Alignment.Center,
+            ) {
+                Text(
+                    contact.name.take(1).uppercase(),
+                    style = MaterialTheme.typography.titleMedium,
+                    color = MaterialTheme.colorScheme.onPrimaryContainer,
+                    fontWeight = FontWeight.Bold,
+                )
+            }
+            Column(Modifier.weight(1f)) {
+                Text(contact.name, style = MaterialTheme.typography.titleMedium, maxLines = 1, overflow = TextOverflow.Ellipsis)
+                Text(contact.number, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+            }
+            Icon(Icons.Filled.Call, contentDescription = "Call", tint = MaterialTheme.colorScheme.primary)
+        }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/PhoneTyping.kt

@@ -0,0 +1,60 @@
+package app.seb3thehacker.gearslip.car
+
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+/**
+ * The text field the car keyboard is typing into, shared with the phone so a passenger can type
+ * on the phone's own keyboard instead. Whichever [CarKeyboard] is on screen registers here; the
+ * phone app shows the same text while one is open, and its edits go back through the car field's
+ * own callbacks, so the car screen can't tell which keyboard typed.
+ */
+object PhoneTyping {
+
+    class Field internal constructor(
+        val id: Int,
+        val text: String,
+        internal val onTextChange: (String) -> Unit,
+        internal val onSubmit: () -> Unit,
+        internal val onDismiss: (() -> Unit)?,
+    )
+
+    private val fieldFlow = MutableStateFlow<Field?>(null)
+
+    /** The car's open field, or null when no car keyboard is showing. */
+    val field: StateFlow<Field?> = fieldFlow.asStateFlow()
+
+    private var nextId = 0
+
+    internal fun open(text: String, onTextChange: (String) -> Unit, onSubmit: () -> Unit, onDismiss: (() -> Unit)?): Int {
+        val id = ++nextId
+        fieldFlow.value = Field(id, text, onTextChange, onSubmit, onDismiss)
+        return id
+    }
+
+    /** The car field's text changed, from either keyboard. */
+    internal fun carText(id: Int, text: String) {
+        val f = fieldFlow.value ?: return
+        if (f.id == id && f.text != text) fieldFlow.value = Field(id, text, f.onTextChange, f.onSubmit, f.onDismiss)
+    }
+
+    internal fun close(id: Int) {
+        if (fieldFlow.value?.id == id) fieldFlow.value = null
+    }
+
+    /** From the phone: typed text goes to the car field as if typed there. */
+    fun type(text: String) {
+        fieldFlow.value?.onTextChange?.invoke(text)
+    }
+
+    fun submit() {
+        fieldFlow.value?.onSubmit?.invoke()
+    }
+
+    /** Closes the car keyboard where it can be closed; elsewhere only the phone's field goes. */
+    fun dismiss() {
+        val f = fieldFlow.value ?: return
+        f.onDismiss?.invoke() ?: close(f.id)
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/PlayerParts.kt

@@ -0,0 +1,236 @@
+package app.seb3thehacker.gearslip.car
+
+import android.media.session.PlaybackState
+import android.support.v4.media.session.PlaybackStateCompat
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.FavoriteBorder
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.tween
+import app.seb3thehacker.gearslip.media.ArtColor
+import app.seb3thehacker.gearslip.media.MediaArt
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.core.graphics.drawable.toBitmap
+import app.seb3thehacker.gearslip.car.theme.GsIconBox
+import app.seb3thehacker.gearslip.car.theme.GsIconButton
+import app.seb3thehacker.gearslip.car.theme.GsSeekBar
+import app.seb3thehacker.gearslip.car.theme.GsTone
+import app.seb3thehacker.gearslip.car.theme.gsColors
+import app.seb3thehacker.gearslip.media.CarMedia
+import app.seb3thehacker.gearslip.media.CustomAction
+import app.seb3thehacker.gearslip.media.NowPlaying
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.withContext
+
+/*
+ * The pieces every player on the car screen is built from - the media screen, the column beside
+ * the map - so a button looks and behaves the same wherever it turns up.
+ */
+
+/** The seek bar, with elapsed and total time under it when [showTimes]. */
+@Composable
+internal fun PlayerProgress(now: NowPlaying, media: CarMedia, modifier: Modifier = Modifier, showTimes: Boolean = true) {
+    if (now.durationMs <= 0) return
+    var position by remember { mutableLongStateOf(now.currentPosition()) }
+    LaunchedEffect(now) {
+        while (true) {
+            position = now.currentPosition()
+            if (!now.playing) break
+            delay(500)
+        }
+    }
+    Column(modifier) {
+        GsSeekBar(
+            fraction = position.toFloat() / now.durationMs,
+            onSeek = { media.seek((it * now.durationMs).toLong()) },
+            enabled = now.canDo(PlaybackState.ACTION_SEEK_TO),
+            modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp),
+        )
+        if (showTimes) {
+            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+                Text(formatDuration(position), style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                Text(formatDuration(now.durationMs), style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+            }
+        }
+    }
+}
+
+/** "1:05" for under a minute past the hour, "1:01:05" once an hour is involved. */
+internal fun formatDuration(ms: Long): String {
+    val totalSeconds = (ms / 1000).coerceAtLeast(0)
+    val hours = totalSeconds / 3600
+    val minutes = (totalSeconds % 3600) / 60
+    val seconds = totalSeconds % 60
+    return if (hours > 0) "%d:%02d:%02d".format(hours, minutes, seconds) else "%d:%02d".format(minutes, seconds)
+}
+
+/** Previous, play/pause, next. [skip] sizes the outer two; play is a step bigger. */
+@Composable
+internal fun TransportRow(now: NowPlaying, media: CarMedia, skip: Dp, modifier: Modifier = Modifier) {
+    val play = skip * 1.25f
+    Row(modifier, horizontalArrangement = Arrangement.SpaceEvenly, verticalAlignment = Alignment.CenterVertically) {
+        GsIconButton(
+            MediaIcons.Previous, "Previous", media::previous,
+            enabled = now.canDo(PlaybackState.ACTION_SKIP_TO_PREVIOUS), size = skip, iconSize = skip * 0.58f, shape = CircleShape,
+        )
+        GsIconButton(
+            if (now.playing) MediaIcons.Pause else Icons.Filled.PlayArrow,
+            if (now.playing) "Pause" else "Play",
+            media::togglePlay,
+            tone = GsTone.Primary, size = play, iconSize = play * 0.58f, shape = CircleShape,
+        )
+        GsIconButton(
+            MediaIcons.Next, "Next", media::next,
+            enabled = now.canDo(PlaybackState.ACTION_SKIP_TO_NEXT), size = skip, iconSize = skip * 0.58f, shape = CircleShape,
+        )
+    }
+}
+
+/**
+ * Like, shuffle and repeat, then up to [maxOther] of the app's other buttons, all icon-only. One
+ * the app doesn't support stays on screen greyed out, so the row never shifts between apps.
+ * [trailing] adds buttons of the caller's own at the end (the side column's lyrics button).
+ */
+@Composable
+internal fun PlayModeRow(
+    now: NowPlaying,
+    media: CarMedia,
+    size: Dp,
+    modifier: Modifier = Modifier,
+    maxOther: Int = 0,
+    trailing: @Composable RowScope.() -> Unit = {},
+) {
+    val modes by media.modes.collectAsState()
+    val liked = now.liked
+    val shuffleKnown = modes.shuffle != PlaybackStateCompat.SHUFFLE_MODE_INVALID
+    val repeatKnown = modes.repeat != PlaybackStateCompat.REPEAT_MODE_INVALID
+    val shuffleOn = shuffleKnown && modes.shuffle != PlaybackStateCompat.SHUFFLE_MODE_NONE
+    val repeatOn = repeatKnown && modes.repeat != PlaybackStateCompat.REPEAT_MODE_NONE
+    val icon = size * 0.52f
+    Row(modifier, horizontalArrangement = Arrangement.SpaceEvenly, verticalAlignment = Alignment.CenterVertically) {
+        GsIconButton(
+            if (liked == true) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder,
+            if (liked == true) "Unlike" else "Like",
+            media::toggleLike,
+            enabled = liked != null,
+            tone = if (liked == true) GsTone.Primary else GsTone.Neutral,
+            size = size, iconSize = icon,
+        )
+        GsIconButton(
+            MediaIcons.Shuffle, if (shuffleOn) "Shuffle off" else "Shuffle on",
+            media::toggleShuffle,
+            enabled = shuffleKnown || now.shuffleAction != null,
+            tone = if (shuffleOn) GsTone.Primary else GsTone.Neutral,
+            size = size, iconSize = icon,
+        )
+        GsIconButton(
+            if (modes.repeat == PlaybackStateCompat.REPEAT_MODE_ONE) MediaIcons.RepeatOne else MediaIcons.Repeat,
+            "Repeat",
+            media::cycleRepeat,
+            enabled = repeatKnown || now.repeatAction != null,
+            tone = if (repeatOn) GsTone.Primary else GsTone.Neutral,
+            size = size, iconSize = icon,
+        )
+        now.otherActions.take(maxOther).forEach { CustomActionButton(it, media, size) }
+        trailing()
+    }
+}
+
+/**
+ * One of the app's own buttons, drawn with the app's own icon - it lives in the app's package,
+ * not Gearslip's, so it's loaded from there. Its name stands in if the icon won't load.
+ */
+@Composable
+private fun CustomActionButton(action: CustomAction, media: CarMedia, size: Dp) {
+    val icon = rememberActionIcon(action)
+    GsIconBox(
+        onClick = { media.custom(action) },
+        modifier = Modifier.size(size),
+        colors = gsColors(GsTone.Neutral),
+    ) {
+        if (icon != null) {
+            Icon(icon, action.name, Modifier.size(size * 0.52f))
+        } else {
+            Text(action.name, style = MaterialTheme.typography.labelSmall, maxLines = 2, overflow = TextOverflow.Ellipsis)
+        }
+    }
+}
+
+@Composable
+private fun rememberActionIcon(action: CustomAction): ImageBitmap? {
+    val context = LocalContext.current
+    val app by CarServices.mediaApp.collectAsState()
+    val pkg = app?.component?.packageName
+    val icon by produceState<ImageBitmap?>(null, pkg, action.icon) {
+        value = if (pkg == null || action.icon == 0) null else withContext(Dispatchers.IO) {
+            runCatching {
+                context.packageManager.getResourcesForApplication(pkg)
+                    .getDrawable(action.icon, null).toBitmap(96, 96).asImageBitmap()
+            }.getOrNull()
+        }
+    }
+    return icon
+}
+
+/** The track's art, from the session's bitmap or, failing that, its art URI. */
+@Composable
+internal fun rememberArt(now: NowPlaying): android.graphics.Bitmap? {
+    val context = LocalContext.current
+    val art by produceState(now.art, now.art, now.artUri) { value = now.art ?: MediaArt.load(context, now.artUri) }
+    return art
+}
+
+/**
+ * A background taken from the album art's main colour, in place of [fallback]. Only the hue and a
+ * capped amount of its saturation come from the art; the lightness stays close to the theme's
+ * own ([darkLightness] or [lightLightness]), so text drawn in the theme's colours reads the same
+ * on any cover. Art with no real colour in it keeps [fallback]. Fades between songs rather than
+ * jumping.
+ */
+@Composable
+internal fun rememberArtColor(
+    art: android.graphics.Bitmap?,
+    fallback: Color,
+    darkLightness: Float = 0.2f,
+    lightLightness: Float = 0.86f,
+): Color {
+    val dark = fallback.luminance() < 0.5f
+    val tint by produceState<ArtColor.Tint?>(null, art) {
+        value = art?.let { withContext(Dispatchers.Default) { runCatching { ArtColor.of(it) }.getOrNull() } }
+    }
+    val target = tint?.let {
+        if (dark) Color.hsl(it.hue, it.saturation.coerceIn(0.3f, 0.5f), darkLightness)
+        else Color.hsl(it.hue, it.saturation.coerceIn(0.35f, 0.55f), lightLightness)
+    } ?: fallback
+    return animateColorAsState(target, tween(600), label = "art colour").value
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/Prefetch.kt

@@ -0,0 +1,45 @@
+package app.seb3thehacker.gearslip.car
+
+import android.content.Context
+import app.seb3thehacker.gearslip.CertProvider
+import app.seb3thehacker.gearslip.GearslipLog
+import app.seb3thehacker.gearslip.mirror.PhoneApps
+import java.util.concurrent.Executors
+
+/**
+ * Loads what the car screens show before anyone opens them: the car and media apps with their
+ * icons, the phone's launcher apps, the weather and the calendar. Also unlocks the certificate,
+ * so a head unit's first message is answered at once. Each screen paints from these
+ * results at once and refreshes behind them, so nothing waits on the package manager, the
+ * network or the calendar provider.
+ *
+ * Safe to call as often as you like: calls closer together than [MIN_GAP_MS] are dropped.
+ */
+object Prefetch {
+
+    private const val MIN_GAP_MS = 60_000L
+
+    private val worker = Executors.newSingleThreadExecutor { Thread(it, "gearslip-prefetch").apply { isDaemon = true } }
+    @Volatile private var lastRun = 0L
+
+    /** [force] skips the throttle; use it when something changed, such as a permission grant. */
+    fun warm(context: Context, force: Boolean = false) {
+        val now = System.currentTimeMillis()
+        if (!force && now - lastRun < MIN_GAP_MS) return
+        lastRun = now
+        val app = context.applicationContext
+        worker.execute {
+            val start = System.currentTimeMillis()
+            step("certificate") { CertProvider.warm(app) }
+            step("launcher apps") { warmLauncherApps(app) }
+            step("phone apps") { PhoneApps.warm(app) }
+            step("weather and calendar") { warmDashboard(app) }
+            GearslipLog.i("prefetch done in ${System.currentTimeMillis() - start}ms")
+        }
+    }
+
+    // One failing loader must not stop the others.
+    private fun step(name: String, block: () -> Unit) {
+        runCatching(block).onFailure { GearslipLog.w("prefetch: $name failed: ${it.message}") }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/ScreenHeader.kt

@@ -0,0 +1,43 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import app.seb3thehacker.gearslip.car.theme.GsIconButton
+
+/**
+ * The top of every screen reached from Home: a back button in the current theme, the title, and
+ * room on the right for the screen's own controls. A car touchscreen has no hardware back button,
+ * so this is the way out of a screen.
+ */
+@Composable
+fun ScreenHeader(title: String, modifier: Modifier = Modifier, trailing: @Composable RowScope.() -> Unit = {}) {
+    val navigator = LocalCarNavigator.current
+    Row(
+        modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        GsIconButton(Icons.AutoMirrored.Filled.ArrowBack, "Back", navigator::back)
+        Text(
+            title,
+            style = MaterialTheme.typography.headlineSmall,
+            fontWeight = FontWeight.Bold,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.weight(1f),
+        )
+        trailing()
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/TemplateChrome.kt

@@ -1,6 +1,9 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
 import android.graphics.Rect
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -10,28 +13,45 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.car.app.model.CarIcon
 import androidx.car.app.model.Template
 import androidx.car.app.model.PlaceListMapTemplate
+import androidx.car.app.navigation.model.Lane
+import androidx.car.app.navigation.model.LaneDirection
 import androidx.car.app.navigation.model.MapTemplate
 import androidx.car.app.navigation.model.MapWithContentTemplate
 import androidx.car.app.navigation.model.NavigationTemplate
 import androidx.car.app.navigation.model.PlaceListNavigationTemplate
 import androidx.car.app.navigation.model.RoutePreviewNavigationTemplate
 import androidx.car.app.navigation.model.RoutingInfo
+import androidx.car.app.navigation.model.Step
 import androidx.car.app.navigation.model.TravelEstimate
+import app.seb3thehacker.gearslip.host.clockTime
 import app.seb3thehacker.gearslip.host.color
+import app.seb3thehacker.gearslip.host.image
 import app.seb3thehacker.gearslip.host.display
 import app.seb3thehacker.gearslip.host.remainingTime
 import app.seb3thehacker.gearslip.host.text
@@ -82,17 +102,18 @@ fun visibleAreaFor(template: Template?, width: Int, height: Int): Rect = when (t
 
 @Composable
 private fun NavigationChrome(template: NavigationTemplate, modifier: Modifier) {
+    val pan by CarServices.nav.panMode.collectAsState()
     Box(modifier.fillMaxWidth()) {
-        (template.navigationInfo as? RoutingInfo)?.let {
+        if (!pan) (template.navigationInfo as? RoutingInfo)?.let {
             RoutingCard(it, Modifier.align(Alignment.TopStart).padding(12.dp).width(320.dp))
         }
         RightEdgeControls(
-            template.actionStrip,
+            if (pan) null else template.actionStrip,
             template.mapActionStrip,
             Modifier.align(Alignment.TopEnd).padding(12.dp),
         )
-        template.destinationTravelEstimate?.let {
+        if (!pan) template.destinationTravelEstimate?.let {
-            TravelEstimateBar(it, Modifier.align(Alignment.BottomStart))
+            TravelEstimateBar(it, Modifier.align(Alignment.BottomStart).padding(12.dp))
         }
     }
 }
@@ -102,7 +123,7 @@ private fun NavigationChrome(template: NavigationTemplate, modifier: Modifier) {
 private fun RoutingCard(info: RoutingInfo, modifier: Modifier = Modifier) {
     if (info.isLoading) {
         ChromeSurface(modifier) {
-            Text("Finding a route…", Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
+            Text("Finding a route…", Modifier.padding(16.dp), style = ChromeType.title)
         }
         return
     }
@@ -116,89 +137,168 @@ private fun RoutingCard(info: RoutingInfo, modifier: Modifier = Modifier) {
                 Column(Modifier.weight(1f)) {
                     val distance = info.currentDistance.display()
                     if (distance.isNotEmpty()) {
-                        Text(
+                        Text(distance, style = ChromeType.headline)
-                            distance,
-                            style = MaterialTheme.typography.headlineSmall,
-                            fontWeight = FontWeight.Bold,
-                        )
                     }
-                    Text(
+                    Text(step.cue.text(), style = ChromeType.title, maxLines = 2, overflow = TextOverflow.Ellipsis)
-                        step.cue.text(),
-                        style = MaterialTheme.typography.titleMedium,
-                        maxLines = 2,
-                        overflow = TextOverflow.Ellipsis,
-                    )
                 }
             }
             val road = step.road.text()
             if (road.isNotEmpty()) {
                 Text(
                     road,
-                    style = MaterialTheme.typography.bodyMedium,
+                    style = ChromeType.body,
                     color = MaterialTheme.colorScheme.onSurfaceVariant,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
                 )
             }
+            // Neither is sent by every app - most say only "turn left" and trust the driver to
+            // find the lane themselves - so both are drawn only when there is something to draw.
+            info.junctionImage?.let { junction ->
+                Spacer(Modifier.height(10.dp))
+                JunctionImage(junction)
+            }
+            LaneGuidance(step, Modifier.padding(top = 10.dp))
             info.nextStep?.let { next ->
                 Spacer(Modifier.height(8.dp))
                 Row(verticalAlignment = Alignment.CenterVertically) {
-                    Text(
+                    Text("then", style = ChromeType.label, color = MaterialTheme.colorScheme.onSurfaceVariant)
-                        "then",
-                        style = MaterialTheme.typography.labelMedium,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
                     Spacer(Modifier.width(8.dp))
                     CarGlyph(next.maneuver?.icon, Modifier.size(20.dp))
                     Spacer(Modifier.width(8.dp))
-                    Text(
+                    Text(next.cue.text(), style = ChromeType.body, maxLines = 1, overflow = TextOverflow.Ellipsis)
-                        next.cue.text(),
-                        style = MaterialTheme.typography.bodyMedium,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                    )
                 }
             }
         }
     }
 }
 
-/** Time and distance left, along the bottom where it stays out of the map's way. */
+/** The zoomed-in intersection an app draws for a junction too complex for an arrow to explain. */
+@Composable
+private fun JunctionImage(icon: CarIcon, modifier: Modifier = Modifier) {
+    val bitmap = icon.image(LocalContext.current) ?: return
+    Image(
+        bitmap,
+        contentDescription = null,
+        contentScale = ContentScale.Fit,
+        modifier = modifier.fillMaxWidth().heightIn(max = 120.dp),
+    )
+}
+
+/**
+ * Which lane to be in before the manoeuvre, either as the app's own picture ([Step.getLanesImage])
+ * or as a row of arrows built from its structured lane data - whichever it sent. The recommended
+ * lane, or lanes, stand out in the theme's own colour; the rest sit on the same muted, solid tile
+ * everything else uses, never dimmed by transparency.
+ */
+@Composable
+private fun LaneGuidance(step: Step, modifier: Modifier = Modifier) {
+    step.lanesImage?.let {
+        JunctionImage(it, modifier)
+        return
+    }
+    val lanes = step.lanes.orEmpty()
+    if (lanes.isEmpty()) return
+    Row(modifier, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+        lanes.forEach { lane -> LaneTile(lane) }
+    }
+}
+
+@Composable
+private fun LaneTile(lane: Lane) {
+    val directions = lane.directions.orEmpty()
+    val shown = directions.firstOrNull { it.isRecommended } ?: directions.firstOrNull()
+    val recommended = shown?.isRecommended == true
+    Box(
+        Modifier
+            .size(36.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(
+                if (recommended) MaterialTheme.colorScheme.primaryContainer
+                else MaterialTheme.colorScheme.surfaceContainerHighest,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            Icons.Filled.KeyboardArrowUp,
+            contentDescription = if (recommended) "Recommended lane" else "Lane",
+            tint = if (recommended) MaterialTheme.colorScheme.onPrimaryContainer
+            else MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.size(24.dp).rotate(shown.turnDegrees()),
+        )
+    }
+}
+
+/** The one arrow glyph this app draws, turned to stand in for every shape a lane can permit. */
+private fun LaneDirection?.turnDegrees(): Float = when (this?.shape) {
+    LaneDirection.SHAPE_SLIGHT_RIGHT -> 30f
+    LaneDirection.SHAPE_NORMAL_RIGHT -> 90f
+    LaneDirection.SHAPE_SHARP_RIGHT -> 135f
+    LaneDirection.SHAPE_U_TURN_RIGHT -> 170f
+    LaneDirection.SHAPE_SLIGHT_LEFT -> -30f
+    LaneDirection.SHAPE_NORMAL_LEFT -> -90f
+    LaneDirection.SHAPE_SHARP_LEFT -> -135f
+    LaneDirection.SHAPE_U_TURN_LEFT -> -170f
+    else -> 0f
+}
+
+/**
+ * The trip at a glance: time and distance left, the clock time it ends at, and - beside them,
+ * where a thumb reaches - the app's own way to stop navigating. A floating card rather than a
+ * full-width bar, so it reads as one thing beside the manoeuvre card above it instead of a strip
+ * that happens to hold three numbers. The close button is Gearslip's own, not the app's: an
+ * actionStrip's actions carry no flag saying which one (if any) means "stop navigating" - the
+ * first button here turned out to be a mute toggle, not an exit - so this leaves the app the way
+ * going Home already does, rather than guess at the app's own controls and risk getting it wrong.
+ */
 @Composable
 private fun TravelEstimateBar(estimate: TravelEstimate, modifier: Modifier = Modifier) {
-    val dark = MaterialTheme.colorScheme.surface.luminanceIsDark()
     val time = remainingTime(estimate.remainingTimeSeconds)
     val distance = estimate.remainingDistance.display()
+    val arrival = estimate.arrivalTimeAtDestination.clockTime()
     val trip = estimate.tripText.text()
-    if (time.isEmpty() && distance.isEmpty() && trip.isEmpty()) return
+    if (time.isEmpty() && distance.isEmpty() && arrival.isEmpty() && trip.isEmpty()) return
 
-    Surface(
+    val detail = listOfNotNull(
-        color = Color.Black.copy(alpha = 0.6f),
+        arrival.takeIf { it.isNotEmpty() },
-        contentColor = Color.White,
+        distance.takeIf { it.isNotEmpty() },
-        modifier = modifier.fillMaxWidth(),
+        trip.takeIf { it.isNotEmpty() },
-    ) {
+    ).joinToString("  •  ")
+
+    // The same solid card the manoeuvre card above it uses - one surface for the whole map
+    // chrome, rather than this one spot styled on its own as a bar over the map.
+    ChromeSurface(modifier, shadowElevation = 8.dp) {
+        val dark = MaterialTheme.colorScheme.surface.luminanceIsDark()
         Row(
-            Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+            Modifier.padding(start = 8.dp, end = 18.dp, top = 10.dp, bottom = 10.dp),
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(20.dp),
         ) {
-            if (time.isNotEmpty()) {
+            // Not a disconnect: the connection stays up and the app decides its own next screen.
-                Text(
+            // Ending navigation is its own call, separate from a back press - a back press only
-                    time,
+            // pops the on-screen card, leaving the app still believing it is navigating (so a
-                    style = MaterialTheme.typography.titleLarge,
+            // freshly picked destination silently does nothing); this is the call that actually
-                    fontWeight = FontWeight.Bold,
+            // clears that flag on the app's side.
-                    color = estimate.remainingTimeColor.color(dark, Color.White),
+            GsIconButton(
-                )
+                Icons.Filled.Close,
-            }
+                "Stop navigating",
-            if (distance.isNotEmpty()) {
+                { CarServices.nav.stopNavigating() },
-                Text(
+                colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHighest, MaterialTheme.colorScheme.onSurface),
-                    distance,
+                size = 40.dp,
-                    style = MaterialTheme.typography.titleMedium,
+                iconSize = 20.dp,
-                    color = estimate.remainingDistanceColor.color(dark, Color.White),
+                shape = CircleShape,
-                )
+            )
-            }
+            Spacer(Modifier.width(10.dp))
-            if (trip.isNotEmpty()) {
+            Column {
-                Text(trip, style = MaterialTheme.typography.bodyMedium, maxLines = 1)
+                if (time.isNotEmpty()) {
+                    Text(
+                        time,
+                        style = ChromeType.headline,
+                        color = estimate.remainingTimeColor.color(dark, MaterialTheme.colorScheme.onSurface),
+                    )
+                }
+                if (detail.isNotEmpty()) {
+                    Text(detail, style = ChromeType.body, color = MaterialTheme.colorScheme.onSurfaceVariant)
+                }
             }
         }
     }
@@ -207,25 +307,39 @@ private fun TravelEstimateBar(estimate: TravelEstimate, modifier: Modifier = Mod
 // --- map with a side pane ----------------------------------------------------------------------
 
 /**
- * The shape every remaining map-backed template shares: a pane down the left, the app's map
+ * The shape every remaining map-backed template shares: the app's map across the whole surface,
- * showing through on the right, and both action strips stacked at the right edge.
+ * the template's content in a card floating over its left side, and both action strips stacked at
+ * the right edge. The card is as tall as its content, up to the height of the screen, so a
+ * handful of buttons no longer claim a whole column of the map. [fullHeight] is for content that
+ * needs the room, such as a search field with its keyboard.
  */
 @Composable
 private fun MapPaneLayout(
     modifier: Modifier,
     actionStrip: androidx.car.app.model.ActionStrip?,
     mapActionStrip: androidx.car.app.model.ActionStrip?,
-    pane: @Composable (Modifier) -> Unit,
+    fullHeight: Boolean = false,
+    pane: @Composable () -> Unit,
 ) {
-    Box(modifier.fillMaxWidth()) {
+    // Pan mode hands the whole screen to the map, leaving only its own controls.
-        pane(
+    val pan by CarServices.nav.panMode.collectAsState()
-            Modifier
+    val edgeActions = (actionStrip?.actions.orEmpty() + mapActionStrip?.actions.orEmpty()).map { it.identity() }.toSet()
-                .align(Alignment.CenterStart)
+    androidx.compose.foundation.layout.BoxWithConstraints(modifier.fillMaxWidth()) {
-                .fillMaxHeight()
+        if (!pan) {
-                .fillMaxWidth(CONTENT_PANE_FRACTION),
+            ChromeSurface(
-        )
+                Modifier
+                    .align(Alignment.TopStart)
+                    .padding(12.dp)
+                    .width(maxOf(maxWidth * CONTENT_PANE_FRACTION - 12.dp, 232.dp))
+                    .let { if (fullHeight) it.height(maxHeight - 24.dp) else it.heightIn(max = maxHeight - 24.dp) },
+                shape = androidx.compose.foundation.shape.RoundedCornerShape(20.dp),
+                shadowElevation = 8.dp,
+            ) {
+                androidx.compose.runtime.CompositionLocalProvider(LocalMapEdgeActions provides edgeActions) { pane() }
+            }
+        }
         RightEdgeControls(
-            actionStrip,
+            if (pan) null else actionStrip,
             mapActionStrip,
             Modifier.align(Alignment.TopEnd).padding(12.dp),
         )
@@ -238,8 +352,12 @@ private fun MapWithContentChrome(template: MapWithContentTemplate, modifier: Mod
         modifier,
         template.actionStrip,
         template.mapController?.mapActionStrip,
-    ) { paneModifier ->
+        fullHeight = template.contentTemplate.needsFullHeight(),
-        ContentTemplate(template.contentTemplate, paneModifier)
+    ) {
+        // A pane floating over the map is a place or a route the app is proposing, so its one
+        // action - Start - counts itself down rather than waiting to be pressed; the same pane
+        // filling a whole screen elsewhere gets no such push.
+        ContentTemplate(template.contentTemplate, Modifier, autoStartPane = true)
     }
 }
 
@@ -249,15 +367,15 @@ private fun MapChrome(template: MapTemplate, modifier: Modifier) {
         modifier,
         template.actionStrip,
         template.mapController?.mapActionStrip,
-    ) { paneModifier ->
+    ) {
-        ChromeSurface(paneModifier, shape = androidx.compose.foundation.shape.RoundedCornerShape(0.dp)) {
+        ChromeSurface(Modifier, shape = androidx.compose.foundation.shape.RoundedCornerShape(0.dp)) {
             Column {
                 HeaderBar(
                     headerTitle(template.header, ""),
                     template.header?.startHeaderAction,
                     template.header?.endHeaderActions.orEmpty(),
                 )
-                if (template.pane != null) PaneRows(template.pane)
+                if (template.pane != null) PaneRows(template.pane, autoStart = true)
                 else ItemListColumn(template.itemList)
             }
         }
@@ -266,26 +384,26 @@ private fun MapChrome(template: MapTemplate, modifier: Modifier) {
 
 @Composable
 private fun PlaceListNavigationChrome(template: PlaceListNavigationTemplate, modifier: Modifier) {
-    MapPaneLayout(modifier, template.actionStrip, template.mapActionStrip) { paneModifier ->
+    MapPaneLayout(modifier, template.actionStrip, template.mapActionStrip) {
         ListPane(
             headerTitle(template.header, template.title.text()),
             template.header?.startHeaderAction ?: template.headerAction,
             template.isLoading,
             template.itemList,
-            paneModifier,
+            Modifier,
         )
     }
 }
 
 @Composable
 private fun PlaceListMapChrome(template: PlaceListMapTemplate, modifier: Modifier) {
-    MapPaneLayout(modifier, template.actionStrip, null) { paneModifier ->
+    MapPaneLayout(modifier, template.actionStrip, null) {
         ListPane(
             template.title.text(),
             template.headerAction,
             template.isLoading,
             template.itemList,
-            paneModifier,
+            Modifier,
         )
     }
 }
@@ -293,23 +411,23 @@ private fun PlaceListMapChrome(template: PlaceListMapTemplate, modifier: Modifie
 /** Route choices down the side, with the app's "start" action pinned under them. */
 @Composable
 private fun RoutePreviewChrome(template: RoutePreviewNavigationTemplate, modifier: Modifier) {
-    MapPaneLayout(modifier, template.actionStrip, template.mapActionStrip) { paneModifier ->
+    MapPaneLayout(modifier, template.actionStrip, template.mapActionStrip) {
-        ChromeSurface(paneModifier, shape = androidx.compose.foundation.shape.RoundedCornerShape(0.dp)) {
+        ChromeSurface(Modifier, shape = androidx.compose.foundation.shape.RoundedCornerShape(0.dp)) {
-            Column(Modifier.fillMaxHeight()) {
+            Column {
                 HeaderBar(
                     headerTitle(template.header, template.title.text()),
                     template.header?.startHeaderAction ?: template.headerAction,
                     template.header?.endHeaderActions.orEmpty(),
                 )
-                Box(Modifier.weight(1f)) {
+                Box(Modifier.weight(1f, fill = false)) {
                     if (template.isLoading) {
-                        Text("Finding routes…", Modifier.padding(14.dp))
+                        Text("Finding routes…", Modifier.padding(14.dp), style = ChromeType.title)
                     } else {
                         ItemListColumn(template.itemList)
                     }
                 }
                 template.navigateAction?.let {
-                    ActionRow(listOf(it), Modifier.padding(12.dp))
+                    AutoStartButton(it, Modifier.padding(12.dp))
                 }
             }
         }
@@ -327,7 +445,7 @@ private fun ListPane(
     ChromeSurface(modifier, shape = androidx.compose.foundation.shape.RoundedCornerShape(0.dp)) {
         Column {
             HeaderBar(title, startAction)
-            if (loading) Text("Loading…", Modifier.padding(14.dp))
+            if (loading) Text("Loading…", Modifier.padding(14.dp), style = ChromeType.title)
             else ItemListColumn(itemList)
         }
     }
@@ -338,3 +456,8 @@ private const val CONTENT_PANE_FRACTION = 0.42f
 
 /** Fraction of the surface the travel-estimate bar covers along the bottom. */
 private const val ESTIMATE_FRACTION = 0.14f
+
+/** Search, sign-in and the like are laid out for a whole column, so they keep one. */
+private fun Template?.needsFullHeight() =
+    this is androidx.car.app.model.SearchTemplate || this is androidx.car.app.model.signin.SignInTemplate ||
+        this is androidx.car.app.model.TabTemplate || this is androidx.car.app.model.LongMessageTemplate

gearslip/src/main/java/app/seb3thehacker/gearslip/car/TemplateContent.kt

@@ -1,9 +1,12 @@
 package app.seb3thehacker.gearslip.car
 
-import androidx.compose.foundation.clickable
+import app.seb3thehacker.gearslip.car.theme.*
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -12,6 +15,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
@@ -20,6 +24,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -27,8 +32,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.car.app.model.GridItem
 import androidx.car.app.model.GridTemplate
 import androidx.car.app.model.Item
 import androidx.car.app.model.ItemList
@@ -51,6 +58,7 @@ import androidx.car.app.media.model.MediaPlaybackTemplate
 import androidx.car.app.OnDoneCallback
 import androidx.car.app.serialization.Bundleable
 import app.seb3thehacker.gearslip.GearslipLog
+import app.seb3thehacker.gearslip.host.isDrawable
 import app.seb3thehacker.gearslip.host.inputChanged
 import app.seb3thehacker.gearslip.host.inputSubmitted
 import app.seb3thehacker.gearslip.host.submitted
@@ -65,18 +73,24 @@ import app.seb3thehacker.gearslip.host.textChanged
  * the same function either way - the only difference is how much room they get.
  */
 @Composable
-fun ContentTemplate(template: Template?, modifier: Modifier = Modifier) {
+fun ContentTemplate(
+    template: Template?,
+    modifier: Modifier = Modifier,
+    autoStartPane: Boolean = false,
+    ownActionsElsewhere: Boolean = false,
+    tabId: String = "",
+) {
     when (template) {
         null -> Unit
         is ListTemplate -> ListContent(template, modifier)
         is GridTemplate -> GridContent(template, modifier)
-        is PaneTemplate -> PaneContent(template, modifier)
+        is PaneTemplate -> PaneContent(template, modifier, autoStartPane)
         is MessageTemplate -> MessageContent(template, modifier)
         is LongMessageTemplate -> LongMessageContent(template, modifier)
         is SearchTemplate -> SearchContent(template, modifier)
         is SignInTemplate -> SignInContent(template, modifier)
         is TabTemplate -> TabContent(template, modifier)
-        is SectionedItemTemplate -> SectionedContent(template, modifier)
+        is SectionedItemTemplate -> SectionedContent(template, modifier, showActionsInHeader = !ownActionsElsewhere, tabId = tabId)
         is MediaPlaybackTemplate -> MediaPlaybackContent(template, modifier)
         else -> UnsupportedChrome(template, modifier)
     }
@@ -103,7 +117,10 @@ private fun ListContent(template: ListTemplate, modifier: Modifier) {
             template.actionStrip,
         )
         if (template.isLoading) Loading()
-        else ItemListColumn(template.singleList, template.sectionedLists?.map { it.itemList })
+        else ItemListColumn(
+            template.singleList, template.sectionedLists?.map { it.itemList },
+            Modifier.weight(1f, fill = false),
+        )
         ActionRow(template.actions.orEmpty(), Modifier.padding(12.dp))
     }
 }
@@ -117,13 +134,13 @@ private fun GridContent(template: GridTemplate, modifier: Modifier) {
             template.header?.endHeaderActions.orEmpty(),
             template.actionStrip,
         )
-        if (template.isLoading) Loading() else GridItems(template.singleList)
+        if (template.isLoading) Loading() else GridItems(template.singleList, Modifier.weight(1f, fill = false))
         ActionRow(template.actions.orEmpty(), Modifier.padding(12.dp))
     }
 }
 
 @Composable
-private fun PaneContent(template: PaneTemplate, modifier: Modifier) {
+private fun PaneContent(template: PaneTemplate, modifier: Modifier, autoStart: Boolean = false) {
     ContentSurface(modifier) {
         HeaderBar(
             headerTitle(template.header, template.title.text()),
@@ -131,7 +148,7 @@ private fun PaneContent(template: PaneTemplate, modifier: Modifier) {
             template.header?.endHeaderActions.orEmpty(),
             template.actionStrip,
         )
-        if (template.pane?.isLoading == true) Loading() else PaneRows(template.pane)
+        if (template.pane?.isLoading == true) Loading() else PaneRows(template.pane, autoStart = autoStart)
     }
 }
 
@@ -140,27 +157,45 @@ private fun PaneContent(template: PaneTemplate, modifier: Modifier) {
 @Composable
 private fun MessageContent(template: MessageTemplate, modifier: Modifier) {
     ContentSurface(modifier) {
-        HeaderBar(
+        // The header carries only the back arrow, not a title - a message template's own title
-            headerTitle(template.header, template.title.text()),
+        // is usually the long-form question ("Would you like to download the map...") that
-            template.header?.startHeaderAction ?: template.headerAction,
+        // reads fine centred in the body but doesn't fit a one-line header without truncating.
-            template.header?.endHeaderActions.orEmpty(),
+        val backAction = template.header?.startHeaderAction ?: template.headerAction
-            template.actionStrip,
+        HeaderBar("", backAction, template.header?.endHeaderActions.orEmpty(), template.actionStrip)
-        )
         if (template.isLoading) {
             Loading()
             return@ContentSurface
         }
-        Row(
+        // A back arrow already undoes this screen, so an app's own "Cancel" button would just
-            Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+        // be a second way to do the one thing the header already offers.
-            verticalAlignment = Alignment.CenterVertically,
+        val actions = template.actions.orEmpty().filter { it.isDrawable() }.let { list ->
+            if (backAction != null) list.filterNot { it.title.text().equals("Cancel", ignoreCase = true) } else list
+        }
+        Column(
+            Modifier.weight(1f).fillMaxWidth().padding(24.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
         ) {
             template.icon?.let {
-                CarGlyph(it, Modifier.size(32.dp))
+                CarGlyph(it, Modifier.size(40.dp))
-                Spacer(Modifier.width(12.dp))
+                Spacer(Modifier.height(12.dp))
+            }
+            Text(template.title.text(), style = ChromeType.title, textAlign = TextAlign.Center)
+            val detail = template.message.text()
+            if (detail.isNotEmpty()) {
+                Spacer(Modifier.height(8.dp))
+                Text(
+                    detail,
+                    style = ChromeType.body,
+                    textAlign = TextAlign.Center,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+            if (actions.isNotEmpty()) {
+                Spacer(Modifier.height(24.dp))
+                ActionRow(actions, Modifier.fillMaxWidth(0.6f), large = true)
             }
-            Text(template.message.text(), style = MaterialTheme.typography.bodyLarge)
         }
-        ActionRow(template.actions.orEmpty(), Modifier.padding(16.dp))
     }
 }
 
@@ -178,7 +213,7 @@ private fun LongMessageContent(template: LongMessageTemplate, modifier: Modifier
         )
         Text(
             template.message.text(),
-            style = MaterialTheme.typography.bodyMedium,
+            style = ChromeType.body,
             modifier = Modifier
                 .weight(1f)
                 .verticalScroll(rememberScrollState())
@@ -213,7 +248,15 @@ private fun SearchContent(template: SearchTemplate, modifier: Modifier) {
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             template.headerAction?.let { ActionButton(it) }
-            SearchField(query, template.searchHint.orEmpty(), Modifier.weight(1f))
+            SearchField(
+                query,
+                template.searchHint.orEmpty(),
+                Modifier.weight(1f),
+                onClear = {
+                    query = ""
+                    delegate.textChanged("")
+                },
+            )
             ActionRow(template.actionStrip?.actions.orEmpty())
         }
 
@@ -233,22 +276,59 @@ private fun SearchContent(template: SearchTemplate, modifier: Modifier) {
     }
 }
 
+/**
+ * The field the on-screen keyboard types into. It is the same height and shape as the round
+ * buttons beside it, so the header reads as one row of controls rather than a thin strip squeezed
+ * between two big buttons, and it carries a magnifier so it reads as search at a glance.
+ * [onClear] adds a clear button once something is typed; [searchIcon] is off for sign-in fields.
+ */
 @Composable
-private fun SearchField(query: String, hint: String, modifier: Modifier = Modifier) {
+internal fun SearchField(
+    query: String,
+    hint: String,
+    modifier: Modifier = Modifier,
+    searchIcon: Boolean = true,
+    onClear: (() -> Unit)? = null,
+) {
+    val muted = MaterialTheme.colorScheme.onSurfaceVariant
     Surface(
         color = MaterialTheme.colorScheme.surfaceContainerHighest,
-        shape = RoundedCornerShape(10.dp),
+        shape = androidx.compose.foundation.shape.CircleShape,
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier.fillMaxWidth().height(ICON_BUTTON_SIZE),
     ) {
-        Text(
+        Row(
-            query.ifEmpty { hint.ifEmpty { "Search" } },
+            Modifier.padding(start = if (searchIcon) 16.dp else 22.dp, end = 6.dp),
-            style = MaterialTheme.typography.titleMedium,
+            verticalAlignment = Alignment.CenterVertically,
-            color = if (query.isEmpty()) MaterialTheme.colorScheme.onSurfaceVariant
+        ) {
-            else MaterialTheme.colorScheme.onSurface,
+            if (searchIcon) {
-            maxLines = 1,
+                androidx.compose.material3.Icon(
-            overflow = TextOverflow.Ellipsis,
+                    androidx.compose.material.icons.Icons.Filled.Search,
-            modifier = Modifier.padding(horizontal = 14.dp, vertical = 8.dp),
+                    contentDescription = null,
-        )
+                    tint = muted,
+                    modifier = Modifier.size(26.dp),
+                )
+                Spacer(Modifier.width(12.dp))
+            }
+            Text(
+                query.ifEmpty { hint.ifEmpty { "Search" } },
+                style = MaterialTheme.typography.titleMedium,
+                color = if (query.isEmpty()) muted else MaterialTheme.colorScheme.onSurface,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f),
+            )
+            if (onClear != null && query.isNotEmpty()) {
+                GsIconButton(
+                    androidx.compose.material.icons.Icons.Filled.Close,
+                    "Clear",
+                    onClear,
+                    colors = GsColors(androidx.compose.ui.graphics.Color.Transparent, muted),
+                    size = 42.dp,
+                    iconSize = 22.dp,
+                    shape = androidx.compose.foundation.shape.CircleShape,
+                )
+            }
+        }
     }
 }
 
@@ -276,7 +356,7 @@ private fun SignInContent(template: SignInTemplate, modifier: Modifier) {
         if (instructions.isNotEmpty()) {
             Text(
                 instructions,
-                style = MaterialTheme.typography.bodyLarge,
+                style = ChromeType.body,
                 modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
             )
         }
@@ -295,7 +375,7 @@ private fun SignInContent(template: SignInTemplate, modifier: Modifier) {
         if (additional.isNotEmpty()) {
             Text(
                 additional,
-                style = MaterialTheme.typography.bodySmall,
+                style = ChromeType.label,
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
                 modifier = Modifier.padding(horizontal = 16.dp),
             )
@@ -311,12 +391,12 @@ private fun InputSignIn(method: InputSignInMethod, modifier: Modifier) {
     val masked = method.inputType == InputSignInMethod.INPUT_TYPE_PASSWORD
 
     Column(modifier) {
-        SearchField(if (masked) "•".repeat(value.length) else value, method.hint.text())
+        SearchField(if (masked) "•".repeat(value.length) else value, method.hint.text(), searchIcon = false)
         val error = method.errorMessage.text()
         if (error.isNotEmpty()) {
             Text(
                 error,
-                style = MaterialTheme.typography.bodySmall,
+                style = ChromeType.label,
                 color = MaterialTheme.colorScheme.error,
                 modifier = Modifier.padding(horizontal = 16.dp),
             )
@@ -340,8 +420,7 @@ private fun Callout(value: String, modifier: Modifier) {
     Box(modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
         Text(
             value,
-            style = MaterialTheme.typography.headlineMedium,
+            style = ChromeType.headline,
-            fontWeight = FontWeight.Bold,
             textAlign = androidx.compose.ui.text.style.TextAlign.Center,
         )
     }
@@ -352,43 +431,62 @@ private fun Callout(value: String, modifier: Modifier) {
 @Composable
 private fun TabContent(template: TabTemplate, modifier: Modifier) {
     val active = template.activeTabContentId
-    ContentSurface(modifier) {
+    val innerTemplate = template.tabContents?.template
-        Row(
+    // A sectioned tab's own actions (search, a Liked Songs shortcut) belong on the same line as
-            Modifier
+    // the tabs themselves - a real Android Auto host's header row, not a second near-empty row
-                .fillMaxWidth()
+    // underneath it that SectionedContent would otherwise draw just to hold them.
-                .padding(horizontal = 8.dp, vertical = 6.dp)
+    val trailingActions = (innerTemplate as? SectionedItemTemplate)?.actions.orEmpty().filter { it.isDrawable() }
-                .verticalScrollNone(),
+    Box(modifier) {
-            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ContentSurface(Modifier.fillMaxSize()) {
-            verticalAlignment = Alignment.CenterVertically,
+            Row(
-        ) {
+                Modifier
-            template.headerAction?.let { ActionButton(it) }
+                    .fillMaxWidth()
-            template.tabs.forEach { tab ->
+                    .padding(horizontal = 8.dp, vertical = 6.dp)
-                val selected = tab.contentId == active
+                    .verticalScrollNone(),
-                Surface(
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
-                    color = if (selected) MaterialTheme.colorScheme.primaryContainer
+                verticalAlignment = Alignment.CenterVertically,
-                    else MaterialTheme.colorScheme.surfaceContainerHighest,
+            ) {
-                    contentColor = if (selected) MaterialTheme.colorScheme.onPrimaryContainer
+                template.headerAction?.let { ActionButton(it) }
-                    else MaterialTheme.colorScheme.onSurface,
+                template.tabs.forEach { tab ->
-                    shape = RoundedCornerShape(20.dp),
+                    val selected = tab.contentId == active
-                    modifier = Modifier.clickable {
+                    GsIconBox(
-                        template.tabCallbackDelegate.tabSelected(tab.contentId)
+                        onClick = { template.tabCallbackDelegate.tabSelected(tab.contentId) },
-                    },
+                        colors = if (selected) GsColors(MaterialTheme.colorScheme.primaryContainer, MaterialTheme.colorScheme.onPrimaryContainer)
-                ) {
+                        else GsColors(MaterialTheme.colorScheme.surfaceContainerHighest, MaterialTheme.colorScheme.onSurface),
-                    Row(
+                        shape = RoundedCornerShape(20.dp),
-                        Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
+                        latched = selected,
-                        verticalAlignment = Alignment.CenterVertically,
                     ) {
-                        tab.icon?.let {
+                        Row(
-                            CarGlyph(it, Modifier.size(20.dp))
+                            Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
-                            Spacer(Modifier.width(6.dp))
+                            verticalAlignment = Alignment.CenterVertically,
+                        ) {
+                            tab.icon?.let {
+                                CarGlyph(it, Modifier.size(20.dp))
+                                Spacer(Modifier.width(6.dp))
+                            }
+                            Text(tab.title.text(), style = ChromeType.label, maxLines = 1)
                         }
-                        Text(tab.title.text(), style = MaterialTheme.typography.labelLarge, maxLines = 1)
                     }
                 }
             }
+            if (template.isLoading) Loading()
+            else ContentTemplate(
+                innerTemplate,
+                Modifier.weight(1f),
+                ownActionsElsewhere = trailingActions.isNotEmpty(),
+                tabId = active.orEmpty(),
+            )
+        }
+        // Bottom-left, not on the tab row: a driver's hand rests near the bottom of the screen,
+        // and the tab row is already busy with the tabs themselves.
+        if (trailingActions.isNotEmpty()) {
+            Row(
+                Modifier.align(Alignment.BottomStart).padding(12.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                trailingActions.forEach { ActionButton(it) }
+            }
         }
-        if (template.isLoading) Loading()
-        else ContentTemplate(template.tabContents?.template, Modifier.weight(1f))
     }
 }
 
@@ -397,46 +495,66 @@ private fun Modifier.verticalScrollNone(): Modifier = this
 
 // --- sectioned items --------------------------------------------------------------------------
 
+/**
+ * A section's items ([SectionRows]) are cached for the life of the process, keyed off the
+ * foreground app and, when nested under a tab, the tab - so flipping back to a shelf already
+ * seen this drive is instant instead of re-asking the app over the binder. Bounded and in
+ * memory only, so it costs nothing on disk and disappears with the process.
+ */
+private val sectionCache = android.util.LruCache<String, List<Item>>(64)
+
 /**
  * Sections fetch their items across the binder on demand rather than carrying them, so each one
- * is asked for its full range once and the answer is held while the section is on screen.
+ * is asked for its full range once and the answer is held while the section is on screen (and,
+ * via [sectionCache], for the rest of the drive).
  */
 @Composable
-private fun SectionedContent(template: SectionedItemTemplate, modifier: Modifier) {
+private fun SectionedContent(template: SectionedItemTemplate, modifier: Modifier, showActionsInHeader: Boolean = true, tabId: String = "") {
+    val appPackage = CarServices.nav.appPackage.orEmpty()
     ContentSurface(modifier) {
+        // The app's own actions (Spotify's search and Liked Songs shortcut, for two) come from
+        // template.actions, not the header - but a bottom-of-content row is wrong for a driver
+        // reaching for it. Normally the header's own end-actions slot is where a real Android
+        // Auto host puts these; nested under a TabTemplate, though, TabContent already drew them
+        // on the tab row itself, so showActionsInHeader is false and this header stays title-only
+        // (and usually collapses to nothing, since a tab's own content carries no separate title).
         HeaderBar(
             headerTitle(template.header, ""),
             template.header?.startHeaderAction,
-            template.header?.endHeaderActions.orEmpty(),
+            template.header?.endHeaderActions.orEmpty() + if (showActionsInHeader) template.actions.orEmpty() else emptyList(),
         )
         if (template.isLoading) {
             Loading()
             return@ContentSurface
         }
         Column(Modifier.weight(1f).verticalScroll(rememberScrollState())) {
-            template.sections.forEach { section ->
+            template.sections.forEachIndexed { index, section ->
                 PaneTitle(section.title.text())
-                SectionRows(section)
+                SectionRows(section, "$appPackage/$tabId/$index/${section.title.text()}")
             }
         }
-        ActionRow(template.actions.orEmpty(), Modifier.padding(12.dp))
     }
 }
 
 @Composable
-private fun SectionRows(section: Section<*>) {
+private fun SectionRows(section: Section<*>, cacheKey: String) {
-    var items by remember(section) { mutableStateOf<List<Item>>(emptyList()) }
+    var items by remember(section) { mutableStateOf(sectionCache.get(cacheKey).orEmpty()) }
 
     LaunchedEffect(section) {
+        if (sectionCache.get(cacheKey) != null) return@LaunchedEffect
         val delegate = section.itemsDelegate
-        val size = runCatching { delegate.size }.getOrDefault(0)
+        val sizeResult = runCatching { delegate.size }
+        val size = sizeResult.getOrDefault(0)
+        sizeResult.onFailure { GearslipLog.w("host: section.itemsDelegate.size threw: ${it.javaClass.simpleName}: ${it.message}") }
         if (size <= 0) return@LaunchedEffect
         runCatching {
             delegate.requestItemRange(0, size - 1, object : OnDoneCallback {
                 override fun onSuccess(response: Bundleable?) {
                     val value = response?.let { runCatching { it.get() }.getOrNull() }
                     @Suppress("UNCHECKED_CAST")
-                    items = (value as? List<Item>).orEmpty()
+                    val fetched = (value as? List<Item>).orEmpty()
+                    items = fetched
+                    sectionCache.put(cacheKey, fetched)
                 }
 
                 override fun onFailure(response: Bundleable) =
@@ -447,34 +565,62 @@ private fun SectionRows(section: Section<*>) {
 
     if (items.isEmpty()) {
         val message = section.noItemsMessage.text()
-        if (message.isNotEmpty()) Text(message, Modifier.padding(14.dp))
+        if (message.isNotEmpty()) Text(message, Modifier.padding(14.dp), style = ChromeType.body)
         return
     }
-    items.filterIsInstance<CarRow>().forEach { RowItem(it) }
+    // A section's items are homogeneous in practice - one kind or the other - but nothing in
+    // the API guarantees that, so both are handled rather than assuming whichever the app
+    // happened to send first.
+    val rows = items.filterIsInstance<CarRow>()
+    val tiles = items.filterIsInstance<GridItem>()
+    rows.forEach { RowItem(it) }
+    if (tiles.isNotEmpty()) {
+        // A plain scrollable Row, not LazyRow: the car screen renders into a VirtualDisplay
+        // Presentation rather than a normal window, and LazyRow's SubcomposeLayout measures to
+        // zero height there even with an explicit size - a handful of tiles per shelf makes the
+        // lost virtualization no real loss.
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .horizontalScroll(rememberScrollState())
+                .padding(horizontal = 8.dp, vertical = 4.dp),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            tiles.forEach { tile -> GridTile(tile, Modifier.width(180.dp)) }
+        }
+    }
 }
 
 // --- media ----------------------------------------------------------------------------------
 
 /**
- * Media playback is drawn from the app's MediaSession rather than from the template, which
+ * The template itself carries only a header - real Android Auto hosts draw this screen from the
- * carries only a header. Gearslip has no media channel yet, so this says so plainly instead of
+ * app's MediaSession instead, which is exactly what [CarServices.media] already does for the
- * showing an empty player.
+ * media-app launcher and the bottom bar. Reusing [NowPlayingPage] here rather than a "not
+ * supported" placeholder means an app whose own now-playing template Gearslip lands on (like
+ * Spotify's "Liked Songs" screen) still gets working transport controls.
  */
 @Composable
 private fun MediaPlaybackContent(template: MediaPlaybackTemplate, modifier: Modifier) {
+    val media = CarServices.media
+    val now by media.now.collectAsState()
     ContentSurface(modifier) {
         HeaderBar(
             headerTitle(template.header, ""),
             template.header?.startHeaderAction,
             template.header?.endHeaderActions.orEmpty(),
         )
-        Box(Modifier.weight(1f).fillMaxWidth(), contentAlignment = Alignment.Center) {
+        if (now.title.isNotEmpty()) {
-            Text(
+            NowPlayingPage(now, media, Modifier.weight(1f).fillMaxWidth())
-                "Playback controls come from the app's media session,\nwhich Gearslip doesn't carry yet.",
+        } else {
-                style = MaterialTheme.typography.bodyMedium,
+            Box(Modifier.weight(1f).fillMaxWidth(), contentAlignment = Alignment.Center) {
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                Text(
-                textAlign = androidx.compose.ui.text.style.TextAlign.Center,
+                    "Nothing playing yet.",
-            )
+                    style = ChromeType.body,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    textAlign = androidx.compose.ui.text.style.TextAlign.Center,
+                )
+            }
         }
     }
 }
@@ -484,7 +630,7 @@ private fun MediaPlaybackContent(template: MediaPlaybackTemplate, modifier: Modi
 @Composable
 private fun ContentSurface(modifier: Modifier, content: @Composable ColumnScopeAlias.() -> Unit) {
     ChromeSurface(modifier, shape = RoundedCornerShape(0.dp)) {
-        Column(Modifier.fillMaxSize(), content = content)
+        Column(Modifier.fillMaxWidth(), content = content)
     }
 }
 
@@ -493,6 +639,6 @@ private typealias ColumnScopeAlias = androidx.compose.foundation.layout.ColumnSc
 @Composable
 private fun Loading() {
     Box(Modifier.fillMaxWidth().height(80.dp), contentAlignment = Alignment.Center) {
-        Text("Loading…", style = MaterialTheme.typography.bodyLarge)
+        Text("Loading…", style = ChromeType.title)
     }
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/car/TemplateParts.kt

@@ -1,15 +1,22 @@
 package app.seb3thehacker.gearslip.car
 
+import app.seb3thehacker.gearslip.car.theme.*
+import androidx.compose.runtime.produceState
 import androidx.compose.runtime.remember
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.foundation.Image
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -30,6 +37,21 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import app.seb3thehacker.gearslip.host.selected
+import app.seb3thehacker.gearslip.host.checkedChanged
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.Switch
+import androidx.core.graphics.drawable.toBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.input.pointer.PointerEventPass
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.draw.alpha
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -67,17 +89,21 @@ import app.seb3thehacker.gearslip.host.text
 /**
  * The app keeps drawing its map across the whole surface - the visible area we report tells it
  * where to put its own markers, not where to stop painting. So anything the host lays over the
- * map is opaque by default, or the map reads through it.
+ * map is opaque, always, in the same one colour: a card that lets the map show through in places
+ * reads as broken glass, not as a deliberate choice, and a driver has no way to tell which was
+ * meant. There is no alpha knob here on purpose - every card, bar and strip in the template
+ * chrome shares this surface, so nothing drawn over a map is ever see-through.
  */
 @Composable
 internal fun ChromeSurface(
     modifier: Modifier = Modifier,
     shape: Shape = RoundedCornerShape(16.dp),
-    alpha: Float = 1f,
+    shadowElevation: androidx.compose.ui.unit.Dp = 0.dp,
     content: @Composable () -> Unit,
 ) {
     Surface(
-        color = MaterialTheme.colorScheme.surface.copy(alpha = alpha),
+        shadowElevation = shadowElevation,
+        color = MaterialTheme.colorScheme.surface,
         contentColor = MaterialTheme.colorScheme.onSurface,
         shape = shape,
         modifier = modifier,
@@ -85,6 +111,32 @@ internal fun ChromeSurface(
     )
 }
 
+/**
+ * The one type scale for everything a templated app's screen draws. Apps hand the host plain
+ * strings with no size of their own - the Car App Library deliberately keeps that decision out of
+ * their hands - so without a shared scale, each template's text ends up whatever size felt right
+ * when that template was written, and two apps' otherwise-identical rows read as different sizes
+ * of importance. Every car chrome file should reach for one of these four rather than naming a
+ * Material size directly.
+ */
+internal object ChromeType {
+    /** The one number or word a card exists to show: distance to a turn, minutes left, a PIN. */
+    val headline: androidx.compose.ui.text.TextStyle
+        @Composable get() = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.Bold)
+
+    /** A row's name, a header, a manoeuvre's instruction - the line the rest is supporting. */
+    val title: androidx.compose.ui.text.TextStyle
+        @Composable get() = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.SemiBold)
+
+    /** Supporting detail: a road, an address, a message's body, a second line under a title. */
+    val body: androidx.compose.ui.text.TextStyle
+        @Composable get() = MaterialTheme.typography.titleMedium
+
+    /** The smallest text Gearslip draws over a map - still large enough to read while moving. */
+    val label: androidx.compose.ui.text.TextStyle
+        @Composable get() = MaterialTheme.typography.bodyLarge
+}
+
 @Composable
 internal fun UnsupportedChrome(template: Template, modifier: Modifier = Modifier) {
     androidx.compose.foundation.layout.Box(modifier, contentAlignment = Alignment.Center) {
@@ -92,7 +144,7 @@ internal fun UnsupportedChrome(template: Template, modifier: Modifier = Modifier
             Text(
                 "${template.javaClass.simpleName} isn't drawn yet",
                 Modifier.padding(16.dp),
-                style = MaterialTheme.typography.titleMedium,
+                style = ChromeType.title,
             )
         }
     }
@@ -109,7 +161,12 @@ internal fun HeaderBar(
     endActions: List<Action> = emptyList(),
     actionStrip: ActionStrip? = null,
 ) {
-    val end = (endActions + actionStrip?.actions.orEmpty()).filter { it.isDrawable() }
+    // Beside a map the action strip already sits at the right edge, so the header must not repeat it;
+    // and an app that lists the same action in two places should still see it once.
+    val onMap = LocalMapEdgeActions.current
+    val end = (endActions + if (onMap != null) emptyList() else actionStrip?.actions.orEmpty())
+        .filter { it.isDrawable() && (onMap == null || it.identity() !in onMap) }
+        .distinctBy { it.identity() }
     if (title.isEmpty() && startAction == null && end.isEmpty()) return
 
     Row(
@@ -120,8 +177,8 @@ internal fun HeaderBar(
         startAction?.takeIf { it.isDrawable() }?.let { ActionButton(it) }
         Text(
             title,
-            style = MaterialTheme.typography.titleMedium,
+            style = ChromeType.title,
-            fontWeight = FontWeight.SemiBold,
+            color = MaterialTheme.colorScheme.onSurface,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
             modifier = Modifier.weight(1f),
@@ -130,6 +187,22 @@ internal fun HeaderBar(
     }
 }
 
+/**
+ * Set inside the card beside a map to what the map's right edge already shows: the action strip is
+ * drawn there rather than in the header, and the header leaves out anything the edge repeats.
+ * Null anywhere else.
+ */
+internal val LocalMapEdgeActions = androidx.compose.runtime.compositionLocalOf<Set<String>?> { null }
+
+/** What makes two actions the same button: what they do and what they look like. */
+internal fun Action.identity(): String {
+    val icon = icon?.icon
+    val image = if (icon != null && icon.type == androidx.core.graphics.drawable.IconCompat.TYPE_RESOURCE) {
+        "${icon.resPackage}:${icon.resId}"
+    } else icon?.toString().orEmpty()
+    return "$type|${title.text()}|$image"
+}
+
 /** Reads a header whichever way the template carries it. */
 internal fun headerTitle(header: Header?, fallback: String): String =
     header?.title.text().ifEmpty { fallback }
@@ -150,8 +223,35 @@ internal fun RightEdgeControls(
     val actions = actionStrip?.actions.orEmpty().filter { it.isDrawable() }
     val mapActions = mapActionStrip?.actions.orEmpty().filter { it.isDrawable() }
     if (actions.isEmpty() && mapActions.isEmpty()) return
+    // A template that stops offering Pan must not leave the screen stuck in pan mode.
+    val hasPan = (actions + mapActions).any { it.type == Action.TYPE_PAN }
+    androidx.compose.runtime.LaunchedEffect(hasPan) { if (!hasPan) CarServices.nav.setPanMode(false) }
 
-    Column(modifier, horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(8.dp)) {
+    // Faded out when the screen has been left alone; then they are only a memory of buttons, so
+    // the first touch on one wakes them rather than pressing it.
+    val awake = LocalMapControlsWake.current.awake
+    val pan by CarServices.nav.panMode.collectAsState()
+    val visible = awake || pan
+    val alpha by androidx.compose.animation.core.animateFloatAsState(
+        targetValue = if (visible) 1f else 0f,
+        animationSpec = androidx.compose.animation.core.tween(if (visible) 150 else 500),
+        label = "mapControls",
+    )
+    Column(
+        modifier
+            .alpha(alpha)
+            .let { base ->
+                if (visible) base else base.pointerInput(Unit) {
+                    awaitPointerEventScope {
+                        while (true) {
+                            awaitPointerEvent(PointerEventPass.Initial).changes.forEach { it.consume() }
+                        }
+                    }
+                }
+            },
+        horizontalAlignment = Alignment.End,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
         if (actions.isNotEmpty()) {
             Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                 actions.forEach { ActionButton(it) }
@@ -161,51 +261,187 @@ internal fun RightEdgeControls(
     }
 }
 
+/** [large] is the pane's main call to action: it shares the card's full width, taller, in bigger type. */
 @Composable
-internal fun ActionRow(actions: List<Action>, modifier: Modifier = Modifier) {
+internal fun ActionRow(actions: List<Action>, modifier: Modifier = Modifier, large: Boolean = false) {
     val drawable = actions.filter { it.isDrawable() }
     if (drawable.isEmpty()) return
-    Row(modifier, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+    Row(if (large) modifier.fillMaxWidth() else modifier, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-        drawable.forEach { ActionButton(it) }
+        drawable.forEach { ActionButton(it, large = large, modifier = if (large) Modifier.weight(1f) else Modifier) }
     }
 }
 
+/** A row with nothing to show: no words, no picture, nothing to tap. */
+private fun CarRow.isBlank(): Boolean =
+    title.text().isBlank() && texts.orEmpty().all { it.text().isBlank() } && image == null &&
+        toggle == null && onClickDelegate == null && actions.orEmpty().isEmpty()
+
+/**
+ * One look everywhere: solid, in the theme's own colors, whether the button sits on a card or over
+ * the map. An app that names a color for its button (a green Start) keeps it.
+ */
 @Composable
-internal fun ActionButton(action: Action) {
+internal fun ActionButton(action: Action, large: Boolean = false, modifier: Modifier = Modifier) {
+    if (action.type == Action.TYPE_APP_ICON) {
+        AppIconBadge()
+        return
+    }
     val dark = MaterialTheme.colorScheme.surface.luminanceIsDark()
     val title = action.title.text()
-    val background = action.backgroundColor.color(dark, Color.Black.copy(alpha = 0.6f))
+    val panOn by CarServices.nav.panMode.collectAsState()
+    val active = action.type == Action.TYPE_PAN && panOn
+    val scheme = MaterialTheme.colorScheme
+    val custom = action.backgroundColor?.type?.let { it != androidx.car.app.model.CarColor.TYPE_DEFAULT } == true
+    val fallback = scheme.surfaceContainerHighest
+    val background = if (active) scheme.primary else action.backgroundColor.color(dark, fallback)
+    val content = when {
+        active -> scheme.onPrimary
+        custom -> Color.White
+        else -> scheme.onSurface
+    }
     val hasGlyph = action.icon != null || action.type != Action.TYPE_CUSTOM
 
-    Surface(
+    GsIconBox(
-        color = background,
+        onClick = {
-        contentColor = Color.White,
+            if (action.type == Action.TYPE_BACK) CarServices.nav.backPressed()
-        shape = RoundedCornerShape(24.dp),
+            else if (action.type == Action.TYPE_PAN) CarServices.nav.setPanMode(!panOn)
-        modifier = Modifier.clickable(enabled = action.isEnabled) {
+            else action.onClickDelegate?.click("action")
-            action.onClickDelegate.click("action")
         },
+        modifier = modifier,
+        colors = GsColors(background, content),
+        enabled = action.isEnabled,
+        shape = if (title.isEmpty()) androidx.compose.foundation.shape.CircleShape else RoundedCornerShape(if (large) 28.dp else 24.dp),
+        latched = active,
     ) {
-        Row(
+        if (large && title.isNotEmpty()) {
-            Modifier.padding(horizontal = if (title.isEmpty()) 10.dp else 14.dp, vertical = 10.dp),
+            // The label sits dead centre on the button; the icon hangs off the left edge, so the
-            verticalAlignment = Alignment.CenterVertically,
+            // pair's uneven visual weight can't pull the words off to one side.
-        ) {
+            androidx.compose.foundation.layout.Box(
-            if (hasGlyph) CarGlyph(action.icon, Modifier.size(24.dp), standardFor(action))
+                Modifier.fillMaxWidth().padding(horizontal = 20.dp, vertical = 18.dp),
-            if (title.isNotEmpty()) {
+                contentAlignment = Alignment.Center,
+            ) {
+                if (hasGlyph) CarGlyph(action.icon, Modifier.size(30.dp).align(Alignment.CenterStart), standardFor(action))
+                Text(title, style = ChromeType.title, maxLines = 1)
+            }
+        } else if (title.isEmpty()) {
+            // Every icon-only button - back, settings, the map's zoom and locate - is the same size.
+            androidx.compose.foundation.layout.Box(Modifier.size(ICON_BUTTON_SIZE), contentAlignment = Alignment.Center) {
+                if (hasGlyph) CarGlyph(action.icon, Modifier.size(ICON_BUTTON_GLYPH), standardFor(action))
+            }
+        } else {
+            Row(
+                Modifier.padding(horizontal = 18.dp, vertical = 12.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                if (hasGlyph) CarGlyph(action.icon, Modifier.size(24.dp), standardFor(action))
                 if (hasGlyph) Spacer(Modifier.width(8.dp))
-                Text(title, style = MaterialTheme.typography.labelLarge, maxLines = 1)
+                Text(title, style = ChromeType.body, maxLines = 1)
             }
         }
     }
 }
 
+/**
+ * A large action that fires on its own after five seconds, filling to show the countdown - for
+ * the one button on a map-preview pane, where the app is proposing a single place or route and a
+ * driver glancing at the car screen has already decided. Tapping it, same as any other button,
+ * fires it at once; the fill is only ever a preview of what a touch already does.
+ */
+@Composable
+internal fun AutoStartButton(action: Action, modifier: Modifier = Modifier) {
+    var fraction by remember(action.identity()) { mutableStateOf(0f) }
+    var fired by remember(action.identity()) { mutableStateOf(false) }
+    fun fire() {
+        if (fired) return
+        fired = true
+        action.onClickDelegate.click("auto-start")
+    }
+    androidx.compose.runtime.LaunchedEffect(action.identity()) {
+        val steps = 60
+        repeat(steps) { step ->
+            kotlinx.coroutines.delay(AUTO_START_MS / steps)
+            fraction = (step + 1) / steps.toFloat()
+        }
+        fire()
+    }
+
+    val dark = MaterialTheme.colorScheme.surface.luminanceIsDark()
+    val custom = action.backgroundColor?.type?.let { it != androidx.car.app.model.CarColor.TYPE_DEFAULT } == true
+    val background = action.backgroundColor.color(dark, MaterialTheme.colorScheme.primary)
+    val content = if (custom) Color.White else MaterialTheme.colorScheme.onPrimary
+    val hasGlyph = action.icon != null
+
+    GsIconBox(
+        onClick = { fire() },
+        modifier = modifier.fillMaxWidth(),
+        // An unfilled track, solid, not the button's own colour dimmed with alpha - so the map
+        // behind never shows through however much of the five seconds is left.
+        colors = GsColors(MaterialTheme.colorScheme.surfaceContainerHighest, content),
+        enabled = action.isEnabled,
+        shape = RoundedCornerShape(28.dp),
+    ) {
+        androidx.compose.foundation.layout.Box {
+            // The countdown itself: a plain fill sweeping left to right underneath the label.
+            // matchParentSize(), not fillMaxHeight() - this Box sits beside a label Box that
+            // wraps its own content, and the outer Box sizes itself to its tallest child; a
+            // plain fillMaxHeight() here has nothing bounded to fill up to but the whole screen,
+            // which is what was stretching the whole button that tall. matchParentSize() instead
+            // takes whatever size the label ends up being, without itself voting on what that is.
+            androidx.compose.foundation.layout.Box(Modifier.matchParentSize()) {
+                androidx.compose.foundation.layout.Box(
+                    Modifier
+                        .fillMaxWidth(fraction)
+                        .fillMaxHeight()
+                        .background(background),
+                )
+            }
+            androidx.compose.foundation.layout.Box(
+                Modifier.fillMaxWidth().padding(horizontal = 20.dp, vertical = 16.dp),
+                contentAlignment = Alignment.Center,
+            ) {
+                if (hasGlyph) CarGlyph(action.icon, Modifier.size(24.dp).align(Alignment.CenterStart))
+                Text(
+                    action.title.text().ifEmpty { "Start" },
+                    style = ChromeType.title,
+                    maxLines = 1,
+                )
+            }
+        }
+    }
+}
+
+private const val AUTO_START_MS = 5_000L
+
+/** The connected app's own launcher icon, which is what the app-icon action stands for. */
+@Composable
+private fun AppIconBadge() {
+    val context = LocalContext.current
+    val pkg = CarServices.nav.appPackage
+    val icon = remember(pkg) {
+        pkg?.let {
+            runCatching {
+                context.packageManager.getApplicationIcon(it).toBitmap(96, 96).asImageBitmap()
+            }.getOrNull()
+        }
+    } ?: return
+    Image(icon, contentDescription = null, modifier = Modifier.size(36.dp).clip(RoundedCornerShape(10.dp)))
+}
+
 /** A standard Action carries no icon of its own - the host is expected to supply the glyph. */
 private fun standardFor(action: Action): Int? = when (action.type) {
     Action.TYPE_BACK -> CarIcon.TYPE_BACK
     Action.TYPE_PAN -> CarIcon.TYPE_PAN
     Action.TYPE_APP_ICON -> CarIcon.TYPE_APP_ICON
+    ACTION_TYPE_NOW_PLAYING -> ACTION_TYPE_NOW_PLAYING
     else -> null
 }
 
+/**
+ * The media "now playing" standard action, newer than the Car App Library we build against, so it
+ * has no named constant here. Spotify puts it in its header with no icon of its own.
+ */
+private const val ACTION_TYPE_NOW_PLAYING = 65542
+
 // --- icons ----------------------------------------------------------------------------------
 
 /**
@@ -216,7 +452,14 @@ private fun standardFor(action: Action): Int? = when (action.type) {
 @Composable
 internal fun CarGlyph(icon: CarIcon?, modifier: Modifier = Modifier, standard: Int? = null) {
     val context = LocalContext.current
-    val bitmap = icon.image(context)
+    // Off the main thread and cached per icon: loadDrawable() is a Binder round trip into the
+    // app's own process for a content:// icon, plus a bitmap decode - done synchronously on the
+    // composition thread for every tile on screen, that's what made a shelf of ten covers feel
+    // like it was hanging rather than loading.
+    val bitmapState by produceState<ImageBitmap?>(null, icon) {
+        value = withContext(Dispatchers.IO) { icon.image(context) }
+    }
+    val bitmap = bitmapState
     if (bitmap != null) {
         // An icon that names a tint (DEFAULT included) expects the host to colour it for the
         // surface it sits on; without this a white glyph vanishes on a light theme.
@@ -237,6 +480,7 @@ internal fun CarGlyph(icon: CarIcon?, modifier: Modifier = Modifier, standard: I
         CarIcon.TYPE_ALERT, CarIcon.TYPE_ERROR -> Icons.Filled.Warning
         // No four-way pan glyph in material-icons-core; this is the closest honest stand-in.
         CarIcon.TYPE_PAN -> Icons.Filled.Menu
+        ACTION_TYPE_NOW_PLAYING -> MediaIcons.Equalizer
         else -> null
     } ?: return
     Icon(vector, contentDescription = null, modifier = modifier)
@@ -249,8 +493,7 @@ internal fun PaneTitle(title: String) {
     if (title.isEmpty()) return
     Text(
         title,
-        style = MaterialTheme.typography.titleMedium,
+        style = ChromeType.title,
-        fontWeight = FontWeight.SemiBold,
         modifier = Modifier.padding(horizontal = 14.dp, vertical = 10.dp),
     )
 }
@@ -267,107 +510,162 @@ internal fun ItemListColumn(
     }
     if (rows.isEmpty()) {
         val message = single?.noItemsMessage.text()
-        if (message.isNotEmpty()) Text(message, Modifier.padding(14.dp))
+        if (message.isNotEmpty()) Text(message, Modifier.padding(14.dp), style = ChromeType.body)
         return
     }
+    // A list the app made selectable is a single-choice list: one option chosen, shown as a radio.
+    val onSelected = single?.onSelectedDelegate
+    val chosen = single?.selectedIndex ?: -1
     LazyColumn(modifier, contentPadding = PaddingValues(bottom = 8.dp)) {
-        items(rows) { RowItem(it) }
+        itemsIndexed(rows) { index, row ->
+            RowItem(row, onSelected?.let { RowSelection(index == chosen) { it.selected(index) } })
+        }
     }
 }
 
-/** A grid of large tappable tiles - what apps use for a home screen beside the map. */
+/** A grid of tappable tiles - what apps use for a home screen beside the map. Icons here are as
+ * often a small menu glyph (Organic Maps' Search, say) as real cover art, so the tile stays
+ * modest; [GridTile]'s own default is for the shelf case, where every tile is a photo. */
 @Composable
 internal fun GridItems(list: ItemList?, modifier: Modifier = Modifier) {
     val items = list?.items?.filterIsInstance<GridItem>().orEmpty()
     if (items.isEmpty()) return
     LazyVerticalGrid(
-        columns = GridCells.Adaptive(96.dp),
+        columns = GridCells.Adaptive(84.dp),
         modifier = modifier,
-        contentPadding = PaddingValues(horizontal = 10.dp, vertical = 6.dp),
+        contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp),
         horizontalArrangement = Arrangement.spacedBy(6.dp),
         verticalArrangement = Arrangement.spacedBy(6.dp),
     ) {
-        items(items) { item ->
+        items(items) { item -> GridTile(item, iconSize = 36.dp) }
-            Column(
+    }
-                Modifier
+}
-                    .clickable { item.onClickDelegate.click("grid item") }
+
-                    .padding(vertical = 8.dp),
+/**
-                horizontalAlignment = Alignment.CenterHorizontally,
+ * One cover-art tile: an app's own icon over a title and optional subtitle. Shared by
-            ) {
+ * [GridItems] (a whole screen of tiles, [iconSize] scaled down there to suit a plain menu glyph)
-                CarGlyph(item.image, Modifier.size(36.dp))
+ * and a section's horizontal shelf, which carries the same [GridItem] type but scrolls sideways
-                Spacer(Modifier.height(6.dp))
+ * instead of wrapping into a grid and wants its full-size cover art.
-                Text(
+ */
-                    item.title.text(),
+@Composable
-                    style = MaterialTheme.typography.labelLarge,
+internal fun GridTile(item: GridItem, modifier: Modifier = Modifier, iconSize: androidx.compose.ui.unit.Dp = 144.dp) {
-                    maxLines = 1,
+    Column(
-                    overflow = TextOverflow.Ellipsis,
+        modifier
-                )
+            .clickable { item.onClickDelegate.click("grid item") }
-                val subtitle = item.text.text()
+            .padding(vertical = 8.dp),
-                if (subtitle.isNotEmpty()) {
+        horizontalAlignment = Alignment.CenterHorizontally,
-                    Text(
+    ) {
-                        subtitle,
+        CarGlyph(item.image, Modifier.size(iconSize))
-                        style = MaterialTheme.typography.labelSmall,
+        Spacer(Modifier.height(6.dp))
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+        Text(
-                        maxLines = 1,
+            item.title.text(),
-                        overflow = TextOverflow.Ellipsis,
+            style = ChromeType.label,
-                    )
+            maxLines = 1,
-                }
+            overflow = TextOverflow.Ellipsis,
-            }
+        )
+        val subtitle = item.text.text()
+        if (subtitle.isNotEmpty()) {
+            Text(
+                subtitle,
+                style = ChromeType.label,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+/**
+ * [autoStart] is for a pane floating over a map - a place or a route the app is proposing - where
+ * a single action counts itself down rather than waiting to be pressed, on the theory that a
+ * driver glancing at the car screen has already decided. It never applies to more than one
+ * action: a pane offering a real choice (Start vs. something else) always waits to be tapped.
+ */
+@Composable
+internal fun PaneRows(pane: Pane?, modifier: Modifier = Modifier, autoStart: Boolean = false) {
+    // Some apps pad a pane with a row of blank strings; drawn, it is just a gap.
+    val rows = pane?.rows.orEmpty().filterNot { it.isBlank() }
+    val actions = pane?.actions.orEmpty().filter { it.isDrawable() }
+    Column(modifier) {
+        rows.forEach { RowItem(it, large = true) }
+        if (autoStart && actions.size == 1) {
+            AutoStartButton(actions.single(), Modifier.padding(horizontal = 14.dp, vertical = 10.dp))
+        } else {
+            ActionRow(actions, Modifier.padding(horizontal = 14.dp, vertical = 10.dp), large = true)
         }
     }
 }
 
 @Composable
-internal fun PaneRows(pane: Pane?, modifier: Modifier = Modifier) {
+internal fun RowItem(row: CarRow, selection: RowSelection? = null, large: Boolean = false) {
-    val rows = pane?.rows.orEmpty()
+    val toggle = row.toggle
-    Column(modifier) {
+    // Shown at once and corrected when the app answers with its own template, so the switch
-        rows.forEach { RowItem(it) }
+    // never lags a tap; keyed on what the app last said so its answer wins.
-        ActionRow(
+    var checked by remember(toggle?.isChecked) { mutableStateOf(toggle?.isChecked == true) }
-            pane?.actions.orEmpty(),
+    val clickable = row.isEnabled && (toggle != null || selection != null || row.onClickDelegate != null)
-            Modifier.padding(horizontal = 14.dp, vertical = 8.dp),
-        )
-    }
-}
-
-@Composable
-internal fun RowItem(row: CarRow) {
-    val clickable = row.onClickDelegate != null && row.isEnabled
     Row(
         Modifier
             .fillMaxWidth()
-            .let { if (clickable) it.clickable { row.onClickDelegate.click("row") } else it }
+            .let {
+                if (!clickable) it else it.clickable {
+                    when {
+                        toggle != null -> {
+                            checked = !checked
+                            toggle.onCheckedChangeDelegate.checkedChanged(checked)
+                        }
+                        selection != null -> selection.onPick()
+                        else -> row.onClickDelegate.click("row")
+                    }
+                }
+            }
             .padding(horizontal = 14.dp, vertical = 10.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
+        if (selection != null) {
+            RadioButton(selected = selection.selected, onClick = null)
+            Spacer(Modifier.width(12.dp))
+        }
         row.image?.let {
             CarGlyph(it, Modifier.size(28.dp))
             Spacer(Modifier.width(12.dp))
         }
+        // large only changes how much room a row gets (more lines, a bigger icon above) - the
+        // type itself is the same scale as every other row, so a pane's one row and a plain
+        // list's tenth row read as the same kind of text.
         Column(Modifier.weight(1f)) {
             Text(
                 row.title.text(),
-                style = MaterialTheme.typography.bodyLarge,
+                style = ChromeType.title,
-                maxLines = 1,
+                maxLines = if (large) 2 else 1,
                 overflow = TextOverflow.Ellipsis,
             )
-            row.texts.orEmpty().take(2).forEach { line ->
+            row.texts.orEmpty().take(if (large) 3 else 2).forEach { line ->
                 Text(
                     line.text(),
-                    style = MaterialTheme.typography.bodySmall,
+                    style = ChromeType.body,
                     color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    maxLines = 1,
+                    maxLines = if (large) 2 else 1,
                     overflow = TextOverflow.Ellipsis,
                 )
             }
         }
         ActionRow(row.actions.orEmpty())
+        if (toggle != null) {
+            Spacer(Modifier.width(8.dp))
+            Switch(checked = checked, onCheckedChange = null, enabled = row.isEnabled)
+        }
     }
 }
 
+/** A row's place in a single-choice list: whether it is the chosen one, and what picking it does. */
+internal class RowSelection(val selected: Boolean, val onPick: () -> Unit)
+
 internal fun Color.luminanceIsDark(): Boolean =
     (red * 0.299f + green * 0.587f + blue * 0.114f) < 0.5f
 
 
+
 /** True for a glyph drawn entirely in white (any transparency): a mask, not a picture. */
 private fun androidx.compose.ui.graphics.ImageBitmap.isPlainWhite(): Boolean {
     val pixels = IntArray(width * height)
@@ -381,3 +679,6 @@ private fun androidx.compose.ui.graphics.ImageBitmap.isPlainWhite(): Boolean {
     }
     return seen > 0
 }
+
+internal val ICON_BUTTON_SIZE = 54.dp
+private val ICON_BUTTON_GLYPH = 30.dp

gearslip/src/main/java/app/seb3thehacker/gearslip/car/VehicleDataScreen.kt

@@ -0,0 +1,69 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+
+/**
+ * Everything the head unit's sensor channel is willing to send, live and unfiltered - see
+ * [CarSensors] for why the labels are a best guess and the raw field dump next to each one is
+ * the part to actually trust while confirming what this unit really sends.
+ */
+@Composable
+fun VehicleDataScreen() {
+    val readings by CarSensors.readings.collectAsState()
+
+    Column(Modifier.fillMaxSize().padding(horizontal = 24.dp, vertical = 16.dp)) {
+        ScreenHeader("Vehicle data")
+        Text(
+            "Raw sensor channel from the connected head unit. Field meaning is a best guess - " +
+                "watch a row change while you do the thing (brake, drive, headlights) to confirm it.",
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.padding(top = 4.dp, bottom = 16.dp),
+        )
+
+        if (readings.isEmpty()) {
+            Text(
+                "No sensor service advertised by this head unit, or not connected.",
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            return@Column
+        }
+
+        LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            items(readings, key = { it.typeId }) { reading -> ReadingRow(reading) }
+        }
+    }
+}
+
+@Composable
+private fun ReadingRow(reading: CarSensors.Reading) {
+    Surface(color = MaterialTheme.colorScheme.surfaceContainerHigh, shape = MaterialTheme.shapes.large) {
+        Column(Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp)) {
+            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                Text(reading.typeName, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold)
+            }
+            Text(
+                reading.raw,
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/VoiceReply.kt

@@ -0,0 +1,381 @@
+package app.seb3thehacker.gearslip.car
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.os.SystemClock
+import androidx.car.app.navigation.model.NavigationTemplate
+import app.seb3thehacker.gearslip.GearslipLog
+import app.seb3thehacker.gearslip.call.CallUiState
+import app.seb3thehacker.gearslip.call.CarCalls
+import app.seb3thehacker.gearslip.host.clockTime
+import app.seb3thehacker.gearslip.host.remainingTime
+import app.seb3thehacker.gearslip.notify.CarNotification
+import app.seb3thehacker.gearslip.notify.CarNotifications
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+/**
+ * Messages by voice, the way Android Auto does it: a message is read aloud, "Do you want to
+ * reply?", a yes gets "Go ahead", the reply is read back, and it sends after a few seconds unless
+ * cancelled. Reply does the same; only once the message has just been read does it skip straight
+ * to "What's your reply?". While the reply counts down, saying "cancel" or "change it" stops it or
+ * starts it again. A quick reply sends a ready-made answer with no voice at all. Listening and speaking
+ * go through [CarAssistant], so this hears through the same microphone and recognizer.
+ *
+ * Every step runs on the main thread. Each run gets a new [run] number, and callbacks from an
+ * older run are dropped, so a cancel can never be undone by a late recognizer result.
+ */
+object VoiceReply {
+
+    enum class Phase {
+        IDLE,
+        /** Reading the message aloud. */
+        READING,
+        /** Read; the Reply button stays up for a moment in case the driver wants it. */
+        READ,
+        /** Asking "Do you want to reply?" and listening for a yes. */
+        OFFERING,
+        /** Saying "What's your reply?". */
+        ASKING,
+        LISTENING,
+        /**
+         * Reading the reply back, then counting down to [State.until] while listening for
+         * "cancel" or "change it". The countdown runs out whatever it hears.
+         */
+        CONFIRMING,
+        SENT,
+        ERROR,
+    }
+
+    data class State(
+        val phase: Phase = Phase.IDLE,
+        val target: CarNotification? = null,
+        val heard: String = "",
+        val error: String = "",
+        /**
+         * Uptime at which this step ends on its own (the card goes, or the reply sends), and how
+         * long the step was given, for the card's bar. 0 when nothing is timed.
+         */
+        val until: Long = 0L,
+        val span: Long = 0L,
+        /** While a countdown is held, how much of its bar was left, so the bar stays put. */
+        val held: Float = 0f,
+    )
+
+    const val SEND_DELAY_MS = 5_000L
+    private const val LINGER_MS = 5_000L
+    private const val SENT_MS = 2_000L
+
+    private val _state = MutableStateFlow(State())
+    val state: StateFlow<State> = _state
+
+    private val main = Handler(Looper.getMainLooper())
+    private var appContext: Context? = null
+    private var run = 0
+
+    fun init(context: Context) { appContext = context.applicationContext }
+
+    val active: Boolean get() = _state.value.phase != Phase.IDLE
+
+    /** Reads [n]'s newest messages aloud. */
+    fun read(n: CarNotification) {
+        val id = begin(State(Phase.READING, n))
+        CarAssistant.say(spoken(n)) {
+            if (id != run) return@say
+            when {
+                n.reply == null -> finish()
+                // The microphone is silent during a call, so there's no point asking.
+                CarCalls.state.value is CallUiState.Active -> idleAfterRead(id)
+                else -> offer(id)
+            }
+        }
+    }
+
+    /**
+     * "Do you want to reply?" A yes goes on to the reply; anything else ends quietly. The bar runs
+     * while it listens, so the card never looks stuck, and holds once the driver starts talking.
+     */
+    private fun offer(id: Int) {
+        _state.value = _state.value.copy(phase = Phase.OFFERING, heard = "", until = 0L, span = 0L, held = 0f)
+        CarAssistant.say("Do you want to reply?") {
+            if (id != run) return@say
+            val until = SystemClock.uptimeMillis() + OFFER_MS
+            _state.value = _state.value.copy(until = until, span = OFFER_MS)
+            // The recognizer gives up on its own; this only covers one that doesn't.
+            main.postAtTime({ if (id == run && _state.value.until != 0L) { CarAssistant.stopListening(); close() } }, until + OFFER_GRACE_MS)
+            CarAssistant.dictate(
+                onPartial = { text -> if (id == run) _state.value = _state.value.copy(heard = text) },
+                onSpeaking = {
+                    if (id != run) return@dictate
+                    val s = _state.value
+                    val left = ((s.until - SystemClock.uptimeMillis()).toFloat() / s.span).coerceIn(0.05f, 1f)
+                    _state.value = s.copy(until = 0L, span = 0L, held = left)
+                },
+                onResult = { text ->
+                    if (id != run) return@dictate
+                    if (isYes(text)) {
+                        _state.value = _state.value.copy(phase = Phase.ASKING, heard = "", until = 0L, span = 0L, held = 0f)
+                        CarAssistant.say("Go ahead.") { if (id == run) listen(id) }
+                    } else {
+                        close()
+                    }
+                },
+                // No answer counts as no: the message has been heard, so the card goes.
+                onError = { if (id == run) close() },
+            )
+        }
+    }
+
+    private fun idleAfterRead(id: Int) {
+        _state.value = _state.value.copy(phase = Phase.READ, heard = "")
+        lingerThenIdle(id)
+    }
+
+    private fun isYes(text: String): Boolean {
+        val words = words(text)
+        if (words.any { it in NO_WORDS }) return false
+        return words.any { it in YES_WORDS }
+    }
+
+    /**
+     * Reads [n] aloud and asks whether to reply, or, when the driver has just heard it, asks for
+     * the reply straight away. Then listens, reads the reply back and sends it.
+     */
+    fun reply(n: CarNotification, readFirst: Boolean = true) {
+        if (n.reply == null) {
+            val id = begin(State(Phase.ERROR, n, error = "${n.appLabel} doesn't allow replies from the car."))
+            lingerThenIdle(id)
+            return
+        }
+        // Android hands every app but the dialer a silent microphone during a call.
+        if (CarCalls.state.value is CallUiState.Active) {
+            val id = begin(State(Phase.ERROR, n, error = "Voice reply works once the call ends."))
+            lingerThenIdle(id)
+            return
+        }
+        if (!readFirst) {
+            val id = begin(State(Phase.ASKING, n))
+            ask(id)
+            return
+        }
+        // Read it, then "Do you want to reply?", the same as Read.
+        read(n)
+    }
+
+    private fun ask(id: Int) {
+        CarAssistant.say("What's your reply?") {
+            if (id == run) listen(id)
+        }
+    }
+
+    private fun listen(id: Int) {
+        _state.value = _state.value.copy(phase = Phase.LISTENING, heard = "")
+        CarAssistant.dictate(
+            onPartial = { text -> if (id == run) _state.value = _state.value.copy(heard = text) },
+            onResult = { text -> if (id == run) confirm(id, text) },
+            onError = { message ->
+                if (id != run) return@dictate
+                _state.value = _state.value.copy(phase = Phase.ERROR, error = message)
+                lingerThenIdle(id)
+            },
+        )
+    }
+
+    private fun confirm(id: Int, text: String) {
+        _state.value = _state.value.copy(phase = Phase.CONFIRMING, heard = text, until = 0L, span = 0L, held = 0f)
+        // The countdown starts once the driver has heard the whole reply, not while it's read out.
+        CarAssistant.say("Sending: $text") {
+            if (id != run) return@say
+            startCountdown(id, SEND_DELAY_MS)
+            // A moment for the read-back to finish playing in the car before the microphone opens.
+            main.postDelayed({ if (id == run) listenForCommand(id) }, ECHO_MS)
+        }
+    }
+
+    /** Sends in [ms]. */
+    private fun startCountdown(id: Int, ms: Long) {
+        val sendAt = SystemClock.uptimeMillis() + ms
+        _state.value = _state.value.copy(until = sendAt, span = ms, held = 0f)
+        main.removeCallbacksAndMessages(SEND_TOKEN)
+        main.postAtTime({ if (id == run) send() }, SEND_TOKEN, sendAt)
+    }
+
+    /**
+     * Listens through the countdown for "cancel", "change it" or "send". The countdown never
+     * pauses: in a noisy car it held for road noise and the radio, and the reply never went.
+     */
+    private fun listenForCommand(id: Int) {
+        CarAssistant.dictate(
+            onPartial = {},
+            cue = false,
+            onResult = { text ->
+                if (id != run) return@dictate
+                when (command(text)) {
+                    Command.CANCEL -> {
+                        close()
+                        CarAssistant.say("Not sent.") {}
+                    }
+                    Command.CHANGE -> {
+                        main.removeCallbacksAndMessages(SEND_TOKEN)
+                        _state.value = _state.value.copy(phase = Phase.ASKING, heard = "", until = 0L, span = 0L, held = 0f)
+                        ask(id)
+                    }
+                    Command.SEND -> send()
+                    // Talk that wasn't meant for us, a passenger or the radio: keep listening, so a
+                    // "cancel" after it still lands before the countdown runs out.
+                    null -> listenForCommand(id)
+                }
+            },
+            // Silence ends the recognizer before the countdown does: listen again until it sends.
+            onError = {
+                if (id != run) return@dictate
+                // A short gap, so a recognizer that fails at once can't spin.
+                main.postDelayed({ if (id == run) listenForCommand(id) }, RELISTEN_MS)
+            },
+        )
+    }
+
+    private enum class Command { CANCEL, CHANGE, SEND }
+
+    private fun command(text: String): Command? {
+        val words = words(text)
+        return when {
+            words.any { it in CANCEL_WORDS } -> Command.CANCEL
+            words.any { it in CHANGE_WORDS } -> Command.CHANGE
+            words.any { it in SEND_WORDS } -> Command.SEND
+            else -> null
+        }
+    }
+
+    private fun words(text: String) = text.lowercase().split(Regex("[^a-z']+")).filter { it.isNotEmpty() }
+
+    /**
+     * Ready-made replies for a tap instead of a voice reply. The first gives the arrival time when
+     * the map is following a route.
+     */
+    fun quickReplies(): List<String> = listOfNotNull(etaReply(), "Driving, I'll reply soon.", "On my way.")
+
+    private fun etaReply(): String? {
+        val estimate = (CarServices.nav.template.value as? NavigationTemplate)?.destinationTravelEstimate ?: return null
+        val at = estimate.arrivalTimeAtDestination.clockTime()
+        val left = remainingTime(estimate.remainingTimeSeconds)
+        return when {
+            at.isNotEmpty() -> "Driving, I'll be there around $at."
+            left.isNotEmpty() -> "Driving, I'll be there in about $left."
+            else -> null
+        }
+    }
+
+    /** Sends [text] to [n] straight away, as if it had been said and confirmed. */
+    fun quickReply(n: CarNotification, text: String) {
+        if (n.reply == null) return
+        begin(State(Phase.CONFIRMING, n, heard = text))
+        send()
+    }
+
+    /** Sends a reply that's counting down, without waiting for the rest of it. */
+    fun sendNow() {
+        if (_state.value.phase == Phase.CONFIRMING) send()
+    }
+
+    private fun send() {
+        val s = _state.value
+        val n = s.target ?: return finish()
+        val context = appContext ?: return finish()
+        val id = ++run
+        CarAssistant.stopListening()
+        CarAssistant.stopSpeaking()
+        if (CarNotifications.reply(context, n, s.heard.trim())) {
+            GearslipLog.i("voice reply: sent to ${n.appLabel}")
+            CarAssistant.say("Message sent.") {}
+            CarNotifications.dismissPopup(n.id)
+            _state.value = s.copy(phase = Phase.SENT, until = SystemClock.uptimeMillis() + SENT_MS, span = SENT_MS, held = 0f)
+            main.postDelayed({ if (id == run) finish() }, SENT_MS)
+        } else {
+            _state.value = s.copy(phase = Phase.ERROR, error = "${n.appLabel} withdrew the reply. Open the app on the phone to answer.")
+            lingerThenIdle(id)
+        }
+    }
+
+    /** Stops wherever it is. Nothing is sent, and the message card closes. */
+    fun cancel() {
+        if (!active) return
+        CarAssistant.stopListening()
+        CarAssistant.stopSpeaking()
+        close()
+    }
+
+    /**
+     * Ends without sending and takes the message card with it. Without this the card's own popup
+     * came back with a fresh bar, as if the message had just arrived.
+     */
+    private fun close() {
+        _state.value.target?.let { CarNotifications.dismissPopup(it.id) }
+        finish()
+    }
+
+    /**
+     * The steering wheel's voice key. With a message on screen it answers that message, and
+     * during a countdown it sends straight away. Returns false when there's nothing to answer, so
+     * the key can start the assistant instead.
+     */
+    fun onVoiceKey(): Boolean {
+        val s = _state.value
+        when (s.phase) {
+            // Already heard, so straight to the reply.
+            Phase.READ, Phase.READING, Phase.OFFERING, Phase.ERROR -> s.target?.let { reply(it, readFirst = false); return true }
+            Phase.CONFIRMING -> { sendNow(); return true }
+            Phase.ASKING, Phase.LISTENING, Phase.SENT -> return true
+            Phase.IDLE -> Unit
+        }
+        val popup = CarNotifications.popup.value ?: return false
+        if (popup.reply == null) return false
+        reply(popup)
+        return true
+    }
+
+    private fun begin(state: State): Int {
+        CarAssistant.stopListening()
+        CarAssistant.stopSpeaking()
+        main.removeCallbacksAndMessages(null)
+        _state.value = state
+        return ++run
+    }
+
+    private fun lingerThenIdle(id: Int) {
+        _state.value = _state.value.copy(until = SystemClock.uptimeMillis() + LINGER_MS, span = LINGER_MS, held = 0f)
+        main.postDelayed({ if (id == run) finish() }, LINGER_MS)
+    }
+
+    private fun finish() {
+        run++
+        main.removeCallbacksAndMessages(null)
+        _state.value = State()
+    }
+
+    /** "Alex says: ..." or, in a group, "Sam in Climbing says: ...", for the newest messages. */
+    private fun spoken(n: CarNotification): String {
+        val from = n.title.ifBlank { n.appLabel }
+        val lines = n.lines.filter { it.sender != null }.takeLast(n.burst.coerceIn(1, MAX_READ))
+        if (lines.isEmpty()) return "$from says: ${n.text}"
+        return lines.joinToString(". ") { line ->
+            val who = if (n.isGroup) "${line.sender} in $from" else from
+            "$who says: ${line.text}"
+        }
+    }
+
+    private const val MAX_READ = 3
+    private val YES_WORDS = setOf("yes", "yeah", "yep", "yup", "sure", "ok", "okay", "reply", "please")
+    private val NO_WORDS = setOf("no", "nope", "nah", "cancel", "don't", "stop")
+    private val CANCEL_WORDS = setOf("cancel", "stop", "don't", "no", "nope")
+    private val CHANGE_WORDS = setOf("change", "redo", "again", "edit", "wrong", "fix")
+    private val SEND_WORDS = setOf("send", "yes", "yeah", "ok", "okay", "go")
+
+    private val SEND_TOKEN = Any()
+    private const val ECHO_MS = 300L
+    /** How long "Do you want to reply?" waits for an answer: the start beep, then the engine's silence limit. */
+    private const val OFFER_MS = 6_500L
+    private const val OFFER_GRACE_MS = 1_500L
+    private const val RELISTEN_MS = 400L
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/WavyProgress.kt

@@ -1,92 +0,0 @@
-package app.seb3thehacker.gearslip.car
-
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.RepeatMode
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.gestures.detectHorizontalDragGestures
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.StrokeCap
-import androidx.compose.ui.graphics.drawscope.Stroke
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.unit.dp
-import kotlin.math.PI
-import kotlin.math.sin
-
-/**
- * A progress bar whose played part is a wave, and which flattens out while paused.
- *
- * The wave runs only while [playing], so a paused player costs the encoder nothing. Tapping or
- * dragging seeks; the position is committed on release rather than on every pixel of a drag,
- * because each commit is a request to the media app.
- */
-@Composable
-fun WavyProgress(
-    fraction: Float,
-    playing: Boolean,
-    onSeek: (Float) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    val played = MaterialTheme.colorScheme.primary
-    val remaining = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.3f)
-    val amplitude by animateFloatAsState(if (playing) 1f else 0f, tween(400), label = "wave")
-    val phase = if (playing) {
-        rememberInfiniteTransition(label = "phase").animateFloat(
-            0f, (2 * PI).toFloat(),
-            infiniteRepeatable(tween(1400, easing = LinearEasing), RepeatMode.Restart),
-            label = "phase",
-        ).value
-    } else 0f
-
-    var dragging by remember { mutableStateOf<Float?>(null) }
-    val shown = (dragging ?: fraction).coerceIn(0f, 1f)
-
-    Canvas(
-        modifier
-            .fillMaxWidth()
-            .height(32.dp)
-            .pointerInput(Unit) { detectTapGestures { onSeek((it.x / size.width).coerceIn(0f, 1f)) } }
-            .pointerInput(Unit) {
-                detectHorizontalDragGestures(
-                    onDragStart = { dragging = (it.x / size.width).coerceIn(0f, 1f) },
-                    onDragEnd = { dragging?.let(onSeek); dragging = null },
-                    onDragCancel = { dragging = null },
-                ) { change, _ -> dragging = (change.position.x / size.width).coerceIn(0f, 1f) }
-            },
-    ) {
-        val stroke = 4.dp.toPx()
-        val mid = size.height / 2
-        val end = size.width * shown
-        val wavelength = 22.dp.toPx()
-        val amp = 3.5.dp.toPx() * amplitude
-
-        // Unplayed part: a straight line, so the wave reads as "this much is done".
-        drawLine(remaining, Offset(end, mid), Offset(size.width, mid), stroke, StrokeCap.Round)
-
-        val wave = Path().apply {
-            moveTo(0f, mid + amp * sin(phase.toDouble()).toFloat())
-            var x = 0f
-            while (x < end) {
-                x = minOf(end, x + 2f)
-                lineTo(x, mid + amp * sin(2 * PI * x / wavelength + phase).toFloat())
-            }
-        }
-        drawPath(wave, played, style = Stroke(stroke, cap = StrokeCap.Round))
-        drawLine(played, Offset(end, mid - 10.dp.toPx()), Offset(end, mid + 10.dp.toPx()), stroke, StrokeCap.Round)
-    }
-}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/Weather.kt

@@ -0,0 +1,215 @@
+package app.seb3thehacker.gearslip.car
+
+import android.Manifest
+import android.content.Context
+import android.content.pm.PackageManager
+import android.location.Geocoder
+import android.location.Location
+import android.location.LocationManager
+import app.seb3thehacker.gearslip.GearslipLog
+import java.net.HttpURLConnection
+import java.net.URL
+import java.util.Locale
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.Executors
+import java.util.concurrent.TimeUnit
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import org.json.JSONObject
+
+class HourForecast(val time: Long, val temp: Int, val code: Int, val isDay: Boolean, val rainChance: Int)
+
+class DayForecast(val date: Long, val high: Int, val low: Int, val code: Int, val rainChance: Int)
+
+class WeatherData(
+    val place: String,
+    val temp: Int,
+    val feelsLike: Int,
+    val code: Int,
+    val isDay: Boolean,
+    val humidity: Int,
+    val wind: Int,
+    val tempUnit: String,
+    val windUnit: String,
+    val hours: List<HourForecast>,
+    val days: List<DayForecast>,
+    val fetchedAt: Long,
+)
+
+sealed interface WeatherState {
+    data object Loading : WeatherState
+    data class Unavailable(val reason: String) : WeatherState
+    data class Ready(val data: WeatherData) : WeatherState
+}
+
+/**
+ * Current weather and a week's forecast for wherever the phone is, from Open-Meteo (free, no
+ * key or account; the data is CC BY 4.0, so the weather screen credits it).
+ *
+ * The location is the phone's last fix if it is recent, otherwise a fresh one is requested, so
+ * a phone that has been idle does not leave the card on "unavailable".
+ */
+object Weather {
+
+    private const val TTL_MS = 30 * 60 * 1000L
+    private const val FIX_MAX_AGE_MS = 30 * 60 * 1000L
+    private const val FIX_TIMEOUT_S = 12L
+
+    private val flow = MutableStateFlow<WeatherState>(WeatherState.Loading)
+    val state: StateFlow<WeatherState> = flow
+
+    private val io = Executors.newSingleThreadExecutor { Thread(it, "gearslip-weather").apply { isDaemon = true } }
+
+    private var placeCache: Pair<String, String>? = null // rounded "lat,lon" to place name
+
+    /** Runs off the main thread. Fresh data younger than [TTL_MS] is kept unless [force]. */
+    fun refresh(context: Context, force: Boolean = false) {
+        val current = flow.value
+        if (!force && current is WeatherState.Ready && System.currentTimeMillis() - current.data.fetchedAt < TTL_MS) return
+        val app = context.applicationContext
+        io.execute { load(app) }
+    }
+
+    @Synchronized
+    private fun load(context: Context) {
+        // Keep showing the old reading while a new one loads; only the first load shows a spinner.
+        val location = locate(context)
+        if (location == null) {
+            if (flow.value !is WeatherState.Ready) {
+                val allowed = hasLocationPermission(context)
+                flow.value = WeatherState.Unavailable(
+                    if (allowed) "Waiting for a location fix." else "Allow location for Gearslip on the phone to see the weather.",
+                )
+            }
+            return
+        }
+        val data = runCatching { fetch(context, location) }
+            // Only the kind of error: some messages carry the request URL, and that holds the location.
+            .onFailure { GearslipLog.w("weather fetch failed: ${it.javaClass.simpleName}") }
+            .getOrNull()
+        if (data != null) {
+            flow.value = WeatherState.Ready(data)
+            // No place name: logs get shared in bug reports.
+            GearslipLog.i("weather: loaded")
+        }
+        else if (flow.value !is WeatherState.Ready) flow.value = WeatherState.Unavailable("Could not reach the weather service.")
+    }
+
+    // --- location -------------------------------------------------------------------------
+
+    private fun hasLocationPermission(context: Context) =
+        context.checkSelfPermission(Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED ||
+            context.checkSelfPermission(Manifest.permission.ACCESS_COARSE_LOCATION) == PackageManager.PERMISSION_GRANTED
+
+    private fun locate(context: Context): Location? {
+        if (!hasLocationPermission(context)) return null
+        val manager = context.getSystemService(LocationManager::class.java) ?: return null
+        val known = manager.allProviders
+            .mapNotNull { runCatching { manager.getLastKnownLocation(it) }.getOrNull() }
+            .maxByOrNull { it.time }
+        if (known != null && System.currentTimeMillis() - known.time < FIX_MAX_AGE_MS) return known
+
+        val provider = listOf(LocationManager.FUSED_PROVIDER, LocationManager.NETWORK_PROVIDER, LocationManager.GPS_PROVIDER)
+            .firstOrNull { it in manager.allProviders && manager.isProviderEnabled(it) }
+            ?: return known
+        val latch = CountDownLatch(1)
+        var fresh: Location? = null
+        runCatching {
+            manager.getCurrentLocation(provider, null, io) { fresh = it; latch.countDown() }
+            latch.await(FIX_TIMEOUT_S, TimeUnit.SECONDS)
+        }.onFailure { GearslipLog.w("weather: fresh fix failed: ${it.message}") }
+        // A stale fix still gives the right city, which is all a forecast needs.
+        return fresh ?: known
+    }
+
+    private fun placeName(context: Context, location: Location): String {
+        val key = "%.2f,%.2f".format(Locale.US, location.latitude, location.longitude)
+        placeCache?.let { if (it.first == key) return it.second }
+        val name = runCatching {
+            if (!Geocoder.isPresent()) return@runCatching null
+            @Suppress("DEPRECATION")
+            Geocoder(context, Locale.getDefault()).getFromLocation(location.latitude, location.longitude, 1)
+                ?.firstOrNull()?.let { it.locality ?: it.subAdminArea ?: it.adminArea }
+        }.getOrNull() ?: "%.2f, %.2f".format(Locale.US, location.latitude, location.longitude)
+        placeCache = key to name
+        return name
+    }
+
+    // --- network --------------------------------------------------------------------------
+
+    private fun fetch(context: Context, location: Location): WeatherData {
+        val imperial = CarSettings.imperial()
+        val url = URL(
+            "https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}" +
+                "&current=temperature_2m,apparent_temperature,relative_humidity_2m,weather_code,wind_speed_10m,is_day" +
+                "&hourly=temperature_2m,weather_code,precipitation_probability,is_day" +
+                "&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max" +
+                "&timezone=auto&timeformat=unixtime&forecast_days=7" +
+                if (imperial) "&temperature_unit=fahrenheit&wind_speed_unit=mph" else "",
+        )
+        val body = (url.openConnection() as HttpURLConnection).run {
+            connectTimeout = 6_000
+            readTimeout = 8_000
+            inputStream.bufferedReader().use { it.readText() }
+        }
+        val json = JSONObject(body)
+        val cur = json.getJSONObject("current")
+
+        val hourly = json.getJSONObject("hourly")
+        val times = hourly.getJSONArray("time")
+        val nowSec = System.currentTimeMillis() / 1000
+        val start = (0 until times.length()).firstOrNull { times.getLong(it) >= nowSec - 3600 } ?: 0
+        val hours = (start until minOf(start + 12, times.length())).map { i ->
+            HourForecast(
+                time = times.getLong(i) * 1000,
+                temp = Math.round(hourly.getJSONArray("temperature_2m").getDouble(i)).toInt(),
+                code = hourly.getJSONArray("weather_code").getInt(i),
+                isDay = hourly.getJSONArray("is_day").getInt(i) == 1,
+                rainChance = hourly.getJSONArray("precipitation_probability").optInt(i, 0),
+            )
+        }
+
+        val daily = json.getJSONObject("daily")
+        val dates = daily.getJSONArray("time")
+        val days = (0 until dates.length()).map { i ->
+            DayForecast(
+                date = dates.getLong(i) * 1000,
+                high = Math.round(daily.getJSONArray("temperature_2m_max").getDouble(i)).toInt(),
+                low = Math.round(daily.getJSONArray("temperature_2m_min").getDouble(i)).toInt(),
+                code = daily.getJSONArray("weather_code").getInt(i),
+                rainChance = daily.getJSONArray("precipitation_probability_max").optInt(i, 0),
+            )
+        }
+
+        return WeatherData(
+            place = placeName(context, location),
+            temp = Math.round(cur.getDouble("temperature_2m")).toInt(),
+            feelsLike = Math.round(cur.getDouble("apparent_temperature")).toInt(),
+            code = cur.getInt("weather_code"),
+            isDay = cur.getInt("is_day") == 1,
+            humidity = cur.getInt("relative_humidity_2m"),
+            wind = Math.round(cur.getDouble("wind_speed_10m")).toInt(),
+            tempUnit = if (imperial) "°F" else "°C",
+            windUnit = if (imperial) "mph" else "km/h",
+            hours = hours,
+            days = days,
+            fetchedAt = System.currentTimeMillis(),
+        )
+    }
+
+    /** Open-Meteo's WMO weather codes, in words. */
+    fun describe(code: Int): String = when (code) {
+        0 -> "Clear"
+        1 -> "Mostly clear"
+        2 -> "Partly cloudy"
+        3 -> "Overcast"
+        45, 48 -> "Fog"
+        in 51..57 -> "Drizzle"
+        in 61..67 -> "Rain"
+        in 71..77 -> "Snow"
+        in 80..82 -> "Rain showers"
+        in 85..86 -> "Snow showers"
+        in 95..99 -> "Thunderstorm"
+        else -> "-"
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/WeatherIcon.kt

@@ -0,0 +1,101 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.math.cos
+import kotlin.math.sin
+
+private val SUN = Color(0xFFFFB300)
+private val MOON = Color(0xFFCFD8DC)
+private val CLOUD = Color(0xFF90A4AE)
+private val RAIN = Color(0xFF29B6F6)
+private val SNOW = Color(0xFF81D4FA)
+private val BOLT = Color(0xFFFFD54F)
+
+/** Sun, moon, cloud, rain, snow, storm or fog for a WMO weather code. Drawn, so it needs no icon pack. */
+@Composable
+fun WeatherIcon(code: Int, isDay: Boolean, size: Dp = 28.dp, modifier: Modifier = Modifier) {
+    Canvas(modifier.size(size)) {
+        when (code) {
+            0 -> if (isDay) sun(center, this.size.minDimension * 0.5f) else moon(center, this.size.minDimension * 0.5f)
+            1, 2 -> {
+                if (isDay) sun(Offset(this.size.width * 0.38f, this.size.height * 0.36f), this.size.minDimension * 0.36f)
+                else moon(Offset(this.size.width * 0.38f, this.size.height * 0.36f), this.size.minDimension * 0.36f)
+                cloud(Offset(this.size.width * 0.06f, this.size.height * 0.34f), Size(this.size.width * 0.9f, this.size.height * 0.6f))
+            }
+            3 -> cloud(Offset(0f, this.size.height * 0.2f), Size(this.size.width, this.size.height * 0.7f))
+            45, 48 -> fog()
+            in 71..77, in 85..86 -> precip(SNOW, dots = true)
+            in 95..99 -> storm()
+            else -> precip(RAIN, dots = false)
+        }
+    }
+}
+
+private fun DrawScope.sun(c: Offset, r: Float) {
+    drawCircle(SUN, r * 0.55f, c)
+    val stroke = r * 0.14f
+    for (i in 0 until 8) {
+        val a = Math.toRadians(i * 45.0)
+        drawLine(
+            SUN, c + Offset(cos(a).toFloat(), sin(a).toFloat()) * (r * 0.75f),
+            c + Offset(cos(a).toFloat(), sin(a).toFloat()) * r, stroke, StrokeCap.Round,
+        )
+    }
+}
+
+private fun DrawScope.moon(c: Offset, r: Float) {
+    val disc = Path().apply { addOval(androidx.compose.ui.geometry.Rect(c, r * 0.62f)) }
+    val bite = Path().apply { addOval(androidx.compose.ui.geometry.Rect(c + Offset(r * 0.32f, -r * 0.22f), r * 0.55f)) }
+    drawPath(Path.combine(androidx.compose.ui.graphics.PathOperation.Difference, disc, bite), MOON)
+}
+
+private fun DrawScope.cloud(topLeft: Offset, s: Size) {
+    val h = s.height
+    drawCircle(CLOUD, h * 0.42f, topLeft + Offset(s.width * 0.3f, h * 0.55f))
+    drawCircle(CLOUD, h * 0.55f, topLeft + Offset(s.width * 0.55f, h * 0.42f))
+    drawCircle(CLOUD, h * 0.38f, topLeft + Offset(s.width * 0.78f, h * 0.62f))
+    drawRoundRect(CLOUD, topLeft + Offset(s.width * 0.28f, h * 0.55f), Size(s.width * 0.52f, h * 0.45f),
+        androidx.compose.ui.geometry.CornerRadius(h * 0.2f))
+}
+
+private fun DrawScope.precip(color: Color, dots: Boolean) {
+    cloud(Offset(0f, 0f), Size(size.width, size.height * 0.62f))
+    for (i in 0 until 3) {
+        val x = size.width * (0.28f + 0.22f * i)
+        val y = size.height * 0.72f
+        if (dots) drawCircle(color, size.width * 0.045f, Offset(x, y + size.height * 0.08f))
+        else drawLine(color, Offset(x, y), Offset(x - size.width * 0.06f, y + size.height * 0.2f), size.width * 0.07f, StrokeCap.Round)
+    }
+}
+
+private fun DrawScope.storm() {
+    cloud(Offset(0f, 0f), Size(size.width, size.height * 0.62f))
+    val w = size.width
+    val h = size.height
+    val bolt = Path().apply {
+        moveTo(w * 0.55f, h * 0.55f); lineTo(w * 0.36f, h * 0.82f); lineTo(w * 0.5f, h * 0.82f)
+        lineTo(w * 0.42f, h * 1f); lineTo(w * 0.66f, h * 0.7f); lineTo(w * 0.52f, h * 0.7f); close()
+    }
+    drawPath(bolt, BOLT)
+}
+
+private fun DrawScope.fog() {
+    val stroke = Stroke(width = size.height * 0.09f, cap = StrokeCap.Round)
+    for (i in 0 until 4) {
+        val y = size.height * (0.25f + 0.17f * i)
+        val inset = if (i % 2 == 0) 0.1f else 0.2f
+        drawLine(CLOUD, Offset(size.width * inset, y), Offset(size.width * (1f - inset), y), stroke.width, stroke.cap)
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/WeatherScreen.kt

@@ -0,0 +1,129 @@
+package app.seb3thehacker.gearslip.car
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import java.text.DateFormat
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+
+/** The weather in full: now, the next twelve hours and the week. Opened from the nav bar or the dashboard. */
+@Composable
+fun WeatherScreen() {
+    val context = LocalContext.current.applicationContext
+    val state by Weather.state.collectAsState()
+    LaunchedEffect(Unit) { Weather.refresh(context) }
+
+    Column(
+        Modifier.fillMaxSize().verticalScroll(rememberScrollState()).padding(horizontal = 24.dp, vertical = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(20.dp),
+    ) {
+        ScreenHeader("Weather")
+        when (val s = state) {
+            WeatherState.Loading -> Text("Getting the weather…", style = MaterialTheme.typography.titleMedium)
+            is WeatherState.Unavailable -> Text(
+                s.reason, style = MaterialTheme.typography.titleMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            is WeatherState.Ready -> Forecast(s.data)
+        }
+    }
+}
+
+@Composable
+private fun Forecast(w: WeatherData) {
+    Text(w.place, style = MaterialTheme.typography.headlineMedium, fontWeight = FontWeight.Bold)
+
+    Surface(color = MaterialTheme.colorScheme.surfaceContainerHigh, shape = MaterialTheme.shapes.extraLarge) {
+        Row(
+            Modifier.fillMaxWidth().padding(24.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(24.dp),
+        ) {
+            WeatherIcon(w.code, w.isDay, size = 88.dp)
+            Column {
+                Text("${w.temp}${w.tempUnit}", fontSize = 56.sp, fontWeight = FontWeight.Bold)
+                Text(Weather.describe(w.code), style = MaterialTheme.typography.titleLarge)
+            }
+            Spacer(Modifier.weight(1f))
+            Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                Text("Feels like ${w.feelsLike}${w.tempUnit}", style = MaterialTheme.typography.bodyLarge)
+                Text("Humidity ${w.humidity}%", style = MaterialTheme.typography.bodyLarge)
+                Text("Wind ${w.wind} ${w.windUnit}", style = MaterialTheme.typography.bodyLarge)
+            }
+        }
+    }
+
+    Text("Next hours", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.primary)
+    LazyRow(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+        items(w.hours) { h ->
+            Surface(color = MaterialTheme.colorScheme.surfaceContainerHigh, shape = MaterialTheme.shapes.large) {
+                Column(
+                    Modifier.width(84.dp).padding(vertical = 12.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(6.dp),
+                ) {
+                    Text(
+                        DateFormat.getTimeInstance(DateFormat.SHORT).format(Date(h.time)).replace(":00", ""),
+                        style = MaterialTheme.typography.labelLarge,
+                    )
+                    WeatherIcon(h.code, h.isDay, size = 32.dp)
+                    Text("${h.temp}°", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold)
+                    Text(
+                        if (h.rainChance > 0) "${h.rainChance}%" else " ",
+                        style = MaterialTheme.typography.labelSmall, color = MaterialTheme.colorScheme.primary,
+                    )
+                }
+            }
+        }
+    }
+
+    Text("This week", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.primary)
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        w.days.forEachIndexed { i, d ->
+            Surface(color = MaterialTheme.colorScheme.surfaceContainerHigh, shape = MaterialTheme.shapes.large) {
+                Row(
+                    Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 10.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    Text(
+                        if (i == 0) "Today" else SimpleDateFormat("EEEE", Locale.getDefault()).format(Date(d.date)),
+                        Modifier.width(120.dp), style = MaterialTheme.typography.bodyLarge, fontWeight = FontWeight.SemiBold,
+                    )
+                    WeatherIcon(d.code, true, size = 28.dp)
+                    Text(Weather.describe(d.code), Modifier.weight(1f), style = MaterialTheme.typography.bodyMedium)
+                    if (d.rainChance > 0) Text("${d.rainChance}%", color = MaterialTheme.colorScheme.primary)
+                    Text("${d.low}° / ${d.high}°", style = MaterialTheme.typography.bodyLarge)
+                }
+            }
+        }
+    }
+    Text(
+        "Weather data by Open-Meteo.com (CC BY 4.0)",
+        style = MaterialTheme.typography.labelSmall, color = MaterialTheme.colorScheme.onSurfaceVariant,
+    )
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/WebApp.kt

@@ -1,11 +1,17 @@
 package app.seb3thehacker.gearslip.car
 
+import android.os.Handler
+import android.os.Looper
+import android.webkit.JavascriptInterface
 import android.webkit.WebResourceError
 import android.webkit.WebResourceRequest
 import android.webkit.WebResourceResponse
 import android.webkit.WebView
 import android.webkit.WebViewClient
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.ui.unit.dp
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
@@ -15,16 +21,25 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.viewinterop.AndroidView
 import app.seb3thehacker.gearslip.GearslipLog
+import org.json.JSONObject
 
 /**
  * A browser inside the car UI. [content] is a URL, or raw HTML when it does not look like one.
  * The bottom bar's Back walks the page history first and only leaves the app at the start.
+ *
+ * A page's own text inputs can't call up the phone's IME: the car UI lives in a Presentation on
+ * a virtual display, and the platform's soft keyboard has nowhere sensible to appear there (see
+ * [CarKeyboard]'s doc comment - every other text field in this app already draws its own for the
+ * same reason). [FOCUS_TRACKING_JS] reports focus/blur on the page's editable elements, and
+ * [CarKeyboard] edits the focused one back through injected JS instead of through the DOM's own
+ * native input path, which this Presentation can't reach.
  */
 @Composable
 fun WebApp(content: String) {
     val navigator = LocalCarNavigator.current
     val darkOutside = LocalDarkOutside.current
     var web by remember { mutableStateOf<WebView?>(null) }
+    var fieldText by remember { mutableStateOf<String?>(null) }
 
     DisposableEffect(web) {
         navigator.backInterceptor = {
@@ -39,32 +54,55 @@ fun WebApp(content: String) {
         onDispose { navigator.backInterceptor = null }
     }
 
-    AndroidView(
+    Column(Modifier.fillMaxSize()) {
-        modifier = Modifier.fillMaxSize(),
+        // Back steps through the page's history first (the interceptor above), then leaves.
-        factory = { context ->
+        ScreenHeader("Web", Modifier.padding(horizontal = 16.dp, vertical = 8.dp))
-            WebView(context).apply {
+        AndroidView(
-                settings.javaScriptEnabled = true
+            modifier = Modifier.weight(1f).fillMaxSize(),
-                settings.domStorageEnabled = true
+            factory = { context ->
-                settings.loadWithOverviewMode = true
+                WebView(context).apply {
-                settings.useWideViewPort = true
+                    settings.javaScriptEnabled = true
-                webViewClient = LoggingClient()
+                    settings.domStorageEnabled = true
-                if (content.startsWith("http://") || content.startsWith("https://")) {
+                    settings.loadWithOverviewMode = true
-                    loadUrl(content)
+                    settings.useWideViewPort = true
-                } else {
+                    webViewClient = LoggingClient()
-                    loadDataWithBaseURL(null, content, "text/html", "utf-8", null)
+                    addJavascriptInterface(
+                        FieldFocusBridge(onFocus = { fieldText = it }, onBlur = { fieldText = null }),
+                        "GearslipField",
+                    )
+                    if (content.startsWith("http://") || content.startsWith("https://")) {
+                        loadUrl(content)
+                    } else {
+                        loadDataWithBaseURL(null, content, "text/html", "utf-8", null)
+                    }
+                    web = this
                 }
-                web = this
+            },
-            }
+            // Pages that honour it follow the darkness outside; a first, tweakable use of the signal.
-        },
+            update = { it.settings.isAlgorithmicDarkeningAllowed = darkOutside },
-        // Pages that honour it follow the darkness outside; a first, tweakable use of the signal.
+            onRelease = { it.destroy() },
-        update = { it.settings.isAlgorithmicDarkeningAllowed = darkOutside },
+        )
-        onRelease = { it.destroy() },
+        fieldText?.let { text ->
-    )
+            CarKeyboard(
+                text = text,
+                onTextChange = { updated ->
+                    fieldText = updated
+                    web?.evaluateJavascript(setFieldValueJs(updated), null)
+                },
+                onSubmit = { web?.evaluateJavascript(SUBMIT_FIELD_JS, null) },
+                onDismiss = {
+                    fieldText = null
+                    web?.evaluateJavascript(BLUR_FIELD_JS, null)
+                },
+            )
+        }
+    }
 }
 
 private class LoggingClient : WebViewClient() {
     override fun onPageFinished(view: WebView?, url: String?) {
         GearslipLog.i("car web page loaded: $url")
+        view?.evaluateJavascript(FOCUS_TRACKING_JS, null)
     }
 
     // onPageFinished fires for error pages too, so without this a blocked load (missing
@@ -81,3 +119,74 @@ private class LoggingClient : WebViewClient() {
         }
     }
 }
+
+/** Tells Kotlin when an editable element on the page gains or loses focus, so [CarKeyboard] can show. */
+private class FieldFocusBridge(private val onFocus: (String) -> Unit, private val onBlur: () -> Unit) {
+    private val main = Handler(Looper.getMainLooper())
+
+    // WebView calls into this from its own thread, never Compose's.
+    @JavascriptInterface
+    fun focused(value: String) { main.post { onFocus(value) } }
+
+    @JavascriptInterface
+    fun blurred() { main.post { onBlur() } }
+}
+
+// Plain `el.value = x` never reaches a React-controlled input: React replaces the native value
+// setter with its own to track edits, so a direct assignment sets the DOM attribute but leaves
+// React's own state (and anything bound to it, like a search box's query) unaware. Calling the
+// *native* setter through the prototype, the same trick browser extensions use, is what actually
+// notifies it once the 'input' event fires.
+private fun setFieldValueJs(value: String) = """
+    (function() {
+        var el = document.activeElement;
+        if (!el) return;
+        var proto = el.tagName === 'TEXTAREA' ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
+        var setter = Object.getOwnPropertyDescriptor(proto, 'value');
+        if (setter && setter.set) { setter.set.call(el, ${JSONObject.quote(value)}); } else { el.value = ${JSONObject.quote(value)}; }
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+    })();
+""".trimIndent()
+
+// Fires a real Enter keydown first - the same event a site's own JS would see from a physical
+// keyboard - and only falls back to submitting the form directly if nothing handled it, so a
+// search-as-you-type page and a plain <form> both work without submitting twice.
+// Dismissing the host keyboard without blurring the page's own field would leave it focused,
+// so the next tap anywhere with a text cursor pops the keyboard straight back up.
+private const val BLUR_FIELD_JS = "document.activeElement && document.activeElement.blur();"
+
+private const val SUBMIT_FIELD_JS = """
+    (function() {
+        var el = document.activeElement;
+        if (!el) return;
+        var enter = new KeyboardEvent('keydown', {
+            key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true, cancelable: true,
+        });
+        var notHandled = el.dispatchEvent(enter);
+        if (notHandled && el.form) {
+            if (el.form.requestSubmit) el.form.requestSubmit(); else el.form.submit();
+        }
+    })();
+"""
+
+/** Reports focus/blur on text inputs, textareas and contenteditable elements to [FieldFocusBridge]. */
+private const val FOCUS_TRACKING_JS = """
+    (function() {
+        function isEditable(el) {
+            if (!el) return false;
+            var tag = el.tagName;
+            if (tag === 'TEXTAREA') return true;
+            if (el.isContentEditable) return true;
+            if (tag !== 'INPUT') return false;
+            var skip = ['button', 'submit', 'checkbox', 'radio', 'range', 'color', 'file', 'image', 'reset'];
+            return skip.indexOf((el.type || 'text').toLowerCase()) === -1;
+        }
+        document.addEventListener('focusin', function(e) {
+            if (isEditable(e.target)) window.GearslipField.focused(e.target.value || '');
+        });
+        document.addEventListener('focusout', function(e) {
+            if (isEditable(e.target)) window.GearslipField.blurred();
+        });
+    })();
+"""

gearslip/src/main/java/app/seb3thehacker/gearslip/car/theme/GsControls.kt

@@ -0,0 +1,334 @@
+package app.seb3thehacker.gearslip.car.theme
+
+import android.os.SystemClock
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.offset
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.drawOutline
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.translate
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.PressInteraction
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.graphics.luminance
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/** What a control is for, which picks its colours from the Material scheme. */
+enum class GsTone { Primary, Tonal, Neutral, Outline, Danger }
+
+data class GsColors(val container: Color, val content: Color, val border: Color = Color.Unspecified)
+
+@Composable
+fun gsColors(tone: GsTone): GsColors {
+    val s = MaterialTheme.colorScheme
+    return when (tone) {
+        GsTone.Primary -> GsColors(s.primary, s.onPrimary)
+        GsTone.Tonal -> GsColors(s.secondaryContainer, s.onSecondaryContainer)
+        GsTone.Neutral -> GsColors(s.surfaceContainerHighest, s.onSurfaceVariant)
+        GsTone.Outline -> GsColors(Color.Transparent, s.primary, s.outline)
+        GsTone.Danger -> GsColors(s.error, s.onError)
+    }
+}
+
+@Composable
+fun gsShape(): Shape = RoundedCornerShape(gsLook().corner)
+
+/** The current theme's control look, swapped for its light-mode variant on a light UI. */
+@Composable
+fun gsLook(): ControlLook {
+    val look = LocalGsTheme.current.control
+    val light = look.light ?: return look
+    return if (MaterialTheme.colorScheme.surface.luminance() > 0.5f) light else look
+}
+
+/**
+ * Paints a control's container in the current theme's finish. Transparent containers stay
+ * transparent in every theme. Use directly for custom-shaped tappables; [GsButton] and
+ * [GsIconButton] already apply it. [latched] holds a control down - a selected option, the current
+ * screen's nav button - in themes that have a pressed-in look.
+ */
+@Composable
+fun Modifier.gsSurface(
+    container: Color,
+    shape: Shape = gsShape(),
+    border: Color = Color.Unspecified,
+    pressed: Boolean = false,
+    latched: Boolean = false,
+): Modifier {
+    val look = gsLook()
+    val down = pressed || latched
+    // The keycap's face sinks onto its base while pressed, and stays down while latched: the base
+    // shrinks to nothing and the face moves down by the same amount, so the control's overall size
+    // never changes.
+    val lipNow by animateDpAsState(if (down) 0.dp else look.lip, tween(if (pressed) 50 else 110), label = "keycap")
+    // Tactile: the drop shadow collapses and the face drops by [ControlLook.sink].
+    val lift by animateFloatAsState(if (down) 0f else 1f, tween(if (pressed) 50 else 140), label = "lift")
+    val sinkNow by animateDpAsState(if (down) look.sink else 0.dp, tween(if (pressed) 50 else 140), label = "sink")
+    var m = this
+    if (container.alpha > 0f && look.shadow > 0.dp) {
+        m = m.drawBehind { drawSoftShadow(shape, look.shadow.toPx(), look.shadowAlpha * lift, lift) }
+    }
+    if (look.sink > 0.dp) m = m.offset(y = sinkNow)
+    if (container.alpha > 0f && look.lip > 0.dp) {
+        val base = lerp(container, Color.Black, 0.35f)
+        m = m
+            .padding(top = look.lip - lipNow, bottom = lipNow)
+            .drawBehind {
+                translate(top = lipNow.toPx()) {
+                    drawOutline(shape.createOutline(size, layoutDirection, this), base)
+                }
+            }
+    }
+    m = m.clip(shape)
+    if (container.alpha > 0f) {
+        val shade = if (container.luminance() > 0.5f) look.bottomShadeOnLight else look.bottomShade
+        m = if (look.topLight > 0f || shade > 0f) {
+            m.background(
+                Brush.verticalGradient(
+                    0f to lerp(container, Color.White, look.topLight),
+                    0.5f to container,
+                    1f to lerp(container, Color.Black, shade),
+                ),
+            )
+        } else {
+            m.background(container)
+        }
+        if (latched && look.insetAlpha > 0f) {
+            val inset = look.insetAlpha
+            m = m.drawBehind {
+                drawRect(Brush.verticalGradient(0f to Color.Black.copy(alpha = inset), 0.3f to Color.Transparent))
+            }
+        }
+        if (look.rimAlpha > 0f) {
+            m = m.border(1.dp, Brush.verticalGradient(listOf(Color.White.copy(alpha = look.rimAlpha), Color.Transparent)), shape)
+        }
+        if (!latched && (look.bevelTop > 0f || look.bevelBottom > 0f)) {
+            m = m.border(
+                1.dp,
+                Brush.verticalGradient(
+                    0f to Color.White.copy(alpha = look.bevelTop),
+                    0.3f to Color.Transparent,
+                    0.7f to Color.Transparent,
+                    1f to Color.Black.copy(alpha = look.bevelBottom),
+                ),
+                shape,
+            )
+        }
+    }
+    if (border.isSpecified) m = m.border(BorderStroke(1.dp, border), shape)
+    if (pressed) m = m.drawWithContent {
+        drawContent()
+        drawRect(Color.Black.copy(alpha = look.pressedDim))
+    }
+    return m
+}
+
+/**
+ * A blurred shadow falling [elevation] below the control, faked with a few stacked, growing
+ * outlines: cheap, works on every API level, and already soft enough that the car's video
+ * compression has nothing crisp to smear.
+ */
+private fun DrawScope.drawSoftShadow(shape: Shape, elevation: Float, alpha: Float, lift: Float) {
+    if (alpha <= 0f) return
+    val blur = elevation * 2f
+    val steps = 6
+    for (i in steps downTo 1) {
+        val grow = blur * i / steps - blur * 0.35f
+        val outline = shape.createOutline(
+            Size((size.width + grow * 2).coerceAtLeast(0f), (size.height + grow * 2).coerceAtLeast(0f)),
+            layoutDirection,
+            this,
+        )
+        translate(-grow, elevation * lift - grow) {
+            drawOutline(outline, Color.Black.copy(alpha = alpha / steps))
+        }
+    }
+}
+
+/**
+ * Whether a control should look pressed. Held for at least [MIN_PRESS_MS] after the finger lifts:
+ * a quick tap would otherwise come and go between two frames of the car's video stream.
+ */
+@Composable
+private fun rememberPressed(source: MutableInteractionSource): Boolean {
+    var shown by remember { mutableStateOf(false) }
+    LaunchedEffect(source) {
+        var since = 0L
+        var release: Job? = null
+        source.interactions.collect { interaction ->
+            when (interaction) {
+                is PressInteraction.Press -> {
+                    release?.cancel()
+                    since = SystemClock.uptimeMillis()
+                    shown = true
+                }
+                is PressInteraction.Release, is PressInteraction.Cancel -> {
+                    release?.cancel()
+                    release = launch {
+                        delay((MIN_PRESS_MS - (SystemClock.uptimeMillis() - since)).coerceAtLeast(0))
+                        shown = false
+                    }
+                }
+            }
+        }
+    }
+    return shown
+}
+
+private const val MIN_PRESS_MS = 140L
+
+@Composable
+private fun Modifier.gsPressable(
+    source: MutableInteractionSource,
+    pressed: Boolean,
+    enabled: Boolean,
+    onClick: () -> Unit,
+    onLongClick: (() -> Unit)? = null,
+    role: Role = Role.Button,
+    shape: Shape = gsShape(),
+): Modifier {
+    val look = gsLook()
+    // Reached with the car's knob or D-pad rather than a finger: a ring shows where focus is.
+    val focused by source.collectIsFocusedAsState()
+    val ring = MaterialTheme.colorScheme.primary
+    return this
+        .scale(if (pressed) look.pressedScale else 1f)
+        .then(if (focused) Modifier.border(3.dp, ring, shape) else Modifier)
+        .combinedClickable(
+            interactionSource = source,
+            indication = null,
+            enabled = enabled,
+            role = role,
+            onLongClick = onLongClick,
+            onClick = onClick,
+        )
+}
+
+private fun GsColors.disabled(enabled: Boolean, onSurface: Color): GsColors =
+    if (enabled) this
+    else GsColors(
+        container = if (container.alpha > 0f) onSurface.copy(alpha = 0.12f) else container,
+        content = onSurface.copy(alpha = 0.38f),
+        border = if (border.isSpecified) onSurface.copy(alpha = 0.12f) else border,
+    )
+
+/** A themed text (or text-and-icon) button. */
+@Composable
+fun GsButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    tone: GsTone = GsTone.Primary,
+    colors: GsColors = gsColors(tone),
+    enabled: Boolean = true,
+    contentPadding: PaddingValues = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
+    content: @Composable RowScope.() -> Unit,
+) {
+    val c = colors.disabled(enabled, MaterialTheme.colorScheme.onSurface)
+    val shape = gsShape()
+    val source = remember { MutableInteractionSource() }
+    val pressed = rememberPressed(source)
+    Row(
+        modifier
+            .defaultMinSize(minWidth = 64.dp, minHeight = 48.dp)
+            .gsPressable(source, pressed, enabled, onClick, shape = shape)
+            .gsSurface(c.container, shape, c.border, pressed)
+            .padding(contentPadding),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        CompositionLocalProvider(LocalContentColor provides c.content) {
+            ProvideTextStyle(MaterialTheme.typography.labelLarge) { content() }
+        }
+    }
+}
+
+/** A themed square icon button. Pass a [modifier] size to override the default [size]. */
+@Composable
+fun GsIconButton(
+    icon: ImageVector,
+    contentDescription: String?,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    tone: GsTone = GsTone.Neutral,
+    colors: GsColors = gsColors(tone),
+    enabled: Boolean = true,
+    size: Dp = 48.dp,
+    iconSize: Dp = 24.dp,
+    shape: Shape = gsShape(),
+) {
+    GsIconBox(onClick, modifier.size(size), colors, enabled, shape) {
+        Icon(icon, contentDescription, Modifier.size(iconSize))
+    }
+}
+
+/** [GsIconButton] with arbitrary content, for glyphs drawn in code or app icons. */
+@Composable
+fun GsIconBox(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    colors: GsColors = gsColors(GsTone.Neutral),
+    enabled: Boolean = true,
+    shape: Shape = gsShape(),
+    /** Held down, as a keycap theme draws it - for a toggle or the current screen's nav button. */
+    latched: Boolean = false,
+    /** Also marks the control with the theme's hold marker, so the hold can be found. */
+    onLongClick: (() -> Unit)? = null,
+    content: @Composable BoxScope.() -> Unit,
+) {
+    val c = colors.disabled(enabled, MaterialTheme.colorScheme.onSurface)
+    val source = remember { MutableInteractionSource() }
+    val pressed = rememberPressed(source)
+    Box(
+        modifier
+            .gsPressable(source, pressed, enabled, onClick, onLongClick, shape = shape)
+            .gsSurface(c.container, shape, c.border, pressed, latched),
+        contentAlignment = Alignment.Center,
+    ) {
+        if (onLongClick != null && enabled) GsHoldMarker(gsLook().holdMarker, c.container, shape, source)
+        CompositionLocalProvider(LocalContentColor provides c.content) { content() }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/theme/GsHoldMarker.kt

@@ -0,0 +1,180 @@
+package app.seb3thehacker.gearslip.car.theme
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.interaction.InteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.foundation.shape.CornerBasedShape
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.scale
+import androidx.compose.ui.graphics.drawscope.translate
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.platform.LocalViewConfiguration
+import androidx.compose.ui.unit.dp
+import kotlin.math.PI
+import kotlin.math.cos
+import kotlin.math.min
+import kotlin.math.sin
+
+/**
+ * How a control says it also does something when held. [GsIconBox] draws it on its own for any
+ * control given an onLongClick, so callers never place it by hand.
+ */
+enum class HoldMarkerStyle {
+    /** The top layer peels back from the top-right corner, further while held. Needs depth. */
+    PEEL,
+
+    /** A plain dot in the top-right corner. It doesn't react to a hold. */
+    DOT,
+
+    /** Nothing: the hold stays undiscovered. For themes that mark it some other way. */
+    NONE,
+}
+
+/**
+ * The hold marker for one control, drawn under its content. [container] is the control's own
+ * colour, so the peel's flap matches whatever it sits on. Round and pill-shaped controls get the
+ * dot whatever the theme says: a circle has no corner to peel.
+ */
+@Composable
+internal fun BoxScope.GsHoldMarker(style: HoldMarkerStyle, container: Color, shape: Shape, press: InteractionSource) {
+    if (style == HoldMarkerStyle.NONE) return
+    val pressed by press.collectIsPressedAsState()
+    val timeout = LocalViewConfiguration.current.longPressTimeoutMillis.toInt()
+    val lift = remember { Animatable(0f) }
+    if (style == HoldMarkerStyle.PEEL) {
+        LaunchedEffect(pressed) {
+            if (pressed) lift.animateTo(1f, tween(timeout, easing = LinearEasing)) else lift.animateTo(0f, tween(220))
+        }
+    }
+    val ink = MaterialTheme.colorScheme.onSurfaceVariant
+    val accent = MaterialTheme.colorScheme.primaryContainer
+    val onAccent = MaterialTheme.colorScheme.onPrimaryContainer
+    Canvas(Modifier.matchParentSize()) {
+        val side = min(size.width, size.height)
+        val r = (shape as? CornerBasedShape)?.topEnd?.toPx(size, this) ?: 0f
+        val round = r >= side * 0.4f
+        if (style == HoldMarkerStyle.DOT || round) {
+            drawHoldDot(r, side, ink)
+        } else {
+            // Drawn for the bottom-right corner, then flipped up to the top-right.
+            scale(1f, -1f, pivot = center) {
+                drawPeel(r, side, container, accent, onAccent, lift.value)
+            }
+        }
+    }
+}
+
+/** Depth of a corner's curve along its diagonal: a fold shallower than this only shaves the curve. */
+private fun curveDepth(r: Float) = r * (2f - 1.41421f)
+
+private fun DrawScope.drawHoldDot(r: Float, side: Float, ink: Color) {
+    val dot = (side * 0.06f).coerceIn(5.dp.toPx(), 7.dp.toPx())
+    // Tucked into the corner, clear of its curve.
+    val inset = r * (1f - 0.7071f) + (side * 0.05f).coerceIn(4.dp.toPx(), 6.dp.toPx()) + dot / 2
+    drawCircle(ink.copy(alpha = 0.6f), radius = dot / 2, center = Offset(size.width - inset, inset))
+}
+
+/** The part of a rounded rectangle beyond the fold line x + y = c, as a closed outline. */
+private fun cornerRegion(w: Float, h: Float, r: Float, c: Float): List<Offset> {
+    // Walk the bottom-right boundary: down the right edge, round the corner, along the bottom.
+    val reach = (h + w - c) + 1f
+    val edge = ArrayList<Offset>()
+    edge += Offset(w, h - maxOf(r, reach))
+    if (r > 0f) {
+        for (i in 0..24) {
+            val a = (i / 24f) * (PI / 2).toFloat()
+            edge += Offset(w - r + r * cos(a), h - r + r * sin(a))
+        }
+    } else {
+        edge += Offset(w, h)
+    }
+    edge += Offset(w - maxOf(r, reach), h)
+    // Keep what lies beyond the fold, adding the exact crossing points.
+    val out = ArrayList<Offset>()
+    for (i in 0 until edge.size - 1) {
+        val p = edge[i]
+        val q = edge[i + 1]
+        val ps = p.x + p.y - c
+        val qs = q.x + q.y - c
+        if (ps >= 0) out += p
+        if ((ps >= 0) != (qs >= 0)) {
+            val t = ps / (ps - qs)
+            out += Offset(p.x + (q.x - p.x) * t, p.y + (q.y - p.y) * t)
+        }
+    }
+    val last = edge.last()
+    if (last.x + last.y - c >= 0) out += last
+    return out
+}
+
+private fun pathOf(points: List<Offset>): Path = Path().apply {
+    if (points.isEmpty()) return@apply
+    moveTo(points[0].x, points[0].y)
+    for (p in points.drop(1)) lineTo(p.x, p.y)
+    close()
+}
+
+/**
+ * The top layer peeling back from the corner, showing a second layer underneath with the same
+ * rounded corner, so the control's outline never changes. Sized from the control: a launcher
+ * tile folds about 27dp at rest and 64dp held, a nav bar button far less.
+ */
+private fun DrawScope.drawPeel(r: Float, side: Float, face: Color, accent: Color, onAccent: Color, lift: Float) {
+    val w = size.width
+    val h = size.height
+    val rest = curveDepth(r) + (side * 0.1f).coerceIn(4.dp.toPx(), 11.dp.toPx())
+    val held = rest + min(37.dp.toPx(), side * 0.35f)
+    val e = rest + (held - rest) * lift
+    val c = w + h - e
+    val region = cornerRegion(w, h, r, c)
+    if (region.size < 3) return
+    val mid = Offset(w - e / 2, h - e / 2)
+    // 1. The second layer, turning the accent colour as the hold completes.
+    drawPath(pathOf(region), lerp(lerp(face, Color.Black, 0.26f), accent, lift))
+    // The lifted edge of the top layer shades the second layer just beside it.
+    drawPath(
+        pathOf(region),
+        Brush.linearGradient(
+            listOf(Color.Black.copy(alpha = 0.35f), Color.Transparent),
+            start = mid,
+            end = mid + Offset(e * 0.25f, e * 0.25f),
+        ),
+    )
+    // 2. "More" waits on the second layer, readable once the peel is well back.
+    if (lift > 0.35f && side > 80.dp.toPx()) {
+        val a = ((lift - 0.35f) / 0.65f).coerceIn(0f, 1f)
+        val centre = Offset(w - e * 0.3f, h - e * 0.3f)
+        val gap = 5.5.dp.toPx()
+        for (k in -1..1) {
+            drawCircle(onAccent.copy(alpha = a), radius = 2.2.dp.toPx(), center = centre + Offset(k * gap * 0.71f, -k * gap * 0.71f))
+        }
+    }
+    // 3. The flap: the same corner folded back over the face, its rounded tip and all.
+    val flap = region.map { Offset(c - it.y, c - it.x) }
+    translate(-1.5.dp.toPx(), -1.5.dp.toPx()) {
+        drawPath(pathOf(flap), Color.Black.copy(alpha = 0.30f))
+    }
+    drawPath(
+        pathOf(flap),
+        Brush.linearGradient(
+            listOf(lerp(face, Color.White, 0.30f), lerp(face, Color.White, 0.08f)),
+            start = Offset(c - h, c - w),
+            end = mid,
+        ),
+    )
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/theme/GsSeekBar.kt

@@ -0,0 +1,173 @@
+package app.seb3thehacker.gearslip.car.theme
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectHorizontalDragGestures
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.math.sin
+
+/**
+ * A capsule progress bar: a tinted track with a glossy fill set inside it, lighter along the
+ * top and darker along the bottom. Below its own height the fill narrows into a smaller oval, so
+ * a countdown runs smoothly all the way to empty. The flat theme draws Material's wavy bar instead.
+ */
+@Composable
+fun GsProgressBar(
+    fraction: Float,
+    modifier: Modifier = Modifier,
+    height: Dp = 22.dp,
+    color: Color = MaterialTheme.colorScheme.primary,
+    /** Brightens the fill, for a bar that's being dragged. */
+    active: Boolean = false,
+) {
+    val scheme = MaterialTheme.colorScheme
+    val shown = fraction.coerceIn(0f, 1f)
+    val inset = 3.dp
+    val fill = if (active) lerp(color, Color.White, 0.12f) else color
+    if (LocalGsTheme.current.id == GsThemes.Flat.id) {
+        WavyBar(shown, fill, lerp(scheme.surfaceContainerHighest, color, 0.12f), modifier.fillMaxWidth().height(height))
+        return
+    }
+    BoxWithConstraints(
+        modifier
+            .fillMaxWidth()
+            .height(height)
+            .clip(CircleShape)
+            .background(lerp(scheme.surfaceContainerHighest, color, 0.12f))
+            .padding(inset),
+        contentAlignment = Alignment.CenterStart,
+    ) {
+        if (shown <= 0f) return@BoxWithConstraints
+        Box(
+            Modifier
+                .width(maxWidth * shown)
+                .fillMaxHeight()
+                .clip(CircleShape)
+                .background(
+                    Brush.verticalGradient(
+                        0f to lerp(fill, Color.White, 0.30f),
+                        0.55f to fill,
+                        1f to lerp(fill, Color.Black, 0.22f),
+                    ),
+                )
+                // The gloss: a soft white band across the top half.
+                .drawWithContent {
+                    drawContent()
+                    drawRect(
+                        Brush.verticalGradient(
+                            0f to Color.White.copy(alpha = 0.35f),
+                            0.5f to Color.White.copy(alpha = 0.05f),
+                            0.5f to Color.Transparent,
+                        ),
+                    )
+                },
+        )
+    }
+}
+
+/**
+ * Material 3's wavy progress bar, drawn here because the stable library doesn't offer it yet: the
+ * filled part is a sine wave that drifts along, then a gap, then a straight track and a stop dot
+ * at the end.
+ */
+@Composable
+private fun WavyBar(fraction: Float, color: Color, track: Color, modifier: Modifier) {
+    val phase by rememberInfiniteTransition(label = "wave").animateFloat(
+        0f, 1f, infiniteRepeatable(tween(1_000, easing = LinearEasing), RepeatMode.Restart), label = "phase",
+    )
+    Canvas(modifier) {
+        val stroke = 4.dp.toPx()
+        val amplitude = (size.height / 2 - stroke).coerceIn(0f, 3.dp.toPx())
+        val wavelength = 32.dp.toPx()
+        val gap = 6.dp.toPx()
+        val mid = size.height / 2
+        val start = stroke / 2
+        val end = size.width - stroke / 2
+        val split = start + (end - start) * fraction
+
+        if (split > start) {
+            val wave = Path()
+            var x = start
+            val shift = phase * wavelength
+            while (x <= split) {
+                val y = mid + amplitude * sin(2 * Math.PI * (x - shift) / wavelength).toFloat()
+                if (x == start) wave.moveTo(x, y) else wave.lineTo(x, y)
+                x += 1f
+            }
+            drawPath(wave, color, style = Stroke(stroke, cap = StrokeCap.Round))
+        }
+        val trackStart = if (split > start) split + gap + stroke else start
+        if (trackStart < end) {
+            drawLine(track, Offset(trackStart, mid), Offset(end, mid), stroke, StrokeCap.Round)
+        }
+        drawCircle(color, stroke / 2, Offset(end, mid))
+    }
+}
+
+/**
+ * [GsProgressBar] that seeks: tapping or dragging moves it. The position is committed on release
+ * rather than on every pixel of a drag, because each commit is a request to the media app.
+ */
+@Composable
+fun GsSeekBar(
+    fraction: Float,
+    onSeek: (Float) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    var dragging by remember { mutableStateOf<Float?>(null) }
+    // A taller touch area than the bar itself, so it's easy to hit on a car screen.
+    Box(
+        modifier
+            .fillMaxWidth()
+            .height(36.dp)
+            .then(
+                if (!enabled) Modifier else Modifier
+                    .pointerInput(Unit) { detectTapGestures { onSeek((it.x / size.width).coerceIn(0f, 1f)) } }
+                    .pointerInput(Unit) {
+                        detectHorizontalDragGestures(
+                            onDragStart = { dragging = (it.x / size.width).coerceIn(0f, 1f) },
+                            onDragEnd = { dragging?.let(onSeek); dragging = null },
+                            onDragCancel = { dragging = null },
+                        ) { change, _ -> dragging = (change.position.x / size.width).coerceIn(0f, 1f) }
+                    },
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        GsProgressBar(dragging ?: fraction, active = dragging != null)
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/theme/GsSwitch.kt

@@ -0,0 +1,43 @@
+package app.seb3thehacker.gearslip.car.theme
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+/**
+ * An on/off switch in the current theme's finish: the track is pressed in while on, the knob is
+ * raised like a button. The whole switch is one tap target, as big as a nav bar button.
+ */
+@Composable
+fun GsSwitch(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier) {
+    val scheme = MaterialTheme.colorScheme
+    val knob = 26.dp
+    val travel = 64.dp - knob - 8.dp
+    val x by animateDpAsState(if (checked) travel else 0.dp, tween(140), label = "switch")
+    GsIconBox(
+        onClick = { onCheckedChange(!checked) },
+        modifier = modifier.size(width = 64.dp, height = 36.dp),
+        colors = if (checked) GsColors(scheme.primary, scheme.onPrimary) else GsColors(scheme.surfaceContainerHighest, scheme.onSurfaceVariant),
+        shape = CircleShape,
+        latched = checked,
+    ) {
+        Box(Modifier.matchParentSize().padding(4.dp), contentAlignment = Alignment.CenterStart) {
+            Box(
+                Modifier
+                    .offset(x = x)
+                    .size(knob)
+                    .gsSurface(if (checked) scheme.onPrimary else scheme.outline, CircleShape),
+            )
+        }
+    }
+}

gearslip/src/main/java/app/seb3thehacker/gearslip/car/theme/GsTheme.kt

@@ -0,0 +1,121 @@
+package app.seb3thehacker.gearslip.car.theme
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * How the car UI's controls look, separate from its colours: [MaterialTheme]'s colour scheme still
+ * decides what colour a button is, and this decides how that colour is drawn. A theme is plain
+ * data, so a user-supplied theme later is just another instance - nothing about the built-in ones
+ * is special beyond being listed in [GsThemes.builtIn].
+ */
+@Immutable
+data class GsTheme(
+    /** Stable key persisted in settings; never reuse one for a different look. */
+    val id: String,
+    val name: String,
+    val control: ControlLook,
+)
+
+/** The finish on anything tappable that has a container: buttons, toggles, keypad keys. */
+@Immutable
+data class ControlLook(
+    val corner: Dp = 12.dp,
+    /** How far the top edge is lifted towards white, 0..1, fading evenly to the base colour at the centre. */
+    val topLight: Float = 0f,
+    /** How far the bottom edge is pushed towards black, 0..1. */
+    val bottomShade: Float = 0f,
+    /**
+     * [bottomShade] for containers that are already light, where lifting the top towards white
+     * barely shows: those get their depth from a darker bottom edge instead.
+     */
+    val bottomShadeOnLight: Float = 0f,
+    /** Alpha of the thin highlight along the top rim, fading out down the sides; 0 for none. */
+    val rimAlpha: Float = 0f,
+    /** A solid darker base under the button, like a keycap; 0 for none. */
+    val lip: Dp = 0.dp,
+    /** How far a soft drop shadow falls below the button; 0 for none. Its blur is twice this. */
+    val shadow: Dp = 0.dp,
+    val shadowAlpha: Float = 0f,
+    /**
+     * A 1px bevel on the edge only - light along the top, dark along the bottom - so depth reads
+     * at any size without shading the face itself. 0 for none.
+     */
+    val bevelTop: Float = 0f,
+    val bevelBottom: Float = 0f,
+    /** How far the face drops while pressed; 0 for none. */
+    val sink: Dp = 0.dp,
+    /**
+     * Alpha of the shadow cast inside the top edge of a latched control (a selected option, the
+     * current screen's nav button), so it reads as pushed in. 0 for none.
+     */
+    val insetAlpha: Float = 0f,
+    /**
+     * Alpha of the dark overlay while pressed. Heavier than a ripple on purpose: the car screen
+     * shows a video stream a frame or two behind the finger, so subtle feedback gets lost.
+     */
+    val pressedDim: Float = 0.22f,
+    /** Scale while pressed, 1 for none. */
+    val pressedScale: Float = 0.95f,
+    /**
+     * How a control with a press-and-hold action says so. The peel needs a raised face to lift
+     * from; a flat look takes the dot.
+     */
+    val holdMarker: HoldMarkerStyle = HoldMarkerStyle.PEEL,
+    /** Replaces this look when the UI is light, for effects that only work on one background. */
+    val light: ControlLook? = null,
+)
+
+object GsThemes {
+    val Keycap = GsTheme(
+        id = "keycap",
+        name = "Keycap",
+        control = ControlLook(lip = 4.dp, pressedScale = 1f, holdMarker = HoldMarkerStyle.PEEL),
+    )
+
+    val Tactile = GsTheme(
+        id = "tactile",
+        name = "Tactile",
+        control = ControlLook(
+            topLight = 0.05f,
+            shadow = 3.dp,
+            shadowAlpha = 0.32f,
+            bevelTop = 0.16f,
+            bevelBottom = 0.22f,
+            sink = 2.dp,
+            insetAlpha = 0.30f,
+            pressedDim = 0.12f,
+            pressedScale = 1f,
+            holdMarker = HoldMarkerStyle.PEEL,
+            // A wide soft shadow bands once the car's video stream compresses it on a light
+            // background, so light mode gets a tight one and leans on the bevel instead.
+            light = ControlLook(
+                topLight = 0.05f,
+                shadow = 1.5.dp,
+                shadowAlpha = 0.38f,
+                bevelTop = 0.24f,
+                bevelBottom = 0.30f,
+                sink = 2.dp,
+                insetAlpha = 0.30f,
+                pressedDim = 0.12f,
+                pressedScale = 1f,
+                holdMarker = HoldMarkerStyle.PEEL,
+            ),
+        ),
+    )
+
+    val Flat = GsTheme(
+        id = "flat",
+        name = "Flat",
+        control = ControlLook(holdMarker = HoldMarkerStyle.DOT),
+    )
+
+    val default = Tactile
+    val builtIn = listOf(Tactile, Keycap, Flat)
+
+    fun byId(id: String?): GsTheme = builtIn.firstOrNull { it.id == id } ?: default
+}
+
+val LocalGsTheme = staticCompositionLocalOf { GsThemes.default }

gearslip/src/main/java/app/seb3thehacker/gearslip/host/AndroidAuto.kt

@@ -1,11 +1,19 @@
 package app.seb3thehacker.gearslip.host
 
+import android.content.Context
+import android.content.pm.PackageManager
+
 /**
  * Google's own Android Auto, in whatever guise it appears. Gearslip replaces it, so its entries
  * (there are many: one per screen it registers) are noise in every list of apps to open.
  */
 object AndroidAuto {
 
+    /** Kept in sync with the `<queries><package>` entries in the manifest: package visibility
+     * hides an app's presence entirely unless one names it (or a broader query matches it), and
+     * this one has no launcher icon on current builds for a launcher-category query to find. */
+    private val KNOWN_PACKAGES = listOf("com.google.android.projection.gearhead")
+
     private val PACKAGE_MARKERS = listOf("gearhead", "projection.gearhead", "android.auto", "androidauto")
 
     fun matches(packageName: String, label: String): Boolean {
@@ -14,4 +22,26 @@ object AndroidAuto {
         val name = label.lowercase().replace(Regex("[^a-z ]"), " ")
         return "android auto" in name || "androidauto" in name.replace(" ", "")
     }
+
+    /** The package name of Google's Android Auto, if it is installed. */
+    fun installedPackage(context: Context): String? {
+        val manager = context.packageManager
+        return KNOWN_PACKAGES.firstOrNull { pkg ->
+            runCatching { manager.getPackageInfo(pkg, 0) }.isSuccess
+        }
+    }
+
+    /**
+     * Whether [packageName] can still fight Gearslip for the USB connection: installed, and not
+     * already disabled for this user. `ApplicationInfo.enabled` only reflects the manifest's
+     * static default, not a driver's own Settings toggle, so this reads the actual runtime
+     * setting instead - a driver who disabled it instead of uninstalling it (the app info screen
+     * offers both) has already done what this step asks.
+     */
+    fun isActive(context: Context, packageName: String): Boolean {
+        val setting = runCatching { context.packageManager.getApplicationEnabledSetting(packageName) }
+            .getOrDefault(PackageManager.COMPONENT_ENABLED_STATE_DEFAULT)
+        return setting == PackageManager.COMPONENT_ENABLED_STATE_DEFAULT ||
+            setting == PackageManager.COMPONENT_ENABLED_STATE_ENABLED
+    }
 }

gearslip/src/main/java/app/seb3thehacker/gearslip/host/CarAppCatalog.kt

@@ -41,6 +41,7 @@ object CarAppCatalog {
             .asSequence()
             .filter { it.serviceInfo.packageName != context.packageName }
             .filterNot { AndroidAuto.matches(it.serviceInfo.packageName, it.loadLabel(manager).toString()) }
+            .filterNot { KnownApps.isHidden(it.serviceInfo.packageName) }
             .map { resolved ->
                 val info = resolved.serviceInfo
                 TemplateApp(

gearslip/src/main/java/app/seb3thehacker/gearslip/host/CarAppConnection.kt

@@ -8,6 +8,7 @@ import android.content.ServiceConnection
 import android.content.res.Configuration
 import android.graphics.Rect
 import android.location.Location
+import android.net.Uri
 import android.os.Handler
 import android.os.IBinder
 import android.os.Looper
@@ -31,6 +32,7 @@ import androidx.car.app.suggestion.ISuggestionHost
 import androidx.car.app.hardware.ICarHardwareHost
 import androidx.car.app.hardware.ICarHardwareResult
 import androidx.car.app.navigation.INavigationHost
+import androidx.car.app.navigation.INavigationManager
 import androidx.car.app.serialization.Bundleable
 import androidx.car.app.versioning.CarAppApiLevels
 import app.seb3thehacker.gearslip.GearslipLog
@@ -81,6 +83,8 @@ class CarAppConnection(private val context: Context) {
 
     private var carApp: ICarApp? = null
     private var appManager: IAppManager? = null
+    /** Only present for an app that asked for it - most apps aren't navigation apps. */
+    private var navigationManager: INavigationManager? = null
     /** Main thread only, both of these - the handoff is a race between them either way round. */
     private var surfaceCallback: ISurfaceCallback? = null
     private var lent: Lent? = null
@@ -88,18 +92,30 @@ class CarAppConnection(private val context: Context) {
     private var binding: ServiceConnection? = null
     private var component: ComponentName? = null
 
+    /** Whose icon the header shows for the standard app-icon action. */
+    val appPackage: String? get() = component?.packageName
+
+    /** Which app is bound right now, if any - lets a caller tell "still this one" from "a new one". */
+    val connectedComponent: ComponentName? get() = component
+
     private var frameWidth = 800
     private var frameHeight = 480
     private var frameDensity = 160
 
+    /** A destination to navigate to as soon as the app is created; see [navigateTo]. */
+    private var pendingDestination: String? = null
+
     // --- connection ---------------------------------------------------------------------
 
-    fun connect(app: TemplateApp, width: Int, height: Int, densityDpi: Int) {
+    fun connect(app: TemplateApp, width: Int, height: Int, densityDpi: Int, destination: String? = null) {
-        disconnect()
+        // Keeps the location hold through a reconnect: stopping and restarting the service can be
+        // refused once the phone is locked, leaving the new app without location.
+        disconnect(keepLocation = true)
         frameWidth = width
         frameHeight = height
         frameDensity = densityDpi
         component = app.component
+        pendingDestination = destination
         update { Status(phase = Phase.BINDING, app = app.label) }
 
         val intent = Intent(CarAppService.SERVICE_INTERFACE).setComponent(app.component)
@@ -119,22 +135,86 @@ class CarAppConnection(private val context: Context) {
         }
         binding = connection
 
-        LocationKeepAlive.start(context)
+        val bind = bind@{
-        val bound = runCatching {
+            // Replaced by another connect (or a disconnect) while waiting on the location service.
-            context.bindService(intent, connection, Context.BIND_AUTO_CREATE or LocationKeepAlive.BIND_INCLUDE_CAPABILITIES)
+            if (binding !== connection) return@bind
-        }.getOrElse {
+            var bindError: Throwable? = null
-            GearslipLog.e("bindService threw for ${app.component}", it)
+            val flags = Context.BIND_AUTO_CREATE or LocationKeepAlive.BIND_INCLUDE_CAPABILITIES
-            false
+            val bound = runCatching {
+                // Without BIND_FOREGROUND_SERVICE, an app bound by a foreground service (which is
+                // all Gearslip is once the phone screen leaves it) only reaches "important
+                // foreground", and that state loses network under Doze and background network
+                // restrictions: the map and GPS keep working while search and routing go dead.
+                // In the preview Gearslip is the top app, which hides this. Retried without the
+                // flag in case a build of Android refuses it from an unprivileged caller.
+                runCatching { context.bindService(intent, connection, flags or BIND_FOREGROUND_SERVICE) }
+                    .getOrElse {
+                        GearslipLog.w("host: foreground binding refused (${it.message}); binding without it")
+                        context.bindService(intent, connection, flags)
+                    }
+            }.getOrElse {
+                GearslipLog.e("bindService threw for ${app.component}", it)
+                bindError = it
+                false
+            }
+            if (!bound) {
+                binding = null
+                fail(Phase.REJECTED, explainBindFailure(app.component, bindError))
+            } else {
+                GearslipLog.i("host: binding to ${app.component.flattenToShortString()}")
+            }
         }
-        if (!bound) {
+
-            binding = null
+        // BIND_INCLUDE_CAPABILITIES only lends the location capability Gearslip holds at bind
-            fail(Phase.FAILED, "bindService refused")
+        // time, so the keep-alive has to be running first - a nav app that starts its own
+        // location service before then is refused, and MapQuest crashes on that.
+        if (holdsLocation) {
+            bind()
         } else {
-            GearslipLog.i("host: binding to ${app.component.flattenToShortString()}")
+            holdsLocation = true
+            LocationKeepAlive.acquire(context) { bind() }
         }
     }
 
-    fun disconnect() {
+    /** Whether this connection has a hold on [LocationKeepAlive]. */
+    private var holdsLocation = false
+
+    /**
+     * A service that names a permission can only be bound by an app holding it. Some navigation apps
+     * name one that only Google's own Android Auto host holds, and no other app can be granted.
+     */
+    private fun explainBindFailure(component: ComponentName, error: Throwable?): String {
+        if (error !is SecurityException) return "the app would not let Gearslip connect"
+        val needed = runCatching { context.packageManager.getServiceInfo(component, 0).permission }.getOrNull()
+        return if (needed != null) {
+            "It only accepts Google's own Android Auto: its service requires the permission $needed, which Gearslip can't hold."
+        } else {
+            "It only accepts Google's own Android Auto host."
+        }
+    }
+
+    /** The app's own account of why it said no, in words rather than an object id. */
+    private fun describeFailure(step: String, value: Any?): String {
+        val failure = value as? androidx.car.app.FailureResponse
+            ?: return "$step failed: ${value ?: "no reason given"}"
+        val firstLine = failure.stackTrace.lineSequence().firstOrNull { it.isNotBlank() }.orEmpty()
+        GearslipLog.w("host: $step failed: type=${failure.errorType}\n${failure.stackTrace.lineSequence().take(6).joinToString("\n")}")
+        // The Car App Library's own host check: the app keeps a list of hosts it trusts by signature.
+        if (firstLine.contains("Unrecognized host")) {
+            return "It only trusts hosts on its own allow-list (Google's Android Auto and a few others), and Gearslip isn't on it."
+        }
+        val kind = when (failure.errorType) {
+            androidx.car.app.FailureResponse.SECURITY_EXCEPTION -> "It rejected Gearslip as a host"
+            androidx.car.app.FailureResponse.ILLEGAL_STATE_EXCEPTION -> "It reported a state error"
+            androidx.car.app.FailureResponse.INVALID_PARAMETER_EXCEPTION -> "It reported an invalid parameter"
+            else -> "It failed"
+        }
+        return "$kind at $step: ${firstLine.substringAfterLast("Exception: ", firstLine)}"
+    }
+
+    fun disconnect() = disconnect(keepLocation = false)
+
+    private fun disconnect(keepLocation: Boolean) {
         lent?.let { sendSurfaceDestroyed(it) }
         lent = null
         val carApp = this.carApp
@@ -142,13 +222,19 @@ class CarAppConnection(private val context: Context) {
             runCatching { carApp.onAppPause(noop("onAppPause")) }
             runCatching { carApp.onAppStop(noop("onAppStop")) }
         }
-        LocationKeepAlive.stop(context)
+        if (holdsLocation && !keepLocation) {
+            holdsLocation = false
+            LocationKeepAlive.release(context)
+        }
         binding?.let { runCatching { context.unbindService(it) } }
         binding = null
         this.carApp = null
         appManager = null
+        navigationManager = null
+        _panMode.value = false
         surfaceCallback = null
         component = null
+        pendingDestination = null
         _template.value = null
         update { Status() }
     }
@@ -195,12 +281,34 @@ class CarAppConnection(private val context: Context) {
     private fun onHandshakeAccepted() {
         val app = carApp ?: return
         GearslipLog.i("host: handshake accepted; creating the app")
-        val intent = Intent(Intent.ACTION_MAIN).setComponent(component)
+        val intent = pendingDestination?.let { navigateIntent(it) }
+            ?: Intent(Intent.ACTION_MAIN).setComponent(component)
+        pendingDestination = null
         call("onAppCreate", onValue = { onCreated() }) {
             app.onAppCreate(carHost, intent, carConfiguration(), it)
         }
     }
 
+    /**
+     * "navigate to X" deep link, the same one Android Auto's own Assistant integration sends -
+     * [ACTION_NAVIGATE] with the destination as a `geo:` search query, rather than anything
+     * app-specific.
+     */
+    private fun navigateIntent(destination: String) =
+        Intent(CarContext.ACTION_NAVIGATE, Uri.parse("geo:0,0?q=" + Uri.encode(destination)))
+            .setComponent(component)
+
+    /**
+     * Sends a fresh destination to an app that's already running, instead of tearing it down
+     * and rebuilding the whole session - see [app.seb3thehacker.gearslip.car.CarServices.connectNav].
+     */
+    fun navigateTo(destination: String) {
+        val app = carApp ?: return
+        call("onNewIntent", onValue = {}) {
+            app.onNewIntent(navigateIntent(destination), it)
+        }
+    }
+
     private fun onCreated() {
         val app = carApp ?: return
         GearslipLog.i("host: created; starting")
@@ -226,6 +334,37 @@ class CarAppConnection(private val context: Context) {
             if (appManager == null) GearslipLog.e("host: app manager was ${value?.javaClass?.name}")
             requestTemplate()
         }) { app.getManager(CarContext.APP_SERVICE, it) }
+
+        // Best-effort and silent: an app that never asked for NavigationManager (not every
+        // templated app navigates) simply has no binder to hand back, which is normal, not a
+        // failure worth surfacing.
+        runCatching {
+            app.getManager(CarContext.NAVIGATION_SERVICE, object : IOnDoneCallback.Stub() {
+                override fun onSuccess(response: Bundleable?) {
+                    val value = response?.let { runCatching { it.get() }.getOrNull() }
+                    navigationManager = when (value) {
+                        is INavigationManager -> value
+                        is IBinder -> INavigationManager.Stub.asInterface(value)
+                        else -> null
+                    }
+                }
+                override fun onFailure(response: Bundleable?) = Unit
+            })
+        }
+    }
+
+    /**
+     * Tells the app itself to stop navigating - the proper end of a route, not just leaving its
+     * screen. Ending only the on-screen guidance (a back press) leaves the app's own
+     * "am I navigating" flag set, which is what stopped a fresh route from starting afterwards;
+     * this is the call [NavigationManagerCallback.onStopNavigation] on the app's side answers,
+     * and it is expected to clear that flag and present its own post-navigation screen.
+     */
+    fun stopNavigating() {
+        val manager = navigationManager ?: return
+        GearslipLog.i("host: asking the app to stop navigating")
+        runCatching { manager.onStopNavigation(noop("stop navigation")) }
+            .onFailure { GearslipLog.w("host: could not stop navigation: ${it.message}") }
     }
 
     /** The app describes its current screen; this is what the host draws. */
@@ -244,6 +383,32 @@ class CarAppConnection(private val context: Context) {
         }) { manager.getTemplate(it) }
     }
 
+    private val _panMode = MutableStateFlow(false)
+
+    /**
+     * Pan mode is the host's to run: the Pan action has no click handler, tapping it just switches
+     * the screen to the map and its own controls. The app is told only if its template asks.
+     */
+    val panMode: StateFlow<Boolean> = _panMode
+
+    fun setPanMode(on: Boolean) {
+        if (_panMode.value == on) return
+        _panMode.value = on
+        GearslipLog.i("host: pan mode ${if (on) "on" else "off"}")
+        (_template.value as? androidx.car.app.navigation.model.NavigationTemplate)
+            ?.panModeDelegate.panModeChanged(on)
+    }
+
+    /**
+     * The Back action carries no click handler of its own: the app keeps its own screen stack, so
+     * the host reports the press and the app answers with the template it went back to.
+     */
+    fun backPressed() {
+        val manager = appManager ?: return
+        GearslipLog.i("host: back pressed")
+        call("onBackPressed", onValue = { requestTemplate() }) { manager.onBackPressed(it) }
+    }
+
     // --- the surface the app draws its map into -------------------------------------------
 
     /**
@@ -274,16 +439,47 @@ class CarAppConnection(private val context: Context) {
         }
     }
 
-    /** Takes the Surface back, e.g. when the SurfaceView goes away. */
+    /**
-    fun detachSurface() {
+     * Takes the Surface back, e.g. when the SurfaceView goes away. With [surface], only if that is
+     * still the one lent - a replaced view's teardown must not take back its successor's.
+     */
+    fun detachSurface(surface: Surface? = null) {
         main.post {
             val current = lent ?: return@post
+            if (surface != null && current.surface !== surface) return@post
             lent = null
             sendSurfaceDestroyed(current)
             update { it.copy(surfaceAttached = false) }
         }
     }
 
+    private val _surfaceEpoch = MutableStateFlow(0)
+
+    /** Bumped to throw the lent surface away, so the stage builds a fresh one. */
+    val surfaceEpoch: StateFlow<Int> = _surfaceEpoch.asStateFlow()
+
+    /**
+     * Called as the map comes back into view: replaces the surface only if it died while the map
+     * was covered. A live one is left alone, because every hand-over costs the app its map - some
+     * (MapQuest) rebuild theirs from a world view and fly back to the car's position.
+     *
+     * Always a new surface, never the dead one lent again: an app that draws through its own
+     * VirtualDisplay (Flitsmeister does) builds its new display on a re-lent surface before
+     * releasing the old, and the old one's disconnect then takes the shared BufferQueue's
+     * connection with it - the map freezes on its last frame for good. The stage's key on
+     * [surfaceEpoch] swaps in a new SurfaceView, which lends itself as it comes up.
+     */
+    fun replaceDeadSurface() {
+        main.post {
+            val current = lent ?: return@post
+            if (current.surface.isValid) return@post
+            GearslipLog.w("host: the lent surface died; building a new one")
+            lent = null
+            sendSurfaceDestroyed(current)
+            _surfaceEpoch.value = _surfaceEpoch.value + 1
+        }
+    }
+
     private fun sendSurfaceAvailable() {
         val callback = surfaceCallback ?: return
         val surface = lent ?: return
@@ -308,9 +504,9 @@ class CarAppConnection(private val context: Context) {
         }
 
         // The app draws for the whole surface; the visible area is what isn't covered by host
-        // chrome, and the stable area is the part that never gets covered. We keep our chrome
+        // chrome, and the stable area is the part that never gets covered. Both depend on the
-        // to a top bar, so both are the surface minus that bar - reported by the UI via
+        // template (see visibleAreaFor) and are reported by the UI via [reportAreas] once it
-        // [reportAreas] once it has measured. Until then the whole surface is fair game.
+        // has measured. Until then the whole surface is fair game.
         val whole = Rect(0, 0, surface.width, surface.height)
         reportAreas(whole, whole)
 
@@ -498,7 +694,7 @@ class CarAppConnection(private val context: Context) {
 
             override fun onFailure(response: Bundleable?) {
                 val value = response?.let { runCatching { it.get() }.getOrNull() }
-                main.post { fail(Phase.FAILED, "$name failed: $value") }
+                main.post { fail(Phase.REJECTED, describeFailure(name, value)) }
             }
         }
         runCatching { send(callback) }
@@ -560,5 +756,8 @@ class CarAppConnection(private val context: Context) {
     private companion object {
         /** The newest template API this host claims to understand. */
         const val HOST_API_LEVEL = CarAppApiLevels.LEVEL_8
+
+        /** Context.BIND_FOREGROUND_SERVICE; the constant itself is hidden from the SDK. */
+        const val BIND_FOREGROUND_SERVICE = 0x04000000
     }
 }