shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enrich Codex skill metadata display

Browse Source
This commit is contained in:
shiyue
2026-06-18 08:42:57 +08:00
parent 216f87e3b4
commit c50ee527ea
5 changed files with 731 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
public/style.css
View File

@@ -1903,6 +1903,105 @@ body.session-loading-active {
border-bottom-right-radius: 4px;
padding-right: 42px;
}
.msg-mentions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.msg-mention-chip {
--mention-accent: rgba(255, 255, 255, 0.34);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
max-width: 100%;
min-width: 0;
padding: 7px 9px 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
color: inherit;
}
.msg-mention-chip.kind-skill {
width: min(290px, 100%);
}
.msg-mention-chip.kind-prompt,
.msg-mention-chip.kind-file {
background: rgba(255, 255, 255, 0.08);
}
.msg-mention-badge {
min-width: 0;
height: 18px;
width: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: 0 7px;
border-radius: 6px;
background: color-mix(in srgb, var(--mention-accent) 68%, rgba(255, 255, 255, 0.08));
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
}
.msg-mention-badge img {
display: block;
width: 18px;
height: 18px;
margin: 0 -7px;
object-fit: cover;
}
.msg-mention-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.msg-mention-title {
font-size: 12px;
font-weight: 800;
line-height: 1.25;
overflow-wrap: anywhere;
}
.msg-mention-desc {
font-size: 11px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.84);
overflow-wrap: anywhere;
}
.msg-mention-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.msg-mention-pill {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.88);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
overflow-wrap: anywhere;
}
.msg-mention-pill.state-configured {
border-color: rgba(255, 255, 255, 0.28);
background: rgba(93, 138, 84, 0.24);
}
.msg-mention-pill.state-declared {
background: rgba(255, 255, 255, 0.06);
}
.msg.user.codex-steer-message .msg-bubble {
padding-bottom: 10px;
}
@@ -2051,6 +2150,30 @@ body.session-loading-active {
border-bottom-left-radius: 4px;
color: var(--text-primary);
}
.msg.assistant .msg-mention-chip {
border-color: rgba(48, 62, 82, 0.14);
background: rgba(91, 126, 161, 0.07);
color: var(--text-primary);
}
.msg.assistant .msg-mention-chip.kind-prompt,
.msg.assistant .msg-mention-chip.kind-file {
background: rgba(91, 126, 161, 0.05);
}
.msg.assistant .msg-mention-badge {
color: #fff;
}
.msg.assistant .msg-mention-desc {
color: var(--text-secondary);
}
.msg.assistant .msg-mention-pill {
border-color: rgba(48, 62, 82, 0.14);
background: rgba(91, 126, 161, 0.08);
color: var(--text-secondary);
}
.msg.assistant .msg-mention-pill.state-configured {
background: rgba(93, 138, 84, 0.14);
color: var(--success);
}
.note-meta {
margin-bottom: 6px;
color: var(--note-accent);