import{i as e,n as t}from"./lit-Cl9PTnWs.js";import{r as n}from"./i18n-Ber8EPgj.js";import{F as r,j as i}from"./index-X6jQcISW.js";function a(e){switch(e){case`user`:return`User`;case`assistant`:return`Assistant`;case`tool`:return`Tool`;case`system`:return`System`;default:return e}}function o(e){switch(e){case`user`:return`pill accent`;case`assistant`:return`pill`;case`tool`:return`pill muted`;case`system`:return`pill dim`;default:return`pill`}}function s(e){if(typeof e==`string`)return e;if(Array.isArray(e))return e.filter(e=>typeof e==`object`&&!!e).map(e=>e.type===`text`&&typeof e.text==`string`?e.text:``).filter(Boolean).join(`
`);if(e==null)return``;try{return typeof e==`object`?JSON.stringify(e):String(e)}catch{return``}}function c(e){return e==null||!Number.isFinite(e)?``:r(e)}function l(n,r,a,o){let s=n.label||n.displayName||``,l=c(n.updatedAt);return e`
    <div
      class="card ${r?`selected`:``}"
      style="cursor:pointer; padding:var(--space-sm); border-left:3px solid ${r?`var(--accent)`:`transparent`};"
      @click=${a}
    >
      <div style="display:flex; justify-content:space-between; align-items:center; gap:var(--space-xs);">
        <span class="text-mono" style="font-size:0.8em; word-break:break-all;">${n.key}</span>
        <div style="display:flex; align-items:center; gap:6px;">
          ${l?e`<span class="text-muted" style="font-size:0.75em; white-space:nowrap;"
                >${l}</span
              >`:t}
          <button
            class="btn-icon danger"
            title="Delete session"
            style="font-size:14px;"
            @click=${e=>{e.stopPropagation(),o(n.key)}}
          >${i.trash}</button>
        </div>
      </div>
      ${s?e`<div class="text-muted" style="font-size:0.85em; margin-top:2px;">
            ${s}
          </div>`:t}
    </div>
  `}function u(n){let r=n.role??`unknown`,i=s(n.content),l=c(n.timestamp??null);return e`
    <div class="stack" style="gap:var(--space-xs); padding:var(--space-xs) 0;">
      <div style="display:flex; align-items:center; gap:var(--space-xs);">
        <span class="${o(r)}">${a(r)}</span>
        ${l?e`<span class="text-muted" style="font-size:0.75em;">${l}</span>`:t}
      </div>
      <div style="white-space:pre-wrap; word-break:break-word; font-size:0.9em; line-height:1.5;">
${i}</div>
    </div>
  `}function d(t){if(t.loading)return e`<div class="page-loader">${n(`common.loading`)}</div>`;if(t.error)return e`<div class="callout danger">${t.error}</div>`;let r=f(t.sessions,t.searchQuery);return e`
    <section class="stack">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <h3>${n(`tabs.history`)}</h3>
        <button class="btn" @click=${t.onRefresh}>
          ${i.refresh} ${n(`common.refresh`)}
        </button>
      </div>

      <div style="display:grid; grid-template-columns:40% 60%; gap:var(--space-md); min-height:60vh;">
        <!-- Left panel: session list -->
        <div class="stack" style="gap:var(--space-sm); overflow-y:auto; max-height:75vh;">
          <input
            type="text"
            class="input"
            placeholder="${n(`common.search`)}…"
            .value=${t.searchQuery}
            @input=${e=>{let n=e.target;t.onSearch(n.value)}}
          />

          ${r.length===0?e`<div class="callout">${t.searchQuery?`No matching sessions.`:`No sessions found.`}</div>`:r.map(e=>l(e,e.key===t.selectedKey,()=>t.onSelectSession(e.key),t.onDeleteSession))}
        </div>

        <!-- Right panel: transcript viewer -->
        <div
          class="card"
          style="overflow-y:auto; max-height:75vh; padding:var(--space-md);"
        >
          ${t.selectedKey==null?e`<div class="callout">Select a session to view its transcript.</div>`:t.messages.length===0?e`<div class="callout">No messages in this session.</div>`:e`<div class="stack" style="gap:var(--space-sm);">
                  ${t.messages.map(e=>u(e))}
                </div>`}
        </div>
      </div>
    </section>
  `}function f(e,t){if(!t.trim())return e;let n=t.toLowerCase();return e.filter(e=>{let t=e.key.toLowerCase(),r=(e.label??e.displayName??``).toLowerCase();return t.includes(n)||r.includes(n)})}export{d as renderHistory};
//# sourceMappingURL=history-D3P1UwIp.js.map