Add actor detail pages

packages/web/relay.config.json

@@ -2,5 +2,10 @@
   "src": "./src",
   "schema": "./schema.graphql",
   "language": "typescript",
+  "customScalarTypes": {
+    "DateTime": "string",
+    "URL": "string",
+    "UUID": "string"
+  },
   "eagerEsModules": true
 }

packages/web/src/components/ActorCard.tsx

@@ -0,0 +1,49 @@
+// DrFed: A web-based platform for developing and debugging ActivityPub apps
+// Copyright (C) 2026 DrFed team
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { A } from "@solidjs/router";
+import { graphql } from "relay-runtime";
+import { Show } from "solid-js";
+import { createFragment } from "solid-relay";
+
+import type { ActorCard_actor$key } from "./__generated__/ActorCard_actor.graphql.ts";
+
+import styles from "~/styles/instance.module.css";
+
+export const ActorCard = (props: { $actor: ActorCard_actor$key }) => {
+  const actorData = createFragment(
+    graphql`
+      fragment ActorCard_actor on Actor {
+        handle
+        id
+      }
+    `,
+    () => props.$actor,
+  );
+
+  return (
+    <Show when={actorData()}>
+      {(actor) => (
+        <article class={styles.actorCard}>
+          <span class={styles.actorMarker} aria-hidden="true" />
+          <A href={`/actor/${encodeURIComponent(actor().id)}`}>
+            {actor().handle}
+          </A>
+        </article>
+      )}
+    </Show>
+  );
+};

packages/web/src/components/ActorDetail.tsx

@@ -14,32 +14,144 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+import { Title } from "@solidjs/meta";
 import { graphql } from "relay-runtime";
-import { Show } from "solid-js";
+import { For, Show } from "solid-js";
 import { createFragment } from "solid-relay";
 
 import type { ActorDetail_actor$key } from "./__generated__/ActorDetail_actor.graphql.ts";
+import { CopyButton } from "./CopyButton.tsx";
 
-import styles from "~/styles/instance.module.css";
+import styles from "~/styles/actor.module.css";
 
-export const ActorDetail = (props: { $actor: ActorDetail_actor$key }) => {
-  const actorData = createFragment(
+/**
+ * Read-only identity and federation information for an actor.
+ * @returns The actor identity and endpoint sections.
+ */
+export function ActorDetail(props: { $actor: ActorDetail_actor$key }) {
+  const data = createFragment(
     graphql`
-      fragment ActorDetail_actor on Actor {
+      fragment ActorDetail_actor on Actor @throwOnFieldError {
         handle
+        username
+        uuid
+        type
+        created
+        iri
+        avatarUrl
+        inboxUrl
+        outbox {
+          iri
+        }
+        followers {
+          iri
+        }
+        following {
+          iri
+        }
+        featured {
+          iri
+        }
+        profileUrl
+        instance {
+          host
+        }
       }
     `,
     () => props.$actor,
   );
-
   return (
-    <Show when={actorData()}>
-      {(actor) => (
-        <article class={styles.actorCard}>
-          <span class={styles.actorMarker} aria-hidden="true" />
-          <p>{actor().handle}</p>
-        </article>
-      )}
+    <Show when={data()}>
+      {(actor) => {
+        const endpoints = () => [
+          { label: "Actor IRI", url: actor().iri },
+          { label: "Inbox", url: actor().inboxUrl },
+          { label: "Outbox", url: actor().outbox?.iri },
+          { label: "Followers", url: actor().followers?.iri },
+          { label: "Following", url: actor().following?.iri },
+          { label: "Featured", url: actor().featured?.iri },
+          { label: "Profile", url: actor().profileUrl },
+        ];
+        return (
+          <>
+            <Title>{actor().handle} — DrFed</Title>
+            <header class={styles.header}>
+              <Show when={actor().avatarUrl}>
+                {(url) => (
+                  <img
+                    class={styles.avatar}
+                    src={url()}
+                    alt=""
+                    width="64"
+                    height="64"
+                    referrerpolicy="no-referrer"
+                  />
+                )}
+              </Show>
+              <div>
+                <p class={styles.label}>{actor().type}</p>
+                <h1>{actor().handle}</h1>
+                <CopyButton value={actor().handle} label="actor handle" />
+              </div>
+            </header>
+            <section class={styles.panel} aria-labelledby="identity-title">
+              <h2 id="identity-title">Identity</h2>
+              <dl class={styles.fields}>
+                <div>
+                  <dt>Username</dt>
+                  <dd>{actor().username}</dd>
+                </div>
+                <div>
+                  <dt>Instance</dt>
+                  <dd>{actor().instance.host}</dd>
+                </div>
+                <div>
+                  <dt>UUID</dt>
+                  <dd>{actor().uuid}</dd>
+                </div>
+                <div>
+                  <dt>Created</dt>
+                  <dd>
+                    <time dateTime={actor().created}>{actor().created}</time>
+                  </dd>
+                </div>
+              </dl>
+            </section>
+            <section class={styles.panel} aria-labelledby="endpoints-title">
+              <h2 id="endpoints-title">Federation endpoints</h2>
+              <dl class={styles.fields}>
+                <For each={endpoints()}>
+                  {(endpoint) => (
+                    <Show when={endpoint.url}>
+                      {(url) => (
+                        <div>
+                          <dt>{endpoint.label}</dt>
+                          <dd class={styles.endpoint}>
+                            <a href={httpUrl(url())}>{url()}</a>
+                            <CopyButton value={url()} label={endpoint.label} />
+                          </dd>
+                        </div>
+                      )}
+                    </Show>
+                  )}
+                </For>
+              </dl>
+            </section>
+          </>
+        );
+      }}
     </Show>
   );
-};
+}
+
+// Stored remote URLs are data, not trusted navigation targets.
+function httpUrl(value: string): string | undefined {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:"
+      ? url.href
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}

packages/web/src/components/CopyButton.tsx

@@ -0,0 +1,49 @@
+// DrFed: A web-based platform for developing and debugging ActivityPub apps
+// Copyright (C) 2026 DrFed team
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { createSignal } from "solid-js";
+
+import styles from "~/styles/buttons.module.css";
+
+/**
+ * Copy a value to the clipboard and announce the result.
+ * @returns A copy button with accessible feedback.
+ */
+export function CopyButton(props: { value: string; label: string }) {
+  const [message, setMessage] = createSignal("");
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(props.value);
+      setMessage("Copied.");
+    } catch {
+      setMessage("Could not copy. Select and copy the text manually.");
+    }
+  }
+  return (
+    <span class={styles.copyControl}>
+      <button
+        type="button"
+        onClick={() => {
+          void copy();
+        }}
+        aria-label={`Copy ${props.label}`}
+      >
+        Copy
+      </button>
+      <output>{message()}</output>
+    </span>
+  );
+}

packages/web/src/routes/actor/[id].tsx

@@ -0,0 +1,105 @@
+// DrFed: A web-based platform for developing and debugging ActivityPub apps
+// Copyright (C) 2026 DrFed team
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { Title } from "@solidjs/meta";
+import {
+  A,
+  type RouteDefinition,
+  type RouteSectionProps,
+  query,
+} from "@solidjs/router";
+import { graphql } from "relay-runtime";
+import { ErrorBoundary, Show, Suspense } from "solid-js";
+import {
+  createPreloadedQuery,
+  loadQuery,
+  useRelayEnvironment,
+} from "solid-relay";
+
+import { ActorDetail } from "~/components/ActorDetail.tsx";
+
+import type { ActorDetailQuery } from "./__generated__/ActorDetailQuery.graphql.ts";
+
+import styles from "~/styles/actor.module.css";
+
+const actorDetailQuery = graphql`
+  query ActorDetailQuery($id: ID!) @throwOnFieldError {
+    node(id: $id) {
+      ... on Actor @alias(as: "actor") {
+        ...ActorDetail_actor
+      }
+    }
+  }
+`;
+
+const loadActorDetailQuery = query(
+  (id: string) =>
+    loadQuery<ActorDetailQuery>(useRelayEnvironment()(), actorDetailQuery, {
+      id,
+    }),
+  "ActorDetailQuery",
+);
+
+export const route = {
+  preload({ params }) {
+    if (params.id === undefined) {
+      throw new Error("Missing actor ID route parameter.");
+    }
+    return loadActorDetailQuery(params.id);
+  },
+} satisfies RouteDefinition;
+
+type RouteData = ReturnType<typeof loadActorDetailQuery>;
+
+export default function ActorDetailPage(props: RouteSectionProps<RouteData>) {
+  return (
+    <main class={styles.page}>
+      <Title>Actor — DrFed</Title>
+      <A class={styles.backLink} href="/workspace">
+        ← All instances
+      </A>
+      <ErrorBoundary
+        fallback={
+          <p role="alert">
+            Unable to load this actor. Please reload the page to try again.
+          </p>
+        }
+      >
+        <Suspense fallback={<output>Loading actor…</output>}>
+          <ActorDetailContent data={props.data} />
+        </Suspense>
+      </ErrorBoundary>
+    </main>
+  );
+}
+
+function ActorDetailContent(props: { data: RouteData }) {
+  const data = createPreloadedQuery<ActorDetailQuery>(
+    actorDetailQuery,
+    () => props.data,
+  );
+  const actor = () => {
+    const node = data()?.node;
+    return node?.actor;
+  };
+  return (
+    <Show when={data()}>
+      <Show when={actor()} fallback={<p>Actor not found.</p>}>
+        {(value) => <ActorDetail $actor={value()} />}
+      </Show>
+    </Show>
+  );
+}