proschi 0.10.0 → 0.11.0

package/dist/cli.cjs

@@ -15353,7 +15353,8 @@ var componentCatalog = [
   { type: "database", techStack: "Database", category: "Generic Components", searchTerms: "database relational sql db", aliases: ["DB", "RDBMS", "SQL Database", "Relational Database", "SQL"] },
   { type: "database", techStack: "NoSQL Database", category: "Generic Components", searchTerms: "nosql key value document wide column database", profile: "nosql", aliases: ["NoSQL", "NoSQL DB", "Key-Value Store", "KV Store", "Document Store", "Document Database", "Wide-Column Store"] },
   { type: "cache", techStack: "Cache", category: "Generic Components", searchTerms: "cache in-memory key value", aliases: ["In-Memory Cache", "Distributed Cache"] },
-  { type: "queue", techStack: "Message Queue", category: "Generic Components", searchTerms: "queue message broker topic stream event bus", aliases: ["Queue", "Message Broker", "Broker", "Event Bus", "Topic", "Event Stream", "Stream"] },
+  { type: "queue", techStack: "Message Queue", category: "Generic Components", searchTerms: "queue message job task", aliases: ["Queue", "Job Queue", "Task Queue"] },
+  { type: "broker", techStack: "Message Broker", category: "Generic Components", searchTerms: "message broker topic stream event bus log pub sub", aliases: ["Broker", "Event Bus", "Topic", "Event Stream", "Stream", "Event Log"] },
   { type: "storage", techStack: "Object Storage", category: "Generic Components", searchTerms: "object storage blob bucket files", aliases: ["Object Store", "Blob Store", "Blob Storage", "Bucket", "Storage", "File Storage"] },
   { type: "cdn", techStack: "CDN", category: "Generic Components", searchTerms: "cdn content delivery network edge cache", kind: "cdn", aliases: ["Content Delivery Network", "Edge Cache"] },
   { type: "cdn", techStack: "Load Balancer", category: "Generic Components", searchTerms: "load balancer lb reverse proxy", kind: "loadbalancer", aliases: ["LB", "Reverse Proxy", "L7 Load Balancer", "L4 Load Balancer"] },
@@ -15414,10 +15415,10 @@ var componentCatalog = [
   { type: "database", techStack: "AWS OpenSearch", category: "AWS Services", searchTerms: "aws opensearch elasticsearch search", kind: "search", aliases: ["Amazon OpenSearch", "OpenSearch Service", "AWS Elasticsearch"] },
   // AWS Messaging
   { type: "queue", techStack: "AWS SQS", category: "AWS Services", searchTerms: "aws sqs queue message", aliases: ["Amazon SQS", "Simple Queue Service"] },
-  { type: "queue", techStack: "AWS SNS", category: "AWS Services", searchTerms: "aws sns notification topic pubsub", aliases: ["SNS", "Amazon SNS", "Simple Notification Service"] },
-  { type: "queue", techStack: "AWS EventBridge", category: "AWS Services", searchTerms: "aws eventbridge event bus", aliases: ["EventBridge", "Amazon EventBridge"] },
-  { type: "queue", techStack: "AWS Kinesis", category: "AWS Services", searchTerms: "aws kinesis stream data", aliases: ["Kinesis", "Amazon Kinesis", "Kinesis Data Streams"] },
-  { type: "queue", techStack: "AWS MSK", category: "AWS Services", searchTerms: "aws msk managed kafka stream", aliases: ["MSK", "Amazon MSK", "Managed Streaming for Kafka"] },
+  { type: "broker", techStack: "AWS SNS", category: "AWS Services", searchTerms: "aws sns notification topic pubsub", aliases: ["SNS", "Amazon SNS", "Simple Notification Service"] },
+  { type: "broker", techStack: "AWS EventBridge", category: "AWS Services", searchTerms: "aws eventbridge event bus", aliases: ["EventBridge", "Amazon EventBridge"] },
+  { type: "broker", techStack: "AWS Kinesis", category: "AWS Services", searchTerms: "aws kinesis stream data", aliases: ["Kinesis", "Amazon Kinesis", "Kinesis Data Streams"] },
+  { type: "broker", techStack: "AWS MSK", category: "AWS Services", searchTerms: "aws msk managed kafka stream", aliases: ["MSK", "Amazon MSK", "Managed Streaming for Kafka"] },
   // AWS CDN/Network
   { type: "cdn", techStack: "AWS CloudFront", category: "AWS Services", searchTerms: "aws cloudfront cdn edge", kind: "cdn", aliases: ["CloudFront", "Amazon CloudFront"] },
   { type: "cdn", techStack: "AWS Route53", category: "AWS Services", searchTerms: "aws route53 dns domain", kind: "dns", aliases: ["Route53", "Amazon Route 53"] },
@@ -15445,7 +15446,7 @@ var componentCatalog = [
   { type: "database", techStack: "GCP BigQuery", category: "GCP Services", searchTerms: "gcp google bigquery data warehouse analytics", kind: "analytics", aliases: ["BigQuery", "Google BigQuery"] },
   { type: "cache", techStack: "GCP Memorystore", category: "GCP Services", searchTerms: "gcp google memorystore redis memcached cache", aliases: ["Memorystore"] },
   // GCP Messaging
-  { type: "queue", techStack: "GCP Pub/Sub", category: "GCP Services", searchTerms: "gcp google pubsub pub/sub message queue", aliases: ["Pub/Sub", "Google Pub/Sub", "Cloud Pub/Sub"] },
+  { type: "broker", techStack: "GCP Pub/Sub", category: "GCP Services", searchTerms: "gcp google pubsub pub/sub message queue", aliases: ["Pub/Sub", "Google Pub/Sub", "Cloud Pub/Sub"] },
   // GCP CDN/Network
   { type: "cdn", techStack: "GCP Cloud CDN", category: "GCP Services", searchTerms: "gcp google cloud cdn edge", kind: "cdn", aliases: ["Cloud CDN", "Google Cloud CDN"] },
   { type: "cdn", techStack: "GCP Cloud DNS", category: "GCP Services", searchTerms: "gcp google cloud dns domain", kind: "dns", aliases: ["Cloud DNS", "Google Cloud DNS"] },
@@ -15472,9 +15473,9 @@ var componentCatalog = [
   { type: "cache", techStack: "Azure Cache for Redis", category: "Azure Services", searchTerms: "azure redis cache", aliases: ["Azure Redis"] },
   { type: "database", techStack: "Azure AI Search", category: "Azure Services", searchTerms: "azure ai cognitive search", kind: "search", aliases: ["Azure Cognitive Search", "Azure Search"] },
   // Azure Messaging
-  { type: "queue", techStack: "Azure Service Bus", category: "Azure Services", searchTerms: "azure service bus queue message", aliases: ["Service Bus"] },
-  { type: "queue", techStack: "Azure Event Hubs", category: "Azure Services", searchTerms: "azure event hubs stream", aliases: ["Event Hubs", "Event Hub"] },
-  { type: "queue", techStack: "Azure Event Grid", category: "Azure Services", searchTerms: "azure event grid", aliases: ["Event Grid"] },
+  { type: "broker", techStack: "Azure Service Bus", category: "Azure Services", searchTerms: "azure service bus queue message", aliases: ["Service Bus"] },
+  { type: "broker", techStack: "Azure Event Hubs", category: "Azure Services", searchTerms: "azure event hubs stream", aliases: ["Event Hubs", "Event Hub"] },
+  { type: "broker", techStack: "Azure Event Grid", category: "Azure Services", searchTerms: "azure event grid", aliases: ["Event Grid"] },
   { type: "queue", techStack: "Azure Queue Storage", category: "Azure Services", searchTerms: "azure queue storage message", aliases: ["Azure Queue", "Azure Queues"] },
   // Azure CDN/Network
   { type: "cdn", techStack: "Azure CDN", category: "Azure Services", searchTerms: "azure cdn edge", kind: "cdn" },
@@ -15514,16 +15515,16 @@ var componentCatalog = [
   { type: "cache", techStack: "Valkey", category: "Cache & In-Memory", searchTerms: "valkey redis cache memory" },
   { type: "cache", techStack: "KeyDB", category: "Cache & In-Memory", searchTerms: "keydb redis cache memory" },
   { type: "cache", techStack: "Dragonfly", category: "Cache & In-Memory", searchTerms: "dragonfly dragonflydb redis cache memory", aliases: ["DragonflyDB"] },
-  // Message Queues
-  { type: "queue", techStack: "Kafka", category: "Message Queues", searchTerms: "kafka message queue stream", aliases: ["Apache Kafka", "Confluent", "Confluent Kafka", "Kafka Topic"] },
-  { type: "queue", techStack: "RabbitMQ", category: "Message Queues", searchTerms: "rabbitmq message queue amqp", aliases: ["Rabbit", "AMQP"] },
-  { type: "queue", techStack: "SQS", category: "Message Queues", searchTerms: "sqs queue aws message" },
-  { type: "queue", techStack: "Redis Queue", category: "Message Queues", searchTerms: "redis queue message", aliases: ["Redis Streams", "Redis Pub/Sub"] },
-  { type: "queue", techStack: "NATS", category: "Message Queues", searchTerms: "nats message queue", aliases: ["NATS JetStream", "JetStream"] },
-  { type: "queue", techStack: "Apache Pulsar", category: "Message Queues", searchTerms: "pulsar message queue stream", aliases: ["Pulsar"] },
-  { type: "queue", techStack: "ActiveMQ", category: "Message Queues", searchTerms: "activemq message queue", aliases: ["Apache ActiveMQ", "Amazon MQ"] },
-  { type: "queue", techStack: "ZeroMQ", category: "Message Queues", searchTerms: "zeromq zmq message queue", aliases: ["ZMQ", "0MQ"] },
-  { type: "queue", techStack: "Redpanda", category: "Message Queues", searchTerms: "redpanda kafka stream queue" },
+  // Queues & Brokers: a queue hands each message to one consumer; a broker routes or logs it for many.
+  { type: "broker", techStack: "Kafka", category: "Queues & Brokers", searchTerms: "kafka message broker event stream log topic", aliases: ["Apache Kafka", "Confluent", "Confluent Kafka", "Kafka Topic"] },
+  { type: "broker", techStack: "RabbitMQ", category: "Queues & Brokers", searchTerms: "rabbitmq message broker queue amqp", aliases: ["Rabbit", "AMQP"] },
+  { type: "queue", techStack: "SQS", category: "Queues & Brokers", searchTerms: "sqs queue aws message" },
+  { type: "queue", techStack: "Redis Queue", category: "Queues & Brokers", searchTerms: "redis queue message", aliases: ["Redis Streams", "Redis Pub/Sub"] },
+  { type: "broker", techStack: "NATS", category: "Queues & Brokers", searchTerms: "nats message broker stream", aliases: ["NATS JetStream", "JetStream"] },
+  { type: "broker", techStack: "Apache Pulsar", category: "Queues & Brokers", searchTerms: "pulsar message broker stream", aliases: ["Pulsar"] },
+  { type: "broker", techStack: "ActiveMQ", category: "Queues & Brokers", searchTerms: "activemq message broker queue", aliases: ["Apache ActiveMQ", "Amazon MQ"] },
+  { type: "queue", techStack: "ZeroMQ", category: "Queues & Brokers", searchTerms: "zeromq zmq message queue", aliases: ["ZMQ", "0MQ"] },
+  { type: "broker", techStack: "Redpanda", category: "Queues & Brokers", searchTerms: "redpanda kafka message broker stream" },
   // Search
   { type: "database", techStack: "OpenSearch", category: "Search", searchTerms: "opensearch elasticsearch search", kind: "search" },
   { type: "database", techStack: "Solr", category: "Search", searchTerms: "solr lucene search", kind: "search", aliases: ["Apache Solr"] },
@@ -15639,6 +15640,7 @@ var IDENT_PART = /[A-Za-z0-9_]/;
 var TEAM_PART = /[A-Za-z0-9_-]/;
 var DIGIT = /[0-9]/;
 var LETTER = /[A-Za-z]/;
+var HEX_COLOR = /^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})(?![A-Za-z0-9_])/;
 var SEPARATE_UNIT = /^[ \t]+(rps|rpm|rpd|ms|s|%|usd\/month|usd\/GB|MB\/s|GB\/s)(?![A-Za-z0-9_/])/;
 function tokenizeLine(text, line) {
   const tokens = [];
@@ -15651,7 +15653,14 @@ function tokenizeLine(text, line) {
       i++;
       continue;
     }
-    if (ch === "#") break;
+    if (ch === "#") {
+      const prev = tokens[tokens.length - 1];
+      const hex = prev?.kind === "ident" && prev.value === "color" ? HEX_COLOR.exec(text.slice(i)) : null;
+      if (!hex) break;
+      tokens.push({ kind: "hex", value: hex[0], col: i + 1, length: hex[0].length });
+      i += hex[0].length;
+      continue;
+    }
     const start = i;
     if (ch === ":") {
       const raw = stripTrailingComment(text.slice(i + 1));
@@ -15717,6 +15726,12 @@ function tokenizeLine(text, line) {
       tokens.push({ kind: "ident", value: text.slice(start, i), col: start + 1, length: i - start });
       continue;
     }
+    if (ch === "." && IDENT_START.test(text[i + 1] ?? "")) {
+      i++;
+      while (i < text.length && IDENT_PART.test(text[i])) i++;
+      tokens.push({ kind: "tag", value: text.slice(start + 1, i), col: start + 1, length: i - start });
+      continue;
+    }
     if (ch === "{" || ch === "}" || ch === ",") {
       const kind = ch === "{" ? "lbrace" : ch === "}" ? "rbrace" : "comma";
       tokens.push({ kind, value: ch, col: start + 1, length: 1 });
@@ -15858,10 +15873,12 @@ function classify(lines) {
       entries2.push({ ...base, kind: "cells", section: section2, cells });
       continue;
     }
-    if (!inSection && first.kind === "ident" && second?.kind === "arrow" && third?.kind === "ident" && tokens.length <= 4 && (!fourth || fourth.kind === "label")) {
-      const entry = { ...base, kind: "connection", from: first.value, arrow: second.value, to: third.value, label: fourth?.value, continuation: [] };
+    const tag = fourth?.kind === "tag" ? fourth : void 0;
+    const labelToken = tokens[tag ? 4 : 3];
+    if (!inSection && first.kind === "ident" && second?.kind === "arrow" && third?.kind === "ident" && tokens.length <= (tag ? 5 : 4) && (!labelToken || labelToken.kind === "label")) {
+      const entry = { ...base, kind: "connection", from: first.value, arrow: second.value, to: third.value, tag: tag?.value, label: labelToken?.value, continuation: [] };
       const brackets = new BracketCounter();
-      if (fourth && brackets.feed(fourth.value) > 0) {
+      if (labelToken && brackets.feed(labelToken.value) > 0) {
         const delta = indent(depth).length - width(leadingSpace(raw));
         while (i + 1 < lines.length) {
           const next = lines[++i];
@@ -15874,7 +15891,7 @@ function classify(lines) {
       continue;
     }
     const oneLineDecision = first.value === "decision" && second?.kind === "string" && third?.kind === "ident" && third.value === "because";
-    if (!inSection && first.kind === "ident" && !KEYWORDS.has(first.value) && !oneLineDecision && tokens.slice(1).every((t) => ["string", "tech", "team", "ident", "number", "comma"].includes(t.kind))) {
+    if (!inSection && first.kind === "ident" && !KEYWORDS.has(first.value) && !oneLineDecision && !isLayoutHint(tokens) && tokens.slice(1).every((t) => ["string", "tech", "team", "ident", "number", "comma", "tag", "hex"].includes(t.kind))) {
       let k = 1;
       const take = (kind) => tokens[k]?.kind === kind ? source(raw, tokens[k++]) : "";
       const cells2 = [first.value, take("string"), take("tech"), take("team"), join(raw, tokens.slice(k))];
@@ -15892,6 +15909,10 @@ function classify(lines) {
   }
   return entries2;
 }
+function isLayoutHint(tokens) {
+  const [first, second] = tokens;
+  return tokens.length === 2 && (first.value === "direction" || first.value === "layout") && second.kind === "ident" && !["pos", "critical", "color", "rank"].includes(second.value) && !/^x\d+$/.test(second.value);
+}
 function sectionOpenedBy(tokens) {
   const [first, second] = tokens;
   if (first.kind !== "ident" || tokens[tokens.length - 1].kind !== "lbrace") return void 0;
@@ -15966,12 +15987,13 @@ function alignCells(run2) {
 }
 function alignConnections(run2) {
   const head = Math.max(...run2.map((e) => len(e.from) + 1 + e.arrow.length));
+  const end = (e) => e.tag ? `${e.to} .${e.tag}` : e.to;
   const labelled = run2.filter((e) => e.label !== void 0);
-  const target = labelled.length ? Math.max(...labelled.map((e) => len(e.to))) : 0;
+  const target = labelled.length ? Math.max(...labelled.map((e) => len(end(e)))) : 0;
   return run2.map((e) => {
     const start = e.from + " ".repeat(head - len(e.from) - e.arrow.length) + e.arrow + " ";
-    if (e.label === void 0) return start + e.to;
-    return start + pad(e.to, target) + " :" + (e.label ? " " + e.label : "");
+    if (e.label === void 0) return start + end(e);
+    return start + pad(end(e), target) + " :" + (e.label ? " " + e.label : "");
   });
 }
 function commentOf(raw, tokens) {
@@ -16013,8 +16035,8 @@ var len = (s) => [...s].length;
 var pad = (s, to) => s + " ".repeat(Math.max(0, to - len(s)));
 
 // ../frontend/src/dsl/kinds.ts
-var KINDS = ["client", "edge", "cdn", "loadbalancer", "gateway", "dns", "service", "function", "cache", "database", "search", "analytics", "queue", "storage", "external", "other"];
-var DATA_STORE_KINDS = ["cache", "database", "search", "analytics", "queue", "storage"];
+var KINDS = ["client", "edge", "cdn", "loadbalancer", "gateway", "dns", "service", "function", "cache", "database", "search", "analytics", "queue", "broker", "storage", "external", "other"];
+var DATA_STORE_KINDS = ["cache", "database", "search", "analytics", "queue", "broker", "storage"];
 var EDGE_KINDS = ["edge", "cdn", "loadbalancer", "gateway", "dns"];
 var BY_TECH = new Map(componentCatalog.flatMap((c) => "kind" in c ? [[c.techStack, c.kind]] : []));
 var BY_TYPE = {
@@ -16027,6 +16049,7 @@ var BY_TYPE = {
   cache: "cache",
   database: "database",
   queue: "queue",
+  broker: "broker",
   storage: "storage",
   external: "external"
 };
@@ -16048,6 +16071,7 @@ var TYPE_OF_KIND = {
   search: "database",
   analytics: "database",
   queue: "queue",
+  broker: "broker",
   storage: "storage",
   external: "external",
   other: "shape"
@@ -16060,7 +16084,8 @@ var KIND_WORDS = [
   [/gateway|\bapim?\b.*manage/, "gateway"],
   [/\bwaf\b|firewall/, "edge"],
   [/cache|memcache/, "cache"],
-  [/queue|\bmq\b|mq$|broker|event.?stream|\bbus\b|topic|pub.?sub|event.?hub|kafka/, "queue"],
+  [/broker|event.?stream|event.?log|\bbus\b|topic|pub.?sub|event.?hub|kafka|kinesis|pulsar|redpanda|jetstream|\bnats\b/, "broker"],
+  [/queue|\bmq\b|mq$/, "queue"],
   [/search|lucene|\bindex\b/, "search"],
   [/warehouse|analytic|olap|data.?lake|lakehouse|time.?series|\btsdb\b/, "analytics"],
   [/bucket|blob|object.?stor|storage|\bfs\b|file.?system|\bnas\b|\bdisk\b|volume/, "storage"],
@@ -16081,7 +16106,7 @@ function isEdge(kind) {
   return EDGE_KINDS.includes(kind);
 }
 function kindMatches(actual, wanted) {
-  return actual === wanted || wanted === "edge" && isEdge(actual);
+  return actual === wanted || wanted === "edge" && isEdge(actual) || wanted === "queue" && actual === "broker";
 }
 
 // ../frontend/src/dsl/paths.ts
@@ -16206,12 +16231,56 @@ function accessOf(httpMethod, label) {
   return word && WRITE_VERBS.includes(word.toUpperCase()) ? "write" : "read";
 }
 
+// ../frontend/src/dsl/palette.ts
+var PALETTE = {
+  gray: "#6b7280",
+  blue: "#3b82f6",
+  teal: "#14b8a6",
+  green: "#22c55e",
+  yellow: "#eab308",
+  orange: "#f97316",
+  red: "#ef4444",
+  purple: "#a855f7",
+  pink: "#ec4899"
+};
+var COLOR_NAMES = Object.keys(PALETTE);
+var HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function resolveColor(text) {
+  if (Object.prototype.hasOwnProperty.call(PALETTE, text)) return PALETTE[text];
+  if (!HEX.test(text)) return void 0;
+  const digits = text.slice(1).toLowerCase();
+  return "#" + (digits.length === 3 ? [...digits].map((d) => d + d).join("") : digits);
+}
+function suggestColor(text) {
+  const word = text.toLowerCase();
+  let best;
+  for (const name of COLOR_NAMES) {
+    const distance = editDistance2(word, name);
+    if (distance <= 2 && (!best || distance < best.distance)) best = { name, distance };
+  }
+  return best?.name;
+}
+function editDistance2(a, b) {
+  const row = Array.from({ length: b.length + 1 }, (_, i) => i);
+  for (let i = 1; i <= a.length; i++) {
+    let prev = row[0];
+    row[0] = i;
+    for (let j = 1; j <= b.length; j++) {
+      const next = row[j];
+      row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+      prev = next;
+    }
+  }
+  return row[b.length];
+}
+
 // ../frontend/src/dsl/parser.ts
 var HTTP_METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"];
 var DEFAULT_TECH = "Rectangle";
 var DEFAULT_GROUP_TECH = "Logical Group";
 var MAX_SCENARIOS = 32;
 var MAX_ALT_DEPTH = 16;
+var DIRECTIONS = ["down", "right", "up", "left"];
 var REPLICAS = /^x(\d+)$/;
 var PERCENTILES = { p50: 50, p90: 90, p95: 95, p99: 99, p999: 99.9 };
 var FIELD_FLAGS = ["key", "index", "unique", "optional"];
@@ -16240,6 +16309,7 @@ var GENERIC_TECH = {
   search: "Search Engine",
   analytics: "Data Warehouse",
   queue: "Message Queue",
+  broker: "Message Broker",
   storage: "Object Storage",
   external: "Third Party API",
   other: "Note"
@@ -16284,6 +16354,12 @@ var Parser = class {
   decisions = [];
   tests = [];
   blocks = [];
+  legend = [];
+  layout = {};
+  /** Where each top-level layout hint was set, for the duplicate warning. */
+  layoutLocs = {};
+  /** `.tag` uses, resolved against the legend once every file is read. */
+  tagRefs = [];
   /** Checks of use case, scenario and node names, run once every file is read and use cases are built. */
   deferred = [];
   built = [];
@@ -16297,6 +16373,7 @@ var Parser = class {
   run() {
     this.parseFile();
     this.createImplicitNodes();
+    this.resolveTags();
     for (const e of this.edges) this.connected.add(`${e.source}|${e.target}`).add(`${e.target}|${e.source}`);
     const useCases = this.useCases.map(({ useCase, body }) => this.buildUseCase(useCase, body));
     const endpoints = useCases.flatMap((u) => u.endpoint ? [u.endpoint] : []);
@@ -16315,7 +16392,9 @@ var Parser = class {
       ...this.capacity.length ? { capacity: this.capacity } : {},
       ...this.entities.length ? { entities: this.entities } : {},
       ...this.decisions.length ? { decisions: this.decisions } : {},
-      ...this.tests.length ? { tests: this.tests } : {}
+      ...this.tests.length ? { tests: this.tests } : {},
+      ...this.legend.length ? { legend: this.legend } : {},
+      ...Object.keys(this.layout).length ? { layout: this.layout } : {}
     };
     const order = (d) => this.fileOrder.get(d.file) ?? 0;
     this.diagnostics.sort((a, b) => order(a) - order(b) || a.line - b.line || a.col - b.col);
@@ -16404,6 +16483,7 @@ var Parser = class {
       case "traffic":
       case "requirements":
       case "capacity":
+      case "legend":
         if (second?.kind === "lbrace") this.openSection(first.value, tokens, line);
         else this.parseNode(tokens, line);
         break;
@@ -16420,6 +16500,15 @@ var Parser = class {
         if (second?.kind === "string" && tokens[tokens.length - 1].kind === "lbrace") this.parseTest(tokens, line);
         else this.parseNode(tokens, line);
         break;
+      // Keywords only as `direction <word>` and `layout <word>`, so a node may still be called direction or layout.
+      case "direction":
+        if (this.isHint(tokens)) this.parseDirection(tokens, line);
+        else this.parseNode(tokens, line);
+        break;
+      case "layout":
+        if (this.isHint(tokens)) this.parseLayoutMode(tokens, line);
+        else this.parseNode(tokens, line);
+        break;
       default:
         this.parseNode(tokens, line);
     }
@@ -16438,6 +16527,86 @@ var Parser = class {
     }
     this.expectEnd(tokens, summary ? 3 : 2, line);
   }
+  /** `direction right`, `layout ordered`: a keyword and one plain word that is not a node part. */
+  isHint(tokens) {
+    const second = tokens[1];
+    return tokens.length === 2 && second.kind === "ident" && !["pos", "critical", "color", "rank"].includes(second.value) && !REPLICAS.test(second.value);
+  }
+  /** `direction down|right|up|left`: at the top level for the whole diagram, inside a group for its members. */
+  parseDirection(tokens, line) {
+    const [keyword, value] = tokens;
+    const loc = this.locOf(value, line);
+    if (!DIRECTIONS.includes(value.value)) {
+      this.error(`Unknown direction '${value.value}'; use direction down, right, up or left`, loc);
+      return;
+    }
+    const direction = value.value;
+    const top = this.top();
+    if (top?.kind === "group") {
+      const group = this.nodes.get(top.id);
+      if (!group || group.loc !== top.loc) return;
+      if (group.direction) this.warning(`Group '${group.id}' already has direction ${group.direction}; this one is ignored`, this.locOf(keyword, line));
+      else group.direction = direction;
+      return;
+    }
+    if (top) {
+      this.error("direction is only allowed at the top level or inside a group", this.locOf(keyword, line));
+      return;
+    }
+    if (this.file !== void 0) return;
+    if (this.layoutLocs.direction) {
+      this.warning(`direction is already set ${this.where(this.layoutLocs.direction, loc)}; this one is ignored`, this.locOf(keyword, line));
+      return;
+    }
+    this.layout.direction = direction;
+    this.layoutLocs.direction = loc;
+  }
+  /** `layout ordered`: lay edges out by declaration order. */
+  parseLayoutMode(tokens, line) {
+    const [keyword, value] = tokens;
+    const loc = this.locOf(value, line);
+    if (value.value !== "ordered") {
+      this.error(`Unknown layout mode '${value.value}'; the only one is layout ordered`, loc);
+      return;
+    }
+    if (this.top()) {
+      this.error("layout ordered applies to the whole diagram; write it at the top level", this.locOf(keyword, line));
+      return;
+    }
+    if (this.file !== void 0) return;
+    if (this.layoutLocs.ordered) {
+      this.warning(`layout ordered is already set ${this.where(this.layoutLocs.ordered, loc)}`, this.locOf(keyword, line));
+      return;
+    }
+    this.layout.ordered = true;
+    this.layoutLocs.ordered = loc;
+  }
+  /**
+   * `rank 2`, `rank first`, `rank last` at `i` in a node or group header.
+   * Returns how many tokens it used (0 when the token is something else), or
+   * undefined after reporting an error.
+   */
+  readRank(tokens, i, line, current) {
+    const t = tokens[i];
+    if (!isWord(t, "rank")) return 0;
+    const value = tokens[i + 1];
+    const help = "a layer number from 0 (rank 0, rank 1, \u2026), rank first or rank last";
+    if (current.rank !== void 0) {
+      this.error(`A node takes one rank; rank ${current.rank} is already set`, this.locOf(t, line));
+      return void 0;
+    }
+    if (value?.kind === "number" && /^\d+$/.test(value.value)) {
+      current.rank = Number(value.value);
+      return 2;
+    }
+    if (value?.kind === "ident" && (value.value === "first" || value.value === "last")) {
+      current.rank = value.value;
+      return 2;
+    }
+    const numeric = value?.kind === "number" || value?.kind === "quantity";
+    this.error(numeric ? `'${value.value}' is not a layer number; use ${help}` : `Expected ${help} after rank`, this.locOf(value ?? t, line));
+    return void 0;
+  }
   parseImport(tokens, line) {
     const keyword = tokens[0];
     if (this.stack.length > 0) {
@@ -16511,14 +16680,29 @@ var Parser = class {
       else this.warning(`'${tech.value}' is not a group style; using ${DEFAULT_GROUP_TECH}`, this.locOf(tech, line));
     }
     let position;
-    if (tokens[i]?.kind === "ident" && tokens[i].value === "pos") {
-      const [x, comma, y] = [tokens[i + 1], tokens[i + 2], tokens[i + 3]];
-      if (x?.kind !== "number" || comma?.kind !== "comma" || y?.kind !== "number") {
-        this.error("Expected pos x,y", this.locOf(tokens[i], line));
-        return;
+    const style = {};
+    const ranked = {};
+    while (i < tokens.length && tokens[i].kind !== "lbrace") {
+      const rankUsed = this.readRank(tokens, i, line, ranked);
+      if (rankUsed === void 0) return;
+      if (rankUsed) {
+        i += rankUsed;
+        continue;
       }
-      position = { x: Number(x.value), y: Number(y.value) };
-      i += 4;
+      if (tokens[i].kind === "ident" && tokens[i].value === "pos") {
+        const [x, comma, y] = [tokens[i + 1], tokens[i + 2], tokens[i + 3]];
+        if (x?.kind !== "number" || comma?.kind !== "comma" || y?.kind !== "number") {
+          this.error("Expected pos x,y", this.locOf(tokens[i], line));
+          return;
+        }
+        position = { x: Number(x.value), y: Number(y.value) };
+        i += 4;
+        continue;
+      }
+      const used2 = this.readStylePart(tokens, i, line, style, false);
+      if (used2 === void 0) return;
+      if (used2 === 0) break;
+      i += used2;
     }
     if (tokens[i]?.kind !== "lbrace") {
       this.error("Expected { after group header", this.locOf(tokens[i] ?? tokens[i - 1], line));
@@ -16526,7 +16710,10 @@ var Parser = class {
     }
     this.expectEnd(tokens, i + 1, line);
     const loc = this.locOf(idToken, line);
-    this.addNode({ id: idToken.value, kind: "group", name, type: "group", techStack, parent: this.currentGroup(), position, loc });
+    const group = { id: idToken.value, kind: "group", name, type: "group", techStack, parent: this.currentGroup(), position, loc };
+    if (ranked.rank !== void 0) group.rank = ranked.rank;
+    this.applyStyle(group, style);
+    this.addNode(group);
     this.stack.push({ kind: "group", id: idToken.value, loc });
   }
   parseUseCase(tokens, line) {
@@ -16631,8 +16818,16 @@ var Parser = class {
     }
     const node = { id: idToken.value, kind: "component", name: idToken.value, type: "shape", techStack: DEFAULT_TECH, parent: this.currentGroup(), loc };
     let strings = 0;
+    const style = {};
     for (let i = 1; i < tokens.length; i++) {
       const t = tokens[i];
+      const styleUsed = this.readStylePart(tokens, i, line, style, true);
+      const used2 = styleUsed === 0 ? this.readRank(tokens, i, line, node) : styleUsed;
+      if (used2 === void 0) return;
+      if (used2 > 0) {
+        i += used2 - 1;
+        continue;
+      }
       if (t.kind === "string" && strings < 2) {
         if (strings++ === 0) node.name = t.value;
         else node.description = t.value;
@@ -16667,16 +16862,23 @@ var Parser = class {
         return;
       }
     }
+    this.applyStyle(node, style);
     this.addNode(node);
   }
   parseConnection(tokens, index) {
     const line = index + 1;
-    const [fromToken, arrowToken, toToken, labelToken] = tokens;
+    const [fromToken, arrowToken, toToken] = tokens;
+    const tagToken = tokens[3]?.kind === "tag" ? tokens[3] : void 0;
+    const labelToken = tokens[tagToken ? 4 : 3];
     if (toToken?.kind !== "ident") {
       this.error("Expected a target id after the arrow", this.locOf(toToken ?? arrowToken, line));
       return index;
     }
-    if (tokens.length > 4 || labelToken && labelToken.kind !== "label") {
+    if (tagToken && tokens[4]?.kind === "tag") {
+      this.error("A connection takes one tag", this.locOf(tokens[4], line));
+      return index;
+    }
+    if (tokens.length > (tagToken ? 5 : 4) || labelToken && labelToken.kind !== "label") {
       this.error("Expected : before the connection label", this.locOf(labelToken, line));
       return index;
     }
@@ -16705,7 +16907,12 @@ var Parser = class {
     const arrow = arrowToken.value;
     this.references.push({ id: from, loc: this.locOf(fromToken, line) }, { id: to, loc: this.locOf(toToken, line) });
     const top = this.top();
-    if (top?.kind === "usecase" || top?.kind === "alt" || top?.kind === "par") {
+    const inUseCase = top?.kind === "usecase" || top?.kind === "alt" || top?.kind === "par";
+    if (tagToken && inUseCase) {
+      this.error("Tags style connections in the architecture, not use case steps", this.locOf(tagToken, line));
+      return lastLine;
+    }
+    if (inUseCase) {
       const body = this.currentBody();
       body.openAlt = void 0;
       const prefixes = arrow === "-->" ? { rest: label } : this.readLabelPrefixes(label, labelToken, line);
@@ -16728,7 +16935,12 @@ var Parser = class {
       const base = `${from}->${to}`;
       const count = this.edgeCount.get(base) ?? 0;
       this.edgeCount.set(base, count + 1);
-      this.edges.push({ id: count ? `${base}#${count + 1}` : base, source: from, target: to, label: unquote(label) || void 0, loc });
+      const edge = { id: count ? `${base}#${count + 1}` : base, source: from, target: to, label: unquote(label) || void 0, loc };
+      if (tagToken) {
+        edge.tag = tagToken.value;
+        this.tagRefs.push({ tag: tagToken.value, loc: this.locOf(tagToken, line), target: edge });
+      }
+      this.edges.push(edge);
     }
     return lastLine;
   }
@@ -16782,7 +16994,7 @@ var Parser = class {
       this.skipSection(section2, tokens, line);
       return false;
     }
-    if (section2 === "traffic" || section2 === "requirements" || section2 === "capacity") this.expectEnd(tokens, 2, line);
+    if (section2 === "traffic" || section2 === "requirements" || section2 === "capacity" || section2 === "legend") this.expectEnd(tokens, 2, line);
     this.stack.push({ kind: "section", section: section2, ...fill, loc });
     return true;
   }
@@ -16801,6 +17013,8 @@ var Parser = class {
         return this.parseRequirement(tokens, line);
       case "capacity":
         return this.parseCapacityLine(tokens, line);
+      case "legend":
+        return this.parseLegendLine(tokens, line);
       case "entity":
         return this.parseField(frame.entity, tokens, line);
       case "decision":
@@ -16812,6 +17026,110 @@ var Parser = class {
       }
     }
   }
+  /**
+   * Reads one style part of a node or group header at `i`: `color <name|#hex>`,
+   * `.tag` and, on nodes, `critical`. Returns how many tokens it used (0 when
+   * the token is something else), or undefined after reporting an error.
+   */
+  readStylePart(tokens, i, line, parts, isNode) {
+    const t = tokens[i];
+    if (t.kind === "tag") {
+      if (parts.tag) {
+        this.error(`A ${isNode ? "node" : "group"} takes one tag; '.${parts.tag.value}' is already set`, this.locOf(t, line));
+        return void 0;
+      }
+      parts.tag = { value: t.value, loc: this.locOf(t, line) };
+      return 1;
+    }
+    if (isWord(t, "color")) {
+      const value = this.readColor(tokens[i + 1], t, line);
+      if (value === void 0) return void 0;
+      parts.color = value;
+      return 2;
+    }
+    if (isNode && isWord(t, "critical")) {
+      parts.critical = true;
+      return 1;
+    }
+    return 0;
+  }
+  /** The color in `token`, a palette name or `#hex`, or undefined after reporting an error. */
+  readColor(token, after2, line) {
+    const choices = `${COLOR_NAMES.join(", ")}, or a hex value after color, like color #3b82f6`;
+    if (token?.kind !== "ident" && token?.kind !== "hex") {
+      this.error(`Expected a color after ${after2.value}: ${choices}`, this.locOf(token ?? after2, line));
+      return void 0;
+    }
+    const hex = resolveColor(token.value);
+    if (!hex) {
+      const suggestion = suggestColor(token.value);
+      this.error(`Unknown color '${token.value}'.${suggestion ? ` Did you mean '${suggestion}'?` : ""} Use ${choices}`, this.locOf(token, line));
+      return void 0;
+    }
+    return { name: token.value, hex };
+  }
+  applyStyle(node, parts) {
+    if (parts.color) {
+      node.color = parts.color.name;
+      node.style = { color: parts.color.hex };
+    }
+    if (parts.critical) node.critical = true;
+    if (parts.tag) {
+      node.tag = parts.tag.value;
+      this.tagRefs.push({ tag: parts.tag.value, loc: parts.tag.loc, target: node });
+    }
+  }
+  /** `owned "Owned by Order Fulfillment" green dashed`: an id, a label, then a color and a dash in any order. */
+  parseLegendLine(tokens, line) {
+    const [idToken] = tokens;
+    if (idToken.kind !== "ident") {
+      this.error('Expected a legend entry, e.g. owned "Owned by us" green', this.locOf(idToken, line));
+      return;
+    }
+    const loc = this.locOf(idToken, line);
+    const entry = { id: idToken.value, label: idToken.value, loc };
+    let i = 1;
+    if (tokens[i]?.kind === "string") entry.label = tokens[i++].value;
+    for (; i < tokens.length; i++) {
+      const t = tokens[i];
+      if (isWord(t, "dashed") || isWord(t, "dotted")) {
+        entry.dash = t.value;
+        continue;
+      }
+      if (t.kind === "ident") {
+        const keyword = t.value === "color";
+        const color = this.readColor(keyword ? tokens[i + 1] : t, t, line);
+        if (!color) return;
+        entry.colorName = color.name;
+        entry.color = color.hex;
+        if (keyword) i++;
+        continue;
+      }
+      this.error(`Unexpected ${describe(t)} in legend entry; expected a color, dashed or dotted`, this.locOf(t, line));
+      return;
+    }
+    const existing = this.legend.find((e) => e.id === entry.id);
+    if (existing) {
+      this.error(`Duplicate legend entry '${entry.id}' (first declared ${this.where(existing.loc, loc)})`, loc);
+      return;
+    }
+    this.legend.push(entry);
+  }
+  /** Applies each `.tag` once every file is read; an unknown tag is an error. An explicit `color` wins over the tag's (D4). */
+  resolveTags() {
+    const entries2 = new Map(this.legend.map((e) => [e.id, e]));
+    for (const ref of this.tagRefs) {
+      const entry = entries2.get(ref.tag);
+      if (!entry) {
+        const close = [...entries2.keys()].find((id) => editDistance2(id, ref.tag) <= 2);
+        const hint = close ? ` Did you mean '.${close}'?` : "";
+        this.error(`Unknown tag '.${ref.tag}'; add it to the legend, e.g. legend { ${ref.tag} "What it means" blue }.${hint}`, ref.loc);
+        continue;
+      }
+      const color = ref.target.style?.color ?? entry.color;
+      if (color || entry.dash) ref.target.style = { ...color ? { color } : {}, ...entry.dash ? { dash: entry.dash } : {} };
+    }
+  }
   /** `"Redirect" 100k rps mix "Cache hit" 90%, "Cache miss" 10%` */
   parseTrafficLine(tokens, line) {
     const [name, rate] = tokens;
@@ -17773,7 +18091,7 @@ function parseSize(text) {
   return { value };
 }
 function inferProtocol(isAsync, method, target) {
-  if (isAsync || target?.type === "queue") return "MESSAGING";
+  if (isAsync || target?.type === "queue" || target?.type === "broker") return "MESSAGING";
   if (!method) return "OTHER";
   switch (target?.techStack) {
     case "GraphQL":
@@ -17798,6 +18116,8 @@ function describe(token) {
       return `[${token.value}]`;
     case "team":
       return `@${token.value}`;
+    case "tag":
+      return `tag '.${token.value}'`;
     case "label":
       return "':'";
     case "lbrace":
@@ -17846,6 +18166,7 @@ var GENERIC_TECH2 = {
   search: "Search Engine",
   analytics: "Data Warehouse",
   queue: "Message Queue",
+  broker: "Message Broker",
   storage: "Object Storage",
   external: "Third Party API",
   other: "Service"
@@ -18533,7 +18854,7 @@ function stepAccess(step) {
   return step.access ?? accessOf(step.httpMethod, step.stepName ?? "");
 }
 function accessIn(diagram) {
-  const queues = new Set(diagram.nodes.filter((n) => kindOf(n) === "queue").map((n) => n.id));
+  const queues = new Set(diagram.nodes.filter((n) => kindMatches(kindOf(n), "queue")).map((n) => n.id));
   return (step) => queues.has(step.toServiceId) ? "write" : stepAccess(step);
 }
 
@@ -18552,6 +18873,7 @@ var RELATIONAL = {
   durable: true,
   consistency: "strong"
 };
+var QUEUE = { rps: 5e4, latencyMs: 5, availability: 0.9999, costUsd: 200, durable: true, consistency: "strong" };
 var KIND_PROFILES = {
   client: { ...NEUTRAL, bandwidthMBps: 10 },
   // A firewall or accelerator in front of everything else (WAF, Global Accelerator); `any edge` also selects the four below.
@@ -18567,7 +18889,9 @@ var KIND_PROFILES = {
   database: RELATIONAL,
   search: { rps: 3e3, latencyMs: 15, availability: 0.999, costUsd: 400, durable: true, consistency: "eventual" },
   analytics: { rps: 200, latencyMs: 500, availability: 0.999, costUsd: 300, durable: true, consistency: "eventual" },
-  queue: { rps: 5e4, latencyMs: 5, availability: 0.9999, costUsd: 200, durable: true, consistency: "strong" },
+  queue: QUEUE,
+  // Same numbers as a queue for now: both take a message and hand it on later.
+  broker: QUEUE,
   storage: { rps: 5e3, latencyMs: 30, availability: 0.9999, costUsd: 50, durable: true, consistency: "eventual" },
   external: { rps: 1e3, latencyMs: 200, availability: 0.999, costUsd: 0, durable: false },
   other: NEUTRAL
@@ -19210,8 +19534,10 @@ function overUseCases(run2, name, check, limit, anyWithoutTraffic = false) {
   return fail(failed.length === 1 ? failed[0].message : `${failed.map((c) => c.value ?? c.message).join("; ")} ${limit}`, failed[0].hint);
 }
 function unknownUseCase(run2, name) {
-  const known = run2.diagram.useCases.map((u) => `"${u.name}"`);
-  return { ...fail(`No use case named "${name}"`, known.length ? `Use one of ${known.join(", ")}` : 'Add a usecase "\u2026" { \u2026 } block'), missing: `use case ${name}` };
+  const lower = name.toLowerCase();
+  const near = run2.diagram.useCases.filter((u) => editDistance(u.name.toLowerCase(), lower) <= Math.max(1, Math.floor(name.length / 4)));
+  const hint = near.length ? `Use one of ${near.map((u) => quote2(u.name)).join(", ")}` : `Add usecase ${quote2(name)} { \u2026 }`;
+  return { ...fail(`No use case named ${quote2(name)}`, hint), missing: `use case ${name}` };
 }
 function saturatedOn(run2, ids, value, maxMs) {
   const n = [...new Set(ids)].map((id) => run2.nodes.get(id)).find((x) => !!x?.saturated);
@@ -20370,7 +20696,7 @@ function blockIssues(source2, cardIds) {
   return issues;
 }
 
-// ../frontend/src/practice/markdown.ts
+// ../frontend/src/practice/markdownReader.ts
 function safeHref(href) {
   const trimmed = href.trim();
   if (/^(https?:|mailto:)/i.test(trimmed) || /^[#./]/.test(trimmed)) return trimmed;
@@ -26278,7 +26604,7 @@ ${IMPORT_USAGE}`);
 }
 
 // src/cli.ts
-var VERSION2 = true ? "0.10.0" : "dev";
+var VERSION2 = true ? "0.11.0" : "dev";
 var USAGE = `Usage:
   proschi check [--strict] [--format text|github|json] [--openapi <node>=<spec>]... <file|dir>...
   proschi parse <file>