sketchferret/CharacterGardenStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve layout and styling consistency across components

Browse Source
This commit is contained in:
spencer
2026-04-23 21:08:54 -04:00
parent 1df2ae8164
commit c2d12ffcc9
3 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
charactergarden/frontend/src/App.tsx
View File

@@ -146,7 +146,7 @@ export default function App() {
<section className="result-card">
<h2>Latest result</h2>
<p>{latest.narration}</p>
<pre>{JSON.stringify({ actions: latest.actions, rejected: latest.rejected, latent: latest.latent_resolution }, null, 2)}</pre>
<pre>{JSON.stringify({ actions: latest.actions, rejected: latest.rejected, latent: latest.latent_resolution }, null, 0)}</pre>
</section>
) : null}
@@ -160,9 +160,8 @@ export default function App() {
<ul className="entity-list">
{snapshot?.entities.map((entity) => (
<li key={entity.id}>
<strong>{entity.name}</strong>
<span>{entity.type}</span>
<pre>{JSON.stringify(entity.attributes, null, 2)}</pre>
<strong>{entity.name}</strong> <span>{entity.type}</span>
<pre>{JSON.stringify(entity.attributes, null, 0)}</pre>
</li>
))}
</ul>
@@ -173,9 +172,7 @@ export default function App() {
<ul className="timeline-list">
{snapshot?.turns.slice().reverse().map((turn) => (
<li key={turn.id}>
<strong>Turn {turn.turn}</strong>
<p>{turn.input}</p>
<p>{turn.output}</p>
<strong>Turn {turn.turn}:</strong> {turn.input} → {turn.output}
</li>
))}
</ul>
@@ -186,8 +183,7 @@ export default function App() {
<ul className="timeline-list compact">
{snapshot?.events.slice().reverse().map((event) => (
<li key={event.id}>
<strong>{event.result}</strong>
<pre>{JSON.stringify(event.action, null, 2)}</pre>
<strong>{event.result}:</strong> <pre>{JSON.stringify(event.action, null, 0)}</pre>
</li>
))}
</ul>
@@ -199,9 +195,7 @@ export default function App() {
<ul className="timeline-list compact">
{snapshot?.beliefs.map((belief) => (
<li key={`${belief.entity_id}-${belief.claim}`}>
<strong>{belief.entity_id}</strong>
<p>{belief.claim}</p>
<p>confidence: {belief.confidence}</p>
<strong>{belief.entity_id}:</strong> {belief.claim} ({belief.confidence})
</li>
))}
</ul>
@@ -209,8 +203,7 @@ export default function App() {
<ul className="timeline-list compact">
{snapshot?.summaries.map((summary) => (
<li key={summary.id}>
<strong>{summary.turn_range.join("-")}</strong>
<p>{summary.text}</p>
<strong>{summary.turn_range.join("-")}:</strong> {summary.text}
</li>
))}
</ul>

36
charactergarden/frontend/src/styles.css
View File

@@ -26,15 +26,15 @@ textarea {
.page-shell {
width: min(1400px, calc(100vw - 32px));
margin: 0 auto;
padding: 32px 0 48px;
padding: 16px 0 24px;
}
.hero-panel {
padding: 32px;
padding: 20px;
border: 1px solid rgba(244, 239, 228, 0.16);
background: rgba(19, 24, 18, 0.68);
backdrop-filter: blur(12px);
border-radius: 28px;
border-radius: 20px;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
}
@@ -65,8 +65,8 @@ h1 {
.turn-form {
display: grid;
gap: 12px;
margin-top: 24px;
gap: 8px;
margin-top: 12px;
}
.turn-form textarea {
@@ -81,7 +81,7 @@ h1 {
.actions-row {
display: grid;
gap: 12px;
gap: 8px;
}
.actions-row > button,
@@ -108,21 +108,21 @@ h1 {
.result-card,
.panel {
border-radius: 24px;
padding: 24px;
border-radius: 16px;
padding: 16px;
border: 1px solid rgba(244, 239, 228, 0.12);
background: rgba(11, 16, 12, 0.58);
}
.result-card {
margin-top: 24px;
margin-top: 12px;
}
.inspector-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 24px;
gap: 12px;
margin-top: 12px;
}
.entity-list,
@@ -131,13 +131,13 @@ h1 {
padding: 0;
margin: 0;
display: grid;
gap: 14px;
gap: 8px;
}
.entity-list li,
.timeline-list li {
padding: 16px;
border-radius: 18px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
}
@@ -151,12 +151,14 @@ h1 {
pre {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.85rem;
font-size: 0.75rem;
color: #cfd9c2;
margin: 4px 0 0 0;
padding: 4px 0;
}
.compact li {
padding: 12px;
padding: 8px 10px;
}
.error-banner {
@@ -176,6 +178,6 @@ pre {
.hero-panel,
.panel {
padding: 20px;
padding: 14px;
}
}