zib/Veskslop-t
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add voice audio, capture and transcript, browser monitor, and DM UI

Browse Source
This commit is contained in:
Fisto
2026-09-14 11:19:06 +02:00
parent 65f0788502
commit c003d9532f
27 changed files with 4479 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
poc/public/style.css
+288
View File
@@ -166,6 +166,12 @@ button {
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
width: 100%;
background: none;
border: none;
color: var(--color-text);
text-align: left;
font-family: inherit;
}
.vk-menu-item:hover {
@@ -268,6 +274,151 @@ button {
font-size: 12.5px;
}
.vk-start-server {
padding: 5px 12px;
font-size: 12px;
animation: vk-bloom 2.4s ease-in-out infinite;
}
@keyframes vk-bloom {
0%,
100% {
box-shadow: 0 0 0 0 transparent;
}
50% {
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.vk-start-server {
animation: none;
}
}
.vk-scope {
display: inline-flex;
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
overflow: hidden;
}
.vk-scope-btn {
padding: 5px 12px;
font-size: 12.5px;
background: none;
border: none;
color: var(--color-neutral-400);
cursor: pointer;
}
.vk-scope-btn + .vk-scope-btn {
border-left: 1px solid var(--color-divider);
}
.vk-scope-btn:hover {
color: var(--color-text);
}
.vk-scope-btn.active {
color: var(--color-accent);
box-shadow: inset 0 0 0 1px var(--color-accent);
}
/* The main areas dim and stop taking input while the bridge is down. */
.vk-offline .vk-body,
.vk-offline .vk-console {
opacity: 0.5;
filter: saturate(0.6);
pointer-events: none;
}
.vk-rail-scope {
display: flex;
flex-direction: column;
gap: 14px;
}
.vk-dm-row {
position: relative;
}
.vk-dm-badge {
display: grid;
place-items: center;
min-width: 17px;
height: 16px;
padding: 0 4px;
margin-right: 2px;
border-radius: 8px;
font: 500 10px/1 ui-monospace, Menlo, monospace;
flex: none;
}
.vk-dm-badge.unread {
background: var(--color-accent-800);
color: var(--color-accent-100);
}
.vk-dm-badge.mention {
background: color-mix(in srgb, var(--color-mention) 35%, transparent);
color: var(--color-mention);
}
.vk-dm-badge.muted {
background: var(--color-neutral-800);
color: var(--color-neutral-300);
}
.vk-dm-time {
margin-left: auto;
font: 400 10px/1 ui-monospace, Menlo, monospace;
color: var(--color-neutral-400);
flex: none;
}
.vk-star {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: none;
color: var(--color-neutral-500);
cursor: pointer;
flex: none;
}
.vk-star:hover {
color: var(--color-accent-300);
}
.vk-star.on {
color: var(--color-accent-400);
}
.vk-person-name.speaking,
.vk-voice-member .speaking,
.vk-right-name .speaking {
font-weight: 700;
}
.vk-marks .unavailable {
opacity: 0.35;
}
:root {
--color-mention: #d29922;
}
.vk-client-audio.active {
color: var(--color-accent);
border-color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
/* Call strip */
.vk-call-strip {
@@ -484,6 +635,18 @@ button {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 0;
background: none;
border: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.vk-rail-voice-head:hover .vk-rail-name {
color: var(--color-accent-300);
}
.vk-rail-voice-members {
@@ -989,6 +1152,24 @@ a.vk-attachment:hover {
padding: 10px 6px 0;
}
.vk-right-group {
display: flex;
flex-direction: column;
gap: 1px;
margin-bottom: 6px;
}
.vk-right-group-head {
display: flex;
align-items: center;
gap: 7px;
padding: 4px 6px;
font-size: 12.5px;
color: var(--color-neutral-300);
background: var(--color-neutral-900);
border-radius: var(--radius-sm);
}
.vk-roadmap {
display: flex;
flex-direction: column;
@@ -1002,6 +1183,63 @@ a.vk-attachment:hover {
color: var(--color-neutral-500);
}
.vk-transcript {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
min-height: 0;
}
.vk-transcript-toolbar {
display: flex;
align-items: center;
gap: 10px;
}
.vk-transcript-toolbar .vk-small-btn {
margin-left: auto;
}
.vk-transcript-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
}
.vk-transcript-line {
display: flex;
gap: 8px;
align-items: baseline;
color: var(--color-neutral-400);
}
.vk-transcript-line .vk-transcript-time {
flex: none;
color: var(--color-neutral-500);
}
.vk-transcript-line .vk-transcript-speaker {
flex: none;
min-width: 84px;
color: var(--color-accent-300);
}
.vk-transcript-line .vk-transcript-text {
color: var(--color-neutral-200);
word-break: break-word;
}
.vk-transcript-line .vk-transcript-wav {
flex: none;
color: var(--color-neutral-500);
}
/* Voice state marks */
.vk-marks {
@@ -1280,6 +1518,56 @@ a.vk-attachment:hover {
flex-direction: column;
}
.vk-settings-group {
display: flex;
flex-direction: column;
}
.vk-settings-summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
padding: 6px 0;
font: 500 12px/1 var(--font-heading);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-neutral-300);
}
.vk-settings-summary::-webkit-details-marker {
display: none;
}
.vk-settings-summary:hover {
color: var(--color-accent-300);
}
.vk-settings-group:not([open]) .vk-caret {
transform: rotate(-90deg);
}
.vk-settings-group-body {
display: flex;
flex-direction: column;
gap: 22px;
padding-top: 12px;
}
.vk-select {
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-divider);
border-radius: var(--radius-sm);
padding: 4px 8px;
font-size: 12.5px;
}
.vk-select:disabled {
opacity: 0.55;
}
.vk-settings-actions {
margin-left: auto;
display: flex;