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,148 @@
 // 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 { Index, 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}>
+                <Index each={endpoints()}>
+                  {(endpoint) => (
+                    <Show when={endpoint().url}>
+                      {(url) => (
+                        <div>
+                          <dt>{endpoint().label}</dt>
+                          <dd class={styles.endpoint}>
+                            <button
+                              type="button"
+                              class={styles.endpointText}
+                              aria-label={`Select ${endpoint().label} URL`}
+                              onClick={(event) => {
+                                const selection = globalThis.getSelection();
+                                const range = document.createRange();
+                                range.selectNodeContents(event.currentTarget);
+                                selection?.removeAllRanges();
+                                selection?.addRange(range);
+                              }}
+                            >
+                              {url()}
+                            </button>
+                            <CopyButton
+                              value={url()}
+                              label={endpoint().label}
+                            />
+                          </dd>
+                        </div>
+                      )}
+                    </Show>
+                  )}
+                </Index>
+              </dl>
+            </section>
+          </>
+        );
+      }}
     </Show>
   );
-};
+}

packages/web/src/components/CopyButton.tsx

@@ -0,0 +1,89 @@
+// 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 { Show, createSignal, onCleanup } 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("");
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  let request = 0;
+  const feedbackDuration = 2000;
+  onCleanup(() => {
+    request += 1;
+    clearTimeout(resetTimer);
+  });
+  async function copy() {
+    request += 1;
+    const currentRequest = request;
+    clearTimeout(resetTimer);
+    setMessage("");
+    try {
+      await navigator.clipboard.writeText(props.value);
+      if (currentRequest !== request) return;
+      setMessage("Copied.");
+      resetTimer = setTimeout(() => setMessage(""), feedbackDuration);
+    } catch {
+      if (currentRequest !== request) return;
+      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}`}
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <Show
+            when={message() === "Copied."}
+            fallback={
+              <>
+                <rect x="8" y="8" width="12" height="12" rx="2" />
+                <path d="M16 8V4H4v12h4" />
+              </>
+            }
+          >
+            <path d="m5 12 4 4L19 6" />
+          </Show>
+        </svg>
+      </button>
+      <output
+        class={
+          !message() || message() === "Copied." ? styles.srOnly : undefined
+        }
+      >
+        {message()}
+      </output>
+    </span>
+  );
+}