@shortlink-org/portolan 0.3.0 → 0.4.0

package/src/catalog-validation.ts

@@ -20,6 +20,7 @@ import {
   TABLE_ROLES,
   aggregateBlocks,
   allAggregates,
+  allDeployments,
   allExternals,
   allModules,
   allRepos,
@@ -165,6 +166,20 @@ export function validateCatalog(catalog: Catalog): Catalog {
     ),
   );
   const storeIds = new Set(allStores(catalog).map((store) => store.id));
+  // `<service>|<aggregate id>/<operation id>`: what a `call` step into a
+  // service may name - the use case it runs, when the flow crosses a
+  // boundary the transport does not draw (an in-process command bus).
+  const operationRefs = new Set(
+    catalog.contexts.flatMap((context) =>
+      context.services.flatMap((service) =>
+        service.aggregates.flatMap((aggregate) =>
+          aggregate.operations.map(
+            (operation) => `${service.id}|${aggregate.id}/${operation.id}`,
+          ),
+        ),
+      ),
+    ),
+  );
 
   assertUniqueSlugs(
     catalog.contexts.map((c) => c.id),
@@ -253,6 +268,27 @@ export function validateCatalog(catalog: Catalog): Catalog {
         }
         technologies.add(technology);
       }
+      // Hosts and dials are names, and a name is checked the way a handle
+      // is: not blank, not listed twice. Two services behind one Ingress
+      // host is one host on two pages, which is what the manifests say.
+      for (const field of ["hosts", "dials"] as const) {
+        const names = new Set<string>();
+        for (const name of service[field] ?? []) {
+          if (!name.trim()) {
+            fail(
+              `service "${service.id}" has a ${field.slice(0, -1)} with no name`,
+              `service ${service.id}`,
+            );
+          }
+          if (names.has(name)) {
+            fail(
+              `service "${service.id}" names ${field.slice(0, -1)} "${name}" twice`,
+              `service ${service.id}`,
+            );
+          }
+          names.add(name);
+        }
+      }
       for (const call of service.consumes) rpcIds.add(call.id);
       for (const provided of service.provides) {
         for (const method of provided.methods) {
@@ -366,6 +402,14 @@ export function validateCatalog(catalog: Catalog): Catalog {
               );
             }
           }
+          for (const field of operation.fields ?? []) {
+            if (field.ref !== undefined && !(field.ref in catalog.defs)) {
+              fail(
+                `field "${field.name}" of operation "${operation.id}" of aggregate "${aggregate.id}" references unknown def "${field.ref}"`,
+                `aggregate ${aggregate.id} / operation ${operation.id} / field ${field.name}`,
+              );
+            }
+          }
         }
         validateBlocks(catalog, aggregate);
         assertUniqueSlugs(
@@ -622,16 +666,47 @@ export function validateCatalog(catalog: Catalog): Catalog {
           eventIds.has(step.ref) ||
           rpcIds.has(step.ref) ||
           (step.kind === "rpc" &&
-            providedRpcRefs.has(`${step.to}|${step.ref}`));
+            providedRpcRefs.has(`${step.to}|${step.ref}`)) ||
+          (step.kind === "call" &&
+            operationRefs.has(`${step.to}|${step.ref}`));
         if (!resolves) {
           fail(
-            `flow "${flow.slug}" step "${step.id}": ref "${step.ref}" resolves to neither an Event, an RpcCall nor a method provided by "${step.to}", and status is "${step.status}" rather than "unresolved"`,
+            `flow "${flow.slug}" step "${step.id}": ref "${step.ref}" resolves to neither an Event, an RpcCall, a method provided by "${step.to}" nor an operation of "${step.to}", and status is "${step.status}" rather than "unresolved"`,
             `flow ${flow.id} / step ${step.id}`,
           );
         }
       }
     }
 
+    // An example names the steps it showed by id; one that names a step
+    // the flow does not have is a recording of some other flow, or of this
+    // one before it changed, and either way it would be shown next to the
+    // wrong step.
+    const exampleIds = new Set<string>();
+    for (const example of flow.examples ?? []) {
+      if (!example.id || !example.recording || !example.traceId) {
+        fail(
+          `flow "${flow.slug}" has an example with no id, recording or trace id`,
+          `flow ${flow.id}`,
+        );
+      }
+      if (exampleIds.has(example.id)) {
+        fail(
+          `flow "${flow.slug}" carries example "${example.id}" twice`,
+          `flow ${flow.id}`,
+        );
+      }
+      exampleIds.add(example.id);
+      for (const shown of example.steps) {
+        if (!stepById.has(shown.step)) {
+          fail(
+            `flow "${flow.slug}" example "${example.id}" shows unknown step "${shown.step}"`,
+            `flow ${flow.id}`,
+          );
+        }
+      }
+    }
+
     for (const step of steps) {
       if (step.kind !== "response") {
         if (step.replyTo !== undefined) {
@@ -670,10 +745,37 @@ export function validateCatalog(catalog: Catalog): Catalog {
   validateAdrs(catalog, eventIds);
   validateTerms(catalog);
   validateRepos(catalog);
+  validateDeployments(catalog);
 
   return catalog;
 }
 
+/**
+ * A deployment names an Application, and names it once.
+ *
+ * What is not checked is deliberate, and the same omission `validateRepos`
+ * makes: a deployment of a repository no service claims is NOT an error. The
+ * snapshot lists what the control plane manages, and an Application for a
+ * service nobody has read yet, or for something that is not a service at
+ * all - a monitoring stack, an ingress controller - is the ordinary case.
+ * It simply matches nothing on a service page. Nor is a row with an empty
+ * environment or repository: the snapshot says what the deployer said, and
+ * a build must not go red because one Application was written oddly.
+ */
+function validateDeployments(catalog: Catalog): void {
+  const seen = new Set<string>();
+
+  for (const deployment of allDeployments(catalog)) {
+    const where = `deployment ${deployment.id || "?"}`;
+    if (!deployment.id) fail("a deployment has no id", where);
+    if (!deployment.name) fail(`deployment "${deployment.id}" names no application`, where);
+    if (seen.has(deployment.id)) {
+      fail(`deployment "${deployment.id}" is listed twice in one catalog`, where);
+    }
+    seen.add(deployment.id);
+  }
+}
+
 /**
  * A module reference may only point at a module that exists.
  *

package/src/catalog.test.ts

@@ -86,6 +86,22 @@ describe("validateCatalog", () => {
     expect(() => validateCatalog(bad)).toThrow(/expected 1.1 or 1.2/);
   });
 
+  it("rejects an example that shows a step the flow does not have, and one carried twice", () => {
+    const bad = clone();
+    const checkout = bad.flows.find((f) => f.slug === "checkout") as Flow;
+    const first = walkSteps(checkout.steps)[0];
+    if (!first) throw new Error("fixture has no steps");
+    const example = { id: "t.jsonl#1", recording: "t.jsonl", traceId: "1", durationMs: 1, steps: [{ step: first.id, durationMs: 1 }] };
+    checkout.examples = [example];
+    expect(() => validateCatalog(bad)).not.toThrow();
+
+    checkout.examples = [{ ...example, steps: [{ step: "nope", durationMs: 1 }] }];
+    expect(() => validateCatalog(bad)).toThrowError(/flow "checkout" example "t.jsonl#1" shows unknown step "nope"/);
+
+    checkout.examples = [example, example];
+    expect(() => validateCatalog(bad)).toThrowError(/carries example "t.jsonl#1" twice/);
+  });
+
   it("rejects a step whose participant was never declared, naming flow and step", () => {
     const bad = clone();
     const checkout = bad.flows.find((f) => f.slug === "checkout") as Flow;
@@ -105,12 +121,35 @@ describe("validateCatalog", () => {
     if (!step) throw new Error("fixture has no steps");
     step.ref = "shop.oms.order.NoSuchEvent";
     expect(() => validateCatalog(bad)).toThrowError(
-      /resolves to neither an Event, an RpcCall nor a method/,
+      /resolves to neither an Event, an RpcCall, a method/,
     );
     step.status = "unresolved";
     expect(() => validateCatalog(bad)).not.toThrow();
   });
 
+  // A flow that crosses a boundary the transport does not draw - a command
+  // handed to another context over an in-process bus - names the use case
+  // it runs, and only a `call` step into that use case's service may.
+  it("accepts a call step that references an operation of the service it enters", () => {
+    const good = clone();
+    const service = good.contexts[0]?.services[0];
+    const aggregate = service?.aggregates[0];
+    const operation = aggregate?.operations[0];
+    const flow = good.flows[0] as Flow;
+    const step = walkSteps(flow.steps)[0];
+    if (!service || !aggregate || !operation || !step) throw new Error("nothing to reference");
+    if (!flow.participants.some((p) => p.id === service.id)) {
+      flow.participants.push({ id: service.id, kind: "service", context: good.contexts[0]!.id });
+    }
+    step.kind = "call";
+    step.to = service.id;
+    step.ref = `${aggregate.id}/${operation.id}`;
+    expect(() => validateCatalog(good)).not.toThrow();
+
+    step.kind = "rpc";
+    expect(() => validateCatalog(good)).toThrowError(/nor an operation of/);
+  });
+
   it("rejects a field ref that is not a defs key", () => {
     const bad = clone();
     const field =

package/src/components/ChannelRows.test.tsx

@@ -2,7 +2,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
 import type { Channel } from "../catalog";
-import { ChannelRowsContent } from "./ChannelRows";
+import { ChannelRowsContent, countDirections, rowsOf } from "./ChannelRows";
 
 const kafka: Channel = {
   address: "orders/created",
@@ -18,6 +18,18 @@ const nats: Channel = {
   messages: [],
 };
 
+/** A work queue the way extract-laravel and extract-celery write one: a job put on and worked. */
+const queue: Channel = {
+  address: "default",
+  kind: "job",
+  title: "Queue · default",
+  messages: [
+    { name: "App\\Jobs\\IndexOrder", title: "IndexOrder", doc: "Puts the order in the index.", direction: "send" },
+    { name: "App\\Jobs\\IndexOrder", title: "IndexOrder", doc: "Worked by `IndexOrder::handle`.", direction: "receive" },
+    { name: "App\\Jobs\\ImportBatch", title: "ImportBatch", doc: "Worked by `ImportBatch::handle`.", direction: "receive" },
+  ],
+};
+
 describe("ChannelRows Kafka UI integration", () => {
   it("links only Kafka cards to their exact topic when configured", () => {
     const markup = renderToStaticMarkup(
@@ -50,5 +62,68 @@ describe("ChannelRows Kafka UI integration", () => {
 
     expect(markup).not.toContain("view in Kafka UI");
   });
+});
+
+describe("ChannelRows direction", () => {
+  it("draws each direction as its own chip", () => {
+    const markup = renderToStaticMarkup(
+      <MemoryRouter>
+        <ChannelRowsContent channels={[queue]} service="shop.app" kafkaUi="" />
+      </MemoryRouter>,
+    );
+    expect(markup.match(/data-direction="send"/g)).toHaveLength(1);
+    expect(markup.match(/data-direction="receive"/g)).toHaveLength(2);
+    expect(markup).toContain('class="chip dir-send"');
+    expect(markup).toContain('class="chip dir-receive"');
+  });
+
+  it("keeps one direction when filtered, and says so when a channel has none of it", () => {
+    const rows = rowsOf(queue.messages, "send", false);
+    expect(rows.map((r) => `${r.directions[0]} ${r.message.title}`)).toEqual(["send IndexOrder"]);
+
+    const markup = renderToStaticMarkup(
+      <MemoryRouter>
+        <ChannelRowsContent channels={[queue]} service="shop.app" kafkaUi="" filter="send" />
+      </MemoryRouter>,
+    );
+    expect(markup).not.toContain("ImportBatch");
+    expect(markup).not.toContain("nothing sent");
 
+    const empty = renderToStaticMarkup(
+      <MemoryRouter>
+        <ChannelRowsContent
+          channels={[{ ...queue, messages: queue.messages.filter((m) => m.direction === "receive") }]}
+          service="shop.app"
+          kafkaUi=""
+          filter="send"
+        />
+      </MemoryRouter>,
+    );
+    expect(empty).toContain("nothing sent");
+  });
+
+  it("folds the send and receive of one message into a row wearing both chips", () => {
+    const rows = rowsOf(queue.messages, "all", true);
+    expect(rows.map((r) => `${r.message.title}: ${r.directions.join("+")}`)).toEqual([
+      "IndexOrder: send+receive",
+      "ImportBatch: receive",
+    ]);
+    // The sent message carries the sender's doc, whichever came first.
+    const reversed = rowsOf([...queue.messages].reverse(), "all", true);
+    expect(reversed[1]?.message.doc).toBe("Puts the order in the index.");
+    expect(reversed[1]?.directions).toEqual(["send", "receive"]);
+
+    const markup = renderToStaticMarkup(
+      <MemoryRouter>
+        <ChannelRowsContent channels={[queue]} service="shop.app" kafkaUi="" grouped />
+      </MemoryRouter>,
+    );
+    // Two rows for three messages, three chips between them.
+    expect(markup.match(/<li /g)).toHaveLength(2);
+    expect(markup.match(/data-direction=/g)).toHaveLength(3);
+  });
+
+  it("counts what travels each way across every channel", () => {
+    expect(countDirections([queue, kafka])).toEqual({ send: 1, receive: 2 });
+  });
 });

package/src/components/ChannelRows.tsx

@@ -12,10 +12,15 @@
 // is either a publisher outside the estate or a name that has drifted, and the
 // Problems page says which; a row that quietly dropped it would be the site
 // hiding the interesting case.
+//
+// Direction is the first thing a reader asks of a channel - what goes out, what
+// comes in - so it is drawn, not only written: an arrow and a colour per
+// direction, a filter to keep one, and a grouping that folds the two rows a
+// message has on a work queue (put on, worked) into one.
 
-import { ExternalLink } from "lucide-react";
-import { Link } from "react-router";
-import type { Channel, ChannelMessage } from "../catalog";
+import { ArrowDownLeft, ArrowUpRight, ExternalLink, Layers } from "lucide-react";
+import { Link, useSearchParams } from "react-router";
+import type { Channel, ChannelDirection, ChannelMessage } from "../catalog";
 import { catalog, index } from "../data";
 import {
   isKafkaChannel,
@@ -29,6 +34,8 @@ import { RowActions } from "./RowActions";
 
 const KAFKA_HANDOFF_CHANNELS = kafkaHandoffChannels(catalog);
 
+export type DirectionFilter = "all" | ChannelDirection;
+
 /** The event that goes out under a wire name, when the catalog knows one. */
 function publisherOf(name: string) {
   const event = index.eventByWireName.get(name);
@@ -40,11 +47,41 @@ function publisherOf(name: string) {
   return { event, owner, path };
 }
 
+const DIRECTION = {
+  send: {
+    Icon: ArrowUpRight,
+    className: "chip dir-send",
+    title: "this service puts it on the channel",
+  },
+  receive: {
+    Icon: ArrowDownLeft,
+    className: "chip dir-receive",
+    title: "this service listens for it",
+  },
+} as const;
+
+function DirectionChip({ direction }: { direction: ChannelDirection }) {
+  const { Icon, className, title } = DIRECTION[direction];
+  return (
+    <span className={className} title={title} data-direction={direction}>
+      <Icon size={11} aria-hidden />
+      {direction}
+    </span>
+  );
+}
+
+/**
+ * One row: a message and the directions it travels. Ungrouped, a message that
+ * is both sent and received is two rows with one direction each; grouped, it
+ * is one row wearing both chips.
+ */
 function MessageRow({
   message,
+  directions,
   mine,
 }: {
   message: ChannelMessage;
+  directions: readonly ChannelDirection[];
   /** The service this channel belongs to, so a row can say when the publisher is someone else. */
   mine: string;
 }) {
@@ -58,16 +95,9 @@ function MessageRow({
     <li className="row rounded-none border-x-0 border-t-0 last:border-b-0">
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-x-2">
-          <span
-            className="chip mono"
-            title={
-              message.direction === "send"
-                ? "this service puts it on the channel"
-                : "this service listens for it"
-            }
-          >
-            {message.direction}
-          </span>
+          {directions.map((direction) => (
+            <DirectionChip key={direction} direction={direction} />
+          ))}
           {published ? (
             <Link
               to={published.path}
@@ -99,6 +129,64 @@ function MessageRow({
   );
 }
 
+/** A message with every direction it travels on the channel, in send-then-receive order. */
+interface MessageGroup {
+  message: ChannelMessage;
+  directions: ChannelDirection[];
+}
+
+/**
+ * The rows a channel shows: one per message and direction, or - grouped - one
+ * per message with both directions, the sent one supplying the doc because it
+ * is what the sender wrote down. A filter keeps one direction; a grouped row
+ * that loses its other half keeps the chip it still has.
+ */
+export function rowsOf(
+  messages: readonly ChannelMessage[],
+  filter: DirectionFilter,
+  grouped: boolean,
+): MessageGroup[] {
+  const kept = messages.filter(
+    (message) => filter === "all" || message.direction === filter,
+  );
+  if (!grouped) {
+    return kept.map((message) => ({ message, directions: [message.direction] }));
+  }
+  const groups: MessageGroup[] = [];
+  for (const message of kept) {
+    const group = groups.find((g) => g.message.name === message.name);
+    if (!group) {
+      groups.push({ message, directions: [message.direction] });
+    } else {
+      if (!group.directions.includes(message.direction)) {
+        group.directions.push(message.direction);
+      }
+      // The sent message carries the sender's doc; a receive found first is
+      // replaced by it, so that a grouped row reads the same either way.
+      if (message.direction === "send" && group.message.direction === "receive") {
+        group.message = message;
+      }
+    }
+  }
+  for (const group of groups) {
+    group.directions.sort((a, b) => (a === b ? 0 : a === "send" ? -1 : 1));
+  }
+  return groups;
+}
+
+/** How many messages travel each way, across every channel. */
+export function countDirections(channels: readonly Channel[]) {
+  let send = 0;
+  let receive = 0;
+  for (const channel of channels) {
+    for (const message of channel.messages) {
+      if (message.direction === "send") send += 1;
+      else receive += 1;
+    }
+  }
+  return { send, receive };
+}
+
 export function ChannelRows({
   channels,
   service,
@@ -107,12 +195,75 @@ export function ChannelRows({
   service: string;
 }) {
   const kafkaUi = useKafkaUi((state) => state.url);
+  // The filter and the grouping live in the URL beside the tab, so that the
+  // view a reader ends up with is the one their link opens.
+  const [params, setParams] = useSearchParams();
+  const dir = params.get("dir");
+  const filter: DirectionFilter =
+    dir === "send" || dir === "receive" ? dir : "all";
+  const grouped = params.get("group") === "message";
+  const set = (key: string, value: string | null) => {
+    const next = new URLSearchParams(params);
+    if (value === null) next.delete(key);
+    else next.set(key, value);
+    setParams(next, { replace: true });
+  };
+  const counts = countDirections(channels);
+
   return (
-    <ChannelRowsContent
-      channels={channels}
-      service={service}
-      kafkaUi={kafkaUi}
-    />
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="seg bg-canvas" role="group" aria-label="Direction shown">
+          <button
+            type="button"
+            onClick={() => set("dir", null)}
+            aria-pressed={filter === "all"}
+            className={filter === "all" ? "is-on" : ""}
+            title="Every message, both ways"
+          >
+            all <span className="tnum text-muted">{counts.send + counts.receive}</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => set("dir", "send")}
+            aria-pressed={filter === "send"}
+            className={filter === "send" ? "is-on" : ""}
+            title="Only what this service puts on a channel"
+          >
+            <ArrowUpRight size={11} aria-hidden className="inline" /> send{" "}
+            <span className="tnum text-muted">{counts.send}</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => set("dir", "receive")}
+            aria-pressed={filter === "receive"}
+            className={filter === "receive" ? "is-on" : ""}
+            title="Only what this service listens for"
+          >
+            <ArrowDownLeft size={11} aria-hidden className="inline" /> receive{" "}
+            <span className="tnum text-muted">{counts.receive}</span>
+          </button>
+        </div>
+        <div className="seg bg-canvas" role="group" aria-label="Grouping">
+          <button
+            type="button"
+            onClick={() => set("group", grouped ? null : "message")}
+            aria-pressed={grouped}
+            className={grouped ? "is-on" : ""}
+            title="One row per message, with every direction it travels"
+          >
+            <Layers size={11} aria-hidden className="inline" /> by message
+          </button>
+        </div>
+      </div>
+      <ChannelRowsContent
+        channels={channels}
+        service={service}
+        kafkaUi={kafkaUi}
+        filter={filter}
+        grouped={grouped}
+      />
+    </div>
   );
 }
 
@@ -121,59 +272,71 @@ export function ChannelRowsContent({
   channels,
   service,
   kafkaUi,
+  filter = "all",
+  grouped = false,
 }: {
   channels: Channel[];
   service: string;
   kafkaUi: string;
+  filter?: DirectionFilter;
+  grouped?: boolean;
 }) {
   return (
     <div className="flex flex-col gap-section" data-nav-list>
-      {channels.map((channel) => (
-        <div key={channel.address} className="rounded-card border border-line">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-line px-3 py-2">
-            <div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2">
-              <Ident value={channel.address} />
-              {channel.kind === "job" ? (
-                <span className="chip">work queue</span>
-              ) : channel.kind === "message" ? (
-                <span className="chip">message stream</span>
-              ) : null}
-              {channel.title ? (
-                <span className="text-muted">{channel.title}</span>
+      {channels.map((channel) => {
+        const rows = rowsOf(channel.messages, filter, grouped);
+        return (
+          <div key={channel.address} className="rounded-card border border-line">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-line px-3 py-2">
+              <div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2">
+                <Ident value={channel.address} />
+                {channel.kind === "job" ? (
+                  <span className="chip">work queue</span>
+                ) : channel.kind === "message" ? (
+                  <span className="chip">message stream</span>
+                ) : null}
+                {channel.title ? (
+                  <span className="text-muted">{channel.title}</span>
+                ) : null}
+              </div>
+              {kafkaUi && isKafkaChannel(channel, KAFKA_HANDOFF_CHANNELS) ? (
+                <a
+                  href={kafkaUiTopicUrl(kafkaUi, channel.address) ?? kafkaUi}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mono inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-control text-accent hover:underline"
+                  title={`Open ${channel.address} in Kafka UI`}
+                >
+                  view in Kafka UI <ExternalLink size={12} aria-hidden />
+                </a>
               ) : null}
             </div>
-            {kafkaUi && isKafkaChannel(channel, KAFKA_HANDOFF_CHANNELS) ? (
-              <a
-                href={kafkaUiTopicUrl(kafkaUi, channel.address) ?? kafkaUi}
-                target="_blank"
-                rel="noreferrer"
-                className="mono inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-control text-accent hover:underline"
-                title={`Open ${channel.address} in Kafka UI`}
-              >
-                view in Kafka UI <ExternalLink size={12} aria-hidden />
-              </a>
+            {channel.doc ? (
+              <p className="px-3 py-2 text-muted">{channel.doc}</p>
             ) : null}
+            {channel.messages.length === 0 ? (
+              <p className="px-3 py-2 text-muted">
+                declared, and no operation says which way it travels
+              </p>
+            ) : rows.length === 0 ? (
+              <p className="px-3 py-2 text-muted">
+                {filter === "send" ? "nothing sent" : "nothing received"}
+              </p>
+            ) : (
+              <ul>
+                {rows.map(({ message, directions }) => (
+                  <MessageRow
+                    key={`${directions.join("+")} ${message.name}`}
+                    message={message}
+                    directions={directions}
+                    mine={service}
+                  />
+                ))}
+              </ul>
+            )}
           </div>
-          {channel.doc ? (
-            <p className="px-3 py-2 text-muted">{channel.doc}</p>
-          ) : null}
-          {channel.messages.length === 0 ? (
-            <p className="px-3 py-2 text-muted">
-              declared, and no operation says which way it travels
-            </p>
-          ) : (
-            <ul>
-              {channel.messages.map((message) => (
-                <MessageRow
-                  key={`${message.direction} ${message.name}`}
-                  message={message}
-                  mine={service}
-                />
-              ))}
-            </ul>
-          )}
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }