Fix timestamp and system operations display in linera-explorer. (#4664)

## Motivation

I am seeing errors in `linera-explorer` related to timestamps. With
those fixed, system operations are still displayed as "Undefined
operation".

Here's what I tried:
```
cargo run --bin linera net up
```
Then I pasted the exports, made a transfer from the admin chain to
another chain in my wallet, and started the service:
```
export LINERA_WALLET="/tmp/.tmpyTcUrm/wallet_0.json"
export LINERA_KEYSTORE="/tmp/.tmpyTcUrm/keystore_0.json"
export LINERA_STORAGE="rocksdb:/tmp/.tmpyTcUrm/client_0.db"
cargo run --bin linera -- wallet show
cargo run --bin linera -- transfer --from 9f2047e18cd35c7509fc118c1c1df6a88d936d450ac0c2ab4752b6cf51f81f1c --to 03479ab664451306a9bad6428f9b451527009c489fe21ade5e977411931d6942 0.1
cargo run --bin linera -- service --port 8080
```
In another tab the indexer:
```
cargo run --bin linera-indexer -- run-graph-ql
```
And in a fourth tab the explorer:
```
cd linera-explorer
npm run full
npm run serve
```
If I then open localhost:3000 in Firefox I get a CORS error; in Chromium
I get TypeErrors.

## Proposal

With Claude's help, fix timestamp handling and at least show that it is
a system operation.

We should improve this further, so that this can be viewed as a
transfer.

## Test Plan

I tried it locally:

<img width="2616" height="1543" alt="image"
src="https://github.com/user-attachments/assets/89c2fbe3-a66e-403f-b560-8f9e67efa451"
/>

## Release Plan

- These changes should be backported to `testnet_conway`.

## Links

- [reviewer
checklist](https://github.com/linera-io/linera-protocol/blob/main/CONTRIBUTING.md#reviewer-checklist)

Author: afck

linera-explorer/src/components/Block.vue

@@ -48,7 +48,7 @@ const incomingBundles = computed(() => getIncomingBundles(props.block.block.body
         </li>
         <li class="list-group-item d-flex justify-content-between">
           <span><strong>Timestamp</strong></span>
-          <span>{{ (new Date(block.block.header.timestamp/1000)).toLocaleString() }}</span>
+          <span>{{ (new Date(Number(block.block.header.timestamp)/1000)).toLocaleString() }}</span>
         </li>
         <li class="list-group-item d-flex justify-content-between">
           <span><strong>Signer</strong></span>

linera-explorer/src/components/Blocks.vue

@@ -28,7 +28,7 @@ defineProps<{blocks: ConfirmedBlock[]}>()
           <td :title="b.hash">
             <a @click="$root.route('block', [['block', b.hash]])" class="btn btn-link">{{ short_hash(b.hash) }}</a>
           </td>
-          <td>{{ (new Date(b.block.header.timestamp/1000)).toLocaleString() }}</td>
+          <td>{{ (new Date(Number(b.block.header.timestamp)/1000)).toLocaleString() }}</td>
           <td :title="b.block.header.authenticatedSigner">{{ b.block.header.authenticatedSigner }}</td>
           <td>{{ b.status }}</td>
           <td>{{ getIncomingBundles(b.block.body.transactionMetadata).length }}</td>

linera-explorer/src/components/Op.vue

@@ -5,45 +5,41 @@ defineProps<{op: any, id: string, index?: number}>()
 </script>
 
 <template>
-  <div v-if="op?.System">
-    <div v-if="op.System.Transfer">
-      <div class="card">
-        <div class="card-header">
-          <div class="card-title">
-            <span v-if="index!==undefined">{{ index+1 }}. </span>
-            <span>Transfer</span>
-          </div>
-        </div>
-        <div class="card-body d-flex justify-content-around">
-          <span>{{ op.System.Transfer.amount }}</span>
-          <i class="bi bi-arrow-right"></i>
-          <a :title="op.System.Transfer.recipient.Account.chain_id" @click="$root.route('blocks', [['chain', op.System.Transfer.recipient.Account.chain_id]])" class="btn btn-link">
-            {{ short_hash(op.System.Transfer.recipient.Account.chain_id) }}
-          </a>
-        </div>
-      </div>
-    </div>
-    <div v-else>
-      <div class="card">
-        <div class="card-header">
+  <div v-if="op?.operationType === 'System'">
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title">
           <span v-if="index!==undefined">{{ index+1 }}. </span>
-          <span>Operation</span>
+          <span>System Operation</span>
         </div>
-        <div class="card-body">
-          <Json :data="op"/>
+      </div>
+      <div class="card-body">
+        <div v-if="op.systemBytesHex" class="mb-3">
+          <strong>Operation Data (hex):</strong>
+          <pre class="mt-2 p-2 bg-light"><code>{{ op.systemBytesHex }}</code></pre>
         </div>
+        <Json :data="op"/>
       </div>
     </div>
   </div>
 
-  <div v-else-if="op?.User">
+  <div v-else-if="op?.operationType === 'User'">
     <div class="card">
       <div class="card-header">
         <span v-if="index!==undefined">{{ index+1 }}. </span>
-        <span>Application</span>
+        <span>User Operation</span>
+        <span v-if="op.applicationId" class="badge bg-secondary ms-2">{{ short_app_id(op.applicationId) }}</span>
       </div>
       <div class="card-body">
-        <pre><code>{{ op.User.bytes }}</code></pre>
+        <div v-if="op.applicationId" class="mb-2">
+          <strong>Application ID:</strong>
+          <span class="font-monospace">{{ op.applicationId }}</span>
+        </div>
+        <div v-if="op.userBytesHex" class="mb-3">
+          <strong>Operation Data (hex):</strong>
+          <pre class="mt-2 p-2 bg-light"><code>{{ op.userBytesHex }}</code></pre>
+        </div>
+        <Json :data="op"/>
       </div>
     </div>
   </div>
@@ -52,7 +48,14 @@ defineProps<{op: any, id: string, index?: number}>()
     <div class="card">
       <div class="card-header">
         <span v-if="index!==undefined">{{ index+1 }}. </span>
-        <span>Undefined operation</span>
+        <span>Unknown Operation</span>
+        <span v-if="op?.operationType" class="badge bg-warning ms-2">{{ op.operationType }}</span>
+      </div>
+      <div class="card-body">
+        <div class="alert alert-info">
+          <strong>Operation Type:</strong> {{ op?.operationType || 'Unknown' }}
+        </div>
+        <Json :data="op"/>
       </div>
     </div>
   </div>