bluemsi/connectai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.2.17: Google Service Control & Astra Office Flow Layer

Browse Source
This commit is contained in:
g1nation
2026-05-16 22:51:15 +09:00
parent 961e2cb4ea
commit 84b2b0670d
19 changed files with 700 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/astraOffice/view/officeStyles.ts
+62 -3
View File
@@ -149,7 +149,9 @@ button,input,select{font:inherit}
background:rgba(255,255,255,.035);
transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.roster-item[data-agent]{cursor:pointer}
.roster-item.active{border-color:rgba(138,124,255,.48);background:linear-gradient(180deg,rgba(138,124,255,.16),rgba(138,124,255,.08));transform:translateX(2px)}
.roster-item.preview{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.roster-avatar{
width:33px;height:33px;border-radius:12px;
display:grid;place-items:center;
@@ -164,6 +166,12 @@ button,input,select{font:inherit}
.roster-status{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28)}
.roster-item.active .roster-status{background:var(--role-color,var(--accent));box-shadow:0 0 12px var(--role-color,var(--accent))}
.office-shell{min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
.office-shell[data-roster-empty="true"] .office{filter:saturate(.72) brightness(.9)}
.office-shell[data-roster-empty="true"] .stage{opacity:.86}
.office-shell[data-status="executing"] .office{box-shadow:inset 0 0 0 1px rgba(138,124,255,.12),0 0 0 1px rgba(138,124,255,.08)}
.office-shell[data-status="reviewing"] .office{box-shadow:inset 0 0 0 1px rgba(70,216,255,.14),0 0 0 1px rgba(70,216,255,.08)}
.office-shell[data-status="waiting_approval"] .office{box-shadow:inset 0 0 0 1px rgba(245,196,90,.16),0 0 0 1px rgba(245,196,90,.08)}
.office-shell[data-status="error"] .office{box-shadow:inset 0 0 0 1px rgba(255,107,122,.18),0 0 0 1px rgba(255,107,122,.08)}
.mission-strip{
min-height:72px;
display:flex;
@@ -203,11 +211,36 @@ button,input,select{font:inherit}
radial-gradient(circle at 18% 100%,rgba(70,216,255,.12),transparent 28%),
linear-gradient(135deg,#31283A,#201A29 72%);
}
.office:before{content:'';position:absolute;left:0;right:0;top:16%;bottom:0;background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:48px 48px}
.office:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 40%,rgba(0,0,0,.18) 100%);pointer-events:none}
.office.has-art{
background:
linear-gradient(180deg,rgba(6,10,18,.06),rgba(6,10,18,.12)),
var(--office-backdrop) center center / cover no-repeat;
}
.office:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;opacity:.28}
.office.has-art:before{background:linear-gradient(180deg,rgba(4,7,14,.06),transparent 28%,rgba(4,7,14,.1));opacity:1}
.office:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 42%,rgba(0,0,0,.2) 100%);pointer-events:none}
.stage{position:relative;width:720px;height:585px;margin:0;z-index:2}
.flow-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.flow-route{
fill:none;
stroke:rgba(138,124,255,.34);
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:5 8;
filter:drop-shadow(0 0 6px rgba(138,124,255,.25));
}
.flow-node{
fill:rgba(138,124,255,.18);
stroke:rgba(255,255,255,.34);
stroke-width:1.2;
}
.flow-node[data-status="done"]{fill:rgba(53,215,164,.34);stroke:rgba(53,215,164,.8)}
.flow-node[data-status="active"]{fill:rgba(138,124,255,.6);stroke:#D8D2FF;filter:drop-shadow(0 0 8px rgba(138,124,255,.72))}
.flow-node[data-status="pending"]{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.22)}
.wall-window{position:absolute;top:16px;width:86px;height:42px;border:2px solid rgba(215,228,255,.35);border-radius:8px;background:linear-gradient(180deg,rgba(160,208,255,.34),rgba(110,150,210,.08));box-shadow:inset 0 0 0 1px rgba(15,20,31,.55)}
.wall-window.w1{left:84px}.wall-window.w2{left:550px}
.office.has-art .wall-window{display:none}
.obj,.desk,.char{position:absolute;image-rendering:pixelated}
.obj{filter:drop-shadow(3px 5px 0 rgba(0,0,0,.28));z-index:4}
.desk{width:112px;z-index:5;filter:drop-shadow(4px 7px 0 rgba(0,0,0,.28))}
@@ -231,6 +264,32 @@ button,input,select{font:inherit}
.char[data-agent="support"],.desk[data-agent="support"],.roster-item[data-agent="support"]{--role-color:#94A3B8}
.char[data-agent="writer"],.desk[data-agent="writer"],.roster-item[data-agent="writer"]{--role-color:#FBBF24}
.desk::after{content:'';position:absolute;inset:-4px;border-radius:10px;border:1px solid transparent;pointer-events:none;transition:border-color .2s ease,box-shadow .2s ease}
.desk.pipeline-desk::after{border-color:rgba(255,255,255,.12)}
.desk[data-flow="done"]::after{border-color:rgba(53,215,164,.26)}
.desk[data-flow="active"]::after{border-color:rgba(138,124,255,.72);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 20px rgba(138,124,255,.34)}
.desk[data-flow="pending"]::after{border-color:rgba(255,255,255,.16)}
.flow-badge{
position:absolute;
right:-7px;
top:-12px;
min-width:28px;
height:22px;
display:grid;
place-items:center;
padding:0 7px;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background:rgba(8,12,22,.88);
color:#E7E2FF;
font-size:10px;
font-weight:750;
letter-spacing:.01em;
box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.desk[data-flow="done"] .flow-badge{color:#B7FFE7;border-color:rgba(53,215,164,.28)}
.desk[data-flow="active"] .flow-badge{color:#F2EFFF;border-color:rgba(138,124,255,.5);background:rgba(31,24,66,.92)}
.desk.preview::after{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 18px rgba(255,255,255,.16)}
.char.preview::before{content:'';position:absolute;left:18px;top:-14px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.42);box-shadow:0 0 18px rgba(255,255,255,.18)}
.stage:has(.char.active[data-agent="ceo"]) .desk[data-agent="ceo"]::after,
.stage:has(.char.active[data-agent="planner"]) .desk[data-agent="planner"]::after,
.stage:has(.char.active[data-agent="researcher"]) .desk[data-agent="researcher"]::after,
@@ -241,7 +300,7 @@ button,input,select{font:inherit}
.stage:has(.char.active[data-agent="support"]) .desk[data-agent="support"]::after,
.stage:has(.char.active[data-agent="writer"]) .desk[data-agent="writer"]::after{border-color:var(--role-color);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 18px color-mix(in srgb,var(--role-color) 35%,transparent)}
.shadow{position:absolute;left:12px;bottom:0;width:28px;height:7px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
.bubble{position:absolute;z-index:20;transform:translate(-50%,-100%);max-width:180px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,24,.92);color:var(--text);font-size:11px;line-height:1.2;box-shadow:0 10px 24px rgba(0,0,0,.28);white-space:nowrap}
.bubble{position:absolute;z-index:20;transform:translate(-50%,-100%);max-width:180px;padding:7px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,24,.92);color:var(--text);font-size:11px;line-height:1.35;box-shadow:0 10px 24px rgba(0,0,0,.28);white-space:normal}
.brief-grid{display:flex;flex-direction:column;gap:10px}
.brief-card{
padding:14px;