refactor: improve layout and styling consistency across components

charactergarden/app/src/truthEngine.ts

@@ -127,9 +127,20 @@ const verbHandlers: Record<string, VerbHandler> = {
         reason: `'${t.target.id}' cannot be taken`,
       };
     }
-    // Item must be in the same location as actor
+    
+    // Item must be in the same location as actor (unless already in inventory)
     const actorLocation = actor.attributes["location"];
     const itemLocation = t.target.attributes["location"];
+    const expectedInventory = `inventory:${actor.id}`;
+    
+    // If already in inventory, it's a no-op (already holding it)
+    if (itemLocation === expectedInventory) {
+      return {
+        ok: true,
+        changes: [],
+      };
+    }
+    
     if (actorLocation !== itemLocation) {
       return {
         ok: false,
@@ -139,7 +150,7 @@ const verbHandlers: Record<string, VerbHandler> = {
 
     return {
       ok: true,
-      changes: [attributeChange(t.target, "location", `inventory:${actor.id}`)],
+      changes: [attributeChange(t.target, "location", expectedInventory)],
     };
   },
 

charactergarden/frontend/src/App.tsx

@@ -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>

charactergarden/frontend/src/styles.css

@@ -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;
   }
 }