대시보드 폴드아웃/드릴다운 정리 + 페르소나 역린·misconduct 반응 + 게이트웨이 격리·RAG 비차단 수정
SSOT 대시보드:
- 한신대 기술분석 PDF(19쪽) 정합성 분석 + 이번 세션 발견 섹션 추가
- 섹션 폴드아웃(접기)·상단 목차(드릴다운)·모두 펼치기/접기 — 내용 보존, 레이아웃만 정리
페르소나 반응 강화('저항·반응 조절' 핵심 차별):
- PersonaCard.triggers(역린) 필드 + CCD 핵심상처 파생 역린 블록
- L0에 무례·모욕·조롱 시 현실적 동맹 균열 반응 지침
버그·성능 수정(라이브/E2E로 포착):
- 게이트웨이 페르소나 격리: --append-system-prompt를 --system-prompt(교체)로 + --exclude-dynamic-system-prompt-sections (내담자 캐릭터 붕괴·개발맥락 누출 차단)
- RAG: 임베더 동기 로드(약 7-13초)를 _warm_rag_caches 백그라운드 warm으로(세션 생성 블로킹 회귀 수정)
- voice TTS RMS 데드힌트 제거, init_state OpennessParams 파라미터객체화
- 한국어 PII(날짜·금액·주소) 마스킹 보강
- 레이아웃 시각 게이트: 폼 컨트롤 값 스크롤 오탐 제외(7/7)
검증: 백엔드 84/84, E2E 42(데스크톱 27·모바일 11·아바타 4), 시각 게이트 7/7
This commit is contained in:
Yun Chan
parent
cb2aebd76c
commit
085460b5e0
327 changed files with 31226 additions and 1829 deletions
|
|
@ -209,7 +209,15 @@ export default function LearnerHome() {
|
|||
<div className="lh-personas" role="listbox" aria-label="연습 페르소나">
|
||||
{loadState === "loading"
|
||||
? Array.from({ length: 3 }).map((_, i) => (
|
||||
<div className="lh-persona is-skel" key={i} aria-hidden="true" />
|
||||
<div className="lh-persona is-skel" key={i} aria-hidden="true">
|
||||
<span className="lh-persona__mark lh-skel__box" />
|
||||
<span className="lh-persona__body">
|
||||
<span className="lh-skel__line lh-skel__line--name" />
|
||||
<span className="lh-skel__line lh-skel__line--meta" />
|
||||
<span className="lh-skel__line lh-skel__line--sum" />
|
||||
<span className="lh-skel__line lh-skel__line--sum2" />
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
: personas.map((persona) => {
|
||||
const usablePersona = isUsablePersona(persona);
|
||||
|
|
@ -257,24 +265,40 @@ export default function LearnerHome() {
|
|||
|
||||
<section className="lh-preview" aria-labelledby="lh-preview-title">
|
||||
<div className="lh-preview__main">
|
||||
<div className="lh-preview__identity">
|
||||
<div className="lh-avatar" aria-hidden="true">
|
||||
{personaCatalogUnavailable ? "!" : personaInitial(selected)}
|
||||
<div className="lh-preview__hero">
|
||||
<div className="lh-preview__identity">
|
||||
<div className="lh-avatar" aria-hidden="true">
|
||||
{personaCatalogUnavailable ? "!" : personaInitial(selected)}
|
||||
</div>
|
||||
<div className="lh-preview__copy">
|
||||
<span className="lh-preview__code">
|
||||
{personaCatalogUnavailable ? "catalog" : (selected?.code ?? "...")}
|
||||
</span>
|
||||
<h2 id="lh-preview-title">
|
||||
{personaCatalogUnavailable
|
||||
? "사용 가능한 내담자가 없습니다."
|
||||
: (selected?.display_name ?? "내담자 정보를 불러오는 중")}
|
||||
</h2>
|
||||
<p>
|
||||
{personaCatalogUnavailable
|
||||
? "데이터베이스에서 확인된 내담자만 연습에 사용할 수 있습니다."
|
||||
: demographicsLine(selected)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lh-preview__copy">
|
||||
<span className="lh-preview__code">
|
||||
{personaCatalogUnavailable ? "catalog" : (selected?.code ?? "...")}
|
||||
|
||||
<div className="lh-actions">
|
||||
<span className="lh-actions__note">
|
||||
회기 종료 후 저장된 대화 기록으로 리뷰가 생성됩니다.
|
||||
</span>
|
||||
<h2 id="lh-preview-title">
|
||||
{personaCatalogUnavailable
|
||||
? "사용 가능한 내담자가 없습니다."
|
||||
: (selected?.display_name ?? "내담자 정보를 불러오는 중")}
|
||||
</h2>
|
||||
<p>
|
||||
{personaCatalogUnavailable
|
||||
? "데이터베이스에서 확인된 내담자만 연습에 사용할 수 있습니다."
|
||||
: demographicsLine(selected)}
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={startPractice}
|
||||
disabled={!selected}
|
||||
trailing={<Icon name="chevron-right" size={18} />}
|
||||
>
|
||||
새 회기 시작
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -301,20 +325,6 @@ export default function LearnerHome() {
|
|||
<dd>{selected?.voice_preset ?? "기본"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="lh-actions">
|
||||
<span className="lh-actions__note">
|
||||
회기 종료 후 저장된 대화 기록으로 리뷰가 생성됩니다.
|
||||
</span>
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={startPractice}
|
||||
disabled={!selected}
|
||||
trailing={<Icon name="chevron-right" size={18} />}
|
||||
>
|
||||
새 회기 시작
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
|
|
@ -417,17 +427,16 @@ export default function LearnerHome() {
|
|||
|
||||
const LH_CSS = `
|
||||
.lh-root{
|
||||
width:min(100%,1720px);
|
||||
min-height:calc(100vh - var(--topbar-h));
|
||||
width:min(100%,1480px);
|
||||
min-height:calc(100dvh - var(--topbar-h));
|
||||
margin:0 auto;
|
||||
overflow:visible;
|
||||
display:grid;
|
||||
grid-template-rows:auto auto;
|
||||
grid-template-rows:auto minmax(0,1fr);
|
||||
align-content:start;
|
||||
gap:var(--sp-4);
|
||||
padding:clamp(14px,2vw,24px);
|
||||
gap:clamp(12px,1.6vw,20px);
|
||||
padding:clamp(14px,2vw,28px);
|
||||
background:var(--bg-app);
|
||||
overflow:visible;
|
||||
}
|
||||
.lh-head{
|
||||
display:flex;
|
||||
|
|
@ -439,7 +448,7 @@ const LH_CSS = `
|
|||
.lh-head__copy{min-width:0;}
|
||||
.lh-head__status{
|
||||
flex:none;
|
||||
min-height:36px;
|
||||
min-height:34px;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
|
|
@ -453,15 +462,15 @@ const LH_CSS = `
|
|||
font-weight:750;
|
||||
}
|
||||
.lh-title{
|
||||
margin:6px 0 0;
|
||||
font-size:clamp(22px,2.6vw,30px);
|
||||
margin:5px 0 0;
|
||||
font-size:clamp(22px,2.4vw,30px);
|
||||
font-weight:740;
|
||||
letter-spacing:0;
|
||||
line-height:1.18;
|
||||
color:var(--text-strong);
|
||||
}
|
||||
.lh-sub{
|
||||
margin:7px 0 0;
|
||||
margin:6px 0 0;
|
||||
max-width:760px;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
|
|
@ -469,23 +478,27 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-workspace{
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(280px,320px) minmax(0,1fr);
|
||||
gap:var(--sp-4);
|
||||
grid-template-columns:minmax(300px,360px) minmax(0,1fr);
|
||||
gap:clamp(14px,1.8vw,24px);
|
||||
align-items:start;
|
||||
}
|
||||
.lh-list-pane,
|
||||
.lh-preview{
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
.lh-list-pane{
|
||||
position:sticky;
|
||||
top:calc(var(--topbar-h) + 18px);
|
||||
max-height:calc(100dvh - var(--topbar-h) - 36px);
|
||||
display:grid;
|
||||
grid-template-rows:auto auto;
|
||||
padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;
|
||||
border-right:1px solid var(--hair);
|
||||
overflow:visible;
|
||||
grid-template-rows:auto minmax(0,1fr);
|
||||
padding:var(--sp-4);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
overflow:hidden;
|
||||
}
|
||||
.lh-pane-head{
|
||||
display:flex;
|
||||
|
|
@ -499,44 +512,48 @@ const LH_CSS = `
|
|||
font-weight:700;
|
||||
color:var(--text-muted);
|
||||
font-family:var(--font-num);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-personas{
|
||||
min-height:0;
|
||||
display:grid;
|
||||
grid-auto-rows:auto;
|
||||
align-content:start;
|
||||
gap:10px;
|
||||
gap:8px;
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
padding-right:2px;
|
||||
max-height:calc(100dvh - 250px);
|
||||
padding-right:3px;
|
||||
}
|
||||
.lh-persona{
|
||||
position:relative;
|
||||
min-width:0;
|
||||
min-height:104px;
|
||||
min-height:92px;
|
||||
display:grid;
|
||||
grid-template-columns:48px minmax(0,1fr);
|
||||
gap:12px;
|
||||
grid-template-columns:44px minmax(0,1fr);
|
||||
gap:11px;
|
||||
align-items:start;
|
||||
padding:14px;
|
||||
padding:12px 38px 12px 12px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
background:var(--bg-surface-2);
|
||||
color:var(--text-body);
|
||||
text-align:left;
|
||||
cursor:pointer;
|
||||
transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
.lh-persona:hover{border-color:var(--neutral-200);}
|
||||
.lh-persona:hover{border-color:var(--border-strong);}
|
||||
.lh-persona:disabled{
|
||||
cursor:not-allowed;
|
||||
opacity:.68;
|
||||
}
|
||||
.lh-persona.is-selected{
|
||||
border-color:var(--accent);
|
||||
background:var(--accent-tint);
|
||||
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
|
||||
}
|
||||
.lh-persona__mark{
|
||||
width:42px;
|
||||
height:42px;
|
||||
width:40px;
|
||||
height:40px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
color:var(--text-strong);
|
||||
|
|
@ -554,23 +571,26 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-persona__name{
|
||||
color:var(--text-strong);
|
||||
font-size:16px;
|
||||
font-size:14.5px;
|
||||
font-weight:760;
|
||||
line-height:1.25;
|
||||
overflow:hidden;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-line-clamp:1;
|
||||
-webkit-box-orient:vertical;
|
||||
}
|
||||
.lh-persona__meta{
|
||||
color:var(--text-muted);
|
||||
font-size:12.5px;
|
||||
font-size:12px;
|
||||
line-height:1.45;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-persona__summary{
|
||||
min-width:0;
|
||||
color:var(--text-body);
|
||||
font-size:13.5px;
|
||||
font-size:12.5px;
|
||||
line-height:1.45;
|
||||
overflow:hidden;
|
||||
display:-webkit-box;
|
||||
|
|
@ -579,8 +599,8 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-persona__check{
|
||||
position:absolute;
|
||||
top:12px;
|
||||
right:12px;
|
||||
top:10px;
|
||||
right:10px;
|
||||
width:22px;
|
||||
height:22px;
|
||||
display:grid;
|
||||
|
|
@ -591,42 +611,75 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-persona.is-skel{
|
||||
pointer-events:none;
|
||||
}
|
||||
/* 실제 카드 구조(마크 + 이름/메타/요약 2줄)를 모사한 플레이스홀더 셰이머 */
|
||||
.lh-skel__box,
|
||||
.lh-skel__line{
|
||||
background:linear-gradient(90deg,var(--bg-surface-2),var(--neutral-100),var(--bg-surface-2));
|
||||
background-size:180% 100%;
|
||||
animation:lhSkel 1.1s ease-in-out infinite;
|
||||
}
|
||||
.lh-skel__line{
|
||||
height:11px;
|
||||
border-radius:6px;
|
||||
align-self:center;
|
||||
}
|
||||
.lh-skel__line--name{width:62%;height:13px;}
|
||||
.lh-skel__line--meta{width:44%;height:10px;}
|
||||
.lh-skel__line--sum{width:92%;}
|
||||
.lh-skel__line--sum2{width:76%;}
|
||||
.lh-preview{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr);
|
||||
gap:var(--sp-4);
|
||||
gap:clamp(14px,1.8vw,24px);
|
||||
align-content:start;
|
||||
align-items:start;
|
||||
padding:clamp(14px,2vw,22px) 0 clamp(14px,2vw,22px) var(--sp-4);
|
||||
overflow:visible;
|
||||
}
|
||||
.lh-preview__main{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:var(--sp-4);
|
||||
align-content:start;
|
||||
padding:var(--sp-5);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.lh-preview__hero{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) minmax(220px,auto);
|
||||
gap:var(--sp-4);
|
||||
align-items:start;
|
||||
}
|
||||
@media (min-width:1400px) and (max-width:1559px){
|
||||
.lh-preview__hero{
|
||||
grid-template-columns:minmax(0,1fr);
|
||||
}
|
||||
.lh-actions{
|
||||
justify-items:start;
|
||||
}
|
||||
.lh-actions__note{
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
.lh-preview__identity{
|
||||
flex:none;
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:auto minmax(0,1fr);
|
||||
align-items:center;
|
||||
align-items:start;
|
||||
gap:var(--sp-4);
|
||||
}
|
||||
.lh-avatar{
|
||||
width:82px;
|
||||
height:82px;
|
||||
width:64px;
|
||||
height:64px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
border-radius:50%;
|
||||
background:var(--clay-tint);
|
||||
color:var(--clay-deep);
|
||||
font-size:32px;
|
||||
font-size:26px;
|
||||
font-weight:780;
|
||||
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--clay) 22%,transparent);
|
||||
}
|
||||
|
|
@ -636,7 +689,7 @@ const LH_CSS = `
|
|||
align-items:center;
|
||||
min-height:24px;
|
||||
padding:0 9px;
|
||||
border-radius:999px;
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--accent-tint);
|
||||
color:var(--accent-deep);
|
||||
font-family:var(--font-num);
|
||||
|
|
@ -644,51 +697,55 @@ const LH_CSS = `
|
|||
font-weight:800;
|
||||
}
|
||||
.lh-preview h2{
|
||||
margin:10px 0 0;
|
||||
margin:8px 0 0;
|
||||
color:var(--text-strong);
|
||||
font-size:clamp(23px,3vw,34px);
|
||||
line-height:1.18;
|
||||
font-size:clamp(22px,2.4vw,30px);
|
||||
line-height:1.2;
|
||||
letter-spacing:0;
|
||||
word-break:keep-all;
|
||||
overflow-wrap:anywhere;
|
||||
overflow:hidden;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-box-orient:vertical;
|
||||
}
|
||||
.lh-preview__copy p{
|
||||
margin:8px 0 0;
|
||||
margin:7px 0 0;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.45;
|
||||
word-break:keep-all;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.lh-summary{
|
||||
flex:none;
|
||||
min-width:0;
|
||||
padding:var(--sp-5);
|
||||
padding:var(--sp-4);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.lh-summary p{
|
||||
margin:8px 0 0;
|
||||
color:var(--text-body);
|
||||
font-size:clamp(16px,1.6vw,20px);
|
||||
line-height:1.55;
|
||||
font-size:clamp(15px,1.2vw,18px);
|
||||
line-height:1.52;
|
||||
overflow:hidden;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:3;
|
||||
-webkit-line-clamp:4;
|
||||
-webkit-box-orient:vertical;
|
||||
}
|
||||
.lh-facts{
|
||||
flex:none;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:var(--sp-3);
|
||||
gap:10px;
|
||||
margin:0;
|
||||
}
|
||||
.lh-facts div{
|
||||
min-width:0;
|
||||
padding:0 0 var(--sp-3);
|
||||
min-height:54px;
|
||||
border-bottom:1px solid var(--hair);
|
||||
min-height:64px;
|
||||
padding:12px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
}
|
||||
.lh-facts dt{
|
||||
margin:0;
|
||||
|
|
@ -707,14 +764,15 @@ const LH_CSS = `
|
|||
white-space:nowrap;
|
||||
}
|
||||
.lh-activity{
|
||||
flex:none;
|
||||
min-height:0;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:var(--sp-3);
|
||||
gap:var(--sp-4);
|
||||
padding:var(--sp-5);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.lh-activity__stats{
|
||||
grid-column:1/-1;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:8px;
|
||||
|
|
@ -724,18 +782,20 @@ const LH_CSS = `
|
|||
min-width:0;
|
||||
}
|
||||
.lh-activity__stats span{
|
||||
min-height:44px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
padding:8px 0;
|
||||
border-bottom:1px solid var(--hair);
|
||||
min-height:58px;
|
||||
display:grid;
|
||||
align-content:center;
|
||||
gap:4px;
|
||||
padding:10px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.lh-activity__stats b{
|
||||
color:var(--text-strong);
|
||||
font-family:var(--font-num);
|
||||
font-size:20px;
|
||||
font-size:22px;
|
||||
line-height:1;
|
||||
}
|
||||
.lh-activity__stats small{
|
||||
color:var(--text-muted);
|
||||
|
|
@ -743,11 +803,7 @@ const LH_CSS = `
|
|||
font-weight:720;
|
||||
}
|
||||
.lh-activity__recent{
|
||||
grid-column:1/-1;
|
||||
min-height:92px;
|
||||
padding:var(--sp-3) 0 0;
|
||||
border-top:1px solid var(--hair);
|
||||
overflow:hidden;
|
||||
min-height:0;
|
||||
}
|
||||
.lh-activity__head{
|
||||
display:flex;
|
||||
|
|
@ -761,6 +817,7 @@ const LH_CSS = `
|
|||
font-family:var(--font-num);
|
||||
font-size:12px;
|
||||
font-weight:800;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-activity__recent ul{
|
||||
list-style:none;
|
||||
|
|
@ -771,15 +828,15 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-activity__recent li{
|
||||
min-width:0;
|
||||
display:flex;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
gap:6px 10px;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:var(--sp-3);
|
||||
padding:8px 0;
|
||||
padding:10px 0;
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.lh-activity__recent li:first-child{border-top:0;padding-top:0;}
|
||||
.lh-activity__recent li span{
|
||||
.lh-activity__recent li > span:first-child{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:2px;
|
||||
|
|
@ -795,16 +852,18 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-activity__recent p{margin:0;line-height:1.45;}
|
||||
.lh-activity__recent em{
|
||||
flex:none;
|
||||
grid-column:1;
|
||||
color:var(--text-body);
|
||||
font-family:var(--font-num);
|
||||
font-size:12px;
|
||||
font-style:normal;
|
||||
}
|
||||
.lh-session-actions{
|
||||
flex:none;
|
||||
grid-column:2;
|
||||
grid-row:1 / span 2;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
gap:6px;
|
||||
}
|
||||
.lh-activity__unavailable{
|
||||
|
|
@ -850,8 +909,10 @@ const LH_CSS = `
|
|||
font-family:var(--font-sans);
|
||||
font-size:12px;
|
||||
font-weight:720;
|
||||
padding:5px 8px;
|
||||
min-height:30px;
|
||||
padding:5px 9px;
|
||||
cursor:pointer;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-review-link:hover{background:var(--accent-tint);}
|
||||
.lh-review-link--ghost{
|
||||
|
|
@ -859,24 +920,21 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-review-link--ghost:hover{color:var(--accent-deep);}
|
||||
.lh-actions{
|
||||
margin-top:0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
gap:var(--sp-4);
|
||||
padding-top:var(--sp-4);
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.lh-root.has-session-records .lh-actions{
|
||||
margin-top:0;
|
||||
min-width:0;
|
||||
display:grid;
|
||||
justify-items:end;
|
||||
gap:10px;
|
||||
}
|
||||
.lh-actions__note{
|
||||
display:none;
|
||||
display:block;
|
||||
min-width:0;
|
||||
max-width:620px;
|
||||
max-width:260px;
|
||||
color:var(--text-muted);
|
||||
font-size:12.5px;
|
||||
line-height:1.45;
|
||||
text-align:right;
|
||||
word-break:keep-all;
|
||||
text-wrap:balance;
|
||||
}
|
||||
.lh-error{
|
||||
display:flex;
|
||||
|
|
@ -890,73 +948,67 @@ const LH_CSS = `
|
|||
.lh-error b{display:block;}
|
||||
.lh-error p{margin:4px 0 0;font-size:var(--fs-sm);line-height:1.5;}
|
||||
@keyframes lhSkel{0%{background-position:120% 0}100%{background-position:-80% 0}}
|
||||
@media (min-width:1180px){
|
||||
.lh-root.has-session-records .lh-preview{
|
||||
grid-template-columns:minmax(0,1fr) minmax(320px,380px);
|
||||
@media (min-width:1400px){
|
||||
.lh-preview{
|
||||
grid-template-columns:minmax(440px,1fr) minmax(340px,400px);
|
||||
column-gap:var(--sp-5);
|
||||
}
|
||||
.lh-root.has-session-records .lh-preview__main{
|
||||
grid-column:1;
|
||||
.lh-activity{
|
||||
position:sticky;
|
||||
top:calc(var(--topbar-h) + 18px);
|
||||
}
|
||||
.lh-root.has-session-records .lh-activity{
|
||||
grid-column:2;
|
||||
grid-row:1;
|
||||
align-self:start;
|
||||
padding:var(--sp-4);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.lh-root.has-session-records .lh-activity__stats{
|
||||
.lh-activity__stats{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.lh-root.has-session-records .lh-activity__stats span{
|
||||
min-height:38px;
|
||||
padding:6px 0;
|
||||
}
|
||||
.lh-root.has-session-records .lh-activity__recent{
|
||||
border-top:0;
|
||||
padding-top:var(--sp-3);
|
||||
}
|
||||
.lh-root.has-session-records .lh-activity__recent li{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
gap:4px 10px;
|
||||
}
|
||||
.lh-root.has-session-records .lh-activity__recent li em{
|
||||
grid-column:1;
|
||||
grid-row:2;
|
||||
font-size:11px;
|
||||
}
|
||||
.lh-root.has-session-records .lh-session-actions{
|
||||
grid-column:2;
|
||||
grid-row:1 / span 2;
|
||||
flex-direction:column;
|
||||
align-items:stretch;
|
||||
}
|
||||
}
|
||||
@media (max-width:920px){
|
||||
.lh-root{padding:12px;gap:12px;}
|
||||
@media (max-width:1080px){
|
||||
.lh-workspace{
|
||||
grid-template-columns:1fr;
|
||||
grid-template-rows:auto auto;
|
||||
gap:12px;
|
||||
}
|
||||
.lh-list-pane{
|
||||
padding:0;
|
||||
border-right:0;
|
||||
border-bottom:1px solid var(--hair);
|
||||
position:relative;
|
||||
top:auto;
|
||||
max-height:none;
|
||||
overflow:visible;
|
||||
}
|
||||
.lh-personas{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
grid-auto-rows:auto;
|
||||
overflow:visible;
|
||||
padding-right:0;
|
||||
}
|
||||
.lh-preview{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.lh-activity__stats{
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width:760px){
|
||||
.lh-root{
|
||||
padding:12px;
|
||||
gap:12px;
|
||||
}
|
||||
.lh-head{
|
||||
align-items:flex-start;
|
||||
}
|
||||
.lh-list-pane{
|
||||
padding:12px;
|
||||
}
|
||||
.lh-pane-head{margin-bottom:10px;}
|
||||
.lh-personas{
|
||||
grid-auto-rows:minmax(58px,1fr);
|
||||
display:flex;
|
||||
grid-template-columns:none;
|
||||
gap:8px;
|
||||
overflow:auto;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
padding-right:0;
|
||||
padding-bottom:2px;
|
||||
scrollbar-gutter:auto;
|
||||
}
|
||||
.lh-persona{
|
||||
min-height:58px;
|
||||
flex:0 0 min(82vw,320px);
|
||||
min-height:64px;
|
||||
grid-template-columns:38px minmax(0,1fr);
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
|
|
@ -967,19 +1019,39 @@ const LH_CSS = `
|
|||
.lh-persona__meta{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.lh-persona__summary{display:none;}
|
||||
.lh-persona__check{top:50%;right:10px;transform:translateY(-50%);}
|
||||
.lh-preview{gap:10px;padding:0;overflow:visible;scrollbar-gutter:stable;}
|
||||
.lh-preview__main{gap:10px;}
|
||||
.lh-preview{
|
||||
gap:12px;
|
||||
}
|
||||
.lh-preview__main,
|
||||
.lh-activity{
|
||||
padding:14px;
|
||||
}
|
||||
.lh-preview__hero{
|
||||
grid-template-columns:1fr;
|
||||
gap:12px;
|
||||
}
|
||||
.lh-preview__identity{grid-template-columns:54px minmax(0,1fr);gap:12px;}
|
||||
.lh-avatar{width:54px;height:54px;font-size:22px;}
|
||||
.lh-preview h2{margin-top:6px;font-size:20px;-webkit-line-clamp:1;}
|
||||
.lh-preview h2{margin-top:6px;font-size:20px;-webkit-line-clamp:2;}
|
||||
.lh-preview__copy p{margin-top:5px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.lh-actions{
|
||||
justify-items:stretch;
|
||||
}
|
||||
.lh-actions__note{
|
||||
max-width:none;
|
||||
text-align:left;
|
||||
}
|
||||
.lh-actions .vg-btn{
|
||||
width:100%;
|
||||
justify-content:center;
|
||||
}
|
||||
.lh-summary{padding:12px;}
|
||||
.lh-summary p{margin-top:6px;font-size:14px;line-height:1.45;-webkit-line-clamp:2;}
|
||||
.lh-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
|
||||
.lh-facts div{padding:10px;}
|
||||
.lh-facts div{min-height:58px;padding:10px;}
|
||||
.lh-facts dt{font-size:11px;}
|
||||
.lh-facts dd{font-size:12px;}
|
||||
.lh-activity{grid-template-columns:1fr;gap:8px;}
|
||||
.lh-activity{gap:12px;}
|
||||
.lh-activity__stats{grid-template-columns:repeat(3,minmax(0,1fr));}
|
||||
.lh-activity__stats span{
|
||||
min-height:46px;
|
||||
|
|
@ -990,22 +1062,10 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-activity__stats b{font-size:17px;}
|
||||
.lh-activity__stats small{font-size:11px;}
|
||||
.lh-activity__recent{padding-top:8px;}
|
||||
.lh-activity__recent li:nth-child(n+3){display:none;}
|
||||
.lh-session-actions{gap:4px;}
|
||||
.lh-review-link{padding:4px 7px;}
|
||||
.lh-actions{padding-top:10px;}
|
||||
.lh-actions__note{display:none;}
|
||||
}
|
||||
@media (max-width:560px){
|
||||
.lh-root{
|
||||
height:calc(100vh - var(--topbar-h));
|
||||
height:calc(100dvh - var(--topbar-h));
|
||||
min-height:0;
|
||||
overflow:hidden;
|
||||
grid-template-rows:auto minmax(0,1fr);
|
||||
align-content:stretch;
|
||||
}
|
||||
.lh-head__status{display:none;}
|
||||
.lh-head .vg-kicker,
|
||||
.lh-pane-head .vg-kicker,
|
||||
|
|
@ -1014,41 +1074,17 @@ const LH_CSS = `
|
|||
font-size:11px;
|
||||
gap:6px;
|
||||
}
|
||||
.lh-title{margin-top:3px;font-size:20px;line-height:1.16;}
|
||||
.lh-title{margin-top:3px;font-size:20px;line-height:1.18;}
|
||||
.lh-sub{
|
||||
margin-top:4px;
|
||||
font-size:12.5px;
|
||||
line-height:1.25;
|
||||
overflow:hidden;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:1;
|
||||
-webkit-box-orient:vertical;
|
||||
line-height:1.35;
|
||||
}
|
||||
.lh-head{gap:6px;}
|
||||
.lh-workspace{
|
||||
min-height:0;
|
||||
overflow:hidden;
|
||||
grid-template-rows:auto minmax(0,1fr);
|
||||
}
|
||||
.lh-list-pane{
|
||||
min-height:0;
|
||||
overflow:hidden;
|
||||
padding-bottom:6px;
|
||||
}
|
||||
.lh-pane-head{margin-bottom:5px;}
|
||||
.lh-personas{
|
||||
display:flex;
|
||||
grid-auto-rows:unset;
|
||||
max-height:none;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
gap:8px;
|
||||
padding:0 0 3px;
|
||||
scrollbar-gutter:auto;
|
||||
}
|
||||
.lh-persona{
|
||||
flex:0 0 min(78vw,300px);
|
||||
min-height:48px;
|
||||
min-height:56px;
|
||||
width:min(78vw,300px);
|
||||
grid-template-columns:30px minmax(0,1fr);
|
||||
padding:7px 34px 7px 7px;
|
||||
|
|
@ -1056,46 +1092,24 @@ const LH_CSS = `
|
|||
.lh-persona__mark{width:28px;height:28px;font-size:11px;}
|
||||
.lh-persona__name{font-size:13px;}
|
||||
.lh-persona__meta{font-size:11px;}
|
||||
.lh-preview{min-height:0;gap:7px;padding:0;overflow:hidden;}
|
||||
.lh-preview__main{gap:7px;}
|
||||
.lh-root.has-session-records .lh-preview{
|
||||
gap:6px;
|
||||
}
|
||||
.lh-root.has-session-records .lh-preview__main{
|
||||
gap:6px;
|
||||
}
|
||||
.lh-preview{gap:10px;}
|
||||
.lh-preview__main{gap:10px;}
|
||||
.lh-preview__identity{grid-template-columns:38px minmax(0,1fr);gap:9px;}
|
||||
.lh-avatar{width:38px;height:38px;font-size:17px;}
|
||||
.lh-root.has-session-records .lh-avatar{
|
||||
width:34px;
|
||||
height:34px;
|
||||
font-size:15px;
|
||||
}
|
||||
.lh-preview h2{margin-top:4px;font-size:17px;line-height:1.18;}
|
||||
.lh-root.has-session-records .lh-preview h2{
|
||||
font-size:16px;
|
||||
}
|
||||
.lh-preview h2{margin-top:4px;font-size:17px;line-height:1.2;}
|
||||
.lh-preview__code{min-height:20px;font-size:10.5px;padding:0 8px;}
|
||||
.lh-preview__copy p{margin-top:4px;font-size:11.5px;}
|
||||
.lh-summary{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:9px;
|
||||
padding:8px 9px;
|
||||
}
|
||||
.lh-summary .vg-kicker{flex:none;}
|
||||
.lh-summary p{margin:0;font-size:12px;line-height:1.32;-webkit-line-clamp:1;}
|
||||
.lh-root.has-session-records .lh-summary,
|
||||
.lh-root.has-session-records .lh-facts{
|
||||
display:none;
|
||||
}
|
||||
.lh-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
|
||||
.lh-actions__note{display:none;}
|
||||
.lh-summary{padding:10px;}
|
||||
.lh-summary p{font-size:12.5px;line-height:1.38;-webkit-line-clamp:2;}
|
||||
.lh-facts{grid-template-columns:1fr;gap:6px;}
|
||||
.lh-facts div{
|
||||
min-height:26px;
|
||||
min-height:0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:6px;
|
||||
padding:0 0 5px;
|
||||
padding:8px 10px;
|
||||
}
|
||||
.lh-facts dt{font-size:10.5px;}
|
||||
.lh-facts dd{
|
||||
|
|
@ -1106,17 +1120,14 @@ const LH_CSS = `
|
|||
display:block;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.lh-activity{padding:12px;gap:10px;}
|
||||
.lh-activity__stats{gap:6px;}
|
||||
.lh-activity__stats span{
|
||||
min-height:34px;
|
||||
padding:4px 0;
|
||||
min-height:40px;
|
||||
padding:6px 4px;
|
||||
}
|
||||
.lh-activity__stats b{font-size:16px;}
|
||||
.lh-activity__stats small{font-size:10.5px;}
|
||||
.lh-activity__recent{display:block;max-height:116px;}
|
||||
.lh-root.has-session-records .lh-activity__recent{
|
||||
max-height:none;
|
||||
padding-top:6px;
|
||||
}
|
||||
.lh-activity__head{margin-bottom:6px;}
|
||||
.lh-activity__empty{
|
||||
padding:8px;
|
||||
|
|
@ -1139,30 +1150,14 @@ const LH_CSS = `
|
|||
}
|
||||
.lh-activity__recent li em{display:none;}
|
||||
.lh-session-actions{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:stretch;}
|
||||
.lh-actions{padding-top:6px;}
|
||||
.lh-actions .vg-btn{
|
||||
min-height:42px;
|
||||
height:42px;
|
||||
min-height:40px;
|
||||
font-size:14px;
|
||||
padding:0 12px;
|
||||
}
|
||||
.lh-root.has-session-records .lh-actions{
|
||||
flex:none;
|
||||
margin-top:0;
|
||||
}
|
||||
.lh-actions .vg-btn{width:100%;justify-content:center;}
|
||||
.lh-root.has-session-records .lh-actions{
|
||||
align-items:stretch;
|
||||
padding-top:6px;
|
||||
}
|
||||
.lh-root.has-session-records .lh-actions .vg-btn{
|
||||
min-height:36px;
|
||||
height:36px;
|
||||
font-size:13px;
|
||||
padding:0 12px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.lh-persona.is-skel{animation:none;}
|
||||
.lh-skel__box,
|
||||
.lh-skel__line{animation:none;}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue