From ff6386c6da244736f4cc20731df67ead16471de8 Mon Sep 17 00:00:00 2001
From: KinomotoMio <200703522+KinomotoMio@users.noreply.github.com>
Date: Thu, 30 Jul 2026 00:24:10 +0800
Subject: [PATCH] feat(renderer): add bounded session image element

---
 .../src/components/SessionImage.ce.vue        | 94 +++++++++++++++++++
 app/src/renderer/src/main.js                  |  3 +
 app/src/renderer/src/session-image-element.js |  9 ++
 3 files changed, 106 insertions(+)
 create mode 100644 app/src/renderer/src/components/SessionImage.ce.vue
 create mode 100644 app/src/renderer/src/session-image-element.js

diff --git a/app/src/renderer/src/components/SessionImage.ce.vue b/app/src/renderer/src/components/SessionImage.ce.vue
new file mode 100644
index 0000000..ea54e17
--- /dev/null
+++ b/app/src/renderer/src/components/SessionImage.ce.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'SessionImage' });
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  title: { type: String, default: '' },
+});
+
+const status = ref('loading');
+const accessibleLabel = computed(() => props.alt || props.title || 'Session image');
+
+function handleLoad() {
+  status.value = 'loaded';
+}
+
+function handleError() {
+  status.value = 'error';
+}
+</script>
+
+<template>
+  <figure
+    class="session-image"
+    :class="`is-${status}`"
+    :aria-busy="status === 'loading' ? 'true' : undefined"
+  >
+    <img
+      v-if="status !== 'error'"
+      :src="src"
+      :alt="alt"
+      :title="title || undefined"
+      loading="lazy"
+      decoding="async"
+      @load="handleLoad"
+      @error="handleError"
+    >
+    <figcaption v-else role="status">
+      <span>Image unavailable</span>
+      <span v-if="accessibleLabel" class="image-label">{{ accessibleLabel }}</span>
+    </figcaption>
+  </figure>
+</template>
+
+<style>
+:host {
+  display: block;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0.7em 0;
+  contain: inline-size;
+}
+
+.session-image {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  overflow: clip;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.22);
+}
+
+img {
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+  block-size: auto;
+  max-block-size: min(70vh, 720px);
+  object-fit: contain;
+  color: rgba(255, 255, 255, 0.48);
+}
+
+.is-loading {
+  min-block-size: 48px;
+}
+
+figcaption {
+  display: flex;
+  min-block-size: 48px;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  color: rgba(255, 255, 255, 0.48);
+  font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
+}
+
+.image-label::before {
+  content: '·';
+  margin-inline-end: 6px;
+}
+</style>
diff --git a/app/src/renderer/src/main.js b/app/src/renderer/src/main.js
index 51b05a1..a564358 100644
--- a/app/src/renderer/src/main.js
+++ b/app/src/renderer/src/main.js
@@ -6,6 +6,7 @@ import router from './router.js';
 import { commitInitialData, fetchInitialData } from './data.js';
 import { noteSessionUpdated, sessionLiveState } from './session-live.mjs';
 import { createGlobalDataRefreshCoordinator } from './session-global-refresh.mjs';
+import { registerSessionImageElement } from './session-image-element.js';
 
 // Import shared renderer CSS globally
 import '../styles/base.css';
@@ -14,6 +15,8 @@ import '../styles/toolbar.css';
 import '../styles/list.css';
 import '../styles/detail.css';
 
+registerSessionImageElement();
+
 const app = createApp(App);
 
 app.use(router);
diff --git a/app/src/renderer/src/session-image-element.js b/app/src/renderer/src/session-image-element.js
new file mode 100644
index 0000000..f365952
--- /dev/null
+++ b/app/src/renderer/src/session-image-element.js
@@ -0,0 +1,9 @@
+import { defineCustomElement } from 'vue';
+import SessionImage from './components/SessionImage.ce.vue';
+
+export const SESSION_IMAGE_TAG = 'obelisk-session-image';
+
+export function registerSessionImageElement() {
+  if (customElements.get(SESSION_IMAGE_TAG)) return;
+  customElements.define(SESSION_IMAGE_TAG, defineCustomElement(SessionImage));
+}