@dualityinstitute/blink 0.0.3 → 0.0.4

package/dist/electron/preload.cjs

@@ -27,6 +27,13 @@ var CHANNEL_PRESENTER_DISMISS = "blink:presenter-dismiss";
 var CHANNEL_PRESENTER_SET_PRIVACY = "blink:presenter-set-privacy";
 var CHANNEL_PRESENTER_PRIVACY_CHANGED = "blink:presenter-privacy-changed";
 var CHANNEL_PRESENTER_SCROLL = "blink:presenter-scroll";
+var CHANNEL_SETTINGS_LOAD_PROMPTS = "blink:settings-load-prompts";
+var CHANNEL_SETTINGS_SAVE_PROMPTS = "blink:settings-save-prompts";
+var CHANNEL_SETTINGS_LOAD_ANSWERS = "blink:settings-load-answers";
+var CHANNEL_SETTINGS_DISMISS = "blink:settings-dismiss";
+var CHANNEL_SETTINGS_LOAD_TRANSCRIPTS = "blink:settings-load-transcripts";
+var CHANNEL_SETTINGS_READ_TRANSCRIPT = "blink:settings-read-transcript";
+var CHANNEL_SETTINGS_SHOW_TAB = "blink:settings-show-tab";
 
 // src/electron/preload.ts
 function subscribe(channel, callback) {
@@ -111,5 +118,29 @@ var presenterAPI = {
     subscribe(CHANNEL_PRESENTER_SCROLL, callback);
   }
 };
+var settingsAPI = {
+  loadPrompts() {
+    return import_electron.ipcRenderer.invoke(CHANNEL_SETTINGS_LOAD_PROMPTS);
+  },
+  savePrompts(prompts) {
+    return import_electron.ipcRenderer.invoke(CHANNEL_SETTINGS_SAVE_PROMPTS, prompts);
+  },
+  loadAnswers() {
+    return import_electron.ipcRenderer.invoke(CHANNEL_SETTINGS_LOAD_ANSWERS);
+  },
+  loadTranscripts(query) {
+    return import_electron.ipcRenderer.invoke(CHANNEL_SETTINGS_LOAD_TRANSCRIPTS, query);
+  },
+  readTranscript(file) {
+    return import_electron.ipcRenderer.invoke(CHANNEL_SETTINGS_READ_TRANSCRIPT, file);
+  },
+  dismiss() {
+    import_electron.ipcRenderer.send(CHANNEL_SETTINGS_DISMISS);
+  },
+  onShowTab(callback) {
+    subscribe(CHANNEL_SETTINGS_SHOW_TAB, callback);
+  }
+};
 import_electron.contextBridge.exposeInMainWorld("blink", blinkAPI);
 import_electron.contextBridge.exposeInMainWorld("presenter", presenterAPI);
+import_electron.contextBridge.exposeInMainWorld("settings", settingsAPI);

package/dist/electron/renderer/popup.css

@@ -215,6 +215,23 @@ body {
   border-color: color-mix(in srgb, var(--fg) 24%, transparent);
 }
 
+.meeting-control.is-live {
+  color: #fff;
+  background: var(--leave-bg, #c0392b);
+  border-color: color-mix(in srgb, #c0392b 70%, #000);
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+}
+
+.meeting-control.is-live:hover {
+  background: color-mix(in srgb, #c0392b 85%, #fff);
+}
+
+.meeting-control.is-live .meeting-indicator {
+  background: #fff;
+  border-color: #fff;
+}
+
 .meeting-control.is-meeting .meeting-indicator {
   background: currentColor;
 }
@@ -242,6 +259,46 @@ body {
   outline-offset: 2px;
 }
 
+.runtime-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 6px 12px 0 12px;
+  padding: 8px 10px;
+  border: 1px solid rgba(200, 60, 60, 0.35);
+  border-radius: 8px;
+  background: rgba(200, 60, 60, 0.12);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.runtime-error[hidden] {
+  display: none;
+}
+
+.runtime-error-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: #ffd9d9;
+}
+
+.runtime-error-close {
+  flex: none;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: #ffd9d9;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.runtime-error-close:hover {
+  opacity: 1;
+}
+
 .response-context {
   display: flex;
   align-items: center;
@@ -395,35 +452,90 @@ body {
   opacity: 0.45;
 }
 
+.workspace {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .transcript-panel {
-  flex: 0 0 auto;
-  max-height: 74px;
-  overflow-y: auto;
-  padding: 6px 14px 7px 16px;
-  border-bottom: 1px solid var(--divider);
+  display: flex;
+  flex-direction: column;
+  /* Shrinks below its 400px basis only when the window is too narrow to hold
+     both panes, so dragging the popup small never hides the answer entirely. */
+  flex: 0 1 400px;
+  width: 400px;
+  min-width: 200px;
+  border-right: 1px solid var(--divider);
   background: color-mix(in srgb, var(--bg-strong) 12%, transparent);
   font-size: 11.5px;
   line-height: 1.35;
+}
+
+.transcript-panel[hidden] {
+  display: none;
+}
+
+.transcript-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 12px 6px 16px;
+  border-bottom: 1px solid var(--divider);
+}
+
+.transcript-heading-label {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-subtle);
+}
+
+.transcript-count {
+  font-size: 9.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-subtle);
+}
+
+.transcript-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 12px 10px 16px;
   user-select: text;
   -webkit-user-select: text;
   scrollbar-width: thin;
   scrollbar-color: var(--fg-subtle) transparent;
 }
 
-.transcript-panel::-webkit-scrollbar {
+.transcript-scroll::-webkit-scrollbar {
   width: 5px;
 }
 
-.transcript-panel::-webkit-scrollbar-thumb {
+.transcript-scroll::-webkit-scrollbar-thumb {
   background: var(--fg-subtle);
   border-radius: 3px;
   opacity: 0.4;
 }
 
+/* Placeholder lives in CSS so an empty transcript needs no throwaway DOM node. */
+.transcript-lines.is-empty::before {
+  content: "Waiting for speech…";
+  color: var(--fg-subtle);
+  font-style: italic;
+}
+
 .transcript-line {
   display: flex;
-  gap: 6px;
-  margin: 1px 0;
+  flex-direction: column;
+  gap: 1px;
+  margin: 0 0 7px;
+}
+
+.transcript-line.is-partial .transcript-text {
+  color: var(--fg-subtle);
 }
 
 .transcript-speaker {
@@ -451,11 +563,6 @@ body {
   overflow-wrap: break-word;
 }
 
-.transcript-empty {
-  color: var(--fg-subtle);
-  font-style: italic;
-}
-
 .pill.reconciled-pill {
   background: var(--pill-reconciled-bg);
   color: var(--pill-reconciled-fg);
@@ -543,8 +650,11 @@ body {
 
 .card-body {
   position: relative;
-  flex: 1 1 auto;
+  /* The floor is what forces a narrowed window to shrink the transcript column
+     first; without it the answer silently collapses to an unusable sliver. */
+  flex: 1 1 0;
   min-height: 0;
+  min-width: 280px;
   overflow-y: auto;
   padding: 12px 14px 14px 14px;
   scrollbar-width: thin;

package/dist/electron/renderer/popup.html

@@ -68,6 +68,11 @@
         </div>
       </header>
 
+      <div class="runtime-error" id="runtime-error" hidden role="alert">
+        <span class="runtime-error-text" id="runtime-error-text"></span>
+        <button type="button" class="runtime-error-close" id="runtime-error-close" aria-label="Dismiss">×</button>
+      </div>
+
       <div class="response-context">
         <div class="source" id="source">
           <span class="source-label">Ready for a screenshot</span>
@@ -108,14 +113,22 @@
         >Ask</button>
       </div>
 
-      <div
+      <div class="workspace" id="workspace">
+      <aside
         class="transcript-panel"
         id="transcript-panel"
         aria-label="Live meeting transcript"
         hidden
       >
-        <div class="transcript-lines" id="transcript-lines"></div>
-      </div>
+        <div class="transcript-heading">
+          <span class="transcript-heading-label">Live transcript</span>
+          <span class="transcript-count" id="transcript-count"></span>
+        </div>
+        <div class="transcript-scroll" id="transcript-scroll">
+          <div class="transcript-lines" id="transcript-lines"></div>
+          <div class="transcript-volatile" id="transcript-volatile"></div>
+        </div>
+      </aside>
 
       <section class="card-body" id="body">
         <div class="answering" id="answering" hidden>
@@ -135,6 +148,7 @@
           <div class="error-message" id="error-message"></div>
         </div>
       </section>
+      </div>
     </main>
     <script src="./popup.js"></script>
   </body>

package/dist/electron/renderer/popup.js

@@ -3736,10 +3736,9 @@ var state = {
   meeting: false,
   meetingStarting: false,
   meetingAsking: false,
-  transcriptAvailable: false,
   screenshotCount: 0,
   showTranscript: true,
-  transcriptLines: []
+  meetingStartedAt: null
 };
 function el(id) {
   const node = document.getElementById(id);
@@ -3762,7 +3761,10 @@ var dom = {
   askMeeting: el("ask-meeting"),
   transcriptToggle: el("transcript-toggle"),
   transcriptPanel: el("transcript-panel"),
+  transcriptScroll: el("transcript-scroll"),
   transcriptLines: el("transcript-lines"),
+  transcriptVolatile: el("transcript-volatile"),
+  transcriptCount: el("transcript-count"),
   privacy: el("privacy"),
   privacyLabel: el("privacy-label"),
   usagePill: el("usage-pill"),
@@ -3775,6 +3777,9 @@ var dom = {
   answer: el("answer"),
   error: el("error"),
   errorMessage: el("error-message"),
+  runtimeError: el("runtime-error"),
+  runtimeErrorText: el("runtime-error-text"),
+  runtimeErrorClose: el("runtime-error-close"),
   body: el("body")
 };
 function setState(next) {
@@ -3823,73 +3828,134 @@ function updateMonitoring(payload) {
   dom.monitoringControl.classList.toggle("is-starting", payload.monitoringStarting);
   dom.monitoringControl.setAttribute("aria-busy", payload.monitoringStarting ? "true" : "false");
 }
+var transcriptRows = new Map;
 function renderTranscript() {
   const expanded = state.showTranscript;
   dom.transcriptToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-  dom.transcriptPanel.hidden = !state.meeting || !expanded;
-  if (dom.transcriptPanel.hidden)
-    return;
-  if (state.transcriptLines.length === 0) {
-    const empty = document.createElement("div");
-    empty.className = "transcript-empty";
-    empty.textContent = "Waiting for speech…";
-    dom.transcriptLines.replaceChildren(empty);
-    return;
-  }
-  const rows = state.transcriptLines.map((line) => {
-    const row = document.createElement("div");
-    row.className = "transcript-line";
-    const speaker = document.createElement("span");
-    speaker.className = `transcript-speaker is-${line.speaker}`;
-    speaker.textContent = line.speaker === "them" ? "Them" : "You";
-    const text2 = document.createElement("span");
-    text2.className = "transcript-text";
-    text2.textContent = line.text;
-    row.append(speaker, text2);
-    return row;
-  });
-  dom.transcriptLines.replaceChildren(...rows);
-  pinTranscriptToBottom();
+  const visible = state.meeting && expanded;
+  dom.transcriptPanel.hidden = !visible;
+  dom.root.classList.toggle("has-transcript", visible);
+  updateTranscriptPlaceholder();
+}
+function buildTranscriptRow(line) {
+  const row = document.createElement("div");
+  row.className = "transcript-line";
+  const speaker = document.createElement("span");
+  speaker.className = `transcript-speaker is-${line.speaker}`;
+  speaker.textContent = line.speaker === "them" ? "Them" : "You";
+  const text2 = document.createElement("span");
+  text2.className = "transcript-text";
+  text2.textContent = line.text;
+  row.append(speaker, text2);
+  return row;
+}
+function setRowText(row, text2) {
+  const node = row.querySelector(".transcript-text");
+  if (node !== null)
+    node.textContent = text2;
+}
+function updateTranscriptPlaceholder() {
+  const empty = transcriptRows.size === 0 && dom.transcriptVolatile.childElementCount === 0;
+  dom.transcriptLines.classList.toggle("is-empty", empty);
+  dom.transcriptCount.textContent = transcriptRows.size === 0 ? "" : String(transcriptRows.size);
+}
+function isTranscriptAtBottom() {
+  const node = dom.transcriptScroll;
+  return node.scrollHeight - node.scrollTop - node.clientHeight < 40;
 }
 function pinTranscriptToBottom() {
-  dom.transcriptPanel.scrollTop = dom.transcriptPanel.scrollHeight;
+  dom.transcriptScroll.scrollTop = dom.transcriptScroll.scrollHeight;
 }
 function onTranscriptUpdate(payload) {
-  state.transcriptLines = Array.isArray(payload.lines) ? payload.lines : [];
-  renderTranscript();
+  if (payload.reset === true) {
+    transcriptRows.clear();
+    dom.transcriptLines.replaceChildren();
+    dom.transcriptVolatile.replaceChildren();
+  }
+  const follow = isTranscriptAtBottom();
+  for (const line of payload.changed ?? []) {
+    const existing = transcriptRows.get(line.id);
+    if (existing !== undefined) {
+      setRowText(existing, line.text);
+      continue;
+    }
+    const row = buildTranscriptRow(line);
+    transcriptRows.set(line.id, row);
+    dom.transcriptLines.append(row);
+  }
+  dom.transcriptVolatile.replaceChildren(...(payload.volatile ?? []).map((line) => {
+    const row = buildTranscriptRow(line);
+    row.classList.add("is-partial");
+    return row;
+  }));
+  updateTranscriptPlaceholder();
+  if (follow)
+    pinTranscriptToBottom();
+}
+function clearMeetingAnswer() {
+  const label = document.createElement("span");
+  label.className = "source-label";
+  label.textContent = "Ready for a screenshot";
+  dom.source.replaceChildren(label);
+  delete dom.source.dataset["source"];
+  dom.answer.replaceChildren();
+  dom.errorMessage.textContent = "";
+  state.streamBuffer = "";
+  setReconciled(false);
+  setStopped(false);
+  setState("idle");
 }
 function updateMeeting(payload) {
+  const wasMeeting = state.meeting;
   state.meeting = payload.meeting;
   state.meetingStarting = payload.meetingStarting;
   state.meetingAsking = payload.asking;
-  state.transcriptAvailable = payload.transcriptAvailable;
   state.screenshotCount = Math.max(0, Math.floor(payload.screenshotCount));
   state.showTranscript = payload.showTranscript;
   renderTranscript();
+  state.meetingStartedAt = payload.startedAt ?? null;
   const active = payload.meeting || payload.meetingStarting;
   dom.meeting.checked = active;
   dom.meeting.disabled = payload.meetingStarting;
-  dom.meetingLabel.textContent = payload.meetingStarting ? "Starting…" : "Meeting";
   dom.meetingControl.classList.toggle("is-meeting", active);
+  dom.meetingControl.classList.toggle("is-live", payload.meeting);
+  dom.meetingControl.title = payload.meeting ? "Leave the meeting and stop recording" : "Capture private Meeting context";
+  renderMeetingClock();
   dom.meetingControl.classList.toggle("is-starting", payload.meetingStarting);
   dom.meetingControl.setAttribute("aria-busy", payload.meetingStarting ? "true" : "false");
   renderMeetingContext();
+  if (wasMeeting && !payload.meeting)
+    clearMeetingAnswer();
+}
+function elapsedLabel(startedAt) {
+  const total = Math.max(0, Math.floor((Date.now() - startedAt) / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const seconds = total % 60;
+  const pad = (value) => String(value).padStart(2, "0");
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${minutes}:${pad(seconds)}`;
+}
+function renderMeetingClock() {
+  if (state.meetingStarting) {
+    dom.meetingLabel.textContent = "Starting…";
+    return;
+  }
+  if (!state.meeting || state.meetingStartedAt === null) {
+    dom.meetingLabel.textContent = "Meeting";
+    return;
+  }
+  dom.meetingLabel.textContent = `Leave · ${elapsedLabel(state.meetingStartedAt)}`;
 }
+window.setInterval(renderMeetingClock, 1000);
 function renderMeetingContext() {
   const visible = state.meeting || state.meetingStarting;
-  const hasContext = state.transcriptAvailable || state.screenshotCount > 0;
   const answerRunning = state.currentState === "answering" || state.currentState === "streaming";
   dom.meetingContext.hidden = !visible;
   dom.root.classList.toggle("has-meeting", visible);
-  const details = [];
-  if (state.transcriptAvailable)
-    details.push("Transcript ready");
-  if (state.screenshotCount > 0) {
-    details.push(`${state.screenshotCount} screenshot${state.screenshotCount === 1 ? "" : "s"}`);
-  }
-  dom.contextCopy.textContent = details.length > 0 ? details.join(" · ") : state.meetingStarting ? "Preparing private context…" : "No context yet";
-  dom.contextCopy.classList.toggle("has-context", hasContext);
-  dom.askMeeting.disabled = !state.meeting || state.meetingStarting || state.meetingAsking || answerRunning || !hasContext;
+  const staged = state.screenshotCount;
+  dom.contextCopy.textContent = state.meetingStarting ? "Preparing private context…" : staged > 0 ? `${staged} screenshot${staged === 1 ? "" : "s"}` : "Transcript only";
+  dom.contextCopy.classList.toggle("has-context", staged > 0);
+  dom.askMeeting.disabled = !state.meeting || state.meetingStarting || state.meetingAsking || answerRunning;
   dom.askMeeting.textContent = state.meetingAsking ? "Asking…" : "Ask";
   dom.askMeeting.setAttribute("aria-busy", state.meetingAsking ? "true" : "false");
 }
@@ -3910,11 +3976,22 @@ function updateUsage(payload) {
   dom.usagePill.classList.toggle("is-near-limit", usage.status === "active" && !exhausted && usage.answersUsed >= usage.answersLimit * 0.9);
   dom.usagePill.classList.toggle("is-exhausted", usage.status !== "active" || exhausted);
 }
+function updateRuntimeError(header) {
+  const message = header.lastError;
+  if (message === undefined || message === "") {
+    dom.runtimeError.hidden = true;
+    dom.runtimeErrorText.textContent = "";
+    return;
+  }
+  dom.runtimeErrorText.textContent = message;
+  dom.runtimeError.hidden = false;
+}
 function applyHeader(header) {
   updatePrivacy(header.hideFromCapture);
   updateMonitoring(header);
   updateMeeting(header);
   updateUsage(header);
+  updateRuntimeError(header);
 }
 async function loadHeader() {
   if (window.blink === undefined)
@@ -4031,7 +4108,6 @@ dom.meeting.addEventListener("change", () => {
     meetingStarting: false,
     asking: state.meetingAsking,
     showTranscript: state.showTranscript,
-    transcriptAvailable: state.transcriptAvailable,
     screenshotCount: state.screenshotCount
   });
   window.blink?.setMeeting(meeting);
@@ -4056,6 +4132,9 @@ dom.transcriptToggle.addEventListener("click", () => {
   renderTranscript();
   window.blink?.setShowTranscript(state.showTranscript);
 });
+dom.runtimeErrorClose.addEventListener("click", () => {
+  dom.runtimeError.hidden = true;
+});
 dom.abort.addEventListener("click", () => {
   if (window.blink === undefined || dom.abort.disabled)
     return;