@cytario/web 2.2.5 → 2.2.7

package/README.md

@@ -230,6 +230,21 @@ cp .env.template .env    # Pre-configured for the Podman cluster
 npm run dev
 ```
 
+### Session Cache (Redis/Valkey)
+
+Sessions hold OAuth access/refresh/ID tokens and short-lived STS credentials. **TLS is required in production.** The app refuses to boot when `NODE_ENV !== "development"` unless one of the following is true:
+
+| Env var                          | Value    | Meaning                                                                                              |
+| -------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
+| `REDIS_TLS`                      | `"true"` | Wrap the ioredis connection in TLS (recommended).                                                    |
+| `REDIS_CA_CERT`                  | PEM      | Optional CA bundle for self-signed deployments. Multi-line PEM string.                               |
+| `REDIS_TLS_SERVER_NAME`          | hostname | Optional SNI / certificate hostname override.                                                        |
+| `REDIS_INSECURE_ALLOW_PLAINTEXT` | `"true"` | Explicit opt-out for trusted private networks. Logs a warning. Not for use on shared infrastructure. |
+
+The local Podman cluster runs Valkey without TLS, which is allowed because `NODE_ENV=development`. Managed Valkey deployments (helm chart, AWS ElastiCache, etc.) should set `REDIS_TLS=true`. Valkey reuses the standard `6379` port for TLS when `tls.enabled` is set — it does not move the listener to `6380` and refuses plaintext on the same port — so leave `REDIS_PORT` at `6379` unless your provider explicitly publishes a separate TLS endpoint.
+
+In the production cluster (see `cytario-infrastructure`, C-212) the Valkey leaf cert is signed by a cluster-internal CA managed by cert-manager. The CA's public cert is distributed to every namespace as a `cytario-internal-ca` ConfigMap by trust-manager, and the `cytario-web` helm chart's `redis.caCertConfigMap.{name,key}` wires it into the pod as `REDIS_CA_CERT` via `valueFrom.configMapKeyRef`. The app sees the PEM through the normal env var path — no code-side knowledge of the trust source is required.
+
 ### Database
 
 PostgreSQL with [Prisma ORM](https://www.prisma.io/). Connection configured via `DATABASE_URL` in `.env`.

package/app/.server/db/redis.ts

@@ -1,6 +1,6 @@
 import Redis from "ioredis";
 
-import { cytarioConfig } from "~/config";
+import { buildRedisOptions } from "./redisOptions";
 
 /**
  * Redis/Valkey client instance
@@ -14,55 +14,39 @@ import { cytarioConfig } from "~/config";
  * - REDIS_PORT: Server port (default: 6379)
  * - REDIS_USERNAME: Optional username for authenticated connections (Redis 6+ / Valkey)
  * - REDIS_PASSWORD: Optional password for authenticated connections
+ * - REDIS_TLS: Set to "true" to wrap the connection in TLS (required in production)
+ * - REDIS_CA_CERT: Optional PEM-encoded CA certificate (string) for self-signed deployments
+ * - REDIS_TLS_SERVER_NAME: Optional SNI / certificate hostname override
+ * - REDIS_INSECURE_ALLOW_PLAINTEXT: Set to "true" to opt out of the production TLS requirement
  *
  * @example
- * // Use with Redis without authentication
- * REDIS_HOST=redis.example.com
- * REDIS_PORT=6379
- *
- * @example
- * // Use with Valkey with authentication
+ * // Use with managed Valkey over TLS — Valkey reuses 6379 for TLS when tls.enabled is set
  * REDIS_HOST=valkey.example.com
  * REDIS_PORT=6379
  * REDIS_USERNAME=myuser
  * REDIS_PASSWORD=mypassword
+ * REDIS_TLS=true
  *
  * @example
- * // Use with Redis/Valkey with password-only authentication (legacy)
- * REDIS_HOST=redis.example.com
+ * // Local development without TLS (only allowed when NODE_ENV=development)
+ * REDIS_HOST=localhost
  * REDIS_PORT=6379
- * REDIS_PASSWORD=mypassword
  */
 
-const {
-  redis: { host, port, username, password },
-} = cytarioConfig;
+const options = buildRedisOptions(process.env);
 
-export const redis = new Redis({
-  host,
-  port,
-  // Only include username if provided (Redis 6+ ACL support)
-  ...(username && { username }),
-  // Only include password if provided (backwards compatible)
-  ...(password && { password }),
-  maxRetriesPerRequest: 3,
-  retryStrategy(times) {
-    const delay = Math.min(times * 50, 2000);
-    return delay;
-  },
-  lazyConnect: false,
-});
+export const redis = new Redis(options);
 
-// Log connection errors
 redis.on("error", (err) => {
   console.error("Redis/Valkey connection error:", err);
 });
 
 redis.on("connect", () => {
-  const authInfo = username
-    ? ` (authenticated as ${username})`
-    : password
+  const authInfo = options.username
+    ? ` (authenticated as ${options.username})`
+    : options.password
       ? " (authenticated)"
       : "";
-  console.log(`Connected to Redis/Valkey at ${host}:${port}${authInfo}`);
+  const tlsInfo = options.tls ? " over TLS" : "";
+  console.log(`Connected to Redis/Valkey at ${options.host}:${options.port}${authInfo}${tlsInfo}`);
 });

package/app/.server/db/redisOptions.ts

@@ -0,0 +1,72 @@
+import type { RedisOptions } from "ioredis";
+
+/**
+ * Build ioredis connection options from environment variables.
+ *
+ * Recognised env vars:
+ * - `REDIS_HOST` (default: `localhost`)
+ * - `REDIS_PORT` (default: `6379`)
+ * - `REDIS_USERNAME` — optional ACL username
+ * - `REDIS_PASSWORD` — optional password
+ * - `REDIS_TLS` — `"true"` to wrap the connection in TLS
+ * - `REDIS_CA_CERT` — PEM-encoded CA certificate (string) used to verify
+ *   the server when the cert chain is not in the system trust store
+ * - `REDIS_TLS_SERVER_NAME` — SNI / certificate hostname override
+ * - `REDIS_INSECURE_ALLOW_PLAINTEXT` — `"true"` to opt out of the
+ *   production TLS requirement (escape hatch for trusted in-cluster
+ *   networks; logs a warning)
+ *
+ * Fails fast outside development if TLS is off and the opt-out flag is
+ * not set — session blobs contain OAuth tokens and STS credentials and
+ * must not traverse plaintext links in production. See C-204.
+ */
+export function buildRedisOptions(env: Record<string, string | undefined>): RedisOptions {
+  const host = env.REDIS_HOST || "localhost";
+  const port = Number(env.REDIS_PORT) || 6379;
+  const username = env.REDIS_USERNAME;
+  const password = env.REDIS_PASSWORD;
+  const tlsEnabled = env.REDIS_TLS === "true";
+  const caCert = env.REDIS_CA_CERT;
+  const tlsServerName = env.REDIS_TLS_SERVER_NAME;
+  const allowPlaintext = env.REDIS_INSECURE_ALLOW_PLAINTEXT === "true";
+  const nodeEnv = env.NODE_ENV;
+
+  const isLocalEnv = nodeEnv === "development" || nodeEnv === "test";
+
+  if (!tlsEnabled && !isLocalEnv && !allowPlaintext) {
+    throw new Error(
+      "Refusing to start: Redis/Valkey TLS is disabled. Set REDIS_TLS=true " +
+        "(recommended) or REDIS_INSECURE_ALLOW_PLAINTEXT=true to opt out. " +
+        "See C-204 / OWASP A02:2021.",
+    );
+  }
+
+  if (!tlsEnabled && allowPlaintext && !isLocalEnv) {
+    console.warn(
+      "REDIS_INSECURE_ALLOW_PLAINTEXT=true — session tokens will traverse " +
+        "an unencrypted connection. Only safe on a trusted private network.",
+    );
+  }
+
+  const options: RedisOptions = {
+    host,
+    port,
+    ...(username && { username }),
+    ...(password && { password }),
+    maxRetriesPerRequest: 3,
+    retryStrategy(times) {
+      const delay = Math.min(times * 50, 2000);
+      return delay;
+    },
+    lazyConnect: false,
+  };
+
+  if (tlsEnabled) {
+    options.tls = {
+      ...(caCert && { ca: caCert }),
+      ...(tlsServerName && { servername: tlsServerName }),
+    };
+  }
+
+  return options;
+}

package/app/components/GlobalSearch/SearchBar.tsx

@@ -11,6 +11,7 @@ export function SearchBar({ value, onChange, onClear }: SearchBarProps) {
   return (
     <div className="flex">
       <Input
+        aria-label="Search"
         value={value}
         onChange={onChange}
         onFocus={() => onChange(value)}

package/app/routes/admin/bulkInvite/bulkInvite.form.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Field, Icon, IconButton, Input, Select } from "@cytario/design";
+import { Button, Checkbox, Icon, IconButton, Input, Select } from "@cytario/design";
 import { Plus, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSubmit } from "react-router";
@@ -150,9 +150,10 @@ export function BulkInviteForm({
             renderItem={(item) => <ScopePill scope={item.id} />}
           />
         ) : (
-          <Field label="Group Membership">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-(--color-text-primary)">Group Membership</p>
             <p className="text-sm text-slate-400">No groups available in this scope.</p>
-          </Field>
+          </div>
         )}
         <div className="flex items-center gap-2">
           <Checkbox isSelected={enabled} onChange={setEnabled}>
@@ -164,16 +165,30 @@ export function BulkInviteForm({
         </div>
       </div>
 
-      {formError && <p className="text-sm text-rose-600 mb-4">{formError}</p>}
+      {formError && (
+        <p role="alert" className="text-sm text-rose-600 mb-4">
+          {formError}
+        </p>
+      )}
 
       <table ref={tableRef} className="w-full border-collapse">
         <thead>
           <tr className="text-left text-sm text-slate-500">
-            <th className="w-10 pr-2 py-2 font-medium">#</th>
-            <th className="px-1 py-2 font-medium">Email</th>
-            <th className="px-1 py-2 font-medium">First Name</th>
-            <th className="px-1 py-2 font-medium">Last Name</th>
-            <th className="w-8" />
+            <th scope="col" className="w-10 pr-2 py-2 font-medium">
+              #
+            </th>
+            <th scope="col" className="px-1 py-2 font-medium">
+              Email
+            </th>
+            <th scope="col" className="px-1 py-2 font-medium">
+              First Name
+            </th>
+            <th scope="col" className="px-1 py-2 font-medium">
+              Last Name
+            </th>
+            <th scope="col" className="w-8">
+              <span className="sr-only">Remove</span>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -185,6 +200,7 @@ export function BulkInviteForm({
                 </td>
                 <td className="px-1 py-1">
                   <Input
+                    aria-label={`Email, row ${i + 1}`}
                     value={row.email}
                     onChange={(value) => updateRow(i, "email", value)}
                     placeholder="email@example.com"
@@ -194,6 +210,7 @@ export function BulkInviteForm({
                 </td>
                 <td className="px-1 py-1">
                   <Input
+                    aria-label={`First name, row ${i + 1}`}
                     value={row.firstName}
                     onChange={(value) => updateRow(i, "firstName", value)}
                     placeholder="First"
@@ -203,6 +220,7 @@ export function BulkInviteForm({
                 </td>
                 <td className="px-1 py-1">
                   <Input
+                    aria-label={`Last name, row ${i + 1}`}
                     value={row.lastName}
                     onChange={(value) => updateRow(i, "lastName", value)}
                     placeholder="Last"

package/app/routes/admin/createGroup/createGroup.form.tsx

@@ -1,4 +1,4 @@
-import { Field, Fieldset, Input } from "@cytario/design";
+import { Fieldset, Input } from "@cytario/design";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useSubmit } from "react-router";
@@ -13,11 +13,7 @@ interface CreateGroupFormProps {
 export function CreateGroupForm({ scope }: CreateGroupFormProps) {
   const submit = useSubmit();
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<CreateGroupFormData>({
+  const { control, handleSubmit } = useForm<CreateGroupFormData>({
     resolver: zodResolver(createGroupSchema),
     defaultValues: { name: "" },
     mode: "onBlur",
@@ -34,20 +30,20 @@ export function CreateGroupForm({ scope }: CreateGroupFormProps) {
   return (
     <form id="create-group-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Fieldset>
-        <Field label="Group name" error={errors.name}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field }) => (
-              <Input
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
+        <Controller
+          control={control}
+          name="name"
+          render={({ field, fieldState }) => (
+            <Input
+              label="Group name"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
       </Fieldset>
 
       {nameValue.trim() && (

package/app/routes/admin/inviteUser/inviteUser.form.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Field, Fieldset, Input, Select } from "@cytario/design";
+import { Checkbox, Fieldset, Input, Select } from "@cytario/design";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -22,12 +22,7 @@ export function InviteUserForm({
 }: InviteUserFormProps) {
   const submit = useSubmit();
 
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<InviteUserFormData>({
+  const { control, handleSubmit, reset } = useForm<InviteUserFormData>({
     resolver: zodResolver(inviteUserSchema),
     defaultValues: {
       email: "",
@@ -65,67 +60,69 @@ export function InviteUserForm({
   return (
     <form id="invite-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Fieldset>
-        <Field label="Email" error={errors.email}>
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <Input
-                type="email"
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
-        <Field label="First name" error={errors.firstName}>
-          <Controller
-            control={control}
-            name="firstName"
-            render={({ field }) => (
-              <Input
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
-        <Field label="Last name" error={errors.lastName}>
-          <Controller
-            control={control}
-            name="lastName"
-            render={({ field }) => (
-              <Input
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
+        <Controller
+          control={control}
+          name="email"
+          render={({ field, fieldState }) => (
+            <Input
+              label="Email"
+              type="email"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="firstName"
+          render={({ field, fieldState }) => (
+            <Input
+              label="First name"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="lastName"
+          render={({ field, fieldState }) => (
+            <Input
+              label="Last name"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
         {groupOptions.length > 0 ? (
           <Controller
             control={control}
             name="groupPath"
-            render={({ field }) => (
+            render={({ field, fieldState }) => (
               <Select
                 label="Group Membership"
                 items={groupOptions.map((p) => ({ id: p, name: p }))}
                 selectedKey={field.value}
                 onSelectionChange={(key) => field.onChange(key as string)}
                 renderItem={(item) => <ScopePill scope={item.id} />}
+                errorMessage={fieldState.error?.message}
               />
             )}
           />
         ) : (
-          <Field label="Group Membership">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-(--color-text-primary)">Group Membership</p>
             <p className="text-sm text-slate-400">No groups available in this scope.</p>
-          </Field>
+          </div>
         )}
         <div className="flex items-center gap-2">
           <Controller

package/app/routes/admin/updateUser/updateUser.form.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Field, Fieldset, H3, Input } from "@cytario/design";
+import { Checkbox, Fieldset, H3, Input } from "@cytario/design";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -30,11 +30,7 @@ export const UpdateUserForm = ({ user, groups, groupPaths }: UpdateUserFormProps
     return ids;
   });
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<UpdateUserFormData>({
+  const { control, handleSubmit } = useForm<UpdateUserFormData>({
     resolver: zodResolver(updateUserSchema),
     defaultValues: {
       email: user.email,
@@ -136,49 +132,49 @@ export const UpdateUserForm = ({ user, groups, groupPaths }: UpdateUserFormProps
     <>
       <form id="update-form" onSubmit={handleSubmit(onSubmit)} className="">
         <Fieldset>
-          <Field label="Email" error={errors.email}>
-            <Controller
-              control={control}
-              name="email"
-              render={({ field }) => (
-                <Input
-                  type="email"
-                  size="lg"
-                  value={field.value}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-          </Field>
-          <Field label="First name" error={errors.firstName}>
-            <Controller
-              control={control}
-              name="firstName"
-              render={({ field }) => (
-                <Input
-                  size="lg"
-                  value={field.value}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-          </Field>
-          <Field label="Last name" error={errors.lastName}>
-            <Controller
-              control={control}
-              name="lastName"
-              render={({ field }) => (
-                <Input
-                  size="lg"
-                  value={field.value}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-          </Field>
+          <Controller
+            control={control}
+            name="email"
+            render={({ field, fieldState }) => (
+              <Input
+                label="Email"
+                type="email"
+                size="lg"
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                errorMessage={fieldState.error?.message}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="firstName"
+            render={({ field, fieldState }) => (
+              <Input
+                label="First name"
+                size="lg"
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                errorMessage={fieldState.error?.message}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="lastName"
+            render={({ field, fieldState }) => (
+              <Input
+                label="Last name"
+                size="lg"
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                errorMessage={fieldState.error?.message}
+              />
+            )}
+          />
           <div className="flex items-center gap-2">
             <Controller
               control={control}

package/app/routes/connections/connection.form.tsx

@@ -1,6 +1,5 @@
 import {
   Banner,
-  Field,
   Fieldset,
   FormWizard,
   FormWizardNav,
@@ -97,14 +96,7 @@ export const ConnectionForm = ({
 
   const [currentStep, setCurrentStep] = useState(initialStep);
 
-  const {
-    control,
-    handleSubmit,
-    setError,
-    setValue,
-    trigger,
-    formState: { errors },
-  } = useForm<ConnectBucketFormData>({
+  const { control, handleSubmit, setError, setValue, trigger } = useForm<ConnectBucketFormData>({
     resolver: zodResolver(connectionSchema),
     defaultValues: initialData
       ? {
@@ -212,165 +204,147 @@ export const ConnectionForm = ({
         >
           {currentStep === 0 && (
             <Fieldset>
-              <Field label="Provider" error={errors.providerType}>
+              <Controller
+                name="providerType"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Select
+                    label="Provider"
+                    items={providerItems}
+                    renderItem={(item) => <ProviderPill provider={item.id} />}
+                    selectedKey={field.value}
+                    onSelectionChange={(key) => field.onChange(key)}
+                    errorMessage={fieldState.error?.message}
+                  />
+                )}
+              />
+
+              <Controller
+                name="s3Uri"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Input
+                    label="S3 URI"
+                    description="Bucket name and optional path prefix."
+                    value={field.value}
+                    onChange={(val) => {
+                      const trimmed = val.replace(/^s3:\/\//, "");
+                      field.onChange(trimmed);
+                    }}
+                    onBlur={field.onBlur}
+                    name={field.name}
+                    placeholder="my-bucket/path/prefix"
+                    prefix="s3://"
+                    size="lg"
+                    errorMessage={fieldState.error?.message}
+                  />
+                )}
+              />
+
+              <Controller
+                name="name"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Input
+                    label="Name"
+                    description="A friendly name, auto-suggested from the S3 URI."
+                    value={field.value}
+                    onChange={(val) => {
+                      if (!isAutoUpdatingName.current) {
+                        userEditedName.current = true;
+                      }
+                      field.onChange(val);
+                    }}
+                    onBlur={field.onBlur}
+                    name={field.name}
+                    placeholder="my-connection"
+                    size="lg"
+                    errorMessage={fieldState.error?.message}
+                  />
+                )}
+              />
+            </Fieldset>
+          )}
+
+          {currentStep === 1 && (
+            <Fieldset>
+              {adminScopes.length > 0 && (
                 <Controller
-                  name="providerType"
+                  name="ownerScope"
                   control={control}
-                  render={({ field }) => (
+                  render={({ field, fieldState }) => (
                     <Select
-                      items={providerItems}
-                      renderItem={(item) => <ProviderPill provider={item.id} />}
+                      label="Visibility"
+                      description="Who can access this connection."
+                      items={[
+                        { id: userId, name: "Personal" },
+                        ...adminScopes.map((str) => ({
+                          id: str,
+                          name: str,
+                        })),
+                      ]}
                       selectedKey={field.value}
                       onSelectionChange={(key) => field.onChange(key)}
+                      renderItem={(item) => <ScopePill scope={item.id} />}
+                      errorMessage={fieldState.error?.message}
                     />
                   )}
                 />
-              </Field>
-
-              <Field
-                label="S3 URI"
-                description="Bucket name and optional path prefix."
-                error={errors.s3Uri}
-              >
-                <Controller
-                  name="s3Uri"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      value={field.value}
-                      onChange={(val) => {
-                        const trimmed = val.replace(/^s3:\/\//, "");
-                        field.onChange(trimmed);
-                      }}
-                      onBlur={field.onBlur}
-                      name={field.name}
-                      placeholder="my-bucket/path/prefix"
-                      prefix="s3://"
-                      size="lg"
-                    />
-                  )}
-                />
-              </Field>
-
-              <Field
-                label="Name"
-                description="A friendly name, auto-suggested from the S3 URI."
-                error={errors.name}
-              >
-                <Controller
-                  name="name"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      value={field.value}
-                      onChange={(val) => {
-                        if (!isAutoUpdatingName.current) {
-                          userEditedName.current = true;
-                        }
-                        field.onChange(val);
-                      }}
-                      onBlur={field.onBlur}
-                      name={field.name}
-                      placeholder="my-connection"
-                      size="lg"
-                    />
-                  )}
-                />
-              </Field>
-            </Fieldset>
-          )}
-
-          {currentStep === 1 && (
-            <Fieldset>
-              {adminScopes.length > 0 && (
-                <Field
-                  label="Visibility"
-                  description="Who can access this connection."
-                  error={errors.ownerScope}
-                >
-                  <Controller
-                    name="ownerScope"
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        items={[
-                          { id: userId, name: "Personal" },
-                          ...adminScopes.map((str) => ({
-                            id: str,
-                            name: str,
-                          })),
-                        ]}
-                        selectedKey={field.value}
-                        onSelectionChange={(key) => field.onChange(key)}
-                        renderItem={(item) => <ScopePill scope={item.id} />}
-                      />
-                    )}
-                  />
-                </Field>
               )}
 
               {isAWS ? (
                 <>
-                  <Field
-                    label="Role ARN"
-                    description="IAM role Cytario assumes to access your S3 data."
-                    error={errors.roleArn}
-                  >
-                    <Controller
-                      name="roleArn"
-                      control={control}
-                      render={({ field }) => (
-                        <Input
-                          value={field.value}
-                          onChange={field.onChange}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          placeholder="arn:aws:iam::123456789012:role/MyRole"
-                          size="lg"
-                        />
-                      )}
-                    />
-                  </Field>
-
-                  <Field
-                    label="Region"
-                    description="AWS region where this bucket is located."
-                    error={errors.bucketRegion}
-                  >
-                    <Controller
-                      name="bucketRegion"
-                      control={control}
-                      render={({ field }) => (
-                        <Select
-                          items={regionItems}
-                          selectedKey={field.value}
-                          onSelectionChange={(key) => field.onChange(key)}
-                        />
-                      )}
-                    />
-                  </Field>
-                </>
-              ) : (
-                <Field
-                  label="Endpoint"
-                  description="Endpoint URL of your S3-compatible storage."
-                  error={errors.bucketEndpoint}
-                >
                   <Controller
-                    name="bucketEndpoint"
+                    name="roleArn"
                     control={control}
-                    render={({ field }) => (
+                    render={({ field, fieldState }) => (
                       <Input
+                        label="Role ARN"
+                        description="IAM role Cytario assumes to access your S3 data."
                         value={field.value}
                         onChange={field.onChange}
                         onBlur={field.onBlur}
                         name={field.name}
-                        placeholder="https://s3.cytario.com"
+                        placeholder="arn:aws:iam::123456789012:role/MyRole"
                         size="lg"
+                        errorMessage={fieldState.error?.message}
+                      />
+                    )}
+                  />
+
+                  <Controller
+                    name="bucketRegion"
+                    control={control}
+                    render={({ field, fieldState }) => (
+                      <Select
+                        label="Region"
+                        description="AWS region where this bucket is located."
+                        items={regionItems}
+                        selectedKey={field.value}
+                        onSelectionChange={(key) => field.onChange(key)}
+                        errorMessage={fieldState.error?.message}
                       />
                     )}
                   />
-                </Field>
+                </>
+              ) : (
+                <Controller
+                  name="bucketEndpoint"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <Input
+                      label="Endpoint"
+                      description="Endpoint URL of your S3-compatible storage."
+                      value={field.value}
+                      onChange={field.onChange}
+                      onBlur={field.onBlur}
+                      name={field.name}
+                      placeholder="https://s3.cytario.com"
+                      size="lg"
+                      errorMessage={fieldState.error?.message}
+                    />
+                  )}
+                />
               )}
             </Fieldset>
           )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cytario/web",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "description": "Cytario Web — scientific imaging data browser and viewer for OME-TIFF, OME-Zarr, Parquet and GeoTIFF on S3-compatible storage.",
   "license": "AGPL-3.0",
   "sideEffects": false,
@@ -55,8 +55,8 @@
     "codegen:check": "tsx scripts/codegen-check.ts",
     "dev": "node bin/cytario-web.mjs dev",
     "predev": "node scripts/prebuild.mjs && if [ -L node_modules/@cytario/design ]; then npm unlink @cytario/design --no-save 2>/dev/null && npm install @cytario/design --quiet; fi",
-    "predev:design": "cd ../cytario-design && npm link --quiet && cd - > /dev/null && npm link @cytario/design --quiet && for p in react react-dom react-aria-components; do rm -rf ../cytario-design/node_modules/$p && ln -s \"$(pwd)/node_modules/$p\" ../cytario-design/node_modules/$p; done",
-    "dev:design": "concurrently -n tsup,storybook,web -c blue,magenta,green \"cd ../cytario-design && npx tsup --watch\" \"cd ../cytario-design && npm run dev\" \"node bin/cytario-web.mjs dev\"",
+    "predev:design": "cd ../cytario-design && npm link --quiet && cd - > /dev/null && npm link @cytario/design --quiet && for p in react react-dom react-aria-components lucide-react; do rm -rf ../cytario-design/node_modules/$p && ln -s \"$(pwd)/node_modules/$p\" ../cytario-design/node_modules/$p; done && cd ../cytario-design && npm run build:css",
+    "dev:design": "concurrently -n tsup,css,storybook,web -c blue,yellow,magenta,green \"cd ../cytario-design && npx tsup --watch\" \"cd ../cytario-design && npx @tailwindcss/cli -i src/styles/tailwind.css -o dist/index.css --watch\" \"cd ../cytario-design && npm run dev\" \"node bin/cytario-web.mjs dev\"",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "prestart": "npm run build:server",
     "start": "node bin/cytario-web.mjs start",
@@ -72,7 +72,7 @@
     "@aws-sdk/client-sts": "^3.687.0",
     "@aws-sdk/s3-request-presigner": "^3.693.0",
     "@cornerstonejs/codec-openjpeg": "^1.3.0",
-    "@cytario/design": "^3.4.0",
+    "@cytario/design": "^4.0.0",
     "@deck.gl/core": "~9.1.15",
     "@deck.gl/extensions": "~9.1.15",
     "@deck.gl/geo-layers": "~9.1.15",