some stylistic fixes

crates/weaver-app/assets/styling/record-view.css

···
     padding-top: 0.5rem;
 }
 
+.path-prefix {
+    color: var(--color-muted);
+    opacity: 0.7;
+}
+
+.path-final {
+    color: var(--color-text);
+    font-weight: 500;
+}
+
+.array-len {
+    font-family: var(--font-mono);
+    color: var(--color-subtle);
+    font-size: 0.9rem;
+    font-weight: 400;
+    padding-left: 0.125rem;
+    padding-top: 0.5rem;
+}
+
 .field-value {
     font-family: var(--font-mono);
     color: var(--color-text);
-    font-size: 1rem;
+    font-size: 0.9rem;
     padding-top: 0.2rem;
     padding-bottom: 0.1rem;
     word-break: break-word;
···
     max-width: 600px;
     max-height: 400px;
     margin-top: 0.5rem;
-    border: 1px solid var(--color-border);
     margin-bottom: 0.5rem;
 }
 

crates/weaver-app/src/views/record.rs

···
                 class: "record-view-container",
                 div {
                     class: "record-header",
-                    h1 { "Record Inspector" }
+                    h1 { "Record" }
                     div {
                         class: "record-metadata",
                         div { class: "metadata-row",
···
         rsx! {
             div {
                 class: "record-view-container",
-                h1 { "Record Inspector" }
+                h1 { "Record" }
                 p { "URI: {uri}" }
                 p { "Loading..." }
             }
···
 }
 
 #[component]
+fn PathLabel(path: String) -> Element {
+    if path.is_empty() {
+        return rsx! {};
+    }
+
+    // Find the last separator
+    let last_sep = path.rfind(|c| c == '.');
+
+    if let Some(idx) = last_sep {
+        let prefix = &path[..idx + 1];
+        let final_segment = &path[idx + 1..];
+        rsx! {
+            span { class: "field-label",
+                span { class: "path-prefix", "{prefix}" }
+                span { class: "path-final", "{final_segment}" }
+            }
+        }
+    } else {
+        rsx! {
+            span { class: "field-label","{path}" }
+        }
+    }
+}
+
+#[component]
 fn DataView(data: Data<'static>, path: String, did: String) -> Element {
     match &data {
         Data::Null => rsx! {
             div { class: "record-field",
-                span { class: "field-label", "{path}" }
+                PathLabel { path: path.clone() }
                 span { class: "field-value muted", "null" }
             }
         },
         Data::Boolean(b) => rsx! {
             div { class: "record-field",
-                span { class: "field-label", "{path}" }
+                PathLabel { path: path.clone() }
                 span { class: "field-value", "{b}" }
             }
         },
         Data::Integer(i) => rsx! {
             div { class: "record-field",
-                span { class: "field-label", "{path}" }
+                PathLabel { path: path.clone() }
                 span { class: "field-value", "{i}" }
             }
         },
···
 
             rsx! {
                 div { class: "record-field",
-                    span { class: "field-label", "{path}" }
+                    PathLabel { path: path.clone() }
                     span { class: "field-value",
 
                         HighlightedString { string_type: s.clone() }
···
             };
             rsx! {
                 div { class: "record-field",
-                    span { class: "field-label", "{path}" }
+                    PathLabel { path: path.clone() }
                     pre { class: "field-value bytes", "{hex_string} [{byte_size}]" }
                 }
             }
···
         },
         Data::Array(arr) => rsx! {
             div { class: "record-section",
-                div { class: "section-label", "{path}" span { class: "field-label", "[{arr.len()}] " } }
+                div { class: "section-label", "{path}" span { class: "array-len", "[{arr.len()}] " } }
 
                 div { class: "section-content",
                     for (idx, item) in arr.iter().enumerate() {