feat: add compact Toolbox tiles and details overlay

fix: reverse Toolbox header orientation
fix: preserve hidden tool visibility
2026-07-23 13:02:29 +02:00 · 2026-07-23 01:57:52 +02:00 · 2026-07-23 01:23:32 +02:00 · 2026-07-23 01:21:16 +02:00
21 changed files with 1335 additions and 774 deletions
--- a/.env.example
+++ b/.env.example
@@ -4,5 +4,5 @@ TRAEFIK_NETWORK=internal
 TRAEFIK_CERT_RESOLVER=netcup

 # Keep these two values paired when deploying a newer published toolbox release.
-TOOLBOX_RELEASE_VERSION=0.4.0
-TOOLBOX_RELEASE_SHA256=0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112
+TOOLBOX_RELEASE_VERSION=0.4.3
+TOOLBOX_RELEASE_SHA256=0c26315c987f7ef6d025c66c21e25999786ede3e971b66495c856117e0b7c522
--- a/Containerfile.release
+++ b/Containerfile.release
@@ -2,8 +2,8 @@ ARG NGINX_IMAGE=nginxinc/nginx-unprivileged:1.31.3-alpine@sha256:18d67281256ded3

 FROM ${NGINX_IMAGE} AS release

-ARG TOOLBOX_RELEASE_VERSION=0.4.0
-ARG TOOLBOX_RELEASE_SHA256=0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112
+ARG TOOLBOX_RELEASE_VERSION=0.4.3
+ARG TOOLBOX_RELEASE_SHA256=0c26315c987f7ef6d025c66c21e25999786ede3e971b66495c856117e0b7c522
 ARG TOOLBOX_RELEASE_BASE_URL=https://git.add-ideas.de/zemion/toolbox-portal/releases/download

 RUN set -eu; \
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # add·ideas Toolbox Portal

 `toolbox-portal` is the static launcher and release assembler for the add·ideas
-browser toolbox. Version `0.2.0` reads one same-origin catalogue, shows each app
-as a full-page launch tile, and keeps personal pins, drag-and-drop ordering,
+browser toolbox. Version `0.2.3` reads one same-origin catalogue, shows each app
+as a compact launch tile, and keeps personal pins, drag-and-drop ordering,
 visibility, and appearance in the current browser. Pinned tools have their own
 section; search, category, and clickable tag filters stay close to the tool
 list.
@@ -30,7 +30,7 @@ npm run build
 npm run dev
 ```

-The package lock resolves the `^0.2.0` SDK ranges to the published `0.2.0`
+The package lock resolves the `^0.2.2` SDK ranges to the published `0.2.2`
 packages. A sibling SDK checkout is only needed when intentionally developing
 the SDK and portal together.

@@ -68,7 +68,7 @@ privacy and executable-code warning. Light, dark, and system modes are supported
 ## Production deployment behind Traefik

 The committed `compose.yaml` is the shortest production path. Its release
-container downloads the immutable Toolbox 0.4.0 ZIP during the image build,
+container downloads the immutable Toolbox 0.4.3 ZIP during the image build,
 verifies SHA-256 before extracting it, and then copies only the verified static
 files into the pinned unprivileged nginx image. Node.js and a local portal
 assembly are not required on the deployment host.
@@ -119,8 +119,8 @@ The app release should also publish a matching `.sha256` sidecar. The manifest
 must declare the pinned reverse-DNS id and version. Application and portal
 versions are independent.

-`release/toolbox.lock.json` is the reviewed v0.4.0 lock. Its URLs and checksums
-pin the published PDF Tools 0.4.0, XSLT Tools 0.4.0, and OneNote Tools 0.3.0
+`release/toolbox.lock.json` is the reviewed v0.4.3 lock. Its URLs and checksums
+pin the published PDF Tools 0.4.3, XSLT Tools 0.4.2, and OneNote Tools 0.3.3
 release bytes. Use
 `release/toolbox.lock.example.json` as the template for a future release and
 verify every downloaded asset before committing updated values. Artifacts may be:
@@ -142,7 +142,7 @@ npm run assemble -- \
  --lock release/toolbox.lock.json \
  --portal-dist dist \
  --output build/toolbox \
-  --archive build/add-ideas-toolbox-0.4.0.zip
+  --archive build/add-ideas-toolbox-0.4.3.zip
 ```

 Existing output is refused. Pass `--force` only when replacing those exact
@@ -162,8 +162,8 @@ build/toolbox/
    ├── xslt/
    └── onenote/

-build/add-ideas-toolbox-0.4.0.zip
-build/add-ideas-toolbox-0.4.0.zip.sha256
+build/add-ideas-toolbox-0.4.3.zip
+build/add-ideas-toolbox-0.4.3.zip.sha256
 ```

 The assembler verifies SHA-256 before opening an artifact, validates every app
@@ -184,7 +184,7 @@ directory separately:
 ```sh
 npm run package:static -- \
  --input build/toolbox \
-  --output artifacts/add-ideas-toolbox-0.4.0.zip
+  --output artifacts/add-ideas-toolbox-0.4.3.zip
 ```

 This also emits a `.sha256` sidecar.
@@ -201,9 +201,9 @@ normal local XML/XSLT transformations do not require that permission.

 ```sh
 podman build -f Containerfile \
-  -t git.add-ideas.de/zemion/toolbox:0.4.0 .
+  -t git.add-ideas.de/zemion/toolbox:0.4.3 .
 podman run --rm -p 8080:8080 \
-  git.add-ideas.de/zemion/toolbox:0.4.0
+  git.add-ideas.de/zemion/toolbox:0.4.3
 ```

 For a direct-port local deployment after assembly, use the separate example:
@@ -220,7 +220,7 @@ docker login git.add-ideas.de
 docker buildx build \
  --platform linux/amd64,linux/arm64 \
  --file Containerfile.release \
-  --tag git.add-ideas.de/zemion/toolbox:0.4.0 \
+  --tag git.add-ideas.de/zemion/toolbox:0.4.3 \
  --tag git.add-ideas.de/zemion/toolbox:0.4 \
  --push .
 ```
@@ -246,8 +246,8 @@ permission to push code, releases, and container packages.
   all three apps, switch between them, and confirm the encoded `toolbox`
   context.
 5. Verify the distribution with
-   `(cd build && sha256sum -c add-ideas-toolbox-0.4.0.zip.sha256)`.
-6. Commit the reviewed lock, tag the toolbox release (for example `v0.4.0`), and
+   `(cd build && sha256sum -c add-ideas-toolbox-0.4.3.zip.sha256)`.
+6. Commit the reviewed lock, tag the toolbox release (for example `v0.4.3`), and
   push the branch and tag to Gitea.
 7. In Gitea, open **Releases → New release**, select the tag, and upload the
   static ZIP plus its `.sha256` file. Do not use a mutable “latest” URL in a
--- a/compose.example.yaml
+++ b/compose.example.yaml
@@ -3,7 +3,7 @@ services:
    build:
      context: .
      dockerfile: Containerfile
-    image: git.add-ideas.de/zemion/toolbox:0.4.0
+    image: git.add-ideas.de/zemion/toolbox:0.4.3
    restart: unless-stopped
    read_only: true
    ports:
--- a/compose.yaml
+++ b/compose.yaml
@@ -6,9 +6,9 @@ services:
      context: .
      dockerfile: Containerfile.release
      args:
-        TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.4.0}"
-        TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112}"
-    image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.4.0}"
+        TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.4.3}"
+        TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-0c26315c987f7ef6d025c66c21e25999786ede3e971b66495c856117e0b7c522}"
+    image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.4.3}"
    restart: unless-stopped
    read_only: true
    tmpfs:
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
  "name": "@add-ideas/toolbox-portal",
-  "version": "0.2.0",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@add-ideas/toolbox-portal",
-      "version": "0.2.0",
+      "version": "0.2.3",
      "license": "AGPL-3.0-only",
      "dependencies": {
-        "@add-ideas/toolbox-contract": "^0.2.0",
-        "@add-ideas/toolbox-shell-react": "^0.2.0",
+        "@add-ideas/toolbox-contract": "^0.2.2",
+        "@add-ideas/toolbox-shell-react": "^0.2.2",
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
@@ -44,18 +44,18 @@
      }
    },
    "node_modules/@add-ideas/toolbox-contract": {
-      "version": "0.2.0",
-      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.0/toolbox-contract-0.2.0.tgz",
-      "integrity": "sha512-up+wY+ft1L7TbXrflcTeTOwEdcFwHBWFlGFj8skQvcLy5z2mDBpd6/7PVQKDvDTkiODu2npviHm6AFglFw+17Q==",
+      "version": "0.2.2",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.2/toolbox-contract-0.2.2.tgz",
+      "integrity": "sha512-VcZ8j4O2PgFaIYgxs6r9u0uPxA+hHKwhCW+omfeVCtbjAAYhH2KhRlBGm0ERVVYcK5kchyzZLXrC4LKWRotVzg==",
      "license": "Apache-2.0"
    },
    "node_modules/@add-ideas/toolbox-shell-react": {
-      "version": "0.2.0",
-      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.0/toolbox-shell-react-0.2.0.tgz",
-      "integrity": "sha512-qYR+OBXX8rfB+BYCsUbpiCzo2xK12SIPWVNXHre158Da5uT6usr8rRvp5qa5u2oQJ50PNzlXyXMyTeRp0Vz5wg==",
+      "version": "0.2.2",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.2/toolbox-shell-react-0.2.2.tgz",
+      "integrity": "sha512-w/xbLCd50a2Jq7vQ9Z9ygUOuqlOCRkIYlk4vSJx0mf4REJNeMYi3PE2MbaLUC4DkQWyrmatsa5HNT89o0l91BA==",
      "license": "Apache-2.0",
      "dependencies": {
-        "@add-ideas/toolbox-contract": "0.2.0"
+        "@add-ideas/toolbox-contract": "0.2.2"
      },
      "peerDependencies": {
        "react": ">=18 <20",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@add-ideas/toolbox-portal",
-  "version": "0.2.0",
+  "version": "0.2.3",
  "license": "AGPL-3.0-only",
  "private": true,
  "type": "module",
@@ -21,8 +21,8 @@
    "package:static": "node scripts/package-static.mjs"
  },
  "dependencies": {
-    "@add-ideas/toolbox-contract": "^0.2.0",
-    "@add-ideas/toolbox-shell-react": "^0.2.0",
+    "@add-ideas/toolbox-contract": "^0.2.2",
+    "@add-ideas/toolbox-shell-react": "^0.2.2",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
--- a/public/SOURCE.md
+++ b/public/SOURCE.md
@@ -1,8 +1,8 @@
 # Corresponding source

-The source code corresponding to add·ideas Toolbox Portal 0.2.0 is available at:
+The source code corresponding to add·ideas Toolbox Portal 0.2.3 is available at:

-https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.0
+https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.3

 Each bundled application contains its own `SOURCE.md`, license, and third-party
 license materials. The application sources are also linked from the portal.
--- a/release/toolbox.lock.example.json
+++ b/release/toolbox.lock.example.json
@@ -1,8 +1,8 @@
 {
  "$schema": "./toolbox-release-lock.schema.json",
  "schemaVersion": 1,
-  "releaseVersion": "0.4.0",
-  "portalVersion": "0.2.0",
+  "releaseVersion": "0.4.3",
+  "portalVersion": "0.2.3",
  "catalogue": {
    "id": "de.add-ideas.toolbox",
    "name": "add·ideas Toolbox",
@@ -15,23 +15,23 @@
  "apps": [
    {
      "id": "de.add-ideas.pdf-tools",
-      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.0/pdf-tools-0.4.0.zip",
-      "sha256": "c9a2d3bed41c41dc6664f6ab7ecefebb5ef4895ce49cd7b0726e3d47d62a66ca",
+      "version": "0.4.3",
+      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.3/pdf-tools-0.4.3.zip",
+      "sha256": "f2dfd3bade49a4b8be9c0c54c6c2bf1bbb153fc0505a38af14de5ab52d5183cf",
      "target": "pdf"
    },
    {
      "id": "de.add-ideas.xslt-tools",
-      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.0/xslt-tools-0.4.0.zip",
-      "sha256": "62e02c08d25456cd0a876d4005dfdcadf69471619230cb5f03f62451f501f142",
+      "version": "0.4.2",
+      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.2/xslt-tools-0.4.2.zip",
+      "sha256": "daaa821c10c6c6285f97128ba3d923e48efa24449f1fb0a21bf478abaf27499f",
      "target": "xslt"
    },
    {
      "id": "de.add-ideas.onenote-tools",
-      "version": "0.3.0",
-      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.0/onenote-tools-0.3.0.zip",
-      "sha256": "44fa28252995b4bf7789b7a546091ee70d43990ab893481d9f4831d5cf5525e3",
+      "version": "0.3.3",
+      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.3/onenote-tools-0.3.3.zip",
+      "sha256": "37c0ef7cdc7f435d0d4f5a341523f4e522118d5b258c374b5a7ef7b8e6c27cec",
      "target": "onenote"
    }
  ]
--- a/release/toolbox.lock.json
+++ b/release/toolbox.lock.json
@@ -1,8 +1,8 @@
 {
  "$schema": "./toolbox-release-lock.schema.json",
  "schemaVersion": 1,
-  "releaseVersion": "0.4.0",
-  "portalVersion": "0.2.0",
+  "releaseVersion": "0.4.3",
+  "portalVersion": "0.2.3",
  "catalogue": {
    "id": "de.add-ideas.toolbox",
    "name": "add·ideas Toolbox",
@@ -15,23 +15,23 @@
  "apps": [
    {
      "id": "de.add-ideas.pdf-tools",
-      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.0/pdf-tools-0.4.0.zip",
-      "sha256": "c9a2d3bed41c41dc6664f6ab7ecefebb5ef4895ce49cd7b0726e3d47d62a66ca",
+      "version": "0.4.3",
+      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.3/pdf-tools-0.4.3.zip",
+      "sha256": "f2dfd3bade49a4b8be9c0c54c6c2bf1bbb153fc0505a38af14de5ab52d5183cf",
      "target": "pdf"
    },
    {
      "id": "de.add-ideas.xslt-tools",
-      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.0/xslt-tools-0.4.0.zip",
-      "sha256": "62e02c08d25456cd0a876d4005dfdcadf69471619230cb5f03f62451f501f142",
+      "version": "0.4.2",
+      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.2/xslt-tools-0.4.2.zip",
+      "sha256": "daaa821c10c6c6285f97128ba3d923e48efa24449f1fb0a21bf478abaf27499f",
      "target": "xslt"
    },
    {
      "id": "de.add-ideas.onenote-tools",
-      "version": "0.3.0",
-      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.0/onenote-tools-0.3.0.zip",
-      "sha256": "44fa28252995b4bf7789b7a546091ee70d43990ab893481d9f4831d5cf5525e3",
+      "version": "0.3.3",
+      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.3/onenote-tools-0.3.3.zip",
+      "sha256": "37c0ef7cdc7f435d0d4f5a341523f4e522118d5b258c374b5a7ef7b8e6c27cec",
      "target": "onenote"
    }
  ]
--- a/scripts/assembler.test.ts
+++ b/scripts/assembler.test.ts
@@ -83,7 +83,7 @@ function makeLock(artifact: string, sha256: string) {
  return {
    schemaVersion: 1,
    releaseVersion: '0.1.0',
-    portalVersion: '0.2.0',
+    portalVersion: '0.2.3',
    catalogue: {
      id: 'de.add-ideas.toolbox',
      name: 'Test Toolbox',
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -13,44 +13,70 @@ import { catalogue, catalogueFetch } from './test/fixtures';

 afterEach(() => vi.unstubAllGlobals());

+function toolLink(name: string) {
+  return screen.getByRole('link', { name: `Open ${name}` });
+}
+
+function queryToolLink(name: string) {
+  return screen.queryByRole('link', { name: `Open ${name}` });
+}
+
+function findToolLink(name = 'PDF Workbench') {
+  return screen.findByRole('link', { name: `Open ${name}` });
+}
+
 describe('portal UI', () => {
-  it('renders app cards and persists accessible pin/hide controls', async () => {
+  it('renders compact actionable tiles and persists pin/hide controls', async () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    const user = userEvent.setup();
    render(<App />);
+    const launch = await findToolLink();
+    const card = screen.getByTestId('app-card-de.add-ideas.pdf-tools');
+    expect(within(card).getByRole('heading', { level: 3 })).toHaveTextContent(
+      'PDF'
+    );
+    expect(within(card).getByText('Arrange PDF pages locally.')).toBeVisible();
    expect(
-      await screen.findByRole('heading', { name: 'PDF Workbench' })
-    ).toBeInTheDocument();
+      screen.getByTestId('app-card-de.add-ideas.xslt-tools')
+    ).toHaveTextContent('XSLT');
    expect(
-      screen.getAllByText(
+      screen.getByTestId('app-card-de.add-ideas.onenote-tools')
+    ).toHaveTextContent('OneNote');
+    expect(
+      screen.queryByText(
+        'Page-level PDF operations performed locally in the browser.'
+      )
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
        'Local processing · no file uploads declared · no telemetry declared'
      )
-    ).toHaveLength(3);
-    const sourceLinks = screen.getAllByRole('link', {
-      name: 'Source and license',
-    });
-    expect(sourceLinks).toHaveLength(4);
+    ).not.toBeInTheDocument();
    expect(
-      sourceLinks.find(
-        (link) =>
-          link.getAttribute('href') ===
-          'https://git.add-ideas.de/zemion/pdf-tools'
-      )
-    ).toHaveAttribute('rel', 'noopener noreferrer');
-    expect(
-      sourceLinks.find((link) =>
-        link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.4.0')
-      )
-    ).toBeDefined();
+      screen.getAllByRole('link', { name: 'Source and license' })
+    ).toHaveLength(1);
    expect(
      screen.queryByRole('region', { name: 'Pinned' })
    ).not.toBeInTheDocument();
-    const launch = screen
-      .getAllByRole('link', { name: 'PDF Workbench' })
-      .find((link) => link.classList.contains('app-card__launch-link'))!;
+    const showHidden = screen.getByRole('checkbox', {
+      name: 'Show hidden (0)',
+    });
+    expect(showHidden).toBeDisabled();
+    expect(showHidden).not.toBeChecked();
+    expect(launch).toHaveClass('app-card__launch-link');
    expect(
      new URL(launch.getAttribute('href')!).searchParams.get('toolbox')
    ).toContain('toolbox.catalog.json');
+    const actions = within(card).getByRole('group', {
+      name: 'Actions for PDF Workbench',
+    });
+    const info = within(actions).getByRole('button', {
+      name: 'More information about PDF Workbench',
+    });
+    expect(info).toHaveAttribute('aria-haspopup', 'dialog');
+    for (const control of within(actions).getAllByRole('button'))
+      expect(control.closest('a')).toBeNull();
+    expect(launch).not.toContainElement(info);

    await user.click(screen.getByRole('button', { name: 'Pin PDF Workbench' }));
    await waitFor(() =>
@@ -64,6 +90,12 @@ describe('portal UI', () => {
    expect(
      screen.queryByRole('button', { name: /Move PDF Workbench/i })
    ).not.toBeInTheDocument();
+    const unpin = screen.getByRole('button', {
+      name: 'Unpin PDF Workbench',
+    });
+    expect(unpin).toHaveAttribute('aria-pressed', 'true');
+    expect(unpin).toHaveClass('is-active');
+    await waitFor(() => expect(unpin).toHaveFocus());
    expect(
      screen.getByRole('button', { name: 'Reorder PDF Workbench' })
    ).toBeInTheDocument();
@@ -71,21 +103,181 @@ describe('portal UI', () => {
    await user.click(
      screen.getByRole('button', { name: 'Hide PDF Workbench' })
    );
+    expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
+    expect(showHidden).toBeEnabled();
+    expect(showHidden).toHaveAccessibleName('Show hidden (1)');
+    await waitFor(() => expect(showHidden).toHaveFocus());
+    fireEvent.click(showHidden);
+    expect(toolLink('PDF Workbench')).toBeInTheDocument();
+    await user.click(
+      screen.getByRole('button', { name: 'Show PDF Workbench' })
+    );
+    expect(showHidden).toBeDisabled();
+    expect(showHidden).not.toBeChecked();
+    await waitFor(() =>
      expect(
-      screen.queryByRole('heading', { name: 'PDF Workbench' })
-    ).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole('checkbox', { name: /show hidden/i }));
+        screen.getByRole('button', { name: 'Hide PDF Workbench' })
+      ).toHaveFocus()
+    );
+  });
+
+  it('moves the full disclosure into an accessible modal', async () => {
+    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+    await findToolLink();
+    const info = screen.getByRole('button', {
+      name: 'More information about PDF Workbench',
+    });
+
+    await user.click(info);
+    const dialog = screen.getByRole('dialog', { name: 'PDF Workbench' });
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+    expect(dialog).toHaveTextContent(
+      'Page-level PDF operations performed locally in the browser.'
+    );
+    expect(dialog).toHaveTextContent(
+      'Local processing · no file uploads declared · no telemetry declared'
+    );
+    expect(dialog).toHaveTextContent(
+      'Needs Secure context · Web workers · IndexedDB'
+    );
+    expect(dialog).toHaveTextContent('v0.4.3');
    expect(
-      screen.getByRole('heading', { name: 'PDF Workbench' })
+      within(dialog).getByRole('button', { name: 'documents' })
    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole('button', { name: '#merge' })
+    ).toBeInTheDocument();
+    const sourceLink = within(dialog).getByRole('link', {
+      name: 'Source and license',
+    });
+    expect(sourceLink).toHaveAttribute(
+      'href',
+      'https://git.add-ideas.de/zemion/pdf-tools'
+    );
+    expect(sourceLink).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(
+      within(dialog).getByRole('link', { name: 'Open PDF' })
+    ).toBeInTheDocument();
+    expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
+    expect(container.querySelector('.site-shell')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    );
+    expect(document.documentElement).toHaveStyle({ overflow: 'hidden' });
+
+    const close = within(dialog).getByRole('button', {
+      name: 'Close information for PDF Workbench',
+    });
+    expect(close).toHaveFocus();
+    within(dialog).getByRole('link', { name: 'Open PDF' }).focus();
+    await user.tab();
+    expect(close).toHaveFocus();
+
+    await user.keyboard('{Escape}');
+    expect(
+      screen.queryByRole('dialog', { name: 'PDF Workbench' })
+    ).not.toBeInTheDocument();
+    expect(info).toHaveFocus();
+    expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
+    expect(document.documentElement).not.toHaveStyle({ overflow: 'hidden' });
+  });
+
+  it('keeps search and category controls together and filters with each', async () => {
+    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
+    const user = userEvent.setup();
+    render(<App />);
+    await findToolLink();
+
+    const search = screen.getByRole('searchbox', { name: 'Search tools' });
+    const category = screen.getByRole('combobox', {
+      name: 'Filter by category',
+    });
+    expect(search.closest('.tool-controls')).toBe(
+      category.closest('.tool-controls')
+    );
+
+    await user.type(search, 'xslt');
+    expect(toolLink('XSLT Workbench')).toBeInTheDocument();
+    expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
+
+    await user.clear(search);
+    await user.selectOptions(category, 'notes');
+    expect(toolLink('OneNote Reader')).toBeInTheDocument();
+    expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
+
+    await user.selectOptions(category, '');
+    await user.click(
+      screen.getByRole('button', {
+        name: 'More information about PDF Workbench',
+      })
+    );
+    await user.click(
+      within(screen.getByRole('dialog', { name: 'PDF Workbench' })).getByRole(
+        'button',
+        { name: 'pdf' }
+      )
+    );
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(category).toHaveValue('pdf');
+    expect(toolLink('PDF Workbench')).toBeInTheDocument();
+    expect(queryToolLink('OneNote Reader')).not.toBeInTheDocument();
+  });
+
+  it('keeps remaining hidden tools visible while editing the hidden set', async () => {
+    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
+    const user = userEvent.setup();
+    render(<App />);
+    await findToolLink();
+
+    await user.click(
+      screen.getByRole('button', { name: 'Hide PDF Workbench' })
+    );
+    const showHidden = screen.getByRole('checkbox', {
+      name: 'Show hidden (1)',
+    });
+    await user.click(showHidden);
+    await user.click(
+      screen.getByRole('button', { name: 'Hide XSLT Workbench' })
+    );
+    expect(showHidden).toHaveAccessibleName('Show hidden (2)');
+    await user.click(
+      screen.getByRole('button', { name: 'Show PDF Workbench' })
+    );
+
+    expect(showHidden).toBeChecked();
+    expect(showHidden).toHaveAccessibleName('Show hidden (1)');
+    expect(toolLink('XSLT Workbench')).toBeInTheDocument();
+  });
+
+  it('clears search filters without revealing hidden tools', async () => {
+    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
+    const user = userEvent.setup();
+    render(<App />);
+    await findToolLink();
+    await user.click(
+      screen.getByRole('button', { name: 'Hide PDF Workbench' })
+    );
+    await user.type(
+      screen.getByRole('searchbox', { name: 'Search tools' }),
+      'no tool has this phrase'
+    );
+    await user.click(screen.getByRole('button', { name: 'Clear filters' }));
+
+    expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
+    expect(toolLink('XSLT Workbench')).toBeInTheDocument();
+    expect(
+      screen.getByRole('checkbox', { name: 'Show hidden (1)' })
+    ).not.toBeChecked();
  });

  it('lists contextual destinations in the Apps menu', async () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    const user = userEvent.setup();
    render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
-    await user.click(screen.getByText('Apps').closest('summary')!);
+    await findToolLink();
+    await user.click(screen.getByRole('button', { name: 'Apps' }));
    const navigation = screen.getByRole('navigation', {
      name: 'Toolbox applications',
    });
@@ -97,18 +289,87 @@ describe('portal UI', () => {
    ).toContain('toolbox.catalog.json');
  });

+  it('uses the shared accessible header identity and control order', async () => {
+    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
+    render(<App />);
+    await findToolLink();
+
+    const header = document.querySelector<HTMLElement>('.portal-header')!;
+    expect(
+      within(header).getByRole('heading', { level: 1, name: 'Toolbox' })
+    ).toBeInTheDocument();
+    expect(
+      within(header).getByText('Local-first browser tools')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', {
+        level: 2,
+        name: 'Your document tools, in one calm place.',
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByRole('heading', {
+        name: 'Your document tools, in one calm place.',
+      })
+    ).toHaveLength(1);
+
+    const personalize = within(header).getByRole('button', {
+      name: 'Personalize',
+    });
+    const apps = within(header).getByRole('button', { name: 'Apps' });
+    const source = within(header).getByRole('link', {
+      name: 'Toolbox source on Gitea',
+    });
+    const help = within(header).getByRole('button', { name: 'Help' });
+    const brand = within(header).getByRole('link', {
+      name: 'add·ideas Toolbox',
+    });
+    const controls = within(header).getByRole('group', {
+      name: 'Toolbox controls',
+    });
+    expect(
+      Array.from(controls.children, (element) =>
+        element.getAttribute('aria-label')
+      )
+    ).toEqual(['Help', 'Toolbox source on Gitea', 'Apps', 'Personalize']);
+    expect(help.compareDocumentPosition(source)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(source.compareDocumentPosition(apps)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(apps.compareDocumentPosition(personalize)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(
+      Array.from(
+        header.querySelector('.toolbox-shell__bar')?.children ?? [],
+        (element) => element.className
+      )
+    ).toEqual([
+      'toolbox-shell__brand',
+      'toolbox-shell__identity',
+      'toolbox-shell__controls',
+    ]);
+    expect(brand.querySelector('img')).toHaveAttribute('src', './favicon.svg');
+  });
+
  it('persists an explicit appearance and accepts cross-tab updates', async () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    const user = userEvent.setup();
    render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
-    await user.click(screen.getByRole('button', { name: 'Personalize' }));
+    await findToolLink();
+    const personalize = screen.getByRole('button', { name: 'Personalize' });
+    await user.click(personalize);
+    expect(
+      screen.getByRole('heading', { name: 'Personalize your toolbox' })
+    ).toBeInTheDocument();
    await user.click(screen.getByRole('button', { name: 'Dark' }));
    expect(document.documentElement).toHaveAttribute('data-theme', 'dark');
    await waitFor(() =>
      expect(localStorage.getItem(PREFERENCES_KEY)).toContain('"theme":"dark"')
    );
-    await user.click(screen.getByRole('button', { name: 'Close preferences' }));
+    await user.click(personalize);

    fireEvent(
      window,
@@ -133,7 +394,7 @@ describe('portal UI', () => {
  it('supports keyboard drag ordering from each tile grip', async () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
    const cards = [
      screen.getByTestId('app-card-de.add-ideas.pdf-tools'),
      screen.getByTestId('app-card-de.add-ideas.xslt-tools'),
@@ -143,11 +404,11 @@ describe('portal UI', () => {
      const rect = {
        x: index * 220,
        y: 0,
-        width: 200,
-        height: 320,
+        width: 188,
+        height: 188,
        top: 0,
-        right: index * 220 + 200,
-        bottom: 320,
+        right: index * 220 + 188,
+        bottom: 188,
        left: index * 220,
        toJSON: () => ({}),
      } as DOMRect;
@@ -168,7 +429,7 @@ describe('portal UI', () => {
        within(tools)
          .getAllByRole('heading', { level: 3 })
          .map((heading) => heading.textContent)
-      ).toEqual(['XSLT Workbench', 'PDF Workbench', 'OneNote Reader']);
+      ).toEqual(['XSLT', 'PDF', 'OneNote']);
    });
    expect(
      JSON.parse(localStorage.getItem(PREFERENCES_KEY) ?? '{}').order
@@ -183,39 +444,53 @@ describe('portal UI', () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    const user = userEvent.setup();
    render(<App />);
-    const merge = await screen.findByRole('button', { name: '#merge' });
-    await user.click(merge);
-    expect(merge).toHaveAttribute('aria-pressed', 'true');
-    expect(
-      screen.getByRole('heading', { name: 'PDF Workbench' })
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByRole('heading', { name: 'XSLT Workbench' })
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('heading', { name: 'OneNote Reader' })
-    ).not.toBeInTheDocument();
+    await findToolLink();
+    await user.click(
+      screen.getByRole('button', {
+        name: 'More information about PDF Workbench',
+      })
+    );
+    const dialog = screen.getByRole('dialog', { name: 'PDF Workbench' });
+    await user.click(within(dialog).getByRole('button', { name: '#merge' }));

-    await user.click(screen.getByRole('button', { name: '#merge' }));
-    expect(
-      await screen.findByRole('heading', { name: 'XSLT Workbench' })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('heading', { name: 'OneNote Reader' })
-    ).toBeInTheDocument();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(toolLink('PDF Workbench')).toBeInTheDocument();
+    expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
+    expect(queryToolLink('OneNote Reader')).not.toBeInTheDocument();
+
+    const activeTag = screen.getByRole('button', {
+      name: /#merge.*Clear tag filter/i,
+    });
+    await user.click(activeTag);
+    expect(await findToolLink('XSLT Workbench')).toBeInTheDocument();
+    expect(toolLink('OneNote Reader')).toBeInTheDocument();
  });

  it('opens the standard help control and explains tile interaction', async () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    const user = userEvent.setup();
-    render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
-    await user.click(screen.getByRole('button', { name: 'Help' }));
-    expect(
-      screen.getByRole('dialog', { name: 'Choose and arrange your tools' })
-    ).toHaveTextContent('click anywhere on a tool tile');
-    await user.click(screen.getByRole('button', { name: 'Close help' }));
+    const { container } = render(<App />);
+    await findToolLink();
+    const help = screen.getByRole('button', { name: 'Help' });
+    await user.click(help);
+    const dialog = screen.getByRole('dialog', {
+      name: 'Choose and arrange your tools',
+    });
+    expect(dialog).toHaveTextContent('click anywhere on a tool tile');
+    expect(dialog).toHaveTextContent('use the light bulb');
+    expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
+    expect(container.querySelector('.site-shell')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    );
+    const close = within(dialog).getByRole('button', { name: 'Close help' });
+    expect(close).toHaveFocus();
+    await user.tab();
+    expect(close).toHaveFocus();
+    await user.keyboard('{Escape}');
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
+    expect(help).toHaveFocus();
  });

  it('shows a recoverable catalogue error', async () => {
@@ -229,9 +504,7 @@ describe('portal UI', () => {
      await screen.findByRole('heading', { name: 'Toolbox unavailable' })
    ).toBeInTheDocument();
    fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
-    expect(
-      await screen.findByRole('heading', { name: 'PDF Workbench' })
-    ).toBeInTheDocument();
+    expect(await findToolLink()).toBeInTheDocument();
  });

  it('shows a dedicated empty state for a valid catalogue', async () => {
@@ -249,31 +522,42 @@ describe('portal UI', () => {
    ).toBeInTheDocument();
  });

-  it('contains preference focus and restores it to Personalize', async () => {
+  it('hosts compact preferences in the shared Personalize popover', async () => {
    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
    const user = userEvent.setup();
    const { container } = render(<App />);
    const personalize = screen.getByRole('button', { name: 'Personalize' });

    await user.click(personalize);
-    const dialog = screen.getByRole('dialog', {
+    const heading = screen.getByRole('heading', {
      name: 'Personalize your toolbox',
    });
-    const close = screen.getByRole('button', { name: 'Close preferences' });
-    expect(close).toHaveFocus();
-    expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
-    expect(dialog).toBeInTheDocument();
+    const popover = screen.getByRole('dialog', { name: 'Personalize Toolbox' });
+    expect(popover).toContainElement(heading);
+    expect(popover).toContainElement(screen.getByText('On this device'));
+    expect(
+      within(popover).getByRole('group', { name: 'Appearance' })
+    ).toBeInTheDocument();
+    expect(
+      popover.querySelector('.toolbox-shell__preferences-content')
+    ).toBeInTheDocument();
+    expect(popover).not.toHaveAttribute('aria-modal');
+    expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
    expect(screen.getByText(/does not transmit them/i)).toHaveTextContent(
      /Trusted code in another Toolbox app on this site can access same-origin storage/i
    );
-
-    const reset = screen.getByRole('button', { name: 'Reset' });
-    reset.focus();
-    await user.tab();
-    expect(close).toHaveFocus();
+    expect(
+      screen.getByRole('button', { name: 'Export JSON' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Import JSON' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reset' })).toBeInTheDocument();

    await user.keyboard('{Escape}');
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('dialog', { name: 'Personalize Toolbox' })
+    ).not.toBeInTheDocument();
    expect(personalize).toHaveFocus();
  });
 });
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,8 +16,9 @@ import {
  ToolboxHeader,
  type ToolboxHeaderApp,
 } from '@add-ideas/toolbox-shell-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AppCard } from './components/AppCard';
+import { AppDetailsPanel } from './components/AppDetailsPanel';
 import { HelpPanel } from './components/HelpPanel';
 import { Logo } from './components/Logo';
 import { PreferencesPanel } from './components/PreferencesPanel';
@@ -34,6 +35,9 @@ type LoadState =
  | { status: 'error'; message: string }
  | { status: 'ready'; value: LoadedCatalogue };

+type PortalOverlay =
+  { kind: 'help' } | { kind: 'details'; appId: string } | null;
+
 function appMatches(
  app: ResolvedApp,
  query: string,
@@ -50,29 +54,25 @@ function appMatches(
 }

 interface AppSectionProps {
-  activeTag: string;
  apps: ResolvedApp[];
  catalogueUrl: string;
  hiddenIds: readonly string[];
  id: string;
-  onCategory: (category: string) => void;
+  onDetails: (id: string) => void;
  onHide: (id: string) => void;
  onPin: (id: string) => void;
-  onTag: (tag: string) => void;
  pinned: boolean;
  title: string;
 }

 function AppSection({
-  activeTag,
  apps,
  catalogueUrl,
  hiddenIds,
  id,
-  onCategory,
+  onDetails,
  onHide,
  onPin,
-  onTag,
  pinned,
  title,
 }: AppSectionProps) {
@@ -97,11 +97,9 @@ function AppSection({
              contextualUrl={contextualLaunchUrl}
              pinned={pinned}
              hidden={hiddenIds.includes(app.id)}
-              activeTag={activeTag}
-              onCategory={onCategory}
+              onDetails={() => onDetails(app.id)}
              onPin={() => onPin(app.id)}
              onHide={() => onHide(app.id)}
-              onTag={onTag}
            />
          ))}
        </div>
@@ -116,13 +114,16 @@ export default function App() {
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState('');
  const [activeTag, setActiveTag] = useState('');
-  const [showHidden, setShowHidden] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [helpOpen, setHelpOpen] = useState(false);
+  const [shownHiddenIds, setShownHiddenIds] = useState<
+    readonly string[] | null
+  >(null);
+  const [overlay, setOverlay] = useState<PortalOverlay>(null);
+  const hiddenToggle = useRef<HTMLInputElement>(null);
  const [preferences, setPreferences, storageAvailable] = usePreferences();
-  const closeSettings = useCallback(() => setSettingsOpen(false), []);
-  const closeHelp = useCallback(() => setHelpOpen(false), []);
-  const dialogOpen = settingsOpen || helpOpen;
+  const closeOverlay = useCallback(() => setOverlay(null), []);
+  const showHidden =
+    preferences.hidden.length > 0 &&
+    shownHiddenIds?.some((id) => preferences.hidden.includes(id)) === true;
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -148,6 +149,11 @@ export default function App() {

  const loaded = loadState.status === 'ready' ? loadState.value : undefined;
  const apps = useMemo(() => loaded?.apps ?? [], [loaded]);
+  const detailsApp =
+    overlay?.kind === 'details'
+      ? apps.find((app) => app.id === overlay.appId)
+      : undefined;
+  const overlayOpen = overlay?.kind === 'help' || detailsApp !== undefined;

  useEffect(() => {
    if (!loaded) return;
@@ -204,12 +210,30 @@ export default function App() {
  }));

  function toggleListItem(field: 'pinned' | 'hidden', id: string) {
+    const keepCardVisible = field === 'pinned' || showHidden;
+    if (field === 'hidden' && showHidden && !preferences.hidden.includes(id)) {
+      setShownHiddenIds((current) => [...new Set([...(current ?? []), id])]);
+    }
    setPreferences((current) => ({
      ...current,
      [field]: current[field].includes(id)
        ? current[field].filter((item) => item !== id)
        : [...current[field], id],
    }));
+    window.requestAnimationFrame(() => {
+      if (!keepCardVisible) {
+        hiddenToggle.current?.focus();
+        return;
+      }
+      const action = field === 'pinned' ? 'pin' : 'visibility';
+      [
+        ...document.querySelectorAll<HTMLButtonElement>(
+          `[data-card-action="${action}"]`
+        ),
+      ]
+        .find((button) => button.dataset.appId === id)
+        ?.focus();
+    });
  }

  function handleDragEnd(event: DragEndEvent) {
@@ -231,33 +255,37 @@ export default function App() {
    setQuery('');
    setCategory('');
    setActiveTag('');
-    if (preferences.hidden.length > 0) setShowHidden(true);
+    setShownHiddenIds(null);
  }

-  const title = loaded?.catalogue.name ?? 'add·ideas Toolbox';
-  const brand = loaded?.catalogue.theme.brand ?? 'add·ideas';
-
  return (
    <>
      <div
        className="site-shell"
-        inert={dialogOpen}
-        aria-hidden={dialogOpen || undefined}
+        inert={overlayOpen}
+        aria-hidden={overlayOpen || undefined}
      >
        <a className="skip-link" href="#main-content">
          Skip to tools
        </a>
        <ToolboxHeader
          className="portal-header"
-          title={title}
-          iconUrl="./favicon.svg"
+          title="Toolbox"
+          subtitle="Local-first browser tools"
          theme={preferences.theme}
          homeHref={loaded?.homeUrl ?? './'}
-          homeLabel={brand}
-          helpAction={{ onClick: () => setHelpOpen(true) }}
+          homeLabel="add·ideas Toolbox"
+          brandIconUrl="./favicon.svg"
+          helpAction={{ onClick: () => setOverlay({ kind: 'help' }) }}
          sourceHref={PORTAL_SOURCE}
          sourceLabel="Toolbox source on Gitea"
-          onPersonalize={() => setSettingsOpen(true)}
+          personalizeContent={
+            <PreferencesPanel
+              preferences={preferences}
+              storageAvailable={storageAvailable}
+              onChange={setPreferences}
+            />
+          }
          apps={headerApps}
          allAppsHref="#main-content"
        />
@@ -270,8 +298,7 @@ export default function App() {
              </p>
              <h2 id="page-title">
                Your document tools,
-                <br />
-                <span>in one calm place.</span>
+                <br /> <span>in one calm place.</span>
              </h2>
              <p className="hero-copy">
                Focused browser utilities with a privacy disclosure for each
@@ -315,16 +342,26 @@ export default function App() {
                    <span className="visually-hidden">Clear tag filter</span>
                  </button>
                )}
-                {preferences.hidden.length > 0 && (
-                  <label className="hidden-toggle">
+                <label
+                  className={`hidden-toggle${
+                    preferences.hidden.length === 0
+                      ? ' hidden-toggle--disabled'
+                      : ''
+                  }`}
+                >
                  <input
+                    ref={hiddenToggle}
                    type="checkbox"
                    checked={showHidden}
-                      onChange={(event) => setShowHidden(event.target.checked)}
+                    disabled={preferences.hidden.length === 0}
+                    onChange={(event) =>
+                      setShownHiddenIds(
+                        event.target.checked ? [...preferences.hidden] : null
+                      )
+                    }
                  />
                  Show hidden ({preferences.hidden.length})
                </label>
-                )}
              </section>
            )}
          </section>
@@ -398,30 +435,26 @@ export default function App() {
                      title="Pinned"
                      apps={pinnedApps}
                      pinned
-                      activeTag={activeTag}
                      catalogueUrl={loaded.catalogueUrl.href}
                      hiddenIds={preferences.hidden}
-                      onCategory={setCategory}
+                      onDetails={(id) =>
+                        setOverlay({ kind: 'details', appId: id })
+                      }
                      onPin={(id) => toggleListItem('pinned', id)}
                      onHide={(id) => toggleListItem('hidden', id)}
-                      onTag={(tag) =>
-                        setActiveTag((current) => (current === tag ? '' : tag))
-                      }
                    />
                    <AppSection
                      id="regular-apps"
                      title="Tools"
                      apps={regularApps}
                      pinned={false}
-                      activeTag={activeTag}
                      catalogueUrl={loaded.catalogueUrl.href}
                      hiddenIds={preferences.hidden}
-                      onCategory={setCategory}
+                      onDetails={(id) =>
+                        setOverlay({ kind: 'details', appId: id })
+                      }
                      onPin={(id) => toggleListItem('pinned', id)}
                      onHide={(id) => toggleListItem('hidden', id)}
-                      onTag={(tag) =>
-                        setActiveTag((current) => (current === tag ? '' : tag))
-                      }
                    />
                  </div>
                </DndContext>
@@ -456,9 +489,9 @@ export default function App() {
            </span>
          </p>
          <span>
-            Portal v0.2.0 ·{' '}
+            Portal v0.2.3 ·{' '}
            <a
-              href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.0"
+              href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.3"
              target="_blank"
              rel="noopener noreferrer"
            >
@@ -468,14 +501,26 @@ export default function App() {
        </footer>
      </div>

-      <PreferencesPanel
-        open={settingsOpen}
-        preferences={preferences}
-        storageAvailable={storageAvailable}
-        onChange={setPreferences}
-        onClose={closeSettings}
+      <HelpPanel open={overlay?.kind === 'help'} onClose={closeOverlay} />
+      {detailsApp && loaded ? (
+        <AppDetailsPanel
+          app={detailsApp}
+          catalogueUrl={loaded.catalogueUrl.href}
+          contextualUrl={contextualLaunchUrl}
+          pinned={preferences.pinned.includes(detailsApp.id)}
+          hidden={preferences.hidden.includes(detailsApp.id)}
+          activeTag={activeTag}
+          onCategory={(nextCategory) => {
+            setCategory(nextCategory);
+            closeOverlay();
+          }}
+          onTag={(tag) => {
+            setActiveTag((current) => (current === tag ? '' : tag));
+            closeOverlay();
+          }}
+          onClose={closeOverlay}
        />
-      <HelpPanel open={helpOpen} onClose={closeHelp} />
+      ) : null}
    </>
  );
 }
--- a/src/components/AppCard.tsx
+++ b/src/components/AppCard.tsx
@@ -1,5 +1,7 @@
+import { useId } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { shortToolDescription, shortToolTitle } from '../toolPresentation';
 import type { ResolvedApp } from '../types';

 interface AppCardProps {
@@ -7,48 +9,50 @@ interface AppCardProps {
  catalogueUrl: string;
  hidden: boolean;
  pinned: boolean;
-  activeTag: string;
-  onCategory: (category: string) => void;
+  onDetails: () => void;
  onHide: () => void;
  onPin: () => void;
-  onTag: (tag: string) => void;
  contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
 }

-function RequirementSummary({ app }: { app: ResolvedApp }) {
-  if (!app.requirements) return null;
-  const requirements = [
-    app.requirements.secureContext && 'Secure context',
-    app.requirements.workers && 'Web workers',
-    app.requirements.indexedDb && 'IndexedDB',
-    app.requirements.crossOriginIsolated && 'Cross-origin isolation',
-  ].filter(Boolean);
-  if (requirements.length === 0) return null;
-  return <p className="requirements">Needs {requirements.join(' · ')}</p>;
+function MoveIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="7" cy="5" r="1.2" />
+      <circle cx="13" cy="5" r="1.2" />
+      <circle cx="7" cy="10" r="1.2" />
+      <circle cx="13" cy="10" r="1.2" />
+      <circle cx="7" cy="15" r="1.2" />
+      <circle cx="13" cy="15" r="1.2" />
+    </svg>
+  );
 }

-function PrivacySummary({ app }: { app: ResolvedApp }) {
-  if (!app.privacy)
+function LightBulbIcon() {
  return (
-      <p className="privacy-summary">
-        External destination · review its privacy terms
-      </p>
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M9 18h6M10 21h4" />
+      <path d="M8.4 14.8A6 6 0 1 1 15.6 14.8c-.9.7-1.4 1.4-1.6 2.2h-4c-.2-.8-.7-1.5-1.6-2.2Z" />
+    </svg>
  );
-  if (app.privacy.label)
-    return <p className="privacy-summary">{app.privacy.label}</p>;
-  const processing = {
-    local: 'Local processing',
-    remote: 'Remote processing',
-    mixed: 'Local and remote capabilities',
-  }[app.privacy.processing];
+}
+
+function PinIcon() {
  return (
-    <p className="privacy-summary">
-      {processing} ·{' '}
-      {app.privacy.fileUploads
-        ? 'file/data transmission declared'
-        : 'no file uploads declared'}{' '}
-      · {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'}
-    </p>
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M8 3h8l-1 6 3 3v2H6v-2l3-3-1-6Z" />
+      <path d="M12 14v7" />
+    </svg>
+  );
+}
+
+function VisibilityIcon({ hidden }: { hidden: boolean }) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M3 12s3.2-5 9-5 9 5 9 5-3.2 5-9 5-9-5-9-5Z" />
+      <circle cx="12" cy="12" r="2.3" />
+      {!hidden && <path d="m4 4 16 16" />}
+    </svg>
  );
 }

@@ -57,13 +61,12 @@ export function AppCard({
  catalogueUrl,
  hidden,
  pinned,
-  activeTag,
-  onCategory,
+  onDetails,
  onHide,
  onPin,
-  onTag,
  contextualUrl,
 }: AppCardProps) {
+  const titleId = useId();
  const {
    attributes,
    isDragging,
@@ -84,10 +87,23 @@ export function AppCard({
      className={`app-card${hidden ? ' app-card--hidden' : ''}${
        isDragging ? ' app-card--dragging' : ''
      }`}
+      aria-labelledby={titleId}
      data-testid={`app-card-${app.id}`}
      style={{ transform: CSS.Transform.toString(transform), transition }}
    >
-      <div className="app-card__top">
+      <button
+        ref={setActivatorNodeRef}
+        {...attributes}
+        {...listeners}
+        className="drag-handle"
+        type="button"
+        aria-label={`Reorder ${app.name}`}
+        title="Drag to reorder"
+      >
+        <MoveIcon />
+      </button>
+
+      <div className="app-card__face">
        <div className="app-card__icon" aria-hidden="true">
          {app.iconUrl ? (
            <img src={app.iconUrl} alt="" loading="lazy" />
@@ -95,112 +111,60 @@ export function AppCard({
            <span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
          )}
        </div>
-        <div
-          className="app-card__actions"
-          aria-label={`Personalize ${app.name}`}
-        >
-          <button
-            ref={setActivatorNodeRef}
-            {...attributes}
-            {...listeners}
-            className="icon-button drag-handle"
-            type="button"
-            aria-label={`Reorder ${app.name}`}
-            title="Drag to reorder"
-          >
-            <span aria-hidden="true">⠿</span>
-          </button>
-          <button
-            className={`icon-button${pinned ? ' is-active' : ''}`}
-            type="button"
-            aria-label={pinned ? `Unpin ${app.name}` : `Pin ${app.name}`}
-            aria-pressed={pinned}
-            title={pinned ? 'Unpin' : 'Pin'}
-            onClick={onPin}
-          >
-            <span aria-hidden="true">⌁</span>
-          </button>
-          <button
-            className="icon-button"
-            type="button"
-            aria-label={hidden ? `Show ${app.name}` : `Hide ${app.name}`}
-            onClick={onHide}
-          >
-            <span aria-hidden="true">{hidden ? '○' : '—'}</span>
-          </button>
-        </div>
-      </div>
-      <div className="app-card__body">
-        <div className="title-line">
-          <h3>
+        <h3 id={titleId}>
          <a
            className="app-card__launch-link"
            href={launchUrl}
            target={target}
            rel={target ? 'noopener noreferrer' : undefined}
+            aria-label={`Open ${app.name}`}
          >
-              {app.name}
+            {shortToolTitle(app)}
          </a>
        </h3>
-          {pinned && <span className="status-chip">Pinned</span>}
-          {hidden && (
-            <span className="status-chip status-chip--muted">Hidden</span>
-          )}
-          {app.isExternal && (
-            <span className="status-chip status-chip--muted">External</span>
-          )}
+        <p>{shortToolDescription(app)}</p>
      </div>
-        <p>{app.description}</p>
-        <PrivacySummary app={app} />
-        <RequirementSummary app={app} />
-        {app.categories.length > 0 && (
-          <div className="category-row" aria-label="Categories">
-            {app.categories.slice(0, 3).map((category) => (
+
+      <div
+        className="app-card__actions"
+        role="group"
+        aria-label={`Actions for ${app.name}`}
+      >
        <button
+          className="icon-button info-button"
          type="button"
-                key={category}
-                onClick={() => onCategory(category)}
+          aria-label={`More information about ${app.name}`}
+          aria-haspopup="dialog"
+          title="More information"
+          data-details-trigger={app.id}
+          onClick={onDetails}
        >
-                {category}
+          <LightBulbIcon />
        </button>
-            ))}
-          </div>
-        )}
-        {app.tags.length > 0 && (
-          <div className="tag-row" aria-label="Tags">
-            {app.tags.map((tag) => (
        <button
+          className={`icon-button pin-button${pinned ? ' is-active' : ''}`}
          type="button"
-                key={tag}
-                aria-pressed={activeTag === tag}
-                onClick={() => onTag(tag)}
+          data-app-id={app.id}
+          data-card-action="pin"
+          aria-label={pinned ? `Unpin ${app.name}` : `Pin ${app.name}`}
+          aria-pressed={pinned}
+          title={pinned ? 'Unpin' : 'Pin'}
+          onClick={onPin}
        >
-                #{tag}
+          <PinIcon />
        </button>
-            ))}
-          </div>
-        )}
-      </div>
-      <footer className="app-card__footer">
-        <div className="app-card__meta">
-          <span className="version">
-            {app.version ? `v${app.version}` : 'External service'}
-          </span>
-          {app.sourceUrl && (
-            <a
-              className="source-link"
-              href={app.sourceUrl}
-              target="_blank"
-              rel="noopener noreferrer"
+        <button
+          className="icon-button visibility-button"
+          type="button"
+          data-app-id={app.id}
+          data-card-action="visibility"
+          aria-label={hidden ? `Show ${app.name}` : `Hide ${app.name}`}
+          title={hidden ? 'Show' : 'Hide'}
+          onClick={onHide}
        >
-              Source and license
-            </a>
-          )}
+          <VisibilityIcon hidden={hidden} />
+        </button>
      </div>
-        <span className="open-hint">
-          Open tool <span aria-hidden="true">↗</span>
-        </span>
-      </footer>
    </article>
  );
 }
--- a/src/components/AppDetailsPanel.tsx
+++ b/src/components/AppDetailsPanel.tsx
@@ -0,0 +1,172 @@
+import { useId } from 'react';
+import type { ResolvedApp } from '../types';
+import { shortToolTitle } from '../toolPresentation';
+import { ModalPanel } from './ModalPanel';
+
+interface AppDetailsPanelProps {
+  activeTag: string;
+  app: ResolvedApp;
+  catalogueUrl: string;
+  hidden: boolean;
+  pinned: boolean;
+  contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
+  onCategory: (category: string) => void;
+  onClose: () => void;
+  onTag: (tag: string) => void;
+}
+
+function RequirementSummary({ app }: { app: ResolvedApp }) {
+  if (!app.requirements) return null;
+  const requirements = [
+    app.requirements.secureContext && 'Secure context',
+    app.requirements.workers && 'Web workers',
+    app.requirements.indexedDb && 'IndexedDB',
+    app.requirements.crossOriginIsolated && 'Cross-origin isolation',
+  ].filter(Boolean);
+  if (requirements.length === 0) return null;
+  return <p className="requirements">Needs {requirements.join(' · ')}</p>;
+}
+
+function PrivacySummary({ app }: { app: ResolvedApp }) {
+  if (!app.privacy)
+    return (
+      <p className="privacy-summary">
+        External destination · review its privacy terms
+      </p>
+    );
+  if (app.privacy.label)
+    return <p className="privacy-summary">{app.privacy.label}</p>;
+  const processing = {
+    local: 'Local processing',
+    remote: 'Remote processing',
+    mixed: 'Local and remote capabilities',
+  }[app.privacy.processing];
+  return (
+    <p className="privacy-summary">
+      {processing} ·{' '}
+      {app.privacy.fileUploads
+        ? 'file/data transmission declared'
+        : 'no file uploads declared'}{' '}
+      · {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'}
+    </p>
+  );
+}
+
+export function AppDetailsPanel({
+  activeTag,
+  app,
+  catalogueUrl,
+  hidden,
+  pinned,
+  contextualUrl,
+  onCategory,
+  onClose,
+  onTag,
+}: AppDetailsPanelProps) {
+  const titleId = useId();
+  const launchUrl = app.isExternal
+    ? app.entryUrl
+    : contextualUrl(app.entryUrl, catalogueUrl);
+  const target = app.launchModes.includes('navigate') ? undefined : '_blank';
+
+  return (
+    <ModalPanel
+      className="app-info-panel"
+      labelledBy={titleId}
+      onClose={onClose}
+    >
+      <header className="app-info-panel__header">
+        <div className="app-info-panel__identity">
+          <div className="app-info-panel__icon" aria-hidden="true">
+            {app.iconUrl ? (
+              <img src={app.iconUrl} alt="" />
+            ) : (
+              <span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
+            )}
+          </div>
+          <div>
+            <p className="eyebrow">Tool information</p>
+            <div className="title-line">
+              <h2 id={titleId}>{app.name}</h2>
+              {pinned && <span className="status-chip">Pinned</span>}
+              {hidden && (
+                <span className="status-chip status-chip--muted">Hidden</span>
+              )}
+              {app.isExternal && (
+                <span className="status-chip status-chip--muted">External</span>
+              )}
+            </div>
+          </div>
+        </div>
+        <button
+          className="close-button"
+          type="button"
+          aria-label={`Close information for ${app.name}`}
+          onClick={onClose}
+        >
+          ×
+        </button>
+      </header>
+
+      <div className="app-info-panel__body">
+        <p className="app-info-panel__description">{app.description}</p>
+        <PrivacySummary app={app} />
+        <RequirementSummary app={app} />
+
+        {app.categories.length > 0 && (
+          <div className="category-row" role="group" aria-label="Categories">
+            {app.categories.slice(0, 3).map((category) => (
+              <button
+                type="button"
+                key={category}
+                onClick={() => onCategory(category)}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        )}
+        {app.tags.length > 0 && (
+          <div className="tag-row" role="group" aria-label="Tags">
+            {app.tags.map((tag) => (
+              <button
+                type="button"
+                key={tag}
+                aria-pressed={activeTag === tag}
+                onClick={() => onTag(tag)}
+              >
+                #{tag}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <footer className="app-info-panel__footer">
+        <div className="app-info-panel__meta">
+          <span className="version">
+            {app.version ? `v${app.version}` : 'External service'}
+          </span>
+          {app.sourceUrl && (
+            <a
+              className="source-link"
+              href={app.sourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Source and license
+            </a>
+          )}
+        </div>
+        <a
+          className="app-info-panel__launch"
+          href={launchUrl}
+          target={target}
+          rel={target ? 'noopener noreferrer' : undefined}
+        >
+          Open {shortToolTitle(app)} <span aria-hidden="true">↗</span>
+        </a>
+      </footer>
+    </ModalPanel>
+  );
+}
--- a/src/components/HelpPanel.tsx
+++ b/src/components/HelpPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { ModalPanel } from './ModalPanel';

 interface HelpPanelProps {
  open: boolean;
@@ -6,61 +6,12 @@ interface HelpPanelProps {
 }

 export function HelpPanel({ open, onClose }: HelpPanelProps) {
-  const panel = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const returnFocus =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-    const dialog = panel.current;
-    const focusable = () =>
-      dialog
-        ? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]
-        : [];
-    focusable()[0]?.focus();
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        onClose();
-        return;
-      }
-      if (event.key !== 'Tab') return;
-      const elements = focusable();
-      const first = elements[0];
-      const last = elements.at(-1);
-      if (!first || !last) return;
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      returnFocus?.focus();
-    };
-  }, [open, onClose]);
-
  if (!open) return null;
  return (
-    <div
-      className="dialog-backdrop"
-      role="presentation"
-      onMouseDown={(event) => event.target === event.currentTarget && onClose()}
-    >
-      <section
-        ref={panel}
+    <ModalPanel
      className="help-panel"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="help-title"
-        tabIndex={-1}
+      labelledBy="help-title"
+      onClose={onClose}
    >
      <header>
        <div>
@@ -82,28 +33,19 @@ export function HelpPanel({ open, onClose }: HelpPanelProps) {
          control.
        </p>
        <p>
-            <strong>Filter:</strong> search, choose a category, or click a tag.
-            Click the selected tag again to clear it.
+          <strong>Details:</strong> use the light bulb to review privacy,
+          requirements, categories, tags, version, and source before opening.
+        </p>
+        <p>
+          <strong>Filter:</strong> search, choose a category, or select a tag
+          from a tool's information panel. Select the tag again to clear it.
        </p>
        <p>
          <strong>Arrange:</strong> pin frequently used tools into their own
          section, then drag the grip to reorder. The grip also supports
          keyboard dragging with Space, arrow keys, and Escape.
        </p>
-          <p>
-            <strong>Privacy:</strong> each tile reports its declared processing,
-            uploads, telemetry, and browser requirements before you open it.
-          </p>
-        </div>
-      </section>
      </div>
+    </ModalPanel>
  );
 }
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',');
--- a/src/components/ModalPanel.tsx
+++ b/src/components/ModalPanel.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+interface ModalPanelProps {
+  children: ReactNode;
+  className: string;
+  labelledBy: string;
+  onClose: () => void;
+}
+
+export function ModalPanel({
+  children,
+  className,
+  labelledBy,
+  onClose,
+}: ModalPanelProps) {
+  const panel = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const returnFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const dialog = panel.current;
+    const focusable = () =>
+      dialog
+        ? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
+            (element) => !element.hasAttribute('disabled')
+          )
+        : [];
+
+    (focusable()[0] ?? dialog)?.focus();
+    const previousOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = 'hidden';
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+
+      const elements = focusable();
+      const first = elements[0];
+      const last = elements.at(-1);
+      if (!first || !last) {
+        event.preventDefault();
+        dialog?.focus();
+        return;
+      }
+
+      const active = document.activeElement;
+      if (!dialog?.contains(active)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.documentElement.style.overflow = previousOverflow;
+      if (returnFocus?.isConnected) returnFocus.focus();
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className="dialog-backdrop"
+      role="presentation"
+      onPointerDown={(event) =>
+        event.target === event.currentTarget && onClose()
+      }
+    >
+      <section
+        ref={panel}
+        className={className}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        tabIndex={-1}
+      >
+        {children}
+      </section>
+    </div>
+  );
+}
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
--- a/src/components/PreferencesPanel.tsx
+++ b/src/components/PreferencesPanel.tsx
@@ -1,93 +1,25 @@
-import { useEffect, useRef, useState, type ChangeEvent } from 'react';
+import { useRef, useState, type ChangeEvent } from 'react';
+import { ToolboxPersonalizePanel } from '@add-ideas/toolbox-shell-react';
 import {
  defaultPreferences,
  parsePreferences,
  type Preferences,
 } from '../preferences';
-import type { ThemeMode } from '../types';

 interface PreferencesPanelProps {
-  open: boolean;
  preferences: Preferences;
  storageAvailable: boolean;
  onChange: (preferences: Preferences) => void;
-  onClose: () => void;
 }

 export function PreferencesPanel({
-  open,
  preferences,
  storageAvailable,
  onChange,
-  onClose,
 }: PreferencesPanelProps) {
  const fileInput = useRef<HTMLInputElement>(null);
-  const panel = useRef<HTMLElement>(null);
  const [message, setMessage] = useState('');

-  useEffect(() => {
-    if (!open) return;
-
-    const returnFocus =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-    const dialog = panel.current;
-    const focusableElements = () =>
-      dialog
-        ? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
-            (element) => !element.hasAttribute('disabled')
-          )
-        : [];
-
-    focusableElements()[0]?.focus();
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        onClose();
-        return;
-      }
-      if (event.key !== 'Tab') return;
-
-      const elements = focusableElements();
-      if (elements.length === 0) {
-        event.preventDefault();
-        dialog?.focus();
-        return;
-      }
-
-      const first = elements[0]!;
-      const last = elements.at(-1)!;
-      const activeElement = document.activeElement;
-      if (
-        event.shiftKey &&
-        (activeElement === first || !dialog?.contains(activeElement))
-      ) {
-        event.preventDefault();
-        last.focus();
-      } else if (
-        !event.shiftKey &&
-        (activeElement === last || !dialog?.contains(activeElement))
-      ) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      returnFocus?.focus();
-    };
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  function setTheme(theme: ThemeMode) {
-    onChange({ ...preferences, theme });
-  }
-
  function exportPreferences() {
    const blob = new Blob([`${JSON.stringify(preferences, null, 2)}\n`], {
      type: 'application/json',
@@ -119,58 +51,11 @@ export function PreferencesPanel({
  }

  return (
-    <div
-      className="dialog-backdrop"
-      role="presentation"
-      onMouseDown={(event) => event.target === event.currentTarget && onClose()}
+    <ToolboxPersonalizePanel
+      theme={preferences.theme}
+      onThemeChange={(theme) => onChange({ ...preferences, theme })}
+      storageAvailable={storageAvailable}
    >
-      <section
-        ref={panel}
-        className="preferences-panel"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="preferences-title"
-        tabIndex={-1}
-      >
-        <header>
-          <div>
-            <p className="eyebrow">On this device</p>
-            <h2 id="preferences-title">Personalize your toolbox</h2>
-          </div>
-          <button
-            className="close-button"
-            type="button"
-            aria-label="Close preferences"
-            onClick={onClose}
-          >
-            ×
-          </button>
-        </header>
-
-        {!storageAvailable && (
-          <p className="inline-warning" role="status">
-            Browser storage is unavailable. Changes will last only until this
-            page closes.
-          </p>
-        )}
-
-        <fieldset className="theme-choice">
-          <legend>Appearance</legend>
-          <div>
-            {(['system', 'light', 'dark'] as const).map((theme) => (
-              <button
-                key={theme}
-                type="button"
-                aria-pressed={preferences.theme === theme}
-                className={preferences.theme === theme ? 'is-selected' : ''}
-                onClick={() => setTheme(theme)}
-              >
-                {theme.slice(0, 1).toLocaleUpperCase() + theme.slice(1)}
-              </button>
-            ))}
-          </div>
-        </fieldset>
-
      <div className="preference-summary">
        <div>
          <strong>{preferences.pinned.length}</strong>
@@ -188,9 +73,9 @@ export function PreferencesPanel({

      <p className="preferences-copy">
        The portal stores pins, visibility, order, and appearance in this
-          browser and does not transmit them. Trusted code in another Toolbox
-          app on this site can access same-origin storage. Export a JSON backup
-          to move them to another device.
+        browser and does not transmit them. Trusted code in another Toolbox app
+        on this site can access same-origin storage. Export a JSON backup to
+        move them to another device.
      </p>

      <div className="preferences-actions">
@@ -222,16 +107,6 @@ export function PreferencesPanel({
      <p className="action-message" role="status" aria-live="polite">
        {message}
      </p>
-      </section>
-    </div>
+    </ToolboxPersonalizePanel>
  );
 }
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',');
--- a/src/styles.css
+++ b/src/styles.css
@@ -123,11 +123,11 @@ summary:focus-visible {
  transform: translateY(0);
 }

-.portal-header .toolbox-shell__bar,
 main,
 .site-footer {
-  width: min(1160px, calc(100% - 2.5rem));
+  width: min(100%, 90rem);
  margin-inline: auto;
+  padding-inline: 1rem;
 }

 .state-card button,
@@ -192,13 +192,9 @@ main {

 .tool-controls {
  display: grid;
-  align-content: end;
+  grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 10.5rem);
+  align-items: center;
  gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--line);
-  border-radius: 1rem;
-  background: color-mix(in srgb, var(--surface) 88%, transparent);
-  box-shadow: var(--shadow);
 }

 .search-field,
@@ -212,7 +208,7 @@ main {
 }

 .search-field {
-  width: 100%;
+  min-width: 0;
  padding: 0 0.85rem;
  gap: 0.55rem;
 }
@@ -235,7 +231,7 @@ main {
 }

 .category-field {
-  width: 100%;
+  min-width: 0;
  padding: 0 0.65rem;
 }

@@ -244,15 +240,21 @@ main {
 }

 .hidden-toggle {
+  grid-column: 2;
  display: flex;
  align-items: center;
+  justify-self: end;
  gap: 0.45rem;
-  margin: 0.15rem 0 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.88rem;
 }

+.hidden-toggle--disabled {
+  cursor: default;
+  opacity: 0.58;
+}
+
 .hidden-toggle input {
  width: 1.05rem;
  height: 1.05rem;
@@ -260,6 +262,7 @@ main {
 }

 .active-filter {
+  grid-column: 1;
  justify-self: start;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
@@ -303,23 +306,31 @@ main {

 .app-grid {
  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1.1rem;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(10.5rem, 100%), 11.75rem)
+  );
+  align-items: start;
+  justify-content: start;
+  gap: 0.9rem;
 }

 .app-card {
  position: relative;
-  min-height: 340px;
+  aspect-ratio: 1;
+  min-width: 0;
  display: flex;
  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
  overflow: hidden;
+  padding: 1rem 0.85rem 0.75rem;
  border: 1px solid var(--line);
-  border-radius: 1.2rem;
+  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    border-color 180ms ease,
-    transform 180ms ease,
    box-shadow 180ms ease;
 }

@@ -331,33 +342,35 @@ main {

 .app-card:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
-  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(24, 34, 68, 0.13);
 }

 .app-card--hidden {
  border-style: dashed;
-  opacity: 0.7;
+  background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
 }

-.app-card__top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 1.35rem 1.35rem 0;
+.app-card__face {
+  min-height: 0;
+  display: grid;
+  flex: 1;
+  align-content: center;
+  justify-items: center;
+  padding: 0.2rem 0.25rem 0;
+  text-align: center;
 }

 .app-card__icon {
-  width: 52px;
-  height: 52px;
+  width: 3.6rem;
+  height: 3.6rem;
  display: grid;
  place-items: center;
  overflow: hidden;
-  border-radius: 0.95rem;
+  border-radius: 0.9rem;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  font-size: 1.45rem;
+  font-size: 1.35rem;
  font-weight: 700;
 }

@@ -367,51 +380,130 @@ main {
  object-fit: contain;
 }

-.app-card__actions {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  gap: 0.15rem;
+.app-card__face h3 {
+  margin: 0.7rem 0 0;
+  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
+  font-size: 1.05rem;
+  letter-spacing: -0.025em;
+}
+
+.app-card__face p {
+  display: -webkit-box;
+  margin: 0.35rem 0 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.72rem;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }

 .drag-handle {
-  touch-action: none;
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 0.35rem;
+  width: 1.7rem;
+  height: 2.25rem;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 0.55rem;
+  background: var(--surface);
+  color: var(--muted);
+  opacity: 0;
  cursor: grab;
+  pointer-events: none;
+  touch-action: none;
+  transform: translate(-0.2rem, -50%);
+  transition:
+    opacity 150ms ease,
+    color 150ms ease,
+    transform 150ms ease;
+}
+
+.app-card:hover .drag-handle,
+.app-card:focus-within .drag-handle,
+.drag-handle:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(0, -50%);
+}
+
+.drag-handle:hover {
+  color: var(--brand);
 }

 .drag-handle:active {
  cursor: grabbing;
 }

+.drag-handle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
+.app-card__actions {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  pointer-events: none;
+}
+
 .icon-button,
 .close-button {
-  width: 32px;
-  height: 32px;
+  width: 2.15rem;
+  height: 2.15rem;
  display: grid;
  place-items: center;
-  border: 0;
+  padding: 0;
+  border: 1px solid var(--line);
  border-radius: 50%;
-  background: transparent;
+  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
 }

+.app-card__actions .icon-button {
+  pointer-events: auto;
+}
+
 .icon-button:hover:not(:disabled),
 .icon-button.is-active {
+  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: var(--brand-soft);
  color: var(--brand);
 }

+.icon-button svg {
+  width: 1.05rem;
+  height: 1.05rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.pin-button svg {
+  transform: rotate(0);
+  transition: transform 180ms ease;
+}
+
+.pin-button.is-active svg {
+  transform: rotate(45deg);
+}
+
 .icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.28;
 }

-.app-card__body {
-  flex: 1;
-  padding: 1.25rem 1.35rem 1rem;
-}
-
 .title-line {
  display: flex;
  flex-wrap: wrap;
@@ -419,10 +511,10 @@ main {
  gap: 0.45rem;
 }

-.title-line h3 {
+.title-line h2 {
  margin: 0;
  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  font-size: 1.3rem;
+  font-size: 1.35rem;
  letter-spacing: -0.025em;
 }

@@ -470,22 +562,6 @@ main {
  color: var(--muted);
 }

-.app-card__body > p {
-  margin: 0.75rem 0 0;
-  color: var(--muted);
-  line-height: 1.6;
-}
-
-.app-card__body .requirements {
-  font-size: 0.72rem;
-}
-
-.app-card__body .privacy-summary {
-  color: var(--text);
-  font-size: 0.76rem;
-  font-weight: 650;
-}
-
 .tag-row,
 .category-row {
  display: flex;
@@ -519,26 +595,11 @@ main {
  color: var(--brand);
 }

-.app-card__footer {
-  min-height: 68px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.85rem 1.35rem;
-  border-top: 1px solid var(--line);
-}
-
 .version {
  color: var(--muted);
  font-size: 0.78rem;
 }

-.app-card__meta {
-  display: grid;
-  gap: 0.25rem;
-}
-
 .source-link,
 .site-footer a {
  position: relative;
@@ -546,12 +607,6 @@ main {
  color: var(--brand);
 }

-.open-hint {
-  color: var(--brand);
-  font-size: 0.84rem;
-  font-weight: 700;
-}
-
 .state-card {
  max-width: 600px;
  margin: 0 auto 5rem;
@@ -655,15 +710,16 @@ main {
  inset: 0;
  display: grid;
  place-items: center;
+  overflow-y: auto;
  padding: 1rem;
  background: rgba(5, 9, 22, 0.56);
  backdrop-filter: blur(5px);
 }

-.preferences-panel,
-.help-panel {
-  width: min(560px, 100%);
+.help-panel,
+.app-info-panel {
  max-height: calc(100vh - 2rem);
+  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid var(--line);
@@ -672,7 +728,15 @@ main {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
 }

-.preferences-panel > header,
+.help-panel {
+  width: min(560px, 100%);
+}
+
+.app-info-panel {
+  position: relative;
+  width: min(680px, 100%);
+}
+
 .help-panel > header {
  display: flex;
  align-items: flex-start;
@@ -680,14 +744,111 @@ main {
  gap: 1rem;
 }

-.preferences-panel h2,
 .help-panel h2 {
  margin: 0;
  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
  letter-spacing: -0.025em;
 }

-.preferences-panel .eyebrow,
+.app-info-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.app-info-panel__identity {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-info-panel__icon {
+  width: 4rem;
+  height: 4rem;
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 1rem;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 1.45rem;
+  font-weight: 700;
+}
+
+.app-info-panel__icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.app-info-panel .eyebrow {
+  margin-bottom: 0.4rem;
+}
+
+.app-info-panel__body {
+  margin-top: 1.35rem;
+  padding: 1.1rem;
+  border: 1px solid var(--line);
+  border-radius: 0.85rem;
+  background: var(--surface);
+}
+
+.app-info-panel__description {
+  margin: 0;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.app-info-panel__body .privacy-summary {
+  margin: 1rem 0 0;
+  color: var(--text);
+  font-size: 0.8rem;
+  font-weight: 650;
+  line-height: 1.5;
+}
+
+.app-info-panel__body .requirements {
+  margin: 0.55rem 0 0;
+  color: var(--muted);
+  font-size: 0.76rem;
+  line-height: 1.5;
+}
+
+.app-info-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.25rem;
+}
+
+.app-info-panel__meta {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.app-info-panel__launch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.7rem 0.9rem;
+  border-radius: 0.7rem;
+  background: var(--brand);
+  color: var(--surface) !important;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.app-info-panel__launch:hover {
+  background: var(--brand-hover);
+  text-decoration: none;
+}
+
 .help-panel .eyebrow {
  margin-bottom: 0.5rem;
 }
@@ -720,44 +881,6 @@ main {
  font-size: 1.3rem;
 }

-.theme-choice {
-  margin: 1.5rem 0;
-  padding: 0;
-  border: 0;
-}
-
-.theme-choice legend {
-  margin-bottom: 0.6rem;
-  color: var(--muted);
-  font-size: 0.78rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.theme-choice > div {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.45rem;
-  padding: 0.35rem;
-  border-radius: 0.75rem;
-  background: var(--surface-soft);
-}
-
-.theme-choice button {
-  padding: 0.62rem;
-  border: 0;
-  border-radius: 0.5rem;
-  background: transparent;
-  cursor: pointer;
-}
-
-.theme-choice button.is-selected {
-  background: var(--surface);
-  color: var(--brand);
-  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.09);
-  font-weight: 700;
-}
-
 .preference-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
@@ -767,7 +890,7 @@ main {
 .preference-summary > div {
  display: grid;
  gap: 0.2rem;
-  padding: 0.9rem;
+  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  text-align: center;
@@ -775,7 +898,7 @@ main {

 .preference-summary strong {
  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  font-size: 1.25rem;
+  font-size: 1.05rem;
 }

 .preference-summary span,
@@ -785,8 +908,11 @@ main {
  font-size: 0.8rem;
 }

-.preferences-copy {
-  margin: 1.1rem 0;
+.portal-header .preferences-copy {
+  margin: 0.9rem 0;
+  padding: 0;
+  color: var(--toolbox-muted, var(--muted));
+  font-size: 0.78rem;
  line-height: 1.55;
 }

@@ -797,7 +923,7 @@ main {
 }

 .preferences-actions button {
-  padding: 0.62rem 0.78rem;
+  padding: 0.52rem 0.68rem;
 }

 .preferences-actions .danger-button {
@@ -805,17 +931,12 @@ main {
  color: var(--danger);
 }

-.action-message {
+.portal-header .action-message {
  min-height: 1.2em;
  margin: 0.8rem 0 0;
-}
-
-.inline-warning {
-  padding: 0.7rem 0.8rem;
-  border-radius: 0.6rem;
-  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
-  color: var(--danger);
-  font-size: 0.82rem;
+  padding: 0;
+  color: var(--toolbox-muted, var(--muted));
+  font-size: 0.78rem;
 }

 .visually-hidden {
@@ -830,10 +951,10 @@ main {
 }

@media (max-width: 700px) {
-  .portal-header .toolbox-shell__bar,
  main,
  .site-footer {
-    width: min(100% - 1.4rem, 1160px);
+    width: min(100%, 90rem);
+    padding-inline: 0.7rem;
  }

  .hero {
@@ -854,14 +975,6 @@ main {
    margin: 0.25rem 0;
  }

-  .app-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .app-card {
-    min-height: 320px;
-  }
-
  .site-footer {
    min-height: 130px;
    align-items: flex-start;
@@ -870,13 +983,50 @@ main {
  }
 }

+@media (max-width: 520px) {
+  .tool-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .search-field,
+  .category-field,
+  .active-filter,
+  .hidden-toggle {
+    grid-column: 1;
+  }
+
+  .hidden-toggle {
+    justify-self: start;
+  }
+
+  .app-info-panel__header,
+  .app-info-panel__footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .app-info-panel__header .close-button {
+    position: absolute;
+    top: 1.1rem;
+    right: 1.1rem;
+  }
+
+  .app-info-panel__identity {
+    padding-right: 2.5rem;
+  }
+}
+
@media (min-width: 701px) and (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  }
+}

-  .app-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (hover: none) {
+  .drag-handle {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate(0, -50%);
  }
 }

--- a/src/test/fixtures.ts
+++ b/src/test/fixtures.ts
@@ -7,7 +7,7 @@ export const pdfManifest: ToolboxAppManifest = {
  schemaVersion: 1,
  id: 'de.add-ideas.pdf-tools',
  name: 'PDF Workbench',
-  version: '0.4.0',
+  version: '0.4.3',
  description: 'Page-level PDF operations performed locally in the browser.',
  entry: './',
  icon: './favicon.svg',
@@ -39,7 +39,7 @@ export const xsltManifest: ToolboxAppManifest = {
  ...pdfManifest,
  id: 'de.add-ideas.xslt-tools',
  name: 'XSLT Workbench',
-  version: '0.4.0',
+  version: '0.4.2',
  description: 'Transform XML locally with XSLT in the browser.',
  icon: './xslt.svg',
  categories: ['documents', 'developer'],
@@ -54,7 +54,7 @@ export const onenoteManifest: ToolboxAppManifest = {
  ...pdfManifest,
  id: 'de.add-ideas.onenote-tools',
  name: 'OneNote Reader',
-  version: '0.3.0',
+  version: '0.3.3',
  description: 'Inspect OneNote packages locally in the browser.',
  icon: './onenote.svg',
  categories: ['documents', 'notes'],
--- a/src/toolPresentation.ts
+++ b/src/toolPresentation.ts
@@ -0,0 +1,27 @@
+import type { ResolvedApp } from './types';
+
+const PRESENTATION: Record<string, { title: string; description: string }> = {
+  'de.add-ideas.pdf-tools': {
+    title: 'PDF',
+    description: 'Arrange PDF pages locally.',
+  },
+  'de.add-ideas.xslt-tools': {
+    title: 'XSLT',
+    description: 'Transform XML locally.',
+  },
+  'de.add-ideas.onenote-tools': {
+    title: 'OneNote',
+    description: 'Open OneNote files locally.',
+  },
+};
+
+export function shortToolTitle(app: ResolvedApp): string {
+  return (
+    PRESENTATION[app.id]?.title ??
+    app.name.replace(/\s+(?:reader|tools?|workbench)$/iu, '')
+  );
+}
+
+export function shortToolDescription(app: ResolvedApp): string {
+  return PRESENTATION[app.id]?.description ?? app.description;
+}
Author	SHA1	Message	Date
Albrecht Degering	2c13c56362	feat: add compact Toolbox tiles and details overlay	2026-07-23 13:02:29 +02:00
Albrecht Degering	803397ff52	fix: reverse Toolbox header orientation	2026-07-23 01:57:52 +02:00
Albrecht Degering	21283ce25f	fix: preserve hidden tool visibility	2026-07-23 01:23:32 +02:00
Albrecht Degering	e44d35fdfb	fix: stabilize Toolbox navigation layout	2026-07-23 01:21:16 +02:00