archrip 0.1.11 → 0.2.1

package/dist/viewer-template/src/components/DetailPanel.tsx

@@ -1,4 +1,4 @@
-import type { ArchNodeData, UseCase } from '../types.ts';
+import type { ArchNodeData, UseCase, MetadataEntry } from '../types.ts';
 import { getCategoryColors, getCategoryLabel, isGroupNode } from '../types.ts';
 
 interface DetailPanelProps {
@@ -287,6 +287,13 @@ export function DetailPanel({ data, useCases, onClose, onUseCaseClick }: DetailP
               </Section>
             )}
 
+            {/* Metadata */}
+            {data.metadata && data.metadata.length > 0 && data.metadata.map((entry, i) => (
+              <Section key={i} title={entry.label}>
+                <MetadataValue entry={entry} />
+              </Section>
+            ))}
+
             {/* Use Cases */}
             {data.useCases.length > 0 && (
               <Section title="Use Cases">
@@ -337,3 +344,58 @@ function methodColor(method: string): string {
     default: return '';
   }
 }
+
+function isSafeUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+function MetadataValue({ entry }: { entry: MetadataEntry }) {
+  const type = entry.type ?? 'text';
+
+  if (type === 'code') {
+    return (
+      <pre
+        className="p-2 rounded text-xs overflow-x-auto whitespace-pre-wrap"
+        style={{ background: 'var(--color-surface-secondary)', color: 'var(--color-content-secondary)' }}
+      >
+        {String(entry.value)}
+      </pre>
+    );
+  }
+
+  if (type === 'link') {
+    const url = String(entry.value);
+    if (!isSafeUrl(url)) {
+      return <span style={{ color: 'var(--color-content-secondary)' }}>{url}</span>;
+    }
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline break-all text-xs"
+        style={{ color: 'var(--color-interactive-primary)' }}
+      >
+        {url}
+      </a>
+    );
+  }
+
+  if (type === 'list' && Array.isArray(entry.value)) {
+    return (
+      <ul className="text-xs space-y-0.5 list-disc list-inside" style={{ color: 'var(--color-content-secondary)' }}>
+        {entry.value.map((item, i) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    );
+  }
+
+  // text (default)
+  return <p style={{ color: 'var(--color-content-secondary)' }}>{String(entry.value)}</p>;
+}

package/dist/viewer-template/src/data/loader.ts

@@ -1,5 +1,5 @@
 import type { Edge } from '@xyflow/react';
-import type { ArchFlowNode, ArchNodeData, UseCase, TableSchema, DepthLevel } from '../types.ts';
+import type { ArchFlowNode, ArchNodeData, UseCase, TableSchema, DepthLevel, MetadataEntry } from '../types.ts';
 import { computeDepths } from '../types.ts';
 
 interface RawArchData {
@@ -34,6 +34,7 @@ interface RawNode {
   externalService?: string;
   sqlExamples?: string[];
   depth?: number;
+  metadata?: MetadataEntry[];
 }
 
 interface RawEdge {
@@ -41,6 +42,8 @@ interface RawEdge {
   target: string;
   label?: string | null;
   type?: string;
+  description?: string;
+  metadata?: MetadataEntry[];
 }
 
 interface RawUseCase {
@@ -118,6 +121,7 @@ export async function loadArchitecture(): Promise<LoadedArchitecture> {
       implements: n.implements,
       externalService: n.externalService,
       sqlExamples: n.sqlExamples,
+      metadata: n.metadata,
     };
 
     return {
@@ -136,6 +140,7 @@ export async function loadArchitecture(): Promise<LoadedArchitecture> {
     label: e.label ?? undefined,
     style: { stroke: 'var(--color-edge-stroke)', strokeWidth: 1.5 },
     type: 'smoothstep',
+    data: { description: e.description, metadata: e.metadata },
   }));
 
   // Convert use cases

package/dist/viewer-template/src/types.ts

@@ -119,6 +119,13 @@ export interface TableSchema {
   enumValues?: Record<string, Record<string, string>>;
 }
 
+// Keep in sync with packages/cli/src/utils/validate.ts (MetadataEntry)
+export interface MetadataEntry {
+  label: string;
+  value: string | string[];
+  type?: 'text' | 'code' | 'link' | 'list';
+}
+
 export interface MemberNodeSummary {
   id: string;
   label: string;
@@ -143,6 +150,7 @@ export interface ArchNodeData {
   routes?: string[];
   implements?: string;
   externalService?: string;
+  metadata?: MetadataEntry[];
   isGroup?: boolean;
   memberCount?: number;
   memberNodes?: MemberNodeSummary[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "archrip",
-  "version": "0.1.11",
+  "version": "0.2.1",
   "description": "Generate interactive architecture diagrams from your codebase using AI agents",
   "type": "module",
   "bin": {