opencode-glance 0.0.0-stage → 0.1.1

package/src/gui/styles.ts

@@ -0,0 +1,104 @@
+/**
+ * The bar is injected as plain CSS instead of relying on Tailwind classes. A plugin bundle is not part of the
+ * app's Tailwind source scan, so utility class names that only appear here would not be generated. The
+ * `--v2-*` variables below are the same semantic tokens the app's own capsule pills use.
+ */
+export const css = `
+.glance-root {
+  display: flex;
+  justify-content: center;
+  padding: 4px 12px 8px;
+  pointer-events: none;
+}
+
+.glance-bar {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  max-width: 1240px;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 999px;
+  border: 0.5px solid var(--v2-border-border-muted);
+  background: var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-raised);
+  color: var(--v2-text-text-base);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.glance-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.glance-group.center {
+  flex: 1;
+  justify-content: center;
+}
+
+.glance-group.end {
+  justify-content: flex-end;
+}
+
+.glance-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--v2-text-text-muted);
+}
+
+.glance-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.glance-muted {
+  color: var(--v2-text-text-muted);
+}
+
+.glance-ring {
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  color: var(--v2-icon-icon-base, var(--v2-text-text-muted));
+}
+
+.glance-ring::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background: var(--v2-background-bg-base);
+}
+
+@media (max-width: 760px) {
+  .glance-group.center {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .glance-root {
+    padding: 2px 8px 6px;
+  }
+
+  .glance-bar {
+    height: 30px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+}
+`

package/src/gui.tsx

@@ -0,0 +1,31 @@
+import { Command, Plugin, Slot, Style } from "@opencode/plugin/gui"
+import { createSignal } from "solid-js"
+import { GlanceBar } from "./gui/glance"
+import { css } from "./gui/styles"
+import { messages } from "./i18n"
+
+export default Plugin.define({
+  i18n: messages,
+  setup(ctx) {
+    const [visible, setVisible] = createSignal(ctx.options.show !== false)
+
+    // Keep the slot object stable so toggling visibility adds or removes the same contribution
+    // instead of remounting it on every reactive pass.
+    const bar = {
+      at: "window.bottom" as const,
+      order: 0,
+      render: () => <GlanceBar ctx={ctx} />,
+    }
+
+    ctx.add(Style, css)
+    ctx.add(Slot, () => (visible() ? bar : undefined))
+    ctx.add(Command, () => ({
+      id: "toggle",
+      title: ctx.t("glance.command.toggle"),
+      group: ctx.t("glance.command.group"),
+      run: () => {
+        setVisible((value) => !value)
+      },
+    }))
+  },
+})

package/src/i18n/index.ts

@@ -0,0 +1,233 @@
+const en = {
+  "glance.turn.one": "{{count}} turn",
+  "glance.turn.other": "{{count}} turns",
+  "glance.step.one": "{{count}} step",
+  "glance.step.other": "{{count}} steps",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "cache hit {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "waiting {{elapsed}}",
+  "glance.streaming": "generating {{elapsed}}",
+  "glance.preparing": "preparing",
+  "glance.command.toggle": "Glance: toggle status bar",
+  "glance.command.group": "Glance",
+} as const
+
+export type MessageKey = keyof typeof en
+export type Catalog = Record<MessageKey, string>
+export type Locale = "en" | "zh" | "zht" | "ja" | "ko" | "de" | "fr" | "es" | "pt" | "it"
+
+export const locales: readonly Locale[] = ["en", "zh", "zht", "ja", "ko", "de", "fr", "es", "pt", "it"]
+
+const zh: Catalog = {
+  "glance.turn.one": "{{count}} 轮",
+  "glance.turn.other": "{{count}} 轮",
+  "glance.step.one": "{{count}} 步",
+  "glance.step.other": "{{count}} 步",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "缓存命中 {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "等待响应 {{elapsed}}",
+  "glance.streaming": "生成中 {{elapsed}}",
+  "glance.preparing": "准备中",
+  "glance.command.toggle": "Glance：显示/隐藏状态条",
+  "glance.command.group": "Glance",
+}
+
+const zht: Catalog = {
+  "glance.turn.one": "{{count}} 輪",
+  "glance.turn.other": "{{count}} 輪",
+  "glance.step.one": "{{count}} 步",
+  "glance.step.other": "{{count}} 步",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "快取命中 {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "等待回應 {{elapsed}}",
+  "glance.streaming": "生成中 {{elapsed}}",
+  "glance.preparing": "準備中",
+  "glance.command.toggle": "Glance：顯示/隱藏狀態列",
+  "glance.command.group": "Glance",
+}
+
+const ja: Catalog = {
+  "glance.turn.one": "{{count}} ターン",
+  "glance.turn.other": "{{count}} ターン",
+  "glance.step.one": "{{count}} ステップ",
+  "glance.step.other": "{{count}} ステップ",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "キャッシュヒット {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "応答待ち {{elapsed}}",
+  "glance.streaming": "生成中 {{elapsed}}",
+  "glance.preparing": "準備中",
+  "glance.command.toggle": "Glance：ステータスバーを表示/非表示",
+  "glance.command.group": "Glance",
+}
+
+const ko: Catalog = {
+  "glance.turn.one": "{{count}}턴",
+  "glance.turn.other": "{{count}}턴",
+  "glance.step.one": "{{count}}단계",
+  "glance.step.other": "{{count}}단계",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "캐시 적중 {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "응답 대기 {{elapsed}}",
+  "glance.streaming": "생성 중 {{elapsed}}",
+  "glance.preparing": "준비 중",
+  "glance.command.toggle": "Glance: 상태 표시줄 표시/숨기기",
+  "glance.command.group": "Glance",
+}
+
+const de: Catalog = {
+  "glance.turn.one": "{{count}} Zug",
+  "glance.turn.other": "{{count}} Züge",
+  "glance.step.one": "{{count}} Schritt",
+  "glance.step.other": "{{count}} Schritte",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "Cache-Treffer {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "warte auf Antwort {{elapsed}}",
+  "glance.streaming": "generiert {{elapsed}}",
+  "glance.preparing": "bereit",
+  "glance.command.toggle": "Glance: Statusleiste ein-/ausblenden",
+  "glance.command.group": "Glance",
+}
+
+const fr: Catalog = {
+  "glance.turn.one": "{{count}} tour",
+  "glance.turn.other": "{{count}} tours",
+  "glance.step.one": "{{count}} étape",
+  "glance.step.other": "{{count}} étapes",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "cache {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "en attente de réponse {{elapsed}}",
+  "glance.streaming": "génération {{elapsed}}",
+  "glance.preparing": "préparation",
+  "glance.command.toggle": "Glance : afficher/masquer la barre d’état",
+  "glance.command.group": "Glance",
+}
+
+const es: Catalog = {
+  "glance.turn.one": "{{count}} turno",
+  "glance.turn.other": "{{count}} turnos",
+  "glance.step.one": "{{count}} paso",
+  "glance.step.other": "{{count}} pasos",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "aciertos de caché {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "esperando respuesta {{elapsed}}",
+  "glance.streaming": "generando {{elapsed}}",
+  "glance.preparing": "preparando",
+  "glance.command.toggle": "Glance: mostrar/ocultar la barra de estado",
+  "glance.command.group": "Glance",
+}
+
+const pt: Catalog = {
+  "glance.turn.one": "{{count}} turno",
+  "glance.turn.other": "{{count}} turnos",
+  "glance.step.one": "{{count}} passo",
+  "glance.step.other": "{{count}} passos",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "acertos de cache {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "aguardando resposta {{elapsed}}",
+  "glance.streaming": "gerando {{elapsed}}",
+  "glance.preparing": "preparando",
+  "glance.command.toggle": "Glance: mostrar/ocultar a barra de status",
+  "glance.command.group": "Glance",
+}
+
+const it: Catalog = {
+  "glance.turn.one": "{{count}} turno",
+  "glance.turn.other": "{{count}} turni",
+  "glance.step.one": "{{count}} passo",
+  "glance.step.other": "{{count}} passi",
+  "glance.rate": "{{rate}} tok/s",
+  "glance.rateElapsed": "{{rate}} tok/s · {{elapsed}}",
+  "glance.live": "~{{rate}} tok/s · {{elapsed}}",
+  "glance.tokens": "{{tokens}} tok",
+  "glance.cache": "hit cache {{percent}}%",
+  "glance.context": "{{percent}}%",
+  "glance.tool": "{{name}} {{elapsed}}",
+  "glance.waiting": "in attesa di risposta {{elapsed}}",
+  "glance.streaming": "generazione {{elapsed}}",
+  "glance.preparing": "preparazione",
+  "glance.command.toggle": "Glance: mostra/nascondi la barra di stato",
+  "glance.command.group": "Glance",
+}
+
+export const messages: Record<Locale, Catalog> = { en, zh, zht, ja, ko, de, fr, es, pt, it }
+
+export type Params = Record<string, string | number | boolean>
+
+/** Replaces {{name}} placeholders; unknown placeholders become empty strings. */
+export function translate(locale: Locale, key: MessageKey, params?: Params): string {
+  const template = messages[locale]?.[key] ?? messages.en[key]
+  if (!params) return template
+  return template.replace(/\{\{(\w+)\}\}/g, (_, name: string) => String(params[name] ?? ""))
+}
+
+/** Plural form for a count, using the locale's categories and falling back to `.other`. */
+export function plural(locale: Locale, base: "glance.turn" | "glance.step", count: number): string {
+  const category = new Intl.PluralRules(locale === "zht" ? "zh-TW" : locale).select(count)
+  const key = `${base}.${category}` as MessageKey
+  const resolved = Object.hasOwn(messages.en, key) ? key : (`${base}.other` as MessageKey)
+  return translate(locale, resolved, { count })
+}
+
+function matchLocale(tag: string): Locale {
+  const lower = tag.toLowerCase()
+  if (lower.includes("hant") || lower.startsWith("zh-tw") || lower.startsWith("zh-hk")) return "zht"
+  const base = lower.split("-")[0]
+  return (locales.includes(base as Locale) ? base : "en") as Locale
+}
+
+/** Resolves an explicit locale, or the system locale for "auto"/undefined. */
+export function resolveLocale(value: unknown): Locale {
+  if (value === undefined || value === "auto") {
+    return matchLocale(Intl.DateTimeFormat().resolvedOptions().locale)
+  }
+  if (typeof value !== "string") return "en"
+  const lower = value.toLowerCase()
+  if (lower === "zht" || lower === "zh-tw" || lower === "zh-hk" || lower === "zh-hant") return "zht"
+  const base = lower.split("-")[0]
+  return locales.includes(base as Locale) ? (base as Locale) : "en"
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+import { Plugin } from "@opencode/plugin"
+
+/**
+ * The server part exists so the package has a stable plugin id, and so its GUI part is discovered by
+ * OpenCode Desktop. The statistics themselves are read from the client-side session store, so there is
+ * nothing to run on the server yet.
+ */
+export default Plugin.define({
+  id: "opencode-glance",
+  async setup() {},
+})

package/src/shared/glance.ts

@@ -0,0 +1,240 @@
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import type { ModelInfo, SessionInfo, SessionMessageInfo, TokenUsageInfo } from "@opencode/client"
+import type { MessageKey, Params } from "../i18n"
+import {
+  activeStep,
+  addTokens,
+  cacheHit,
+  compactNumber,
+  contextUsage,
+  countSteps,
+  countTurns,
+  EMPTY_TOKENS,
+  estimateStepTokens,
+  formatDuration,
+  lastThroughput,
+  stepActivity,
+  throughput,
+  totalTokens,
+} from "./metrics"
+
+export type StepsMode = "assistant" | "tool"
+export type RateMode = "auto" | "average" | "last"
+
+export type Translator = (key: MessageKey, params?: Params) => string
+export type Pluralizer = (base: "glance.turn" | "glance.step", count: number) => string
+
+/**
+ * The session data a front end can read, as reactive getters. The TUI reads the plugin context's data
+ * layer and the GUI reads the mounted session's, so the shapes differ; both adapt into this interface.
+ * Every getter is called inside a memo, so it must read the front end's reactive store.
+ */
+export type GlanceSource = {
+  messages(): ReadonlyArray<SessionMessageInfo>
+  session(): SessionInfo | undefined
+  /** Session ids whose tokens belong to this session, including subagent families. */
+  family(): ReadonlyArray<string>
+  sessionTokens(id: string): TokenUsageInfo | undefined
+  models(): ReadonlyArray<ModelInfo> | undefined
+  running(): boolean
+}
+
+export type GlanceOptions = {
+  steps: StepsMode
+  rate: RateMode
+  t: Translator
+  plural: Pluralizer
+}
+
+export function resolveRate(value: unknown): RateMode {
+  if (value === "average" || value === "last" || value === "auto") return value
+  return "auto"
+}
+
+export function resolveSteps(value: unknown): StepsMode {
+  return value === "tool" ? "tool" : "assistant"
+}
+
+/** Truncates a tool name so a long MCP tool does not push the bar past its slot. */
+export function shortName(name: string, length = 18): string {
+  return name.length > length ? `${name.slice(0, length - 1)}…` : name
+}
+
+/**
+ * A cheap identity for everything the history scans depend on. Message history is append-only and only the
+ * tail message mutates while it streams: it gains tokens and a completion time when its step ends. Earlier
+ * messages are settled, so the tail plus the length is enough to know when the scans must run again. This
+ * keeps a streaming delta from re-scanning thousands of settled messages on every token.
+ */
+export function historyKey(messages: ReadonlyArray<SessionMessageInfo>): string {
+  const last = messages[messages.length - 1]
+  if (!last) return "0"
+  if (last.type === "assistant") {
+    return [
+      messages.length,
+      last.id,
+      "a",
+      last.time.completed ?? 0,
+      last.time.streamed ?? 0,
+      last.tokens?.input ?? 0,
+      last.tokens?.output ?? 0,
+      last.tokens?.cache.read ?? 0,
+      last.tokens?.cache.write ?? 0,
+    ].join("|")
+  }
+  if (last.type === "compaction") return `${messages.length}|${last.id}|c|${last.status}`
+  return `${messages.length}|${last.id}|${last.type}`
+}
+
+const present = (value: string | undefined): value is string => value !== undefined
+
+export type SettledHistory = {
+  /** Identity of the message shape this snapshot was taken from. */
+  key: string
+  messages: ReadonlyArray<SessionMessageInfo>
+}
+
+/**
+ * Reuses the previous snapshot when the history key still holds, so a memo over it keeps its identity and the
+ * scans that depend on it stay inert while the active step streams.
+ */
+export function settleHistory(
+  previous: SettledHistory | undefined,
+  messages: ReadonlyArray<SessionMessageInfo>,
+): SettledHistory {
+  const key = historyKey(messages)
+  return previous && previous.key === key ? previous : { key, messages }
+}
+
+/**
+ * Everything the TUI and the GUI render, from one shared source. Both front ends had their own copy of this
+ * layer; keeping it here means a new metric or a changed wording only has to be written once.
+ */
+export function createGlance(source: GlanceSource, options: GlanceOptions) {
+  const [now, setNow] = createSignal(Date.now())
+  const [live, setLive] = createSignal<number>()
+
+  // Only tick while the session runs; this drives the live tool/step elapsed label.
+  createEffect(() => {
+    if (!source.running()) return
+    setNow(Date.now())
+    const timer = setInterval(() => setNow(Date.now()), 1_000)
+    onCleanup(() => clearInterval(timer))
+  })
+
+  // Settled history: re-read only when the message shape or the tail changes, not on every streamed delta.
+  // The snapshot object keeps its identity while the key holds, so the scans below do not rerun either.
+  const history = createMemo<SettledHistory>((previous) => settleHistory(previous, source.messages()))
+
+  const family = createMemo(() => source.family())
+  const totals = createMemo(() =>
+    family().reduce((total, id) => addTokens(total, source.sessionTokens(id)), EMPTY_TOKENS),
+  )
+
+  const usage = createMemo(() =>
+    contextUsage(history().messages, source.models(), source.session()?.revert?.messageID),
+  )
+  const turns = createMemo(() => countTurns(history().messages))
+  const steps = createMemo(() => countSteps(history().messages, options.steps))
+  const averageRate = createMemo(() => throughput(history().messages))
+  const latestRate = createMemo(() => lastThroughput(history().messages))
+  const hit = createMemo(() => cacheHit(totals()))
+  const running = createMemo(() => source.running())
+
+  // The active step must be read live: its content changes on every token.
+  const active = createMemo(() => activeStep(source.messages()))
+  const estimated = createMemo(() => {
+    const step = active()
+    return step ? estimateStepTokens(step) : 0
+  })
+  const activity = createMemo(() => stepActivity(active(), estimated(), now()))
+
+  // Smooth the character-based estimate so the number does not jump on every delta.
+  createEffect(() => {
+    const current = activity()
+    if (!running() || !current || current.kind !== "streaming" || current.rate === undefined) {
+      setLive(undefined)
+      return
+    }
+    const raw = current.rate
+    setLive((previous) => (previous === undefined ? raw : Math.round(previous * 0.65 + raw * 0.35)))
+  })
+
+  const speed = createMemo(() => {
+    if (options.rate === "average") return averageRate()
+    return latestRate() ?? averageRate()
+  })
+
+  const turnText = createMemo(
+    () => `${options.plural("glance.turn", turns())} ${options.plural("glance.step", steps())}`,
+  )
+  const tokensText = createMemo(() =>
+    options.t("glance.tokens", { tokens: compactNumber(totalTokens(totals())) }),
+  )
+  const cacheText = createMemo(() => {
+    const value = hit()
+    return value === undefined ? undefined : options.t("glance.cache", { percent: value })
+  })
+  const contextText = createMemo(() => {
+    const value = usage()?.percent
+    return value === undefined ? "—" : options.t("glance.context", { percent: value })
+  })
+
+  const activityText = createMemo(() => {
+    const current = activity()
+    if (!running()) {
+      const value = speed()
+      return value === undefined ? undefined : options.t("glance.rate", { rate: value })
+    }
+    if (!current) return options.t("glance.preparing")
+    if (current.kind === "tool")
+      return options.t("glance.tool", { name: shortName(current.name), elapsed: formatDuration(current.elapsed) })
+    if (current.kind === "waiting")
+      return options.t("glance.waiting", { elapsed: formatDuration(current.elapsed) })
+    const elapsed = formatDuration(current.elapsed)
+    if (options.rate === "auto" && live() !== undefined)
+      return options.t("glance.live", { rate: live()!, elapsed })
+    const exact = options.rate === "average" ? averageRate() : latestRate() ?? averageRate()
+    return exact === undefined
+      ? options.t("glance.streaming", { elapsed })
+      : options.t("glance.rateElapsed", { rate: exact, elapsed })
+  })
+
+  const progressText = createMemo(() =>
+    activityText() ? `${turnText()} · ${activityText()}` : turnText(),
+  )
+  const usageText = createMemo(() =>
+    cacheText() ? `${tokensText()} · ${cacheText()}` : tokensText(),
+  )
+  const compactText = createMemo(() => `${turns()}/${steps()} · ${contextText()}`)
+  const mediumText = createMemo(() =>
+    (running()
+      ? [turnText(), activityText(), tokensText(), contextText()]
+      : [turnText(), activityText(), tokensText(), cacheText(), contextText()]
+    )
+      .filter(present)
+      .join(" · "),
+  )
+
+  return {
+    totals,
+    hit,
+    usage,
+    turns,
+    steps,
+    running,
+    speed,
+    activity,
+    turnText,
+    tokensText,
+    cacheText,
+    contextText,
+    activityText,
+    progressText,
+    usageText,
+    compactText,
+    mediumText,
+  }
+}
+
+export type Glance = ReturnType<typeof createGlance>