remcodex 0.1.0-beta.1

package/web/components/session-workbench.js

@@ -0,0 +1,173 @@
+import { t } from "../i18n/index.js";
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function getCompactMobileTitle(title) {
+  const text = String(title || "").trim();
+  if (!text) {
+    return t("session.current");
+  }
+  return text.length > 10 ? `${text.slice(0, 10)}…` : text;
+}
+
+export function renderSessionTopBar({
+  title,
+  statusCode = "",
+  statusLabel,
+  statusClass,
+  activityBadges = [],
+  host,
+  model,
+  reasoning,
+  sessionElapsedLabel,
+  activeElapsedLabel,
+  inspectOpen,
+  showInspectAction = true,
+  backHref = "",
+}) {
+  const mobilePrimaryLabel =
+    statusCode === "waiting_input" || statusCode === "idle" || statusCode === "completed"
+      ? getCompactMobileTitle(title)
+      : statusLabel || t("session.status.unknown");
+
+  return `
+    <section class="session-topbar" aria-label="${escapeHtml(t("generic.status"))}">
+      <div class="session-topbar-mobile-bar">
+        ${
+          backHref
+            ? `<a href="${escapeHtml(backHref)}" class="session-topbar-mobile-back">${escapeHtml(t("session.back"))}</a>`
+            : `<span class="session-topbar-mobile-back session-topbar-mobile-back-placeholder"></span>`
+        }
+        <div class="session-topbar-mobile-center">
+          <div class="session-topbar-mobile-status-row">
+            <div class="session-topbar-mobile-status">${escapeHtml(mobilePrimaryLabel)}</div>
+              ${
+                activeElapsedLabel
+                ? `<div id="session-mobile-active-elapsed" class="session-topbar-mobile-elapsed">${escapeHtml(activeElapsedLabel)}</div>`
+                : ""
+              }
+          </div>
+        </div>
+        ${
+          showInspectAction
+            ? `
+              <button
+                id="inspect-drawer-toggle"
+                type="button"
+                class="secondary-button session-topbar-mobile-action ${inspectOpen ? "session-topbar-action-active" : ""}"
+                aria-expanded="${inspectOpen ? "true" : "false"}"
+                aria-controls="inspect-drawer"
+              >
+                Inspect
+              </button>
+            `
+            : `<span class="session-topbar-mobile-action session-topbar-mobile-action-placeholder"></span>`
+        }
+      </div>
+      <div class="session-topbar-main">
+        <h2 class="session-topbar-title">${escapeHtml(title || t("workspace.session.untitled"))}</h2>
+        <div class="session-topbar-statuses">
+          <span class="pill ${escapeHtml(statusClass || "pill-neutral")}">${escapeHtml(statusLabel || t("session.status.unknown"))}</span>
+          ${activityBadges
+            .map(
+              (badge) => `
+                <span class="session-topbar-live-badge session-topbar-live-badge-${escapeHtml(badge.tone || "neutral")}">
+                  ${escapeHtml(badge.label || "")}
+                </span>
+              `,
+            )
+            .join("")}
+        </div>
+      </div>
+      <div class="session-topbar-meta">
+        <span class="session-topbar-chip">${escapeHtml(host || t("session.host.unsynced"))}</span>
+        <span class="session-topbar-chip">${escapeHtml(model || t("session.model.unsynced"))}</span>
+        <span class="session-topbar-chip">${escapeHtml(reasoning || t("session.reasoning.unsynced"))}</span>
+        <span id="session-elapsed-chip" class="session-topbar-chip">
+          ${escapeHtml(sessionElapsedLabel || t("session.elapsed", { value: "--" }))}
+        </span>
+        ${
+          activeElapsedLabel
+            ? `
+              <span id="session-active-elapsed-chip" class="session-topbar-chip session-topbar-chip-active">
+                ${escapeHtml(activeElapsedLabel)}
+              </span>
+            `
+            : ""
+        }
+      </div>
+      ${
+        showInspectAction
+          ? `
+            <button
+              id="inspect-drawer-toggle"
+              type="button"
+              class="secondary-button session-topbar-action ${inspectOpen ? "session-topbar-action-active" : ""}"
+              aria-expanded="${inspectOpen ? "true" : "false"}"
+              aria-controls="inspect-drawer"
+            >
+              Inspect
+            </button>
+          `
+          : ""
+      }
+    </section>
+  `;
+}
+
+export function renderInspectDrawer({
+  open,
+  selectionTitle,
+  searchSectionHtml,
+  detailsSectionHtml,
+  sessionSectionHtml,
+}) {
+  return `
+    <div
+      id="inspect-drawer-overlay"
+      class="inspect-drawer-overlay ${open ? "inspect-drawer-overlay-open" : ""}"
+      ${open ? "" : "hidden"}
+    ></div>
+    <aside
+      id="inspect-drawer"
+      class="inspect-drawer ${open ? "inspect-drawer-open" : ""}"
+      aria-label="Inspect"
+      ${open ? "" : "hidden"}
+    >
+      <div class="inspect-drawer-head">
+        <div>
+          <p class="inspect-drawer-eyebrow">Inspect</p>
+          <h3 class="inspect-drawer-title">${escapeHtml(selectionTitle || t("inspect.selectionTitle"))}</h3>
+        </div>
+        <button id="inspect-drawer-close" type="button" class="secondary-button">${escapeHtml(t("inspect.close"))}</button>
+      </div>
+      <div class="inspect-drawer-body">
+        <section class="inspect-drawer-section">
+          <div class="inspect-section-head">
+            <span class="inspect-section-title">Search</span>
+          </div>
+          ${searchSectionHtml}
+        </section>
+        <section class="inspect-drawer-section">
+          <div class="inspect-section-head">
+            <span class="inspect-section-title">Details</span>
+          </div>
+          ${detailsSectionHtml}
+        </section>
+        <section class="inspect-drawer-section">
+          <div class="inspect-section-head">
+            <span class="inspect-section-title">Session</span>
+          </div>
+          ${sessionSectionHtml}
+        </section>
+      </div>
+    </aside>
+  `;
+}

package/web/i18n/index.js

@@ -0,0 +1,171 @@
+import en from "./locales/en.js";
+import de from "./locales/de.js";
+import es from "./locales/es.js";
+import fr from "./locales/fr.js";
+import ja from "./locales/ja.js";
+import ko from "./locales/ko.js";
+import ptBR from "./locales/pt-BR.js";
+import ru from "./locales/ru.js";
+import zhCN from "./locales/zh-CN.js";
+import zhHant from "./locales/zh-Hant.js";
+
+const LOCALE_STORAGE_KEY = "remcodex.locale";
+const LOCALE_OPTIONS = [
+  { id: "en", label: "English" },
+  { id: "zh-CN", label: "简体中文" },
+  { id: "zh-Hant", label: "繁體中文" },
+  { id: "ja", label: "日本語" },
+  { id: "ko", label: "한국어" },
+  { id: "es", label: "Español" },
+  { id: "fr", label: "Français" },
+  { id: "de", label: "Deutsch" },
+  { id: "pt-BR", label: "Português (Brasil)" },
+  { id: "ru", label: "Русский" },
+];
+const SUPPORTED_LOCALES = new Set(LOCALE_OPTIONS.map((item) => item.id));
+const DICTIONARIES = {
+  de,
+  en,
+  es,
+  fr,
+  ja,
+  ko,
+  "pt-BR": ptBR,
+  ru,
+  "zh-CN": zhCN,
+  "zh-Hant": zhHant,
+};
+
+function normalizeLocale(value) {
+  const raw = String(value || "").trim().toLowerCase();
+  if (!raw) {
+    return "en";
+  }
+  if (raw === "zh" || raw === "zh-cn" || raw === "zh-hans" || raw.startsWith("zh-cn")) {
+    return "zh-CN";
+  }
+  if (
+    raw === "zh-tw" ||
+    raw === "zh-hk" ||
+    raw === "zh-hant" ||
+    raw.startsWith("zh-tw") ||
+    raw.startsWith("zh-hk") ||
+    raw.startsWith("zh-hant")
+  ) {
+    return "zh-Hant";
+  }
+  if (raw === "ja" || raw.startsWith("ja-")) {
+    return "ja";
+  }
+  if (raw === "ko" || raw.startsWith("ko-")) {
+    return "ko";
+  }
+  if (raw === "es" || raw.startsWith("es-")) {
+    return "es";
+  }
+  if (raw === "fr" || raw.startsWith("fr-")) {
+    return "fr";
+  }
+  if (raw === "de" || raw.startsWith("de-")) {
+    return "de";
+  }
+  if (raw === "pt" || raw === "pt-br" || raw.startsWith("pt-br")) {
+    return "pt-BR";
+  }
+  if (raw === "ru" || raw.startsWith("ru-")) {
+    return "ru";
+  }
+  return "en";
+}
+
+function readStoredLocale() {
+  try {
+    const value = window.localStorage?.getItem(LOCALE_STORAGE_KEY);
+    return value && SUPPORTED_LOCALES.has(value) ? value : "";
+  } catch {
+    return "";
+  }
+}
+
+function detectLocale() {
+  const stored = readStoredLocale();
+  if (stored) {
+    return stored;
+  }
+  if (typeof navigator !== "undefined") {
+    return normalizeLocale(navigator.language || navigator.languages?.[0] || "");
+  }
+  return "en";
+}
+
+let currentLocale = detectLocale();
+
+function interpolate(template, params = {}) {
+  return String(template).replace(/\{(\w+)\}/g, (_, key) => {
+    const value = params[key];
+    return value === undefined || value === null ? "" : String(value);
+  });
+}
+
+function resolveValue(dict, key) {
+  return dict && Object.prototype.hasOwnProperty.call(dict, key) ? dict[key] : undefined;
+}
+
+export function getCurrentLocale() {
+  return currentLocale;
+}
+
+export function getIntlLocale() {
+  switch (currentLocale) {
+    case "zh-CN":
+      return "zh-Hans-CN";
+    case "zh-Hant":
+      return "zh-Hant";
+    case "pt-BR":
+      return "pt-BR";
+    default:
+      return currentLocale;
+  }
+}
+
+export function listSupportedLocales() {
+  return LOCALE_OPTIONS;
+}
+
+export function setCurrentLocale(locale) {
+  currentLocale = normalizeLocale(locale);
+  try {
+    window.localStorage?.setItem(LOCALE_STORAGE_KEY, currentLocale);
+  } catch {
+    /* ignore */
+  }
+  return currentLocale;
+}
+
+export function toggleLocale() {
+  return setCurrentLocale(currentLocale === "zh-CN" ? "en" : "zh-CN");
+}
+
+export function t(key, params = {}) {
+  const dict = DICTIONARIES[currentLocale] || DICTIONARIES.en;
+  const fallback = DICTIONARIES["zh-CN"];
+  const value = resolveValue(dict, key) ?? resolveValue(fallback, key) ?? resolveValue(DICTIONARIES.en, key);
+  if (typeof value === "function") {
+    return String(value(params));
+  }
+  if (typeof value === "string") {
+    return interpolate(value, params);
+  }
+  return key;
+}
+
+export function formatInlineList(values) {
+  const list = Array.isArray(values) ? values.filter(Boolean) : [];
+  if (list.length === 0) {
+    return "";
+  }
+  if (currentLocale === "zh-CN") {
+    return list.join("、");
+  }
+  return list.join(", ");
+}

package/web/i18n/locales/de.js

@@ -0,0 +1,50 @@
+import en from "./en.js";
+
+export default {
+  ...en,
+  "nav.projects": "Projekte",
+  "nav.sessions": "Sitzungen",
+  "workspace.openSidebar": "Sitzungsleiste öffnen",
+  "workspace.closeSidebar": "Sitzungsleiste ausblenden",
+  "workspace.empty.title": "Wähle eine Sitzung, um zu starten",
+  "workspace.empty.subtitle": "Wechsle Sitzungen in der Seitenleiste oder erstelle / importiere eine neue.",
+  "workspace.empty.newSession": "Neue Sitzung",
+  "workspace.sidebar.import": "Codex-Sitzung importieren",
+  "workspace.sidebar.newSession": "+ Neue Sitzung",
+  "workspace.sidebar.empty": "Keine Sitzung passt zum aktuellen Filter.",
+  "workspace.session.untitled": "Unbenannte Sitzung",
+  "workspace.loading.session": "Sitzungsinhalt wird geladen...",
+  "workspace.loading.projects": "Projekte werden geladen...",
+  "workspace.loading.sessions": "Sitzungen werden geladen...",
+  "session.status.idle": "Leerlauf",
+  "session.status.starting": "Startet",
+  "session.status.running": "Läuft",
+  "session.status.waiting_input": "Wartet",
+  "session.status.stopping": "Wird gestoppt",
+  "session.status.completed": "Abgeschlossen",
+  "session.status.failed": "Fehlgeschlagen",
+  "session.current": "Aktuelle Sitzung",
+  "approval.required": "Genehmigung erforderlich",
+  "approval.pending": "Ausstehend",
+  "approval.deny": "Ablehnen",
+  "approval.allowOnce": "Einmal erlauben",
+  "approval.allowForTurn": "Für diesen Zug erlauben",
+  "composer.placeholder": "Beschreibe die Entwicklungsaufgabe, die Codex übernehmen soll",
+  "timeline.empty": "Noch keine Unterhaltung.",
+  "timeline.thinking": "Denkt nach...",
+  "generic.close": "Schließen",
+  "generic.back": "Zurück",
+  "generic.refresh": "Aktualisieren",
+  "generic.search": "Suchen",
+  "generic.project": "Projekt",
+  "generic.status": "Status",
+  "generic.sort": "Sortieren",
+  "generic.keyword": "Suchbegriff",
+  "generic.copy": "Kopieren",
+  "generic.expand": "Erweitern",
+  "generic.collapse": "Einklappen",
+  "generic.on": "An",
+  "generic.off": "Aus",
+  "generic.none": "Keine",
+  "inspect.selectionTitle": "Details",
+};