viewers: complete coverage pass + emoji conventions

Three substantive fixes plus a one-line label fix:

(1) atomical-viewer was a stale placeholder ("we do not yet have a parser
    for Atomicals") even though ordpool-parser has had full Atomicals
    support including args, files, payload extraction for months. Now
    renders: operation label via ATOMICAL_OPERATION_LABELS (splat/split/
    custom-color for the single-letter ops), inline image preview for
    file attachments that have an image/* contentType, args key/value
    table and files table under showDetails, and CBOR payload size.

(2) inscription-viewer was missing three ord tags the parser already
    exposes:
    - tag 15 (note): the chisel.xyz-style inscriber-tool watermark.
      ord stores it but doesn't display; explorers should surface it.
    - tag 13 (rune commitment): little-endian u128 bytes that pin an
      inscription as a commitment for a rune etching. Rendered as hex
      with a tooltip; we don't map bytes back to a rune name because
      that requires walking forward to the etching tx.
    - tag 17 (properties): galleries + inscription-level title +
      traits. Properties is async (tag 19 compression may apply), so
      resolved via | async in the template. Gallery items link to the
      referenced inscription with the standard truncate helper.

(3) src20-viewer header said "Stamps". The viewer is for SRC-20
    specifically; STAMP / SRC-721 / SRC-101 are sibling protocols with
    their own viewers. Fixed to "SRC-20".

Emoji convention enforced: ◉ is reserved for ordinals (inscriptions),
▣ for runes. Stripped misuses from atomical, stamp, src721, src101,
labitbu, counterparty, and ots viewers. Cat-21 keeps its cat emoji.
The ATOMICAL_OPERATION_LABELS dictionary now drives the atomical
header text, no emoji.

Author: hans-crypto

frontend/src/app/components/_ordpool/digital-artifact-viewer/atomical-viewer/atomical-viewer.component.html

@@ -1,7 +1,58 @@
-  <strong>⚛ Atomical</strong><br>
-  @if (showDetails) { <br> }
+@if (_atomical) {
+  <strong>Atomical:</strong>
+  <span title="Operation code from the witness envelope">{{ operationLabel }}</span>
+  @if (operationLabel !== operation) {
+    <span class="smaller-text text-muted">(opcode <code>{{ operation }}</code>)</span>
+  }
+  <br>
 
-  This transaction reveals an Atomical!<br> 
-  Unfortunately, we do not yet have a parser for Atomicals.<br> 
-  If you can contribute, please send a <a href="https://github.com/ordpool-space/ordpool-parser" target="_blank">🧡 pull request (Github) to our repository</a>.
-  
+  @for (preview of filePreviews; track preview.file.name) {
+    @if (preview.isImage && preview.dataUri) {
+      <img [src]="preview.dataUri" [alt]="preview.file.name" class="atomical-preview mt-2">
+    }
+  }
+
+  @if (showDetails) {
+    @if (argEntries.length) {
+      <div class="mt-3">
+        <strong>Args</strong>
+        <table class="table table-borderless table-striped mt-2">
+          <tbody>
+            @for (entry of argEntries; track entry.key) {
+              <tr>
+                <td><code>{{ entry.key }}</code></td>
+                <td class="atomical-arg-value">{{ entry.value }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+
+    @if (files.length) {
+      <div class="mt-3">
+        <strong>Files</strong>
+        <table class="table table-borderless table-striped mt-2">
+          <tbody>
+            @for (file of files; track file.name) {
+              <tr>
+                <td><code>{{ file.name }}</code></td>
+                <td>{{ file.contentType }}</td>
+                <td class="text-end">{{ file.data.length | number }} bytes</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+
+    <table class="mt-3 table table-borderless table-striped w-50">
+      <tbody>
+        <tr>
+          <td>CBOR payload size</td>
+          <td>{{ payloadSize | number }} bytes</td>
+        </tr>
+      </tbody>
+    </table>
+  }
+}

frontend/src/app/components/_ordpool/digital-artifact-viewer/atomical-viewer/atomical-viewer.component.scss

@@ -0,0 +1,12 @@
+.atomical-preview {
+  max-width: 320px;
+  max-height: 320px;
+  image-rendering: pixelated;
+  background: #11132a;
+}
+
+.atomical-arg-value {
+  word-break: break-all;
+  font-family: monospace;
+  font-size: 0.85rem;
+}

frontend/src/app/components/_ordpool/digital-artifact-viewer/atomical-viewer/atomical-viewer.component.ts

@@ -1,31 +1,79 @@
+import { DecimalPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ParsedAtomical } from 'ordpool-parser';
+import { ATOMICAL_OPERATION_LABELS, AtomicalFile, AtomicalOperation, ParsedAtomical } from 'ordpool-parser';
 
 /**
  * Test cases:
- * https://ordpool.space/tx/1d2f39f54320631d0432fa495a45a4f298a2ca1b18adef8e4356e327d003a694 (etching Z•Z•Z•Z•Z•FEHU•Z•Z•Z•Z•Z)
+ * https://ordpool.space/tx/1d2f39f54320631d0432fa495a45a4f298a2ca1b18adef8e4356e327d003a694 (dft "atom")
+ * https://ordpool.space/tx/d8c96e3920f15dfbca4bcb3a3b2fce214484cb913fdca3055dd0f7069387edd3 (nft realm "terafab")
+ * https://ordpool.space/tx/7c8527547cc99b39f9d02fa2e8d963d78a3d60692a05ad378a87b96abed4aab6 (nft toothy #7579, with embedded PNG)
+ * https://ordpool.space/tx/5390e86df98982122175e18a7f24a1618d14e50e0b2242c7ca2c27730ffad700 (dmt mint of "atom")
+ * https://ordpool.space/tx/329a9fae404e4ca014b975dbcc7cb5267f47cccd2851a45ffa06c70744ae12cd (splat / x)
+ * https://ordpool.space/tx/054cc18a8162887917a1e6e5c60389bb4b6647167e6936d231466d7b2710f413 (split / y)
+ * https://ordpool.space/tx/914a3f3575a1da92035a57bd758da8588fd11776927ab880915f97e66612f773 (custom-color / z)
  */
 @Component({
   selector: 'app-atomical-viewer',
   templateUrl: './atomical-viewer.component.html',
   styleUrls: ['./atomical-viewer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true
+  standalone: true,
+  imports: [DecimalPipe],
 })
 export class AtomicalViewerComponent {
 
-  private _atomical: ParsedAtomical | undefined;
+  _atomical: ParsedAtomical | undefined;
+  operation: AtomicalOperation | undefined;
+  operationLabel = '';
+  argEntries: { key: string; value: string }[] = [];
+  files: AtomicalFile[] = [];
+  filePreviews: { file: AtomicalFile; isImage: boolean; dataUri: string | undefined }[] = [];
+  payloadSize = 0;
 
   @Input() showDetails = false;
 
   @Input()
-  public set parsedAtomical(parsedAtomical: ParsedAtomical | undefined) {
-
-    // early exit if setter is called multiple times (don't remove!)
+  set parsedAtomical(parsedAtomical: ParsedAtomical | undefined) {
     if (this._atomical?.uniqueId === parsedAtomical?.uniqueId) {
       return;
     }
-
     this._atomical = parsedAtomical;
+    if (!parsedAtomical) {
+      this.operation = undefined;
+      this.operationLabel = '';
+      this.argEntries = [];
+      this.files = [];
+      this.filePreviews = [];
+      this.payloadSize = 0;
+      return;
+    }
+    this.operation = parsedAtomical.operation;
+    this.operationLabel = ATOMICAL_OPERATION_LABELS[parsedAtomical.operation] ?? parsedAtomical.operation;
+    this.payloadSize = parsedAtomical.getPayloadRaw().length;
+
+    const args = parsedAtomical.getArgs();
+    this.argEntries = args
+      ? Object.entries(args).map(([key, value]) => ({ key, value: formatArgValue(value) }))
+      : [];
+
+    this.files = parsedAtomical.getFiles();
+    this.filePreviews = this.files.map(file => {
+      const isImage = file.contentType.startsWith('image/');
+      return { file, isImage, dataUri: isImage ? file.getDataUri() : undefined };
+    });
+  }
+}
+
+function formatArgValue(value: unknown): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') return String(value);
+  // Uint8Array / objects: stringify as JSON. Show byte arrays as hex preview.
+  if (value instanceof Uint8Array) {
+    const preview = Array.from(value.slice(0, 32))
+      .map(b => b.toString(16).padStart(2, '0'))
+      .join('');
+    return value.length <= 32 ? preview : `${preview}... (${value.length} bytes)`;
   }
+  try { return JSON.stringify(value); } catch { return String(value); }
 }

frontend/src/app/components/_ordpool/digital-artifact-viewer/counterparty-viewer/counterparty-viewer.component.html

@@ -1,5 +1,5 @@
 @if (_parsed) {
-  <strong>◉ Counterparty:</strong>
+  <strong>Counterparty:</strong>
   <span title="Counterparty message type">{{ _parsed.messageType }}</span>
   <span class="smaller-text text-muted">(id&nbsp;{{ _parsed.messageTypeId }})</span>
   <br>

frontend/src/app/components/_ordpool/digital-artifact-viewer/inscription-viewer/inscription-viewer.component.html

@@ -99,6 +99,55 @@
       Content Encoding: {{ contentEncoding }}
     </div>
 
+    <div class="mt-2" *ngIf="showDetails && note">
+      Note (tag 15):
+      <code class="smaller-text">{{ note }}</code>
+      <fa-icon class="ml-1 smaller-text" [icon]="['fas', 'info-circle']" [fixedWidth]="true"
+        ngbTooltip="Tag::Note in ord (PR #3256). Stored but not displayed by the reference indexer. chisel.xyz uses it for an inscriber-tool watermark URL."
+      ></fa-icon>
+    </div>
+
+    <div class="mt-2" *ngIf="showDetails && runeCommitmentHex">
+      Rune commitment (tag 13):
+      <code class="smaller-text">{{ runeCommitmentHex }}</code>
+      <fa-icon class="ml-1 smaller-text" [icon]="['fas', 'info-circle']" [fixedWidth]="true"
+        ngbTooltip="Little-endian bytes of the rune's u128 value with trailing zeros stripped. Used by the rune protocol to commit to an etching from inside an inscription; the etching tx must spend this inscription's UTXO."
+      ></fa-icon>
+    </div>
+
+    <ng-container *ngIf="showDetails && properties$ && (properties$ | async) as properties">
+      <div class="mt-3" *ngIf="properties.title || properties.traits">
+        <strong>Properties (tag 17)</strong>
+        <table class="mt-2 table table-borderless table-striped">
+          <tbody>
+            <tr *ngIf="properties.title">
+              <td>Title</td>
+              <td>{{ properties.title }}</td>
+            </tr>
+            <tr *ngFor="let trait of properties.traits | keyvalue">
+              <td><code>{{ trait.key }}</code></td>
+              <td>{{ trait.value }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-3" *ngIf="properties.gallery && properties.gallery.length">
+        <strong>Gallery ({{ properties.gallery.length }})</strong>
+        <fa-icon class="ml-1 smaller-text" [icon]="['fas', 'info-circle']" [fixedWidth]="true"
+          ngbTooltip="A curated list of inscription IDs referenced from this inscription's tag 17. Galleries are permissionless -- inclusion does NOT imply provenance."
+        ></fa-icon>
+        <ol class="smaller-text mt-2">
+          <li *ngFor="let item of properties.gallery" class="mb-1">
+            <a class="address" [routerLink]="['/tx/' | relativeUrl, item.inscriptionId.split('i')[0]]" title="{{ item.inscriptionId }}">
+              <app-truncate [text]="item.inscriptionId" [lastChars]="10"></app-truncate>
+            </a>
+            <span *ngIf="item.title" class="ml-2">{{ item.title }}</span>
+          </li>
+        </ol>
+      </div>
+    </ng-container>
+
     <table class="mt-2 table table-borderless table-striped w-50" *ngIf="showDetails">
       <tbody>
         <tr>

frontend/src/app/components/_ordpool/digital-artifact-viewer/inscription-viewer/inscription-viewer.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input } from '@angular/core';
-import { DecodeFailureReason, InscriptionParserService, InscriptionPreviewService, ParsedInscription } from 'ordpool-parser';
+import { DecodeFailureReason, InscriptionParserService, InscriptionPreviewService, InscriptionProperties, ParsedInscription } from 'ordpool-parser';
 import { map, Observable } from 'rxjs';
 
 import { ElectrsApiService } from '../../../../services/electrs-api.service';
@@ -44,6 +44,23 @@ export class InscriptionViewerComponent {
     reason?: DecodeFailureReason,
   }> | undefined;
 
+  // Tag 15 (note): chisel.xyz-style inscriber-tool watermark string. ord stores
+  // but doesn't display it; we surface it so explorers can flag inscriber
+  // attribution.
+  note: string | undefined;
+
+  // Tag 13 (rune commitment): little-endian bytes of a rune's u128 value.
+  // Displayed as hex; explained in a tooltip rather than turned into the
+  // human-readable rune name, because mapping bytes -> name requires the
+  // etching tx (which our parser can't cheaply find from the inscription
+  // side alone). Hex is the honest minimum.
+  runeCommitmentHex: string | undefined;
+
+  // Tag 17 (properties): galleries + inscription-level title + traits.
+  // Resolved async; properties may be compressed (tag 19) so the parser's
+  // getProperties is also async.
+  properties$: Promise<InscriptionProperties | undefined> | undefined;
+
   @Input() showDetails = false;
 
   @Input()
@@ -58,9 +75,19 @@ export class InscriptionViewerComponent {
 
     if (!inscription) {
       this.contentTypeInstructions$ = undefined;
+      this.note = undefined;
+      this.runeCommitmentHex = undefined;
+      this.properties$ = undefined;
       return;
     }
 
+    this.note = inscription.getNote();
+
+    const rune = inscription.getRune();
+    this.runeCommitmentHex = rune ? bytesToHex(rune) : undefined;
+
+    this.properties$ = inscription.getProperties();
+
     this.delegates = inscription.getDelegates();
     if (this.delegates.length) {
 
@@ -81,3 +108,11 @@ export class InscriptionViewerComponent {
     this.contentTypeInstructions$ = InscriptionPreviewService.getContentTypeInstructions(inscription);
   }
 }
+
+function bytesToHex(bytes: Uint8Array): string {
+  let out = '';
+  for (let i = 0; i < bytes.length; i++) {
+    out += bytes[i].toString(16).padStart(2, '0');
+  }
+  return out;
+}

frontend/src/app/components/_ordpool/digital-artifact-viewer/labitbu-viewer/labitbu-viewer.component.html

@@ -1,5 +1,5 @@
 @if (_parsed && dataUri) {
-  <strong>◉ Labitbu:</strong>
+  <strong>Labitbu:</strong>
   <span class="smaller-text">image/webp</span>
   <br>
   <img [src]="dataUri" alt="Labitbu image" class="labitbu-preview mt-2">

frontend/src/app/components/_ordpool/digital-artifact-viewer/ots-viewer/ots-viewer.component.html

@@ -1,6 +1,6 @@
 @if (loaded && row) {
   <div class="ots-panel">
-    <strong>◉ OpenTimestamps:</strong>
+    <strong>OpenTimestamps:</strong>
     <span title="Calendar that broadcast this commit">{{ row.calendar }}</span>
     @if (row.confirmedAt) {
       <span class="badge confirmed">confirmed</span>

frontend/src/app/components/_ordpool/digital-artifact-viewer/src101-viewer/src101-viewer.component.html

@@ -1,4 +1,4 @@
-<strong>◉ SRC-101:</strong>
+<strong>SRC-101:</strong>
 <span class="smaller-text">Bitname registry on Bitcoin Stamps</span>
 @if (json) {
   <app-json-viewer [text]="json" />

frontend/src/app/components/_ordpool/digital-artifact-viewer/src20-viewer/src20-viewer.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="json">
 
-  <strong>Stamps</strong><br>
+  <strong>SRC-20</strong><br>
   <br *ngIf="showDetails">
 
   <app-json-viewer [text]="json" />