@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/sessrumnir/src/renderer/src/i18n.ts

@@ -0,0 +1,89 @@
+import { availableLanguages, i18n, languageNativeName } from '../../shared/i18n'
+import { SOURCE_LANGUAGE, SYSTEM_LANGUAGE } from '../../shared/i18n/languages'
+import { resolveLanguage } from '../../shared/i18n/resolve'
+import type { I18nEnvironment } from '../../shared/ipc-contracts'
+
+/** Last resolved language, so the first frame is not English (see theme BOOT_THEME_STORAGE_KEY). */
+export const BOOT_LANGUAGE_STORAGE_KEY = 'pi-desktop.boot-language'
+
+export interface LanguageOption {
+  value: string
+  label: string
+}
+
+let environment: I18nEnvironment | null = null
+let environmentRequest: Promise<I18nEnvironment> | null = null
+
+/** The stored boot language when it is still a known code; English otherwise. */
+export function bootLanguageFrom(stored: string | null): string {
+  return stored !== null && availableLanguages(true).includes(stored) ? stored : SOURCE_LANGUAGE
+}
+
+function readBootLanguage(): string {
+  try {
+    return bootLanguageFrom(localStorage.getItem(BOOT_LANGUAGE_STORAGE_KEY))
+  } catch {
+    // Storage blocked: start in English and switch once settings load.
+    return SOURCE_LANGUAGE
+  }
+}
+
+function rememberBootLanguage(language: string): void {
+  try {
+    localStorage.setItem(BOOT_LANGUAGE_STORAGE_KEY, language)
+  } catch {
+    // Private-mode or quota failure: the next launch starts in English.
+  }
+}
+
+function showLanguage(language: string): void {
+  if (language !== i18n.language) void i18n.changeLanguage(language)
+  document.documentElement.lang = language
+}
+
+/** Call once before the first render. */
+export function applyBootLanguage(): void {
+  showLanguage(readBootLanguage())
+}
+
+/** The OS language list and pseudo switch from main, fetched once per window. */
+export function loadI18nEnvironment(): Promise<I18nEnvironment> {
+  environmentRequest ??= window.piDesktop.i18n.getEnvironment().then(
+    (loaded) => {
+      environment = loaded
+      return loaded
+    },
+    (error: unknown) => {
+      // A failed request must not stick: the next settings load retries it.
+      environmentRequest = null
+      throw error
+    },
+  )
+  return environmentRequest
+}
+
+/** The environment when it has loaded, for synchronous first renders. */
+export function loadedI18nEnvironment(): I18nEnvironment | null {
+  return environment
+}
+
+/** Show the language a setting resolves to, the same way main resolves it. */
+export async function applyLanguageSetting(setting: string): Promise<void> {
+  const loaded = await loadI18nEnvironment()
+  const language = resolveLanguage(setting, loaded.systemLanguages, availableLanguages(loaded.pseudoLanguageEnabled))
+  showLanguage(language)
+  rememberBootLanguage(language)
+}
+
+/** "System default (<resolved language>)", then each language in its own name. */
+export function languagePickerOptions(loaded: I18nEnvironment): LanguageOption[] {
+  const available = availableLanguages(loaded.pseudoLanguageEnabled)
+  const systemLanguage = resolveLanguage(SYSTEM_LANGUAGE, loaded.systemLanguages, available)
+  const languages = available
+    .map((code) => ({ value: code, label: languageNativeName(code) }))
+    .sort((a, b) => a.label.localeCompare(b.label, i18n.language))
+  return [
+    { value: SYSTEM_LANGUAGE, label: i18n.t('settings.language.system', { language: languageNativeName(systemLanguage) }) },
+    ...languages,
+  ]
+}

package/apps/sessrumnir/src/renderer/src/index.css

@@ -0,0 +1,425 @@
+@import "tailwindcss";
+
+/* Vendored OpenMoji COLRv1 color emoji font — sharp vector emoji that read well
+   on dark backgrounds. Used as the emoji fallback across chat, code, and diff. */
+@font-face {
+  font-family: 'OpenMoji Color';
+  src: url('./assets/openmoji-color.woff2') format('woff2');
+  font-display: swap;
+}
+
+/* Tailwind v4 gates the `hover:` variant behind `@media (hover: hover)`. The
+   Electron/Chromium renderer reports `(hover: hover): false`, which silently
+   disables every `hover:` utility app-wide. Redefine the variant to fire on a
+   plain `:hover` so hover states work in the desktop window as intended. */
+@custom-variant hover (&:hover);
+
+@theme {
+  /* Semantic tokens — pi-theme/v1. Values here are the carved cloth of the
+     halls: the stone/metal palette cut into the landing page's :root
+     (CodeP/ymir-homepage/src/lore.html), carried into the seat. The
+     ThemeEngine overrides them on <html> at runtime, so these defaults are the
+     first paint and the fallback — a user theme or `high-contrast` still wins
+     when chosen. Kept byte-identical to themes/fensalir.json by
+     themes/builtin-themes.test.ts (`the CSS base and the cloth never drift`).
+     Colour is stone (bg/panels), bone (text), bronze (light/edges) and blood
+     (heat); never a literal at a call site. */
+  --color-app: #0e0c09;
+  --color-surface: #151209;
+  --color-surface-hover: #1a1610;
+  --color-card: #151209;
+  --color-elevated: #1a1610;
+  --color-highlight: #14100b;
+  --color-highlight-strong: #1a1610;
+  --color-primary: #cfc3a9;
+  --color-secondary: rgba(207, 195, 169, 0.82);
+  --color-muted: #9a8f75;
+  --color-dim: #6b6250;
+  --color-faint: rgba(207, 195, 169, 0.38);
+  --color-ghost: rgba(207, 195, 169, 0.26);
+  --color-inverse: #0e0c09;
+  --color-border: #2b241a;
+  --color-border-strong: #7d5f2a;
+  --color-border-strong-hover: #c9973f;
+  --color-focus: #c9973f;
+  --color-accent: #c9973f;
+  --color-accent-hover: #7d5f2a;
+  --color-accent-fg: #cfc3a9;
+  --color-accent-bg: rgba(201, 151, 79, 0.14);
+  --color-success: #96a0a8;
+  --color-success-bg: rgba(150, 160, 168, 0.14);
+  --color-warning: #c9973f;
+  --color-warning-bg: rgba(201, 151, 79, 0.18);
+  --color-error: #c2584a;
+  --color-error-hover: #7c3a30;
+  --color-error-bg: rgba(124, 58, 48, 0.24);
+  --color-info: #9a8f75;
+  --color-info-bg: rgba(154, 143, 117, 0.14);
+  --color-special: #7d5f2a;
+  --color-special-bg: rgba(125, 95, 42, 0.18);
+  --color-chat-column: #0e0c09;
+  --color-chat-column-border: #2b241a;
+  --color-scrollbar: #2b241a;
+  --color-scrollbar-hover: #7d5f2a;
+  --color-md-code: #c9973f;
+  --color-md-pre-bg: #14100b;
+  /* A selected run of text — the landing's own selection: amber on pale bone. */
+  --color-selection-bg: #57411a;
+  --color-selection-fg: #f0e6cd;
+
+  /* The cloth's type: Cormorant speaks (display), Newsreader reads (body),
+     IBM Plex Mono counts (code) — the landing page's own three families. */
+  --font-display: 'Cormorant', Georgia, serif;
+  --font-sans: 'Newsreader Variable', 'Newsreader', Georgia, 'Inter Variable', system-ui, serif;
+  --font-mono: 'IBM Plex Mono', 'JetBrains Mono Variable', ui-monospace, 'Cascadia Mono', monospace;
+}
+
+/* ─── Scrollbars ─────────────────────────────────────────────────────────── */
+/* Structural rules only; colors come from the token vars the engine writes. */
+
+@layer base {
+  /* First paint wears the cloth before the ThemeEngine writes <html> — the
+     colours and the body face are the carved defaults, never the browser's. */
+  body {
+    background-color: var(--color-app);
+    color: var(--color-primary);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Text selection wears the cloth, never the browser's blue. The values come
+     from the theme engine (a user theme derives its own tint from its accent). */
+  ::selection {
+    background-color: var(--color-selection-bg);
+    color: var(--color-selection-fg);
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-scrollbar) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar);
+    border-radius: 3px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-hover);
+  }
+}
+
+/* ─── Markdown Rendering ─────────────────────────────────────────────────── */
+
+@layer components {
+  /* Bundled Newsreader for chat text (prompts + model responses) — the
+     landing's body face. Sizes stay in rem so they keep scaling with the UI
+     font-size setting. Monospace code/pre inside markdown is re-overridden
+     below. */
+  .font-chat {
+    font-family: 'Newsreader Variable', 'Newsreader', Georgia, 'OpenMoji Color', 'Inter Variable', system-ui, serif;
+  }
+
+  /* Bundled IBM Plex Mono for command bodies and tool results — the landing's
+     mono. */
+  .font-jetbrains {
+    font-family: 'IBM Plex Mono', 'JetBrains Mono Variable', 'OpenMoji Color', ui-monospace, 'Cascadia Mono', Consolas, monospace;
+  }
+
+  /* Chat center column: themable via tokens; defaults track the app background
+     so only themes that override --color-chat-column look different. */
+  .chat-center {
+    background-color: var(--color-chat-column);
+  }
+  .chat-center > .border-b { border-bottom-color: var(--color-chat-column-border); }
+  .chat-center > .border-t { border-top-color: var(--color-chat-column-border); }
+
+  /* Native Chromium select popups otherwise fall back to the OS light palette
+     even when the app has a dark theme. Keep the popup and its text on the
+     same semantic tokens as the rest of the launcher. */
+  select[data-themed-select] {
+    color-scheme: dark;
+  }
+  html.light select[data-themed-select] {
+    color-scheme: light;
+  }
+  select[data-themed-select] option {
+    background-color: var(--color-surface);
+    color: var(--color-primary);
+  }
+
+  /* Reveal the thinking copy button on hover. Plain CSS avoids the nested-group
+     ambiguity with the message-level `group` (Tailwind group-hover didn't fire). */
+  .thinking-copy-btn {
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+  .thinking-hover:hover .thinking-copy-btn,
+  .thinking-copy-btn:focus-visible {
+    opacity: 1;
+  }
+
+  .markdown-body {
+    font-family: 'Newsreader Variable', 'Newsreader', Georgia, 'OpenMoji Color', 'Inter Variable', system-ui, serif;
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: var(--color-primary);
+  }
+
+  .markdown-body p {
+    margin-bottom: 0.75em;
+  }
+
+  .markdown-body p:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Live stream caret: attach to the last block so it tracks the end of the
+     current chunk instead of rendering as a sibling one line below. */
+  .markdown-body.streaming-md > *:last-child::after {
+    content: '';
+    display: inline-block;
+    width: 0.375rem;
+    height: 1em;
+    margin-left: 0.125rem;
+    vertical-align: text-bottom;
+    background: var(--color-accent);
+    border-radius: 1px;
+    animation: pulse-dot 1.5s ease-in-out infinite;
+  }
+
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6 {
+    font-size: 1em;
+    font-weight: 600;
+    margin-top: 1.25em;
+    margin-bottom: 0.5em;
+    color: var(--color-primary);
+  }
+
+  .markdown-body code {
+    font-family: 'IBM Plex Mono', 'JetBrains Mono Variable', ui-monospace, monospace;
+    font-size: 1em;
+    color: var(--color-md-code);
+  }
+
+  /* Clickable filename references: arrow cursor + highlight box on hover. */
+  .markdown-body code.chat-file-link {
+    cursor: default;
+    padding: 0.05em 0.3em;
+    border-radius: 4px;
+    transition: background-color 150ms ease;
+  }
+
+  .markdown-body code.chat-file-link:hover {
+    background-color: color-mix(in oklab, var(--color-primary), transparent 90%);
+  }
+
+  .markdown-body pre {
+    margin: 0.75em 0;
+    border-radius: 8px;
+    overflow-x: auto;
+    background: var(--color-md-pre-bg);
+    border: 1px solid var(--color-border);
+  }
+
+  .markdown-body pre code {
+    display: block;
+    padding: 0.875em 1em;
+    background: transparent;
+    color: var(--color-primary);
+    font-family: 'IBM Plex Mono', 'JetBrains Mono Variable', 'OpenMoji Color', 'Fira Code', 'Cascadia Code', monospace;
+    font-size: 0.75rem;
+    line-height: 1.6;
+  }
+
+  .markdown-body ul,
+  .markdown-body ol {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+
+  .markdown-body li {
+    margin-bottom: 0.25em;
+  }
+
+  .markdown-body blockquote {
+    border-left: 3px solid var(--color-border);
+    padding-left: 1em;
+    margin: 0.75em 0;
+    color: var(--color-secondary);
+  }
+
+  .markdown-body a {
+    color: var(--color-accent);
+    text-decoration: none;
+  }
+
+  .markdown-body a:hover {
+    text-decoration: underline;
+  }
+
+  .markdown-body table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.75em 0;
+    font-size: inherit;
+    line-height: 1.4;
+  }
+
+  .markdown-body th,
+  .markdown-body td {
+    padding: 0.25em 0.5em;
+    border: 1px solid var(--color-border);
+    text-align: left;
+  }
+
+  .markdown-body th {
+    background: var(--color-card);
+    font-weight: 600;
+  }
+
+  .markdown-body hr {
+    margin: 1.5em 0;
+    border: none;
+    border-top: 1px solid var(--color-border);
+  }
+
+  .markdown-body img {
+    max-width: 100%;
+    border-radius: 8px;
+  }
+
+  .markdown-body strong {
+    font-weight: 600;
+    color: var(--color-primary);
+  }
+}
+
+/* ─── Syntax Highlighting (GitHub Dark) ──────────────────────────────────── */
+
+@layer components {
+  .hljs {
+    background: transparent;
+    color: var(--cm-variable);
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--cm-comment);
+    font-style: italic;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--cm-keyword);
+  }
+
+  .hljs-string,
+  .hljs-attr,
+  .hljs-template-variable {
+    color: var(--cm-string);
+  }
+
+  .hljs-number,
+  .hljs-literal,
+  .hljs-variable {
+    color: var(--cm-number);
+  }
+
+  .hljs-built_in,
+  .hljs-type {
+    color: var(--cm-type);
+  }
+
+  .hljs-function .hljs-title,
+  .hljs-title.function_ {
+    color: var(--cm-function);
+  }
+
+  .hljs-tag,
+  .hljs-name {
+    color: var(--cm-tag);
+  }
+
+  .hljs-attribute {
+    color: var(--cm-property);
+  }
+
+  .hljs-symbol,
+  .hljs-bullet {
+    color: var(--cm-constant);
+  }
+
+  .hljs-meta {
+    color: var(--cm-meta);
+  }
+
+  .hljs-deletion {
+    color: var(--cm-invalid);
+    background: var(--color-error-bg);
+  }
+
+  .hljs-addition {
+    color: var(--cm-string);
+    background: var(--color-success-bg);
+  }
+}
+
+/* ─── Animations ─────────────────────────────────────────────────────────── */
+
+@layer utilities {
+  @keyframes pulse-dot {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+  }
+
+  .animate-pulse-dot {
+    animation: pulse-dot 1.5s ease-in-out infinite;
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.2s ease-out;
+  }
+
+  @keyframes fleet-shimmer {
+    0% { transform: translateX(-120%); }
+    100% { transform: translateX(320%); }
+  }
+}
+
+/* In-conversation search highlights (the ::highlight() rules for the CSS Custom
+   Highlight API) are injected at runtime from chat-search.tsx — Tailwind's
+   Lightning CSS transformer drops the unrecognized ::highlight() pseudo-element
+   at build time, so they can't live here. */
+
+/* ─── Selection inside the code editor ────────────────────────────────────────
+   The global ::selection lives in @layer base; CodeMirror's own base theme
+   paints its selection layer with *unlayered* rules (a dark slate), and an
+   unlayered rule always beats a layered one whatever the specificity. So this
+   rule is unlayered too, and scoped deep enough to win on merit. The cloth's
+   selection is the landing's own amber. */
+.cm-editor .cm-selectionLayer .cm-selectionBackground,
+.cm-editor.cm-focused .cm-selectionLayer .cm-selectionBackground,
+.cm-editor ::selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-fg);
+}

package/apps/sessrumnir/src/renderer/src/main.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { I18nextProvider } from 'react-i18next'
+import { App } from './app'
+import { i18n } from '../../shared/i18n'
+import { applyBootLanguage } from './i18n'
+import '@fontsource-variable/inter'
+import '@fontsource-variable/jetbrains-mono'
+// The cloth's type — the landing page's own three families, bundled so the seat
+// wears them with no network: Cormorant (display), Newsreader (body),
+// IBM Plex Mono (mono). Inter/JetBrains Mono stay as glyph fallbacks.
+import '@fontsource/cormorant/400.css'
+import '@fontsource/cormorant/500.css'
+import '@fontsource/cormorant/600.css'
+import '@fontsource-variable/newsreader'
+import '@fontsource-variable/newsreader/wght-italic.css'
+import '@fontsource/ibm-plex-mono/300.css'
+import '@fontsource/ibm-plex-mono/400.css'
+import '@fontsource/ibm-plex-mono/500.css'
+import './index.css'
+
+// OpenMoji COLRv1 color emoji font (vendored woff2, @font-face in index.css) —
+// sharp vector emoji that read better on dark than the OS emoji font. Preloaded
+// eagerly so glyphs render in OpenMoji from the first paint.
+void document.fonts?.load('16px "OpenMoji Color"').catch(() => {})
+
+// Before the first render, so the first frame is already in the saved language.
+applyBootLanguage()
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) {
+  throw new Error('Root element not found')
+}
+
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <I18nextProvider i18n={i18n}>
+      <App />
+    </I18nextProvider>
+  </React.StrictMode>
+)