feat: add title and description fields to capture grammar

Implement | prefix for titles and // separator for descriptions across the full stack: parser, schema, API, CLI, and web frontend. - Parser: line-aware extraction for |title, |title // desc, // leading desc, body // inline desc. URL-safe (skips :// lines). Modifiers (#tag, @time, ^card) extracted from all segments. - Schema: ALTER TABLE migration adds title, description columns - DB: Entity/EntityUpdate structs, all CRUD queries updated - API: title/description on create/update/response, body validation relaxed (title-only entries valid) - CLI: shows title as scan label when present - Web: parseInput mirrors Go parser, list shows title, detail pane renders title + description with double-click inline editing - Tests: 10 new cases (grammar, entity, API) — 71 total, all pass
Merge pull request 'feat: implement nib design system — warm amber palette, dual themes, new typography' (#4 ) from feat/design-system into main
2026-05-15 20:52:58 -04:00 · 2026-05-14 21:04:38 +00:00 · 2026-05-14 17:02:11 -04:00
13 changed files with 981 additions and 379 deletions
@@ -33,6 +33,8 @@ func runAdd(_ *cobra.Command, args []string) error {

 	e := &db.Entity{
 		Body:        parsed.Body,
+		Title:       parsed.Title,
+		Description: parsed.Description,
 		Glyph:       db.Glyph(parsed.Glyph),
 		Tags:        parsed.Tags,
 	}
@@ -53,7 +55,11 @@ func runAdd(_ *cobra.Command, args []string) error {

 	var parts []string
 	parts = append(parts, glyph)
+	if e.Title != nil {
+		parts = append(parts, "  "+*e.Title)
+	} else {
 		parts = append(parts, "  "+e.Body)
+	}
 	if e.TimeAnchor != nil {
 		parts = append(parts, "  @"+*e.TimeAnchor)
 	}
@@ -507,6 +507,115 @@ func TestAbsorbEntity_MissingSourceID(t *testing.T) {
 	}
 }

+func TestCreateEntity_WithTitle(t *testing.T) {
+	srv, _ := testServer(t)
+
+	resp := postJSON(srv, "/api/entities", map[string]any{
+		"body":        "body text",
+		"title":       "nginx trick",
+		"description": "always forget this",
+		"tags":        []string{"ops"},
+	})
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("expected 201, got %d", resp.StatusCode)
+	}
+
+	var e EntityResponse
+	json.NewDecoder(resp.Body).Decode(&e)
+	if e.Title == nil || *e.Title != "nginx trick" {
+		t.Errorf("title: %v", e.Title)
+	}
+	if e.Description == nil || *e.Description != "always forget this" {
+		t.Errorf("description: %v", e.Description)
+	}
+}
+
+func TestCreateEntity_TitleOnly(t *testing.T) {
+	srv, _ := testServer(t)
+
+	title := "title only"
+	resp := postJSON(srv, "/api/entities", map[string]any{
+		"title": title,
+	})
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("expected 201, got %d", resp.StatusCode)
+	}
+
+	var e EntityResponse
+	json.NewDecoder(resp.Body).Decode(&e)
+	if e.Title == nil || *e.Title != "title only" {
+		t.Errorf("title: %v", e.Title)
+	}
+}
+
+func TestUpdateEntity_Title(t *testing.T) {
+	srv, _ := testServer(t)
+	created := createTestEntity(t, srv, "body", nil)
+
+	req, _ := http.NewRequest("PUT", srv.URL+"/api/entities/"+created.ID, bytes.NewReader(
+		mustJSON(map[string]any{"title": "new title"})))
+	req.Header.Set("Content-Type", "application/json")
+	resp, _ := http.DefaultClient.Do(req)
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("expected 200, got %d", resp.StatusCode)
+	}
+
+	var e EntityResponse
+	json.NewDecoder(resp.Body).Decode(&e)
+	if e.Title == nil || *e.Title != "new title" {
+		t.Errorf("title: %v", e.Title)
+	}
+}
+
+func TestUpdateEntity_Description(t *testing.T) {
+	srv, _ := testServer(t)
+	created := createTestEntity(t, srv, "body", nil)
+
+	req, _ := http.NewRequest("PUT", srv.URL+"/api/entities/"+created.ID, bytes.NewReader(
+		mustJSON(map[string]any{"description": "new desc"})))
+	req.Header.Set("Content-Type", "application/json")
+	resp, _ := http.DefaultClient.Do(req)
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("expected 200, got %d", resp.StatusCode)
+	}
+
+	var e EntityResponse
+	json.NewDecoder(resp.Body).Decode(&e)
+	if e.Description == nil || *e.Description != "new desc" {
+		t.Errorf("description: %v", e.Description)
+	}
+}
+
+func TestListEntities_TitleInResponse(t *testing.T) {
+	srv, _ := testServer(t)
+
+	title := "list title"
+	postJSON(srv, "/api/entities", map[string]any{
+		"body":  "body",
+		"title": title,
+	}).Body.Close()
+
+	resp, _ := http.Get(srv.URL + "/api/entities")
+	defer resp.Body.Close()
+
+	var entities []EntityResponse
+	json.NewDecoder(resp.Body).Decode(&entities)
+	if len(entities) != 1 {
+		t.Fatalf("expected 1, got %d", len(entities))
+	}
+	if entities[0].Title == nil || *entities[0].Title != "list title" {
+		t.Errorf("title: %v", entities[0].Title)
+	}
+}
+
 func mustJSON(v any) []byte {
 	b, _ := json.Marshal(v)
 	return b
@@ -11,6 +11,8 @@ import (

 type CreateEntityRequest struct {
 	Body        string   `json:"body"`
+	Title       *string  `json:"title"`
+	Description *string  `json:"description"`
 	Glyph       *string  `json:"glyph"`
 	TimeAnchor  *string  `json:"time_anchor"`
 	Tags        []string `json:"tags"`
@@ -20,6 +22,8 @@ type CreateEntityRequest struct {

 type UpdateEntityRequest struct {
 	Body        *string   `json:"body"`
+	Title       *string   `json:"title"`
+	Description *string   `json:"description"`
 	Glyph       *string   `json:"glyph"`
 	TimeAnchor  *string   `json:"time_anchor"`
 	Tags        *[]string `json:"tags"`
@@ -119,8 +123,8 @@ func createEntity(store *db.Store) http.HandlerFunc {
 			return
 		}

-		if req.Body == "" {
-			writeError(w, http.StatusBadRequest, "invalid_input", "body is required")
+		if req.Body == "" && req.Title == nil {
+			writeError(w, http.StatusBadRequest, "invalid_input", "body or title is required")
 			return
 		}

@@ -135,6 +139,8 @@ func createEntity(store *db.Store) http.HandlerFunc {

 		e := &db.Entity{
 			Body:        req.Body,
+			Title:       req.Title,
+			Description: req.Description,
 			Glyph:       glyph,
 			TimeAnchor:  req.TimeAnchor,
 			Tags:        req.Tags,
@@ -186,6 +192,8 @@ func updateEntity(store *db.Store) http.HandlerFunc {

 		u := &db.EntityUpdate{}
 		u.Body = req.Body
+		u.Title = req.Title
+		u.Description = req.Description
 		u.Tags = req.Tags
 		u.Pinned = req.Pinned
 		u.CardData = req.CardData
@@ -18,6 +18,8 @@ type EntityResponse struct {
 	CreatedAt   string   `json:"created_at"`
 	ModifiedAt  string   `json:"modified_at"`
 	Body        string   `json:"body"`
+	Title       *string  `json:"title"`
+	Description *string  `json:"description"`
 	Glyph       string   `json:"glyph"`
 	TimeAnchor  *string  `json:"time_anchor"`
 	CompletedAt *string  `json:"completed_at"`
@@ -54,6 +56,8 @@ func entityToResponse(e *db.Entity) EntityResponse {
 		CreatedAt:   e.CreatedAt.Format(time.RFC3339),
 		ModifiedAt:  e.ModifiedAt.Format(time.RFC3339),
 		Body:        e.Body,
+		Title:       e.Title,
+		Description: e.Description,
 		Glyph:       string(e.Glyph),
 		Pinned:      e.Pinned,
 		Tags:        e.Tags,
@@ -84,9 +84,16 @@ func (s *Store) migrate() error {
 		CREATE INDEX IF NOT EXISTS idx_entity_tags_tag
 			ON entity_tags(tag);
 	`)
+	if err != nil {
 		return err
 	}

+	s.db.Exec(`ALTER TABLE entities ADD COLUMN title TEXT`)
+	s.db.Exec(`ALTER TABLE entities ADD COLUMN description TEXT`)
+
+	return nil
+}
+
 func DefaultPath() (string, error) {
 	if env := os.Getenv("NIB_DB"); env != "" {
 		return env, nil
@@ -49,6 +49,8 @@ type Entity struct {
 	CreatedAt   time.Time
 	ModifiedAt  time.Time
 	Body        string
+	Title       *string
+	Description *string
 	Glyph       Glyph
 	TimeAnchor  *string
 	CompletedAt *time.Time
@@ -86,6 +88,8 @@ func DefaultListParams() ListParams {

 type EntityUpdate struct {
 	Body        *string
+	Title       *string
+	Description *string
 	Glyph       *Glyph
 	TimeAnchor  *string
 	ClearTime   bool
@@ -111,13 +115,16 @@ func (s *Store) Create(e *Entity) error {
 	defer tx.Rollback()

 	_, err = tx.Exec(`
-		INSERT INTO entities (id, created_at, modified_at, body, glyph, time_anchor,
-			completed_at, pinned, deleted_at, card_type, card_data, use_count, last_used_at)
-		VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+		INSERT INTO entities (id, created_at, modified_at, body, title, description,
+			glyph, time_anchor, completed_at, pinned, deleted_at,
+			card_type, card_data, use_count, last_used_at)
+		VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
 		e.ID,
 		e.CreatedAt.Format(time.RFC3339),
 		e.ModifiedAt.Format(time.RFC3339),
 		e.Body,
+		e.Title,
+		e.Description,
 		string(e.Glyph),
 		e.TimeAnchor,
 		formatTimePtr(e.CompletedAt),
@@ -144,14 +151,17 @@ func (s *Store) Get(id string) (*Entity, error) {
 	var createdAt, modifiedAt string
 	var completedAt, deletedAt, lastUsedAt sql.NullString
 	var timeAnchor, cardType, cardData sql.NullString
+	var title, description sql.NullString
 	var pinned int

 	err := s.db.QueryRow(`
-		SELECT id, created_at, modified_at, body, glyph, time_anchor,
-			completed_at, pinned, deleted_at, card_type, card_data, use_count, last_used_at
+		SELECT id, created_at, modified_at, body, title, description,
+			glyph, time_anchor, completed_at, pinned, deleted_at,
+			card_type, card_data, use_count, last_used_at
 		FROM entities WHERE id = ?`, id).Scan(
-		&e.ID, &createdAt, &modifiedAt, &e.Body, &e.Glyph, &timeAnchor,
-		&completedAt, &pinned, &deletedAt, &cardType, &cardData, &e.UseCount, &lastUsedAt,
+		&e.ID, &createdAt, &modifiedAt, &e.Body, &title, &description,
+		&e.Glyph, &timeAnchor, &completedAt, &pinned, &deletedAt,
+		&cardType, &cardData, &e.UseCount, &lastUsedAt,
 	)
 	if err == sql.ErrNoRows {
 		return nil, ErrNotFound
@@ -162,6 +172,8 @@ func (s *Store) Get(id string) (*Entity, error) {

 	e.CreatedAt, _ = time.Parse(time.RFC3339, createdAt)
 	e.ModifiedAt, _ = time.Parse(time.RFC3339, modifiedAt)
+	e.Title = nullToPtr(title)
+	e.Description = nullToPtr(description)
 	e.TimeAnchor = nullToPtr(timeAnchor)
 	e.CompletedAt = parseTimePtr(completedAt)
 	e.Pinned = pinned != 0
@@ -234,9 +246,9 @@ func (s *Store) List(params ListParams) ([]*Entity, error) {
 	}

 	query := fmt.Sprintf(`
-		SELECT e.id, e.created_at, e.modified_at, e.body, e.glyph, e.time_anchor,
-			e.completed_at, e.pinned, e.deleted_at, e.card_type, e.card_data,
-			e.use_count, e.last_used_at
+		SELECT e.id, e.created_at, e.modified_at, e.body, e.title, e.description,
+			e.glyph, e.time_anchor, e.completed_at, e.pinned, e.deleted_at,
+			e.card_type, e.card_data, e.use_count, e.last_used_at
 		FROM entities e
 		%s
 		ORDER BY %s %s
@@ -256,18 +268,21 @@ func (s *Store) List(params ListParams) ([]*Entity, error) {
 		var createdAt, modifiedAt string
 		var completedAt, deletedAt, lastUsedAt sql.NullString
 		var timeAnchor, cardType, cardData sql.NullString
+		var title, description sql.NullString
 		var pinned int

 		if err := rows.Scan(
-			&e.ID, &createdAt, &modifiedAt, &e.Body, &e.Glyph, &timeAnchor,
-			&completedAt, &pinned, &deletedAt, &cardType, &cardData,
-			&e.UseCount, &lastUsedAt,
+			&e.ID, &createdAt, &modifiedAt, &e.Body, &title, &description,
+			&e.Glyph, &timeAnchor, &completedAt, &pinned, &deletedAt,
+			&cardType, &cardData, &e.UseCount, &lastUsedAt,
 		); err != nil {
 			return nil, err
 		}

 		e.CreatedAt, _ = time.Parse(time.RFC3339, createdAt)
 		e.ModifiedAt, _ = time.Parse(time.RFC3339, modifiedAt)
+		e.Title = nullToPtr(title)
+		e.Description = nullToPtr(description)
 		e.TimeAnchor = nullToPtr(timeAnchor)
 		e.CompletedAt = parseTimePtr(completedAt)
 		e.Pinned = pinned != 0
@@ -308,6 +323,14 @@ func (s *Store) Update(id string, u *EntityUpdate) error {
 		sets = append(sets, "body = ?")
 		args = append(args, *u.Body)
 	}
+	if u.Title != nil {
+		sets = append(sets, "title = ?")
+		args = append(args, *u.Title)
+	}
+	if u.Description != nil {
+		sets = append(sets, "description = ?")
+		args = append(args, *u.Description)
+	}
 	if u.Glyph != nil {
 		sets = append(sets, "glyph = ?")
 		args = append(args, string(*u.Glyph))
@@ -441,3 +441,99 @@ func TestResolve_NotFound(t *testing.T) {
 		t.Errorf("expected ErrNotFound, got %v", err)
 	}
 }
+
+func TestCreate_WithTitleAndDescription(t *testing.T) {
+	s := testStore(t)
+	e := &Entity{
+		Body:        "body text",
+		Title:       ptr("nginx trick"),
+		Description: ptr("always forget this"),
+		Glyph:       GlyphNote,
+		Tags:        []string{"ops"},
+	}
+	if err := s.Create(e); err != nil {
+		t.Fatal(err)
+	}
+
+	got, err := s.Get(e.ID)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if got.Title == nil || *got.Title != "nginx trick" {
+		t.Errorf("title: got %v", got.Title)
+	}
+	if got.Description == nil || *got.Description != "always forget this" {
+		t.Errorf("description: got %v", got.Description)
+	}
+	if got.Body != "body text" {
+		t.Errorf("body: got %q", got.Body)
+	}
+}
+
+func TestCreate_WithoutTitle(t *testing.T) {
+	s := testStore(t)
+	e := &Entity{Body: "just body", Glyph: GlyphNote}
+	if err := s.Create(e); err != nil {
+		t.Fatal(err)
+	}
+
+	got, _ := s.Get(e.ID)
+	if got.Title != nil {
+		t.Errorf("expected nil title, got %v", got.Title)
+	}
+	if got.Description != nil {
+		t.Errorf("expected nil description, got %v", got.Description)
+	}
+}
+
+func TestUpdate_Title(t *testing.T) {
+	s := testStore(t)
+	e := &Entity{Body: "body", Glyph: GlyphNote}
+	s.Create(e)
+
+	newTitle := "new title"
+	if err := s.Update(e.ID, &EntityUpdate{Title: &newTitle}); err != nil {
+		t.Fatal(err)
+	}
+
+	got, _ := s.Get(e.ID)
+	if got.Title == nil || *got.Title != "new title" {
+		t.Errorf("title: got %v", got.Title)
+	}
+}
+
+func TestUpdate_Description(t *testing.T) {
+	s := testStore(t)
+	e := &Entity{Body: "body", Glyph: GlyphNote}
+	s.Create(e)
+
+	newDesc := "new desc"
+	if err := s.Update(e.ID, &EntityUpdate{Description: &newDesc}); err != nil {
+		t.Fatal(err)
+	}
+
+	got, _ := s.Get(e.ID)
+	if got.Description == nil || *got.Description != "new desc" {
+		t.Errorf("description: got %v", got.Description)
+	}
+}
+
+func TestAbsorb_PreservesTargetTitle(t *testing.T) {
+	s := testStore(t)
+	target := &Entity{Body: "target body", Title: ptr("target title"), Glyph: GlyphNote}
+	source := &Entity{Body: "source body", Title: ptr("source title"), Glyph: GlyphNote}
+	s.Create(target)
+	s.Create(source)
+
+	if err := s.Absorb(target.ID, source.ID); err != nil {
+		t.Fatal(err)
+	}
+
+	got, _ := s.Get(target.ID)
+	if got.Title == nil || *got.Title != "target title" {
+		t.Errorf("target title should be preserved, got %v", got.Title)
+	}
+	if got.Body != "target body\nsource body" {
+		t.Errorf("body: got %q", got.Body)
+	}
+}
@@ -3,8 +3,8 @@ package display
 import "github.com/lerko/nib/internal/db"

 var glyphMap = map[db.Glyph]string{
-	db.GlyphNote:  "◦",
-	db.GlyphTodo:  "▸",
+	db.GlyphNote:  "—",
+	db.GlyphTodo:  "○",
 	db.GlyphEvent: "◇",
 }

@@ -25,7 +25,7 @@ func DisplayGlyph(glyph db.Glyph, cardType *db.CardType) string {
 	if g, ok := glyphMap[glyph]; ok {
 		return g
 	}
-	return "◦"
+	return "—"
 }

 func FormatID(id string) string {
@@ -9,6 +9,8 @@ import (
 type Result struct {
 	Body        string
 	Glyph       string
+	Title       *string
+	Description *string
 	TimeAnchor  *string
 	Tags        []string
 	CardSuffix  *string
@@ -35,61 +37,139 @@ func Parse(input string) (*Result, error) {
 		Tags:  []string{},
 	}

-	tokens := strings.Fields(input)
-	if len(tokens) == 0 {
-		return nil, fmt.Errorf("empty input")
-	}
+	remaining := input

-	first := tokens[0]
-	switch first {
+	if sp := strings.IndexByte(remaining, ' '); sp >= 0 {
+		switch remaining[:sp] {
 		case "-", "▸":
 			r.Glyph = "todo"
-		tokens = tokens[1:]
+			remaining = strings.TrimSpace(remaining[sp+1:])
 		case "*", "◇":
 			r.Glyph = "event"
-		tokens = tokens[1:]
+			remaining = strings.TrimSpace(remaining[sp+1:])
+		}
+	} else {
+		switch remaining {
+		case "-", "▸":
+			r.Glyph = "todo"
+			remaining = ""
+		case "*", "◇":
+			r.Glyph = "event"
+			remaining = ""
+		}
 	}

-	var bodyParts []string
-	seen := map[string]bool{}
+	var titleRaw, descRaw string
+	hasTitle := false

+	lines := strings.SplitN(remaining, "\n", 2)
+	firstLine := strings.TrimSpace(lines[0])
+
+	if strings.HasPrefix(firstLine, "|") {
+		hasTitle = true
+		titleContent := firstLine[1:]
+		if idx := strings.Index(titleContent, " // "); idx >= 0 {
+			titleRaw = strings.TrimSpace(titleContent[:idx])
+			descRaw = strings.TrimSpace(titleContent[idx+4:])
+		} else {
+			titleRaw = strings.TrimSpace(titleContent)
+		}
+		if len(lines) > 1 {
+			remaining = lines[1]
+		} else {
+			remaining = ""
+		}
+	} else {
+		allLines := strings.Split(remaining, "\n")
+		var descParts []string
+		startBody := 0
+		for i, line := range allLines {
+			trimmed := strings.TrimSpace(line)
+			if strings.HasPrefix(trimmed, "// ") || trimmed == "//" {
+				descParts = append(descParts, strings.TrimSpace(trimmed[2:]))
+				startBody = i + 1
+			} else {
+				break
+			}
+		}
+		if len(descParts) > 0 {
+			descRaw = strings.Join(descParts, " ")
+			remaining = strings.Join(allLines[startBody:], "\n")
+		} else if !strings.Contains(firstLine, "://") {
+			if idx := strings.Index(firstLine, " // "); idx >= 0 {
+				descRaw = strings.TrimSpace(firstLine[idx+4:])
+				remaining = strings.TrimSpace(firstLine[:idx])
+				if len(lines) > 1 {
+					remaining += "\n" + lines[1]
+				}
+			}
+		}
+	}
+
+	seen := map[string]bool{}
+	extract := func(text string) (string, error) {
+		tokens := strings.Fields(text)
+		var parts []string
 		for _, tok := range tokens {
 			switch {
 			case strings.HasPrefix(tok, "@") && len(tok) > 1:
 				timeStr := tok[1:]
 				if err := validateTime(timeStr); err != nil {
-				return nil, fmt.Errorf("invalid time %q: %w", timeStr, err)
+					return "", fmt.Errorf("invalid time %q: %w", timeStr, err)
 				}
 				if r.TimeAnchor != nil {
-				return nil, fmt.Errorf("multiple time anchors")
+					return "", fmt.Errorf("multiple time anchors")
 				}
 				r.TimeAnchor = &timeStr
-
 			case strings.HasPrefix(tok, "#") && len(tok) > 1:
 				tag := tok[1:]
 				if !seen[tag] {
 					r.Tags = append(r.Tags, tag)
 					seen[tag] = true
 				}
-
 			case strings.HasPrefix(tok, "^") && len(tok) > 1:
 				suffix := tok[1:]
 				cardType, ok := validCardTypes[suffix]
 				if !ok {
-				return nil, fmt.Errorf("invalid card type %q", suffix)
+					return "", fmt.Errorf("invalid card type %q", suffix)
 				}
 				if r.CardSuffix != nil {
-				return nil, fmt.Errorf("multiple card suffixes")
+					return "", fmt.Errorf("multiple card suffixes")
 				}
 				r.CardSuffix = &cardType
-
 			default:
-			bodyParts = append(bodyParts, tok)
+				parts = append(parts, tok)
+			}
+		}
+		return strings.Join(parts, " "), nil
+	}
+
+	if hasTitle {
+		clean, err := extract(titleRaw)
+		if err != nil {
+			return nil, err
+		}
+		if clean != "" {
+			r.Title = &clean
+		}
+	}
+	if descRaw != "" {
+		clean, err := extract(descRaw)
+		if err != nil {
+			return nil, err
+		}
+		if clean != "" {
+			r.Description = &clean
 		}
 	}

-	r.Body = strings.Join(bodyParts, " ")
-	if r.Body == "" {
+	clean, err := extract(remaining)
+	if err != nil {
+		return nil, err
+	}
+	r.Body = clean
+
+	if r.Body == "" && r.Title == nil {
 		return nil, fmt.Errorf("empty body after extracting modifiers")
 	}

@@ -13,46 +13,61 @@ func TestParse(t *testing.T) {
 		input      string
 		wantBody   string
 		wantGlyph  string
+		wantTitle  *string
+		wantDesc   *string
 		wantTime   *string
 		wantTags   []string
 		wantCard   *string
 		wantErrSub string
 	}{
 		// Glyph detection
-		{"plain note", "hello world", "hello world", "note", nil, nil, nil, ""},
-		{"dash todo", "- deploy nginx", "deploy nginx", "todo", nil, nil, nil, ""},
-		{"unicode todo", "▸ deploy nginx", "deploy nginx", "todo", nil, nil, nil, ""},
-		{"star event", "* dentist", "dentist", "event", nil, nil, nil, ""},
-		{"unicode event", "◇ dentist", "dentist", "event", nil, nil, nil, ""},
+		{"plain note", "hello world", "hello world", "note", nil, nil, nil, nil, nil, ""},
+		{"dash todo", "- deploy nginx", "deploy nginx", "todo", nil, nil, nil, nil, nil, ""},
+		{"unicode todo", "▸ deploy nginx", "deploy nginx", "todo", nil, nil, nil, nil, nil, ""},
+		{"star event", "* dentist", "dentist", "event", nil, nil, nil, nil, nil, ""},
+		{"unicode event", "◇ dentist", "dentist", "event", nil, nil, nil, nil, nil, ""},

 		// Time anchor
-		{"with time", "meeting @14:00", "meeting", "note", sp("14:00"), nil, nil, ""},
-		{"time at start", "@9:30 standup", "standup", "note", sp("9:30"), nil, nil, ""},
-		{"invalid hours", "meeting @25:00", "", "", nil, nil, nil, "invalid time"},
-		{"invalid minutes", "meeting @14:60", "", "", nil, nil, nil, "invalid time"},
+		{"with time", "meeting @14:00", "meeting", "note", nil, nil, sp("14:00"), nil, nil, ""},
+		{"time at start", "@9:30 standup", "standup", "note", nil, nil, sp("9:30"), nil, nil, ""},
+		{"invalid hours", "meeting @25:00", "", "", nil, nil, nil, nil, nil, "invalid time"},
+		{"invalid minutes", "meeting @14:60", "", "", nil, nil, nil, nil, nil, "invalid time"},

 		// Tags
-		{"single tag", "deploy #ops", "deploy", "note", nil, []string{"ops"}, nil, ""},
-		{"multiple tags", "deploy #ops #infra", "deploy", "note", nil, []string{"ops", "infra"}, nil, ""},
-		{"duplicate tags", "deploy #ops #ops", "deploy", "note", nil, []string{"ops"}, nil, ""},
-		{"tag with hyphen", "task #dev-ops", "task", "note", nil, []string{"dev-ops"}, nil, ""},
+		{"single tag", "deploy #ops", "deploy", "note", nil, nil, nil, []string{"ops"}, nil, ""},
+		{"multiple tags", "deploy #ops #infra", "deploy", "note", nil, nil, nil, []string{"ops", "infra"}, nil, ""},
+		{"duplicate tags", "deploy #ops #ops", "deploy", "note", nil, nil, nil, []string{"ops"}, nil, ""},
+		{"tag with hyphen", "task #dev-ops", "task", "note", nil, nil, nil, []string{"dev-ops"}, nil, ""},

 		// Card suffix
-		{"caret card", "trick #nginx ^card", "trick", "note", nil, []string{"nginx"}, sp("snippet"), ""},
-		{"caret c", "trick ^c", "trick", "note", nil, nil, sp("snippet"), ""},
-		{"caret template", "deploy ${host} ^template", "deploy ${host}", "note", nil, nil, sp("template"), ""},
-		{"caret snippet explicit", "trick ^snippet", "trick", "note", nil, nil, sp("snippet"), ""},
-		{"invalid card type", "thing ^bogus", "", "", nil, nil, nil, "invalid card type"},
+		{"caret card", "trick #nginx ^card", "trick", "note", nil, nil, nil, []string{"nginx"}, sp("snippet"), ""},
+		{"caret c", "trick ^c", "trick", "note", nil, nil, nil, nil, sp("snippet"), ""},
+		{"caret template", "deploy ${host} ^template", "deploy ${host}", "note", nil, nil, nil, nil, sp("template"), ""},
+		{"caret snippet explicit", "trick ^snippet", "trick", "note", nil, nil, nil, nil, sp("snippet"), ""},
+		{"invalid card type", "thing ^bogus", "", "", nil, nil, nil, nil, nil, "invalid card type"},

 		// Combined
-		{"full input", "- deploy nginx to staging @15:00 #ops", "deploy nginx to staging", "todo", sp("15:00"), []string{"ops"}, nil, ""},
-		{"full with card", "figured out the proxy_pass trick #nginx ^card", "figured out the proxy_pass trick", "note", nil, []string{"nginx"}, sp("snippet"), ""},
+		{"full input", "- deploy nginx to staging @15:00 #ops", "deploy nginx to staging", "todo", nil, nil, sp("15:00"), []string{"ops"}, nil, ""},
+		{"full with card", "figured out the proxy_pass trick #nginx ^card", "figured out the proxy_pass trick", "note", nil, nil, nil, []string{"nginx"}, sp("snippet"), ""},
+
+		// Title
+		{"title with body", "|nginx trick\nproxy_pass trailing slash #ops", "proxy_pass trailing slash", "note", sp("nginx trick"), nil, nil, []string{"ops"}, nil, ""},
+		{"no title", "no pipe here #ops", "no pipe here", "note", nil, nil, nil, []string{"ops"}, nil, ""},
+		{"todo with title", "- |deploy staging\nrebuild docker #ops", "rebuild docker", "todo", sp("deploy staging"), nil, nil, []string{"ops"}, nil, ""},
+		{"title only", "|title only", "", "note", sp("title only"), nil, nil, nil, nil, ""},
+		{"title and desc", "|title // description #ops\nbody here", "body here", "note", sp("title"), sp("description"), nil, []string{"ops"}, nil, ""},
+		{"todo title desc", "- |deploy staging // rebuild and push #ops", "", "todo", sp("deploy staging"), sp("rebuild and push"), nil, []string{"ops"}, nil, ""},
+
+		// Description without title
+		{"leading desc", "// leading desc\nbody content", "body content", "note", nil, sp("leading desc"), nil, nil, nil, ""},
+		{"inline desc", "body text // inline desc", "body text", "note", nil, sp("inline desc"), nil, nil, nil, ""},
+		{"url no split", "http://example.com // should not split", "http://example.com // should not split", "note", nil, nil, nil, nil, nil, ""},

 		// Edge cases
-		{"empty input", "", "", "", nil, nil, nil, "empty"},
-		{"only glyph", "-", "", "", nil, nil, nil, "empty body"},
-		{"only modifiers", "#ops @14:00", "", "", nil, nil, nil, "empty body"},
-		{"whitespace only", "   ", "", "", nil, nil, nil, "empty"},
+		{"empty input", "", "", "", nil, nil, nil, nil, nil, "empty"},
+		{"only glyph", "-", "", "", nil, nil, nil, nil, nil, "empty body"},
+		{"only modifiers", "#ops @14:00", "", "", nil, nil, nil, nil, nil, "empty body"},
+		{"whitespace only", "   ", "", "", nil, nil, nil, nil, nil, "empty"},
 	}

 	for _, tt := range tests {
@@ -79,6 +94,12 @@ func TestParse(t *testing.T) {
 			if got.Glyph != tt.wantGlyph {
 				t.Errorf("glyph: got %q, want %q", got.Glyph, tt.wantGlyph)
 			}
+			if !ptrEq(got.Title, tt.wantTitle) {
+				t.Errorf("title: got %v, want %v", strPtr(got.Title), strPtr(tt.wantTitle))
+			}
+			if !ptrEq(got.Description, tt.wantDesc) {
+				t.Errorf("description: got %v, want %v", strPtr(got.Description), strPtr(tt.wantDesc))
+			}
 			if !ptrEq(got.TimeAnchor, tt.wantTime) {
 				t.Errorf("time_anchor: got %v, want %v", strPtr(got.TimeAnchor), strPtr(tt.wantTime))
 			}
@@ -2,7 +2,7 @@
  'use strict';

  const GLYPHS = {
-    note: '◦', todo: '▸', event: '◇',
+    note: '—', todo: '○', event: '◇',
    snippet: '◆', template: '◈', checklist: '☐',
    decision: '⚖', link: '↗',
  };
@@ -115,19 +115,62 @@
    input = input.trim();
    if (!input) return null;

-    const tokens = input.split(/\s+/);
    let glyph = 'note';
+    let remaining = input;

-    const first = tokens[0];
-    if (first === '-' || first === '▸') { glyph = 'todo'; tokens.shift(); }
-    else if (first === '*' || first === '◇') { glyph = 'event'; tokens.shift(); }
+    const sp = remaining.indexOf(' ');
+    if (sp >= 0) {
+      const first = remaining.slice(0, sp);
+      if (first === '-' || first === '▸') { glyph = 'todo'; remaining = remaining.slice(sp + 1).trim(); }
+      else if (first === '*' || first === '◇') { glyph = 'event'; remaining = remaining.slice(sp + 1).trim(); }
+    } else {
+      if (remaining === '-' || remaining === '▸') { glyph = 'todo'; remaining = ''; }
+      else if (remaining === '*' || remaining === '◇') { glyph = 'event'; remaining = ''; }
+    }

-    const bodyParts = [];
-    let timeAnchor = null;
-    const tags = [];
-    const seenTags = {};
-    let cardSuffix = null;
+    let titleRaw = null, descRaw = null, hasTitle = false;
+    const lines = remaining.split('\n');
+    const firstLine = (lines[0] || '').trim();

+    if (firstLine.startsWith('|')) {
+      hasTitle = true;
+      const titleContent = firstLine.slice(1);
+      const descIdx = titleContent.indexOf(' // ');
+      if (descIdx >= 0) {
+        titleRaw = titleContent.slice(0, descIdx).trim();
+        descRaw = titleContent.slice(descIdx + 4).trim();
+      } else {
+        titleRaw = titleContent.trim();
+      }
+      remaining = lines.slice(1).join('\n');
+    } else {
+      let descParts = [], startBody = 0;
+      for (let i = 0; i < lines.length; i++) {
+        const trimmed = lines[i].trim();
+        if (trimmed.startsWith('// ') || trimmed === '//') {
+          descParts.push(trimmed.slice(2).trim());
+          startBody = i + 1;
+        } else { break; }
+      }
+      if (descParts.length) {
+        descRaw = descParts.join(' ');
+        remaining = lines.slice(startBody).join('\n');
+      } else if (!firstLine.includes('://')) {
+        const dIdx = firstLine.indexOf(' // ');
+        if (dIdx >= 0) {
+          descRaw = firstLine.slice(dIdx + 4).trim();
+          remaining = firstLine.slice(0, dIdx).trim();
+          if (lines.length > 1) remaining += '\n' + lines.slice(1).join('\n');
+        }
+      }
+    }
+
+    let timeAnchor = null, cardSuffix = null;
+    const tags = [], seenTags = {};
+
+    function extract(text) {
+      const tokens = text.split(/\s+/).filter(Boolean);
+      const parts = [];
      for (const tok of tokens) {
        if (tok.startsWith('@') && tok.length > 1) {
          timeAnchor = tok.slice(1);
@@ -138,14 +181,26 @@
          const suffix = tok.slice(1);
          if (VALID_CARDS[suffix]) cardSuffix = VALID_CARDS[suffix];
        } else {
-        bodyParts.push(tok);
+          parts.push(tok);
        }
      }
+      return parts.join(' ');
+    }

-    const body = bodyParts.join(' ');
-    if (!body) return null;
+    let title = null, description = null;
+    if (hasTitle) {
+      const clean = extract(titleRaw || '');
+      if (clean) title = clean;
+    }
+    if (descRaw) {
+      const clean = extract(descRaw);
+      if (clean) description = clean;
+    }

-    return { body, glyph, timeAnchor, tags, cardSuffix };
+    const body = extract(remaining);
+    if (!body && !title) return null;
+
+    return { body, glyph, title, description, timeAnchor, tags, cardSuffix };
  }

  function detectCardType(body) {
@@ -222,7 +277,7 @@
      const groups = groupByDate(state.entities);
      let idx = 0;
      for (const g of groups) {
-        html += `<div class="date-header">── ${g.label} ──</div>`;
+        html += `<div class="date-header">${g.label}</div>`;
        for (const e of g.entities) {
          html += renderEntityItem(e, idx);
          idx++;
@@ -258,9 +313,17 @@
    const time = e.time_anchor ? `<span class="entity-time">@${e.time_anchor}</span>` : '';
    const useBadge = e.use_count > 0 ? `<span class="use-badge">${e.use_count}×</span>` : '';

+    let label;
+    if (e.title) {
+      const preview = e.body ? `<span class="entity-preview">${escHtml(e.body)}</span>` : '';
+      label = `<span class="entity-title">${escHtml(e.title)}</span>${preview}`;
+    } else {
+      label = `<span class="entity-body">${escHtml(e.body)}</span>`;
+    }
+
    return `<div class="entity-item ${selected}" data-index="${idx}" data-id="${e.id}">
      <span class="entity-glyph ${gc}">${glyph}</span>
-      <span class="entity-body">${escHtml(e.body)}</span>
+      ${label}
      ${time}
      <span class="entity-tags">${tags}</span>
      <span class="entity-meta">${useBadge}</span>
@@ -296,18 +359,27 @@
    }
    actions += `<button class="action-btn danger" onclick="nibApp.deleteEntity('${e.id}')">delete</button>`;

+    const descHtml = e.description ? `<div class="detail-desc" data-id="${e.id}">${escHtml(e.description)}</div>` : '';
+    const titleHtml = e.title ? `<h2 class="detail-title" data-id="${e.id}">${escHtml(e.title)}</h2>` : '';
+
    pane.innerHTML = `
      <div class="detail-header">
        <span class="detail-glyph ${gc}">${glyph}</span>
        <span class="detail-id">${shortId}</span>
        ${e.time_anchor ? `<span class="entity-time">@${e.time_anchor}</span>` : ''}
      </div>
+      ${descHtml}
+      ${titleHtml}
      <div class="detail-body" data-id="${e.id}">${escHtml(e.body)}</div>
      ${tags ? `<div class="detail-tags">${tags}</div>` : ''}
      ${cardContent}
      <div class="detail-actions">${actions}</div>
    `;

+    const titleEl = pane.querySelector('.detail-title');
+    if (titleEl) titleEl.addEventListener('dblclick', () => startEditField('title'));
+    const descEl = pane.querySelector('.detail-desc');
+    if (descEl) descEl.addEventListener('dblclick', () => startEditField('description'));
    const bodyEl = pane.querySelector('.detail-body');
    if (bodyEl) bodyEl.addEventListener('dblclick', startEditBody);
  }
@@ -395,6 +467,40 @@
    });
  }

+  function startEditField(field) {
+    const e = state.entities[state.selectedIndex];
+    if (!e) return;
+    const cls = field === 'title' ? '.detail-title' : '.detail-desc';
+    const el = $(`${cls}[data-id="${e.id}"]`);
+    if (!el || el.tagName === 'INPUT') return;
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'detail-field-edit';
+    input.value = e[field] || '';
+    input.placeholder = field;
+    el.replaceWith(input);
+    input.focus();
+
+    async function save() {
+      const val = input.value.trim();
+      if (val !== (e[field] || '')) {
+        await api.updateEntity(e.id, { [field]: val || null });
+        await loadEntities();
+        const idx = state.entities.findIndex(x => x.id === e.id);
+        if (idx >= 0) selectEntity(idx);
+      } else {
+        renderDetailPane();
+      }
+    }
+
+    input.addEventListener('blur', save);
+    input.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Enter') { ev.preventDefault(); input.removeEventListener('blur', save); save(); }
+      if (ev.key === 'Escape') { ev.preventDefault(); input.removeEventListener('blur', save); renderDetailPane(); }
+    });
+  }
+
  // ========== Actions ==========

  function selectEntity(idx) {
@@ -565,9 +671,10 @@
        list.innerHTML = sources.map(e => {
          const g = displayGlyph(e);
          const gc = glyphClass(e);
+          const label = e.title ? escHtml(e.title) : escHtml(e.body);
          return `<div class="absorb-source-item" data-id="${e.id}">
            <span class="entity-glyph ${gc}">${g}</span>
-            <span class="entity-body">${escHtml(e.body)}</span>
+            <span class="entity-body">${label}</span>
          </div>`;
        }).join('');
      }
@@ -615,6 +722,8 @@
      glyph: parsed.glyph,
      tags: parsed.tags,
    };
+    if (parsed.title) data.title = parsed.title;
+    if (parsed.description) data.description = parsed.description;
    if (parsed.timeAnchor) data.time_anchor = parsed.timeAnchor;
    if (parsed.cardSuffix) data.card_type = parsed.cardSuffix;

@@ -754,6 +863,20 @@
    return escHtml(s).replace(/'/g, '&#39;');
  }

+  // ========== Theme ==========
+
+  const themeToggle = $('#theme-toggle');
+  let nibTheme = localStorage.getItem('nib:theme') || 'dark';
+  document.documentElement.setAttribute('data-theme', nibTheme);
+  themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑';
+
+  themeToggle.addEventListener('click', () => {
+    nibTheme = nibTheme === 'dark' ? 'paper' : 'dark';
+    document.documentElement.setAttribute('data-theme', nibTheme);
+    localStorage.setItem('nib:theme', nibTheme);
+    themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑';
+  });
+
  // ========== Init ==========

  async function init() {
@@ -1,10 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>nib</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/style.css">
+    <style>
+        @font-face { font-family: 'Monaspace Neon'; font-weight: 300; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Light.woff2') format('woff2'); }
+        @font-face { font-family: 'Monaspace Neon'; font-weight: 400; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Regular.woff2') format('woff2'); }
+        @font-face { font-family: 'Monaspace Neon'; font-weight: 500; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Medium.woff2') format('woff2'); }
+        @font-face { font-family: 'Monaspace Neon'; font-weight: 700; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Bold.woff2') format('woff2'); }
+    </style>
 </head>
 <body>
    <div id="app">
@@ -17,8 +26,9 @@
                </nav>
            </div>
            <form id="capture-bar" autocomplete="off">
-                <input type="text" id="capture-input" placeholder="capture... (n to focus)" spellcheck="false">
+                <input type="text" id="capture-input" placeholder="capture — - todo  # note  * event" spellcheck="false">
            </form>
+            <button class="theme-toggle" id="theme-toggle" title="toggle theme">◑</button>
        </header>
        <main>
            <aside id="tag-rail"></aside>
@@ -1,29 +1,63 @@
+/* ── TOKENS ─────────────────────────────────────────── */
 :root {
-    --bg: #1a1b26;
-    --bg-surface: #24283b;
-    --bg-hover: #292e42;
-    --bg-selected: #33394d;
-    --text: #c0caf5;
-    --text-dim: #565f89;
-    --text-muted: #3b4261;
-    --accent: #7aa2f7;
-    --accent-dim: #3d59a1;
-    --green: #9ece6a;
-    --red: #f7768e;
-    --yellow: #e0af68;
-    --orange: #ff9e64;
-    --purple: #bb9af7;
-    --cyan: #7dcfff;
-    --border: #292e42;
-    --radius: 6px;
-    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
-    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    color-scheme: dark;
+    --bg: #0c0b09;
+    --surf: #111009;
+    --raised: #1a1715;
+    --border: #252118;
+    --soft: #1e1b16;
+    --text: #e8dfc8;
+    --muted: #8c8070;
+    --dim: #504840;
+    --accent: #c8942a;
+    --a-bg: rgba(200,148,42,.09);
+    --todo: #d4a84b;
+    --note: #6ab8b0;
+    --event: #6898c8;
+    --remind: #c8784a;
+    --ok: #7aab72;
+    --danger: #b85858;
+    --lineage: #9878bc;
+    --pin: #c8942a;
+    --sans: 'Space Grotesk', system-ui, sans-serif;
+    --mono: 'Monaspace Neon', ui-monospace, monospace;
+    --r1: 2px;
+    --r2: 4px;
+    --r3: 8px;
+    --t-fast: 80ms ease;
+    --t-base: 200ms ease;
 }

-* { margin: 0; padding: 0; box-sizing: border-box; }
+[data-theme="paper"] {
+    color-scheme: light;
+    --bg: #f4efe4;
+    --surf: #faf7f0;
+    --raised: #ece7db;
+    --border: #d4cdc0;
+    --soft: #e6e0d4;
+    --text: #1c1810;
+    --muted: #6a5e50;
+    --dim: #a09080;
+    --accent: #8a6018;
+    --a-bg: rgba(138,96,24,.08);
+    --todo: #7a5c00;
+    --note: #1a7070;
+    --event: #245890;
+    --remind: #984020;
+    --ok: #2a6828;
+    --danger: #882030;
+    --lineage: #5830a0;
+    --pin: #8a6018;
+}
+
+/* ── RESET ──────────────────────────────────────────── */
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+::-webkit-scrollbar { width: 3px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

 body {
-    font-family: var(--font-sans);
+    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
@@ -38,14 +72,15 @@ body {
    height: 100vh;
 }

-/* Header */
+/* ── HEADER ─────────────────────────────────────────── */
 header {
    display: flex;
    align-items: center;
    gap: 16px;
-    padding: 12px 20px;
+    padding: 0 20px;
+    height: 36px;
    border-bottom: 1px solid var(--border);
-    background: var(--bg-surface);
+    background: var(--surf);
    flex-shrink: 0;
 }

@@ -57,32 +92,33 @@ header {
 }

 .logo {
-    font-family: var(--font-mono);
-    font-size: 18px;
-    font-weight: 700;
+    font-family: var(--mono);
+    font-size: 15px;
+    font-weight: 300;
    color: var(--accent);
-    letter-spacing: -0.5px;
+    letter-spacing: .3em;
 }

 nav {
    display: flex;
-    gap: 4px;
+    gap: 2px;
 }

 .nav-btn {
    background: none;
-    border: 1px solid transparent;
-    color: var(--text-dim);
-    padding: 4px 12px;
-    border-radius: var(--radius);
+    border: none;
+    color: var(--dim);
+    padding: 4px 8px;
+    border-radius: var(--r1);
    cursor: pointer;
-    font-size: 13px;
-    font-family: var(--font-mono);
-    transition: all 0.15s;
+    font-size: 11px;
+    font-family: var(--sans);
+    font-weight: 500;
+    transition: color var(--t-fast), background var(--t-fast);
 }

-.nav-btn:hover { color: var(--text); background: var(--bg-hover); }
-.nav-btn.active { color: var(--accent); border-color: var(--accent-dim); background: var(--bg); }
+.nav-btn:hover { color: var(--muted); }
+.nav-btn.active { color: var(--accent); background: var(--a-bg); }

 #capture-bar {
    flex: 1;
@@ -92,31 +128,36 @@ nav {
 #capture-input {
    width: 100%;
    background: var(--bg);
-    border: 1px solid var(--text-muted);
+    border: 1px solid var(--border);
    color: var(--text);
-    padding: 8px 12px;
-    border-radius: var(--radius);
-    font-family: var(--font-mono);
-    font-size: 13px;
+    padding: 4px 10px;
+    border-radius: var(--r2);
+    font-family: var(--mono);
+    font-size: 12px;
    outline: none;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition: border-color var(--t-fast);
 }

-#capture-input:hover {
-    border-color: var(--accent-dim);
-    box-shadow: 0 0 0 1px var(--accent-dim);
+#capture-input:hover { border-color: var(--muted); }
+#capture-input:focus { border-color: var(--accent); }
+#capture-input::placeholder { color: var(--dim); }
+
+.theme-toggle {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--r1);
+    color: var(--dim);
+    font-family: var(--mono);
+    font-size: 13px;
+    padding: 2px 8px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color var(--t-fast), border-color var(--t-fast);
 }

-#capture-input:focus {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 1px var(--accent);
-}
+.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

-#capture-input::placeholder {
-    color: var(--text-dim);
-}
-
-/* Main layout */
+/* ── MAIN LAYOUT ────────────────────────────────────── */
 main {
    display: grid;
    grid-template-columns: 180px 1fr 320px;
@@ -124,36 +165,38 @@ main {
    overflow: hidden;
 }

-/* Tag rail */
+/* ── TAG RAIL ───────────────────────────────────────── */
 #tag-rail {
    border-right: 1px solid var(--border);
    padding: 12px 0;
    overflow-y: auto;
+    background: var(--surf);
 }

 .tag-item {
    display: flex;
    justify-content: space-between;
-    padding: 6px 16px;
+    padding: 4px 16px;
    cursor: pointer;
-    font-size: 13px;
-    color: var(--text-dim);
-    transition: all 0.1s;
+    font-size: 11px;
+    color: var(--muted);
+    transition: color var(--t-fast), background var(--t-fast);
 }

-.tag-item:hover { background: var(--bg-hover); color: var(--text); }
-.tag-item.active { color: var(--accent); background: var(--bg-selected); }
+.tag-item:hover { background: var(--raised); color: var(--text); }
+.tag-item.active { color: var(--accent); background: var(--a-bg); }

-.tag-name { font-family: var(--font-mono); }
-.tag-name::before { content: '#'; color: var(--text-muted); }
+.tag-name { font-family: var(--mono); font-size: 11px; }
+.tag-name::before { content: '#'; color: var(--dim); }
 .tag-count {
-    font-size: 11px;
-    color: var(--text-muted);
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--dim);
    min-width: 20px;
    text-align: right;
 }

-/* Entity panel */
+/* ── ENTITY PANEL ───────────────────────────────────── */
 #entity-panel {
    display: flex;
    flex-direction: column;
@@ -164,32 +207,30 @@ main {
    display: flex;
    align-items: center;
    gap: 8px;
-    padding: 8px 20px;
-    border-bottom: 1px solid var(--border);
+    padding: 6px 20px;
+    border-bottom: 1px solid var(--soft);
    flex-shrink: 0;
 }

-#month-nav:empty {
-    display: none;
-}
+#month-nav:empty { display: none; }

 .month-nav-btn {
    background: none;
    border: none;
-    color: var(--text-dim);
-    font-family: var(--font-mono);
-    font-size: 13px;
+    color: var(--dim);
+    font-family: var(--mono);
+    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
-    border-radius: 4px;
-    transition: all 0.1s;
+    border-radius: var(--r1);
+    transition: color var(--t-fast), background var(--t-fast);
 }

-.month-nav-btn:hover { color: var(--text); background: var(--bg-hover); }
+.month-nav-btn:hover { color: var(--text); background: var(--raised); }

 .month-nav-label {
-    font-family: var(--font-mono);
-    font-size: 13px;
+    font-family: var(--mono);
+    font-size: 11px;
    color: var(--text);
    min-width: 80px;
    text-align: center;
@@ -198,75 +239,108 @@ main {
 .month-nav-clear {
    background: none;
    border: none;
-    color: var(--text-muted);
-    font-family: var(--font-mono);
-    font-size: 11px;
+    color: var(--dim);
+    font-family: var(--mono);
+    font-size: 10px;
    cursor: pointer;
    margin-left: auto;
+    transition: color var(--t-fast);
 }

 .month-nav-clear:hover { color: var(--text); }

-/* Entity list */
+/* ── ENTITY LIST ────────────────────────────────────── */
 #entity-list {
    overflow-y: auto;
-    padding: 8px 0;
+    padding: 4px 0;
    flex: 1;
 }

 .date-header {
+    display: flex;
+    align-items: center;
+    gap: .6rem;
    padding: 8px 20px 4px;
-    font-size: 11px;
-    font-family: var(--font-mono);
-    color: var(--text-muted);
-    text-transform: lowercase;
-    letter-spacing: 0.5px;
+    font-size: 10px;
+    font-family: var(--mono);
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: .2em;
+}
+
+.date-header::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--soft);
 }

 .entity-item {
    display: flex;
    align-items: center;
-    gap: 10px;
-    padding: 8px 20px;
+    gap: 8px;
+    padding: 6px 20px;
    cursor: pointer;
-    transition: background 0.1s;
+    transition: background var(--t-fast);
    border-left: 2px solid transparent;
 }

-.entity-item:hover { background: var(--bg-hover); }
+.entity-item:hover { background: var(--raised); }
 .entity-item.selected {
-    background: var(--bg-selected);
+    background: var(--surf);
    border-left-color: var(--accent);
 }

 .entity-glyph {
-    font-size: 14px;
-    width: 20px;
+    font-family: var(--mono);
+    font-size: 12px;
+    width: 14px;
    text-align: center;
    flex-shrink: 0;
+    font-weight: 500;
 }

-.glyph-note { color: var(--text-dim); }
-.glyph-todo { color: var(--green); }
-.glyph-event { color: var(--yellow); }
+.glyph-note { color: var(--dim); }
+.glyph-todo { color: var(--todo); }
+.glyph-event { color: var(--event); }
 .glyph-snippet { color: var(--accent); }
-.glyph-template { color: var(--purple); }
-.glyph-checklist { color: var(--orange); }
-.glyph-decision { color: var(--cyan); }
-.glyph-link { color: var(--red); }
+.glyph-template { color: var(--lineage); }
+.glyph-checklist { color: var(--remind); }
+.glyph-decision { color: var(--note); }
+.glyph-link { color: var(--danger); }
+
+.entity-title {
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.entity-preview {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 8px;
+}

 .entity-body {
    flex: 1;
-    font-size: 13px;
+    font-family: var(--mono);
+    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 .entity-time {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--text-dim);
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--dim);
    flex-shrink: 0;
 }

@@ -277,40 +351,42 @@ main {
 }

 .entity-tag {
-    font-family: var(--font-mono);
-    font-size: 10px;
-    color: var(--accent-dim);
-    background: rgba(122, 162, 247, 0.1);
+    font-family: var(--mono);
+    font-size: 9px;
+    color: var(--muted);
+    border: 1px solid var(--border);
    padding: 1px 6px;
-    border-radius: 3px;
+    border-radius: var(--r1);
 }

 .entity-meta {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--text-muted);
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--dim);
    flex-shrink: 0;
    display: flex;
    gap: 8px;
 }

 .use-badge {
-    color: var(--yellow);
+    color: var(--todo);
    font-size: 10px;
 }

-/* Detail pane */
+/* ── DETAIL PANE ────────────────────────────────────── */
 #detail-pane {
    border-left: 1px solid var(--border);
    padding: 20px;
    overflow-y: auto;
+    background: var(--surf);
 }

 .detail-empty {
-    color: var(--text-muted);
-    font-size: 13px;
+    color: var(--dim);
+    font-size: 12px;
    text-align: center;
    margin-top: 40px;
+    font-family: var(--mono);
 }

 .detail-header {
@@ -320,44 +396,85 @@ main {
    margin-bottom: 16px;
 }

-.detail-glyph { font-size: 20px; }
+.detail-glyph { font-size: 16px; }

 .detail-id {
-    font-family: var(--font-mono);
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--dim);
+}
+
+.detail-desc {
+    font-family: var(--sans);
    font-size: 11px;
-    color: var(--text-muted);
+    color: var(--muted);
+    margin-bottom: 4px;
+    cursor: text;
+    padding: 2px 6px;
+    margin-left: -6px;
+    border-radius: var(--r2);
+    transition: background var(--t-fast);
+}
+
+.detail-desc:hover { background: var(--raised); }
+
+.detail-title {
+    font-family: var(--sans);
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 12px;
+    cursor: text;
+    padding: 2px 6px;
+    margin-left: -6px;
+    border-radius: var(--r2);
+    transition: background var(--t-fast);
+}
+
+.detail-title:hover { background: var(--raised); }
+
+.detail-field-edit {
+    display: block;
+    width: 100%;
+    font-family: var(--sans);
+    font-size: 14px;
+    margin-bottom: 12px;
+    padding: 4px 8px;
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--accent);
+    border-radius: var(--r2);
+    outline: none;
 }

 .detail-body {
-    font-size: 14px;
+    font-family: var(--mono);
+    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
-    border-radius: var(--radius);
+    border-radius: var(--r2);
    padding: 4px 6px;
    margin-left: -6px;
-    transition: background 0.1s;
+    transition: background var(--t-fast);
 }

-.detail-body:hover {
-    background: var(--bg-hover);
-}
+.detail-body:hover { background: var(--raised); }

 .detail-body-edit {
    display: block;
    width: 100%;
    min-height: 80px;
-    font-family: var(--font-sans);
-    font-size: 14px;
+    font-family: var(--mono);
+    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 16px;
    padding: 6px 8px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--accent);
-    border-radius: var(--radius);
+    border-radius: var(--r2);
    outline: none;
    resize: vertical;
    white-space: pre-wrap;
@@ -372,38 +489,43 @@ main {
 }

 .detail-tag {
-    font-family: var(--font-mono);
-    font-size: 12px;
+    font-family: var(--mono);
+    font-size: 11px;
    color: var(--accent);
-    background: rgba(122, 162, 247, 0.1);
+    border: 1px solid currentColor;
+    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
+    background: var(--a-bg);
    padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: var(--r1);
 }

 .detail-actions {
    display: flex;
-    gap: 8px;
+    gap: 6px;
    flex-wrap: wrap;
 }

 .action-btn {
-    background: var(--bg-hover);
+    background: none;
    border: 1px solid var(--border);
-    color: var(--text);
-    padding: 6px 14px;
-    border-radius: var(--radius);
+    color: var(--muted);
+    padding: 4px 12px;
+    border-radius: var(--r1);
    cursor: pointer;
-    font-size: 12px;
-    font-family: var(--font-mono);
-    transition: all 0.15s;
+    font-size: 11px;
+    font-family: var(--mono);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    transition: color var(--t-fast), border-color var(--t-fast);
 }

 .action-btn:hover { border-color: var(--accent); color: var(--accent); }
-.action-btn.primary { background: var(--accent-dim); border-color: var(--accent); color: white; }
-.action-btn.danger { border-color: var(--red); color: var(--red); }
-.action-btn.danger:hover { background: rgba(247, 118, 142, 0.1); }
+.action-btn.primary { border-color: var(--accent); color: var(--accent); background: var(--a-bg); }
+.action-btn.danger { color: var(--danger); border-color: var(--danger); }
+.action-btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }

-/* Template slot form */
+/* ── TEMPLATE SLOTS ─────────────────────────────────── */
 .slot-form { margin: 16px 0; }

 .slot-field {
@@ -414,9 +536,9 @@ main {
 }

 .slot-label {
-    font-family: var(--font-mono);
-    font-size: 12px;
-    color: var(--purple);
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--lineage);
    min-width: 80px;
 }

@@ -426,15 +548,16 @@ main {
    border: 1px solid var(--border);
    color: var(--text);
    padding: 4px 8px;
-    border-radius: 4px;
-    font-family: var(--font-mono);
-    font-size: 12px;
+    border-radius: var(--r2);
+    font-family: var(--mono);
+    font-size: 11px;
    outline: none;
+    transition: border-color var(--t-fast);
 }

-.slot-input:focus { border-color: var(--purple); }
+.slot-input:focus { border-color: var(--lineage); }

-/* Checklist */
+/* ── CHECKLIST ──────────────────────────────────────── */
 .checklist-step {
    display: flex;
    align-items: center;
@@ -442,25 +565,18 @@ main {
    padding: 4px 0;
 }

-.checklist-step input[type="checkbox"] {
-    accent-color: var(--green);
-}
+.checklist-step input[type="checkbox"] { accent-color: var(--ok); }
+.checklist-step.done span { text-decoration: line-through; color: var(--muted); }

-.checklist-step.done span {
-    text-decoration: line-through;
-    color: var(--text-dim);
-}
-
-/* Decision card */
-.decision-field {
-    margin-bottom: 12px;
-}
+/* ── DECISION CARD ──────────────────────────────────── */
+.decision-field { margin-bottom: 12px; }

 .decision-label {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--cyan);
-    margin-bottom: 4px;
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--note);
+    text-transform: uppercase;
+    letter-spacing: .1em;
 }

 .decision-value {
@@ -468,7 +584,7 @@ main {
    color: var(--text);
 }

-/* Modal */
+/* ── MODAL ──────────────────────────────────────────── */
 .modal { display: none; }
 .modal.visible { display: flex; }

@@ -484,17 +600,17 @@ main {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
-    background: var(--bg-surface);
+    background: var(--surf);
    border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: var(--r3);
    padding: 24px;
    z-index: 101;
    min-width: 320px;
 }

 .modal-content h3 {
-    font-family: var(--font-mono);
-    font-size: 14px;
+    font-family: var(--mono);
+    font-size: 13px;
    color: var(--text);
    margin-bottom: 16px;
    font-weight: 500;
@@ -503,27 +619,28 @@ main {
 .type-picker {
    display: flex;
    flex-direction: column;
-    gap: 6px;
+    gap: 4px;
 }

 .type-btn {
    display: flex;
    align-items: center;
    gap: 12px;
-    padding: 10px 16px;
+    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
-    border-radius: var(--radius);
+    border-radius: var(--r2);
    cursor: pointer;
-    font-size: 13px;
-    transition: all 0.15s;
+    font-size: 12px;
+    font-family: var(--mono);
+    transition: border-color var(--t-fast), background var(--t-fast);
 }

-.type-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
-.type-btn.suggested { border-color: var(--accent-dim); background: rgba(122, 162, 247, 0.05); }
+.type-btn:hover { border-color: var(--accent); background: var(--raised); }
+.type-btn.suggested { border-color: var(--accent); background: var(--a-bg); }

-.type-glyph { font-size: 16px; width: 24px; text-align: center; }
+.type-glyph { font-size: 14px; width: 20px; text-align: center; }

 .modal-close {
    display: block;
@@ -532,36 +649,36 @@ main {
    padding: 6px;
    background: none;
    border: none;
-    color: var(--text-muted);
-    font-size: 11px;
+    color: var(--dim);
+    font-size: 10px;
    cursor: pointer;
-    font-family: var(--font-mono);
+    font-family: var(--mono);
+    transition: color var(--t-fast);
 }

-/* Load more */
+.modal-close:hover { color: var(--muted); }
+
+/* ── LOAD MORE ──────────────────────────────────────── */
 .load-more-wrap {
    padding: 12px 20px;
    text-align: center;
 }

 .load-more-btn {
-    background: var(--bg-hover);
+    background: none;
    border: 1px solid var(--border);
-    color: var(--text-dim);
-    padding: 6px 24px;
-    border-radius: var(--radius);
+    color: var(--dim);
+    padding: 4px 20px;
+    border-radius: var(--r1);
    cursor: pointer;
-    font-family: var(--font-mono);
-    font-size: 12px;
-    transition: all 0.15s;
+    font-family: var(--mono);
+    font-size: 11px;
+    transition: color var(--t-fast), border-color var(--t-fast);
 }

-.load-more-btn:hover {
-    border-color: var(--accent);
-    color: var(--accent);
-}
+.load-more-btn:hover { border-color: var(--accent); color: var(--accent); }

-/* Absorb modal */
+/* ── ABSORB MODAL ───────────────────────────────────── */
 .absorb-list {
    max-height: 300px;
    overflow-y: auto;
@@ -570,25 +687,23 @@ main {
 .absorb-source-item {
    display: flex;
    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
+    gap: 8px;
+    padding: 6px 12px;
    cursor: pointer;
-    border-radius: var(--radius);
-    transition: background 0.1s;
+    border-radius: var(--r2);
+    transition: background var(--t-fast);
 }

-.absorb-source-item:hover {
-    background: var(--bg-hover);
-}
+.absorb-source-item:hover { background: var(--raised); }

 .absorb-source-item .entity-body {
-    font-size: 13px;
+    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

-/* Responsive */
+/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
    main { grid-template-columns: 1fr; }
    #tag-rail { display: none; }
@@ -597,11 +712,11 @@ main {
        inset: 0;
        top: auto;
        height: 50vh;
-        background: var(--bg-surface);
+        background: var(--surf);
        border-top: 1px solid var(--border);
        border-left: none;
        transform: translateY(100%);
-        transition: transform 0.2s;
+        transition: transform var(--t-base);
        z-index: 50;
    }
    #detail-pane.visible { transform: translateY(0); }