Add Workspace Dashboard Design

packages/web/src/components/InstanceSummary.tsx

@@ -16,10 +16,13 @@
 
 import { Link } from "@kobalte/core/link";
 import { graphql } from "relay-runtime";
+import { Show } from "solid-js";
 import { createFragment } from "solid-relay";
 
 import type { InstanceSummary_instance$key } from "./__generated__/InstanceSummary_instance.graphql.tsx";
 
+import styles from "~/styles/workspace.module.css";
+
 export default function InstanceSummary(props: {
   $instance: InstanceSummary_instance$key;
 }) {
@@ -34,9 +37,23 @@ export default function InstanceSummary(props: {
   );
 
   return (
-    <p>
-      {data()?.host}
-      <Link href={`/workspace/create/${data()?.id}/actors`}>Create Actors</Link>
-    </p>
+    <Show when={data()}>
+      {(instance) => (
+        <article class={styles.instanceCard}>
+          <div class={styles.instanceMarker} aria-hidden="true" />
+          <div class={styles.cardHeading}>
+            <p class={styles.cardLabel}>Instance host</p>
+            <h2>{instance().host}</h2>
+          </div>
+          <Link
+            class={styles.cardAction}
+            href={`/workspace/create/${instance().id}/actors`}
+          >
+            Create actors
+            <span aria-hidden="true">→</span>
+          </Link>
+        </article>
+      )}
+    </Show>
   );
 }

packages/web/src/routes/instance/[slug].tsx

@@ -0,0 +1,101 @@
+// 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, useParams } from "@solidjs/router";
+import { For } from "solid-js";
+
+import styles from "~/styles/instance.module.css";
+
+const actors = ["@sherry", "@newsroom", "@garden"] as const;
+
+export default function InstanceDetailPage() {
+  const params = useParams();
+  const host = () => params.slug ?? "social.example";
+
+  return (
+    <main class={styles.page}>
+      <Title>{host()} — DrFed</Title>
+
+      <A class={styles.backLink} href="/workspace">
+        <span aria-hidden="true">←</span> All instances
+      </A>
+
+      <header class={styles.header}>
+        <h1>{host()}</h1>
+        <A
+          class={styles.createButton}
+          href="/workspace/create/instance-demo/actors"
+        >
+          <span aria-hidden="true">＋</span>
+          Create actor
+        </A>
+      </header>
+
+      <section class={styles.details} aria-labelledby="connection-title">
+        <div>
+          <p class={styles.sectionLabel}>Connection record</p>
+          <h2 id="connection-title">Federation endpoints</h2>
+        </div>
+        <dl class={styles.endpointList}>
+          <div>
+            <dt>NodeInfo</dt>
+            <dd>
+              <a href={`https://${host()}/nodeinfo/2.1`}>/nodeinfo/2.1</a>
+            </dd>
+          </div>
+          <div>
+            <dt>WebFinger</dt>
+            <dd>
+              <a href={`https://${host()}/.well-known/webfinger`}>
+                /.well-known/webfinger
+              </a>
+            </dd>
+          </div>
+          <div>
+            <dt>Shared inbox</dt>
+            <dd>
+              <a href={`https://${host()}/inbox`}>/inbox</a>
+            </dd>
+          </div>
+        </dl>
+      </section>
+
+      <section class={styles.actors} aria-labelledby="actors-title">
+        <header class={styles.sectionHeader}>
+          <div>
+            <p class={styles.sectionLabel}>Local identities</p>
+            <h2 id="actors-title">Actors</h2>
+          </div>
+          <p>{actors.length} registered</p>
+        </header>
+
+        <div class={styles.actorList}>
+          <For each={actors}>
+            {(handle) => (
+              <article class={styles.actorCard}>
+                <span class={styles.actorMarker} aria-hidden="true" />
+                <p>
+                  {handle}@{host()}
+                </p>
+              </article>
+            )}
+          </For>
+        </div>
+      </section>
+    </main>
+  );
+}

packages/web/src/routes/workspace/index.tsx

@@ -14,6 +14,8 @@
 // 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 { Link } from "@kobalte/core/link";
+import { Title } from "@solidjs/meta";
 import { graphql } from "relay-runtime";
 import { For, Show } from "solid-js";
 import { createLazyLoadQuery } from "solid-relay";
@@ -22,6 +24,8 @@ import InstanceSummary from "~/components/InstanceSummary.tsx";
 
 import type { WorkspaceQuery } from "./__generated__/WorkspaceQuery.graphql.tsx";
 
+import styles from "~/styles/workspace.module.css";
+
 const workspaceQuery = graphql`
   query WorkspaceQuery {
     viewer {
@@ -44,16 +48,63 @@ export default function WorkspacePage() {
   );
 
   return (
-    <main>
-      <section>
-        <Show when={query()?.viewer} fallback={<p>You're not signed in.</p>}>
-          {(viewer) => (
-            <For each={viewer().instances.edges}>
-              {(edge) => <InstanceSummary $instance={edge.node} />}
-            </For>
-          )}
+    <main class={styles.page}>
+      <Title>Workspace — DrFed</Title>
+
+      <header class={styles.header}>
+        <h1>Your instances</h1>
+        <Show when={query()?.viewer}>
+          <Link class={styles.createButton} href="/workspace/create/instance">
+            <span aria-hidden="true">+</span>
+            New instance
+          </Link>
         </Show>
-      </section>
+      </header>
+
+      <Show
+        when={query()?.viewer}
+        fallback={
+          <section class={styles.emptyState} aria-labelledby="signed-out-title">
+            <p class={styles.emptyLabel}>Workspace unavailable</p>
+            <h2 id="signed-out-title">Sign in to manage your instances</h2>
+            <p>Your workspace is linked to your DrFed account.</p>
+            <Link class={styles.secondaryButton} href="/sign-in">
+              Sign in
+            </Link>
+          </section>
+        }
+      >
+        {(viewer) => (
+          <Show
+            when={viewer().instances.edges.length > 0}
+            fallback={
+              <section
+                class={styles.emptyState}
+                aria-labelledby="empty-workspace-title"
+              >
+                <p class={styles.emptyLabel}>No instances yet</p>
+                <h2 id="empty-workspace-title">Build your first test server</h2>
+                <p>
+                  Start with an instance, then add actors to explore federation
+                  flows.
+                </p>
+                <Link
+                  class={styles.secondaryButton}
+                  href="/workspace/create/instance"
+                >
+                  Create an instance
+                </Link>
+              </section>
+            }
+          >
+            <section class={styles.instanceList} aria-label="Instances">
+              <For each={viewer().instances.edges}>
+                {(edge) => <InstanceSummary $instance={edge.node} />}
+              </For>
+            </section>
+          </Show>
+        )}
+      </Show>
     </main>
   );
 }